/*
Theme Name: EZN
Theme URI: https://www.ezn.cl
Description: Child theme de Blocksy con el sistema de marca EZN (tokens del manual de marca, ago 2026). Hooks de WooCommerce y reglas de negocio viven aquí.
Author: Comercial Tesalia
Template: blocksy
Version: 1.2.0
Text Domain: blocksy-child
*/

/* ==========================================================================
   Tokens de marca EZN (fuente de verdad: Manual de marca EZN, ago 2026)
   ========================================================================== */
:root {
  /* Colores de marca */
  --ezn-navy: #0B0B33;         /* marca, titulares, header/footer, texto ppal */
  --ezn-verde: #3BF5CF;        /* acento (máx ~10% de la vista), hover */
  --ezn-verde-profundo: #00BFA0; /* botones de compra, enlaces */
  --ezn-rojo: #FA0E3C;         /* SOLO ofertas/urgencia */
  --ezn-gris-fondo: #F4F5F9;
  --ezn-blanco: #FFFFFF;
  --ezn-texto-sec: #4A4A6A;
  --ezn-gris-medio: #7A7A9D;
  --ezn-gris-claro: #A0A0BD;
  --ezn-borde: #E2E3EE;
  /* Funcionales (nunca decorativos) */
  --ezn-exito: #00A876;
  --ezn-error: #D6082F;
  --ezn-advertencia: #F5A800;

  /* == Mapeo a la paleta de Blocksy ==
     OJO: Blocksy usa 7/8 como fondos de página/superficies. El rojo EZN
     NUNCA va en la paleta (solo ofertas, vía --ezn-rojo). */
  --theme-palette-color-1: var(--ezn-verde-profundo); /* primario/acción */
  --theme-palette-color-2: var(--ezn-verde);          /* hover primario */
  --theme-palette-color-3: var(--ezn-texto-sec);      /* texto */
  --theme-palette-color-4: var(--ezn-navy);           /* titulares */
  --theme-palette-color-5: var(--ezn-borde);          /* bordes */
  --theme-palette-color-6: var(--ezn-gris-fondo);     /* fondo sutil */
  --theme-palette-color-7: var(--ezn-gris-fondo);     /* fondo de página */
  --theme-palette-color-8: var(--ezn-blanco);         /* superficies/tarjetas */

  /* Texto y titulares */
  --theme-text-color: var(--ezn-texto-sec);
  --theme-headings-color: var(--ezn-navy);

  /* Enlaces: navy → hover verde profundo (manual: links #0B0B33 → #00BFA0) */
  --theme-link-initial-color: var(--ezn-navy);
  --theme-link-hover-color: var(--ezn-verde-profundo);

  /* Botón primario: fondo verde profundo, texto navy; hover → verde claro */
  --theme-button-background-initial-color: var(--ezn-verde-profundo);
  --theme-button-background-hover-color: var(--ezn-verde);
  --theme-button-text-initial-color: var(--ezn-navy);
  --theme-button-text-hover-color: var(--ezn-navy);
  --theme-button-font-weight: 700;
  --theme-button-min-height: 48px;
  --theme-button-border-radius: 8px;

  /* Formularios */
  --theme-form-field-border-initial-color: var(--ezn-borde);
  --theme-form-field-border-focus-color: var(--ezn-verde-profundo);
  --theme-form-field-border-radius: 8px;
}

/* ==========================================================================
   Tipografía (Google Fonts encoladas en functions.php)
   H1/H2 Teko MAYÚSCULAS · cuerpo Archivo · badges Saira Condensed
   ========================================================================== */
body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--ezn-gris-fondo);
}

h1, h2, .ct-page-title h1 {
  font-family: 'Teko', sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
}
h1 { font-weight: 700; font-size: 52px; }
h2 { font-weight: 600; font-size: 34px; }
h3, h4, h5, h6 { font-family: 'Archivo', sans-serif; font-weight: 700; }

/* Transiciones sutiles (~150ms ease, según manual) */
a, button, .ct-button, input, .product { transition: all .15s ease; }

/* ==========================================================================
   Botones (Archivo 700 · radio 8 · padding 14x28 · min 48px)
   ========================================================================== */
.ct-button, button[type="submit"], .single_add_to_cart_button,
.wc-block-components-button, .checkout-button {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  padding: 14px 28px;
  min-height: 48px;
}
.ct-button:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--ezn-navy);
  outline-offset: 2px;
}
button:disabled, .ct-button:disabled {
  background: var(--ezn-borde) !important;
  color: var(--ezn-gris-claro) !important;
}

/* ==========================================================================
   WooCommerce: tarjetas de producto
   Blanco · borde 1px #E2E3EE · radio 12 · foto sobre gris · sin sombras
   ========================================================================== */
[data-products] .product,
ul.products li.product {
  background: var(--ezn-blanco);
  border: 1px solid var(--ezn-borde);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
}
/* Fondo BLANCO tras la foto (no el gris del manual): con object-fit:contain
   las fotos de YUJU (fondo blanco) dejarían bandas grises visibles. */
[data-products] .product .ct-media-container,
[data-products] .product figure,
ul.products li.product .ct-media-container,
ul.products li.product figure {
  background: var(--ezn-blanco);
}
/* Imágenes de producto SIN recorte (grilla, relacionados y galería).
   Las fotos que manda YUJU traen proporciones dispares (desde 0.3 hasta 3.2):
   el ratio fijo de Blocksy (4:3 tarjetas, 3:4 galería, inline en el <img>)
   + object-fit:cover las mostraba con "zoom" cortado. Caja cuadrada uniforme
   y contain: el producto completo siempre visible sobre el fondo gris.
   !important: el ratio de Blocksy viene inline en el <img>.
   Complemento en la VM: woocommerce_thumbnail_cropping = uncropped +
   wp media regenerate (el crop duro 300x300 ya perdía contenido en archivo). */
.product .ct-media-container img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}
.woocommerce-loop-product__title {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ezn-navy);
}
.price {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--ezn-navy);
}
/* Precio rebajado: rojo + original tachado gris */
.price ins { color: var(--ezn-rojo); text-decoration: none; }
.price del { color: var(--ezn-gris-claro); font-weight: 400; }

/* Badge de oferta: rojo, texto blanco, Saira Condensed, arriba-izquierda */
.onsale, span.onsale {
  background: var(--ezn-rojo) !important;
  color: #fff !important;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 8px;
}

/* Stock / avisos funcionales */
.stock.in-stock { color: var(--ezn-exito); }
.stock.out-of-stock { color: var(--ezn-error); }

/* ==========================================================================
   Header navy fijo (principio 3 del manual)
   ========================================================================== */
header#header.ct-header [data-row],
.ct-header .ct-panel-content {
  background-color: var(--ezn-navy);
}
/* Navegación sobre navy: blanco → hover verde EZN */
.ct-header .ct-menu-link,
.ct-header [data-id="menu"] a,
.ct-header .ct-header-cart .ct-label,
.ct-header .ct-icon,
.ct-header svg {
  color: #fff;
  fill: #fff;
}
.ct-header .ct-menu-link:hover,
.ct-header [data-id="menu"] a:hover {
  color: var(--ezn-verde);
}

/* ==========================================================================
   Wordmark EZN en CSS puro (manual: Teko 700 itálica skewX(-10°) +
   vector de velocidad: 3 barras skewX(-30°), proporción 74:26:10)
   Se construye sobre .site-title — los SVG con <text> no cargan Teko
   dentro de <img>, así que el header usa esta versión CSS.
   ========================================================================== */
.ct-header .site-title {
  display: inline-block;
}
.ct-header .site-title a {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  font-style: italic;
  font-size: 42px !important;
  line-height: 1 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ezn-verde) !important; /* sobre navy: verde EZN */
  display: inline-block;
  transform: skewX(-10deg);
  text-decoration: none;
}
.ct-header .site-title a:hover { color: var(--ezn-verde) !important; }
/* Vector de velocidad: 3 barras decrecientes (74:26:10, gap 8) */
.ct-header .site-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 6px;
  margin-top: 3px;
  transform: skewX(-30deg);
  background: linear-gradient(
    90deg,
    var(--ezn-verde) 0 58.7%, transparent 58.7% 65%,
    var(--ezn-verde) 65% 85.7%, transparent 85.7% 92%,
    var(--ezn-verde) 92% 100%
  );
}

/* ==========================================================================
   Hero de portada (navy, H1 Teko blanco, CTA verde)
   ========================================================================== */
/* La portada usa su propio hero: fuera el título de página de Blocksy */
.home .hero-section { display: none; }
.ezn-hero {
  background-color: var(--ezn-navy);
  padding: 72px 24px;
  text-align: center;
}
.ezn-hero h1 {
  color: #fff;
  margin-bottom: 8px;
}
.ezn-hero h1 em,
.ezn-hero h1 strong {
  color: var(--ezn-verde);
  font-style: inherit;
}
.ezn-hero p {
  color: var(--ezn-gris-claro);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 28px;
}
.ezn-hero .wp-block-button__link {
  background-color: var(--ezn-verde-profundo);
  color: var(--ezn-navy);
  font-weight: 700;
  border-radius: 8px;
  padding: 14px 28px;
}
.ezn-hero .wp-block-button__link:hover {
  background-color: var(--ezn-verde);
  color: var(--ezn-navy);
}

/* ==========================================================================
   Aviso pre-lanzamiento (gate EZN_TIENDA_ABIERTA en functions.php)
   ========================================================================== */
.ezn-aviso-pronto {
  background: var(--ezn-navy);
  color: var(--ezn-verde);
  text-align: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ezn-verde-profundo);
}

/* ==========================================================================
   Footer navy
   ========================================================================== */
/* !important: el CSS dinámico de Blocksy se imprime después del child */
footer#footer.ct-footer {
  background-color: var(--ezn-navy) !important;
}
footer#footer.ct-footer,
footer#footer.ct-footer .ct-footer-copyright {
  color: var(--ezn-gris-claro);
}
footer#footer.ct-footer a { color: #fff; }
footer#footer.ct-footer a:hover { color: var(--ezn-verde); }