/* ============================================================================
   ÉBOLI — Sistema de diseño
   Pastelería · Panadería · Catering — Fuenlabrada
   ----------------------------------------------------------------------------
   Todo el color vive en :root. Cambiar un valor aquí lo cambia en toda la web.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- Marca ------------------------------------------------------------ */
  --verde:        #7CB342;  /* el verde del logo. Acento, nunca texto pequeño */
  --verde-vivo:   #8FC94E;  /* sobre fondos oscuros */
  --verde-hondo:  #4A7720;  /* texto legible sobre crema (contraste AA) */
  --verde-lavado: #EDF3E3;

  /* --- Neutros cálidos --------------------------------------------------- */
  --crema:    #FAF8F3;
  --crema-2:  #F2EEE4;
  --crema-3:  #E8E2D4;
  --tinta:    #16180F;
  --tinta-2:  #262A1D;
  --texto:    #52564A;
  --tenue:    #8B8F80;
  --borde:    rgba(22,24,15,.10);
  --blanco:   #FFFFFF;

  /* --- Acento cálido (solo para el mundo pastelería) --------------------- */
  --miel:     #C8873E;

  /* --- Tipografía -------------------------------------------------------- */
  --display: 'Instrument Serif', 'Fraunces', Georgia, serif;
  --cuerpo:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --- Ritmo ------------------------------------------------------------- */
  --max:     1240px;
  --ancho:   1440px;
  --gutter:  clamp(1.25rem, 4.5vw, 4rem);
  --seccion: clamp(5.5rem, 12vw, 11rem);
  --r:       3px;
  --r-g:     14px;

  /* --- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* --- Escena de fondo (lo pisa el JS según la sección) ------------------- */
  --escena-a: #FAF8F3;
  --escena-b: #F2EEE4;
}

/* --------------------------------------------------------------- 2. RESET  */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--cuerpo);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:350;
  line-height:1.7;
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
button{font:inherit}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--tinta);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(3rem,8.5vw,7rem)}
h2{font-size:clamp(2.25rem,5.5vw,4.25rem)}
h3{font-size:clamp(1.45rem,2.4vw,2rem); letter-spacing:-.015em}
h4{font-size:clamp(1.1rem,1.5vw,1.25rem); letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
em, .cursiva{font-style:italic}

/* El verde del logo como acento tipográfico */
.acento{color:var(--verde-hondo); font-style:italic}
.oscuro .acento, .sobre-foto .acento{color:var(--verde-vivo)}

/* ------------------------------------------------------------ 3. UTILIDADES */
.contenedor{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.contenedor--ancho{max-width:var(--ancho)}
.seccion{position:relative; padding-block:var(--seccion); z-index:1}
.estrecho{max-width:60ch}
.centrado{text-align:center; margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--tinta);color:#fff;padding:.9rem 1.4rem}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--verde-hondo); outline-offset:3px; border-radius:2px}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--verde-hondo); margin:0 0 1.4rem;
}
.eyebrow::before{content:''; width:26px; height:1px; background:currentColor; opacity:.5; flex:none}
.oscuro .eyebrow, .sobre-foto .eyebrow{color:var(--verde-vivo)}
.centrado .eyebrow{justify-content:center}

.entradilla{font-size:clamp(1.1rem,1.4vw,1.3rem); line-height:1.6; color:var(--tinta-2); font-weight:350}
.oscuro .entradilla{color:rgba(255,255,255,.82)}

/* ---------------------------------------------------------- 4. FONDO VIVO  */
/* Capa fija detrás de todo. El canvas dibuja la escena de cada sección.      */
#telon{
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(168deg, var(--escena-a) 0%, var(--escena-b) 100%);
  transition:background 1.1s var(--ease);
}
#escena{position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none}

/* Grano sutil: le quita el plástico a los degradados */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- 5. BOTONES */
.btn{
  --bg:var(--tinta); --fg:var(--crema); --bd:var(--tinta);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1.1rem 2.2rem; border:1px solid var(--bd); border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-size:.775rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .25s var(--ease);
}
/* Relleno que sube desde abajo al pasar el ratón */
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  background:var(--verde-hondo); transition:transform .5s var(--ease-out);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff; border-color:var(--verde-hondo)}
.btn:active{transform:scale(.98)}
.btn svg{flex:none}

.btn--linea{--bg:transparent; --fg:var(--tinta); --bd:rgba(22,24,15,.28)}
.btn--claro{--bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.4)}
.btn--claro::before{background:#fff}
.btn--claro:hover{color:var(--tinta); border-color:#fff}
.btn--wa{--bg:#25D366; --fg:#0B2E19; --bd:#25D366}
.btn--wa::before{background:#128C7E}
.btn--wa:hover{color:#fff; border-color:#128C7E}
.btn--peq{padding:.8rem 1.5rem; font-size:.7rem}

.acciones{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem}
@media (max-width:560px){ .acciones{flex-direction:column; align-items:stretch} }

/* Enlace con flecha */
.enlace{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-size:.775rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--verde-hondo); padding-block:.4rem;
  border-bottom:1px solid rgba(74,119,32,.25);
  transition:border-color .4s var(--ease), gap .4s var(--ease);
}
.enlace:hover{border-color:var(--verde-hondo); gap:1rem}
.enlace svg{transition:transform .4s var(--ease)}
.enlace:hover svg{transform:translateX(3px)}
.oscuro .enlace{color:var(--verde-vivo); border-color:rgba(143,201,78,.3)}

/* -------------------------------------------------------------- 6. CABECERA */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:120;
  transition:transform .5s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.cabecera--oculta{transform:translateY(-100%)}
.cabecera--fija{
  background:rgba(250,248,243,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--borde);
}
/* Con el menú abierto, la cabecera NO debe tener backdrop-filter ni transform:
   ambos crean un "bloque contenedor" que rompería el overlay position:fixed del
   menú (se encogería a la franja de la cabecera). Se neutralizan mientras dura. */
.cabecera--menu{
  transition:none!important;   /* sin transición: el transform desaparece de golpe */
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.cabecera__fila{
  max-width:var(--ancho); margin-inline:auto;
  padding:1.15rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.logo{display:flex; flex-direction:column; line-height:1; text-decoration:none; flex:none}
.logo__n{
  font-family:var(--display); font-style:italic; font-size:2.1rem;
  color:var(--verde); letter-spacing:-.02em;
}
.logo__t{
  font-size:.53rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500;
  color:var(--tenue); margin-top:.3rem; transition:color .45s var(--ease);
}
.cabecera--claro:not(.cabecera--fija) .logo__t{color:rgba(255,255,255,.65)}

.nav{display:flex; align-items:center; gap:2.2rem}
.nav__enlaces{display:flex; align-items:center; gap:2.2rem; list-style:none; margin:0; padding:0}
.nav__enlaces a{
  position:relative; text-decoration:none; padding-block:.4rem;
  font-size:.775rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-2); transition:color .35s var(--ease);
}
.cabecera--claro:not(.cabecera--fija) .nav__enlaces a{color:rgba(255,255,255,.9)}
.nav__enlaces a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--verde); transition:width .4s var(--ease);
}
.nav__enlaces a:hover::after, .nav__enlaces a[aria-current="page"]::after{width:100%}
.nav__enlaces a[aria-current="page"]{color:var(--verde-hondo)}
.cabecera--claro:not(.cabecera--fija) .nav__enlaces a[aria-current="page"]{color:var(--verde-vivo)}

.solo-movil{display:none}
@media (max-width:940px){ .solo-movil{display:block} }

.menu-btn{display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; padding:0}
.menu-btn i{display:block; width:24px; height:1.5px; background:var(--tinta); margin:5.5px auto; transition:transform .4s var(--ease), opacity .3s, background .4s}
.cabecera--claro:not(.cabecera--fija) .menu-btn i{background:#fff}
.menu-btn[aria-expanded="true"] i{background:var(--tinta)}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:940px){
  .menu-btn{display:block; position:relative; z-index:2}
  .nav{
    position:fixed; inset:0; background:var(--crema);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:0 var(--gutter); gap:2.5rem;
    clip-path:circle(0% at calc(100% - 44px) 44px);
    transition:clip-path .7s var(--ease-out);
  }
  .nav--abierto{clip-path:circle(150% at calc(100% - 44px) 44px)}
  .nav__enlaces{flex-direction:column; align-items:flex-start; gap:.4rem}
  .nav__enlaces a{
    font-family:var(--display); font-size:2.4rem; text-transform:none;
    letter-spacing:-.02em; color:var(--tinta)!important; font-weight:400;
  }
  .nav__enlaces a[aria-current="page"]{color:var(--verde-hondo)!important; font-style:italic}
  .nav__enlaces a::after{display:none}
  .nav .btn{width:100%}
}

/* ------------------------------------------------------------------ 7. HERO */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-1; background:var(--tinta)}
.hero__media img{width:100%; height:100%; object-fit:cover; opacity:.72}
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,12,7,.62) 0%, rgba(10,12,7,.15) 40%, rgba(10,12,7,.88) 100%);
}
.hero__cuerpo{
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding:0 var(--gutter) clamp(4.5rem,10vh,8rem);
}
.hero h1{color:#fff; max-width:14ch}
.hero p{color:rgba(255,255,255,.84); max-width:44ch; margin-top:1.8rem; font-size:1.1rem}
.hero p.eyebrow{max-width:none; margin-top:0; font-size:.68rem; color:var(--verde-vivo)}

/* Título que aparece palabra a palabra */
.revelar{display:inline-block; overflow:hidden; vertical-align:top}
.revelar > span{
  display:inline-block; transform:translateY(105%);
  transition:transform 1s var(--ease-out);
}
.cargado .revelar > span{transform:translateY(0)}

/* Cabecera de página interior */
.portada{
  position:relative; padding-top:clamp(9rem,17vh,12rem); padding-bottom:clamp(3rem,7vw,5rem);
}
.portada h1{font-size:clamp(2.75rem,7vw,5.5rem); max-width:15ch}
.portada .entradilla{margin-top:1.8rem; max-width:52ch}

/* -------------------------------------------------------------- 8. IMÁGENES */
.foto{position:relative; overflow:hidden; background:var(--crema-2); border-radius:var(--r)}
.foto img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1}
/* Hueco elegante mientras no haya foto real */
.foto::before{
  content:attr(data-nota); position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  background:
    repeating-linear-gradient(45deg, rgba(22,24,15,.022) 0 12px, transparent 12px 24px),
    linear-gradient(140deg, #EDE8DC 0%, #E2DBCB 55%, #EDE8DC 100%);
  color:#A6A08E; font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
}
.foto--zoom img{transition:transform 1.1s var(--ease-out), filter .8s var(--ease)}
.foto--zoom:hover img{transform:scale(1.05)}

/* Franja a pantalla completa con foto */
.franja{
  position:relative; min-height:clamp(420px,72vh,760px);
  display:flex; align-items:center; color:#fff; overflow:hidden; isolation:isolate;
}
.franja__media{position:absolute; inset:0; z-index:-1; background:var(--tinta-2)}
/* La foto es más alta que su marco para poder desplazarse (parallax) sin dejar
   huecos arriba o abajo. Sin JS se queda centrada y se ve igual de bien. */
.franja__media img{position:absolute; left:0; top:-11%; width:100%; height:122%; object-fit:cover; opacity:.6; will-change:transform}
.franja__media::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,12,7,.86) 0%, rgba(10,12,7,.45) 55%, rgba(10,12,7,.2) 100%)}
.franja h2, .franja h3{color:#fff}
.franja p{color:rgba(255,255,255,.82)}

/* ---------------------------------------------------------------- 9. REJILLA */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.duo--inv .duo__media{order:2}
.duo__media{aspect-ratio:4/5}
@media (max-width:880px){
  .duo{grid-template-columns:1fr; gap:2.5rem}
  .duo--inv .duo__media{order:0}
  .duo__media{aspect-ratio:4/3}
}

.rejilla{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ------------------------------------------------------------ 10. SECCIÓN OSCURA */
.oscuro{background:var(--tinta); color:rgba(255,255,255,.74)}
.oscuro h1,.oscuro h2,.oscuro h3,.oscuro h4{color:#fff}
.oscuro .btn--linea{--fg:#fff; --bd:rgba(255,255,255,.35)}
.oscuro .btn--linea::before{background:#fff}
.oscuro .btn--linea:hover{color:var(--tinta); border-color:#fff}

/* ------------------------------------------------------------ 11. NUMERADAS */
.pasos{list-style:none; margin:4rem 0 0; padding:0; display:grid; gap:0}
.paso{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,4rem);
  padding:2.2rem 0; border-top:1px solid var(--borde); align-items:start;
}
.paso:last-child{border-bottom:1px solid var(--borde)}
.paso__n{
  font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--verde); line-height:1; font-style:italic; min-width:2.4ch;
}
.paso h3{margin-bottom:.6rem}
.paso p{font-size:.97rem; max-width:58ch}
.oscuro .paso{border-color:rgba(255,255,255,.14)}

/* ------------------------------------------------------------- 12. TARJETAS */
.tarjeta{
  position:relative; display:flex; flex-direction:column;
  background:rgba(255,255,255,.62); border:1px solid var(--borde);
  border-radius:var(--r-g); overflow:hidden;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.tarjeta:hover{transform:translateY(-5px); box-shadow:0 22px 50px -28px rgba(22,24,15,.32); border-color:rgba(124,179,66,.4)}
.tarjeta .foto{border-radius:0; aspect-ratio:4/3}
.tarjeta__cuerpo{padding:1.9rem 1.8rem 2rem; display:flex; flex-direction:column; flex:1}
.tarjeta__cuerpo p{font-size:.95rem}
.tarjeta .enlace, .tarjeta .btn{margin-top:auto; align-self:flex-start}
.tarjeta__cuerpo > *:not(:last-child){margin-bottom:1rem}

/* Etiqueta de categoría */
.chip{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  padding:.34rem .8rem; border-radius:100px;
  background:var(--verde-lavado); color:var(--verde-hondo);
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.chip--miel{background:rgba(200,135,62,.14); color:#8E5E22}

/* ----------------------------------------------------------- 13. CATÁLOGO */
.catalogo{border-top:1px solid var(--borde); margin-top:3.5rem}
.familia{border-bottom:1px solid var(--borde)}
.familia__cab{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:1.9rem 0; display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center;
  color:var(--tinta);
}
.familia__i{font-family:var(--display); font-style:italic; color:var(--verde); font-size:1.05rem; min-width:2.6ch}
.familia__t{font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.4rem); letter-spacing:-.02em; transition:color .4s var(--ease)}
.familia__cab:hover .familia__t{color:var(--verde-hondo)}
.familia__mas{position:relative; width:20px; height:20px; flex:none}
.familia__mas::before,.familia__mas::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--tinta);
  transition:transform .45s var(--ease);
}
.familia__mas::after{transform:rotate(90deg)}
.familia__cab[aria-expanded="true"] .familia__mas::after{transform:rotate(0)}
.familia__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease-out)}
.familia__panel[data-abierto="true"]{grid-template-rows:1fr}
.familia__panel > div{overflow:hidden}
.familia__lista{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.6rem 2rem; padding:0 0 2.2rem; margin:0; list-style:none;
}
.familia__lista li{
  font-size:.95rem; padding:.45rem 0 .45rem 1.3rem; position:relative; color:var(--texto);
}
.familia__lista li::before{
  content:''; position:absolute; left:0; top:1.05em; width:5px; height:5px;
  border-radius:50%; background:var(--verde);
}
.familia__nota{font-size:.9rem; color:var(--tenue); padding-bottom:2.2rem; max-width:60ch}

/* ------------------------------------------------------------- 14. TIENDAS */
.tienda{
  display:grid; grid-template-columns:1.05fr 1fr; gap:0;
  border:1px solid var(--borde); border-radius:var(--r-g); overflow:hidden;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tienda + .tienda{margin-top:1.5rem}
.tienda:nth-child(even) .tienda__media{order:2}
.tienda__media{min-height:320px}
/* Mapa interactivo de Google en el hueco de la foto de cada tienda */
.tienda__media--mapa{position:relative; background:var(--crema-2)}
.tienda__media--mapa iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.tienda__cuerpo{padding:clamp(2rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center}
@media (max-width:820px){
  .tienda{grid-template-columns:1fr}
  .tienda:nth-child(even) .tienda__media{order:0}
  .tienda__media{min-height:230px}
}
.datos{list-style:none; margin:1.6rem 0 2rem; padding:0; font-size:.95rem}
.datos li{display:grid; grid-template-columns:auto 1fr; gap:.85rem; padding:.7rem 0; border-bottom:1px solid var(--borde)}
.datos li:last-child{border-bottom:0}
.datos svg{color:var(--verde-hondo); margin-top:.4rem}
.datos a{text-decoration:none; transition:color .3s}
.datos a:hover{color:var(--verde-hondo)}
.abierto-ahora{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem;
  font-weight:500; color:var(--verde-hondo);
}
.abierto-ahora::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 0 rgba(124,179,66,.6); animation:latido 2.4s infinite;
}
.abierto-ahora[data-estado="cerrado"]{color:var(--tenue)}
.abierto-ahora[data-estado="cerrado"]::before{background:var(--tenue); animation:none}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(124,179,66,.5)}
  70%{box-shadow:0 0 0 9px rgba(124,179,66,0)}
  100%{box-shadow:0 0 0 0 rgba(124,179,66,0)}
}

/* ------------------------------------------------- 15. BLOQUES DE CONTACTO */
/* Regla de la casa: WhatsApp para el día a día, formulario para lo formal.  */
.canal{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.5rem; margin-top:3rem;
}
.canal__caja{
  padding:clamp(1.9rem,3.5vw,2.6rem); border-radius:var(--r-g);
  border:1px solid var(--borde); display:flex; flex-direction:column;
}
.canal__caja--wa{background:linear-gradient(150deg, rgba(37,211,102,.10), rgba(37,211,102,.03)); border-color:rgba(37,211,102,.3)}
.canal__caja--form{background:linear-gradient(150deg, rgba(124,179,66,.10), rgba(124,179,66,.03)); border-color:rgba(124,179,66,.3)}
.canal__caja h3{margin-bottom:.7rem}
.canal__caja p{font-size:.95rem; margin-bottom:1.6rem}
.canal__caja ul{list-style:none; margin:0 0 1.8rem; padding:0; font-size:.92rem}
.canal__caja li{position:relative; padding-left:1.4rem; margin-bottom:.5rem}
.canal__caja li::before{content:'—'; position:absolute; left:0; color:var(--verde-hondo)}
.canal__caja .btn{margin-top:auto; align-self:flex-start}

/* ------------------------------------------------------------ 16. FORMULARIO */
.form{display:grid; gap:1.4rem}
.fila{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
@media (max-width:560px){.fila{grid-template-columns:1fr}}
.campo{display:flex; flex-direction:column; gap:.55rem}
.campo label{font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:1rem; color:var(--tinta);
  background:rgba(255,255,255,.75); border:1px solid var(--borde);
  border-radius:var(--r); padding:.95rem 1.05rem; width:100%;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.campo textarea{min-height:160px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; background:#fff; border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(124,179,66,.16);
}
.campo--check{flex-direction:row; align-items:flex-start; gap:.75rem}
.campo--check input{width:auto; margin-top:.35rem}
.campo--check label{font-size:.85rem; letter-spacing:0; text-transform:none; font-weight:400; color:var(--texto); line-height:1.6}
.campo--check a{color:var(--verde-hondo)}
.form__pie{font-size:.82rem; color:var(--tenue); line-height:1.6}
.miel{ /* honeypot antispam */
  position:absolute!important; left:-9999px; opacity:0; height:0; width:0; pointer-events:none;
}
.form__aviso{
  padding:1rem 1.2rem; border-radius:var(--r); font-size:.92rem;
  background:var(--verde-lavado); color:var(--verde-hondo); border:1px solid rgba(124,179,66,.3);
}
.form__aviso[hidden]{display:none}

/* ------------------------------------------------------------------ 17. FAQ */
.faq{border-top:1px solid var(--borde); margin-top:3rem}
.faq__item{border-bottom:1px solid var(--borde)}
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:1.65rem 2.5rem 1.65rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--tinta); letter-spacing:-.015em; line-height:1.3;
  transition:color .35s var(--ease);
}
.faq__q:hover{color:var(--verde-hondo)}
.faq__q::after{
  content:''; position:absolute; right:.4rem; top:50%; width:9px; height:9px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease);
}
.faq__q[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out)}
.faq__a[data-abierto="true"]{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding-bottom:1.7rem; max-width:65ch; font-size:.97rem}

/* -------------------------------------------------------------- 18. MARQUEE */
.tira{
  position:relative; overflow:hidden; padding-block:1.6rem;
  border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tira__pista{display:flex; width:max-content; animation:desliza 46s linear infinite}
.tira:hover .tira__pista{animation-play-state:paused}
.tira span{
  display:inline-flex; align-items:center; gap:2.6rem; padding-right:2.6rem;
  font-family:var(--display); font-size:clamp(1.4rem,3vw,2.1rem);
  color:var(--tinta); white-space:nowrap; letter-spacing:-.01em;
}
.tira span::after{content:''; width:6px; height:6px; border-radius:50%; background:var(--verde); flex:none}
.tira span:nth-child(even){font-style:italic; color:var(--verde-hondo)}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ----------------------------------------------------------- 19. ESTADÍSTICAS */
.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2.5rem; margin-top:4rem}
.cifra__n{
  font-family:var(--display); font-size:clamp(2.8rem,6vw,4.5rem);
  color:var(--tinta); line-height:1; letter-spacing:-.03em;
}
.oscuro .cifra__n{color:#fff}
.cifra__n em{color:var(--verde); font-size:.6em}
.cifra__t{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue); margin-top:.9rem}
.oscuro .cifra__t{color:rgba(255,255,255,.55)}

/* ------------------------------------------------------------------- 20. PIE */
.pie{position:relative; z-index:1; background:var(--tinta); color:rgba(255,255,255,.6); padding-block:clamp(4rem,8vw,6.5rem) 2.5rem}
.pie__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.13)}
@media (max-width:900px){.pie__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__grid{grid-template-columns:1fr}}
.pie h4{color:#fff; font-family:var(--cuerpo); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.3rem}
.pie ul{list-style:none; margin:0; padding:0; font-size:.93rem}
.pie li{margin-bottom:.65rem}
.pie a{text-decoration:none; transition:color .3s var(--ease)}
.pie a:hover{color:var(--verde-vivo)}
.pie__lema{margin-top:1.4rem; max-width:32ch; font-size:.95rem}
.pie__base{padding-top:2.2rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem}
.pie .logo__n{font-size:2.4rem}

/* --------------------------------------------------------- 21. WHATSAPP FIJO */
.wa-fijo{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:110;
  display:inline-flex; align-items:center; gap:.7rem;
  height:56px; padding:0 1.35rem 0 1.15rem; border-radius:100px;
  background:#25D366; color:#0B2E19; text-decoration:none;
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.5);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-fijo:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 38px -8px rgba(37,211,102,.6)}
.wa-fijo span{white-space:nowrap}
@media (max-width:560px){
  .wa-fijo{padding:0; width:56px; justify-content:center}
  .wa-fijo span{display:none}
}

/* ------------------------------------------------------- 22. PROGRESO SCROLL */
.progreso{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:130;
  background:var(--verde); transform-origin:0 50%; transform:scaleX(0);
}

/* ----------------------------------------------------------- 23. APARICIONES */
[data-anim]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform 1s var(--ease-out)}
[data-anim="izq"]{transform:translateX(-26px)}
[data-anim="escala"]{transform:scale(.96)}
[data-anim].visto{opacity:1; transform:none}

/* --------------------------------------------------- 24. MENOS MOVIMIENTO */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-anim]{opacity:1!important; transform:none!important}
  .revelar > span{transform:none!important}
}

/* -------------------------------------------------------------- 25. IMPRESIÓN */
@media print{
  #telon,#escena,.wa-fijo,.progreso,.cabecera,body::after{display:none!important}
  body{background:#fff; color:#000}
}

/* ==========================================================================
   26. LOGOTIPO REAL (extraído del catálogo de la casa)
   ========================================================================== */
.logo img{height:38px; width:auto; display:block}
.logo--pie img{height:46px}
.logo__t{margin-top:.5rem}
.logo .blanco{display:none}
.cabecera--claro:not(.cabecera--fija) .logo .verde{display:none}
.cabecera--claro:not(.cabecera--fija) .logo .blanco{display:block}
.pie .logo .verde{display:none}
.pie .logo .blanco{display:block}
@media (max-width:520px){ .logo img{height:31px} }

/* ==========================================================================
   27. NAVEGACIÓN DE CATEGORÍAS (página de productos)
   ========================================================================== */
.categorias{
  position:sticky; top:0; z-index:80;
  background:rgba(250,248,243,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-block:1px solid var(--borde);
  margin-bottom:var(--seccion);
}
.categorias__pista{
  display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none;
  max-width:var(--max); margin-inline:auto; padding:.85rem var(--gutter);
  scroll-snap-type:x proximity;
}
.categorias__pista::-webkit-scrollbar{display:none}
.categorias a{
  flex:none; scroll-snap-align:start; text-decoration:none;
  padding:.55rem 1.1rem; border-radius:100px; border:1px solid var(--borde);
  font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.categorias a:hover{border-color:var(--verde); color:var(--verde-hondo)}
.categorias a.activa{background:var(--tinta); color:var(--crema); border-color:var(--tinta)}
.categorias a b{font-weight:500; opacity:.55; margin-left:.4rem}

/* ==========================================================================
   28. REJILLA DE PRODUCTOS CON FOTO
   ========================================================================== */
.familia-bloque{scroll-margin-top:5.5rem}
.familia-bloque + .familia-bloque{margin-top:var(--seccion)}
.familia-cab{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.2rem;
  padding-bottom:1.4rem; border-bottom:1px solid var(--borde); margin-bottom:3rem;
}
.familia-cab h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.familia-cab__n{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--verde-hondo);
}
.familia-cab p{flex-basis:100%; max-width:62ch; margin-top:.4rem; font-size:.97rem}

.productos{
  display:grid; gap:clamp(1.2rem,2.4vw,2.2rem);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.prod{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.55); border:1px solid var(--borde);
  border-radius:var(--r-g); overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease), border-color .4s;
}
.prod:hover{transform:translateY(-4px); box-shadow:0 20px 44px -26px rgba(22,24,15,.3); border-color:rgba(124,179,66,.45)}
.prod__foto{
  aspect-ratio:4/3; background:var(--crema-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* Fotografías reales de producto: llenan el marco (antes eran recortes con
   fondo blanco que usaban contain + multiply). */
.prod__foto > img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.prod:hover .prod__foto > img{transform:scale(1.05)}

/* Carrusel de producto (tartas infantiles y personalizadas) */
.prod__slider{position:relative}
.prod__track{display:flex; width:100%; height:100%; transition:transform .5s var(--ease-out); will-change:transform}
.prod__slide{flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block}
.prod__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.86); color:var(--tinta);
  font-family:var(--cuerpo); font-size:1.5rem; line-height:1; padding-bottom:3px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -4px rgba(22,24,15,.45);
  transition:background .3s var(--ease), opacity .3s;
}
.prod__flecha:hover{background:#fff}
.prod__flecha--prev{left:.55rem}
.prod__flecha--next{right:.55rem}
.prod__puntos{
  position:absolute; left:0; right:0; bottom:.6rem; z-index:2;
  display:flex; gap:.34rem; justify-content:center; pointer-events:auto;
}
.prod__punto{
  width:6px; height:6px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:background .3s, transform .3s;
}
.prod__punto.activo{background:#fff; transform:scale(1.35)}
/* En pantallas táctiles las flechas son más grandes y siempre visibles */
@media (hover:none){
  .prod__flecha{width:40px; height:40px}
}

/* Producto sin foto todavía: hueco reservado con el aire beige de la casa */
.prod__foto--vacia{
  background:
    repeating-linear-gradient(45deg, rgba(22,24,15,.022) 0 12px, transparent 12px 24px),
    linear-gradient(140deg, #EDE8DC 0%, #E2DBCB 55%, #EDE8DC 100%);
}
.prod__foto--vacia span{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#A6A08E;
}

/* Catering dentro de Productos: galería de fotos reales */
.cat-galeria{
  display:grid; gap:clamp(.7rem,1.5vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.cat-galeria__f{
  aspect-ratio:4/3; border-radius:var(--r-g); overflow:hidden; background:var(--crema-2);
}
.cat-galeria__f img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.cat-galeria__f:hover img{transform:scale(1.05)}
.prod__cuerpo{padding:1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.prod__n{font-family:var(--display); font-size:1.2rem; color:var(--tinta); line-height:1.2; letter-spacing:-.01em}
.prod__d{font-size:.87rem; line-height:1.55; color:var(--texto)}

/* Familias sin foto: lista tipográfica */
.lista-productos{
  display:grid; gap:0 clamp(1.5rem,4vw,4rem);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  list-style:none; margin:0; padding:0;
}
.lista-productos li{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.95rem 0; border-bottom:1px solid var(--borde);
  font-size:1rem; color:var(--tinta-2);
}
.lista-productos li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--verde); flex:none; transform:translateY(-3px);
}

/* ==========================================================================
   29. DESCARGA DEL CATÁLOGO
   ========================================================================== */
.catalogo-caja{
  display:grid; grid-template-columns:minmax(0,320px) 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding:clamp(2rem,5vw,3.5rem);
  border:1px solid var(--borde); border-radius:var(--r-g);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
@media (max-width:760px){ .catalogo-caja{grid-template-columns:1fr} }
.catalogo-caja__portada{
  position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:0 26px 50px -26px rgba(22,24,15,.45);
  transform:rotate(-1.4deg);
  transition:transform .6s var(--ease-out);
}
.catalogo-caja:hover .catalogo-caja__portada{transform:rotate(0) scale(1.02)}
.catalogo-caja__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:1.6rem 0 2rem;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue);
}
.catalogo-caja__meta span{display:inline-flex; align-items:center; gap:.5rem}
.catalogo-caja__meta span::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--verde)}

/* ==========================================================================
   30. CTA ÚNICO DE ENCARGO
   ========================================================================== */
.encargo{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-g); padding:clamp(2.5rem,6vw,4.5rem);
  background:var(--tinta); color:rgba(255,255,255,.78); text-align:center;
}
.encargo::before{
  content:''; position:absolute; inset:-40% -10% auto -10%; height:150%; z-index:-1;
  background:radial-gradient(60% 55% at 50% 0%, rgba(124,179,66,.22), transparent 70%);
}
.encargo h2{color:#fff; max-width:20ch; margin-inline:auto}
.encargo p{max-width:52ch; margin:1.4rem auto 0}
.encargo .acciones{justify-content:center}

/* Catálogo en dos columnas en móvil: se recorre mucho mejor */
@media (max-width:600px){
  .productos{grid-template-columns:repeat(2,1fr); gap:.75rem}
  .prod__cuerpo{padding:.85rem .9rem 1.05rem; gap:.25rem}
  .prod__n{font-size:1rem}
  .prod__d{font-size:.79rem; line-height:1.45}
  .familia-cab{margin-bottom:2rem}
}

/* ==========================================================================
   31. MÓVIL — ajustes finos
   Objetivo: nada por debajo de 12 px, nada que tocar por debajo de 44 px,
   y que la barra de categorías no se esconda tras la cabecera.
   ========================================================================== */

/* Altura real de la cabecera, la mide el JS. El valor de reserva evita saltos. */
:root{ --cab-alto:72px; }
html{ scroll-padding-top:calc(var(--cab-alto) + 1rem); }

/* La barra de categorías se pega justo debajo de la cabecera */
.categorias{ top:var(--cab-alto); }
.familia-bloque{ scroll-margin-top:calc(var(--cab-alto) + 4.5rem); }

@media (max-width:940px){

  /* --- Cabecera más compacta ------------------------------------------- */
  .cabecera__fila{ padding-block:.9rem; }
  .logo__t{ display:none; }              /* 8,5 px era ilegible */

  /* --- Tipografía: suelo de 12 px --------------------------------------- */
  .eyebrow{ font-size:.78rem; letter-spacing:.16em; margin-bottom:1.1rem; }
  .chip{ font-size:.76rem; padding:.45rem .9rem; }
  .familia-cab__n{ font-size:.78rem; }
  .campo label{ font-size:.78rem; letter-spacing:.12em; }
  .categorias a{ font-size:.78rem; }
  .catalogo-caja__meta{ font-size:.8rem; }
  .btn--peq{ font-size:.76rem; }
  .cifra__t, .datos li, .pie ul, .tienda__datos{ font-size:.95rem; }
  .form__pie, .legal{ font-size:.88rem; }

  /* --- Zonas táctiles de 44 px ------------------------------------------ */
  .btn{ min-height:52px; padding-block:1rem; }
  .btn--peq{ min-height:46px; }
  .enlace{ min-height:44px; align-items:center; }
  .categorias a{ min-height:46px; display:inline-flex; align-items:center; }
  .datos a, .tienda__datos a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .pie li{ margin-bottom:0; }
  .pie li a{ display:inline-flex; align-items:center; min-height:44px; }
  .campo--check input{
    width:24px; height:24px; margin-top:.1rem; accent-color:var(--verde-hondo);
  }
  .campo--check label{ font-size:.9rem; }
  .faq__q{ padding-block:1.5rem; }

  /* --- Menos cristal: en móvil cuesta batería --------------------------- */
  .tarjeta, .tienda{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.72); }
  .prod{ background:rgba(255,255,255,.66); }

  /* --- Respiración ------------------------------------------------------ */
  .franja{ min-height:auto; padding-block:clamp(3.5rem,12vw,5.5rem); }
  .encargo{ padding:clamp(2rem,7vw,3rem) 1.4rem; }
  .catalogo-caja{ padding:1.6rem; }
  .catalogo-caja__portada{ max-width:260px; margin-inline:auto; transform:none; }
  .tira span{ font-size:1.25rem; gap:1.6rem; padding-right:1.6rem; }
  .paso{ grid-template-columns:1fr; gap:.5rem; padding-block:1.7rem; }
  .paso__n{ font-size:1.4rem; }
  .canal__caja{ padding:1.6rem 1.4rem 1.8rem; }
  .valor, .cifras > div{ text-align:left; }
}

@media (max-width:600px){
  /* Botón flotante: respeta la barra inferior del iPhone */
  .wa-fijo{
    bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    right:calc(1rem + env(safe-area-inset-right, 0px));
    width:58px; height:58px;
  }
  /* Deja hueco para que el botón no tape el final de la página */
  .pie{ padding-bottom:calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
  main > section:last-child{ padding-bottom:calc(var(--seccion) + 3rem); }

  .hero__cuerpo{ padding-bottom:clamp(5rem,16vh,8rem); }
  .cifras{ grid-template-columns:1fr 1fr; gap:1.8rem; }
  .lista-productos{ grid-template-columns:1fr; }
  .fila{ grid-template-columns:1fr; }
  .contenedor{ padding-inline:1.15rem; }
}

/* El menú a pantalla completa también respeta la zona segura */
@media (max-width:940px){
  .nav{ padding-block:calc(2rem + env(safe-area-inset-top,0px)) calc(2rem + env(safe-area-inset-bottom,0px)); }
}

/* Sin hover en pantallas táctiles: quita estados que se quedan «pegados» */
@media (hover:none){
  .prod:hover, .tarjeta:hover{ transform:none; box-shadow:none; }
  .foto--zoom:hover img, .prod:hover .prod__foto img{ transform:none; }
  .btn:hover::before{ transform:translateY(101%); }
  .btn:active::before{ transform:translateY(0); }
}

/* --- Últimos remates táctiles y de tamaño en móvil --------------------- */
@media (max-width:940px){
  .logo{ min-height:44px; justify-content:center; }
  .logo--pie{ min-height:48px; align-items:flex-start; }
  .pie__base{ gap:.25rem 1rem; }
  .pie__base a{ display:inline-flex; align-items:center; min-height:44px; }
  /* La casilla del RGPD no debe encogerse al lado de un texto largo */
  .campo--check input{ flex:none; }
  /* El eyebrow del hero tiene más especificidad: hay que igualarla */
  .hero p.eyebrow, .portada p.eyebrow{ font-size:.78rem; letter-spacing:.16em; }
}

/* Barras superiores más opacas en móvil: el contenido se transparentaba */
@media (max-width:940px){
  .cabecera--fija{ background:rgba(250,248,243,.96); }
  .categorias{ background:rgba(250,248,243,.97); }
}

/* En móvil el texto del hero cae sobre la parte más recargada de la foto:
   se refuerza el degradado para que siga leyéndose bien. */
@media (max-width:760px){
  .hero__media::after{
    background:linear-gradient(180deg, rgba(10,12,7,.62) 0%, rgba(10,12,7,.30) 26%,
                                       rgba(10,12,7,.78) 58%, rgba(10,12,7,.94) 100%);
  }
  .hero__media img{ opacity:.62; }
  .franja__media::after{
    background:linear-gradient(180deg, rgba(10,12,7,.55) 0%, rgba(10,12,7,.86) 100%);
  }
}

/* Cualquier sección enlazada por ancla debe quedar por debajo de las barras fijas */
.seccion[id], .familia-bloque, article[id]{
  scroll-margin-top:calc(var(--cab-alto) + 4.5rem);
}

/* ==========================================================================
   32. MOVIMIENTO AL HACER SCROLL (GSAP + ScrollTrigger)
   El JS de eboli-scroll.js conduce estos estados. Sin JS, todo queda estático
   y perfectamente legible: los efectos son un extra, no un requisito.
   ========================================================================== */

/* --- Marco con parallax: la foto se mueve dentro, el marco no se mueve --- */
[data-parallax]{overflow:hidden}
[data-parallax] img{will-change:transform}

/* --- SHOWCASE: una imagen que se expande hasta llenar la pantalla -------- */
.showcase{position:relative; z-index:1}
.showcase__pista{position:relative; height:205vh}
.showcase__fijo{
  position:sticky; top:0; height:100vh;
  display:grid; place-items:center; overflow:hidden;
  padding:0 var(--gutter);
}
.showcase__frame{
  --expand:0;
  position:relative; overflow:hidden; isolation:isolate;
  width:calc(80% + 20% * var(--expand));
  height:calc(62vh + 38vh * var(--expand));
  max-width:calc(var(--ancho) + (100vw - var(--ancho)) * var(--expand));
  border-radius:calc(20px * (1 - var(--expand)));
  box-shadow:0 50px 110px -60px rgba(22,24,15,.7);
  background:var(--tinta-2);
}
.showcase__frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.showcase__frame::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,12,7,.28) 0%, rgba(10,12,7,0) 32%, rgba(10,12,7,.1) 60%, rgba(10,12,7,.72) 100%);
}
.showcase__texto{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(1.8rem,5vw,4rem);
  max-width:var(--ancho); margin-inline:auto;
  color:#fff; text-align:center;
}
.showcase__texto .eyebrow{justify-content:center; color:var(--verde-vivo)}
.showcase__texto h2{color:#fff; max-width:20ch; margin-inline:auto}
.showcase__texto p{color:rgba(255,255,255,.86); max-width:52ch; margin:1.1rem auto 0}
.showcase__texto .acciones{justify-content:center}

/* Sin JS (o con el navegador viejo): que no ocupe 2,3 pantallas en vano */
.no-gsap .showcase__pista{height:auto}
.no-gsap .showcase__fijo{position:relative; height:auto; padding-block:clamp(3rem,7vw,6rem)}
.no-gsap .showcase__frame{--expand:1; width:100%; height:clamp(420px,72vh,760px)}

@media (max-width:760px){
  .showcase__pista{height:175vh}
  .showcase__frame{
    width:calc(90% + 10% * var(--expand));
    height:calc(58vh + 34vh * var(--expand));
    border-radius:calc(16px * (1 - var(--expand)));
  }
}

/* Menos movimiento: la imagen ya está expandida y quieta */
@media (prefers-reduced-motion: reduce){
  .showcase__pista{height:auto}
  .showcase__fijo{position:relative; height:auto; padding-block:clamp(3rem,7vw,6rem)}
  .showcase__frame{--expand:1!important; width:100%; height:clamp(420px,68vh,720px)}
  .showcase__texto{opacity:1!important; transform:none!important}
  .franja__media img{position:absolute; top:0; height:100%}
}