/* ====================================================
   Johnny's Bar Burgers — shared stylesheet
   ==================================================== */

@font-face{
  font-family:"Numberplate Switzerland";
  src:url("fonts/Numberplate-LL-Switzerland.woff2") format("woff2"),
      url("fonts/Numberplate-LL-Switzerland.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Numberplate Luxembourg";
  src:url("fonts/Numberplate-LL-Luxembourg.woff2") format("woff2"),
      url("fonts/Numberplate-LL-Luxembourg.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:        oklch(95% 0.008 70);     /* warm off-white, was #F4F1ED */
  --cream:     oklch(89% 0.008 60);     /* tinted cream, was #E5E1DE */
  --ink:       oklch(30% 0.008 50);     /* warm near-black, was #3B3B3B */
  --ink-soft:  oklch(52% 0.012 55);     /* warm secondary, was #707070 */
  --primary:   #18400D;                  /* deep green — brand */
  --primary-2: #B7C18C;                  /* sage echo for hover */
  --accent:    #DE5F2D;                  /* orange — brand */
  --secondary: #D1CEAA;                  /* button shadow / khaki */
  --border:    oklch(30% 0.008 50 / .16);
  --font-display: "Numberplate Switzerland","Arial Narrow",sans-serif;
  --font-luxe:    "Numberplate Luxembourg","Arial Rounded MT Bold",sans-serif;
  --font-sans:    "Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Prevent decorative elements (rotated seal, diagonal ticker) from creating
   horizontal scroll. clip (not hidden) keeps position:sticky working. */
html,body{overflow-x:clip;max-width:100%}
html{scroll-behavior:auto} /* JS smooth scroll handles this */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
  margin:0;
}

a{color:inherit}
img{display:block;max-width:100%}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }
@media (min-width:768px){ .wrap{ padding:0 40px; } }

/* ---------- Button pill ---------- */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary); color:#fff;
  font-family:var(--font-sans);
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:14px;
  padding:14px 30px;
  border-radius:9999px;
  text-decoration:none;
  box-shadow: 8px 8px 0 var(--secondary);
  transition:
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
  cursor:pointer; border:0;
}
.btn-pill:hover{
  background:var(--accent);
  color:#fff;
  transform: translate(2px,2px);
  box-shadow: 4px 4px 0 var(--secondary);
}
.btn-pill:active{
  transform: scale(0.97);
  box-shadow: 4px 4px 0 var(--secondary);
}
@media (min-width:768px){ .btn-pill{ font-size:15px; padding:16px 36px; } }

/* ---------- Brand seal (logo) ---------- */
.brand-seal{ display:inline-block; will-change:transform; transition: transform .4s ease; }
.brand-seal img{ display:block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.brand-seal:hover img{ transform: rotate(20deg); }
.brand-seal.spin{ animation: seal-spin 22s linear infinite; }
@keyframes seal-spin{ to{ transform:rotate(360deg) } }

/* ---------- Burger menu icon ---------- */
.burger-icon{
  color:var(--primary);
  transition:
    color 160ms ease,
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.burger-icon:hover{ color:var(--accent); transform:translateY(-2px); }

/* ============================
   Reveal-on-scroll
   ============================ */
[data-reveal]{
  opacity:0;
  transform: translateY(12px);
  transition:
    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay,0ms),
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay,0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed{
  opacity:1;
  transform: translateY(0) !important;
}

/* Hero entry — gentler, with a slight scale instead of translate. */
.hero-text[data-reveal],
.hero-image[data-reveal]{
  transform: scale(1.03);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay,0ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay,0ms);
}
.hero-text[data-reveal].is-revealed,
.hero-image[data-reveal].is-revealed{
  transform: scale(1) !important;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}
@media (pointer: coarse), (max-width: 899px){
  [data-reveal]{ opacity:1; transform:none !important; transition:none !important; }
  .hero-slide.is-entering{ animation:none !important; }
}

/* ---------- Global reduced-motion fallback ----------
   Strip transforms / animations but keep opacity for clarity. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: 160ms !important;
    transform: none !important;
  }
}

/* ============================
   HEADER (sticky, color-invert on scroll)
   ============================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  padding:18px 24px;
  background: rgba(244,241,237,.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  --header-fg: var(--primary);   /* element color at top (green on cream) */
  transition: padding .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  padding: 10px 24px;
  background: var(--primary);
  border-bottom-color: transparent;
  box-shadow: 0 10px 28px -20px rgba(0,0,0,.35);
  --header-fg: var(--cream);     /* element color when scrolled (cream on green) */
}
.site-header-inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}

/* Logo & burger icon — stacked default/scrolled images */
.site-header .brand-seal,
.site-header .burger-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .brand-seal img,
.site-header .burger-icon img{
  display: block;
  transition: width .3s ease, height .3s ease, opacity .25s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.site-header .logo-scrolled,
.site-header .icon-scrolled{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.site-header.scrolled .logo-default,
.site-header.scrolled .icon-default{ opacity: 0; }
.site-header.scrolled .logo-scrolled,
.site-header.scrolled .icon-scrolled{ opacity: 1; }

/* Sizes */
.site-header .brand-seal img{ width: 78px; height: 78px; }
.site-header .burger-icon img{ width: 48px; height: 48px; }
.site-header.scrolled .brand-seal img{ width: 56px; height: 56px; }
.site-header.scrolled .burger-icon img{ width: 40px; height: 40px; }

.site-header .brand-seal:hover .logo-default{ transform: rotate(20deg); }
.site-header .brand-seal:hover .logo-scrolled{ transform: translate(-50%, -50%) rotate(20deg); }

.site-header .burger-icon{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.site-header .burger-icon:hover{ transform: translateY(-2px); }

@media (min-width:768px){
  .site-header .brand-seal img{ width:96px; height:96px; }
  .site-header .burger-icon img{ width:56px; height:56px; }
  .site-header.scrolled .brand-seal img{ width:60px; height:60px; }
  .site-header.scrolled .burger-icon img{ width:44px; height:44px; }
}

/* Pills */
.site-header .nav-ctas{ display:flex; gap:10px; }
.site-header .nav-ctas .btn-pill{
  padding:8px 14px; font-size:11px;
  transition: padding .3s ease, font-size .3s ease, background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.site-header.scrolled .nav-ctas .btn-pill{
  padding: 7px 12px; font-size: 10px;
  background: var(--cream);
  color: var(--primary);
  box-shadow: 6px 6px 0 var(--primary-2);
}
.site-header.scrolled .nav-ctas .btn-pill:hover{
  background: var(--accent);
  color: #fff;
}

@media (min-width:768px){
  .site-header{ padding: 22px 40px; }
  .site-header.scrolled{ padding: 12px 40px; }
  .site-header .nav-ctas{ gap:18px; }
  .site-header .nav-ctas .btn-pill{ padding:14px 30px; font-size:15px; }
  .site-header.scrolled .nav-ctas .btn-pill{ padding:11px 22px; font-size:13px; }
}

/* ============================
   HERO
   ============================ */
/* El padding lateral y el max-width igualan a los de .site-header /
   .site-header-inner para que el cuadro empiece justo bajo el logo y
   termine justo bajo el icono de menú. */
.hero{ padding:14px 24px 0; position: relative; }
@media (min-width:768px){ .hero{ padding:56px 40px 0; } }
.hero-grid{
  max-width:1280px; margin:0 auto;
  position: relative;            /* ancla del sello */
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:768px){
  .hero-grid{ grid-template-columns:0.9fr 1.1fr; align-items:stretch; min-height:560px; }
}
@media (min-width:1280px){
  .hero-grid{ min-height:640px; }
}

.hero-text{
  background:var(--cream);
  padding:24px 28px 32px;
  display:flex; flex-direction:column;
  min-width: 0;
}
@media (min-width:768px){
  .hero-text{ min-height: 0; padding:32px 28px; }
}
@media (min-width:900px){
  .hero-text{ padding:48px 56px; }
}
.hero-title{
  font-family:var(--font-luxe);
  font-weight: 400;
  font-synthesis: none;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  font-size: clamp(66px, 18.5vw, 112px);
  line-height:.84;
  margin: 0;
}
@media (min-width:768px){
  .hero-title{ font-size: clamp(40px, 5.5vw, 112px); margin:-10px; }
}
.hero-schedule{
  margin-top:56px;
  font-family:var(--font-luxe);
  font-weight: 400;
  font-synthesis: none;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: clamp(18px, calc(15.7px + 0.65vw), 24px);
  line-height:1.35;
  color:var(--ink);
}
.hero-schedule p{ margin:0; }
.hero-loc{
  margin-top:28px;
  font-family:var(--font-luxe);
  font-weight: 400;
  font-synthesis: none;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: clamp(18px, calc(15.7px + 0.65vw), 24px);
  color:var(--ink);
}
.hero-links{
  margin-top:auto; padding-top:16px;
  display:flex; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
}

/* Movil de una columna (sin hero-stacked ni hero-fullbleed): el cuadro
   de texto quedaba bastante mas alto que la foto cuadrada de debajo.
   Se aprieta el cuadro (no el titulo, que ya se pidio mas grande antes)
   para que las dos alturas queden parecidas. */
@media (max-width: 767px){
  .hero-text{ padding: 16px 28px 18px; }
  .hero-schedule{ margin-top: 26px; }
  .hero-loc{ margin-top: 12px; }
  .hero-links{ padding-top: 8px; }
}
.hero-links a{
  font-family:var(--font-luxe);
  font-weight: 400;
  font-synthesis: none;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  font-size: clamp(20px, 2.1vw, 28px);
  border-bottom:2px solid var(--ink);
  padding-bottom:1px;
  transition: color .2s ease, border-color .2s ease;
}
.hero-links a:hover{ color:var(--accent); border-color:var(--accent); transform: translateY(-2px); }
.hero-links a{ transition: color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1); display:inline-block; }
.hero-links a:active{ transform: scale(0.97); }

.hero-image{
  position:relative;
  background:#eedfe0;
  min-width: 0;
  min-height: 0;
  /* On mobile (single column) keep a square; on desktop let it match the text column height. */
  aspect-ratio: 1 / 1;
  /* overflow visible so the seal can poke out at the bottom-right */
}
@media (min-width:768px){
  .hero-image{ aspect-ratio: auto; }
}

/* Slider — instant change, no crossfade.
   Shared between .hero-slider and any .js-slider (e.g. slow-slider). */
.hero-slider{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  /* Default state: out (opacity 0). Outgoing transition = 300ms */
  opacity: 0;
  transform: scale(1);
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Slide entering: starts at opacity 0 + scale 1.03 then animates in over 600ms */
.hero-slide.is-entering{
  animation: heroSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-slide.is-active{
  opacity: 1;
  transform: scale(1);
}
@keyframes heroSlideIn{
  from{ opacity: 0; transform: scale(1.03); }
  to  { opacity: 1; transform: scale(1); }
}

/* Hero slider chrome (buttons + indicators) */
.hero-slider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 18, 16, 0.45);
  color: #fff;
  border: 0;
  width: 42px; height: 42px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition:
    opacity 200ms ease-out,
    background-color 120ms ease,
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-image:hover .hero-slider__btn,
.hero-slider__btn:focus-visible{ opacity: 1; }
.hero-slider__btn:hover{ background: rgba(20, 18, 16, 0.7); }
.hero-slider__btn:active{ transform: translateY(-50%) scale(0.93); }
.hero-slider__btn--prev{ left: 14px; }
.hero-slider__btn--next{ right: 14px; }

/* Mismos puntos que el slider de la sección "slow": el contenedor se ajusta
   al contenido en vez de estirarse, así los indicadores son puntos y no
   barras achatadas. */
.hero-indicators{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
  padding: 6px 10px;
  background: rgba(20, 18, 16, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-indicator{
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,0.45);
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Área táctil ampliada sin cambiar el aspecto: bordes transparentes que
     agrandan la caja y márgenes negativos que devuelven el hueco al layout.
     3px por lado en horizontal = la mitad del gap, así no invaden el vecino. */
  box-sizing: content-box;
  border: 19px solid transparent;
  border-left-width: 3px;
  border-right-width: 3px;
  margin: -19px -3px;
  background-clip: content-box;
}
/* El activo se alarga y sobre él corre el relleno blanco que marca cuánto
   queda para el siguiente pase. */
.hero-indicator.is-active{ width: 22px; }
.hero-indicator::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
}
.hero-indicator.is-active::before{
  animation: heroIndicatorFill var(--hero-interval, 5000ms) linear forwards;
}
.hero-indicator.is-paused::before{ animation-play-state: paused; }
@keyframes heroIndicatorFill{
  to{ transform: scaleX(1); }
}

/* prefers-reduced-motion: no transforms / animations, only opacity */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-slide.is-entering{ animation: none !important; transform: none !important; }
  .hero-indicator.is-active::before{ animation: none; transform: scaleX(1); }
}
/* Sello: montado sobre la esquina inferior derecha del cuadro — la mayor
   parte dentro, asomando por el borde.
   El desplazamiento hacia la derecha nunca supera el padding lateral de
   .hero (20px móvil / 24px escritorio); si lo superara, en pantallas más
   anchas que el max-width del cuadro aparecería scroll horizontal. */
.hero-seal{
  position:absolute;
  z-index:3;
  pointer-events:none;
  will-change:transform;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  right: -10px;
  bottom: -40px;
  width: 100px;
  height: 100px;
  transform: rotate(-22deg);
}
@media (min-width:768px){
  .hero-seal{
    right: -32px;
    bottom: -72px;
    width: 170px;
    height: 170px;
  }
}
@media (min-width:1180px){
  .hero-seal{
    right: -38px;
    bottom: -84px;
    width: 210px;
    height: 210px;
  }
}
@media (min-width:1280px){
  .hero-seal{
    right: -42px;
    bottom: -94px;
    width: 240px;
    height: 240px;
  }
}

/* ============================
   "No es solo una hamburguesería"
   ============================ */
.pitch{
  text-align:center;
  padding:80px 24px 24px;
  max-width:760px;
  margin:0 auto;
}
@media (min-width:768px){
  .pitch{ padding:96px 24px 24px; }
}
.pitch h2{
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: none;
  color: var(--ink);
  font-size: clamp(2.35rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 auto 28px;
  max-width: 18ch;
  text-wrap: pretty;
}
.pitch p{
  font-size: clamp(16px, calc(14.8px + 0.33vw), 19px);
  line-height:1.65;
  /* Sin tope, a 820px la línea se iba a 87 caracteres. Lo cómodo son 45–75. */
  max-width: 65ch;
  margin:0 auto 18px;
  text-wrap:pretty;
}

/* ============================
   Slow burger module
   ============================ */
/* El max-width pasa de la sección a la retícula, con los mismos valores que
   .site-header / .site-header-inner (1280 + 40 de padding). Así el borde
   derecho de la foto cae justo bajo el icono de menú de la cabecera. */
.slow{
  padding:60px 24px 80px;
}
@media (min-width:768px){
  .slow{ padding:96px 40px 120px; }
}
.slow-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:48px;
  align-items:start;
}
/* La columna de la foto se lleva más ancho y el hueco entre columnas se
   reduce: la foto crece hacia la izquierda, y como mantiene la proporción
   4/5, al centrarse crece también hacia arriba y hacia abajo. */
@media (min-width:900px){
  .slow-grid{ grid-template-columns: 0.85fr 1.15fr; gap:48px; align-items:center; }
}
@media (min-width:1180px){
  .slow-grid{ gap:56px; }
}

/* Text column wrapper — breathes around the content */
.slow-copy-wrap{
  display: flex; flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 8px 0;
}
@media (min-width:900px){
  .slow-copy-wrap{ padding: 24px 8px 24px 0; }
}
@media (min-width:1180px){
  .slow-copy-wrap{ padding: 32px 32px 32px 0; }
}

.slow-illu{
  width:100%; max-width: 420px;
  color:var(--primary);
  margin: 0;
}
@media (min-width:900px){
  .slow-illu{ max-width: 480px; margin-bottom: 16px; }
}
.slow-illu svg,
.slow-illu img{ width:100%; height:auto; display:block; }
.slow-copy{ max-width: 540px; }
.slow-kicker{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 12px;
}
.slow-headline{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  color: var(--ink);
  font-size: clamp(2.35rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: pretty;
}
.slow-body{
  font-family: var(--font-sans);
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 56ch;
}
.slow-pull{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 6px;
  max-width: 56ch;
}
.slow-tag{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 56ch;
}
.slow-copy .cta-row{ margin-top: 4px; }

/* Tablet en vertical (iPad 768 / Air 820 / Pro 11" 834).
   Sin esto cae en el apilado de móvil dentro de un contenedor de 673px
   y deja ~250px muertos a la derecha de la ilustración.
   Va después de las reglas base de .slow-* para poder pisar sus tamaños. */
@media (min-width:768px) and (max-width:899px){
  .slow{ padding: 72px 40px 88px; }
  .slow-grid{
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
  }
  .slow-copy-wrap{ padding: 8px 0; gap: 20px; }
  .slow-illu{ max-width: 100%; margin-bottom: 4px; }
  .slow-copy{ max-width: none; }
  .slow-headline{
    font-size: clamp(1.5rem, 3.6vw, 1.95rem);
    max-width: none;
    margin-bottom: 16px;
  }
  .slow-body{ margin-bottom: 18px; }
  .slow-tag{ margin-bottom: 20px; }
}

.slow-photo{
  position: relative;
  width:100%; aspect-ratio: 4 / 5; overflow:hidden;
  background:#241814;
  margin-top: 0;
  min-width: 0;
}
/* Sangrado hasta el borde real de la ventana, más allá del icono de menú
   de la cabecera (que queda 40px hacia dentro, su propio padding).
   .slow-grid se centra a partir de 1360px de ventana (1280 + 40+40 de
   padding), así que a partir de ahí la distancia al borde real crece con
   el ancho de ventana: la fórmula lo calcula en vez de usar un valor fijo,
   para que el sangrado sea el mismo en cualquier monitor.
   html,body tienen overflow-x:clip (línea ~35), así que este negativo
   nunca provoca scroll horizontal: lo que se pase del borde se recorta. */
@media (min-width:900px){
  .slow-photo{
    margin-right: calc(-40px - max(0px, (100vw - 1360px) / 2));
  }
}
.slow-photo > img{ width:100%; height:100%; object-fit:cover; }

/* ── Slow slider (translate-X) ───────────────────────── */
.slow-slider{
  position: absolute; inset: 0;
}
.slow-slider__viewport{
  position: absolute; inset: 0;
  overflow: hidden;
}
.slow-slider__track{
  display: flex;
  width: 100%; height: 100%;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.slow-slider__slide{
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.slow-slider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 18, 16, 0.45);
  color: #fff;
  border: 0;
  width: 40px; height: 40px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    background-color 120ms ease,
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slow-slider__btn:hover{ background: rgba(20, 18, 16, 0.7); }
.slow-slider__btn:active{ transform: translateY(-50%) scale(0.93); }
.slow-slider__btn--prev{ left: 14px; }
.slow-slider__btn--next{ right: 14px; }
.slow-slider__dots{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(20, 18, 16, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slow-slider__dot{
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,0.45);
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  padding: 0;
  transition:
    width 400ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 200ms ease;
  /* Mismo truco que en .hero-indicator. En horizontal solo 3px por lado:
     es la mitad del gap, así el área crece sin invadir la del punto vecino. */
  box-sizing: content-box;
  border: 19px solid transparent;
  border-left-width: 3px;
  border-right-width: 3px;
  margin: -19px -3px;
  background-clip: content-box;
}
/* background-color y no el atajo background: el atajo reinicia
   background-clip a border-box y el fondo se salía a los bordes
   transparentes del área táctil, pintando una pastilla enorme. */
.slow-slider__dot.is-active{
  width: 22px;
  background-color: #fff;
}
.slow-slider__dot:hover{ background-color: rgba(255,255,255,0.75); }

/* Disable hover-scale on slow-photo (now a slider) */
@media (hover: hover) and (pointer: fine){
  .slow-photo:hover .slow-slider__slide{ transform: none; }
}

/* ============================
   Pedidos block
   ============================ */
.pedidos{
  padding:0 24px 56px;
}
.pedidos-inner{
  max-width:900px; margin:0 auto;
  background:var(--cream);
  padding:48px 32px;
  text-align:center;
}
@media (min-width:768px){
  .pedidos-inner{ padding:72px 56px; }
}
.pedidos h2{
  font-size: clamp(36px, 5.4vw, 64px);
  margin-bottom:14px;
}
.pedidos p{
  max-width:520px; margin:0 auto 28px;
  font-size: clamp(16px, calc(15.2px + 0.22vw), 18px);
  color:var(--ink-soft);
}
.pedidos .cta-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ============================
   Brunch + Coworking
   ============================ */
.brunch{
  padding: 80px 24px;
  background: var(--cream);
}
@media (min-width:768px){
  .brunch{ padding: 120px 40px; }
}
.brunch-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px){
  .brunch-grid{
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
@media (min-width: 1180px){
  .brunch-grid{ gap: 120px; }
}

.brunch-copy{
  max-width: 540px;
  min-width: 0;
}
.brunch-kicker{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 16px;
}
.brunch-headline{
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: none;
  color: var(--ink);
  font-size: clamp(2.35rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: pretty;
}
.brunch-body{
  font-family: var(--font-sans);
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 52ch;
}
.brunch-tag{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
  color: var(--accent);
  margin: 24px 0 28px;
  letter-spacing: -.01em;
}
.brunch-schedule{
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 24px;
  display: flex; flex-direction: column;
  gap: 6px;
  max-width: 380px;
}
.brunch-schedule p{
  display: flex; justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
  gap: 24px;
}
.brunch-schedule p span:first-child{
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  font-size: 12px;
}
.brunch-schedule p span:last-child{
  font-weight: 700;
}

/* Image collage — 1 big + 2 smaller, asymmetric */
.brunch-images{
  position: relative;
  width: 100%;
  min-height: 420px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, 36px);
  gap: 12px;
}
@media (min-width: 768px){
  .brunch-images{
    min-height: 560px;
    grid-template-rows: repeat(10, 48px);
    gap: 16px;
  }
}
.brunch-img{
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.05);
}
.brunch-img--main{
  grid-column: 1 / 5;
  grid-row: 2 / 9;
}
.brunch-img--top{
  grid-column: 4 / 7;
  grid-row: 1 / 5;
}
.brunch-img--bottom{
  grid-column: 3 / 7;
  grid-row: 7 / 11;
}
@media (max-width: 767px){
  .brunch-img--main{
    grid-column: 1 / 6;
    grid-row: 2 / 7;
  }
  .brunch-img--top{
    grid-column: 4 / 7;
    grid-row: 1 / 4;
  }
  .brunch-img--bottom{
    grid-column: 3 / 7;
    grid-row: 6 / 9;
  }
}

/* ============================
   Editorial collage block
   (full-width, asymmetric, 3 imgs + text bottom-right)
   ============================ */
.editorial{
  position: relative;
  padding: 48px 24px 56px;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 768px){
  .editorial{ padding: 100px 56px 140px; }
}
.editorial-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .editorial-grid{
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 56px;
    gap: 28px;
  }
}

.editorial-kicker{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.editorial-headline{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(39px, 4.2vw, 56px);
  line-height: .94;
  letter-spacing: -.01em;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.editorial-body{
  font-family: var(--font-sans);
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 42ch;
}
.editorial-tag{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(18px, calc(16.4px + 0.44vw), 22px);
  margin: 22px 0 0;
  color: var(--primary);
  letter-spacing: -.01em;
}
.editorial-pull{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  margin: 6px 0 0;
  color: var(--ink);
  letter-spacing: -.01em;
  text-transform: none;
}
.editorial-schedule{
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 28px;
  display: grid;
  gap: 8px;
  max-width: 380px;
}
.editorial-schedule p{
  display: flex; justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 14px;
  margin: 0;
  gap: 24px;
}
.editorial-schedule p span:first-child{
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  font-size: 12px;
}
.editorial-schedule p span:last-child{
  font-weight: 700;
}

/* Images: drop image-slot defaults, let the grid place them */
.editorial-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(0,0,0,.05);
  --image-slot-radius: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 0;
}

/* Desktop placement — tall left, top-right, bottom-mid, text bottom-right */
@media (min-width: 900px){
  .editorial-img--tall  { grid-column: 1 / 7;  grid-row: 1 / 12; }
  .editorial-img--top   { grid-column: 7 / 13; grid-row: 2 / 8;  }
  .editorial-img--bot   { grid-column: 2 / 7;  grid-row: 12 / 17; }
  .editorial-text       {
    grid-column: 7 / 13;
    grid-row: 9 / 17;
    padding-left: 40px;
    align-self: start;
    padding-top: 8px;
  }
}

/* Mobile placement — natural stack */
@media (max-width: 899px){
  .editorial-img--tall  { aspect-ratio: 3/4; }
  .editorial-img--top   { aspect-ratio: 4/3; }
  .editorial-img--bot   { aspect-ratio: 4/3; }
  .editorial-text       { padding-top: 8px; }
}

/* Decorative scribbles (Caveat) — quiet character accents */
.editorial-mark{
  position: absolute;
  /* Las imágenes llevan transform (animación de entrada), lo que crea
     contexto de apilado y las pinta por encima de este absolute. El
     z-index explícito devuelve las marcas al frente. */
  z-index: 3;
  font-family: "Caveat", cursive;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  line-height: 1;
  opacity: .85;
}
.editorial-mark--1{
  top: 6%;
  right: 4%;
  font-size: clamp(40px, 6vw, 88px);
  transform: rotate(-6deg);
}
.editorial-mark--2{
  top: 36%;
  right: 18%;
  font-size: clamp(34px, 5vw, 72px);
  transform: rotate(8deg);
  color: var(--accent);
}
.editorial-mark--3{
  bottom: 38%;
  left: 38%;
  font-size: clamp(34px, 5vw, 70px);
  transform: rotate(-14deg);
  color: var(--primary);
}
@media (max-width: 899px){
  .editorial-mark{ display: none; }
}

/* ============================
   Diagonal scrolling ticker
   ============================ */
.ticker-section{
  padding: 40px 0;
  overflow: visible;
}
@media (min-width: 768px){
  .ticker-section{ padding: 56px 0; }
}

/* La banda usa skewY en vez de rotate: los bordes izquierdo y derecho
   se mantienen pegados al viewport, solo se inclinan arriba/abajo.
   Así no se ven esquinas del rectángulo. */
.ticker-band{
  background: var(--primary);
  color: var(--cream);
  transform: skewY(-2.5deg);
  padding: 16px 0;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.ticker-track{
  display: flex;
  width: max-content;
  animation: ticker-scroll 38s linear infinite;
  will-change: transform;
}
.ticker-group{
  display: flex;
  flex-shrink: 0;
}
.ticker-item{
  font-family: var(--font-display);
  /* 400 es el unico grosor real de la fuente: con 200 el navegador
     sintetizaba un fino falso que no casaba con los titulares. */
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(32px, 4.5vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.005em;
  white-space: nowrap;
  padding-right: 56px;
  display: inline-flex;
  align-items: center;
  /* El skew de la banda CIZALLA las letras, y eso es lo que las hacia
     parecer cursivas. Aqui se deshace ese cizallamiento y se sustituye
     por un giro real del mismo angulo: las palabras siguen la diagonal
     de la cinta, pero cada letra conserva su forma vertical.
     Se lee de derecha a izquierda: primero skewY (deshace), luego rotate. */
  transform: rotate(-2.5deg) skewY(2.5deg);
}
@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}

/* ============================
   Mood variants (motion / pacing)
   ============================ */
body.mood-slow{
  --reveal-duration: 1300ms;
  --reveal-delay-step: 110ms;
  --reveal-offset: 36px;
}
body.mood-standard{
  --reveal-duration: 900ms;
  --reveal-delay-step: 70ms;
  --reveal-offset: 28px;
}
body.mood-club{
  --reveal-duration: 650ms;
  --reveal-delay-step: 45ms;
  --reveal-offset: 44px;
}
body.mood-club .hero-title{ letter-spacing: -.01em; }
body.mood-club .display-pitch h2,
body.mood-club .pitch h2,
body.mood-club .slow-title{ transform: skewX(-3deg); }
body.mood-slow .pitch h2,
body.mood-slow .slow-title{ letter-spacing: .02em; }

[data-reveal]{
  transition-duration: var(--reveal-duration, 400ms) !important;
  transform: translateY(var(--reveal-offset, 12px));
}

/* ============================
   Hero layout variants
   ============================ */

/* SPLIT — default; nothing extra */

/* STACKED — title above, photo below, full width */
body.hero-stacked .hero-grid{
  grid-template-columns: 1fr;
  max-width: 1100px;
}
body.hero-stacked .hero-text{
  aspect-ratio: auto;
  background: transparent;
  text-align: center;
  align-items: center;
  padding: 24px 0 32px;
}
body.hero-stacked .hero-title{
  font-size: clamp(96px, 18vw, 240px);
}
body.hero-stacked .hero-schedule,
body.hero-stacked .hero-loc{ text-align: center; }
body.hero-stacked .hero-links{
  justify-content: center; gap: 40px;
}
body.hero-stacked .hero-image{
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 70vh;
}

/* FULL BLEED — photo full width, text overlaid */
body.hero-fullbleed .hero{ padding: 0; }
body.hero-fullbleed .hero-grid{
  grid-template-columns: 1fr;
  max-width: none;
  position: relative;
}
body.hero-fullbleed .hero-image{
  aspect-ratio: 21 / 9;
  height: auto;
  max-height: 85vh;
}
body.hero-fullbleed .hero-image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
body.hero-fullbleed .hero-text{
  position: absolute; inset: auto 0 0 0;
  background: transparent;
  aspect-ratio: auto;
  padding: 40px 32px;
  color: #fff;
  z-index: 2;
}
body.hero-fullbleed .hero-title,
body.hero-fullbleed .hero-schedule,
body.hero-fullbleed .hero-loc,
body.hero-fullbleed .hero-links a{ color: #fff; }
body.hero-fullbleed .hero-links a{ border-bottom-color: rgba(255,255,255,.7); }
body.hero-fullbleed .hero-links a:hover{ color: var(--accent); border-color: var(--accent); }
body.hero-fullbleed .hero-title{
  font-size: clamp(72px, 11vw, 180px);
  text-align: left;
}
body.hero-fullbleed .hero-seal{
  right: 24px; bottom: auto; top: 24px;
}
@media (min-width:768px){
  body.hero-fullbleed .hero-seal{ right: 32px; top: 32px; }
}


/* ============================
   PRODUCTO — headline + foto vertical + foto pequeña + párrafo (cajas 01/02)
   ============================ */
.quality{
  /* 24px de lateral como el resto de secciones (.pitch, .slow, .editorial). */
  padding: 40px 24px 40px;
  overflow: hidden;
}
@media (min-width:900px){
  .quality{ padding: 140px 40px 60px; }
}
.quality-grid{
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.quality-headline{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(2.35rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.quality-body{
  font-family: var(--font-sans);
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.65;
  color: var(--ink);
  max-width: 46ch;
  margin: 0;
}
.q-box{
  width: 100%;
  background: var(--cream);
  border: 2px dashed rgba(0,0,0,.28);
  display: grid;
  place-content: center;
}
/* Caja con foto real: sin borde discontinuo y sin centrado, la imagen
   rellena el hueco recortando por el centro (la proporción la fija el
   aspect-ratio en línea de cada caja). */
.q-box.has-photo{
  display: block;
  background: none;
  border: 0;
  overflow: hidden;
}
.q-box.has-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gx-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

/* ---- Mobile: texto arriba, foto grande, hueco, foto 2, párrafo ----
   Sin sangrado: por debajo de 900px esto es una sola columna, así que el
   24% de la versión de escritorio (donde encaja con la retícula de 12)
   aquí solo empujaba el titular contra el borde derecho. */
/* Desde que la foto grande va delante del titular en el HTML, el margen
   solo inferior dejaba el titulo pegado (y solapado) a la imagen. */
.quality-headline{
  position: relative;
  z-index: 2;
  margin-top: 32px;
  margin-bottom: 18px;
}
.quality-img--tall{ z-index: 1; }
.quality-img--small{ margin-top: 28px; }
.quality-body{ margin-top: 0; }

/* Moviles muy estrechos (iPhone SE y similares): a 44px palabras largas
   como "hamburgueseria" no caben en 320px de ancho. Se baja un escalon
   solo aqui; de 360px en adelante se mantiene el tamano grande. */
@media (max-width: 359px){
  .pitch h2,
  .slow-headline,
  .quality-headline,
  .story-headline{ font-size: 2rem; }
  .editorial-headline{ font-size: 33px; }
}

/* ---- Desktop ---- */
@media (min-width:900px){
  .quality-grid{
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
  }
  /* La foto grande ocupa la mitad y solo sangra 20px por la izquierda: con
     los -60px de antes la seccion quedaba 350px descentrada hacia la
     izquierda. La foto pequena llena su columna para que el bloque cierre
     a la misma altura que la retícula y los margenes queden parejos. */
  .quality-img--tall{
    flex: 0 0 50%;
    margin-top: -40px;
    margin-left: -20px;
  }
  .quality-right{
    flex: 1;
    min-width: 0;
    padding-top: 0;
  }
  .quality-headline{
    margin: 0 0 20px;
  }
  .quality-body{
    margin-top: 0;
  }
  /* La foto 02 es vertical (2/3), asi que a todo el ancho de la columna
     saldria mas alta que la foto principal. Se estrecha para que siga
     siendo secundaria y se alinea a la derecha para que el bloque cierre
     con la reticula y los margenes queden parejos. */
  /* Alineada a la izquierda, a ras del titular y del parrafo: pegada a la
     derecha quedaba flotando y desconectada del texto. Se ensancha un poco
     para compensar el hueco que deja al desplazarse. */
  .quality-img--small{
    margin-top: 20px;
    max-width: 85%;
    margin-left: 0;
  }
}

/* ---- Tablet (768–1179): retícula de 6 ----
   La de 12 columnas necesita ~1360px de lienzo; a 1024 dejaba el párrafo en
   294px (~40 caracteres) y a 120px por debajo de su foto. Con 6 columnas
   el párrafo va pegado a la foto 02 y las dos columnas cierran a la par.
   Arranca en 768 (y no en 900) para que el iPad Air, que son 820, deje de
   caer en la columna única de móvil. */
@media (min-width:768px) and (max-width:899px){
  .quality{ padding: 96px 40px 80px; }
  .quality-grid{
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: flex-start;
  }
  .quality-img--tall{
    flex: 0 0 45%;
  }
  .quality-right{
    flex: 1;
  }
  .quality-headline{
    margin: 0 0 20px;
  }
  .quality-body{
    margin-top: 0;
  }
  .quality-img--small{
    margin-top: 20px;
  }
}

/* ============================
   EL CLUB — cajas 03/04/05 (foto ancha + titular + nota manuscrita + 2 fotos + párrafo)
   ============================ */
.story{
  /* 24px de lateral como el resto de secciones. */
  padding: 40px 24px 56px;
  overflow: hidden;
}
@media (min-width:900px){
  .story{ padding: 80px 40px 150px; }
}
.story-inner{
  max-width: 1360px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
}
.story-headline{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(2.35rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.story-mark{
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.story-body{
  font-family: var(--font-sans);
  font-size: clamp(15px, calc(14.2px + 0.22vw), 17px);
  line-height: 1.65;
  color: var(--ink);
  max-width: 44ch;
  margin: 0;
}

/* ---- Mobile: 04 · titular (nota vertical al margen) · 03 · 05 · párrafo ---- */
.story-img--04{ order: 1; }
.story-headline{ order: 2; margin: 32px 12% 32px 0; position: relative; z-index: 1; }
.story-mark{
  order: 0;
  position: absolute;
  right: 6px;
  top: 46%;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top right;
  font-size: clamp(22px, 5.6vw, 30px);
}
.story-img--03{ order: 3; }
.story-img--05{ order: 4; margin-top: 32px; }
.story-body{ order: 5; margin-top: 24px; }

/* ---- Desktop: retícula suelta ---- */
@media (min-width:900px){
  .story-inner{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .story-img--03{
    grid-column: 1 / 6;
    grid-row: 1 / span 3;
  }
  .story-headline{
    grid-column: 6 / 13;
    grid-row: 1;
    margin: 0;
    padding-bottom: 56px;
  }
  .story-mark{
    position: static;
    grid-column: 8 / 13;
    grid-row: 2;
    justify-self: end;
    transform: rotate(-24deg);
    margin: 20px 40px 30px 0;
    font-size: clamp(30px, 3.2vw, 48px);
  }
  .story-img--04{
    grid-column: 6 / 13;
    grid-row: 3;
  }
  .story-img--05{
    grid-column: 1 / 7;
    grid-row: 4;
    margin-top: 48px;
    margin-left: -60px;
  }
  .story-body{
    /* 7/11: dentro del ancho de la foto 04 pero desplazado ~115px de su
       borde, para romper la simetría sin irse a la esquina derecha como
       hacía el 9/13 original. Con margin-left en vez de columna el párrafo
       se estrechaba (416 → 368px), por eso se mueve la columna. */
    grid-column: 7 / 11;
    grid-row: 4;
    align-self: center;
    margin-top: 0;
  }
}

/* ---- Tablet (768–1179): retícula de 6 ----
   Mismo criterio que en .quality. Aquí el párrafo va bajo la foto 03
   (columna izquierda) y la 05 pasa a la derecha bajo la 04: así las dos
   columnas cierran casi a la misma altura en vez de dejar el hueco de
   ~250px que quedaba bajo el párrafo. */
@media (min-width:768px) and (max-width:1179px){
  .story{ padding: 72px 40px 110px; }
  .story-inner{
    display: grid;
    align-items: start;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 24px;
  }
  .story-headline{
    grid-column: 1 / 7;
    grid-row: 1;
    margin: 0 0 40px;
  }
  /* La 03 es vertical (3/4) y la 04/05 apaisadas: si la 03 ocupa una sola
     fila, esa fila mide lo que ella y abre un hueco de ~290px entre la 04
     y la 05. Abarcando dos filas, las dos columnas cierran casi a la par. */
  .story-img--03{
    grid-column: 1 / 4;
    grid-row: 2 / span 2;
    margin-top: 0;
  }
  .story-img--04{
    grid-column: 4 / 7;
    grid-row: 2;
    margin-top: 0;
  }
  .story-img--05{
    grid-column: 4 / 7;
    grid-row: 3;
    margin-top: 24px;
  }
  .story-body{
    grid-column: 1 / 4;
    grid-row: 4;
    margin-top: 24px;
    align-self: start;
    max-width: none;
  }
}

/* ============================
   FULLSCREEN NAV OVERLAY
   ============================ */
/* El logo (top) se queda pegado arriba. El bloque menu+botones se centra
   en el espacio libre que queda por debajo con dos margenes "auto" (uno
   antes del menu, otro despues de los botones): el hueco se reparte a
   partes iguales, asi que reservas/pedidos quedan a media altura en vez
   de pegados abajo. Idioma/direccion/telefono/redes se quedan juntos
   como pie, sin hueco extra entre ellos. */
.nav-overlay{
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 32px;
  background: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms cubic-bezier(0.32, 0.72, 0, 1);
  /* allow the panel to scroll when it's taller than the screen */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
body.menu-open{ overflow: hidden; }

/* Top bar */
/* El logo va centrado de verdad: la X se saca del flujo con position
   absolute, si no el space-between la desplazaba hacia la izquierda. */
.nav-overlay-top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 56px;
  position: relative;
  z-index: 2;
}
.nav-overlay-top .nav-overlay-close{
  position: absolute;
  top: 50%;
  right: 0;
  /* El 50% incluye el padding-top del contenedor, asi que hay que
     compensar la mitad de ese padding para quedar centrado con el logo. */
  margin-top: 28px;
  transform: translateY(-50%);
}
/* El hover de abajo giraba el boton con un transform que SUSTITUIA al
   translateY, y el boton saltaba hacia abajo justo al ir a pulsarlo.
   Hay que repetir el translateY en el hover para que solo gire. */
.nav-overlay-top .nav-overlay-close:hover,
.nav-overlay-top .nav-overlay-close:focus-visible{
  transform: translateY(-50%) rotate(90deg);
}
.nav-overlay-brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.nav-overlay-brand img{
  width: 88px; height: 88px;
  display: block;
}
@media (min-width: 768px){
  .nav-overlay-brand img{ width: 104px; height: 104px; }
}
.nav-overlay-brand:hover{ transform: rotate(20deg); }
.nav-overlay-close{
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: #fff;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-overlay-close:hover{
  background: var(--cream);
  color: var(--primary);
  transform: rotate(90deg);
}

/* Menu list */
.nav-overlay-menu{
  align-self: center;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 16px 0;
  /* Empuja el bloque menu+botones hacia abajo desde el logo; combinado
     con el margin-bottom:auto de los botones, el hueco se reparte a
     partes iguales y el conjunto queda centrado, no pegado abajo. */
  margin-top: auto;
}
.nav-overlay-menu ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 18px;
}
@media (min-width: 768px){
  .nav-overlay-menu ul{ gap: 26px; }
}
.nav-overlay-menu a{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(28px, 5.4vw, 88px);
  line-height: 1;
  letter-spacing: -.005em;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  transition: color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  opacity: 0;
  transform: translateY(20px);
}
.nav-overlay.is-open .nav-overlay-menu a{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .5s cubic-bezier(.2,.7,.2,1) var(--menu-delay, 0ms),
    transform .55s cubic-bezier(.2,.7,.2,1) var(--menu-delay, 0ms),
    color .2s ease;
}
.nav-overlay-menu li:nth-child(1) a{ --menu-delay: 80ms; }
.nav-overlay-menu li:nth-child(2) a{ --menu-delay: 130ms; }
.nav-overlay-menu li:nth-child(3) a{ --menu-delay: 180ms; }
.nav-overlay-menu li:nth-child(4) a{ --menu-delay: 230ms; }
.nav-overlay-menu li:nth-child(5) a{ --menu-delay: 280ms; }
.nav-overlay-menu li:nth-child(6) a{ --menu-delay: 330ms; }
.nav-overlay-menu li:nth-child(7) a{ --menu-delay: 380ms; }
.nav-overlay-menu a:hover{ color: var(--accent); }

/* Short viewports: compact the whole panel so it fits without feeling huge */
/* Pantallas de poca altura (portatiles bajos, movil en horizontal).
   Este bloque se escribio cuando el menu tenia 7 opciones y habia que
   apretarlo mucho; ahora son 4, asi que se puede dar bastante mas aire
   sin que nada se salga. */
@media (max-height: 760px){
  .nav-overlay{ padding: 16px 24px 24px; }
  .nav-overlay-top{ padding-top: 24px; }
  .nav-overlay-top .nav-overlay-close{ margin-top: 12px; }
  .nav-overlay-brand img{ width: 64px; height: 64px; }
  .nav-overlay-menu{ padding: 16px 0; }
  .nav-overlay-menu ul{ gap: 14px; }
  .nav-overlay-menu a{ font-size: clamp(24px, 4.6vh, 40px); }
  .nav-overlay-ctas{ margin-top: 20px; }
  .nav-overlay-lang{ padding: 10px 0 0; }
  .nav-overlay-lang button,
  .nav-overlay-lang a{ font-size: 16px; }
  .nav-overlay-address{ margin-top: 10px; }
  .nav-overlay-social{ margin-top: 10px; }
}

/* Alturas muy pequenas (movil en horizontal): aqui si hace falta apretar,
   o el bloque de contacto se sale de la pantalla. */
@media (max-height: 480px){
  .nav-overlay{ padding: 10px 24px 16px; }
  .nav-overlay-top{ padding-top: 8px; }
  .nav-overlay-top .nav-overlay-close{ margin-top: 4px; }
  .nav-overlay-brand img{ width: 44px; height: 44px; }
  .nav-overlay-menu{ padding: 6px 0; }
  .nav-overlay-menu ul{ gap: 6px; }
  .nav-overlay-menu a{ font-size: clamp(20px, 5.2vh, 30px); }
  .nav-overlay-ctas{ margin-top: 10px; gap: 10px; }
  .nav-overlay-ctas .btn-pill{ padding: 9px 20px; font-size: 12px; }
  .nav-overlay-lang{ padding: 6px 0 0; }
  .nav-overlay-address,
  .nav-overlay-phone{ margin-top: 4px; font-size: 12px; }
  .nav-overlay-social{ margin-top: 6px; }
}

/* Language switcher */
.nav-overlay-lang{
  display: flex;
  justify-content: center;
  gap: 36px;
  position: relative;
  z-index: 2;
  padding: 12px 0 0;
}
.nav-overlay-lang button,
.nav-overlay-lang a{
  appearance: none; border: 0; background: transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
  padding: 6px 2px;
  transition: color .2s ease, transform .2s ease;
}
.nav-overlay-lang button.is-active,
.nav-overlay-lang a.is-active{
  color: #fff;
}
.nav-overlay-lang button:hover,
.nav-overlay-lang a:hover{ color: var(--accent); transform: translateY(-1px); }

/* Address */
.nav-overlay-address{
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #fff;
  letter-spacing: .02em;
}

/* Botones de reserva y pedidos dentro del menu.
   Version clara: el fondo del overlay ya es verde, asi que el pill lleno
   de --primary no se veria. */
.nav-overlay-ctas{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 auto;
}
.btn-pill--light{
  background: var(--cream);
  color: var(--primary);
  box-shadow: 6px 6px 0 rgba(0,0,0,.22);
}
.btn-pill--light:hover,
.btn-pill--light:focus-visible{
  background: #fff;
  color: var(--primary);
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 rgba(0,0,0,.28);
}

.nav-overlay-phone{
  position: relative;
  z-index: 2;
  margin: 6px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .02em;
}
.nav-overlay-phone a{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 1px;
}
.nav-overlay-phone a:hover{ border-bottom-color: #fff; }

/* Social icons */
.nav-overlay-social{
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 22px;
}
.nav-overlay-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav-overlay-social a:hover{
  background: #fff;
  border-color: #fff;
  color: var(--primary);
  transform: translateY(-3px);
}

/* ============================
   FOOTER
   ============================ */
.site-footer{
  border-top:1px solid var(--border);
  background:rgba(229,225,222,.5);
}
.site-footer-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:32px;
  padding:48px 24px;
}
@media (min-width:768px){
  .site-footer-grid{
    grid-template-columns: auto repeat(3, 1fr);
    gap:48px;
    padding:60px 40px;
  }
}
.site-footer h3{
  font-size:22px;
  margin-bottom:12px;
}
.site-footer p, .site-footer li, .site-footer a{
  font-size:14px;
  line-height:1.7;
}
.site-footer ul{ margin:0; padding:0; list-style:none; }
.site-footer a{ text-decoration:underline; text-underline-offset:4px; }
/* Área táctil: de 17px de alto a 38. Solo en vertical (hay 40px libres
   entre enlaces); en horizontal "Aviso legal" y "Privacidad" comparten
   línea y se tocarían. El margen negativo deja el layout como estaba.
   7px y no más: el padding se suma a la caja de línea (23.8px), así que
   con 10px salían 44 y los dos primeros enlaces se pisaban. */
.site-footer a{
  display: inline-block;
  padding-block: 7px;
  margin-block: -7px;
}
.site-footer .copy{
  border-top:1px solid var(--border);
  text-align:center;
  padding:20px 24px;
  font-size:12px;
  color:var(--ink-soft);
}

/* ============================
   CARTA page
   ============================ */
:root{
  --accent-pink: var(--accent);    /* repurposed: orange accent for pink-tagged sections */
  --veg-dot:     #18A14B;          /* vegetarian indicator */
}

/* Legacy classes still used elsewhere (page-title / page-sub) */
.page-title{
  text-align:center;
  font-size: clamp(56px, 10vw, 132px);
  margin: 32px auto 8px;
  padding: 0 24px;
}
.page-sub{
  text-align:center;
  color:var(--ink-soft);
  font-size:15px;
  margin-bottom:48px;
  padding:0 24px;
}

/* ─── Page shell ───────────────────────────────────────────────── */
.carta-page{
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 20px 80px;
}
@media (min-width: 768px){
  .carta-page{ padding: 96px 40px 100px; }
}

.carta-pagetitle{
  font-family: var(--font-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  font-size: clamp(64px, 11vw, 152px);
  line-height: .9;
  letter-spacing: -.01em;
  margin: 0 0 24px;
}
@media (min-width: 768px){
  .carta-pagetitle{ margin: 0 0 36px; }
}


/* ─── Intro manifesto ──────────────────────────────────────────── */
.carta-intro{
  max-width: 740px;
  margin: 0 auto 36px;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.55;
  color: var(--ink);
}
@media (min-width: 768px){
  .carta-intro{ font-size: 15px; margin-bottom: 48px; }
}

/* ─── Section jump nav (chips) ─────────────────────────────────── */
.carta-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 56px;
  max-width: 920px;
}
.carta-nav a{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--primary);
  padding: 8px 16px;
  border: 1px solid var(--primary);
  border-radius: 9999px;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.carta-nav a:active{ transform: scale(0.97); }
.carta-nav a:hover{
  background: var(--primary);
  color: var(--cream);
  transform: translateY(-1px);
}

/* ─── Grid layout ──────────────────────────────────────────────── */
.carta-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Desde 768 y no desde 900: el iPad Air (820) y el Pro en vertical (1024)
   caían en columna única de 725px. */
@media (min-width: 768px){
  .carta-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 40px;
    align-items: start;
  }
  /* Extras card + Niños span both columns, full width at the end */
  .carta-grid > #extras,
  .carta-grid > #ninos{
    grid-column: 1 / -1;
  }
}
@media (min-width: 900px){
  .carta-grid{ gap: 64px 56px; }
}
@media (min-width: 1180px){
  .carta-grid{
    gap: 72px 80px;
    align-items: start;
  }
}

/* ─── Section headings ─────────────────────────────────────────── */
.carta-section h2{
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--primary);
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 200;
  line-height: .92;
  margin: 0 0 22px;
  letter-spacing: -.01em;
}
.carta-section h2 .h2-sub{
  display: inline-block;
  margin-left: 10px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink);
  vertical-align: middle;
  font-weight: 600;
}
.carta-section--pink h2{ color: var(--accent-pink); }

.section-lede{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .03em;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 26px;
  max-width: 70ch;
}

/* ─── Dish list ────────────────────────────────────────────────── */
.dish-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 22px;
}
.dish-list > li{
  font-family: var(--font-sans);
}
.dish-list h3{
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .03em;
  color: var(--ink);
  margin: 0 0 2px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  line-height: 1.2;
}
@media (min-width: 900px){
  .dish-list{ gap: 26px; }
  .dish-list h3{ font-size: 19px; }
}

.dish-desc{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  /* Sin tope, en la columna única de tablet la línea llegaba a 106
     caracteres. Lo cómodo son 45–75. */
  max-width: 62ch;
  margin: 0 0 2px;
}
.dish-price{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--ink);
  margin: 4px 0 0;
}
.dish-price span{ color: var(--primary); }
.dish-price em{ font-style: normal; color: var(--ink-soft); padding: 0 4px; }
.dish-price b{ color: var(--primary); }

.dish-extras,
.dish-options{
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.dish-extras li{ padding-left: 14px; position: relative; }
.dish-extras li::before{
  content: ""; position: absolute; left: 0; top: .7em;
  width: 7px; height: 1px; background: var(--ink);
}
.dish-options li{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  padding: 1px 0;
}
.dish-options b,
.dish-extras b{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--primary);
  white-space: nowrap;
}

/* ─── Vegetarian / vegan badges ────────────────────────────────── */
.veg{
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--veg-dot);
  vertical-align: middle;
  margin: 0 2px;
}
.vegan{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--veg-dot);
  color: var(--veg-dot);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
}
.veg-legend{
  margin: 18px 0 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--accent-pink);
  display: inline-flex; align-items: center; gap: 8px;
}

/* ─── Pink info note ("El pan es pan") ─────────────────────────── */
.carta-note--pink{
  border-top: 1px solid var(--accent-pink);
  padding-top: 14px;
  margin: 0 auto;
  max-width: 560px;
  text-align: left;
}
.carta-note--pink h4{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--accent-pink);
  margin: 0 0 8px;
  font-weight: 400;
}
.carta-note--pink p{
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ─── Extras card (green block) ────────────────────────────────── */
.extras-card{
  background: var(--primary);
  color: var(--cream);
  padding: 32px 28px 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 600px){
  .extras-card{
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    padding: 40px 36px;
  }
}
@media (min-width: 900px){
  .extras-card{
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 40px;
  }
}
.extras-block h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  color: #fff;
  font-size: 32px;
  line-height: .92;
  margin: 0 0 12px;
  letter-spacing: -.005em;
}
.extras-block ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
}
.extras-block ul li{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.extras-block ul b{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #fff;
}

/* ─── Footer notes ─────────────────────────────────────────────── */
.carta-foot{
  margin: 64px auto 0;
  max-width: 920px;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 18px;
}
.carta-foot__highlight{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--accent-pink);
  margin: 0;
  font-weight: 400;
}
.carta-foot__highlight b{ font-weight: 400; }
.carta-foot__note{
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--accent-pink);
  line-height: 1.55;
  margin: 0;
}

/* ─── Mobile-only tweaks ───────────────────────────────────────── */
@media (max-width: 767px){
  .carta-section h2{ font-size: 38px; }
  .extras-block h3{ font-size: 28px; }
  .extras-card{ padding: 24px 20px; }
}

/* ============================
   CONTACTO page
   ============================ */
.contacto{
  max-width:1100px;
  margin:0 auto 100px;
  padding:0 24px;
  display:grid; gap:32px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .contacto{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (min-width:900px){
  .contacto{ gap:40px; }
}
.contacto-card{
  background:var(--cream);
  padding:40px 32px;
}
@media (min-width:768px){ .contacto-card{ padding:48px 44px; } }
.contacto-card h2{
  font-size:28px;
  margin-bottom:12px;
}
.contacto-card h2 + p{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:18px;
  line-height:1.4;
  margin:0 0 28px;
}
.contacto-card .links{
  list-style:none; padding:0; margin:0 0 24px;
  display:flex; flex-direction:column; gap:6px;
}
.contacto-card .links a{
  text-decoration:underline; text-underline-offset:4px;
}
.contacto-map{
  min-height:440px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--cream);
}
.contacto-map iframe{
  width:100%; height:100%; min-height:440px; display:block; border:0;
}