/* ==========================================================================
   Portada EZN (front-page.php). Todo va bajo .ezn-portada para no tocar el
   resto de la tienda. Colores desde los tokens --ezn-* de style.css.
   ========================================================================== */
.ezn-portada {
  --p-navy-1: #0e0e3c;                    /* panel elevado sobre navy */
  --p-muted: #A0A0BD;                     /* texto tenue sobre navy */
  --p-line: rgba(59, 245, 207, .16);      /* línea fina verde sobre navy */
  background: var(--ezn-navy);
  color: #fff;
  font-family: 'Archivo', system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: clip;
}
.ezn-portada a { text-decoration: none; }
.ezn-portada h1,
.ezn-portada h2 { margin: 0; }
.ezn-p-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ezn-p-label {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}

/* ---------- Hero: textos y botones (comunes a todas las temporadas) ---------- */
.ezn-p-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ezn-verde); font-size: 12px; margin-bottom: 22px;
}
.ezn-p-eyebrow .bars {
  width: 26px; height: 9px; transform: skewX(-30deg);
  background: linear-gradient(90deg, var(--ezn-verde) 0 58%, transparent 58% 66%,
    var(--ezn-verde) 66% 85%, transparent 85% 92%, var(--ezn-verde) 92% 100%);
}
.ezn-p-hero h1 {
  font-family: 'Teko', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(48px, 6vw, 86px); line-height: .9; letter-spacing: .005em;
  color: #fff; transform: skewX(-4deg); text-wrap: balance;
}
.ezn-p-hero h1 .mint { color: var(--ezn-verde); }
.ezn-p-lead { color: #C9C9E0; font-size: 17.5px; max-width: 44ch; margin: 22px 0 0; }

.ezn-p-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ezn-p-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-weight: 700; font-size: 15.5px; border-radius: 10px; padding: 13px 26px;
  border: 1px solid transparent;
  transition: transform .18s, background .2s, border-color .2s, color .2s;
}
.ezn-p-btn .arrow { transition: transform .2s; }
.ezn-p-btn:hover .arrow { transform: translateX(5px); }
.ezn-p-btn.primary { background: var(--ezn-verde); color: var(--ezn-navy); }
.ezn-p-btn.primary:hover { background: #5df8d8; color: var(--ezn-navy); transform: translateY(-2px); }
.ezn-p-btn.ghost { color: #fff; border-color: var(--p-line); }
.ezn-p-btn.ghost:hover { border-color: var(--ezn-verde); color: var(--ezn-verde); }

/* Compartir la portada: enlace discreto bajo los botones (el menú es el de style.css) */
.ezn-compartir--portada { margin-top: 18px; }
.ezn-compartir--portada .ezn-compartir__boton {
  border: 0; padding: 6px 0; color: var(--p-muted); font-weight: 600; font-size: 14px;
}
.ezn-compartir--portada .ezn-compartir__boton:hover,
.ezn-compartir--portada .ezn-compartir__boton:focus-visible { color: var(--ezn-verde); }

.ezn-p-brands {
  margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--p-muted); font-size: 12.5px;
}
.ezn-p-brands .ezn-p-label { letter-spacing: .16em; }
.ezn-p-brands .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ezn-verde-profundo); }
.ezn-p-brands b { color: #D8D8EA; font-weight: 600; }

@media (max-width: 480px) {
  .ezn-p-wrap { padding: 0 16px; }
  .ezn-p-btn { flex: 1 1 100%; justify-content: center; }
}

/* Divisor diagonal hacia la banda clara */
.ezn-p-diag { height: 64px; background: var(--ezn-gris-fondo); clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }

/* ---------- Encabezado de sección (categorías y productos) ---------- */
.ezn-p-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.ezn-p-head .k { color: var(--ezn-verde-profundo); font-size: 12px; margin-bottom: 8px; display: block; }
.ezn-p-head h2 {
  font-family: 'Teko', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 44px; line-height: .9; color: var(--ezn-navy); transform: skewX(-4deg);
}
/* «Equípate con EZN»: el logo (versión fondo claro) va en la línea del título, a la altura de
   las mayúsculas; el logo ya es itálico, así que se le quita la inclinación del título */
.ezn-p-head h2.con-logo .logo { display: inline-block; height: .68em; width: auto; margin-left: .14em; vertical-align: .02em; transform: skewX(4deg); }
.ezn-p-head .all {
  color: var(--ezn-navy); font-weight: 600; font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid var(--ezn-verde); padding-bottom: 3px;
}
.ezn-p-head .all:hover { color: var(--ezn-verde-profundo); }

/* ---------- Arma tu bici ---------- */
.ezn-p-cats { background: var(--ezn-gris-fondo); color: var(--ezn-navy); padding: 8px 0 72px; scroll-margin-top: 24px; }
.ezn-p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ezn-p-cat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 200px; padding: 24px 22px 20px; border-radius: 16px;
  background: var(--ezn-navy); color: #fff; transition: transform .2s;
}
.ezn-p-cat::before {
  content: ""; position: absolute; top: 0; right: 0; width: 74px; height: 74px;
  background: var(--ezn-verde); clip-path: polygon(100% 0, 0 0, 100% 100%); opacity: .9;
  transition: width .25s, height .25s;
}
.ezn-p-cat:hover { transform: translateY(-4px); color: #fff; }
.ezn-p-cat:hover::before { width: 88px; height: 88px; }
.ezn-p-cat .glyph { width: 56px; height: 56px; color: var(--ezn-verde); }
.ezn-p-cat .name {
  font-family: 'Teko', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 30px; line-height: .9; transform: skewX(-4deg);
}
.ezn-p-cat .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.ezn-p-cat .n { color: var(--p-muted); font-size: 12.5px; }
.ezn-p-cat .go { color: var(--ezn-verde); font-weight: 700; font-size: 13px; }
@media (max-width: 820px) { .ezn-p-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .ezn-p-grid { gap: 12px; }
  .ezn-p-cat { min-height: 160px; padding: 18px 16px 16px; }
  .ezn-p-cat .name { font-size: 26px; }
  .ezn-p-cat .n { display: none; }
  .ezn-p-head h2 { font-size: 36px; }
}

/* ---------- Lo nuevo (grilla de WooCommerce sobre banda blanca) ---------- */
.ezn-p-nuevo { background: #fff; color: var(--ezn-texto-sec); padding: 64px 0 56px; }
.ezn-p-nuevo .woocommerce ul.products { margin-bottom: 0; }

/* ---------- Franja de confianza ---------- */
.ezn-p-trust { background: var(--p-navy-1); border-top: 1px solid var(--p-line); padding: 30px 0; }
.ezn-p-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ezn-p-trust .item { display: flex; align-items: center; gap: 13px; }
.ezn-p-trust .ic { flex: 0 0 auto; width: 38px; height: 38px; color: var(--ezn-verde); }
.ezn-p-trust b { display: block; font-size: 14.5px; color: #fff; font-weight: 600; }
.ezn-p-trust span { font-size: 12.5px; color: var(--p-muted); }
@media (max-width: 820px) { .ezn-p-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 440px) { .ezn-p-trust-grid { grid-template-columns: 1fr; } }

.ezn-portada :focus-visible { outline: 2px solid var(--ezn-verde); outline-offset: 3px; border-radius: 4px; }