/* ============================================================
   Eli Kafea — hoja de estilos (v3, 11 de septiembre de 2026)
   Aplica el manual de identidad de la marca («Manual de identidad
   DEF.pdf», en la raíz del proyecto):
     · Colores: negro #000000 · verde #36604D · arena #FFF6E7 · marrón #432818
     · Títulos y logotipo: League Spartan · Texto: Lato
       (el manual pide Codec Pro para el texto, pero su licencia web
        es de pago; Lato está en el propio manual y es libre)
     · La flor verde de cinco pétalos, calcada del manual (--flor)
   ============================================================ */

:root {
  --arena:        #FFF6E7;   /* el fondo: el «blanco piedra» */
  --arena-clara:  #FFFBF4;
  --arena-honda:  #F5E9D4;   /* cajas y mapa */
  --negro:        #000000;
  --verde:        #36604D;   /* 6,7:1 sobre arena: sirve para texto */
  --verde-claro:  #A9CCB8;   /* SOLO sobre marrón o negro (7,7:1): ahí el verde de marca no se lee */
  --marron:       #432818;
  --texto:        #3B3129;   /* párrafos: 11,8:1 */
  --texto-mudo:   #6B5A4C;   /* notas y etiquetas: 6,1:1 (5,5:1 sobre arena honda) */
  --linea:        #E3D3B8;
  --hair:         color-mix(in srgb, var(--linea) 70%, transparent);

  --font-display: "League Spartan", "League Spartan Reserva", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Lato", "Lato Reserva", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* La flor de la marca. Se pinta con máscara: el color lo pone el background. */
  --flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M79.1 52.7C79.8 53.2 80.5 53.7 81.2 54.2C81.9 54.7 82.6 55.3 83.3 55.9C84.0 56.5 84.6 57.2 85.2 57.8C85.8 58.5 86.4 59.2 87.0 60.0C87.6 60.7 88.2 61.5 88.7 62.3C89.2 63.1 89.7 64.0 90.2 64.8C90.6 65.7 91.0 66.6 91.4 67.5C91.8 68.4 92.2 69.4 92.5 70.3C92.8 71.3 93.0 72.3 93.2 73.2C93.4 74.2 93.5 75.2 93.5 76.1C93.6 77.1 93.5 78.1 93.4 79.0C93.3 79.9 93.2 80.9 92.9 81.8C92.7 82.6 92.3 83.5 91.9 84.2C91.5 85.0 90.9 85.7 90.4 86.4C89.8 87.0 89.1 87.7 88.4 88.2C87.7 88.7 86.9 89.1 86.0 89.4C85.2 89.8 84.2 90.0 83.3 90.2C82.3 90.3 81.4 90.4 80.4 90.4C79.4 90.4 78.3 90.3 77.3 90.2C76.2 90.0 75.2 89.7 74.1 89.3C73.0 88.9 71.9 88.4 70.8 87.8C69.7 87.1 68.6 86.3 67.5 85.4C66.4 84.4 65.3 83.4 64.3 82.3C63.3 81.1 62.3 79.7 61.4 78.5C60.5 77.3 59.7 76.1 59.0 75.0C58.2 74.0 57.6 72.5 57.1 72.3C56.7 72.2 56.6 73.4 56.4 74.3C56.1 75.2 55.9 76.5 55.6 77.7C55.3 78.9 54.9 80.3 54.5 81.6C54.0 82.9 53.5 84.3 53.0 85.5C52.4 86.8 51.8 88.0 51.1 89.1C50.4 90.2 49.6 91.2 48.8 92.1C48.1 93.0 47.2 93.8 46.4 94.4C45.5 95.1 44.6 95.6 43.8 96.1C42.9 96.6 41.9 97.0 41.0 97.3C40.1 97.6 39.2 97.8 38.3 97.9C37.4 98.0 36.5 98.0 35.6 98.0C34.7 98.0 33.8 97.8 33.0 97.6C32.2 97.4 31.4 97.0 30.6 96.6C29.9 96.2 29.2 95.6 28.5 95.0C27.9 94.4 27.3 93.7 26.8 93.0C26.3 92.2 25.9 91.4 25.5 90.5C25.1 89.7 24.9 88.7 24.7 87.7C24.4 86.7 24.3 85.7 24.3 84.6C24.2 83.5 24.2 82.5 24.4 81.3C24.6 80.1 24.9 78.9 25.3 77.7C25.7 76.4 26.1 75.2 26.8 73.9C27.4 72.7 28.2 71.3 29.0 70.1C29.8 68.9 30.7 67.7 31.5 66.7C32.3 65.6 33.4 64.5 33.6 63.9C33.8 63.3 33.8 63.0 32.6 63.1C31.5 63.1 28.8 64.0 27.0 64.3C25.1 64.6 23.2 64.8 21.5 64.8C19.9 64.8 18.4 64.6 17.0 64.4C15.7 64.2 14.4 63.8 13.3 63.4C12.1 62.9 11.1 62.4 10.2 61.8C9.3 61.2 8.6 60.6 7.9 59.9C7.2 59.2 6.6 58.4 6.1 57.6C5.7 56.9 5.3 56.1 5.0 55.2C4.7 54.4 4.6 53.6 4.5 52.7C4.4 51.9 4.3 51.0 4.3 50.2C4.4 49.3 4.4 48.5 4.6 47.6C4.8 46.8 5.0 46.0 5.3 45.2C5.6 44.4 5.9 43.6 6.3 42.8C6.7 42.0 7.2 41.3 7.7 40.6C8.2 39.9 8.9 39.2 9.5 38.6C10.2 38.0 10.9 37.4 11.7 36.9C12.4 36.3 13.3 35.9 14.2 35.5C15.2 35.1 16.1 34.7 17.1 34.5C18.1 34.2 19.1 33.9 20.2 33.8C21.3 33.7 22.5 33.6 23.7 33.7C24.9 33.8 26.1 33.8 27.7 34.4C29.3 34.9 31.8 36.2 33.3 36.8C34.8 37.4 36.3 38.3 36.7 38.0C37.0 37.8 35.8 36.2 35.6 35.3C35.3 34.4 35.1 33.6 35.0 32.7C34.8 31.8 34.7 31.0 34.6 30.1C34.5 29.1 34.5 28.2 34.4 27.2C34.4 26.2 34.3 25.1 34.3 24.0C34.3 22.9 34.4 21.8 34.4 20.6C34.5 19.4 34.5 18.1 34.7 16.9C34.8 15.6 35.0 14.3 35.3 13.1C35.6 11.9 36.0 10.8 36.5 9.7C36.9 8.7 37.5 7.7 38.1 6.9C38.7 6.0 39.3 5.2 40.0 4.5C40.8 3.8 41.6 3.3 42.4 2.8C43.2 2.4 44.1 2.1 44.9 2.0C45.8 1.9 46.7 1.9 47.6 2.1C48.6 2.2 49.5 2.6 50.4 3.1C51.3 3.6 52.2 4.3 53.0 5.2C53.8 6.1 54.6 7.1 55.3 8.5C56.0 9.9 56.7 11.2 57.1 13.5C57.5 15.8 57.6 19.8 57.8 22.2C58.0 24.7 58.0 26.6 58.2 28.1C58.4 29.6 58.5 30.4 58.8 31.1C59.0 31.8 59.1 32.4 59.6 32.3C60.1 32.1 60.9 31.0 61.6 30.2C62.4 29.4 63.2 28.6 64.1 27.7C65.0 26.8 66.0 25.9 67.1 25.0C68.1 24.2 69.3 23.3 70.4 22.6C71.5 21.8 72.7 21.1 73.8 20.6C74.9 20.1 76.0 19.7 77.1 19.5C78.2 19.2 79.3 19.0 80.4 18.9C81.4 18.8 82.5 18.8 83.5 18.9C84.5 18.9 85.4 19.1 86.4 19.3C87.3 19.6 88.1 19.9 88.9 20.3C89.7 20.7 90.5 21.2 91.2 21.7C91.9 22.3 92.6 22.9 93.2 23.5C93.7 24.2 94.2 24.9 94.5 25.7C94.9 26.5 95.3 27.3 95.4 28.2C95.6 29.1 95.7 30.0 95.7 31.0C95.6 31.9 95.5 32.9 95.3 33.9C95.0 34.9 94.7 35.9 94.2 36.9C93.8 37.9 93.4 38.8 92.7 39.8C92.0 40.8 91.1 41.8 90.1 42.8C89.1 43.7 88.0 44.7 86.8 45.5C85.5 46.4 84.0 47.3 82.7 48.0C81.3 48.8 79.7 49.4 78.7 50.0C77.8 50.6 76.9 51.0 77.0 51.5C77.0 51.9 78.4 52.3 79.1 52.7Z'/%3E%3C/svg%3E");

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4.5vw, 3.5rem);
  --barra: 4.25rem;   /* alto de la barra fija, para los anclajes */
  --r: 4px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.22, 1, .3, 1);
}

/* ---------- reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra) + 1rem);
}
section[id], main[id] { scroll-margin-top: calc(var(--barra) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--arena);
  color: var(--negro);
  font-family: var(--font-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grano muy leve: quita el plano digital sin ensuciar */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, iframe { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 1.1em; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--verde); color: var(--arena); }

a, button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn:active { transform: scale(.97); transition-duration: .08s; }
  .galeria__strip .ph:active img { transform: scale(.98); transition-duration: .1s; }
  .nav__mobile a:active { color: var(--verde); }
}

:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--arena), 0 0 0 7px var(--negro);
  border-radius: 2px;
}
.goxo :focus-visible,
.cierre :focus-visible,
.footer :focus-visible,
.visor :focus-visible {
  outline-color: var(--verde-claro);
  box-shadow: 0 0 0 5px rgba(0,0,0,.85), 0 0 0 7px var(--verde-claro);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--negro); color: var(--arena);
  padding: .75rem 1.25rem; font-size: .9rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(5rem, 11vw, 10rem); }
.muted { color: var(--texto-mudo); }

/* ============================================================
   LA FLOR
   ============================================================ */
.flor {
  display: block;
  background: var(--verde);
  -webkit-mask: var(--flor) center / contain no-repeat;
          mask: var(--flor) center / contain no-repeat;
}

/* ---------- LOGOTIPO ----------
   «Eli kafea.» en League Spartan, con la flor arriba a la derecha:
   así va en la bolsa, el uniforme y la firma del manual.
   Si llega el logo original en vectorial, se sustituye por <img>. */
.logotipo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .9;
  display: inline-block;
  white-space: nowrap;
}
.logotipo::after {
  content: "";
  display: inline-block;
  width: .38em; height: .38em;
  margin-left: -.02em;
  vertical-align: .5em;
  background: var(--verde);
  -webkit-mask: var(--flor) center / contain no-repeat;
          mask: var(--flor) center / contain no-repeat;
}
.logotipo--sm { font-size: 1.3rem; }
.dot { color: inherit; }   /* el punto del logo va del mismo color que las letras */

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1, h2 { font-family: var(--font-display); }
h2 {
  font-size: clamp(2.6rem, 1.3rem + 4.6vw, 4.8rem);
  line-height: .95;
  letter-spacing: -.04em;
  margin-bottom: .6em;
}
/* League Spartan no tiene cursiva: el énfasis es el color */
h1 em, h2 em { font-style: normal; color: var(--verde); }

/* Etiqueta de sección, numerada en las secciones principales */
main { counter-reset: sec; }
.section { counter-increment: sec; }
.eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-mudo);
  margin: 0 0 1.5rem;
}
.section .eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: 0;
  color: var(--verde);
}
.eyebrow::after {
  content: "";
  flex: 0 0 2rem;
  height: 1px;
  background: var(--linea);
}

.section__head { max-width: 52ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; max-width: none; flex-wrap: wrap;
}
.section__head--row h2 { margin-bottom: 0; }
.section__intro {
  color: var(--texto);
  font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
}

/* ============================================================
   BOTONES Y ENLACES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: 1.05rem 1.8rem .95rem;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid var(--negro);
  border-radius: 100px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
  white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  cursor: pointer;
}
/* el relleno sube desde abajo */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
@media (hover: none) { .btn::before { display: none; } }

.btn--primary { background: var(--negro); color: var(--arena); }
.btn--primary::before { background: var(--verde); }
.btn--primary:hover { border-color: var(--verde); }
.btn--ghost { background: transparent; color: var(--negro); }
.btn--ghost::before { background: var(--negro); }
.btn--ghost:hover { color: var(--arena); }
/* sobre fondo oscuro (marrón o negro) */
.btn--claro { background: var(--arena); border-color: var(--arena); color: var(--negro); }
.btn--claro::before { background: var(--verde-claro); }
.btn--claro:hover { border-color: var(--verde-claro); }
.btn--outline { background: transparent; border-color: rgba(255,246,231,.45); color: var(--arena); }
.btn--outline::before { background: rgba(255,246,231,.12); }
.btn--outline:hover { border-color: var(--arena); }
.btn--sm { padding: .75rem 1.25rem .68rem; font-size: .72rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: .3rem;
  border-bottom: 1.5px solid var(--negro);
  transition: gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover { gap: .95rem; color: var(--verde); border-color: var(--verde); }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--arena) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--hair); }

@media (max-width: 980px) {
  .nav { transition: transform .35s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
  .nav.nav--fuera { transform: translateY(-105%); }
  .nav.nav--fuera:focus-within { transform: none; }
}

.nav__inner {
  max-width: var(--wrap); margin-inline: auto;
  min-height: var(--barra);
  padding: .5rem var(--gut);
  display: flex; align-items: center; gap: 2.5rem;
}
.nav__brand { text-decoration: none; margin-right: auto; }

.nav__links { display: flex; gap: 2rem; }
.nav__links a {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto);
  position: relative; padding-block: .35rem;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--verde);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--negro); }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active { color: var(--negro); }

.nav__right { display: flex; align-items: center; gap: 1.5rem; }
/* la llamada de la barra es un enlace discreto, no un botón */
.nav__right .btn {
  border: 0; border-radius: 0; padding: .35rem 0 .25rem;
  border-bottom: 1.5px solid var(--negro);
  background: transparent; color: var(--negro);
  font-size: .74rem;
}
.nav__right .btn::before { display: none; }
.nav__right .btn:hover { color: var(--verde); border-color: var(--verde); }

.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-mudo); }
.status.is-open .status__dot { background: var(--verde); animation: pulse 2.4s infinite; }
.status.is-closed .status__dot { background: #B0463A; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(54,96,77,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(54,96,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,96,77,0); }
}
@media (prefers-reduced-motion: reduce) { .status.is-open .status__dot { animation: none; } }

.idiomas {
  display: flex; align-items: center; gap: .4rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em;
}
.idiomas__actual { color: var(--negro); }
.idiomas__sep { color: var(--linea); font-weight: 400; }
.idiomas a { color: var(--texto-mudo); text-decoration: none; transition: color .2s var(--ease); }
.idiomas a:hover { color: var(--verde); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  background: none; border: 1.5px solid var(--linea); border-radius: 50%;
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--negro);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav__mobile {
  display: flex; flex-direction: column;
  padding: .5rem var(--gut) 2rem;
  border-top: 1px solid var(--hair);
  background: var(--arena);
}
.nav__mobile a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -.03em;
  padding: .65rem 0 .5rem;
  border-bottom: 1px solid var(--hair);
}
.nav__mobile-cta {
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important; text-transform: uppercase;
  border-bottom: 0 !important;
  margin-top: 1.25rem;
  color: var(--verde);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: clamp(3rem, 7vw, 6.5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow-x: clip;
  overflow-y: visible;
}
.hero__grid {
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.hero .eyebrow { margin-bottom: 2rem; }
.hero .eyebrow::before { content: ""; flex: 0 0 2rem; height: 1px; background: var(--linea); }
.hero .eyebrow::after { display: none; }

.hero__title {
  font-size: clamp(3.9rem, 1rem + 10vw, 8.8rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.05em;
  margin-bottom: .42em;
}
/* «Hernani» en verde y el punto en negro, como pidió Eli */
.hero__stroke { color: var(--verde); }
.hero__stroke em { color: var(--negro); font-style: normal; }

.hero__lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto);
  max-width: 40ch;
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-bottom: 3.5rem; }
.hero__actions .btn--ghost {
  border: 0; border-radius: 0; padding: .6rem 0 .5rem;
  border-bottom: 1.5px solid var(--negro);
}
.hero__actions .btn--ghost::before { display: none; }
.hero__actions .btn--ghost:hover { color: var(--verde); border-color: var(--verde); }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1.5px solid var(--negro);
}
.hero__facts div { min-width: 0; padding: 1.25rem 1.25rem 0 0; }
.hero__facts div + div { padding-left: 1.25rem; border-left: 1px solid var(--hair); }
.hero__facts dt {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-mudo); margin-bottom: .45rem; font-weight: 600;
}
.hero__facts dd { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.45; }
.stars { color: var(--verde); letter-spacing: -.05em; }

/* --- media: foto principal + lámina superpuesta + flor --- */
.hero__media { position: relative; }
.ph--hero { aspect-ratio: 3 / 4; }
.ph--hero-2 {
  position: absolute;
  left: -8%; bottom: -10%;
  width: 40%;
  aspect-ratio: 4 / 5;
  border: 6px solid var(--arena);
  box-shadow: 0 30px 60px -30px rgba(67,40,24,.45);
}

/* la flor de la marca, arriba a la derecha, como en todas las páginas del manual */
.stamp {
  position: absolute;
  top: -6%; right: -6%;
  width: clamp(92px, 10vw, 136px);
  aspect-ratio: 1 / 1;
  z-index: 2;
}
.stamp .flor { width: 100%; height: 100%; animation: spin 50s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .stamp .flor { animation: none; } }

/* micro-parallax en el móvil, ligado a la vista (va por GPU) */
@supports (animation-timeline: view()) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .ph--hero-2 {
      animation: flotar-abajo auto linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .stamp {
      animation: flotar-arriba auto linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes flotar-abajo { from { transform: translateY(-12px); } to { transform: translateY(16px); } }
@keyframes flotar-arriba { from { transform: translateY(12px); } to { transform: translateY(-18px); } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media {
    max-width: 440px;
    margin-inline: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
  }
  .ph--hero { aspect-ratio: 4 / 5; }
  .stamp { right: 4px; top: -20px; width: clamp(78px, 20vw, 108px); }
}
@media (max-width: 640px) {
  .hero { padding-top: 2rem; }
  .hero__title { letter-spacing: -.045em; }
  .hero__lead { font-size: 1.02rem; }
  .hero__actions { margin-bottom: 2.5rem; gap: 1.25rem; }
  .hero__actions .btn--primary { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .hero__facts { grid-template-columns: 1fr; }
  .hero__facts div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--hair);
  }
  .hero__facts div + div { padding-left: 0; border-left: 0; }
  .hero__facts div:last-child { border-bottom: 0; }
  .hero__facts dt { margin-bottom: 0; flex: 0 0 auto; }
  .hero__facts dd { text-align: right; }
}

/* ============================================================
   MARCOS DE FOTO
   ============================================================ */
.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: linear-gradient(140deg, #EADBC2 0%, #DCC7A6 45%, #CDB692 100%);
  isolation: isolate;
}
.ph::before {
  content: "Eli kafea.";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.9rem, 2vw, 1.3rem);
  letter-spacing: -.05em;
  color: rgba(67,40,24,.28);
  z-index: 0;
}
.ph img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), opacity .4s var(--ease);
}
.ph img.img-missing { opacity: 0; }
.ph:hover img { transform: scale(1.03); }
@media (hover: none) {
  .ph:hover img { transform: none; }
  .btn:hover { transform: none; }
}

.ph--tall   { aspect-ratio: 3 / 4; }
.ph--wide   { aspect-ratio: 4 / 3; }
.ph--square { aspect-ratio: 1 / 1; }

/* ============================================================
   LA CASA
   ============================================================ */
.casa { background: var(--arena-clara); border-top: 1px solid var(--hair); }
.casa__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.casa__media { display: grid; gap: 1.25rem; position: sticky; top: 6rem; }
.casa__media .ph--wide { margin-left: clamp(1.5rem, 5vw, 4rem); }

.casa__copy h2 { font-size: clamp(2.3rem, 1.1rem + 3.6vw, 3.9rem); }
.casa__copy p {
  color: var(--texto);
  max-width: 56ch;
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
}
.casa__copy p em { font-style: italic; }   /* solo el texto: League Spartan no tiene cursiva */

.casa__points { display: grid; margin-top: 3rem; border-top: 1.5px solid var(--negro); }
.casa__points li {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hair);
}
.casa__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--verde);
  padding-top: .15rem;
}
.casa__points h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .4rem;
}
.casa__points p { margin: 0; font-size: .96rem; color: var(--texto); }

@media (max-width: 900px) {
  .casa__grid { grid-template-columns: 1fr; }
  /* en móvil, primero el texto y luego las dos fotos en una fila */
  .casa__media { position: static; order: 2; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 2.5rem; }
  .casa__media .ph--wide { margin-left: 0; aspect-ratio: 4/5; }
}
@media (max-width: 560px) {
  .casa__media { gap: .75rem; margin-top: 2rem; }
  .casa__points li { grid-template-columns: 2.5rem 1fr; padding-block: 1.2rem; }
}

/* ============================================================
   CARTA — igual que la carta impresa del manual:
   título negro muy grueso, grupos en verde y mayúsculas,
   platos y precios en verde, sin líneas.
   ============================================================ */
.carta { background: var(--arena); border-top: 1px solid var(--hair); }
.carta > .wrap { position: relative; }
.carta > .wrap::before {
  content: "";
  position: absolute;
  top: 0; right: var(--gut);
  width: clamp(44px, 5vw, 68px);
  aspect-ratio: 1 / 1;
  background: var(--verde);
  -webkit-mask: var(--flor) center / contain no-repeat;
          mask: var(--flor) center / contain no-repeat;
}
.carta__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 5rem) clamp(3rem, 7vw, 7rem);
}

.menu__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.6rem + 2vw, 3.2rem);
  letter-spacing: -.045em;
  line-height: .95;
  margin-bottom: 1.1rem;
}
.menu__grupo {
  margin: 1.7rem 0 .45rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--verde);
}
.menu__grupo:first-of-type { margin-top: .4rem; }

.menu__list li {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: .3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--verde);
}
.menu__item { flex: 1 1 auto; }
.menu__dots { display: none; }
.menu__price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--verde);
}
.menu__price::after { content: " €"; }

.menu__note {
  margin: 1.2rem 0 0;
  font-size: .86rem;
  color: var(--texto-mudo);
  font-style: italic;
  line-height: 1.5;
}
/* avisos de la carta que importan (p. ej. las tostadas, solo por la mañana) */
.menu__note--aviso {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: .92rem;
  color: var(--verde);
  padding-left: .8rem;
  border-left: 2px solid var(--verde);
}
.menu__note--aviso + .menu__note { margin-top: .7rem; }

@media (max-width: 720px) { .carta__grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .menu__list li { gap: .75rem; }
  .menu__title { font-size: 2.2rem; }
}

/* ============================================================
   REPOSTERÍA
   ============================================================ */
.goxo { background: var(--marron); color: var(--arena); }
.goxo .eyebrow { color: rgba(255,246,231,.62); }
.goxo .eyebrow::before { color: var(--verde-claro); }
.goxo .eyebrow::after { background: rgba(255,246,231,.25); }
.goxo h2 em { color: var(--verde-claro); }
.goxo p { color: rgba(255,246,231,.8); }

.goxo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.goxo__copy p { max-width: 46ch; font-size: clamp(1rem, .97rem + .2vw, 1.1rem); }

.goxo__tags {
  display: flex; flex-wrap: wrap; gap: .35rem 0;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,246,231,.2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--arena);
}
.goxo__tags li::after { content: "·"; margin: 0 .7rem; color: var(--verde-claro); }
.goxo__tags li:last-child::after { content: none; }

/* encargos de tartas y cookies */
.encargo {
  margin-top: 2.5rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid rgba(255,246,231,.22);
  border-radius: var(--r);
}
.encargo h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: .55rem;
  color: var(--arena);
}
.encargo p { margin-bottom: 1.3rem; max-width: 42ch; }
.encargo .encargo__tel { margin: 1rem 0 0; font-size: .92rem; }
.encargo__tel a { color: var(--arena); font-weight: 700; text-decoration-color: var(--verde-claro); text-underline-offset: 3px; }

.goxo__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: end; }
.goxo__media .ph:first-child { aspect-ratio: 3 / 4; }
.goxo__media .ph:last-child { aspect-ratio: 1 / 1; margin-bottom: clamp(2rem, 6vw, 4.5rem); }
.goxo__media .ph { background: linear-gradient(140deg, #6B4A36, #4A2F1F); }
.goxo__media .ph::before { color: rgba(255,246,231,.22); }

@media (max-width: 860px) {
  .goxo__grid { grid-template-columns: 1fr; }
  .goxo__media { order: -1; }
}
@media (max-width: 560px) {
  .goxo__media { grid-template-columns: 1fr; gap: 1rem; max-width: 360px; margin-inline: auto; }
  .goxo__media .ph:last-child { margin-bottom: 0; }
  .goxo__media .ph:first-child, .goxo__media .ph:last-child { aspect-ratio: 4 / 3; }
  .goxo__tags { font-size: 1.05rem; }
  .encargo { padding: 1.3rem 1.2rem; }
  .encargo .btn { width: 100%; }
}


/* ---------- formulario de encargos (Netlify Forms, sin JavaScript) ---------- */
.encargo__form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: .25rem; }
.encargo__form .campo { display: grid; gap: .35rem; }
.encargo__form .campo--ancho { grid-column: 1 / -1; }
.encargo__form label {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,246,231,.75);
}
.encargo__form input, .encargo__form textarea {
  width: 100%; padding: .8rem .9rem;
  font: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--arena);
  background: rgba(255,246,231,.08);
  border: 1px solid rgba(255,246,231,.35); border-radius: 6px;
  color-scheme: dark;
}
.encargo__form textarea { resize: vertical; min-height: 5.5rem; }
.encargo__form input::placeholder, .encargo__form textarea::placeholder { color: rgba(255,246,231,.45); }
.encargo__form input:focus-visible, .encargo__form textarea:focus-visible {
  outline: 2px solid var(--verde-claro); outline-offset: 2px; border-color: var(--arena); box-shadow: none;
}
.encargo__form .btn { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; }
.encargo__nota { grid-column: 1 / -1; margin: 0; font-size: .84rem; line-height: 1.5; color: rgba(255,246,231,.72); }
.encargo__nota a { color: var(--arena); }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* la casilla de fecha en iOS trae ancho propio: que quepa */
.encargo__form .campo { min-width: 0; }
.encargo__form input, .encargo__form textarea { max-width: 100%; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.encargo__form input[type="date"] { display: block; min-height: 3.1rem; text-align: left; }
.encargo__form input[type="date"]::-webkit-date-and-time-value { text-align: left; }

@media (max-width: 560px) {
  .encargo__form { grid-template-columns: 1fr; }
  .encargo__form .btn { width: 100%; justify-self: stretch; }
}

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria { background: var(--arena-clara); padding-bottom: clamp(4rem, 8vw, 7rem); }
.galeria__strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0 var(--gut) 1.5rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
  cursor: grab;
}
.galeria__strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.galeria__strip .ph {
  flex: 0 0 clamp(240px, 26vw, 340px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.galeria__strip::-webkit-scrollbar { height: 4px; }
.galeria__strip::-webkit-scrollbar-thumb { background: var(--linea); }
@media (max-width: 700px) {
  .galeria__strip { gap: .85rem; }
  .galeria__strip .ph { flex: 0 0 min(76vw, 320px); }
}

/* ============================================================
   RESEÑAS
   ============================================================ */
.resenas { background: var(--arena); border-top: 1px solid var(--hair); }
.resenas .section__head { max-width: none; margin-bottom: clamp(2rem, 4vw, 3rem); }
.resenas h2 { margin-bottom: 0; max-width: 14ch; }

.rating {
  display: inline-flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.rating__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem; line-height: 1;
  letter-spacing: -.04em;
}
.rating__stars { color: var(--verde); font-size: 1.05rem; letter-spacing: -.02em; }
.rating__meta {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--texto-mudo);
}

/* --- rejilla de citas: sin tarjetas, solo líneas --- */
.resenas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  border-top: 1.5px solid var(--negro);
}
.quote {
  margin: 0;
  padding: 1.75rem 0 1.5rem;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0 0 1rem;
  font-size: 1.1rem; line-height: 1.55;
  color: var(--negro);
}
.quote__trad {
  margin: 0 0 1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--linea);
  font-size: .87rem; line-height: 1.55;
  color: var(--texto-mudo);
  font-style: italic;
}
.quote figcaption {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto); font-weight: 600;
}
.quote figcaption span[aria-hidden] { color: var(--verde); letter-spacing: -.05em; font-size: .85rem; }
.quote figcaption .muted { font-weight: 500; }

/* --- cita destacada: va como un titular --- */
.quote.quote--destacada {
  max-width: none;
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  background: none;
  border: 0;
}
.quote.quote--destacada blockquote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1rem + 5.2vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--negro);
  max-width: 14ch;
  margin: 0 0 1.25rem;
}
.quote.quote--destacada blockquote p::before { content: "«"; color: var(--verde); }
.quote.quote--destacada blockquote p::after  { content: "»"; color: var(--verde); }

.resenas__cta { margin: 2.5rem 0 0; }

/* --- petición de reseña --- */
.pide {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--arena-honda);
  border-radius: var(--r);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.pide__estrellas { font-size: 1.15rem; color: var(--verde); letter-spacing: -.05em; line-height: 1; }
.pide__texto h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: .45rem;
}
.pide__texto p { margin: 0; font-size: .96rem; color: var(--texto); max-width: 54ch; }
.pide__btn { white-space: nowrap; }

@media (max-width: 900px) { .resenas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) {
  .pide { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pide__texto p { margin-inline: auto; }
}

/* ============================================================
   VISÍTANOS
   ============================================================ */
.visita { background: var(--arena-clara); border-top: 1px solid var(--hair); }
.visita__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.visita__block { padding-top: 1.75rem; border-top: 1px solid var(--linea); margin-bottom: 2.25rem; }
.visita__block:first-of-type { border-top: 0; padding-top: 0; }
.visita__block h3 {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-mudo); font-weight: 600;
  margin-bottom: 1rem;
}
.visita__block > p { color: var(--texto); }
.visita__block:first-of-type > p:first-of-type {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem; line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--negro);
}

.horario { width: 100%; border-collapse: collapse; font-size: .95rem; }
.horario th, .horario td {
  padding: .6rem 0; text-align: left; font-weight: 400; vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.horario th { color: var(--texto); width: 8.5rem; }
.horario td { font-variant-numeric: tabular-nums; }
.horario tr.is-today th, .horario tr.is-today td { font-weight: 700; color: var(--negro); }
.horario tr.is-today th::after {
  content: "hoy";
  font-family: var(--font-display);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--verde); color: var(--arena);
  padding: .22rem .5rem .12rem;
  border-radius: 100px;
  margin-left: .6rem; font-weight: 700;
  vertical-align: middle;
}
:lang(eu) .horario tr.is-today th::after { content: "gaur"; }
.visita__aviso { margin: 1rem 0 0; font-size: .86rem; color: var(--texto-mudo); font-style: italic; }

@media (max-width: 520px) {
  .horario, .horario tbody, .horario tr, .horario th, .horario td { display: block; width: auto; }
  .horario th, .horario td { border-bottom: 0; padding: 0; }
  .horario tr { padding-block: .6rem; border-bottom: 1px solid var(--hair); }
  .horario tr:last-child { border-bottom: 0; }
  .horario th {
    font-family: var(--font-display);
    font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--texto-mudo); font-weight: 600;
    margin-bottom: .15rem;
  }
  .horario td { font-size: 1rem; }
  .horario tr.is-today { background: var(--arena-honda); padding-inline: .7rem; border-radius: var(--r); }
}
.visita__extra { margin: -.4rem 0 1.25rem; font-size: .93rem; color: var(--texto); }
.visita__extra::before { content: "— "; color: var(--verde); }

.visita__contacto li { padding-block: .35rem; font-size: .96rem; }
.visita__contacto a { font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--linea); }
.visita__contacto a:hover { border-color: var(--verde); }

.visita__mapa {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--arena-honda);
  position: sticky; top: 6rem;
}
.visita__mapa iframe {
  width: 100%;
  height: clamp(400px, 56vh, 600px);
  border: 0;
  filter: grayscale(.45) sepia(.12) contrast(1.02);
}
.mapa {
  height: clamp(400px, 56vh, 600px);
  display: grid; place-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  background-color: var(--arena-honda);
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
.mapa::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--arena-honda) 100%);
  pointer-events: none;
}
.mapa.is-loaded { display: block; padding: 0; height: auto; background: none; }
.mapa.is-loaded::after { display: none; }
.mapa__contenido { position: relative; z-index: 1; }
.mapa__pin {
  display: block;
  width: 34px; height: 34px;
  margin: 0 auto 1.1rem;
  background: var(--verde);
  -webkit-mask: var(--flor) center / contain no-repeat;
          mask: var(--flor) center / contain no-repeat;
}
.mapa__dir {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin-bottom: 1.5rem;
  color: var(--negro);
}
.mapa__btn { cursor: pointer; }
.mapa__aviso {
  margin: 1.1rem auto 0;
  font-size: .8rem; line-height: 1.5;
  color: var(--texto-mudo);
  max-width: 30ch;
}

@media (max-width: 900px) {
  .visita__grid { grid-template-columns: 1fr; }
  .visita__mapa { position: static; }
}

/* ============================================================
   CIERRE — «Ya estás tardando.»
   ============================================================ */
.cierre {
  background: var(--marron);
  color: var(--arena);
  text-align: center;
  padding-block: clamp(6rem, 14vw, 12rem);
  position: relative;
  overflow: hidden;
}
.cierre .eyebrow { justify-content: center; color: rgba(255,246,231,.62); }
.cierre .eyebrow::before,
.cierre .eyebrow::after { content: ""; flex: 0 0 2rem; height: 1px; background: rgba(255,246,231,.25); }
.cierre__title {
  font-size: clamp(3.9rem, 2rem + 11vw, 10.5rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.05em;
  margin-bottom: .4em;
  color: var(--arena);
}
.cierre__title em { font-style: normal; color: var(--verde-claro); }
.cierre__actions {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.cierre__nota {
  margin: 0;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,246,231,.62);
}

/* ============================================================
   PIE
   ============================================================ */
.footer { background: var(--negro); color: var(--arena); padding-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}
.footer__brand p { color: rgba(255,246,231,.62); font-size: .95rem; margin: 0; line-height: 1.6; }

.footer__logo { padding-inline: var(--gut); padding-bottom: .5rem; overflow: hidden; }
.footer__logo .logotipo {
  display: block;
  width: 100%;
  font-size: clamp(3.2rem, 15.2vw, 15rem);
  line-height: .82;
  letter-spacing: -.06em;
  color: var(--arena);
  text-align: center;
}

.footer__nav, .footer__social { display: grid; gap: .8rem; align-content: start; }
.footer__nav a, .footer__social a {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,246,231,.72);
  width: fit-content;
  transition: color .2s var(--ease);
}
.footer__nav a:hover, .footer__social a:hover { color: var(--verde-claro); }

.footer__legal {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,246,231,.14);
  font-size: .82rem;
  color: rgba(255,246,231,.62);
}
.footer__legal p { margin: 0; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--verde-claro); }

@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { gap: 2rem; padding-bottom: 2.25rem; }
  .footer__legal { flex-direction: column; gap: .6rem; text-align: center; }
  .footer__logo { padding-bottom: 0; }
  .cierre { padding-block: clamp(4.5rem, 14vw, 7rem); }
  .cierre__actions { flex-direction: column; align-items: stretch; }
  .cierre__actions .btn { width: 100%; }
  .footer__nav a, .footer__social a { padding-block: .35rem; }
}

/* ============================================================
   PÁGINAS SUELTAS: aviso legal y error 404
   ============================================================ */
.pagina-suelta { background: var(--arena-clara); }
.legal__nav { border-bottom: 1px solid var(--hair); padding-block: 1rem; background: var(--arena); }
.legal__nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.legal__nav .nav__brand { margin-right: 0; }

.legal { padding-block: clamp(3rem, 7vw, 6rem); }
.legal .wrap { max-width: 760px; }
.legal h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4rem);
  line-height: .98;
  letter-spacing: -.04em;
  margin-bottom: 1rem;
}
.legal h1 em { font-style: normal; color: var(--verde); }
.legal__intro { font-size: 1.08rem; color: var(--texto); margin-bottom: 2.5rem; }
.legal section { margin-bottom: 2.5rem; }
.legal h2 {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--linea);
}
.legal p { color: var(--texto); font-size: .97rem; }
.legal a { color: var(--verde); }
.legal__aviso {
  background: var(--arena-honda);
  border-left: 3px solid var(--verde);
  border-radius: var(--r);
  padding: 1.15rem 1.35rem;
  font-size: .93rem; line-height: 1.6;
  margin-bottom: 2.75rem;
  color: var(--negro);
}
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--arena-honda);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: .1em .4em;
}
.legal__datos { margin: 0; display: grid; gap: .1rem; }
.legal__datos dt {
  font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-mudo); font-weight: 600;
  margin-top: .9rem;
}
.legal__datos dd { margin: 0; font-size: .97rem; }
.legal__fecha { font-size: .86rem; color: var(--texto-mudo); font-style: italic; }
.legal__idioma { margin-top: 2rem; }
.legal__idioma a { font-weight: 700; }

.error404 {
  min-height: 78vh;
  display: grid; place-items: center;
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.error404__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 15vw, 10rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--verde);
  margin-bottom: .5rem;
}
.error404__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 1rem;
}
.error404__titulo em { font-style: normal; color: var(--verde); }
.error404__texto { color: var(--texto); max-width: 40ch; margin-inline: auto; margin-bottom: 2rem; }
.error404__acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.error404__idioma { font-size: .9rem; margin-bottom: 3rem; }
.error404__idioma a { color: var(--texto-mudo); }
.error404__logo { font-size: clamp(2rem, 7vw, 3.5rem); color: var(--linea); }
.gracias__flor { width: clamp(64px, 12vw, 110px); height: clamp(64px, 12vw, 110px); margin: 0 auto 1.5rem; }
.gracias .error404__texto a { color: var(--verde); font-weight: 700; }

/* ============================================================
   IMPRESIÓN — pensado para quien imprima la carta
   ============================================================ */
@media print {
  .nav, .nav__mobile, .stamp, .galeria, .cierre,
  .visita__mapa, .pide, .encargo, .footer__logo, .footer__nav,
  .footer__social, .hero__media, .skip-link, .idiomas { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::after { display: none; }
  .section { padding-block: 1.5rem; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .goxo, .footer { background: #fff !important; color: #000 !important; }
  .goxo p, .footer p, .goxo .eyebrow, .goxo__tags { color: #000 !important; }
  .carta > .wrap::before { display: none; }
  .carta__grid { grid-template-columns: 1fr 1fr; }
  .menu { break-inside: avoid; }
  h1, h2 { break-after: avoid; }
  .ph { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ============================================================
   ANIMACIÓN DE ENTRADA
   Sin JavaScript no se oculta nada. La clase .js la pone pre.js.
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

[data-parallax],
.js .reveal.is-in[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* --- titulares que suben palabra a palabra --- */
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.js .palabra > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
  transition-delay: var(--retardo, 0ms);
}
.titular-listo .palabra > span { transform: translateY(0); }

/* --- las fotos se destapan como una cortina (fail-open) --- */
@keyframes destapar {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes acercar {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
.js .ph.reveal.is-in { animation: destapar 1.2s var(--ease-out) both; }
.js .ph.reveal.is-in img { animation: acercar 1.4s var(--ease-out) both; }
/* la lámina superpuesta lleva sombra, que un clip-path recortaría */
.js .ph--hero-2.is-in { animation: none; }

.rating__score { font-variant-numeric: tabular-nums; }

/* --- visor de fotos a pantalla completa --- */
.visor {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10, 7, 5, .95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.visor.is-abierto { opacity: 1; visibility: visible; }
.visor__figura {
  margin: 0;
  max-width: min(94vw, 520px);
  max-height: 84vh; max-height: 84dvh;
  display: flex; flex-direction: column; gap: 1rem;
  transform: scale(.97);
  transition: transform .4s var(--ease-out);
}
.visor.is-abierto .visor__figura { transform: scale(1); }
.visor__figura img {
  width: 100%; height: auto;
  max-height: 74vh; max-height: 74dvh;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--marron);
}
.visor__pie {
  color: rgba(255,246,231,.82);
  font-size: .9rem; line-height: 1.5;
  text-align: center; margin: 0;
  max-width: 46ch; margin-inline: auto;
}
.visor__btn {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,246,231,.3);
  background: rgba(10,7,5,.5);
  color: var(--arena);
  font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.visor__btn:hover { background: rgba(255,246,231,.16); border-color: var(--arena); }
.visor__cerrar { top: 1rem; right: 1rem; }
.visor__ant    { left: 1rem;  top: 50%; margin-top: -24px; }
.visor__sig    { right: 1rem; top: 50%; margin-top: -24px; }
.visor__cuenta {
  position: absolute; bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,246,231,.62);
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .visor__ant, .visor__sig { display: none; }
  .visor__figura { max-width: 92vw; }
  .visor__cerrar { top: .75rem; right: .75rem; }
}
.sin-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none; }
  .js .ph.reveal.is-in { animation: none; }
  .js .ph.reveal.is-in img { animation: none; }
  .js .palabra > span { transform: none !important; transition: none; }
  .visor, .visor__figura { transition: none; }
  .btn::before { transition: none; }
}

/* ============================================================
   RESPONSIVE — barra de navegación
   ============================================================ */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__right .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { gap: 1rem; }
}
@media (min-width: 981px) { .nav__mobile { display: none !important; } }
@media (max-width: 620px) {
  .nav__right .idiomas { display: none; }
  .status__text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ============================================================
   COMPACTO EN PANTALLAS PEQUEÑAS
   ============================================================ */
@media (max-width: 700px) {
  /* las citas, en una fila deslizable; la destacada arriba */
  .resenas__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .75rem;
    margin-inline: calc(-1 * var(--gut));
    padding-inline: var(--gut);
    padding-bottom: .75rem;
    border-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--linea) transparent;
  }
  .resenas__grid .quote {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: center;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--linea);
    border-radius: var(--r);
    background: var(--arena-clara);
  }
  .quote.quote--destacada { margin-bottom: 2.25rem; }
}
@media (max-width: 640px) {
  .section { padding-block: 3.75rem; }
  h2 { margin-bottom: .5em; }
  .section__head { margin-bottom: 1.75rem; }
  .casa__points { margin-top: 2rem; }
  .carta__grid { gap: 2.5rem; }
  .cierre { padding-block: 4.25rem; }
  .footer { padding-top: 2.5rem; }
  .pide { margin-top: 2.25rem; }
  .resenas__cta { margin-top: 1.5rem; }
}


/* ---------- zonas de toque en móvil (auditoría 13/9/2026) ----------
   Los enlaces de texto medían 18-26 px de alto: se les da aire arriba y
   abajo para que pasen de 32 px sin cambiar el aspecto. */
.link-arrow { padding-top: .45rem; }
.visita__contacto li { padding-block: .5rem; }
.visita__contacto a, .encargo__tel a, .footer__legal a { display: inline-block; padding-block: .2rem; }

/* Enlaces dentro de texto corrido: el verde de marca da 6,7:1 */
.legal a, .visita__contacto a, .mapa__aviso a { color: var(--verde); }

/* ============================================================
   Anulaciones finales (este bloque debe quedar el último)
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .js .ph--hero-2.is-in,
    .ph--hero-2 {
      animation: flotar-abajo auto linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}