/* =========================================================
   Casa UIRA — premium (guía: modulars.framer.media)
   Gotham/Montserrat (texto) + Fraunces (display) · verde de marca
   ========================================================= */

/* ---------- Gotham (fuente de marca) ----------------------------------
   PENDIENTE: faltan los .woff2 de la licencia WEBFONT de Gotham.
   Mientras no existan, solo la ven los equipos que la tengan instalada y
   el resto cae a Montserrat (más ancha y de trazo más grueso).
   Para activarla: poner los archivos en assets/fonts/ y descomentar esto.
   Instrucciones completas en assets/fonts/LEEME.md

@font-face{
  font-family:"Gotham";
  src:url("../assets/fonts/gotham-book.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("../assets/fonts/gotham-medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
------------------------------------------------------------------------ */

:root{
  --bg:      #f7f4ef;
  --white:   #ffffff;
  --ink:     #1c1a17;
  --ink-2:   #6f685e;
  --green:   #223b39;
  --green-2: #2c4a47;
  --line:    rgba(28,26,23,.12);
  --serif:   "Fraunces", Georgia, serif;
  --sans:    "Gotham", "Montserrat", system-ui, sans-serif;
  --ease:    cubic-bezier(.22,.61,.36,1);
  --pad:     clamp(1.25rem, 5vw, 7rem);
  --maxw:    1320px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body{ font-family:var(--sans); font-weight:400; color:var(--ink); background:var(--bg); line-height:1.7; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
section{ position:relative; }

/* ---------- Type ---------- */
.eyebrow{ font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500; color:var(--green); margin-bottom:1.2rem; }
.eyebrow--light{ color:#cf9f86; }
.h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
.h2--light{ color:var(--bg); }
.link-arrow{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); border-bottom:1px solid currentColor; padding-bottom:3px; transition:opacity .3s; }
.link-arrow:hover{ opacity:.6; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:.85em 1.6em; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:all .4s var(--ease); white-space:nowrap; }
.btn--lg{ padding:1.05em 2.2em; font-size:.78rem; }
.btn--solid{ background:var(--green); color:var(--bg); border-color:var(--green); }
.btn--solid:hover{ background:var(--green-2); border-color:var(--green-2); }
.btn--light{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.btn--light:hover{ background:transparent; color:var(--bg); border-color:var(--bg); }
.btn--ghost{ background:transparent; color:currentColor; border-color:currentColor; }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ---------- Loader ---------- */
.loader{ position:fixed; inset:0; z-index:3000; background:var(--green); display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s; }
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__mark{ width:clamp(120px,30vw,160px); height:38px; background:var(--bg); -webkit-mask:url(../assets/logo/uira-wordmark.svg) center/contain no-repeat; mask:url(../assets/logo/uira-wordmark.svg) center/contain no-repeat; animation:pulse 1.6s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }

/* ---------- Nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.3rem var(--pad); color:var(--bg); transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease); }
.nav.is-scrolled{ background:var(--bg); color:var(--ink); padding-top:.9rem; padding-bottom:.9rem; box-shadow:0 1px 0 var(--line); }
.nav__brand{ flex:0 0 auto; }
.nav__logo{ display:block; width:96px; height:22px; background:currentColor; -webkit-mask:url(../assets/logo/uira-wordmark.svg) left center/contain no-repeat; mask:url(../assets/logo/uira-wordmark.svg) left center/contain no-repeat; }
.nav__links{ display:flex; gap:clamp(1rem,2.2vw,2.2rem); }
.nav__links a{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:400; position:relative; padding:.3rem 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:currentColor; transition:width .4s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:.9rem; }
.nav__ig{ display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; opacity:.85; transition:opacity .3s; }
.nav__ig:hover{ opacity:1; }
.lang{ display:flex; align-items:center; gap:.35rem; font-size:.72rem; }
.lang button{ background:none; border:none; color:inherit; cursor:pointer; font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; opacity:.5; }
.lang button.is-active{ opacity:1; font-weight:600; }
.lang span{ opacity:.4; }
/* color:inherit es obligatorio: un <button> NO hereda el color del padre, usa el
   del navegador (azul en iOS). Sin esto las barras salían azules en el móvil. */
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; color:inherit; cursor:pointer; padding:4px; -webkit-appearance:none; appearance:none; }
.nav__mcta{ display:none; }
.burger span{ width:22px; height:1.5px; background:currentColor; transition:all .4s var(--ease); }
.burger.is-open{ position:relative; z-index:1101; }
.burger.is-open span{ background:var(--bg); }
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero slider ---------- */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; display:grid; align-items:center; }
.hero__slider{ position:absolute; inset:0; }
.hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s var(--ease); transform:scale(1.04); }
.hero__slide.is-active{ opacity:1; transform:scale(1); transition:opacity 1.4s var(--ease), transform 7s var(--ease); }
.hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,14,11,.5) 0%, rgba(16,14,11,.2) 35%, rgba(16,14,11,.65) 100%); }
.hero__inner{ position:relative; z-index:2; color:var(--bg); padding:0 var(--pad); max-width:60rem; }
.hero__eyebrow{ font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; opacity:.9; margin-bottom:1.6rem; }
.hero__title{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,7vw,5.6rem); line-height:1.04; letter-spacing:-.015em; }
.hero__title span{ display:block; }
.hero__title .ital{ font-style:italic; }
.hero__sub{ margin:1.6rem 0 2.4rem; max-width:34rem; font-size:clamp(1rem,1.5vw,1.18rem); opacity:.92; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__dots{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:.6rem; }
.hero__dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(247,244,239,.4); cursor:pointer; transition:background .3s, width .3s; }
.hero__dots button.is-active{ background:var(--bg); width:24px; border-radius:4px; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.no-anim .reveal{ opacity:1 !important; transform:none !important; }

/* ---------- Section heads ---------- */
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4rem); padding:0 var(--pad); }
.sec-head--center{ text-align:center; }
.sec-head--center .sec-head__sub{ max-width:42rem; margin:1.2rem auto 0; }
.sec-head__sub{ color:var(--ink-2); font-size:1.02rem; }

/* ---------- Intro + stats ---------- */
.intro{ max-width:var(--maxw); margin:0 auto; padding:clamp(5rem,11vw,9rem) var(--pad) clamp(3rem,6vw,5rem); display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end; }
.intro__lead .h2{ max-width:18ch; }
.intro__text p{ color:var(--ink-2); font-size:1.05rem; margin-bottom:1.6rem; }
.stats{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line); }
.stat{ display:flex; flex-direction:column; gap:.4rem; }
.stat__n{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--green); }
.stat__l{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }

/* ---------- La Casa ---------- */
.casa{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,9vw,7rem) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.casa__media{ aspect-ratio:4/5; overflow:hidden; border-radius:4px; }
.casa__media img{ transition:transform 1.6s var(--ease); }
.casa__media:hover img{ transform:scale(1.05); }
.casa__p{ color:var(--ink-2); font-size:1.05rem; margin:1.4rem 0 2rem; }
.amen{ display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2rem; }
.amen li{ display:flex; align-items:center; gap:.75rem; padding:.8rem 0; border-top:1px solid var(--line); font-size:.92rem; color:var(--ink); }
.amen li svg{ width:21px; height:21px; flex:0 0 21px; stroke:var(--green); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Galería ---------- */
.gallery{ padding:clamp(4rem,9vw,7rem) 0; background:var(--white); }
/* Collage bento full-width */
.gallery__grid{ width:100%; padding:0 clamp(.4rem,1vw,.8rem); display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:13.5vw; gap:clamp(.4rem,1vw,.8rem); grid-auto-flow:dense; }
/* min-width/min-height:0 son necesarios: las fotos llevan width/height en el HTML
   (para reservar espacio y evitar saltos de layout) y sin esto el mínimo de
   contenido infla la columna y el grid colapsa. */
.gallery__item{ overflow:hidden; border-radius:10px; cursor:pointer; position:relative; min-width:0; min-height:0; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item.lg{ grid-column:span 2; grid-row:span 2; }
.gallery__item.wide{ grid-column:span 2; }
.gallery__item.tall{ grid-row:span 2; }
@media(max-width:760px){
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:32vw; }
  .gallery__item.lg{ grid-column:span 2; grid-row:span 2; }
  .gallery__item.wide{ grid-column:span 2; grid-row:span 1; }
  .gallery__item.tall{ grid-column:span 1; grid-row:span 2; }
}

/* ---------- Experiencias (2 columnas + iPhone) ---------- */
.exp{ padding:clamp(4rem,9vw,7rem) 0; }
.exp__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.exp__sub{ color:var(--ink-2); font-size:1.02rem; margin-top:1.2rem; max-width:44ch; }
.exp__acts{ margin-top:clamp(2.2rem,4vw,3rem); display:grid; grid-template-columns:1fr 1fr; gap:1.7rem 2rem; }
.act{ display:flex; gap:.9rem; align-items:flex-start; }
.act__ic{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:background .35s, border-color .35s; }
.act:hover .act__ic{ background:var(--green); border-color:var(--green); }
.act__ic svg{ width:22px; height:22px; stroke:var(--green); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s; }
.act:hover .act__ic svg{ stroke:var(--bg); }
.act h3{ font-family:var(--serif); font-weight:400; font-size:1.2rem; line-height:1.15; }
.act p{ color:var(--ink-2); font-size:.85rem; margin-top:.25rem; }

/* iPhone mockup */
.exp__phone{ display:grid; place-items:center; }
.phone{ position:relative; width:min(300px,78vw); aspect-ratio:9/19.3; background:#0c0c0d; border-radius:46px; padding:11px; box-shadow:0 30px 70px rgba(28,26,23,.25); }
.phone::after{ content:""; position:absolute; inset:0; border-radius:46px; border:1px solid rgba(255,255,255,.1); pointer-events:none; }
.phone__island{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:86px; height:25px; background:#0c0c0d; border-radius:13px; z-index:2; }
.phone video{ width:100%; height:100%; object-fit:cover; border-radius:36px; display:block; background:#0c0c0d; }
.phone__fs{ position:absolute; bottom:24px; right:24px; z-index:3; width:42px; height:42px; border-radius:50%; border:none; background:rgba(12,12,13,.55); color:#fff; backdrop-filter:blur(6px); display:grid; place-items:center; cursor:pointer; transition:background .3s, transform .3s; }
.phone__fs:hover{ background:rgba(12,12,13,.85); transform:scale(1.08); }
@media(max-width:980px){ .exp__inner{ grid-template-columns:1fr; gap:3rem; } .exp__phone{ order:2; } }
@media(max-width:520px){ .exp__acts{ grid-template-columns:1fr; } }

/* ---------- Anfitriones ---------- */
.hosts{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,9vw,7rem) var(--pad) clamp(2rem,4vw,3rem); }
.hosts__body{ max-width:44rem; margin:0 auto; text-align:center; }
.hosts__body p{ color:var(--ink-2); font-size:1.05rem; margin-bottom:1.2rem; }
.hosts__body b{ color:var(--ink); font-weight:400; }
.hosts__body .link-arrow{ display:inline-block; margin-top:.6rem; }
.sec-head__src{ margin-top:.9rem; font-size:.82rem; }
.sec-head__src a{ color:var(--clay); border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- Testimonios (slider de tarjetas) ---------- */
.tst{ background:var(--bg); padding:clamp(5rem,10vw,8rem) 0; overflow:hidden; }
.tst__viewport{ overflow:hidden; margin-top:clamp(2rem,4vw,3.2rem); -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tst__track{ display:flex; gap:1.4rem; padding:0 var(--pad); transition:transform .6s var(--ease); will-change:transform; }
.tcard{ flex:0 0 min(420px, 82vw); background:var(--white); border:1px solid var(--line); border-radius:16px; padding:clamp(1.6rem,2.5vw,2.2rem); display:flex; flex-direction:column; }
.tcard__stars{ color:#c8763f; letter-spacing:.18em; font-size:.9rem; margin-bottom:1.1rem; }
.tcard__q{ font-size:1rem; line-height:1.6; color:var(--ink); flex:1; }
.tcard__by{ display:flex; align-items:center; gap:.85rem; margin-top:1.6rem; }
.tcard__av{ width:46px; height:46px; flex:0 0 46px; border-radius:50%; background:var(--green); color:var(--bg); display:grid; place-items:center; font-family:var(--serif); font-size:1.15rem; }
.tcard__by strong{ display:block; font-weight:600; font-size:.95rem; }
.tcard__by span{ font-size:.8rem; color:var(--ink-2); }
.tst__nav{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2.6rem; }
.tst__nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); cursor:pointer; font-size:1.2rem; transition:all .3s; }
.tst__nav button:hover{ background:var(--green); color:var(--bg); border-color:var(--green); }
.tst__dots{ display:flex; gap:.5rem; }
.tst__dots button{ width:7px; height:7px; padding:0; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:background .3s; }
.tst__dots button.is-active{ background:var(--green); }

/* ---------- FAQ ---------- */
.faq{ max-width:60rem; margin:0 auto; padding:clamp(4rem,9vw,7rem) var(--pad); }
.faq__head{ text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.4rem 2rem 1.4rem 0; position:relative; font-size:1.05rem; font-weight:400; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--green); transition:transform .3s; }
.faq__item[open] summary::after{ content:"–"; }
.faq__item div{ padding:0 2rem 1.5rem 0; color:var(--ink-2); font-size:.98rem; max-width:52ch; }

/* ---------- Reservar ---------- */
.book{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,9vw,7rem) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); }
.book__price{ margin:1.8rem 0 1.4rem; font-size:1rem; color:var(--ink-2); }
.book__price strong{ font-family:var(--serif); font-weight:400; font-size:2rem; color:var(--green); margin:0 .2rem; }
.book__notes{ margin-bottom:2rem; }
.book__notes li{ padding:.45rem 0 .45rem 1.3rem; position:relative; color:var(--ink-2); font-size:.95rem; }
.book__notes li::before{ content:"—"; position:absolute; left:0; color:var(--green); }
.book__form{ background:var(--white); padding:clamp(1.6rem,3vw,2.6rem); border-radius:6px; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-content:start; border:1px solid var(--line); }
.field{ grid-column:1 / -1; display:flex; flex-direction:column; gap:.45rem; }
.field--half{ grid-column:span 1; }
.field label{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.field input, .field textarea{ font-family:var(--sans); font-size:.96rem; font-weight:300; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:.8em .9em; width:100%; transition:border-color .3s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green); }
.hp{ position:absolute; left:-9999px; opacity:0; }
#submitBtn{ grid-column:1 / -1; justify-self:start; }
.form__status{ grid-column:1 / -1; font-size:.9rem; min-height:1.2em; }
.form__status.ok{ color:var(--green); }
.form__status.err{ color:#b4452f; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:var(--bg); padding:clamp(3.5rem,7vw,5rem) var(--pad) 2rem; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(247,244,239,.14); }
.footer__logo{ display:block; width:120px; height:30px; background:var(--bg); -webkit-mask:url(../assets/logo/uira-wordmark.svg) left center/contain no-repeat; mask:url(../assets/logo/uira-wordmark.svg) left center/contain no-repeat; }
.footer__brand p{ margin-top:1rem; opacity:.7; font-size:.92rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer__cols h4{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#cf9f86; font-weight:500; margin-bottom:.9rem; }
.footer__cols p{ font-size:.92rem; opacity:.82; line-height:1.9; }
.footer__cols a:hover{ opacity:.6; }
.footer__base{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding-top:2rem; font-size:.76rem; letter-spacing:.08em; opacity:.6; }

/* ---------- WhatsApp flotante ---------- */
.wa{ position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:1200; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .3s var(--ease); }
.wa:hover{ transform:scale(1.08); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:1500; background:rgba(16,14,11,.95); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:88vw; max-height:84vh; width:auto; height:auto; object-fit:contain; border-radius:3px; }
.lightbox button{ background:none; border:none; color:var(--bg); cursor:pointer; }
.lightbox__close{ position:absolute; top:1.4rem; right:1.8rem; font-size:2.4rem; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.6rem; padding:1rem; opacity:.7; }
.lightbox__nav:hover{ opacity:1; }
.lightbox__prev{ left:1rem; } .lightbox__next{ right:1rem; }

/* ---------- Mobile ---------- */
@media (max-width:980px){
  .intro, .casa, .book{ grid-template-columns:1fr; }
  .gallery__grid, .exp__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav__links{ position:fixed; inset:0; background:var(--green); color:var(--bg); flex-direction:column; justify-content:center; align-items:center; gap:1.8rem; transform:translateX(100%); transition:transform .5s var(--ease); }
  .nav__links.is-open{ transform:none; }
  .nav__links a{ font-size:1.1rem; }
  .nav__mcta{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:1.8rem; }
  .nav__mcta .btn{ min-width:210px; }
  .nav__mcta .lang{ margin-top:.4rem; font-size:.85rem; }
  .burger{ display:flex; }
  .nav__actions .btn{ display:none; }
  .nav__actions .lang{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .amen{ grid-template-columns:1fr; }
  .exp__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .field--half{ grid-column:1 / -1; }
  .footer__base{ justify-content:center; text-align:center; }
}
@media (max-width:480px){ .gallery__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .footer__cols{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; } }

/* =========================================================
   Banner Instagram · checkbox · páginas internas (contacto/políticas)
   ========================================================= */
.ig-banner{ background:var(--green); color:var(--bg); text-align:center; padding:clamp(4rem,9vw,7rem) var(--pad); }
.ig-banner__in{ max-width:46rem; margin:0 auto; }
.ig-banner__sub{ color:rgba(247,244,239,.82); margin:1rem auto 2rem; font-size:1.05rem; max-width:34rem; }
.ig-banner__btn{ display:inline-flex; align-items:center; gap:.6rem; }
.ig-banner__btn svg{ width:18px; height:18px; }

/* Checkbox tratamiento de datos */
.check{ grid-column:1 / -1; display:flex; align-items:flex-start; gap:.65rem; font-size:.84rem; color:var(--ink-2); line-height:1.5; }
.check input{ width:18px; height:18px; flex:0 0 18px; margin-top:.15rem; accent-color:var(--green); cursor:pointer; }
.check a{ color:var(--green); text-decoration:underline; }

/* Páginas internas: nav sólido desde arriba */
.page-inner .nav{ background:var(--bg); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.page-hero{ max-width:var(--maxw); margin:0 auto; padding:calc(clamp(5rem,9vw,7rem) + 56px) var(--pad) clamp(2rem,4vw,3rem); }
.page-hero .h2{ font-size:clamp(2.2rem,5vw,3.4rem); }
.page-hero p{ color:var(--ink-2); font-size:1.08rem; margin-top:1rem; max-width:44rem; }

/* Legal / políticas */
.legal{ max-width:48rem; margin:0 auto; padding:0 var(--pad) clamp(4rem,9vw,7rem); }
.legal h3{ font-family:var(--serif); font-weight:400; font-size:1.45rem; margin:2.2rem 0 .6rem; color:var(--ink); }
.legal p{ color:var(--ink-2); margin-bottom:.9rem; }
.legal ul{ padding-left:1.2rem; list-style:disc; margin-bottom:1rem; }
.legal li{ color:var(--ink-2); margin-bottom:.5rem; }
.legal .legal__note{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9rem; }

/* Contacto */
.contact{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(4rem,9vw,7rem); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact__info h3{ font-family:var(--serif); font-weight:400; font-size:1.3rem; margin-bottom:1.4rem; }
.contact__row{ display:flex; align-items:center; gap:.8rem; padding:1rem 0; border-top:1px solid var(--line); }
.contact__row:last-child{ border-bottom:1px solid var(--line); }
.contact__row svg{ width:20px; height:20px; flex:0 0 20px; stroke:var(--green); fill:none; stroke-width:1.5; }
.contact__row b{ font-weight:600; }
.contact__row span{ display:block; color:var(--ink-2); font-size:.9rem; }
@media(max-width:880px){ .contact{ grid-template-columns:1fr; } }

/* =========================================================
   El Café de UIRA
   ========================================================= */
.cafe-mark{ width:auto; height:clamp(54px,8vw,84px); margin:0 auto 1.4rem; object-fit:contain; }
/* Hero del café: foto real luminosa → velo más fuerte a la izquierda para legibilidad */
.cafe .hero__veil{ background:linear-gradient(90deg, rgba(16,14,11,.74) 0%, rgba(16,14,11,.5) 38%, rgba(16,14,11,.2) 70%, rgba(16,14,11,.12) 100%), linear-gradient(180deg, rgba(16,14,11,.3), rgba(16,14,11,.45)); }

/* La carta */
.menu{ background:var(--bg); padding:clamp(4rem,9vw,7rem) 0; }
.menu__head{ max-width:46rem; margin:0 auto; padding:0 var(--pad); text-align:center; }
.menu__sub{ color:var(--ink-2); max-width:40rem; margin:1rem auto 0; font-size:1.05rem; }
.menu__hours{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem; padding:.55rem 1.2rem; border:1px solid var(--line); border-radius:999px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.menu__hours svg{ width:16px; height:16px; stroke:var(--green); fill:none; stroke-width:1.6; }
.menu__grid{ max-width:var(--maxw); margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding:0 var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,1.9rem); align-items:stretch; }
.mcard{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.mcard__media{ aspect-ratio:4/5; overflow:hidden; background:#f1ece4; flex:0 0 auto; }
.mcard__media img{ object-fit:cover; object-position:center bottom; transition:transform 1.2s var(--ease); }
.mcard:hover .mcard__media img{ transform:scale(1.05); }
.mcard__body{ padding:clamp(1.3rem,2vw,1.7rem); flex:1; display:flex; flex-direction:column; }
.mcard h3{ font-family:var(--serif); font-weight:400; font-size:1.45rem; line-height:1.1; color:var(--ink); }
.mcard__tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:.55rem 0 1.1rem; }
.mrow{ display:flex; align-items:baseline; gap:.5rem; padding:.46rem 0; border-top:1px solid var(--line); font-size:.93rem; }
.mrow:nth-of-type(1){ border-top:none; }
.mrow b{ font-weight:400; color:var(--ink); }
.mrow .dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-.28em); min-width:14px; }
.mrow .price{ color:var(--green); font-weight:500; white-space:nowrap; }
.mrow--desc{ display:block; color:var(--ink-2); font-size:.84rem; border-top:none; padding:.1rem 0 .7rem; line-height:1.5; }
@media(max-width:980px){ .menu__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .menu__grid{ grid-template-columns:1fr; } }

/* Pasos "cómo funciona" (fidelización) */
.steps{ max-width:var(--maxw); margin:0 auto; padding:clamp(1rem,2vw,2rem) var(--pad) clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
.fstep{ display:flex; flex-direction:column; gap:.5rem; padding-top:1.2rem; border-top:2px solid var(--green); }
.fstep b{ font-family:var(--serif); font-weight:400; font-size:2.2rem; line-height:1; color:var(--green); }
.fstep h3{ font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--ink); }
.fstep p{ color:var(--ink-2); font-size:.95rem; }
@media(max-width:760px){ .steps{ grid-template-columns:1fr; gap:1.6rem; } }

/* Horario en el nav del café (reemplaza botones de reserva) */
.nav__hours{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.05em; color:currentColor; white-space:nowrap; }
.nav__hours svg{ width:15px; height:15px; flex:0 0 15px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:760px){ .nav__actions .nav__hours{ display:none; } .nav__mcta .nav__hours{ font-size:.95rem; margin-top:.4rem; } }

/* Banner de fidelización: celda dentro de la grilla de la carta (junto a Acompañamientos) */
.fidcard{ grid-column:span 2; align-self:stretch; background:var(--green); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.fidcard__media{ flex:1 1 auto; min-height:clamp(200px,22vw,300px); overflow:hidden; }
.fidcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.fidcard:hover .fidcard__media img{ transform:scale(1.05); }
.fidcard__body{ color:var(--bg); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; gap:clamp(1rem,1.8vw,1.4rem); }
.fidcard__top{ display:flex; flex-direction:column; gap:.7rem; }
.fidcard__body .eyebrow{ margin:0; }
.fidcard__body .h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); }
.fidcard__sub{ color:rgba(247,244,239,.86); font-size:1rem; max-width:52ch; }
/* Paso a paso del club */
.fidsteps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:.5rem 0; }
.fidsteps li{ position:relative; display:flex; flex-direction:column; gap:.5rem; padding-right:.6rem; }
.fidsteps__n{ width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:rgba(247,244,239,.12); border:1px solid rgba(247,244,239,.5); display:grid; place-items:center; font-family:var(--serif); font-size:1.15rem; color:var(--bg); position:relative; z-index:1; margin-bottom:.2rem; }
.fidsteps__t{ font-size:.92rem; font-weight:500; line-height:1.3; color:var(--bg); }
.fidsteps__d{ font-size:.78rem; line-height:1.4; color:rgba(247,244,239,.68); }
.fidsteps li:not(:last-child)::after{ content:""; position:absolute; top:19px; left:46px; right:.2rem; height:1px; background:rgba(247,244,239,.3); }
@media(max-width:560px){ .fidsteps{ grid-template-columns:1fr; gap:1rem; } .fidsteps li{ display:grid; grid-template-columns:38px 1fr; column-gap:.9rem; align-items:center; } .fidsteps__n{ grid-row:span 2; } .fidsteps li:not(:last-child)::after{ display:none; } }
@media(max-width:980px){ .fidcard{ grid-column:span 1; } }
@media(max-width:600px){ .fidcard{ grid-column:1; } }

/* Feed de Instagram (galería del café) */
.ig-feed{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.ig-feed behold-widget{ --behold-gap:clamp(.4rem,1vw,.8rem); --behold-border-radius:10px; display:block; width:100%; }
.gallery__item .ig-play{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:rgba(16,14,11,.5); backdrop-filter:blur(4px); display:grid; place-items:center; pointer-events:none; }
.gallery__item .ig-play::before{ content:""; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; margin-left:2px; }

/* Visítanos */
.visit{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,9vw,7rem) var(--pad); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.visit__p{ color:var(--ink-2); font-size:1.05rem; margin:1.3rem 0 1.8rem; }
.visit__map{ aspect-ratio:16/11; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.visit__map iframe{ width:100%; height:100%; border:0; filter:grayscale(.18); }
@media(max-width:880px){ .visit{ grid-template-columns:1fr; } .visit__map{ order:-1; } }