/* ============================================================================
   ZANCA GALERÍA COOLINARIA — hoja de estilos del sitio
   Fuente visual única: ZANCA BRANDBOOK_BETA.pdf (75 pp.)
   CSS plano, sin build. Se sube tal cual al servidor.
   ========================================================================= */

/* ── Tipografías del manual ──────────────────────────────────────────────── */
@font-face { font-family:'Lufga'; src:url('../fonts/Lufga-Light.woff2') format('woff2');    font-weight:300; font-display:swap }
@font-face { font-family:'Lufga'; src:url('../fonts/Lufga-Regular.woff2') format('woff2');  font-weight:400; font-display:swap }
@font-face { font-family:'Lufga'; src:url('../fonts/Lufga-Medium.woff2') format('woff2');   font-weight:500; font-display:swap }
@font-face { font-family:'Lufga'; src:url('../fonts/Lufga-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap }
@font-face { font-family:'Lufga'; src:url('../fonts/Lufga-Bold.woff2') format('woff2');     font-weight:700; font-display:swap }
@font-face { font-family:'Noorge'; src:url('../fonts/Noorge-Regular.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'Against'; src:url('../fonts/Against-Regular.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'Rockwell'; src:url('../fonts/Rockwell-Regular.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'Rockwell'; src:url('../fonts/Rockwell-Bold.woff2') format('woff2');    font-weight:700; font-display:swap }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* cromática principal del brandbook */
  --ink:#00000F; --gold:#BA9C6A; --forest:#4F5F55; --night:#2C2C3F;
  /* superficies (extensión propuesta) */
  --s0:#00000F; --s1:#0F0F1A; --s2:#171724; --s3:#2C2C3F; --s4:#3B3B50;
  --line:#26263A; --line2:#45455C;
  --tx:#F7F7F5; --tx2:#C3C9C9; --tx3:#929E9E;
  /* estados (extensión propuesta) */
  --ok:#00DC49; --err:#FD0048; --warn:#FD8A00; --info:#00E5E5;
  /* tema de servicio por defecto: marca madre */
  --deep:#00000F; --accent:#BA9C6A; --fill:#BA9C6A; --onfill:#00000F; --pastel:#FEFACA;

  /* Tipografía. Estos son los valores de fábrica; «Tipografía y marca» del
     panel los sobrescribe en un bloque <style> que va después de esta hoja.
     --fw-* es el grosor y --esc-* el multiplicador de tamaño de cada rol. */
  --f-ui:'Lufga',system-ui,-apple-system,sans-serif;
  --f-display:'Noorge','Lufga',serif;
  --f-btn:var(--f-ui);
  --f-alt:'Against','Noorge',serif;
  --f-slab:'Rockwell',Georgia,serif;
  --f-ed:Georgia,'Times New Roman',serif;
  --fw-titulo:400; --fw-texto:400; --fw-boton:500; --fw-numero:400;
  --esc-titulo:1; --esc-texto:1; --esc-boton:1; --esc-numero:1;
  --fz-base:16px;
  --zmark:url('../brand/zanca-isotipo.svg');

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px;
  --ez:cubic-bezier(.22,1,.36,1);
  --wrap:1240px;
  --gutter:50px;   /* aire lateral pedido: 50 px */
}

/* Tema por servicio. Se pone data-svc en cualquier contenedor y todo
   lo de adentro lo hereda: el mismo botón cambia de color sin CSS duplicado. */
[data-svc="banqueteria"]{--deep:#2C2C3F;--accent:#BA9C6A;--fill:#82623C;--onfill:#FFFFFF;--pastel:#FEFACA}
[data-svc="zanca"]      {--deep:#00000F;--accent:#BA9C6A;--fill:#BA9C6A;--onfill:#00000F;--pastel:#FEFACA}
[data-svc="zlab"]       {--deep:#230C3A;--accent:#00E5E5;--fill:#5B00C4;--onfill:#FFFFFF;--pastel:#D2B3FF}
[data-svc="cocina"]     {--deep:#601943;--accent:#FEC7DA;--fill:#B10051;--onfill:#FFFFFF;--pastel:#FEC7DA}
[data-svc="krystal"]    {--deep:#1D465C;--accent:#C0C0FE;--fill:#0500FC;--onfill:#FFFFFF;--pastel:#C0C0FE}
[data-svc="vows"]       {--deep:#63281A;--accent:#FFA9D6;--fill:#FC007B;--onfill:#00000F;--pastel:#FFA9D6}
[data-svc="alkimistas"] {--deep:#1E4749;--accent:#FBEC00;--fill:#FD8A00;--onfill:#00000F;--pastel:#C5FFD7}
[data-svc="corporativos"]{--deep:#001C7D;--accent:#00E5E5;--fill:#00E5E5;--onfill:#00000F;--pastel:#C4FFFD}

/* La cabecera y el pie SIEMPRE llevan la identidad madre, aunque el <html>
   esté teñido por un servicio. El color de servicio tiñe la sección, no la
   interfaz global: si el botón "Cotizar mi evento" se pusiera naranjo en
   Alkimistas, la marca dejaría de ser reconocible al navegar. Por eso acá se
   redeclaran los tokens de Zanca y se cortan la herencia. */
.hdr, .ftr{--deep:#00000F;--accent:#BA9C6A;--fill:#BA9C6A;--onfill:#00000F;--pastel:#FEFACA}

/* ── Base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--s0);color:var(--tx);
  font-family:var(--f-ui);font-weight:var(--fw-texto);line-height:1.65;font-size:var(--fz-base);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:max(16px,1rem)} /* iOS no hace zoom */
h1,h2,h3,h4{margin:0;line-height:1.12;text-wrap:balance;font-weight:var(--fw-titulo)}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--s1)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.wrap{width:100%;max-width:none;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-lg{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--fill);color:var(--onfill);padding:12px 20px;border-radius:99px;font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Tipografía de página ────────────────────────────────────────────────── */
.display{font-family:var(--f-display);letter-spacing:.005em}
.h-xl{font-family:var(--f-display);font-size:calc(clamp(2.6rem,7vw,5rem)*var(--esc-titulo));line-height:1.04}
.h-lg{font-family:var(--f-display);font-size:calc(clamp(2rem,4.5vw,3.4rem)*var(--esc-titulo))}
.h-md{font-family:var(--f-display);font-size:calc(clamp(1.5rem,3vw,2.2rem)*var(--esc-titulo))}
.h-sm{font-family:var(--f-display);font-size:calc(1.35rem*var(--esc-titulo))}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lead{font-family:var(--f-ed);font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--tx2);line-height:1.75}
.muted{color:var(--tx3)}
.small{font-size:.85rem}
.tiny{font-size:.75rem}
.num{font-family:var(--f-slab);font-weight:var(--fw-numero);font-size:calc(1em*var(--esc-numero));font-variant-numeric:tabular-nums}

/* ── La Z como recurso gráfico (marca de agua / figura-fondo) ────────────── */
.zmark{
  position:absolute;pointer-events:none;background:var(--accent);
  -webkit-mask:var(--zmark) no-repeat center/contain;
          mask:var(--zmark) no-repeat center/contain;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
/* Tres columnas: marca · menú centrado · redes.
   Las columnas de los extremos comparten el mismo ancho mínimo (1fr) para que
   el menú del medio quede centrado respecto de la página y no respecto del
   hueco que sobra. */
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;justify-self:start}
.brand img{height:34px;filter:var(--logo-filtro,brightness(0) invert(1))}
.hdr-fin{display:flex;align-items:center;gap:14px;justify-self:end}
.socials-hdr{margin-top:0}
.socials-hdr a{width:36px;height:36px}
.nav-redes-movil{display:none}
.nav{display:flex;align-items:center;gap:4px;justify-self:center}
.nav a{padding:10px 14px;border-radius:99px;font-size:.9rem;color:var(--tx2);transition:color .18s,background .18s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tx);background:var(--s2)}
.nav a[aria-current="page"]{color:var(--accent)}
/* El ítem marcado como botón no debe heredar el color de texto del menú:
   sobre el dorado, el gris de los enlaces no pasa contraste. */
.nav .nav-btn{padding:0 18px;margin-left:10px;color:var(--onfill);background:var(--fill)}
.nav .nav-btn:hover{color:var(--onfill);background:var(--fill);filter:brightness(1.12)}
.drop{position:relative}
.drop>button{display:flex;align-items:center;gap:6px;padding:10px 14px;border:0;background:none;border-radius:99px;font-size:.9rem;color:var(--tx2);cursor:pointer;transition:color .18s,background .18s}
.drop>button:hover{color:var(--tx);background:var(--s2)}
.drop-menu{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:280px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;display:none;box-shadow:0 30px 60px -25px rgba(0,0,0,.9)}
.drop[data-open="true"] .drop-menu{display:block}
.drop-menu a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm)}
.drop-menu a:hover{background:var(--s3)}
.dot{width:10px;height:10px;border-radius:99px;flex-shrink:0}
.drop-menu strong{display:block;font-size:.9rem;font-weight:500;color:var(--tx)}
.drop-menu span{display:block;font-size:.75rem;color:var(--tx3)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:99px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.burger span{display:block;width:18px;height:1.5px;background:var(--tx);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:1.5px;background:var(--tx)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* Cuando el menú no cabe centrado, se descuelga a pantalla completa. La marca
   queda a la izquierda y el burger a la derecha: dos columnas, no tres. */
@media (max-width:1100px){
  .hdr-in{grid-template-columns:auto 1fr;gap:12px}
  .nav{position:fixed;inset:76px 0 auto;max-height:calc(100dvh - 76px);overflow-y:auto;
       flex-direction:column;align-items:stretch;gap:0;background:var(--s1);
       border-bottom:1px solid var(--line);padding:12px;display:none;justify-self:stretch}
  body[data-menu="open"] .nav{display:flex}
  .nav a,.drop>button{width:100%;justify-content:flex-start;padding:14px 16px}
  .nav .nav-btn{justify-content:center;margin-top:10px}
  .drop-menu{position:static;translate:none;min-width:0;box-shadow:none;background:var(--s2);margin:4px 0}
  .burger{display:flex}
  .hdr-fin .socials-hdr{display:none}
  .nav-redes-movil{display:block;padding:8px 16px 4px;border-top:1px solid var(--line);margin-top:10px}
  .nav-redes-movil .socials{margin-top:10px}
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:99px;
  font-family:var(--f-btn);font-size:calc(.9rem*var(--esc-boton));
  font-weight:var(--fw-boton);cursor:pointer;white-space:nowrap;
  transition:filter .18s,background .18s,border-color .18s,transform .12s var(--ez),box-shadow .25s;
}
.btn:active{transform:scale(.98)}
.btn-1{background:var(--fill);color:var(--onfill)}
.btn-1:hover{filter:brightness(1.12);box-shadow:0 10px 30px -12px var(--fill)}
.btn-2{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);background:transparent}
.btn-2:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}
.btn-3{background:var(--s2);color:var(--tx);border-color:var(--line)}
.btn-3:hover{background:var(--s3);border-color:var(--line2)}
.btn-lg{min-height:56px;padding:0 32px;font-size:calc(1rem*var(--esc-boton))}
.btn-sm{min-height:42px;padding:0 18px;font-size:calc(.82rem*var(--esc-boton))}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-block{width:100%}

/* ── Badges y chips ──────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.7rem;font-weight:500;line-height:1.3;white-space:nowrap}
.b-svc{background:var(--fill);color:var(--onfill)}
.b-gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 32%,transparent)}
.b-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 32%,transparent)}
.b-warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent)}
.b-err{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 32%,transparent)}
.b-nt{background:var(--s3);color:var(--tx2);border:1px solid var(--line)}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:9px 18px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--tx2);font-size:.82rem;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--line2);color:var(--tx)}
.chip[aria-pressed="true"]{background:var(--fill);color:var(--onfill);border-color:transparent;font-weight:500}

/* ── Secciones ───────────────────────────────────────────────────────────── */
.sec{padding-block:clamp(56px,8vw,110px);position:relative}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.sec-hd p{max-width:52ch;margin-top:12px;color:var(--tx3);font-size:.95rem}
.link-more{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:.88rem;font-weight:500}
.link-more svg{transition:transform .2s var(--ez)}
.link-more:hover svg{transform:translateX(4px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;min-height:min(76vh,700px);display:flex;align-items:center;background:var(--deep)}
.hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(120% 80% at 12% 0%, color-mix(in srgb,var(--fill) 55%,transparent) 0%, transparent 60%),
  radial-gradient(90% 70% at 85% 20%, color-mix(in srgb,var(--accent) 28%,transparent) 0%, transparent 55%);
  opacity:.55}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 4%,transparent 55%)}
.hero .zmark{width:min(72vw,760px);aspect-ratio:1525/1719;right:-8%;top:-6%;opacity:.14;rotate:6deg}
.hero-in{position:relative;z-index:2;padding-block:clamp(80px,12vw,140px)}
.hero h1{margin:18px 0 22px;max-width:16ch}
.hero .lead{max-width:46ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-mini{display:flex;gap:28px;flex-wrap:wrap;margin-top:48px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--tx) 12%,transparent)}
.hero-mini div strong{display:block;font-family:var(--f-slab);font-size:1.6rem;color:var(--accent)}
.hero-mini div span{font-size:.78rem;color:var(--tx3)}

.hero-sm{min-height:0;padding-block:clamp(38px,5vw,64px) clamp(30px,4vw,48px)}
.hero-sm .hero-in{padding-block:0}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--tx3);margin-bottom:16px}
.crumbs a:hover{color:var(--accent)}

/* ── Póster de marca (mientras no hay fotografía real) ───────────────────── */
.poster{position:relative;overflow:hidden;background:var(--deep);isolation:isolate}
.poster::before{content:'';position:absolute;inset:0;z-index:1;opacity:.6;background:
  linear-gradient(155deg,var(--fill) 0%,transparent 58%),
  radial-gradient(85% 60% at 18% 6%, var(--accent) 0%, transparent 62%)}
.poster::after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(to top,var(--ink) 3%,transparent 52%)}
.poster .zmark{z-index:2;opacity:.3;width:92%;aspect-ratio:1525/1719;left:6%;top:-4%}
.poster.p1 .zmark{left:-14%;top:8%;width:86%;rotate:-6deg}
.poster.p2 .zmark{left:14%;top:-10%;width:96%;rotate:8deg}
.poster.p3 .zmark{left:24%;top:12%;width:74%;rotate:-2deg}
.poster.p4 .zmark{left:auto;right:-16%;top:4%;width:90%;rotate:12deg}
.poster-tag{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:14px 16px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ratio-34{aspect-ratio:3/4}
.ratio-11{aspect-ratio:1/1}
.ratio-169{aspect-ratio:16/9}
.ratio-45{aspect-ratio:4/5}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}

.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .28s var(--ez),border-color .28s,box-shadow .28s}
.card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 26px 50px -30px var(--accent)}

.ev{display:block}
.ev-top{position:relative}
.ev-date{position:absolute;z-index:5;left:14px;top:14px;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(6px);border-radius:var(--r-sm);padding:8px 11px;text-align:center;line-height:1}
.ev-date b{display:block;font-family:var(--f-slab);font-size:1.25rem}
.ev-date span{display:block;font-size:.6rem;font-weight:600;color:var(--accent);margin-top:3px;letter-spacing:.08em}
.ev-tags{position:absolute;z-index:5;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.ev-body{padding:18px}
.ev-body h3{font-family:var(--f-display);font-size:1.22rem;line-height:1.25;margin-bottom:12px;transition:color .2s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .ev-body h3{color:var(--accent)}
.ev-meta{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--tx3)}
.ev-meta span{display:flex;align-items:center;gap:7px}
.ev-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
@media (max-width:380px){.ev-foot{flex-direction:column;align-items:flex-start;gap:8px}}

.price b{font-family:var(--f-slab);font-size:1.18rem}
.price small{display:block;font-size:.68rem;color:var(--tx3);margin-top:2px}
.price .free{color:var(--ok)}
.price .desde{font-size:.7rem;color:var(--tx3);margin-right:5px;font-family:var(--f-ui)}

/* taller */
.tl{display:flex}
/* El enlace y el póster llevan clase, no style="": un estilo en línea gana
   sobre la media query y la tarjeta nunca pasaba a una columna en el teléfono. */
.tl-link{display:flex;width:100%}
.tl-poster{width:140px;flex-shrink:0}
.tl .poster{width:130px;flex-shrink:0}
.tl-body{padding:18px;flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.tl-body h3{font-family:var(--f-display);font-size:1.08rem;line-height:1.3}
.meter{height:5px;border-radius:99px;background:var(--s3);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--fill)}
.meter.low i{background:var(--warn)}
@media (max-width:520px){
  .tl{flex-direction:column}
  .tl-link{flex-direction:column}
  .tl .poster,
  .tl-poster{width:100%;aspect-ratio:16/9}
}

/* servicio */
.svc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;
  padding:26px;border-radius:var(--r-lg);overflow:hidden;background:var(--deep);border:1px solid var(--line);
  transition:transform .3s var(--ez),border-color .3s}
.svc::before{content:'';position:absolute;inset:0;opacity:.34;transition:opacity .45s;background:
  radial-gradient(105% 72% at 50% 0%, var(--fill) 0%, transparent 66%)}
.svc:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.svc:hover::before{opacity:.6}
.svc .zmark{width:62%;aspect-ratio:1525/1719;right:-10%;top:-8%;opacity:.14;transition:transform .5s var(--ez)}
.svc:hover .zmark{transform:rotate(7deg) scale(1.09)}
.svc-in{position:relative;z-index:2}
.svc-in img{height:42px;width:auto;max-width:72%;object-fit:contain;object-position:left;filter:brightness(0) invert(1);margin-bottom:12px}
.svc-in .name{font-family:var(--f-display);font-size:1.7rem;margin-bottom:12px}
.svc-in p{font-size:.85rem;color:rgba(255,255,255,.72)}
.svc-in .link-more{margin-top:12px}

/* ── Manifiesto ──────────────────────────────────────────────────────────── */
.manif{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--s1);border:1px solid var(--line);padding:clamp(32px,6vw,72px)}
.manif .zmark{width:min(46vw,460px);aspect-ratio:1525/1719;right:-6%;bottom:-18%;opacity:.07}
.manif-in{position:relative;z-index:2;max-width:62ch}
.manif p{font-family:var(--f-ed);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.85;color:var(--tx2);margin-top:20px}
.manif p b{color:var(--tx);font-weight:400}

/* ── Galería ─────────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal>*{border-radius:var(--r-md);overflow:hidden}
.gal>*:nth-child(1){grid-column:span 2;grid-row:span 2}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ── Testimonios ─────────────────────────────────────────────────────────── */
.quote{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:16px}
.quote p{font-family:var(--f-ed);font-size:1rem;line-height:1.7;color:var(--tx2)}
.quote footer{display:flex;align-items:center;gap:12px;font-size:.8rem}
.avatar{width:38px;height:38px;border-radius:99px;background:var(--fill);color:var(--onfill);display:grid;place-items:center;font-weight:600;font-size:.8rem;flex-shrink:0}

/* ── Formularios ─────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px}
.field>label{font-size:.78rem;font-weight:500;color:var(--tx2)}
.field>label .req{color:var(--accent)}
.inp,.sel,.txa{
  width:100%;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md);
  padding:0 16px;height:50px;color:var(--tx);transition:border-color .18s;font-size:.95rem}
.txa{height:auto;padding:14px 16px;resize:vertical;min-height:130px}
.inp::placeholder,.txa::placeholder{color:var(--tx3)}
.inp:hover,.sel:hover,.txa:hover{border-color:var(--line2)}
.inp:focus,.sel:focus,.txa:focus{outline:none;border-color:var(--accent)}
.inp[aria-invalid="true"]{border-color:var(--err)}
.sel{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23929E9E' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.hint{font-size:.72rem;color:var(--tx3)}
.err-msg{font-size:.72rem;color:var(--err);display:none}
.field[data-err="true"] .err-msg{display:block}
.pfx{display:flex;align-items:center;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-md)}
.pfx:focus-within{border-color:var(--accent)}
.pfx span{padding-left:16px;font-size:.85rem;color:var(--tx3)}
.pfx input{flex:1;min-width:0;background:none;border:0;height:50px;padding:0 16px;outline:none}
.check{display:flex;gap:12px;align-items:flex-start}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--fill);flex-shrink:0}
.check label{font-size:.82rem;color:var(--tx2);line-height:1.5}
.check label small{display:block;color:var(--tx3);margin-top:2px}
.form-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* ── Selector de entradas ────────────────────────────────────────────────── */
.tk{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--s1);transition:border-color .2s}
.tk+.tk{margin-top:12px}
.tk[data-sel="true"]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--fill) 7%,var(--s1))}
.tk-hd{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.tk-hd>div:first-child{flex:1 1 190px;min-width:0}
@media (max-width:520px){.tk-hd{flex-direction:column;align-items:stretch}.tk-hd .step{align-self:flex-start}}
.tk-hd h4{font-size:1rem;font-weight:500;margin:0 0 4px}
.tk-note{font-size:.78rem;color:var(--tx3);margin-top:10px;line-height:1.5}
.tk-out{font-size:.72rem;margin-top:8px}
.tk-out.warn{color:var(--warn)}.tk-out.err{color:var(--err)}.tk-out.mut{color:var(--tx3)}
.step{display:flex;align-items:center;gap:8px;flex-shrink:0}
.step button{width:42px;height:42px;border-radius:99px;border:0;cursor:pointer;display:grid;place-items:center;transition:.15s}
.step button:active{transform:scale(.9)}
.step .minus{background:var(--s3);color:var(--tx)}
.step .minus:hover{background:var(--s4)}
.step .plus{background:var(--fill);color:var(--onfill)}
.step .plus:hover{filter:brightness(1.12)}
.step button:disabled{opacity:.28;pointer-events:none}
.step output{width:52px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--f-slab);background:var(--s1)}
.step output.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* ── Carrito lateral ─────────────────────────────────────────────────────── */
.aside{position:sticky;top:96px}
.box{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.box+.box{margin-top:16px}
.box h3{font-family:var(--f-display);font-size:1.15rem;margin-bottom:16px}
.row{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;padding:9px 0}
.row.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-size:1.02rem}
.row.tot b{font-family:var(--f-slab);font-size:1.35rem;color:var(--accent)}
.honest{display:flex;gap:9px;align-items:flex-start;background:color-mix(in srgb,var(--ok) 9%,transparent);border:1px solid color-mix(in srgb,var(--ok) 26%,transparent);border-radius:var(--r-md);padding:12px 14px;margin-top:14px;font-size:.76rem;color:var(--tx2);line-height:1.5}
.honest svg{flex-shrink:0;margin-top:1px;color:var(--ok)}

.split{display:grid;gap:34px;grid-template-columns:minmax(0,1fr) 380px;align-items:start}

/* Variantes de proporción. Van como CLASE y no como style="" en el HTML:
   un estilo en línea gana siempre, incluso dentro de una media query, así que
   las columnas nunca colapsaban en móvil y el texto quedaba en una tira de
   126 px. Como clase, la media query de abajo sí manda. */
.split.mitades   {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split.ancha-izq {grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.split.ancha-der {grid-template-columns:minmax(0,1fr) minmax(0,440px)}

@media (max-width:1000px){
  /* minmax(0,1fr) y no 1fr: "1fr" equivale a minmax(auto,1fr), y ese "auto"
     deja que un hijo ancho (una tabla, un input, una palabra larga) empuje la
     columna más allá del contenedor. Con minmax(0,...) la columna nunca crece
     más que el espacio disponible y el contenido se ajusta. */
  .split,
  .split.mitades,
  .split.ancha-izq,
  .split.ancha-der{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}

/* ── Info / avisos ───────────────────────────────────────────────────────── */
.note{display:flex;gap:12px;border-radius:var(--r-md);padding:15px 17px;font-size:.85rem;line-height:1.55;border:1px solid}
.note svg{flex-shrink:0;margin-top:2px}
.n-info{background:color-mix(in srgb,var(--info) 9%,transparent);border-color:color-mix(in srgb,var(--info) 28%,transparent);color:var(--tx2)}
.n-info svg{color:var(--info)}
.n-warn{background:color-mix(in srgb,var(--warn) 9%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent);color:var(--tx2)}
.n-warn svg{color:var(--warn)}
.n-ok{background:color-mix(in srgb,var(--ok) 9%,transparent);border-color:color-mix(in srgb,var(--ok) 28%,transparent);color:var(--tx2)}
.n-ok svg{color:var(--ok)}

/* ── Acordeón ────────────────────────────────────────────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:.98rem;transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--accent)}
.acc summary svg{flex-shrink:0;transition:transform .25s var(--ez);color:var(--tx3)}
.acc details[open] summary svg{transform:rotate(180deg)}
.acc .acc-c{padding:0 40px 20px 0;font-size:.9rem;color:var(--tx2);line-height:1.7}

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.filters{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.filters .form-grid{gap:14px}
.f-active{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border:1px solid var(--line);background:var(--s2);border-radius:99px;font-size:.75rem;color:var(--tx2)}
.tag button{width:22px;height:22px;border:0;background:none;border-radius:99px;color:var(--tx3);cursor:pointer;display:grid;place-items:center}
.tag button:hover{background:var(--s4);color:var(--tx)}
.count{font-size:.85rem;color:var(--tx3)}

.empty{text-align:center;padding:70px 24px;border:1px dashed var(--line);border-radius:var(--r-lg);position:relative;overflow:hidden}
.empty .zmark{width:120px;aspect-ratio:1525/1719;left:50%;translate:-50% 0;top:38px;opacity:.14}
.empty h3{font-family:var(--f-display);font-size:1.35rem;margin:130px 0 8px}
.empty p{color:var(--tx3);font-size:.88rem;max-width:44ch;margin-inline:auto}

/* ── Pasos de checkout ───────────────────────────────────────────────────── */
.steps{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:32px}
.steps div{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--tx3)}
.steps div b{width:26px;height:26px;border-radius:99px;background:var(--s3);display:grid;place-items:center;font-size:.75rem;font-weight:600}
.steps div[data-on="true"]{color:var(--tx)}
.steps div[data-on="true"] b{background:var(--fill);color:var(--onfill)}
.steps i{width:26px;height:1px;background:var(--line)}
@media (max-width:640px){.steps i{width:12px}.steps div span{display:none}}

.pay{display:flex;gap:14px;flex-wrap:wrap}
.pay label{flex:1;min-width:180px;display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--s1);cursor:pointer;transition:.18s}
.pay label:hover{border-color:var(--line2)}
.pay input{accent-color:var(--fill);width:19px;height:19px}
.pay input:checked+.pay-in{color:var(--tx)}
.pay label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--fill) 8%,var(--s1))}
.pay-in strong{display:block;font-size:.9rem;font-weight:500}
.pay-in span{display:block;font-size:.74rem;color:var(--tx3)}

.timer{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:var(--s2);font-size:.78rem;color:var(--tx2)}
.timer.urg{border-color:color-mix(in srgb,var(--err) 45%,transparent);background:color-mix(in srgb,var(--err) 10%,transparent);color:var(--err)}
.timer b{font-family:var(--f-slab)}

/* ── Franja CTA ──────────────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--deep);padding:clamp(34px,6vw,68px);border:1px solid var(--line)}
.cta::before{content:'';position:absolute;inset:0;opacity:.4;background:radial-gradient(90% 120% at 88% 12%, var(--fill) 0%, transparent 62%)}
.cta .zmark{width:min(40vw,380px);aspect-ratio:1525/1719;left:-6%;bottom:-30%;opacity:.1}
.cta-in{position:relative;z-index:2;max-width:56ch}
.cta-in p{margin-top:14px;color:var(--tx2)}
.cta-in .hero-cta{margin-top:26px}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
/* ── La Galería Coolinaria ───────────────────────────────────────────────── */

/* Mosaico de la portada: una foto grande y el resto alrededor. En teléfono
   colapsa a dos columnas, con la grande ocupando el ancho completo. */
.mosaico{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,150px);gap:12px}
.mos-item{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--s2);display:block}
.mos-item picture,.mos-item img{width:100%;height:100%;object-fit:cover;display:block}
.mos-grande{grid-column:span 2;grid-row:span 2}
/* El velo existe solo para que el texto se lea sobre la foto: se queda en el
   tercio de abajo y deja la imagen limpia. */
.mos-velo{position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--ink) 82%,transparent) 0%,transparent 42%);transition:opacity .25s}
.mos-item:hover .mos-velo{opacity:.55}
.mos-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mos-txt{position:absolute;left:16px;bottom:14px;right:16px;font-size:.86rem;color:#fff;z-index:2}
@media (max-width:800px){
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,120px)}
  .mos-grande{grid-column:span 2;grid-row:span 2}
}

/* Grilla de la página completa. */
.galeria-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.galeria-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.galeria-grid{grid-template-columns:minmax(0,1fr)}}
.gal-foto{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--s2);aspect-ratio:4/3}
.gal-foto picture,.gal-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ez)}
.gal-foto:hover img{transform:scale(1.04)}
.gal-foto:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gal-pie{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-size:.8rem;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.85)}
.galeria-datos{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:.85rem;color:var(--tx3)}
.galeria-datos span{display:inline-flex;align-items:center;gap:8px}

/* Visor. Fondo casi opaco para que la foto sea lo único que importe. */
.visor{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:8px;padding:clamp(12px,4vw,40px);
  background:color-mix(in srgb,var(--ink) 96%,transparent);backdrop-filter:blur(10px)}
.visor[hidden]{display:none}
body[data-visor="open"]{overflow:hidden}
.visor-fig{margin:0;display:grid;place-items:center;gap:14px;min-width:0;min-height:0}
.visor-fig img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--r-md)}
.visor-fig figcaption{font-size:.85rem;color:var(--tx3);text-align:center;max-width:60ch}
.visor-nav,.visor-x{width:46px;height:46px;border-radius:99px;border:1px solid var(--line);
  background:var(--s2);color:var(--tx);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.visor-nav:hover,.visor-x:hover{border-color:var(--accent);color:var(--accent)}
.visor-nav:focus-visible,.visor-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visor-x{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);z-index:3}
@media (max-width:700px){
  .visor{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}
  .visor-fig{grid-row:1}
  .visor-prev{grid-row:2;justify-self:start}
  .visor-next{grid-row:2;justify-self:end}
  .visor-fig img{max-height:66vh}
}

.ftr{border-top:1px solid var(--line);background:var(--s1);margin-top:0;padding-block:56px 32px;position:relative;overflow:hidden}
.ftr .zmark{width:min(50vw,520px);aspect-ratio:1525/1719;right:-8%;top:-30%;opacity:.05}
.ftr-grid{position:relative;z-index:2;display:grid;gap:34px;grid-template-columns:1.4fr repeat(3,1fr)}
@media (max-width:900px){.ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:540px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}
.ftr h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);margin-bottom:16px;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr a{font-size:.88rem;color:var(--tx2)}
.ftr a:hover{color:var(--accent)}
.ftr-brand img{height:40px;filter:var(--logo-filtro-pie,brightness(0) invert(1));margin-bottom:16px}
.ftr-brand p{font-size:.86rem;color:var(--tx3);max-width:34ch}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border:1px solid var(--line);border-radius:99px;display:grid;place-items:center;color:var(--tx2);transition:.18s}
.socials a:hover{border-color:var(--accent);color:var(--accent)}
.ftr-btm{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:.76rem;color:var(--tx3)}

/* ── Banda de prototipo y cookies ────────────────────────────────────────── */
.proto{position:fixed;left:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:10px;padding:9px 10px 9px 15px;border-radius:99px;border:1px solid color-mix(in srgb,var(--warn) 42%,transparent);background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(10px);font-size:.74rem;color:var(--tx2);max-width:calc(100vw - 32px)}
.proto b{color:var(--warn)}
.proto button{width:24px;height:24px;border:0;border-radius:99px;background:none;color:var(--tx3);cursor:pointer;display:grid;place-items:center}
.proto button:hover{background:var(--s3);color:var(--tx)}

/* ── Lienzo del efecto de fluido ──────────────────────────────────────────
   pointer-events:none es obligatorio: el lienzo cubre toda la pantalla y sin
   eso se comería cada clic del sitio. El z-index lo deja por debajo de la
   cabecera y del banner de cookies, que sí tienen que ser usables. */
#zFluido{
  position:fixed;inset:0;width:100vw;height:100vh;
  pointer-events:none;z-index:55;mix-blend-mode:screen;opacity:0;
  transition:opacity .8s ease
}
#zFluido[data-listo]{opacity:1}
@media (prefers-reduced-motion:reduce){#zFluido{display:none}}

/* Imagen de fondo en el pie y en los bloques del home. El velo encima existe
   para que el texto se siga leyendo sobre cualquier foto: sin él, una foto
   clara deja los enlaces invisibles. */
.ftr.con-foto, .manif.con-foto, .cta.con-foto{position:relative;isolation:isolate}
.ftr-foto,.bloque-foto{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ftr-foto img,.bloque-foto img{width:100%;height:100%;object-fit:cover}
.ftr-velo{position:absolute;inset:0;background:var(--ink)}
.manif.con-foto::after,.cta.con-foto::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--deep) 12%,color-mix(in srgb,var(--deep) 72%,transparent) 58%,transparent 100%)}
.manif.con-foto .manif-in,.cta.con-foto .cta-in{position:relative;z-index:1}
.manif.con-foto,.cta.con-foto{border-radius:var(--r-xl);overflow:hidden}

/* ═════════════════════════════════════════════════════════════════════════
   Calendario de visitas. Rejilla de 7 columnas que en el teléfono achica la
   celda pero nunca cambia de forma: un calendario que se reordena deja de
   leerse como calendario.
   ═════════════════════════════════════════════════════════════════════════ */
/* Entradas emitidas, en la pantalla de compra lista */
.entradas{display:grid;gap:10px;margin-top:26px;text-align:left}
.ent{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--s2)}
.ent-cod{font-family:var(--f-slab);font-size:1.02rem;letter-spacing:.06em;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);padding:8px 12px;border-radius:var(--r-sm);white-space:nowrap}
.ent-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ent-txt strong{font-size:.9rem;font-weight:500}
.ent-txt span{font-size:.75rem;color:var(--tx3)}
@media (max-width:420px){.ent{flex-direction:column;align-items:flex-start;gap:8px}}

.cal{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,4vw,26px)}
.cal-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav b{font-size:.9rem;font-weight:500;min-width:9.5ch;text-align:center;text-transform:capitalize}
.ico-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--s2);color:var(--tx2);transition:.2s}
.ico-btn:hover{border-color:var(--accent);color:var(--accent)}
.ico-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ico-btn.is-off{opacity:.3;pointer-events:none}

.cal-sem,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-sem{margin-bottom:8px}
.cal-sem span{text-align:center;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}

.cal-dia{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:clamp(52px,11vw,68px);border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--s2);text-align:center;padding:4px 2px;transition:.18s}
.cal-dia b{font-family:var(--f-slab);font-size:clamp(.85rem,2.6vw,1rem);line-height:1;color:var(--tx)}
.cal-dia small{font-size:clamp(.52rem,1.7vw,.64rem);line-height:1.15;color:var(--ok)}
a.cal-dia:hover{border-color:var(--accent);background:var(--s3);transform:translateY(-1px)}
a.cal-dia:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cal-dia.is-sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--s2));box-shadow:inset 0 0 0 1px var(--accent)}
.cal-dia.is-off{opacity:.36;cursor:not-allowed}
.cal-dia.is-off small{color:var(--tx3)}
.cal-dia.is-vacio{border:0;background:none;min-height:0}

.cal-leyenda{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:.72rem;color:var(--tx3)}
.cal-leyenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.pt-ok{background:var(--ok)} .pt-no{background:var(--tx3)}

/* Horarios */
.horas{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr))}
.hora{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--s2);cursor:pointer;transition:.18s}
.hora b{font-family:var(--f-slab);font-size:1.02rem}
.hora small{font-size:.68rem;color:var(--ok)}
.hora input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer}
.hora:hover{border-color:var(--accent)}
.hora:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--s2))}
.hora:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.hora.is-off{opacity:.4;cursor:not-allowed}
.hora.is-off small{color:var(--tx3)}
.hora.is-off input{cursor:not-allowed}

/* Utilidades de layout que antes iban como style="" en el HTML. Como clase,
   las media queries sí pueden pisarlas en pantallas chicas. */
.lead-w{max-width:54ch}
.caja-centro{padding:clamp(20px,5vw,34px);text-align:center}
.form-caja{padding:clamp(18px,5vw,28px)}
.checks{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.fuera-de-vista{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.co-form .field{margin-bottom:18px}
.co-form .form-grid .field{margin-bottom:0}
.co-form .form-grid{margin-bottom:18px}

.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:130;max-width:520px;margin-inline:auto;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:0 30px 70px -25px rgba(0,0,0,.95)}
.ck p{font-size:.83rem;color:var(--tx2);line-height:1.6}
.ck-btn{margin-top:16px}
.ck-btn form{display:flex;gap:10px;flex-wrap:wrap}
.ck-btn .btn{flex:1;min-width:130px}
.ck-cambiar{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.ck-cambiar:hover{color:var(--gold)}
.ck[hidden]{display:none}

/* ── Animación de entrada ────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

/* ============================================================================
   AÑADIDOS DE LA VERSIÓN DINÁMICA (PHP)
   ========================================================================= */

/* ── Aire lateral responsivo ─────────────────────────────────────────────── */
@media (max-width:1100px){ :root{--gutter:32px} }
@media (max-width:700px) { :root{--gutter:20px} }
@media (max-width:380px) { :root{--gutter:14px} }
@media (min-width:2000px){ :root{--gutter:64px} }

/* ── Imágenes reales subidas desde el panel ──────────────────────────────── */
picture{display:block;width:100%;height:100%}
.cover{width:100%;height:100%;object-fit:cover;display:block}
.media{position:relative;overflow:hidden;background:var(--s2)}
.media img{width:100%;height:100%;object-fit:cover}
.media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 4%,transparent 55%);pointer-events:none}
.media.plain::after{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   CARRUSEL DEL HERO
   Un slide por servicio. Cada uno muestra su mensaje principal y, abajo a la
   derecha, el próximo evento — siempre, sin excepción.
   Desplazamiento nativo con scroll-snap: cero librerías, cero jank.
   ═════════════════════════════════════════════════════════════════════════ */

.carrusel{position:relative;background:var(--ink)}
.carrusel-pista{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
}
.carrusel-pista::-webkit-scrollbar{display:none}

.slide{
  position:relative;flex:0 0 100%;scroll-snap-align:start;
  min-height:min(84vh,760px);display:flex;align-items:flex-end;
  background:var(--deep);overflow:hidden;
}
.slide-bg{position:absolute;inset:0;z-index:0}
.slide-bg img{width:100%;height:100%;object-fit:cover}
.slide::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, var(--ink) 6%, color-mix(in srgb,var(--ink) 74%,transparent) 42%, transparent 78%),
    linear-gradient(to top, var(--ink) 2%, transparent 48%);
}
.slide.sin-foto::before{
  background:
    radial-gradient(120% 85% at 8% 0%, color-mix(in srgb,var(--fill) 58%,transparent) 0%, transparent 62%),
    radial-gradient(85% 70% at 88% 25%, color-mix(in srgb,var(--accent) 26%,transparent) 0%, transparent 58%),
    linear-gradient(to top, var(--ink) 4%, transparent 55%);
}
.slide .zmark{z-index:1;width:min(62vw,640px);aspect-ratio:1525/1719;right:-6%;top:-8%;opacity:.13;rotate:6deg}

.slide-in{position:relative;z-index:2;width:100%;padding-block:clamp(56px,9vw,110px) clamp(88px,10vw,120px)}
.slide-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:end}
@media (max-width:1000px){.slide-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

.slide-marca{height:clamp(40px,5vw,62px);width:auto;max-width:min(70vw,330px);object-fit:contain;object-position:left;filter:brightness(0) invert(1);margin-bottom:18px}
.slide h2{font-family:var(--f-display);font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.05;max-width:17ch;margin:10px 0 18px}
.slide p.bajada{font-family:var(--f-ed);font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.7;color:rgba(255,255,255,.82);max-width:46ch}
.slide-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* Tarjeta del próximo evento, siempre presente en cada slide */
.proximo{
  background:color-mix(in srgb,var(--ink) 76%,transparent);backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:var(--r-lg);padding:20px;display:block;
  transition:border-color .22s,transform .22s var(--ez);
}
.proximo:hover{border-color:var(--accent);transform:translateY(-3px)}
.proximo-hd{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.proximo-hd span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.proximo-hd i{flex:1;height:1px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.proximo-cuerpo{display:flex;gap:14px;align-items:flex-start}
.proximo-fecha{background:var(--fill);color:var(--onfill);border-radius:var(--r-sm);padding:9px 11px;text-align:center;line-height:1;flex-shrink:0}
.proximo-fecha b{display:block;font-family:var(--f-slab);font-size:1.3rem}
.proximo-fecha em{display:block;font-style:normal;font-size:.6rem;font-weight:700;margin-top:3px;letter-spacing:.06em}
.proximo-txt{min-width:0;flex:1}
.proximo-txt strong{display:block;font-size:.94rem;font-weight:500;line-height:1.35;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proximo-txt span{display:block;font-size:.74rem;color:var(--tx3)}
.proximo-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* Controles */
.carrusel-nav{
  position:absolute;left:0;right:0;bottom:26px;z-index:5;
  display:flex;align-items:center;gap:16px;padding-inline:var(--gutter);
}
.puntos{display:flex;gap:8px;flex:1}
.punto{height:3px;flex:1;max-width:64px;border:0;padding:0;border-radius:99px;background:rgba(255,255,255,.24);cursor:pointer;transition:background .3s}
.punto[aria-current="true"]{background:var(--accent)}
.flechas{display:flex;gap:8px}
.flecha{
  width:46px;height:46px;border-radius:99px;border:1px solid rgba(255,255,255,.22);
  background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s;
}
.flecha:hover{background:var(--fill);color:var(--onfill);border-color:transparent}
.pausa{width:46px;height:46px;border-radius:99px;border:1px solid rgba(255,255,255,.22);
  background:color-mix(in srgb,var(--ink) 55%,transparent);color:#fff;cursor:pointer;display:grid;place-items:center}
@media (max-width:640px){.flechas{display:none}.carrusel-nav{bottom:18px}}

/* ══════════════════════════════════════════════════════════════════════════
   BLOQUE DE BANQUETERÍA — el negocio principal, con espacio propio
   ═════════════════════════════════════════════════════════════════════════ */

.banq{position:relative;overflow:hidden;background:var(--deep);border-radius:var(--r-xl);border:1px solid var(--line)}
.banq::before{content:'';position:absolute;inset:0;opacity:.42;
  background:radial-gradient(95% 110% at 92% 8%, var(--fill) 0%, transparent 62%)}
.banq .zmark{width:min(38vw,420px);aspect-ratio:1525/1719;left:-5%;bottom:-32%;opacity:.09}
.banq-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
@media (max-width:1000px){.banq-grid{grid-template-columns:minmax(0,1fr)}}
.banq-txt{padding:clamp(30px,4.5vw,60px)}
.banq-txt h2{font-family:var(--f-display);font-size:clamp(2rem,3.6vw,3.1rem);margin:14px 0 18px;max-width:18ch}
.banq-txt .lead{color:rgba(255,255,255,.8);max-width:50ch}
.banq-foto{position:relative;min-height:340px;overflow:hidden}
.banq-foto img{width:100%;height:100%;object-fit:cover}
.banq-foto>.poster{position:absolute;inset:0;height:auto}
.banq-foto>picture{position:absolute;inset:0}
.banq-foto::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--deep) 1%,transparent 34%)}
@media (max-width:1000px){.banq-foto{min-height:260px;order:-1}.banq-foto::after{background:linear-gradient(to bottom,transparent 40%,var(--deep) 99%)}}

.banq-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;margin-top:30px;
  background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-md);overflow:hidden}
.banq-lista div{background:var(--deep);padding:18px 20px}
.banq-lista strong{display:block;font-family:var(--f-slab);font-size:1.5rem;color:var(--accent);line-height:1.1}
.banq-lista span{display:block;font-size:.76rem;color:rgba(255,255,255,.6);margin-top:5px}

.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:paso}
.paso{position:relative;padding-top:26px;border-top:2px solid var(--line);counter-increment:paso}
.paso::before{content:counter(paso,decimal-leading-zero);position:absolute;top:-13px;left:0;
  background:var(--s0);padding-right:12px;font-family:var(--f-slab);font-size:.82rem;color:var(--accent)}
.paso h4{font-size:1rem;font-weight:500;margin-bottom:8px}
.paso p{font-size:.85rem;color:var(--tx3);line-height:1.6}

/* ── Ajustes finos de grilla a pantalla completa ─────────────────────────── */
.g5{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
@media (min-width:1700px){
  .g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
  .g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
}

/* ── Video ───────────────────────────────────────────────────────────────
   El <video> ocupa el mismo hueco que ocupaba la <img> a la que reemplaza, y
   la imagen de respaldo que lleva dentro se acomoda igual. */
.medio-video{width:100%;height:100%;object-fit:cover;display:block}
.medio-video picture,.medio-video img{width:100%;height:100%;object-fit:cover;display:block}
.slide-bg .medio-video,.bloque-foto .medio-video,.ftr-foto .medio-video,
.banq-foto .medio-video,.mos-item .medio-video{position:absolute;inset:0}

/* Distintivo sobre la portada de un video que no se reproduce solo. */
.sello-video{position:absolute;right:12px;bottom:12px;z-index:4;display:grid;place-items:center;
  width:38px;height:38px;border-radius:99px;font-size:.8rem;line-height:1;
  background:color-mix(in srgb,var(--ink) 76%,transparent);color:#fff;
  border:1px solid color-mix(in srgb,#fff 28%,transparent);backdrop-filter:blur(6px);
  padding-left:3px;pointer-events:none}
.media,.gal-foto,.mos-item{position:relative}

.visor-fig video{max-width:100%;max-height:80vh;border-radius:var(--r-md);background:#000}
.visor-fig video[hidden]{display:none}
@media (max-width:700px){.visor-fig video{max-height:66vh}}

/* Si el visitante pidió menos movimiento, el video ni se insinúa. */
@media (prefers-reduced-motion:reduce){
  .medio-video{animation:none!important}
}