/*
Theme Name:  Pchela Child
Template:    astra
Author:      Pchela
Description: Child theme de Astra para Pchelá. Implementa el Brief (PCHELA-DESIGN-SYSTEM.md). Sin !important: gana por orden de carga (child después del padre) y especificidad.
Version:     1.0.0
Text Domain: pchela-child
*/

/* ==========================================================================
   1) Variables del Brief (sección 6). Disponibles para todo el sitio.
   ========================================================================== */
:root{
  --primary:#232E78; --primary-dark:#18215A; --secondary:#1A2347;
  --accent:#3D4FBF; --accent-dark:#2E3EA0; --accent-soft:#E9ECFB;
  --info:#009CDE; --success:#019C34; --error:#D92D20;
  --background:#F4F6FC; --background-alt:#EAEEF8; --surface:#FFFFFF;
  --text-primary:#1A2347; --text-secondary:#5B6480; --text-on-dark:#AEBBD6; --border:#E2E7F1;
  --font-heading:'Inter',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:9999px;
  --shadow-1:0 1px 4px rgba(0,48,135,.06); --shadow-2:0 8px 24px rgba(0,48,135,.10);
  --shadow-3:0 20px 48px rgba(0,48,135,.14); --shadow-cta:0 10px 30px rgba(61,79,191,.4);
  --container:1180px; --container-pad:24px;
}

/* Fondo general de página (Brief: off-white frío #F4F6FC) */
body{ background-color:var(--background); }

/* ==========================================================================
   2) Botones globales (Brief 4 y 5.4): pill, peso 700, sin mayúsculas.
   El color/relleno/radio van por settings nativos de Astra; acá la tipografía.
   ========================================================================== */
.ast-button, .button, button.button, input[type="submit"], input[type="button"],
.wp-block-button__link{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}

/* ==========================================================================
   3) Inputs (Brief 4): pill, fondo frío, foco navy con halo.
   ========================================================================== */
input[type="text"], input[type="email"], input[type="search"], input[type="url"],
input[type="tel"], input[type="number"], input[type="password"], select{
  background-color:var(--background);
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  color:var(--text-primary);
}
textarea{
  background-color:var(--background);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  color:var(--text-primary);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input[type="password"]:focus, select:focus, textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
  background-color:var(--surface);
  outline:none;
}

/* ==========================================================================
   4) WooCommerce — specs de marca (Brief 10).
   ========================================================================== */
/* Precio en fuente mono, color navy */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--font-mono);
  color:var(--primary);
  font-weight:600;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del{ color:var(--text-secondary); }

/* "Añadir al carrito" y CTA de tienda = acento cobalto (Brief 10) */
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button.button{
  background-color:var(--accent);
  color:#ffffff;
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button.button:hover{
  background-color:var(--accent-dark);
}

/* Card de producto: radius 18, borde, sombra y hover que eleva -3px (Brief 4/10) */
.woocommerce ul.products li.product{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  transition:box-shadow 140ms ease, transform 140ms ease;
  overflow:hidden;
}
.woocommerce ul.products li.product:hover{
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}