/* HELEN — hoja de estilos compartida (index · coleccion · empresas)
   Identidad sellada: Playfair Display / Cormorant Garamond / Lato
   Paleta: crema #FAF5EC · salvia #96A17E · terracota #C17A54 · café #4A3A2D · dorado #BFA05F */

:root{
  --bg:#FAF5EC;
  --panel:#FFFDF8;
  --panel-2:#F1E6D3;
  --line:rgba(74,58,45,0.14);
  --ink:#4A3A2D;
  --muted:#6B5847;
  --salvia:#96A17E;
  --salvia-oscuro:#6E7C58;
  --terracota:#C17A54;
  --terracota-oscuro:#A85F3D;
  --dorado:#BFA05F;
  --wa:#25D366;
  --wa-ink:#07130A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Lato',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
h1 em, h2 em, .accent-it{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; color:var(--terracota-oscuro);}
a{color:inherit; text-decoration:none;}
a:focus-visible{outline:2px solid var(--salvia-oscuro); outline-offset:3px; border-radius:4px;}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--salvia-oscuro);}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}

/* HEADER sticky */
header{border-bottom:1px solid var(--line); padding:14px 0; position:sticky; top:0; z-index:50; background:rgba(250,245,236,0.9); backdrop-filter:blur(8px);}
header .wrap{display:flex; align-items:baseline; justify-content:space-between; gap:14px;}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand .mark{font-family:'Playfair Display',serif; font-weight:700; font-size:21px; letter-spacing:0.06em;}
.brand .name{font-size:10px; letter-spacing:0.16em; color:var(--muted); text-transform:uppercase;}
nav{display:flex; gap:18px; font-size:13px; color:var(--muted); align-items:center;}
nav a:hover{color:var(--ink);}
.nav-wa{display:inline-flex; align-items:center; gap:7px; background:var(--wa); color:var(--wa-ink); font-weight:700; padding:8px 17px; border-radius:999px; font-size:12px;}
.nav-wa:hover{background:#33E077;}

/* BOTONES píldora */
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border-radius:999px; font-size:13.5px; font-weight:700; letter-spacing:0.02em; transition:all .2s ease; border:1px solid transparent;}
.btn-wa{background:var(--wa); color:var(--wa-ink);}
.btn-wa:hover{background:#33E077; transform:translateY(-1px);}
.btn-ghost{background:rgba(255,253,248,0.55); color:var(--ink); border-color:rgba(74,58,45,0.28);}
.btn-ghost:hover{background:var(--panel);}
.wa-ico{width:17px; height:17px; flex:none;}

/* HERO con capa fija (técnica Fruit World: position:fixed, secciones opacas encima) */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); min-height:76vh; display:flex; align-items:center;}
.hero-media{position:fixed; inset:0; z-index:0;
  background:url('../img/hero-collage.jpg') 72% center / cover no-repeat var(--bg);
}
/* Velo crema para legibilidad del texto sobre la imagen (decisión Codex/brief §5.3) */
.hero-media::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(250,245,236,0.95) 8%, rgba(250,245,236,0.72) 46%, rgba(250,245,236,0.18) 100%);}
.hero .wrap{position:relative; z-index:2; width:100%; padding-top:64px; padding-bottom:64px;}
.hero .tagline{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--terracota-oscuro); letter-spacing:0.03em; margin-top:10px;}
.hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.08; margin:12px 0 16px; max-width:620px;}
.hero p.lead{font-size:15.5px; color:var(--muted); max-width:480px; margin-bottom:26px; line-height:1.65;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.hero-badges{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}
.hero-badges span{font-size:10.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:rgba(255,253,248,0.65);}

/* SECCIONES (opacas: cubren la capa fija al escrolear) */
section{padding:52px 0; position:relative; z-index:1; background:var(--bg);}
.sec-head{margin-bottom:26px;}
.sec-head h2{font-size:clamp(24px,3.4vw,34px); margin-top:8px;}
.sec-head p{color:var(--muted); font-size:14px; max-width:560px; margin-top:8px;}

/* TARJETAS */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.card{border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden; transition:border-color .2s ease, transform .2s ease; display:flex; flex-direction:column;}
.card:hover{border-color:var(--salvia); transform:translateY(-2px);}
.card-body{padding:18px 18px 20px;}
.card h3{font-size:18px; margin-bottom:6px;}
.card p{font-size:13px; color:var(--muted); line-height:1.6;}
.card .more{display:inline-block; margin-top:12px; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracota-oscuro);}

/* CUNAS de imagen (placeholder hasta recibir piezas de GPT / fotos reales) */
.cuna{aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, var(--panel-2), #E9D9BF); border-bottom:1px solid var(--line);}
.cuna span{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--muted); opacity:0.7;}
.cuna-wide{aspect-ratio:16/9;}
.cuna-43{aspect-ratio:4/3;}
.cuna img{display:block; width:100%; height:100%; object-fit:cover;}

/* CHIPS (aromas / anclas) */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.chips span, .chips button{font:inherit; font-size:11px; font-weight:700; letter-spacing:0.08em; color:var(--salvia-oscuro); border:1px solid rgba(110,124,88,0.35); border-radius:999px; padding:5px 12px; background:rgba(150,161,126,0.08);}
.chip-agregar{cursor:pointer; transition:all .2s ease;}
.chip-agregar:hover{background:var(--salvia-oscuro); color:#fff;}
.chip-agregar.added{background:var(--salvia-oscuro); color:#fff;}

/* ARMA TU PEDIDO — carrito de intención (sin pagos ni backend, cierra por WhatsApp) */
.btn-agregar{display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:9px 16px; border-radius:999px; font:inherit; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--salvia-oscuro); color:var(--salvia-oscuro); background:transparent; cursor:pointer; transition:all .2s ease;}
.btn-agregar:hover, .btn-agregar.added{background:var(--salvia-oscuro); color:#fff;}

.pedido-widget{position:fixed; right:18px; bottom:18px; z-index:80;}
.pedido-fab{display:flex; align-items:center; gap:8px; padding:13px 20px; border-radius:999px; border:none; background:var(--ink); color:var(--bg); font:inherit; font-size:13px; font-weight:700; box-shadow:0 8px 24px rgba(74,58,45,0.28); cursor:pointer; transition:transform .2s ease;}
.pedido-fab:hover{transform:translateY(-2px);}
.pedido-fab-ico{font-size:16px;}
.pedido-count{background:var(--muted); opacity:0.6; color:#fff; border-radius:999px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; padding:0 5px;}
.pedido-fab.has-items .pedido-count{background:var(--terracota); opacity:1;}

.pedido-panel{position:absolute; right:0; bottom:64px; width:min(320px, 90vw); background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(74,58,45,0.22); padding:16px;}
.pedido-panel-head{display:flex; justify-content:space-between; align-items:center; font-family:'Playfair Display',serif; font-weight:700; margin-bottom:10px;}
.pedido-close{background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1;}
.pedido-list{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; max-height:220px; overflow-y:auto;}
.pedido-list li{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; padding:8px 10px; background:var(--panel-2); border-radius:8px;}
.pedido-list li button{background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; line-height:1;}
.pedido-empty{font-size:12.5px; color:var(--muted); margin-bottom:12px;}
.pedido-send{width:100%; justify-content:center;}

@media(max-width:560px){
  .pedido-widget{right:12px; bottom:12px;}
  .pedido-fab-label{display:none;}
}

/* MÓDULO destacado (tarjeta → página paralela, estilo Fruit World) */
.module{display:flex; justify-content:space-between; align-items:center; gap:18px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); padding:26px 24px; transition:border-color .2s ease, transform .2s ease;}
.module:hover{border-color:var(--dorado); transform:translateY(-1px);}
.module h2{font-size:20px; margin:8px 0 6px;}
.module p{font-size:13px; color:var(--muted); max-width:460px;}
.module-arrow{font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracota-oscuro); white-space:nowrap;}

/* PASOS (empresas) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:paso;}
.step{border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:20px;}
.step::before{counter-increment:paso; content:counter(paso, decimal-leading-zero); font-family:'Playfair Display',serif; font-size:26px; color:var(--dorado); display:block; margin-bottom:8px;}
.step h3{font-size:16px; margin-bottom:6px;}
.step p{font-size:13px; color:var(--muted);}

/* BANNER gancho */
.banner{border:1px solid var(--line); border-radius:10px; background:var(--panel-2); padding:30px 26px; text-align:center;}
.banner h2{font-size:clamp(20px,3vw,26px);}
.banner p{color:var(--muted); font-size:13.5px; margin:8px auto 18px; max-width:460px;}

/* CTA contacto */
.cta{padding:64px 0; border-top:1px solid var(--line); text-align:center; position:relative; z-index:1; background:var(--bg);}
.cta h2{font-size:clamp(26px,3.6vw,38px); margin:12px 0 14px;}
.cta p{color:var(--muted); font-size:14.5px; max-width:460px; margin:0 auto 28px; line-height:1.65;}
.cta .btn-wa{padding:16px 34px; font-size:14.5px;}
.share-note{margin-top:22px; font-size:11px; font-weight:700; letter-spacing:0.12em; color:var(--muted); text-transform:uppercase;}

footer{border-top:1px solid var(--line); padding:24px 0; font-size:12px; color:var(--muted); position:relative; z-index:1; background:var(--bg);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer .f-links{display:flex; gap:18px; align-items:center;}
footer a:hover{color:var(--ink);}

@media(max-width:760px){
  .hero{min-height:64vh;}
  .hero .wrap{padding-top:40px; padding-bottom:44px;}
  .hero h1{font-size:clamp(30px,8.5vw,40px);}
  .hero p.lead{font-size:14px;}
  .cards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .module{flex-direction:column; align-items:flex-start;}
}
@media(max-width:560px){
  .wrap{padding:0 18px;}
  nav{gap:10px; font-size:12px;}
  nav a.nav-hide-sm{display:none;}
}