/* =========================================================
   BUFFET BOGOTÁ — Sistema de diseño
   ========================================================= */

:root{
  /* Superficies */
  --bg:        #050505;
  --bg-2:      #0B0B0D;
  --bg-3:      #151518;
  --card:      #111113;

  /* Texto */
  --white:     #FFFFFF;
  --gray:      #BDBDBD;
  --gray-dim:  #8A8A8F;

  /* Acento */
  --orange:    #FF5A00;
  --orange-2:  #FF6500;

  /* Líneas */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);

  /* Tipografía
     --font-display: Anton, sólo para los titulares grandes (hero y títulos de
       sección). Es la condensada pesada de la maqueta; tiene un único peso.
     --font-head: Oswald para navegación, botones, precios y etiquetas.
     --font-body: Inter para todo el texto corrido. */
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --wrap:      1400px;
  --gutter:    clamp(1.5rem, 4vw, 3.75rem);
  --header-h:  106px;

  /* Ritmo vertical */
  --section-y: clamp(4.5rem, 9vw, 8.75rem);

  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* `hidden` debe ganar siempre a cualquier display de clase (si no, el overlay
   del menú móvil queda invisible pero interceptando todos los clics) */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
/* `padding:0` es imprescindible: el padding por defecto del navegador convertía
   los puntos del slider (7×7) en óvalos de 19×9. */
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); font-weight:500; line-height:1.08; text-transform:uppercase; letter-spacing:.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
summary::-webkit-details-marker{ display:none; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:1rem; z-index:999;
  background:var(--orange); color:#fff; padding:.6rem 1.1rem; border-radius:4px;
  font-size:.85rem;
}
.skip-link:focus{ top:1rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* Iconos */
.ic{ width:20px; height:20px; display:block; fill:none; }
.ic--arrow{ width:17px; height:17px; }

/* ---------------- Botones ---------------- */
.btn{
  --btn-bg:var(--orange);
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--font-head); font-weight:500;
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.95rem 1.7rem; border-radius:999px;
  background:var(--btn-bg); color:#fff;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-color .35s var(--ease);
  will-change:transform;
}
.btn .ic{ transition:transform .45s var(--ease); }
.btn:hover{ background:var(--orange-2); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(255,90,0,.75); }
.btn:hover .ic{ transform:translateX(4px); }
.btn--sm{ padding:.62rem 1.25rem; font-size:.73rem; letter-spacing:.14em; }
.btn--ghost{
  background:transparent; color:var(--white);
  border:1px solid var(--line-2);
}
.btn--ghost:hover{ background:transparent; border-color:var(--orange); color:var(--orange); box-shadow:none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease), height .45s var(--ease);
}
.site-header.is-stuck{
  height:88px;
  background:rgba(5,5,5,.72);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line);
}
.site-header__inner{
  width:100%; max-width:1480px; margin-inline:auto;
  padding-inline:clamp(1.25rem, 3.4vw, 3.5rem);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}

/* Cada grupo se centra en su mitad: deja el mismo aire junto al logo y en los
   bordes, en vez de empujar los enlaces contra las esquinas. */
.nav{ display:flex; align-items:center; gap:clamp(1.4rem, 2.9vw, 3rem); }
.nav--left, .nav--right{ justify-self:center; }
.nav a{
  font-family:var(--font-head); font-weight:400;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
  position:relative; padding-block:.35rem;
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:not(.btn):hover{ color:#fff; }
.nav a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
/* la sección que se está viendo queda subrayada (lo pone el JS) */
.nav a:not(.btn).is-active{ color:#fff; }
.nav a:not(.btn).is-active::after{ transform:scaleX(1); transform-origin:left; }

/* ---- Desplegables del menú ---- */
.nav__item{ position:relative; display:flex; align-items:center; }
.ic--caret{ width:12px; height:12px; margin-left:.4rem; transition:transform .35s var(--ease); }
.nav__item > a{ display:inline-flex; align-items:center; }
.submenu{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  min-width:250px; padding:.7rem 0;
  background:rgba(10,10,12,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:6px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* el margen superior transparente evita que el menú se cierre al cruzar el hueco */
.nav__item::after{ content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.submenu a{
  display:block; padding:.62rem 1.35rem;
  font-family:var(--font-body); font-size:.86rem; font-weight:300;
  letter-spacing:.01em; text-transform:none; white-space:nowrap;
  color:var(--gray); transition:color .25s var(--ease), background-color .25s var(--ease);
}
.submenu a::after{ display:none; }
.submenu a:hover{ color:#fff; background:rgba(255,90,0,.12); }
.nav__item:hover > a .ic--caret,
.nav__item:focus-within > a .ic--caret{ transform:rotate(180deg); }
.nav__item:hover .submenu,
.nav__item:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
}

/* El logo mide 420×289 (ratio .688). Los anchos de abajo están elegidos para que
   su alto SIEMPRE quepa dentro de --header-h con unos 5px de aire arriba y abajo. */
.brand{ justify-self:center; display:block; line-height:0; }
.brand img{
  width:140px; height:auto;          /* 140 × .688 = 96px de alto */
  transition:width .45s var(--ease), opacity .3s var(--ease);
}
.site-header.is-stuck .brand img{ width:114px; }   /* 78px de alto en 88px */
.brand:hover img{ opacity:.85; }

/* Hamburguesa */
.burger{
  display:none; grid-area:1/1;
  width:34px; height:34px; position:relative; justify-self:start;
}
.burger span{
  position:absolute; left:5px; right:5px; height:1.5px; background:#fff;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:20px; }
.burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* Menú móvil (mismo patrón que el sitio en producción) */
.mobile-nav{
  /* por encima del header (z-index:100): si no, el logo del header se ve a través
     del overlay y aparece duplicado junto al del menú */
  position:fixed; inset:0; z-index:120;
  background:#0E1116;
  display:flex; flex-direction:column;
  padding:clamp(1.25rem, 4vw, 2rem) var(--gutter) 0;
  overflow-y:auto;
  opacity:0; transition:opacity .35s var(--ease);
}
.mobile-nav.is-open{ opacity:1; }
.mobile-nav__top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:clamp(2rem, 7vw, 3.5rem); flex:0 0 auto;
}
.mobile-nav__logo img{ width:132px; height:auto; }
.mobile-nav__close{ width:40px; height:40px; color:#fff; display:grid; place-items:center; }
.mobile-nav__close svg{ width:26px; height:26px; }

.mobile-nav__list{ display:flex; flex-direction:column; flex:1 1 auto; }
/* Sin bordes ni separadores: en producción los enlaces van sueltos y con aire */
.mobile-nav__list > a,
.mnav-cta,
.mnav-group__toggle{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.35rem, 5.6vw, 1.7rem); line-height:1.2;
  letter-spacing:.045em; text-transform:uppercase;
  color:#fff; text-align:left;
  padding:.52rem 0; border:0; width:100%;
  transition:color .3s var(--ease);
}
.mobile-nav__list > a:hover,
.mnav-cta:hover,
.mnav-group__toggle:hover{ color:var(--orange); }

/* El CTA del menú móvil reemplazó al acordeón de cotizadores: mismo tamaño que
   los demás enlaces, pero en el naranja de marca para que se lea como acción. */
.mobile-nav__list > .mnav-cta{ color:var(--orange); }

.mnav-group__toggle{ display:flex; align-items:center; gap:.7rem; }
.mnav-group__toggle .ic{ width:18px; height:18px; transition:transform .35s var(--ease); }
.mnav-group__toggle[aria-expanded="true"]{ color:var(--orange); }
.mnav-group__toggle[aria-expanded="true"] .ic{ transform:rotate(180deg); }
/* height animada en JS: `auto` no es animable (mismo motivo que el acordeón del FAQ) */
.mnav-group__panel{
  overflow:hidden; height:0;
  transition:height .38s var(--ease);
  display:flex; flex-direction:column;
  padding-left:1rem; margin-left:.15rem;
  border-left:1px solid rgba(255,90,0,.4);
}
.mnav-group__panel a{
  font-family:var(--font-body); font-weight:300;
  font-size:1rem; letter-spacing:0; text-transform:none;
  color:var(--gray); padding:.5rem 0;
  transition:color .25s var(--ease);
}
.mnav-group__panel a:hover{ color:var(--orange); }

/* Los dos botones van apilados y a ancho completo: en el pulgar de una mano,
   un icono suelto de 54px se falla; con el número escrito no hay duda de qué hace. */
.mobile-nav__bottom{
  position:sticky; bottom:0; flex:0 0 auto;
  display:flex; flex-direction:column; gap:.6rem;
  padding:1.1rem 0 1.4rem;
  margin-top:auto;
  background:linear-gradient(to top, #0E1116 62%, rgba(14,17,22,0));
}
.mnav-call{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  height:54px; border-radius:999px;
  background:var(--orange); color:#fff;
  font-family:var(--font-body); font-weight:500; font-size:1rem;
}
.mnav-call .ic{ width:22px; height:22px; }
.mnav-social{
  display:flex; justify-content:center; gap:1.5rem;
  padding-top:.35rem;
}
.mnav-social a{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--gray);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.mnav-social a:hover{ color:#fff; border-color:var(--orange); }
.mnav-social .ic{ width:20px; height:20px; }
.mnav-wa{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  height:54px; border-radius:999px;
  background:#25D366; color:#0B2E18;
  font-family:var(--font-body); font-weight:500; font-size:1rem;
}
.mnav-wa .ic{ width:24px; height:24px; }
.mnav-tel{
  flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  background:var(--orange); color:#fff;
  display:grid; place-items:center;
}
.mnav-tel .ic{ width:24px; height:24px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:90vh;
  padding-top:calc(var(--header-h) + clamp(.5rem, 1.8vw, 1.9rem));
  padding-bottom:clamp(1.5rem, 2.6vw, 2.25rem);
  display:flex; align-items:center;
  overflow:hidden;
}
.hero::after{ /* desvanecido hacia la siguiente sección */
  content:""; position:absolute; inset:auto 0 0 0; height:22%;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}
.hero__inner{
  position:relative; width:100%;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
}

/* Chispas doradas del fondo: cuatro capas de puntos hechos con radial-gradient,
   más un resplandor cálido detrás. Cero imágenes y cero peticiones, así que no
   tocan el LCP. Cada capa flota a distinta velocidad para dar profundidad. */
.hero__sparks{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* resplandor cálido: es lo que da el ambiente dorado de la maqueta */
.hero__sparks::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(255,150,45,.16), transparent 70%),
    radial-gradient(38% 32% at 76% 26%, rgba(255,190,110,.12), transparent 72%),
    radial-gradient(34% 30% at 22% 66%, rgba(255,120,20,.10), transparent 74%);
}
.hero__sparks span{
  position:absolute; inset:-25% -12%;
  background-repeat:repeat;
}
/* polvo fino */
.hero__sparks span:nth-child(1){
  background-image:
    radial-gradient(1.7px 1.7px at 18% 24%, rgba(255,208,140,1), transparent 62%),
    radial-gradient(1.4px 1.4px at 72% 12%, rgba(255,226,170,.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 46% 68%, rgba(255,196,110,.9), transparent 62%),
    radial-gradient(1.3px 1.3px at 88% 54%, rgba(255,220,160,.85), transparent 62%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(255,204,130,.9), transparent 62%),
    radial-gradient(1.4px 1.4px at 60% 90%, rgba(255,214,150,.8), transparent 62%);
  background-size:300px 270px;
  animation:drift 30s linear infinite;
  opacity:.85;
}
/* chispas medianas con halo */
.hero__sparks span:nth-child(2){
  background-image:
    radial-gradient(2.6px 2.6px at 32% 44%, rgba(255,178,70,.95), transparent 64%),
    radial-gradient(2.2px 2.2px at 84% 78%, rgba(255,206,130,.9), transparent 64%),
    radial-gradient(2.4px 2.4px at 12% 18%, rgba(255,190,96,.85), transparent 64%),
    radial-gradient(2px 2px at 56% 8%, rgba(255,220,160,.8), transparent 64%);
  background-size:470px 430px;
  animation:drift 46s linear infinite reverse, twinkle 7s ease-in-out infinite;
  opacity:.75;
}
/* brasas grandes y difusas, al fondo */
.hero__sparks span:nth-child(3){
  background-image:
    radial-gradient(4.5px 4.5px at 62% 30%, rgba(255,150,40,.55), transparent 68%),
    radial-gradient(3.8px 3.8px at 22% 60%, rgba(255,176,80,.5), transparent 68%),
    radial-gradient(4.2px 4.2px at 90% 16%, rgba(255,138,30,.42), transparent 68%);
  background-size:700px 640px;
  animation:drift 70s linear infinite;
  opacity:.6;
  filter:blur(.4px);
}
/* destellos puntuales que parpadean */
.hero__sparks span:nth-child(4){
  background-image:
    radial-gradient(2.9px 2.9px at 40% 16%, rgba(255,244,215,1), transparent 60%),
    radial-gradient(2.6px 2.6px at 78% 62%, rgba(255,238,200,.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 16% 46%, rgba(255,248,225,.9), transparent 60%);
  background-size:560px 520px;
  animation:drift 58s linear infinite reverse, twinkle 4.5s ease-in-out infinite .8s;
  opacity:.9;
}
@keyframes drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-300px,-270px,0) } }
@keyframes twinkle{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* Redes laterales: naranjas, como en la maqueta */
.hero__social{
  position:absolute; left:calc(var(--gutter) - .55rem); bottom:15%;
  z-index:6; display:flex; flex-direction:column; gap:1.05rem;
}
.hero__social a{ color:var(--orange); opacity:.92; transition:color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease); }
.hero__social a:hover{ color:#fff; opacity:1; transform:translateY(-2px); }
.hero__social .ic{ width:22px; height:22px; }

/* Escenario del slider */
.hero__stage{ display:grid; }
.slide{
  grid-area:1/1; position:relative;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .8s var(--ease), visibility .8s;
}
.slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

.slide__word{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  z-index:0; display:block; width:max-content; max-width:100vw;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(3.2rem, 19.4vw, 17.6rem);
  line-height:.84; letter-spacing:-.008em; text-transform:uppercase;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F4F5 34%,#9A9AA0 72%,#4E4E54 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  user-select:none;
}
.slide.is-active .slide__word{ animation:wordIn 1.1s var(--ease) both; }
@keyframes wordIn{ from{ opacity:0; transform:translateX(-50%) translateY(18px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }

.slide__media{
  --pt:clamp(1.2rem, 3.5vw, 3.1rem);
  position:relative; z-index:2;
  width:min(73%, 950px); margin-inline:auto;
  padding-top:var(--pt);
}
.slide.is-active .slide__media{ animation:mediaIn 1.2s var(--ease) both .1s; }
@keyframes mediaIn{ from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:none; } }
.slide__media img{ width:100%; }
/* Dos máscaras anidadas (contenedor + imagen) que se multiplican: la lineal abre
   sitio al copy por la izquierda, la radial funde la foto con el negro. */
.slide__media--soft{
  -webkit-mask-image:linear-gradient(90deg, transparent 2%, rgba(0,0,0,.4) 15%, #000 33%);
  mask-image:linear-gradient(90deg, transparent 2%, rgba(0,0,0,.4) 15%, #000 33%);
}
.slide__media--soft img{
  -webkit-mask-image:radial-gradient(ellipse 64% 70% at 54% 48%, #000 36%, rgba(0,0,0,.55) 64%, transparent 85%);
  mask-image:radial-gradient(ellipse 64% 70% at 54% 48%, #000 36%, rgba(0,0,0,.55) 64%, transparent 85%);
}

/* El copy NO lleva z-index propio a propósito: así no crea contexto de apilado y
   sus hijos se comparan directamente con la imagen (z-index 2). El titular y el
   párrafo quedan DETRÁS del PNG (efecto de profundidad); el botón, delante, para
   que siga siendo clicable en toda su superficie. */
.slide__copy{
  position:absolute; left:0; bottom:15%;
  width:min(31%, 370px);
}
.slide.is-active .slide__copy{ animation:copyIn 1s var(--ease) both .28s; }
@keyframes copyIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.slide__title{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 3.65vw, 3.55rem);
  line-height:1.0; letter-spacing:.005em;
}
.slide__title span{ display:block; }
.slide__title em{ display:block; font-style:normal; font-size:.82em; color:rgba(255,255,255,.94); }
.slide__copy p{
  position:relative; z-index:1;
  margin:1.05rem 0 1.75rem;
  color:var(--gray); font-size:.94rem; line-height:1.6; max-width:11rem;
}
.slide__copy .btn{ position:relative; z-index:5; }

/* Pie del hero */
.hero__caption{
  position:relative; z-index:5;
  margin-top:clamp(1.1rem, 2vw, 1.85rem);
  text-align:center;
  font-family:var(--font-head); font-weight:300;
  font-size:.76rem; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.hero__controls{ position:relative; z-index:5; margin-top:1.1rem; display:flex; justify-content:center; }
.dots{ display:flex; align-items:center; gap:.75rem; }
.dot{
  flex:0 0 auto;
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.28);
  transition:background-color .4s var(--ease), transform .4s var(--ease);
}
.dot:hover{ background:rgba(255,255,255,.5); }
.dot.is-active{ background:var(--orange); transform:scale(1.25); }

/* Miniatura + flechas */
.hero__aside{
  position:absolute; right:var(--gutter); bottom:9%;
  z-index:6; display:flex; align-items:center; gap:.9rem;
}
.arrow{
  width:34px; height:34px; display:grid; place-items:center;
  color:rgba(255,255,255,.7); border-radius:50%;
  transition:color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.arrow .ic{ width:19px; height:19px; }
.arrow:not(.arrow--next) .ic{ transform:rotate(180deg); }
.arrow:hover{ color:var(--orange); background:rgba(255,255,255,.05); }
.hero__thumb{
  width:96px; aspect-ratio:3/4; overflow:hidden; border-radius:4px;
  border:1px solid var(--line-2);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.9);
}
.hero__thumb img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s var(--ease); }

/* ---- Pie del hero: estaciones + indicador de scroll ---- */
.hero__foot{
  position:relative; z-index:5;
  margin-top:clamp(1.5rem, 2.6vw, 2.4rem);
  padding-top:clamp(1rem, 1.8vw, 1.5rem);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap;
}
.stations{ display:flex; align-items:center; flex-wrap:wrap; gap:.55rem clamp(1rem, 2vw, 2rem); }
.stations a{
  position:relative;
  font-family:var(--font-head); font-weight:400;
  font-size:.76rem; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(255,255,255,.58);
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.stations a + a::before{
  content:""; position:absolute; left:calc(clamp(1rem, 2vw, 2rem) / -2);
  top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%;
  background:rgba(255,255,255,.22);
}
.stations a:hover{ color:#fff; }
.stations a.is-current{ color:var(--orange); }

.scroll-cue{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-head); font-weight:400;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition:color .35s var(--ease);
}
.scroll-cue .ic{ width:15px; height:15px; animation:cue 2.4s var(--ease) infinite; }
.scroll-cue:hover{ color:var(--orange); }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(5px); opacity:1 } }

/* =========================================================
   SECCIONES GENÉRICAS
   ========================================================= */
.section{ padding-block:var(--section-y); position:relative; scroll-margin-top:calc(var(--header-h) + 1rem); }
#contacto{ scroll-margin-top:calc(var(--header-h) + 2rem); }
.section--planes{ background:var(--bg-2); }
.section--gallery{ background:var(--bg-2); }
.section--faq{ background:var(--bg); }
.section--nosotros{ background:var(--bg-2); }
.section--quoter{ background:var(--bg-2); }

/* ---------------- Cotizador ---------------- */
.quoter{
  display:grid; grid-template-columns:1.5fr 1fr 1.2fr auto;
  gap:clamp(.9rem, 1.6vw, 1.5rem); align-items:end;
  max-width:1100px; margin-inline:auto;
  padding:clamp(1.5rem, 2.6vw, 2.4rem);
  background:var(--card); border:1px solid var(--line); border-radius:8px;
}
.quoter__field{ display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.quoter__field label{
  font-family:var(--font-head); font-weight:400;
  font-size:.72rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gray-dim);
}
.quoter__field select,
.quoter__field input{
  width:100%; height:52px; padding:0 1rem;
  background:var(--bg); color:#fff;
  border:1px solid var(--line-2); border-radius:5px;
  font-family:var(--font-body); font-size:.95rem; font-weight:300;
  transition:border-color .3s var(--ease);
  /* Safari pinta los date/select con su propio estilo claro si no se resetea */
  -webkit-appearance:none; appearance:none;
}
.quoter__field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--orange) 50%),
                   linear-gradient(135deg, var(--orange) 50%, transparent 50%);
  background-position:calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.75rem;
}
.quoter__field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(58%) sepia(72%) saturate(3200%) hue-rotate(360deg);
  cursor:pointer;
}
.quoter__field select:focus,
.quoter__field input:focus{ border-color:var(--orange); outline:none; }
.quoter__go{ height:52px; justify-content:center; white-space:nowrap; }
.quoter__note{
  text-align:center; color:var(--gray-dim); font-size:.85rem;
  margin-top:clamp(1.1rem, 1.8vw, 1.6rem);
}

/* El FAQ va solo y centrado, en columna estrecha */
.faq-wrap{ max-width:56rem; }
.faq-wrap .sec-title{ text-align:center; }

.sec-head{ text-align:center; margin-bottom:clamp(2.75rem, 5vw, 4.5rem); }
.rule{
  display:block; width:56px; height:2px; background:var(--orange);
  margin:0 auto 1.85rem;
}
.sec-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.6rem, 3.2vw, 2.65rem);
  letter-spacing:.012em; line-height:1.06;
}
.sec-title--left{ text-align:left; }

.eyebrow{
  display:block; margin-bottom:1.35rem;
  font-family:var(--font-head); font-weight:400;
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--orange);
}

/* ---------------- Servicios: foto + filete + título ---------------- */
.cards{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(1rem, 1.7vw, 1.65rem);
}
.card{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; color:inherit;
}
/* Las fotos son PNG recortados con fondo transparente: van flotando sobre el
   negro, sin marco ni fondo. Si se les pone caja, se ve el rectángulo vacío. */
/* Alineadas por la BASE: cada bodegón tiene proporción distinta y, centrados,
   parecen flotar a alturas diferentes. */
/* ⚠ La altura va en la IMAGEN, no en el contenedor. Con la altura en el
   contenedor + `max-height:100%` en la foto, el porcentaje no se resuelve
   (la fila del grid es `auto`) y la imagen crecía a 425px dentro de una caja de
   200px, escribiéndose encima del filete, el título y el párrafo en móvil. */
.card__media{
  margin:0 0 1.35rem; width:100%;
  display:flex; align-items:flex-end; justify-content:center;
}
/* Cada bodegón tiene su propio ancho (el lienzo va ajustado al objeto), así que
   se igualan por ALTURA: es lo que hace que la fila se lea pareja. */
.card__media img{
  width:auto; max-width:100%;
  height:clamp(200px, 20.5vw, 310px);
  object-fit:contain; display:block;
  transition:transform 1.1s var(--ease), filter .5s var(--ease);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.62));
}
/* el filete naranja crece al pasar el cursor: es el único adorno de la tarjeta */
.card__rule{
  display:block; width:38px; height:2px; background:var(--orange);
  margin-bottom:1.2rem;
  transition:width .5s var(--ease);
}
.card__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem, 1.65vw, 1.72rem); line-height:1.14;
  letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:.9rem;
}
.card__text{
  color:var(--gray); font-size:.89rem; line-height:1.72;
  max-width:22rem; margin-bottom:1.4rem;
}
.card__more{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-head); font-weight:500;
  font-size:.74rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--orange);
  padding-bottom:.35rem; border-bottom:1px solid rgba(255,90,0,.35);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.card__more .ic{ transition:transform .4s var(--ease); }
.card__more:hover{ color:#fff; border-bottom-color:#fff; }
.card__more:hover .ic{ transform:translateX(4px); }
.card:hover .card__media img{ transform:scale(1.05); }
.card:hover .card__rule{ width:70px; }

/* ---------------- Planes: tarjetas verticales con borde de neón ---------------- */
.plans{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:clamp(.7rem, 1.2vw, 1.15rem);
  align-items:center;
  padding:clamp(1.5rem, 3vw, 3rem) 0;
}
.plan{
  position:relative; display:block; overflow:hidden;
  border-radius:14px;
  aspect-ratio:3/4.35;
  color:inherit; isolation:isolate;
  border:1.5px solid rgba(255,90,0,.5);
  box-shadow:0 0 0 1px rgba(255,90,0,.12), 0 0 22px -4px rgba(255,90,0,.34);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.plan__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
/* Velo: transparente arriba para que se vea la foto, opaco abajo para que se lea
   el texto. Sin esto, títulos blancos sobre lasaña o paella son ilegibles. */
.plan::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,5,5,.10) 0%, rgba(5,5,5,.28) 38%, rgba(5,5,5,.82) 72%, rgba(5,5,5,.96) 100%);
}
.plan__body{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:0 clamp(.7rem, 1vw, 1.1rem) clamp(1.2rem, 1.9vw, 1.8rem);
  text-align:center;
}
/* Los iconos son los PNG que mandó el cliente: el círculo naranja ya viene
   dibujado dentro, así que aquí no se le pone borde ni fondo. */
.plan__icon{
  --d:clamp(52px, 4.8vw, 68px);
  flex:0 0 auto; display:block;
  width:var(--d); height:var(--d);
  margin-bottom:.55rem;
  transition:transform .55s var(--ease), filter .45s var(--ease);
}
.plan__title{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(.98rem, 1.32vw, 1.28rem); line-height:1.22;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
}
.plan__badge{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(.66rem, .8vw, .8rem); letter-spacing:.15em; text-transform:uppercase;
  color:#fff; background:var(--orange);
  padding:.46em 1.15em; border-radius:999px;
}
.plan__note{ font-size:clamp(.78rem, .92vw, .92rem); color:var(--gray); }
.plan:hover{
  transform:translateY(-8px);
  border-color:var(--orange);
  box-shadow:0 0 0 1px rgba(255,90,0,.3), 0 0 40px -4px rgba(255,90,0,.6);
}
.plan:hover .plan__bg{ transform:scale(1.07); }
.plan:hover .plan__icon{ transform:scale(1.09); filter:drop-shadow(0 0 12px rgba(255,90,0,.6)); }

/* la central es la destacada: más alta y con el neón azul de la maqueta */
.plan--feature{
  aspect-ratio:3/5.15;
  border-color:rgba(120,150,255,.66);
  box-shadow:0 0 0 1px rgba(120,150,255,.16), 0 0 34px -3px rgba(90,120,255,.55);
}
.plan--feature .plan__title{ font-size:clamp(1.12rem, 1.55vw, 1.5rem); }
.plan--feature:hover{
  border-color:rgba(150,175,255,.9);
  box-shadow:0 0 0 1px rgba(120,150,255,.34), 0 0 54px -3px rgba(90,120,255,.78);
}

/* ---------------- Nosotros ---------------- */
.subline{
  font-family:var(--font-head); font-weight:400;
  font-size:1.02rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--orange); margin-top:.85rem;
}
.sec-lead{
  color:var(--gray); text-align:center;
  max-width:44rem; margin:1.4rem auto clamp(2.75rem, 5vw, 4rem);
}
.sec-head .sec-lead{ margin-bottom:0; }

.benefits{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  margin-top:clamp(2.5rem, 4vw, 3.5rem);
  max-width:34rem;
}
/* en su propia sección los cuatro beneficios van en fila, centrados */
.benefits--row{
  grid-template-columns:repeat(4, 1fr);
  max-width:none; margin-top:0; text-align:center;
}
.benefits--row .benefits__icon{ margin-inline:auto; }
.benefits__icon{
  width:42px; height:42px; color:var(--orange); display:block;
  margin-bottom:1.05rem;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.benefits li:hover .benefits__icon{ color:var(--orange-2); transform:translateY(-3px); }
.benefits h3{
  font-size:.92rem; font-weight:500; letter-spacing:.085em; line-height:1.35;
  margin-bottom:.6rem;
}
.benefits p{ color:var(--gray-dim); font-size:.85rem; line-height:1.68; }

/* ---------------- FAQ ---------------- */
.faq{ margin-top:2.2rem; display:flex; flex-direction:column; gap:.7rem; }
.faq__item{
  background:var(--card); border:1px solid var(--line); border-radius:5px;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.faq__item:hover{ border-color:rgba(255,90,0,.34); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.15rem 1.4rem;
  font-family:var(--font-head); font-weight:400;
  font-size:.86rem; letter-spacing:.055em; text-transform:uppercase;
  line-height:1.4;
  transition:color .3s var(--ease);
}
.faq__item summary:hover{ color:var(--orange); }
.faq__item summary::after{
  content:"+"; flex:0 0 auto;
  font-family:var(--font-body); font-weight:300; font-size:1.35rem; line-height:1;
  color:var(--orange);
  transition:transform .45s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item[open]{ border-color:rgba(255,90,0,.34); }
.faq__body{ overflow:hidden; transition:height .42s var(--ease); }
.faq__body p{
  padding:0 1.4rem 1.35rem; color:var(--gray);
  font-size:.9rem; line-height:1.75;
}

/* ---------------- CTA WhatsApp ---------------- */
.cta-wa{
  margin-top:2rem;
  display:flex; align-items:center; gap:1.15rem;
  padding:1.4rem 1.6rem;
  border:1px solid var(--orange); border-radius:6px;
  background:rgba(255,90,0,.035);
  transition:background-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cta-wa__icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,90,0,.55); color:var(--orange);
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.cta-wa__icon .ic{ width:22px; height:22px; }
.cta-wa__text{ display:flex; flex-direction:column; gap:.15rem; }
.cta-wa__text strong{
  font-family:var(--font-head); font-weight:500;
  font-size:1.12rem; letter-spacing:.045em; text-transform:uppercase;
}
.cta-wa__text small{ color:var(--gray); font-size:.85rem; }
.cta-wa__arrow{ margin-left:auto; color:var(--orange); transition:transform .45s var(--ease); }
.cta-wa:hover{ background:rgba(255,90,0,.1); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(255,90,0,.8); }
.cta-wa:hover .cta-wa__icon{ background:var(--orange); color:#fff; }
.cta-wa:hover .cta-wa__arrow{ transform:translateX(5px); }

/* ---------------- Galería ---------------- */
.gallery{
  display:grid; grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:clamp(96px, 10.2vw, 138px);
  gap:clamp(.6rem, .95vw, .9rem);
}
.gallery__item{ margin:0; overflow:hidden; border-radius:4px; background:var(--bg-3); }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease), opacity .5s var(--ease); }
.gallery__item:hover img{ transform:scale(1.055); }

.gallery__item:nth-child(1){ grid-column:1/8;  grid-row:1/3; }
.gallery__item:nth-child(2){ grid-column:8/13; grid-row:1/4; }
.gallery__item:nth-child(3){ grid-column:1/5;  grid-row:3/5; }
.gallery__item:nth-child(4){ grid-column:5/8;  grid-row:3/5; }
.gallery__item:nth-child(5){ grid-column:8/13; grid-row:4/7; }
.gallery__item:nth-child(6){ grid-column:1/5;  grid-row:5/7; }
.gallery__item:nth-child(7){ grid-column:5/8;  grid-row:5/7; }

.gallery__cta{ margin-top:clamp(2.5rem, 4vw, 3.5rem); text-align:center; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding-top:clamp(3.5rem, 6.5vw, 6rem);
}
/* Pie en una sola línea, con el logo en el medio. Las redes van absolutas a la
   derecha: si participaran del flex, empujarían el logo fuera del centro. */
.foot-bar{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.2rem, 2.6vw, 2.6rem); flex-wrap:wrap;
  padding-bottom:clamp(1.75rem, 3vw, 2.5rem);
}
.foot-nav{ display:flex; align-items:center; gap:clamp(1.2rem, 2.4vw, 2.4rem); }
.foot-nav a{
  font-family:var(--font-head); font-weight:400;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray); transition:color .3s var(--ease); white-space:nowrap;
}
.foot-nav a:hover{ color:var(--orange); }
.foot-logo img{ width:clamp(96px, 9vw, 124px); height:auto; display:block; }
.foot-social{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; gap:1.15rem;
}
.foot-social a{ color:var(--orange); transition:color .3s var(--ease), transform .3s var(--ease); }
.foot-social a:hover{ color:#fff; transform:translateY(-2px); }

.foot-nap{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.5rem .75rem;
  font-style:normal; color:var(--gray-dim); font-size:.84rem;
  padding-bottom:clamp(1.75rem, 3vw, 2.5rem); text-align:center;
}
.foot-nap a{ color:var(--gray); transition:color .3s var(--ease); }
.foot-nap a:hover{ color:var(--orange); }

.foot-bottom{
  border-top:1px solid var(--line);
  padding-block:1.75rem;
  text-align:center;
}
.foot-bottom p{ color:var(--gray-dim); font-size:.82rem; }

/* WhatsApp flotante */
.wa-float{
  position:fixed; right:clamp(1rem,2.4vw,1.85rem); bottom:clamp(1rem,2.4vw,1.85rem);
  z-index:90; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); color:#fff;
  box-shadow:0 14px 34px -14px rgba(255,90,0,.85);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), background-color .3s var(--ease);
}
.wa-float.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover{ background:var(--orange-2); transform:translateY(-3px); }
.wa-float .ic{ width:26px; height:26px; }

/* =========================================================
   REVEAL
   ========================================================= */
/* Sin JS el contenido se muestra normalmente: sólo ocultamos si `js` está activo */
.js .reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.cards .reveal.is-in:nth-child(2), .benefits li:nth-child(2){ transition-delay:.08s; }
.cards .reveal.is-in:nth-child(3){ transition-delay:.16s; }
.cards .reveal.is-in:nth-child(4){ transition-delay:.24s; }
.gallery .reveal.is-in:nth-child(2){ transition-delay:.06s; }
.gallery .reveal.is-in:nth-child(3){ transition-delay:.12s; }
.gallery .reveal.is-in:nth-child(4){ transition-delay:.18s; }
.gallery .reveal.is-in:nth-child(5){ transition-delay:.24s; }
.gallery .reveal.is-in:nth-child(6){ transition-delay:.3s; }
.gallery .reveal.is-in:nth-child(7){ transition-delay:.36s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---- ≤1200px ---- */
@media (max-width:1200px){
  :root{ --header-h:98px; }
  .nav{ gap:clamp(1rem, 2.2vw, 1.9rem); }
  .nav a{ font-size:.76rem; letter-spacing:.13em; }
  .brand img{ width:130px; }         /* 89px de alto */
  .slide__copy{ width:min(33%, 300px); }
  .hero__thumb{ width:84px; }
}

/* ---- ≤1024px ---- */
@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2, 1fr); gap:clamp(1.6rem, 3vw, 2.4rem); }
  .benefits{ grid-template-columns:repeat(2, 1fr); gap:1.75rem 1.5rem; }
  .quoter{ grid-template-columns:1fr 1fr; }
  .quoter__go{ grid-column:1/-1; }
  /* cinco tarjetas no caben: pasan a fila deslizable y la central deja de sobresalir */
  .plans{
    grid-template-columns:repeat(5, minmax(180px, 1fr));
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:1rem; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  }
  .plans::-webkit-scrollbar{ display:none; }
  .plan{ scroll-snap-align:center; }
  .plan--feature{ aspect-ratio:3/4.35; }
  .foot-social{ position:static; transform:none; }
  .slide__media{ width:min(88%, 780px); }
  .slide__copy{ width:min(36%, 280px); bottom:6%; }
}

/* ---- ≤900px : navegación móvil ---- */
@media (max-width:900px){
  :root{ --header-h:92px; }
  .site-header__inner{ grid-template-columns:1fr auto 1fr; }
  .burger{ display:block; }
  .nav{ display:none; }
  .brand img{ width:116px; }        /* 80px de alto dentro de 92px */
  .site-header.is-stuck{ height:82px; }
  .site-header.is-stuck .brand img{ width:104px; }

  /* En móvil el hero se apila: imagen → texto → frase → redes */
  .hero__inner{ display:flex; flex-direction:column; }
  .hero__stage{ order:1; }
  .hero__caption{ order:2; }
  .hero__social{ order:3; }
  .hero__controls{ order:4; }
  .hero__foot{ order:5; }   /* sin esto cae arriba del todo: order por defecto = 0 */

  .hero{ min-height:auto; padding-bottom:3.5rem; }
  .hero__stage{ text-align:center; }
  /* En móvil se conserva la composición del escritorio: palabra gigante detrás y
     la foto encima, sólo que apilada. Antes la palabra iba en su propia línea y
     el hero perdía todo el efecto de profundidad. */
  .slide{ display:block; position:relative; }
  /* `max-width:none` dejaba que la palabra creciera sin límite: se salía por la
     derecha y el overflow del hero la cortaba a media letra (sin generar scroll,
     así que ningún test lo detectaba). El JS la reescala si aun así no cabe. */
  .slide__word{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    font-size:clamp(3.1rem, 17.5vw, 7rem);
    width:max-content; max-width:calc(100vw - 1.5rem);
  }
  .slide.is-active .slide__word{ animation:none; }
  .slide__media{
    position:relative; z-index:2;
    /* nunca más ancha que la pantalla menos el margen lateral */
    width:min(100%, calc(100vw - 2.5rem), 560px); margin-inline:auto;
    padding-top:clamp(2.2rem, 9vw, 4rem);
  }
  .slide__copy{
    position:relative; z-index:3;
    width:100%; max-width:26rem; margin:1.25rem auto 0;
    text-align:center;
  }
  .slide__title{ font-size:clamp(1.7rem, 7.4vw, 2.5rem); }
  .slide__copy p{ max-width:none; margin:.9rem auto 1.6rem; }
  .hero__social{
    position:static; flex-direction:row; justify-content:center;
    gap:1.6rem; margin-top:2.25rem;
  }
  /* Las flechas y la miniatura sobran en móvil: se navega deslizando (ver main.js)
     y con los puntos. Además, sin `order` propio se iban al principio del hero. */
  .hero__aside{ display:none; }
  .hero__caption{ margin-top:2rem; font-size:.68rem; letter-spacing:.3em; }
  .hero::after{ display:none; }

  /* Pie del hero apilado: estaciones en una sola línea deslizable + cue debajo.
     Si se deja envolver, el punto separador del primer enlace de la segunda
     línea queda huérfano al inicio y parece un error de maquetación. */
  .hero__foot{
    flex-direction:column; align-items:center; gap:1.35rem;
    margin-top:2.6rem; padding-top:1.7rem;
  }
  .stations{
    width:100%; flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:.35rem;
    /* difumina el borde derecho para insinuar que hay más estaciones */
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 82%,transparent 100%);
  }
  .stations::-webkit-scrollbar{ display:none; }
}

/* ---- ≤640px ---- */
@media (max-width:640px){
  body{ font-size:15.5px; }
  .cards{ grid-template-columns:1fr; gap:2.75rem; }
  /* a una columna la foto tiene todo el ancho: el mínimo de 200px la dejaba
     diminuta y descuadrada respecto al texto */
  .card__media img{ height:clamp(230px, 62vw, 300px); }
  .card__title{ font-size:1.3rem; }
  .card__text{ max-width:30rem; }
  .quoter{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr; gap:1.9rem; }
  .benefits li{ display:grid; grid-template-columns:42px 1fr; column-gap:1.15rem; align-items:start; }
  .benefits__icon{ grid-row:1/3; margin-bottom:0; }
  .benefits h3{ margin-bottom:.35rem; }
  /* en fila los cuatro beneficios no caben: vuelven a apilarse alineados a la izquierda */
  .benefits--row{ grid-template-columns:1fr; text-align:left; }
  .benefits--row .benefits__icon{ margin-inline:0; }

  .plans{ grid-template-columns:repeat(5, minmax(158px, 1fr)); }

  .gallery{ grid-template-columns:repeat(6,1fr); grid-auto-rows:88px; }
  .gallery__item:nth-child(1){ grid-column:1/7; grid-row:1/3; }
  .gallery__item:nth-child(2){ grid-column:1/4; grid-row:3/6; }
  .gallery__item:nth-child(3){ grid-column:4/7; grid-row:3/5; }
  .gallery__item:nth-child(4){ grid-column:4/7; grid-row:5/7; }
  .gallery__item:nth-child(5){ grid-column:1/4; grid-row:6/8; }
  .gallery__item:nth-child(6){ grid-column:4/7; grid-row:7/9; }
  .gallery__item:nth-child(7){ grid-column:1/4; grid-row:8/10; }

  .cta-wa{ padding:1.25rem 1.2rem; gap:.9rem; }
  .cta-wa__text strong{ font-size:1rem; }
  .cta-wa__arrow{ display:none; }

  .foot-bar{ flex-direction:column; gap:1.5rem; }
  .foot-nav{ gap:1.4rem; }
  .foot-social{ position:static; transform:none; }
  .wa-float{ width:48px; height:48px; }
  .wa-float .ic{ width:24px; height:24px; }
}

/* ---- ≤390px ---- */
@media (max-width:390px){
  :root{ --gutter:1.25rem; }
  .slide__word{ font-size:clamp(2.5rem, 15.5vw, 4rem); }
  .mobile-nav nav a{ font-size:1.6rem; }
}

/* ---- Preferencias de movimiento ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   CONTENIDO TRAÍDO DEL SITIO EN PRODUCCIÓN
   ========================================================= */
.section--precios{ background:var(--bg); }
.section--tipos{ background:var(--bg-2); }
.section--como{ background:var(--bg); }

/* Texto corrido: ancho de lectura cómodo y enlaces subrayados en naranja */
.prose{
  max-width:52rem; margin-inline:auto;
  color:var(--gray); text-align:center;
}
.prose p + p{ margin-top:1.15rem; }
.prose b{ color:#fff; font-weight:500; }
.prose a, .ticks a, .step a{
  color:var(--orange);
  border-bottom:1px solid rgba(255,90,0,.35);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.prose a:hover, .ticks a:hover, .step a:hover{ color:#fff; border-bottom-color:#fff; }

/* Tarjetas por número de invitados */
.sizes{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 1.8vw, 1.6rem);
  margin-top:clamp(2.5rem, 4.5vw, 3.75rem);
}
.size{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:clamp(1.75rem, 2.6vw, 2.4rem) 1.25rem;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.size b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem, 3.6vw, 3.2rem); line-height:1; color:#fff;
}
.size span{
  font-family:var(--font-head); font-size:.76rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--gray-dim);
}
.size em{ font-style:normal; font-size:.92rem; color:var(--orange); margin-top:.5rem; }
.size:hover{ transform:translateY(-6px); border-color:rgba(255,90,0,.45); background:#131315; }

/* Dos columnas: sociales / empresariales */
.dual{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 4vw, 4rem);
}
.dual__col h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem, 1.7vw, 1.65rem); letter-spacing:.02em;
  margin-bottom:1.5rem;
}
.ticks{ display:flex; flex-direction:column; gap:1rem; }
.ticks li{
  position:relative; padding-left:1.9rem;
  color:var(--gray); font-size:.94rem; line-height:1.68;
}
/* la marca es un pseudo-elemento: no ensucia el HTML ni lo lee el lector de pantalla */
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:5px;
  border-left:1.5px solid var(--orange); border-bottom:1.5px solid var(--orange);
  transform:rotate(-45deg);
}

/* Cómo trabajamos */
.steps{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(1.25rem, 2.2vw, 2rem);
  margin-top:clamp(2.75rem, 4.5vw, 4rem);
}
.step{
  padding:clamp(1.6rem, 2.2vw, 2.1rem);
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  border-top:2px solid var(--orange);
}
.step h3{
  font-family:var(--font-head); font-weight:500;
  font-size:.94rem; letter-spacing:.11em; margin-bottom:.85rem;
}
.step p{ color:var(--gray); font-size:.89rem; line-height:1.7; }
.note{
  max-width:52rem; margin:clamp(2.5rem, 4vw, 3.5rem) auto 0;
  padding-left:1.5rem; border-left:2px solid var(--orange);
  color:var(--gray-dim); font-size:.92rem; line-height:1.75; font-style:italic;
}

@media (max-width:1024px){
  .steps{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .sizes{ grid-template-columns:1fr; }
  .dual{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .prose{ text-align:left; }
}

/* =========================================================
   CORTINA DE CARGA
   ========================================================= */
/* Dos mitades con un corte en diagonal que se separan al terminar de pintar.
   IMPORTANTE: sólo se activa si hay JS (`html.js`). Sin JS nunca se vería la
   página, y el loader tampoco debe retrasar el LCP: se abre en el primer frame
   tras el paint, no cuando terminan de cargar las imágenes. */
.loader{ display:none; }
.js .loader{
  display:block; position:fixed; inset:0; z-index:9999;
  pointer-events:none;
}
.js .loader__half{
  position:absolute; inset:0;
  background:var(--bg);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
/* el corte diagonal: cada mitad se recorta por la misma línea, así encajan */
.js .loader__half--a{ clip-path:polygon(0 0, 100% 0, 0 100%); }
.js .loader__half--b{ clip-path:polygon(100% 0, 100% 100%, 0 100%); }

.js .loader__logo{
  position:absolute; inset:0; display:grid; place-items:center;
  transition:opacity .45s var(--ease), transform .8s var(--ease);
}
.js .loader__logo img{
  width:clamp(150px, 20vw, 220px); height:auto;
  animation:loaderPulse 1.6s var(--ease) infinite;
}
@keyframes loaderPulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

/* estado abierto: el logo se va y las mitades salen por sus esquinas */
.js .loader.is-open .loader__logo{ opacity:0; transform:scale(.94); }
.js .loader.is-open .loader__half--a{ transform:translate(-52%, -52%); }
.js .loader.is-open .loader__half--b{ transform:translate(52%, 52%); }
.js .loader.is-done{ display:none; }

@media (prefers-reduced-motion:reduce){
  .js .loader__half{ transition:none; }
  .js .loader__logo img{ animation:none; }
}

/* =========================================================
   PÁGINAS INTERNAS
   ========================================================= */
.page-hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom:clamp(3rem, 6vw, 5.5rem);
  background:var(--bg);
}
/* Dos columnas: TODO el texto en una y la foto en la otra. Sin el envoltorio
   `.page-hero__text` los seis elementos se reparten sueltos por la rejilla. */
.page-hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.page-hero__text{ min-width:0; }
.crumb{
  font-family:var(--font-head); font-size:.76rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--gray-dim); margin-bottom:1.5rem;
}
.crumb a{ transition:color .3s var(--ease); }
.crumb a:hover{ color:var(--orange); }
.crumb b{ color:#fff; font-weight:400; }
.crumb span{ margin-inline:.5rem; color:rgba(255,255,255,.25); }

.eyebrow{
  font-family:var(--font-head); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--orange); margin-bottom:1.1rem;
}
.page-hero__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:.98;
  letter-spacing:.005em; text-transform:uppercase;
}
.page-hero__title em{ display:block; font-style:normal; color:var(--gray); }
.page-hero__lead{
  color:var(--gray); max-width:34rem;
  margin:clamp(1.25rem, 2vw, 1.75rem) 0 clamp(1.75rem, 2.6vw, 2.4rem);
}
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.page-hero__media{ margin:0; display:grid; place-items:center; }
.page-hero__media img{
  width:auto; max-width:100%; height:clamp(230px, 26vw, 380px);
  object-fit:contain;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.65));
}

@media (max-width:900px){
  .page-hero__in{ grid-template-columns:1fr; text-align:center; }
  .page-hero__lead{ margin-inline:auto; }
  .page-hero__actions{ justify-content:center; }
  .page-hero__media{ order:-1; margin-bottom:1.5rem; }
}

/* =========================================================
   INTERNA EDITORIAL — diagonales, titulares gigantes y banda de color
   ========================================================= */
.page--editorial{ --diag:clamp(48px, 7vw, 110px); }

/* Titular común: Anton a tamaño de cartel */
.ed-title{
  font-family:var(--font-display); font-weight:400;
  text-transform:uppercase; line-height:.9; letter-spacing:-.01em;
  color:#fff;
}
.ed-title--hero{ font-size:clamp(3rem, 11vw, 8.5rem); }
.ed-title--hero em{ display:block; font-style:normal; color:var(--orange); }

/* ---- El H1 del hero en móvil ----
   Los H1 pasaron de rótulos de dos palabras ("Coffee break") a frases con la
   keyword y un dato ("Coffee break en Bogotá: 6 opciones…"). A 48px eso son
   cinco líneas y un cuarto de pantalla, y con line-height .84 la tilde de la Á
   se metía en la línea de arriba y se perdía. */
@media (max-width:640px){
  /* 1.06 y no .98: con Anton en mayúsculas, la tilde de la Á de la segunda línea
     se mete en la línea de arriba y «BOGOTÁ» se lee «BOGOTA». */
  .ed-title--hero{ font-size:clamp(1.9rem, 8.2vw, 3rem); line-height:1.06; }
  .ed-title--hero em{ margin-top:.12em; }
}

/* ---- Portada: foto a sangre y titular centrado encima ---- */
.ed-hero{
  position:relative; overflow:hidden;
  min-height:clamp(520px, 78vh, 780px);
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem));
  padding-bottom:calc(var(--diag) + clamp(2rem, 4vw, 3.5rem));
  background:var(--bg);
  text-align:center;
}
.ed-hero__bg{ position:absolute; inset:0; margin:0; z-index:0; }
.ed-hero__bg img{ width:100%; height:100%; object-fit:cover; }
/* velo: sin él, el titular blanco no se lee sobre una foto con gente y comida */
.ed-hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.55) 42%, rgba(5,5,5,.88) 100%),
    radial-gradient(65% 55% at 50% 45%, rgba(5,5,5,.15), rgba(5,5,5,.72) 100%);
}
/* diagonales decorativas, como las líneas del diseño de referencia */
.ed-hero__diag{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.ed-hero__diag span{
  position:absolute; top:-30%; bottom:-30%; width:44vw;
  background:linear-gradient(90deg, rgba(255,90,0,.10), rgba(255,90,0,0));
  transform:skewX(-18deg);
}
.ed-hero__diag span:first-child{ left:-22vw; }
.ed-hero__diag span:last-child{ right:-22vw; transform:skewX(-18deg) scaleX(-1); }

.ed-hero__in{
  position:relative; z-index:4;
  display:flex; flex-direction:column; align-items:center;
}
.ed-hero .crumb{ margin-bottom:1.25rem; }
.ed-hero__kicker{
  font-family:var(--font-head); font-size:clamp(.68rem, .9vw, .82rem);
  letter-spacing:.52em; text-transform:uppercase;
  color:rgba(255,255,255,.82); margin-bottom:1rem; padding-left:.52em;
}
.ed-hero__lead{
  color:var(--gray); max-width:38rem;
  margin:clamp(1.1rem,2vw,1.6rem) auto clamp(1.75rem,2.6vw,2.4rem);
}
.ed-hero__cut{
  position:absolute; inset:auto 0 0 0; height:var(--diag); z-index:5;
  background:var(--orange);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}

/* flechas laterales a los servicios vecinos */
.ed-sib{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-head); font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  padding:.6rem .9rem;
  transition:color .3s var(--ease), transform .35s var(--ease);
}
.ed-sib .ic{ width:16px; height:16px; }
.ed-sib--prev{ left:clamp(.5rem, 2vw, 2rem); }
.ed-sib--prev .ic{ transform:rotate(180deg); }
.ed-sib--next{ right:clamp(.5rem, 2vw, 2rem); }
.ed-sib:hover{ color:var(--orange); }
.ed-sib--prev:hover{ transform:translateY(-50%) translateX(-4px); }
.ed-sib--next:hover{ transform:translateY(-50%) translateX(4px); }
@media (max-width:900px){
  /* en móvil las flechas bajan al pie del hero: a media altura chocan con el titular */
  .ed-sib{
    top:auto; bottom:calc(var(--diag) + .5rem); transform:none;
    padding:.5rem; gap:.45rem;
  }
  .ed-sib span{ font-size:.68rem; letter-spacing:.14em; }
  .ed-sib--prev:hover, .ed-sib--next:hover{ transform:none; }
  /* con .52em de tracking el kicker se parte en dos líneas y queda descuadrado */
  .ed-hero__kicker{ letter-spacing:.26em; padding-left:.26em; font-size:.66rem; }
}

/* ---- Sobre: foto + titular con palabra encima ---- */
.ed-about{ background:var(--bg); padding-block:clamp(3.5rem, 7vw, 6.5rem); }
.ed-about__in{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem, 5vw, 5rem); align-items:center;
}
/* sin foto, el texto no debe quedarse en la columna estrecha con un hueco al lado */
.ed-about--solo .ed-about__in{ grid-template-columns:1fr; }
.ed-about__media{ margin:0; overflow:hidden; }
.ed-about__media img{ width:100%; height:auto; display:block; }
/* la palabra pequeña se monta sobre la grande, como en la referencia */
.ed-title--over{ position:relative; display:block; margin-bottom:1.75rem; }
.ed-title__big{
  display:block; font-size:clamp(3.4rem, 9vw, 7rem);
  color:var(--orange); line-height:.86;
}
.ed-title__small{
  position:absolute; left:.06em; top:46%; transform:translateY(-50%);
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(1rem, 2.1vw, 1.7rem); letter-spacing:.05em;
  color:#fff; white-space:nowrap;
}
.ed-about__text p{ color:var(--gray); max-width:34rem; }
.ed-about__text p + p{ margin-top:1.1rem; }
.ed-about__text .btn{ margin-top:1.9rem; }

/* ---- Banda naranja a sangre ---- */
/* El clip-path recorta por arriba y por abajo: el padding tiene que incluir la
   altura de la diagonal o el texto queda cortado contra el borde inclinado. */
.ed-band{
  position:relative; overflow:hidden;
  background:var(--orange); color:#0A0A0A;
  padding-block:calc(var(--diag) + clamp(1.75rem, 3vw, 3rem));
  clip-path:polygon(0 var(--diag), 100% 0, 100% 100%, 0 calc(100% - var(--diag)));
  margin-block:calc(var(--diag) * -.5);
}
.ed-band__in{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.5rem, 4vw, 3.5rem);
}
.ed-title--band{ color:#0A0A0A; font-size:clamp(2.6rem, 7vw, 5.5rem); }
.ed-band__text p{ color:rgba(10,10,10,.72); margin-top:.6rem; max-width:22rem; }
.ed-price{ display:flex; flex-direction:column; line-height:1; margin-left:auto; }
.ed-price__from{ font-family:var(--font-head); font-size:.9rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(10,10,10,.6); }
.ed-price__num{ font-family:var(--font-display); font-weight:400; font-size:clamp(3rem, 8vw, 6rem); color:#0A0A0A; }
.ed-price__unit{ font-family:var(--font-head); font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(10,10,10,.72); }
.btn--dark{ background:#0A0A0A; color:#fff; }
.btn--dark:hover{ background:#000; box-shadow:0 12px 30px -12px rgba(0,0,0,.6); }
.ed-band__media{
  position:absolute; right:-3%; bottom:2%; z-index:1; margin:0;
  width:min(24%, 280px); opacity:.35; pointer-events:none;
}
.ed-band__media img{ width:100%; height:auto; }

/* ---- Tipos de menú: titular apilado ---- */
.ed-services{ background:var(--bg); padding-block:clamp(4rem, 8vw, 7rem); }
.ed-services__in{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem, 5vw, 4.5rem);
}
.ed-services__intro{
  font-family:var(--font-head); font-size:1.05rem; letter-spacing:.06em;
  color:var(--gray); margin-bottom:1.25rem;
}
.ed-title--stack{ display:flex; flex-direction:column; font-size:clamp(2.8rem, 7.5vw, 6rem); }
.ed-title--stack span:nth-child(even){ color:var(--orange); }
.ed-services__list{ display:flex; flex-direction:column; }
.ed-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:clamp(1.4rem, 2.2vw, 2rem) 0;
  border-bottom:1px solid var(--line);
}
.ed-item:first-child{ border-top:1px solid var(--line); }
.ed-item__icon{ color:var(--orange); }
.ed-item__icon .ic{ width:38px; height:38px; }
.ed-item h3{
  font-family:var(--font-head); font-size:1.02rem; letter-spacing:.11em;
  margin-bottom:.55rem;
}
.ed-item p{ color:var(--gray); font-size:.92rem; line-height:1.7; }

/* ---- Bloque claro (contraste, como el gris de la referencia) ---- */
.ed-light{
  background:#F3F2EF; color:#101010;
  padding-block:clamp(4rem, 8vw, 7rem);
  clip-path:polygon(0 0, 100% var(--diag), 100% 100%, 0 100%);
  margin-top:calc(var(--diag) * -1);
}
.ed-title--dark{ color:#101010; font-size:clamp(2.4rem, 6vw, 4.6rem); margin-bottom:clamp(2rem,4vw,3rem); }
.ed-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(1.25rem, 2.4vw, 2.25rem); }
.ed-step b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:2.6rem; color:var(--orange); line-height:1; margin-bottom:.7rem;
}
.ed-step h3{ font-family:var(--font-head); font-size:.98rem; letter-spacing:.09em; color:#101010; margin-bottom:.6rem; }
.ed-step p{ color:#4A4A4A; font-size:.9rem; line-height:1.7; }
.ed-note{
  margin-top:clamp(2.5rem, 4vw, 3.5rem); padding-left:1.4rem;
  border-left:2px solid var(--orange);
  color:#4A4A4A; font-size:.94rem; max-width:52rem;
}
.ed-note a{ color:#C24300; border-bottom:1px solid rgba(194,67,0,.35); }
.ed-note a:hover{ color:#101010; border-bottom-color:#101010; }

@media (max-width:900px){
  .ed-about__in, .ed-services__in{ grid-template-columns:1fr; }
  .ed-about__media{ max-width:26rem; }
  .ed-band__in{ flex-direction:column; align-items:flex-start; }
  .ed-price{ margin-left:0; }
  .ed-band__media{ display:none; }
  .ed-steps{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .ed-steps{ grid-template-columns:1fr; }
  /* La palabra pequeña montada sobre la grande funciona en pantalla ancha, pero
     en móvil la grande baja de tamaño y las dos se pisan («PARA QUÉ» encima de
     «EVENTOS»). Aquí se saca del posicionamiento absoluto y se apila encima. */
  /* orden natural de lectura: la grande primero. Con `column-reverse` se leía
     «Que atendemos Eventos» y «Para 40 personas Buffet». */
  .ed-title--over{ display:flex; flex-direction:column; align-items:flex-start; }
  .ed-title__small{
    position:static; top:auto; left:auto; transform:none;
    margin-top:.35rem; white-space:normal;
  }
}

/* ---- Ajustes del estilo editorial dentro de la home ---- */
.prose--left{ text-align:left; margin-inline:0; max-width:none; }
.dual--tight{ gap:clamp(1.5rem, 3vw, 2.5rem); margin-top:1.5rem; }
.dual--tight .dual__col h3{
  font-family:var(--font-head); font-weight:500;
  font-size:1rem; letter-spacing:.13em; margin-bottom:1rem;
}
.dual--tight .ticks li{ font-size:.9rem; }
.ed-light__lead{
  max-width:52rem; color:#4A4A4A;
  margin-bottom:clamp(2.25rem, 4vw, 3.25rem);
}
/* La lista de "qué incluye" vive sobre el fondo claro: el gris del tema oscuro
   no contrasta ahí, y a una columna quedaría una tira larguísima. */
.ed-light .ticks li{ color:#4A4A4A; }
.ticks--dos{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:.9rem clamp(1.5rem, 3vw, 3rem);
  margin-bottom:clamp(2.5rem, 4.5vw, 3.75rem);
}
.ed-light__sub{
  font-family:var(--font-head); font-weight:500;
  font-size:1rem; letter-spacing:.13em; text-transform:uppercase;
  color:#101010; margin-bottom:clamp(1.5rem, 2.5vw, 2rem);
}
@media (max-width:700px){ .ticks--dos{ grid-template-columns:1fr; } }
/* la banda es lo primero de la zona editorial: no debe morder la sección anterior */
.section--planes + .ed-band{ margin-top:0; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--diag))); }
.ed-services__list .sizes{ margin-top:clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width:640px){
  .dual--tight{ grid-template-columns:1fr; }
}

/* =========================================================
   MAPA DE SERVICIOS EN EL PIE
   Son las URL que ya posicionan en Google. Se replican tal cual del sitio en
   producción: si alguna desaparece, se pierde el enlace interno que la sostiene.
   ========================================================= */
.foot-map{
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem, 5vw, 4rem);
}
.foot-map__title{
  font-family:var(--font-head); font-weight:400;
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:clamp(1.75rem, 3.5vw, 2.75rem);
}
.foot-map__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.4vw, 2.25rem);
}
.foot-map__col p{
  font-family:var(--font-head); font-weight:400;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; padding-bottom:.6rem; margin-bottom:1rem;
  border-bottom:2px solid var(--orange);
  /* el borde sólo debe medir lo que mide el texto, no toda la columna */
  display:inline-block;
}
.foot-map__col ul{ list-style:none; display:flex; flex-direction:column; gap:.62rem; }
.foot-map__col a{
  color:var(--gray); font-size:.87rem; line-height:1.45;
  transition:color .3s var(--ease);
}
.foot-map__col a:hover{ color:var(--orange); }

/* =========================================================
   TARJETAS CON FOTO (opciones de refrigerio, estaciones, categorías, menús)
   ========================================================= */
.ed-cards{ background:var(--bg); padding-block:clamp(3.5rem, 7vw, 6rem); }
.ed-cards__head{ margin-bottom:clamp(2rem, 4vw, 3rem); max-width:44rem; }
.ed-cards__head p{ color:var(--gray); margin-top:.9rem; }
.ed-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(248px, 1fr));
  gap:clamp(1.1rem, 2.2vw, 1.9rem);
}
.ed-card{
  border:1px solid var(--line);
  background:#0C0F13;
  display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.ed-card:hover{ border-color:rgba(255,90,0,.55); transform:translateY(-4px); }
.ed-card__media{ overflow:hidden; aspect-ratio:1; }
.ed-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.ed-card:hover .ed-card__media img{ transform:scale(1.05); }
.ed-card__body{ padding:clamp(1.1rem, 2vw, 1.5rem); display:flex; flex-direction:column; flex:1; }
.ed-card__num{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.22em;
  color:var(--orange); margin-bottom:.5rem;
}
.ed-card h3{
  font-family:var(--font-head); font-weight:400;
  font-size:1.06rem; letter-spacing:.04em; color:#fff; margin-bottom:.55rem;
}
.ed-card__lead{ color:var(--gray); font-size:.88rem; line-height:1.65; margin-bottom:.9rem; }
.ed-card ul{ list-style:none; display:flex; flex-direction:column; gap:.42rem; margin-top:auto; }
.ed-card li{
  color:var(--gray); font-size:.84rem; line-height:1.5;
  padding-left:1.05rem; position:relative;
}
.ed-card li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:6px; height:6px; border:1px solid var(--orange); transform:rotate(45deg);
}
.ed-cards__note{
  color:var(--gray-dim); font-size:.86rem; text-align:center;
  margin-top:clamp(1.75rem, 3vw, 2.5rem);
}

/* Banda naranja sin cifra: para los servicios que sólo se cotizan a la medida */
.ed-price__word{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4.4rem); color:#0A0A0A; line-height:.95;
  text-transform:uppercase;
}
.ed-title--light{ color:#fff; font-size:clamp(2.4rem, 6vw, 4.6rem); }
/* Rejillas de filas completas: con auto-fit, 6 tarjetas caían 4+2. */
.ed-grid--3{ grid-template-columns:repeat(3, 1fr); }
.ed-grid--4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1080px){
  .ed-grid--4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:900px){
  .ed-grid--3{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .ed-grid, .ed-grid--3, .ed-grid--4{ grid-template-columns:1fr; }
}

/* Precio y etiqueta dentro de una tarjeta (opciones de coffee break) */
.ed-card{ position:relative; }
.ed-card__precio{
  display:flex; align-items:baseline; gap:.45rem;
  font-family:var(--font-display); font-weight:400;
  font-size:1.75rem; color:var(--orange); line-height:1; margin-bottom:.7rem;
}
.ed-card__precio small{
  font-family:var(--font-head); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-dim);
}
.ed-card__badge{
  position:absolute; top:.75rem; right:.75rem; z-index:2;
  background:var(--orange); color:#fff;
  font-family:var(--font-head); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.34rem .7rem;
}

/* =========================================================
   CARTA DE CÓCTELES
   Va en texto, no sólo en la imagen: la carta de producción vivía dentro de un
   PNG y Google no puede leer ni un solo nombre de trago ahí dentro.
   ========================================================= */
.carta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.trago{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  align-items:start;
  background:var(--bg);
  padding:clamp(1rem, 1.8vw, 1.35rem);
  transition:background .3s var(--ease);
}
.trago:hover{ background:#0C0F13; }
.trago__cod{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--orange); color:var(--orange);
  font-family:var(--font-head); font-size:.74rem; letter-spacing:.06em;
}
.trago h3{
  font-family:var(--font-head); font-weight:400;
  font-size:1rem; letter-spacing:.05em; color:#fff; margin-bottom:.3rem;
}
.trago p{ color:var(--gray); font-size:.84rem; line-height:1.6; }

.ed-figuras{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:clamp(1rem, 2vw, 1.6rem);
  margin-top:clamp(1.75rem, 3vw, 2.5rem);
}
.ed-figura{ margin:0; border:1px solid var(--line); background:#fff; }
.ed-figura img{ width:100%; height:auto; display:block; }

/* =========================================================
   PLANES DESCARGABLES (PDF)
   ========================================================= */
.planes-pdf{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:clamp(.7rem, 1.4vw, 1rem);
}
.plan-pdf{
  border:1px solid var(--line); background:#0C0F13;
  padding:clamp(1rem, 1.8vw, 1.35rem);
  display:flex; flex-direction:column; gap:.15rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.plan-pdf:hover{ border-color:var(--orange); background:#11151B; transform:translateY(-3px); }
.plan-pdf b{
  font-family:var(--font-display); font-weight:400; font-size:2rem;
  color:#fff; line-height:1;
}
.plan-pdf span{
  font-family:var(--font-head); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray-dim);
}
.plan-pdf em{
  font-style:normal; margin-top:.85rem;
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange);
}
.plan-pdf em .ic{ width:14px; height:14px; }

/* =========================================================
   COTIZADOR DE MENAJE — categorías → artículos con foto → datos
   ========================================================= */
.mq{ border:1px solid var(--line); background:#0C0F13; }

/* la barra del total se queda pegada arriba mientras se recorre el catálogo */
.mq-barra{
  position:sticky; top:var(--header-h, 76px); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.85rem, 1.8vw, 1.15rem) clamp(1rem, 2.4vw, 1.75rem);
  background:#0A0D11; border-bottom:1px solid var(--line);
}
.mq-barra span{
  display:block; font-family:var(--font-head); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gray-dim);
}
.mq-barra b{ font-family:var(--font-display); font-size:1.6rem; color:var(--orange); }
.mq-continuar[disabled]{ opacity:.4; pointer-events:none; }

.mq-vista{ padding:clamp(1rem, 2.4vw, 1.75rem); }

.mq-cats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.85rem; }
.mq-cat{
  border:1px solid var(--line); background:var(--bg);
  padding:clamp(1.1rem, 2.2vw, 1.6rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  text-align:left;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.mq-cat:hover{ border-color:var(--orange); background:#11151B; transform:translateY(-3px); }
.mq-cat__icon{ width:34px; height:34px; color:var(--orange); }
.mq-cat b{
  font-family:var(--font-head); font-weight:400; font-size:1rem;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
.mq-cat span{ font-size:.8rem; color:var(--gray-dim); }

.mq-lista__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.25rem;
}
.mq-lista__head h3{
  font-family:var(--font-head); font-weight:400; font-size:1.2rem;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
.mq-volver{
  font-family:var(--font-head); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray);
  border:1px solid var(--line); padding:.5rem .9rem;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.mq-volver:hover{ color:var(--orange); border-color:var(--orange); }

.mq-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:.85rem; }
.mq-item{
  border:1px solid var(--line); background:var(--bg);
  display:flex; flex-direction:column;
  transition:border-color .25s var(--ease);
}
.mq-item.is-activo{ border-color:var(--orange); }
.mq-item img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.mq-item__txt{ padding:.8rem .9rem .5rem; flex:1; }
.mq-item__txt h4{
  font-family:var(--font-body); font-weight:400; font-size:.86rem;
  line-height:1.35; color:#fff; margin-bottom:.35rem;
}
.mq-item__txt b{ font-family:var(--font-head); font-size:.95rem; color:var(--orange); }
.mq-item__cant{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .9rem .8rem; gap:.5rem;
}
.mq-item__cant button{
  width:30px; height:30px; border:1px solid var(--line); color:var(--gray);
  display:grid; place-items:center; font-size:1.05rem; line-height:1;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.mq-item__cant button:hover{ border-color:var(--orange); color:var(--orange); }
.mq-item__cant output{
  flex:1; text-align:center;
  font-family:var(--font-head); font-size:1rem; color:#fff;
}

.mq-ref{
  font-family:var(--font-head); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray-dim); margin-bottom:1rem;
}
.mq-ref b{ color:var(--orange); }
.mq-resumen__lista{ margin-bottom:1.5rem; }
.mq-resumen__lista div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--gray); font-size:.86rem;
}
.mq-resumen__lista .mq-total{
  border-bottom:0; border-top:1px solid var(--line); margin-top:.5rem; padding-top:.9rem;
}
.mq-resumen__lista .mq-total span{
  font-family:var(--font-head); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
}
.mq-resumen__lista .mq-total b{ font-family:var(--font-display); font-size:1.5rem; color:var(--orange); }
.mq-enviar{ width:100%; justify-content:center; margin-top:1.25rem; }
.mq-nota{ display:block; margin-top:.9rem; color:var(--gray-dim); font-size:.76rem; line-height:1.5; }

/* ---- El cotizador en móvil ----
   A una columna, cada artículo ocupaba 439 px por culpa de una foto cuadrada de
   314 px: la primera categoría medía 6.343 px, siete pantallas y media de scroll
   para 116 referencias. Aquí el artículo pasa a FILA (foto pequeña · texto ·
   stepper), que es como se recorre un catálogo con el pulgar. */
@media (max-width:640px){
  .mq-vista{ padding:.85rem; }

  /* dos categorías por fila en vez de una: 8 tarjetas apiladas eran 1.184 px */
  .mq-cats{ grid-template-columns:repeat(2, 1fr); gap:.6rem; }
  .mq-cat{ padding:.9rem .75rem; gap:.35rem; }
  .mq-cat__icon{ width:26px; height:26px; }
  .mq-cat b{ font-size:.82rem; line-height:1.25; }
  .mq-cat span{ font-size:.72rem; }

  .mq-items{ grid-template-columns:1fr; gap:.5rem; }
  .mq-item{
    display:grid; grid-template-columns:60px minmax(0,1fr) auto;
    align-items:center; gap:.8rem; padding:.55rem .7rem .55rem .55rem;
  }
  .mq-item img{ width:60px; height:60px; border-radius:3px; }
  .mq-item__txt{ padding:0; }
  .mq-item__txt h4{ font-size:.82rem; line-height:1.28; margin-bottom:.1rem; }
  .mq-item__txt b{ font-size:.9rem; }
  .mq-item__cant{ padding:0; gap:.1rem; }
  /* 30×30 se falla con el pulgar: 44 es el mínimo táctil */
  .mq-item__cant button{ width:44px; height:44px; font-size:1.2rem; }
  .mq-item__cant output{ flex:0 0 auto; min-width:1.8ch; font-size:1.05rem; }

  .mq-lista__head{ margin-bottom:.85rem; gap:.6rem; }
  .mq-lista__head h3{ font-size:1rem; }
  .mq-volver{ padding:.8rem .8rem; font-size:.68rem; white-space:nowrap; min-height:44px; }
}

@media (max-width:560px){
  /* apilada ocupaba 154 px de alto fijos, y va en `sticky`: se comía un quinto
     de la pantalla durante todo el recorrido del catálogo */
  .mq-barra{ flex-direction:row; align-items:center; gap:.6rem; padding:.7rem .85rem; }
  .mq-barra span{ font-size:.6rem; letter-spacing:.14em; }
  .mq-barra b{ font-size:1.3rem; }
  .mq-continuar{ justify-content:center; padding:.75rem 1rem; font-size:.68rem; letter-spacing:.1em; min-height:44px; }
}

/* =========================================================
   BLOG Y CONTACTO
   ========================================================= */
.posts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.post a{ display:block; background:var(--bg); height:100%; padding:clamp(1.4rem, 2.6vw, 2rem); transition:background .35s var(--ease); }
.post a:hover{ background:#0C0F13; }
.post__fecha{
  font-family:var(--font-head); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange);
}
.post h2{
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.05rem, 1.7vw, 1.28rem); line-height:1.3;
  color:#fff; margin:.7rem 0 .6rem;
}
.post p{ color:var(--gray); font-size:.88rem; line-height:1.65; }
.post em{
  font-style:normal; margin-top:1rem;
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-dim);
  transition:color .3s var(--ease);
}
.post a:hover em{ color:var(--orange); }
.post em .ic{ width:15px; height:15px; }

.canales{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(1rem, 2vw, 1.6rem); }
.canal{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  border:1px solid var(--line); background:#0C0F13;
  padding:clamp(1.2rem, 2.2vw, 1.7rem);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.canal:hover{ border-color:var(--orange); transform:translateY(-3px); }
.canal__icon{ color:var(--orange); }
.canal__icon .ic{ width:30px; height:30px; }
.canal h3{
  font-family:var(--font-head); font-weight:400; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:.4rem;
}
.canal p{ color:var(--gray); font-size:.85rem; line-height:1.6; margin-bottom:.6rem; }
.canal b{ color:var(--orange); font-size:.92rem; font-weight:400; }

/* Los planes descargables dentro de la sección de planes de la home */
.planes-descarga{ margin-top:clamp(2.5rem, 5vw, 4rem); }
.planes-descarga .sec-lead{ margin-bottom:clamp(1.5rem, 3vw, 2.25rem); max-width:52rem; }
.planes-descarga .ed-cards__note{ text-align:left; }

/* A 320 px la carta se salía 20 px: el código del trago (34 px) más el hueco no
   caben junto al texto. En pantallas muy estrechas el código pasa arriba. */
@media (max-width:360px){
  .trago{ grid-template-columns:1fr; gap:.5rem; }
  .trago__cod{ width:30px; height:30px; }
}

/* =========================================================
   COTIZADOR DE MENÚ EN 5 PASOS
   Copia del de producción: mismos menús, mismas opciones y mismo cálculo.
   ========================================================= */
.cot{ border:1px solid var(--line); background:#0C0F13; padding:clamp(1.25rem, 3vw, 2.5rem); }

.cot-pasos{
  list-style:none; display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:clamp(1.75rem, 3.5vw, 2.75rem);
  counter-reset:paso;
}
.cot-pasos li{
  flex:1 1 110px; display:flex; align-items:center; gap:.55rem;
  padding-bottom:.7rem; border-bottom:2px solid var(--line);
  color:var(--gray-dim); transition:color .3s var(--ease), border-color .3s var(--ease);
}
.cot-pasos li b{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid currentColor; font-family:var(--font-head); font-size:.76rem;
}
.cot-pasos li span{
  font-family:var(--font-head); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.cot-pasos li.is-active{ color:var(--orange); border-bottom-color:var(--orange); }
.cot-pasos li.is-done{ color:#fff; border-bottom-color:rgba(255,255,255,.35); }
.cot-pasos li.is-done b{ background:var(--orange); border-color:var(--orange); color:#fff; }

.cot-paso{ display:none; }
.cot-paso.is-active{ display:block; }
.cot-paso h3{
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing:.04em; color:#fff;
}
.cot-sub{ color:var(--gray); font-size:.9rem; margin:.5rem 0 clamp(1.25rem, 2.5vw, 2rem); }

/* paso 1 */
.cot-slider-caja{ text-align:center; padding:clamp(1.5rem, 3vw, 2.5rem) 0; }
.cot-cifra{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(3.5rem, 10vw, 6rem); line-height:1; color:var(--orange);
}
.cot-unidad{
  display:block; font-family:var(--font-head); font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); margin-bottom:1.5rem;
}
.cot-rango{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; cursor:pointer;
  background:linear-gradient(to right, var(--orange) 0%, var(--orange) 15%, rgba(255,90,0,.16) 15%, rgba(255,90,0,.16) 100%);
}
.cot-rango::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--orange); border:3px solid #0C0F13;
  box-shadow:0 0 0 1px var(--orange); cursor:grab;
}
.cot-rango::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--orange); border:3px solid #0C0F13; cursor:grab;
}
.cot-rango-limites{
  display:flex; justify-content:space-between; margin-top:.6rem;
  font-family:var(--font-head); font-size:.72rem; color:var(--gray-dim);
}

/* paso 2 */
.cot-menus{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.75rem; }
.cot-menu{
  position:relative; text-align:left;
  border:1px solid var(--line); background:var(--bg);
  padding:clamp(.9rem, 1.8vw, 1.2rem);
  display:flex; flex-direction:column; gap:.2rem;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.cot-menu:hover{ border-color:rgba(255,90,0,.6); transform:translateY(-2px); }
.cot-menu.is-selected{ border-color:var(--orange); background:rgba(255,90,0,.09); }
.cot-menu__nom{
  font-family:var(--font-head); font-size:.92rem; letter-spacing:.04em;
  text-transform:uppercase; color:#fff;
}
.cot-menu__precio{ font-family:var(--font-display); font-size:1.5rem; color:var(--orange); line-height:1.1; }
.cot-menu__gr{ font-size:.78rem; color:var(--gray-dim); line-height:1.4; }
.cot-menu__tag{
  position:absolute; top:.6rem; right:.6rem;
  font-style:normal; font-family:var(--font-head); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); border:1px solid rgba(255,90,0,.5); padding:.14rem .42rem;
}

/* pasos 3 y 4 */
.cot-campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem 1.25rem; }
.cot-campo label{
  display:block; margin-bottom:.42rem;
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-dim);
}
.cot-campo select,
.cot-campo input{
  width:100%; padding:.72rem .85rem;
  background:var(--bg); border:1px solid var(--line); color:#fff;
  font-family:var(--font-body); font-size:.9rem;
  transition:border-color .25s var(--ease);
}
.cot-campo select:focus,
.cot-campo input:focus{ outline:none; border-color:var(--orange); }
.cot-campo input::placeholder{ color:var(--gray-dim); }
.cot-error{
  margin-top:1rem; color:#ff7a5c; font-size:.86rem;
  border-left:2px solid #ff7a5c; padding-left:.8rem;
}

/* paso 5 */
.cot-resumen{ border:1px solid var(--line); padding:clamp(1.1rem, 2.4vw, 1.75rem); }
.cot-ref{
  font-family:var(--font-head); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray-dim); margin-bottom:1.1rem;
}
.cot-ref b{ color:var(--orange); }
#cot-detalle{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin-bottom:1.4rem; }
#cot-detalle dt{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-dim); white-space:nowrap;
}
#cot-detalle dd{ color:#fff; font-size:.88rem; }
.cot-calculo{ border-top:1px solid var(--line); padding-top:1rem; }
.cot-calculo div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; color:var(--gray); font-size:.88rem;
}
.cot-calculo b{ color:#fff; font-weight:400; }
.cot-calculo i{ font-style:normal; }
.cot-total{ border-top:1px solid var(--line); margin-top:.6rem; padding-top:.9rem !important; }
.cot-total span{
  font-family:var(--font-head); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
}
.cot-total b{ font-family:var(--font-display); font-size:1.7rem; color:var(--orange) !important; }
.cot-enviar{ width:100%; justify-content:center; margin-top:1.25rem; }
.cot-nota{ display:block; margin-top:.9rem; color:var(--gray-dim); font-size:.76rem; line-height:1.5; }

.cot-nav{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:clamp(1.5rem, 3vw, 2.25rem); }
.cot-nav .btn[disabled]{ opacity:.4; pointer-events:none; }

@media (max-width:560px){
  .cot-pasos li span{ display:none; }
  .cot-pasos li{ flex:1 1 auto; justify-content:center; }
  .cot-nav .btn{ flex:1 1 100%; justify-content:center; }
}

/* El menú replica el de producción: nueve entradas en lugar de cinco. Hay que
   apretar el espaciado o «Almuerzos y cenas» empuja el logo fuera del centro. */
@media (min-width:901px){
  .nav{ gap:clamp(.75rem, 1.5vw, 1.6rem); }
  .nav > a, .nav__item > a{ font-size:clamp(.66rem, .78vw, .78rem); letter-spacing:.1em; }
  .nav__item--cta > a{ letter-spacing:.12em; }
}
/* Alineación del desplegable. Sin modificador queda centrado bajo su entrada, pero
   el primero de la izquierda y los de la derecha se saldrían de la pantalla, así que
   se anclan al borde. El transform hay que redefinirlo: el centrado usa -50%. */
.submenu--start{ left:0; right:auto; transform:translate(0, 8px); }
.submenu--right{ left:auto; right:0; transform:translate(0, 8px); }
.nav__item:hover .submenu--start,
.nav__item:focus-within .submenu--start,
.nav__item:hover .submenu--right,
.nav__item:focus-within .submenu--right{ transform:translate(0, 0); }

/* Bloque de descarga de la carta en PDF */
.carta-pdf{
  border:1px solid var(--line); background:#0C0F13;
  padding:clamp(1.5rem, 3vw, 2.5rem);
  display:grid; gap:1.25rem; align-items:center;
  grid-template-columns:1fr auto;
}
.carta-pdf p{ color:var(--gray); margin-top:.9rem; max-width:46rem; }
.carta-pdf small{
  grid-column:1 / -1; color:var(--gray-dim); font-size:.78rem;
  font-family:var(--font-head); letter-spacing:.12em; text-transform:uppercase;
}
.carta-pdf .btn .ic{ width:15px; height:15px; }
@media (max-width:760px){
  .carta-pdf{ grid-template-columns:1fr; }
}

/* Foto destacada de cada entrada del blog */
.post a{ display:flex; flex-direction:column; padding:0; }
.post__media{ margin:0; overflow:hidden; aspect-ratio:8/5; }
.post__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.post a:hover .post__media img{ transform:scale(1.05); }
.post a > :not(.post__media){ padding-inline:clamp(1.4rem, 2.6vw, 2rem); }
.post__fecha{ padding-top:clamp(1.2rem, 2.2vw, 1.6rem); }
.post em{ padding-bottom:clamp(1.4rem, 2.6vw, 2rem); }

/* Enlaces a páginas hermanas: el mapa del pie es igual en todo el sitio, así que
   hace falta un bloque contextual que enlace lo que de verdad tiene que ver. */
.relacionadas{ padding-block:clamp(2.5rem, 5vw, 4rem); border-top:1px solid var(--line); }
.relacionadas__titulo{
  font-family:var(--font-head); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gray-dim); margin-bottom:1.4rem;
}
.relacionadas__lista{
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:.1rem 1.5rem;
}
.relacionadas__lista a{
  display:block; padding:.7rem 0; color:var(--gray);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.9rem; line-height:1.4;
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.relacionadas__lista a:hover{ color:var(--orange); padding-left:.4rem; }

/* =========================================================
   MODAL DE CAPTURA DE LEAD (antes de WhatsApp)
   Mismo patrón que el resto de sitios de BAEN, con la paleta oscura del
   rediseño. El botón va en verde WhatsApp porque es un botón de WhatsApp.
   ========================================================= */
.lead{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.25rem; }
.lead[hidden]{ display:none; }
.lead__veil{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.lead__card{
  position:relative; width:min(28rem, 100%);
  background:var(--card); border:1px solid var(--line-2); border-radius:10px;
  border-top:3px solid var(--orange);
  padding:clamp(1.75rem, 4vw, 2.5rem);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lead-in .22s ease-out both;
}
@keyframes lead-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .lead__card{ animation:none; } }
.lead__x{
  position:absolute; top:.9rem; right:.9rem;
  width:32px; height:32px; padding:0; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2); border-radius:50%;
  color:var(--gray); cursor:pointer; transition:color .2s, border-color .2s;
}
.lead__x:hover{ color:var(--white); border-color:var(--white); }
.lead__x svg{ pointer-events:none; }
.lead__kicker{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.6rem;
}
.lead__tit{
  font-family:var(--font-display); font-weight:400; line-height:1.02;
  font-size:clamp(1.7rem, 5vw, 2.3rem); text-transform:uppercase;
  color:var(--white); margin-bottom:.7rem;
}
.lead__sub{ color:var(--gray); font-size:.92rem; line-height:1.6; margin-bottom:1.5rem; }
.lead__form{ display:flex; flex-direction:column; gap:.4rem; }
.lead__form label{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray-dim); margin-top:.55rem;
}
.lead__form input{
  width:100%; padding:.8rem .9rem;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:6px;
  color:var(--white); font:inherit; font-size:.95rem;
}
.lead__form input:focus{ outline:none; border-color:var(--orange); }
.lead__error{ color:#FF6B6B; font-size:.85rem; margin-top:.6rem; }
.lead__error[hidden]{ display:none; }
/* trampa para bots: fuera de pantalla, no `display:none` (algunos lo detectan) */
.lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead__go{
  margin-top:1.4rem; padding:.95rem 1.2rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:linear-gradient(135deg,#25D366,#128C7E); color:#fff;
  border:0; border-radius:999px; cursor:pointer;
  font-family:var(--font-head); font-size:.86rem; letter-spacing:.13em; text-transform:uppercase;
  transition:filter .2s;
}
.lead__go:hover{ filter:brightness(1.08); }
.lead__go .ic{ width:18px; height:18px; }

/* =========================================================
   FORMULARIOS EN MÓVIL
   Dos cosas que solo se notan con el teléfono en la mano.
   ========================================================= */
@media (max-width:640px){
  /* ⚠ Safari en iOS AMPLÍA la página al enfocar un campo de menos de 16px, y deja
     al visitante descolocado a media cotización. Los campos estaban a 14.4px. */
  .mq-vista input, .mq-vista select, .mq-vista textarea,
  .cot-campo input, .cot-campo select, .cot-campo textarea,
  .quoter input, .quoter select,
  .lead__form input{
    font-size:16px;
    min-height:44px;          /* estaban a 42: el mínimo táctil son 44 */
  }
  .mq-vista textarea, .cot-campo textarea{ min-height:88px; }

  /* el deslizador medía 4px de alto: imposible de agarrar con el pulgar.
     El track engorda y el área táctil sube a 44px con padding vertical. */
  /* el control mide 44px de alto para poder agarrarlo, pero la barra que se ve
     sigue siendo de 8px: el degradado se centra con background-size/position */
  .cot-rango{
    height:44px; border-radius:0; font-size:16px;
    background-color:transparent;
    background-repeat:no-repeat;
    background-size:100% 8px;
    background-position:center;
  }
  .cot-rango::-webkit-slider-thumb{ width:28px; height:28px; }
  .cot-rango::-moz-range-thumb{ width:28px; height:28px; }
}