/* ============================================================
   Cordinox — ZenBliss Vitx
   Paleta: claros + saturados + plateados + azul claro + gris claro
   Arquitectura de clases: prefijo zb-  /  bloques cnx-
   ============================================================ */

:root{
  /* Colores */
  --zb-blanco:#ffffff;
  --zb-azul-claro:#f4f8fb;
  --zb-azul-claro-2:#e7f0f7;
  --zb-gris-claro:#eef2f5;
  --zb-plata:#c9d6e3;
  --zb-plata-borde:#b8c4d0;
  --zb-acento:#1e4e6b;      /* azul profundo saturado */
  --zb-acento-2:#3aa6b9;    /* turquesa saturado */
  --zb-acento-3:#5fc4d3;
  --zb-tinta:#22323d;
  --zb-tinta-suave:#54636d;

  /* Tipografía */
  --zb-display:Georgia,'Times New Roman',serif;
  --zb-texto:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Espaciado */
  --zb-s1:.5rem; --zb-s2:1rem; --zb-s3:1.5rem; --zb-s4:2.25rem;
  --zb-s5:3.5rem; --zb-s6:5rem;

  --zb-radio:18px;
  --zb-radio-sm:12px;
  --zb-sombra:0 12px 34px rgba(30,78,107,.10);
  --zb-sombra-sm:0 6px 18px rgba(30,78,107,.08);
  --zb-borde:1px solid var(--zb-plata-borde);
  --zb-ancho:1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--zb-texto);
  color:var(--zb-tinta);
  background:var(--zb-azul-claro);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--zb-acento);text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{font-family:var(--zb-display);font-weight:600;line-height:1.18;color:var(--zb-acento);margin:0 0 .6em;}
h1{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.5px;}
h2{font-size:clamp(1.55rem,4vw,2.4rem);}
h3{font-size:clamp(1.15rem,2.5vw,1.4rem);}
p{margin:0 0 1rem;color:var(--zb-tinta-suave);}

.zb-contenedor{width:100%;max-width:var(--zb-ancho);margin:0 auto;padding:0 1.25rem;}
.zb-eyebrow{
  display:inline-block;font-family:var(--zb-texto);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zb-acento-2);
  font-weight:700;margin-bottom:.7rem;
}
.zb-seccion{padding:var(--zb-s6) 0;}
.zb-centro{text-align:center;}
.zb-limitado{max-width:680px;margin-left:auto;margin-right:auto;}

/* ---------- Botones ---------- */
.zb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--zb-texto);font-weight:600;font-size:1rem;
  padding:.95rem 1.9rem;border-radius:999px;border:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  text-decoration:none;
}
.zb-btn--primario{
  background:linear-gradient(135deg,var(--zb-acento),var(--zb-acento-2));
  color:#fff;box-shadow:0 10px 24px rgba(58,166,185,.32);
}
.zb-btn--primario:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 14px 30px rgba(58,166,185,.42);}
.zb-btn--fantasma{
  background:var(--zb-blanco);color:var(--zb-acento);border:var(--zb-borde);
}
.zb-btn--fantasma:hover{background:var(--zb-gris-claro);text-decoration:none;}

/* ---------- Cabecera ---------- */
.zb-cabecera{
  position:sticky;top:0;z-index:40;background:rgba(244,248,251,.88);
  backdrop-filter:blur(10px);border-bottom:var(--zb-borde);
}
.zb-cabecera__fila{display:flex;align-items:center;justify-content:space-between;height:68px;}
.zb-marca{display:flex;align-items:center;gap:.55rem;font-family:var(--zb-display);
  font-size:1.3rem;font-weight:700;color:var(--zb-acento);text-decoration:none;}
.zb-marca__punto{width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--zb-acento-2),var(--zb-acento-3));display:inline-block;}
.zb-nav{display:none;gap:1.6rem;}
.zb-nav a{color:var(--zb-tinta);font-size:.95rem;font-weight:500;}
.zb-nav a:hover{color:var(--zb-acento-2);text-decoration:none;}
.zb-cabecera .zb-btn{padding:.6rem 1.3rem;font-size:.9rem;}

/* ---------- Hero ---------- */
.cnx-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--zb-azul-claro) 0%,var(--zb-azul-claro-2) 100%);
}
.cnx-hero__img-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}
.cnx-hero__capa{position:relative;z-index:2;display:grid;gap:var(--zb-s4);
  padding:var(--zb-s6) 0;align-items:center;}
.cnx-hero__texto h1 span{color:var(--zb-acento-2);}
.cnx-hero__sub{font-size:1.12rem;max-width:520px;}
.cnx-hero__acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem;}
.cnx-hero__media{display:flex;justify-content:center;}
.cnx-hero__media img{max-width:300px;filter:drop-shadow(0 24px 40px rgba(30,78,107,.22));}
.cnx-aviso-mini{
  margin-top:1.6rem;font-size:.82rem;color:var(--zb-tinta-suave);
  background:rgba(255,255,255,.6);border:var(--zb-borde);border-radius:var(--zb-radio-sm);
  padding:.7rem 1rem;max-width:520px;
}

/* ---------- Tarjetas / rejillas ---------- */
.zb-rejilla{display:grid;gap:1.4rem;}
.cnx-tarjeta{
  background:var(--zb-blanco);border:var(--zb-borde);border-radius:var(--zb-radio);
  padding:1.8rem;box-shadow:var(--zb-sombra-sm);
}
.cnx-tarjeta__icono{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--zb-azul-claro-2),var(--zb-plata));
  color:var(--zb-acento);margin-bottom:1rem;font-size:1.4rem;
}
.cnx-tarjeta h3{color:var(--zb-tinta);}

/* ---------- Ingredientes ---------- */
.cnx-ingredientes{background:var(--zb-blanco);}
.cnx-ingr-lista{display:grid;gap:1rem;}
.cnx-ingr{
  display:flex;gap:1rem;align-items:flex-start;padding:1.2rem;
  border:var(--zb-borde);border-radius:var(--zb-radio-sm);background:var(--zb-azul-claro);
}
.cnx-ingr__marca{flex:none;width:10px;height:10px;border-radius:50%;margin-top:.5rem;
  background:var(--zb-acento-2);}
.cnx-ingr h3{margin-bottom:.25rem;font-size:1.05rem;color:var(--zb-tinta);}
.cnx-ingr p{margin:0;font-size:.94rem;}

/* ---------- Showcase producto ---------- */
.cnx-showcase{
  background:linear-gradient(150deg,var(--zb-acento) 0%,#163d54 100%);color:#dfeef4;
}
.cnx-showcase h2,.cnx-showcase h3{color:#fff;}
.cnx-showcase p{color:#bcd6e2;}
.cnx-showcase__rejilla{display:grid;gap:var(--zb-s4);align-items:center;}
.cnx-showcase__media{display:flex;justify-content:center;}
.cnx-showcase__media img{max-width:260px;filter:drop-shadow(0 26px 44px rgba(0,0,0,.32));}
.cnx-precio{display:flex;align-items:baseline;gap:.6rem;margin:1rem 0 1.4rem;}
.cnx-precio__valor{font-family:var(--zb-display);font-size:3rem;color:#fff;font-weight:700;}
.cnx-precio__nota{font-size:.85rem;color:#9fc4d3;}
.cnx-lista-check{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.6rem;}
.cnx-lista-check li{display:flex;gap:.6rem;align-items:flex-start;color:#d6eaf2;font-size:.96rem;}
.cnx-lista-check li::before{content:"✓";color:var(--zb-acento-3);font-weight:700;}

/* ---------- Rutina / wellness ---------- */
.cnx-rutina__rejilla{display:grid;gap:var(--zb-s4);align-items:center;}
.cnx-rutina__media img{border-radius:var(--zb-radio);box-shadow:var(--zb-sombra);}
.cnx-pasos{list-style:none;padding:0;margin:0;counter-reset:paso;display:grid;gap:1.1rem;}
.cnx-pasos li{counter-increment:paso;display:flex;gap:1rem;align-items:flex-start;}
.cnx-pasos li::before{
  content:counter(paso);flex:none;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-family:var(--zb-display);
  background:var(--zb-azul-claro-2);color:var(--zb-acento);border:var(--zb-borde);
}
.cnx-pasos strong{color:var(--zb-tinta);display:block;}

/* ---------- Calidad ---------- */
.cnx-calidad{background:var(--zb-gris-claro);}
.cnx-calidad__media img{border-radius:var(--zb-radio);box-shadow:var(--zb-sombra);}

/* ---------- FAQ ---------- */
.cnx-faq{background:var(--zb-blanco);}
.cnx-faq__lista{max-width:780px;margin:0 auto;display:grid;gap:.9rem;}
.cnx-acordeon{border:var(--zb-borde);border-radius:var(--zb-radio-sm);background:var(--zb-azul-claro);overflow:hidden;}
.cnx-acordeon__btn{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1.1rem 1.3rem;font-family:var(--zb-texto);font-size:1.02rem;font-weight:600;
  color:var(--zb-tinta);display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.cnx-acordeon__btn:hover{color:var(--zb-acento);}
.cnx-acordeon__signo{flex:none;transition:transform .25s ease;color:var(--zb-acento-2);font-size:1.4rem;line-height:1;}
.cnx-acordeon[aria-expanded="true"] .cnx-acordeon__signo{transform:rotate(45deg);}
.cnx-acordeon__panel{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  padding:0 1.3rem;
}
.cnx-acordeon__panel p{padding-bottom:1.1rem;margin:0;font-size:.95rem;}

/* ---------- Formulario ---------- */
.cnx-pedido{background:linear-gradient(160deg,var(--zb-azul-claro-2),var(--zb-plata));}
.cnx-form{
  background:var(--zb-blanco);border:var(--zb-borde);border-radius:var(--zb-radio);
  padding:2.2rem;box-shadow:var(--zb-sombra);max-width:560px;margin:0 auto;
}
.cnx-campo{margin-bottom:1.2rem;}
.cnx-campo label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4rem;color:var(--zb-tinta);}
.cnx-campo input{
  width:100%;padding:.85rem 1rem;border:var(--zb-borde);border-radius:var(--zb-radio-sm);
  font-family:var(--zb-texto);font-size:1rem;background:var(--zb-azul-claro);color:var(--zb-tinta);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.cnx-campo input:focus{
  outline:none;border-color:var(--zb-acento-2);box-shadow:0 0 0 3px rgba(58,166,185,.2);background:#fff;
}
.cnx-error{color:#b23b3b;font-size:.82rem;margin-top:.35rem;display:none;}
.cnx-campo--invalido input{border-color:#b23b3b;}
.cnx-campo--invalido .cnx-error{display:block;}
.cnx-form .zb-btn{width:100%;}
.cnx-form__nota{font-size:.8rem;color:var(--zb-tinta-suave);margin-top:1rem;text-align:center;}
.cnx-resumen{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--zb-azul-claro);border:var(--zb-borde);border-radius:var(--zb-radio-sm);
  padding:1rem 1.2rem;margin-bottom:1.5rem;
}
.cnx-resumen strong{color:var(--zb-acento);font-family:var(--zb-display);font-size:1.4rem;}

/* ---------- Pie ---------- */
.zb-pie{background:var(--zb-acento);color:#cfe4ec;padding:var(--zb-s5) 0 1.5rem;}
.zb-pie a{color:#cfe4ec;}
.zb-pie a:hover{color:#fff;}
.zb-pie__rejilla{display:grid;gap:var(--zb-s4);}
.zb-pie h3{color:#fff;font-size:1.15rem;}
.zb-pie__marca .zb-marca{color:#fff;}
.zb-pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;}
.zb-pie__datos li{display:flex;gap:.55rem;font-size:.92rem;color:#bcd6e2;align-items:flex-start;}
.zb-pie__legal{
  border-top:1px solid rgba(255,255,255,.18);margin-top:var(--zb-s4);padding-top:1.3rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.82rem;color:#9fc4d3;
}
.zb-pie__legal a{font-size:.82rem;}

/* ---------- Banner cookies ---------- */
.zb-cookies{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
  background:var(--zb-blanco);border:var(--zb-borde);border-radius:var(--zb-radio);
  box-shadow:var(--zb-sombra);padding:1.3rem;display:none;
  flex-direction:column;gap:1rem;max-width:520px;margin:0 auto;
}
.zb-cookies.zb-cookies--visible{display:flex;}
.zb-cookies p{margin:0;font-size:.9rem;}
.zb-cookies__acciones{display:flex;flex-wrap:wrap;gap:.7rem;}
.zb-cookies .zb-btn{padding:.65rem 1.3rem;font-size:.9rem;}

/* ---------- Páginas legales ---------- */
.cnx-legal{padding:var(--zb-s6) 0;}
.cnx-legal__cont{max-width:820px;margin:0 auto;background:#fff;border:var(--zb-borde);
  border-radius:var(--zb-radio);padding:clamp(1.5rem,4vw,3rem);box-shadow:var(--zb-sombra-sm);}
.cnx-legal h1{margin-bottom:.3rem;}
.cnx-legal__fecha{font-size:.85rem;color:var(--zb-tinta-suave);margin-bottom:2rem;}
.cnx-legal h2{font-size:1.35rem;margin-top:2rem;color:var(--zb-tinta);}
.cnx-legal ul{color:var(--zb-tinta-suave);padding-left:1.2rem;}
.cnx-legal li{margin-bottom:.4rem;}

/* ---------- Éxito ---------- */
.cnx-exito{min-height:70vh;display:grid;place-items:center;text-align:center;padding:var(--zb-s6) 1.25rem;}
.cnx-exito__caja{max-width:560px;}
.cnx-exito__circulo{
  width:88px;height:88px;border-radius:50%;margin:0 auto 1.5rem;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--zb-acento-2),var(--zb-acento-3));color:#fff;font-size:2.6rem;
  box-shadow:0 14px 30px rgba(58,166,185,.4);
}

/* ---------- Aviso global ---------- */
.cnx-banda-aviso{background:var(--zb-acento-2);color:#fff;text-align:center;
  font-size:.82rem;padding:.55rem 1rem;letter-spacing:.01em;}
.cnx-banda-aviso a{color:#fff;text-decoration:underline;}

/* ---------- Reduccion de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

/* ====================== RESPONSIVE ====================== */
@media (min-width:600px){
  .zb-rejilla--2{grid-template-columns:repeat(2,1fr);}
  .zb-rejilla--3{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .cnx-hero__capa{grid-template-columns:1.1fr .9fr;}
  .cnx-hero__media img{max-width:340px;}
  .cnx-showcase__rejilla{grid-template-columns:.9fr 1.1fr;}
  .cnx-rutina__rejilla{grid-template-columns:1fr 1fr;}
  .cnx-calidad__rejilla{grid-template-columns:1fr 1fr;}
  .zb-pie__rejilla{grid-template-columns:1.4fr 1fr 1fr;}
  .cnx-ingr-lista{grid-template-columns:1fr 1fr;}
}
@media (min-width:900px){
  .zb-nav{display:flex;}
  .zb-rejilla--3{grid-template-columns:repeat(3,1fr);}
  .cnx-showcase__media img{max-width:300px;}
}