/* ============================================================
   Coworking La Eliana — sistema de diseño
   Paleta tomada de sus propias fotos: pared blanca, suelo de
   roble, columna de pizarra y el rojo de su logo (#c2202c).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fuentes/Inter.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fuentes/Fraunces.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* color */
  --tinta: #17130f;
  --tinta-80: #17130fcc;
  --papel: #faf7f2;
  --arena: #efe8dd;
  --blanco: #fff;
  --rojo: #c2202c;
  --rojo-vivo: #e0303c;
  --rojo-tenue: #c2202c14;
  --roble: #c69c6d;
  --humo: #6f665e;
  --linea: #17130f1a;

  /* tipografía fluida */
  --t-xs: .78rem;
  --t-s: .88rem;
  --t-m: 1rem;
  --t-l: clamp(1.06rem, .98rem + .4vw, 1.25rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --t-2xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --t-3xl: clamp(2.8rem, 1.6rem + 5.4vw, 6.4rem);
  --t-4xl: clamp(3.2rem, 1.6rem + 6.4vw, 7.2rem);

  /* espacio */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --s7: clamp(5rem, 10vw, 10rem);

  --ancho: 1240px;
  --radio: 14px;
  --radio-l: 26px;

  --sombra: 0 1px 2px #17130f0a, 0 8px 24px -12px #17130f26;
  --sombra-alta: 0 2px 4px #17130f0d, 0 32px 60px -28px #17130f4d;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-m);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--rojo); color: #fff; }

:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- utilidades ---------- */
.env {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.env-ancho { width: min(100% - 2rem, 1560px); margin-inline: auto; }

.seccion { padding-block: var(--s7); }

/* La cabecera es fija: sin este margen, al llegar desde el menú el título
   de la sección queda medio tapado. */
:target,
section[id] { scroll-margin-top: 5.5rem; }

.serif {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 120;
  letter-spacing: -.02em;
}

.epigrafe {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: var(--s2);
}
.epigrafe::before {
  content: '';
  width: 26px;
  height: 1.5px;
  background: currentColor;
}

.entradilla {
  font-size: var(--t-l);
  color: var(--humo);
  max-width: 58ch;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- botones ---------- */
.btn {
  --bg: var(--tinta);
  --fg: var(--papel);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 1.9rem;
  border: 0;
  border-radius: 100px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
/* el relleno crece desde el punto donde está el ratón */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--rojo-vivo) 0%, var(--rojo) 45%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform .55s var(--curva), opacity .35s var(--curva-suave);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.btn:hover::before { transform: scale(2.6); opacity: 1; }
.btn:active { transform: translateY(0) scale(.985); }

.btn-rojo { --bg: var(--rojo); --fg: #fff; }
.btn-rojo::before { background: radial-gradient(circle at var(--mx,50%) var(--my,50%), #ff5a5a 0%, var(--rojo-vivo) 50%, transparent 72%); }

.btn-linea {
  --bg: transparent;
  --fg: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--linea);
}
.btn-linea:hover { --fg: #fff; }

.btn-claro { --bg: #ffffff1f; --fg: #fff; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px #ffffff40; }

.flecha { transition: transform .45s var(--curva); }
.btn:hover .flecha { transform: translateX(4px); }

/* ---------- cabecera ---------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding-block: 1.1rem;
  transition: padding .5s var(--curva), background .5s var(--curva-suave), box-shadow .5s var(--curva-suave);
}
.cabecera::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0;
  transition: opacity .5s var(--curva-suave);
}
.cabecera.fija { padding-block: .6rem; box-shadow: 0 1px 0 var(--linea); }
.cabecera.fija::before { opacity: 1; }

/* sobre la foto del héroe todo va en blanco; al fijarse recupera el color */
.cabecera:not(.fija) .marca img { filter: brightness(0) invert(1); }
.cabecera:not(.fija) .nav a { color: #ffffffc7; }
.cabecera:not(.fija) .nav a:hover { color: #fff; }
.cabecera:not(.fija) .nav a::after { background: #fff; }
.cabecera:not(.fija) .tel { color: #fff; }
.cabecera:not(.fija) .tel svg { color: #fff; }
.cabecera:not(.fija) .menu-btn { color: #fff; }
.marca img, .nav a, .tel, .tel svg { transition: color .45s var(--curva-suave), filter .45s var(--curva-suave); }

.cabecera-fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.marca { flex: none; display: block; }
.marca svg, .marca img { width: clamp(124px, 12vw, 158px); height: auto; transition: width .5s var(--curva); }
.cabecera.fija .marca svg, .cabecera.fija .marca img { width: clamp(104px, 9vw, 124px); }

.nav { display: flex; gap: .35rem; margin-left: auto; }
.nav a {
  position: relative;
  padding: .5rem .85rem;
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--humo);
  border-radius: 100px;
  transition: color .35s var(--curva-suave);
}
.nav a::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .3rem;
  height: 1.5px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--curva);
}
.nav a:hover { color: var(--tinta); }
.nav a:hover::after { transform: scaleX(1); }

.cabecera-acciones { display: flex; align-items: center; gap: var(--s2); }
.tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--t-s);
  font-weight: 600;
  white-space: nowrap;
}
.tel svg { width: 15px; height: 15px; color: var(--rojo); }

.menu-btn { display: none; }

/* ---------- héroe ---------- */
.heroe {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  color: #fff;
}
.heroe-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.heroe-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: heroe-zoom 2.4s var(--curva) both;
}
@keyframes heroe-zoom {
  from { transform: scale(1.12); filter: blur(14px); }
  to { transform: scale(1); filter: blur(0); }
}
.heroe-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #17130f8c 0%, #17130f00 38%),
    linear-gradient(0deg, #17130fe6 0%, #17130f80 34%, #17130f00 68%);
}
.heroe-cuerpo { padding-block: clamp(3rem, 9vh, 7rem) clamp(3.5rem, 8vh, 6rem); }

.heroe h1 {
  font-size: var(--t-4xl);
  max-width: 15ch;
  margin-bottom: var(--s3);
  text-shadow: 0 2px 40px #17130f4d;
}
/* cada palabra sube por separado */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.palabra > span {
  display: inline-block;
  transform: translateY(105%);
  animation: subir .95s var(--curva) both;
  animation-delay: calc(var(--i) * 70ms + 250ms);
}
@keyframes subir { to { transform: translateY(0); } }

.heroe-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s3);
  animation: aparecer 1s var(--curva) both .95s;
}
.heroe .entradilla { color: #ffffffdb; max-width: 46ch; }
.heroe-botones { display: flex; flex-wrap: wrap; gap: .75rem; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.bajar {
  position: absolute;
  left: 50%; bottom: 1.4rem;
  translate: -50% 0;
  width: 1px; height: 46px;
  background: linear-gradient(#fff0, #fffc);
  animation: aparecer 1s var(--curva) both 1.4s;
}
.bajar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: recorrer 2.2s var(--curva-suave) infinite;
}
@keyframes recorrer {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- cifras ---------- */
.cifras {
  border-block: 1px solid var(--linea);
  background: var(--blanco);
}
.cifras-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.cifra {
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--s2);
  text-align: center;
  border-left: 1px solid var(--linea);
}
.cifra:first-child { border-left: 0; }
.cifra b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.cifra span {
  display: block;
  margin-top: .5rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

/* ---------- entradas al hacer scroll ---------- */
.entra {
  animation: entrar linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 26%;
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(42px); }
  to { opacity: 1; transform: none; }
}

.entra-escala {
  animation: entrar-escala linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
@keyframes entrar-escala {
  from { opacity: 0; transform: scale(.94) translateY(30px); }
  to { opacity: 1; transform: none; }
}

/* parallax suave dentro de su marco */
.parallax { animation: parallax linear both; animation-timeline: view(); }
@keyframes parallax {
  from { transform: translateY(-6%) scale(1.14); }
  to { transform: translateY(6%) scale(1.14); }
}

/* navegadores sin scroll-driven animations: se ve todo, sin salto */
@supports not (animation-timeline: view()) {
  .entra, .entra-escala { animation: none; opacity: 1; transform: none; }
  .parallax { animation: none; }
}

/* ---------- tarjetas ---------- */
.marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-l);
  background: var(--arena);
}
.marco img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta {
  position: relative;
  border-radius: var(--radio-l);
  background: var(--blanco);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
/* halo que sigue al ratón */
.tarjeta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my), var(--rojo-tenue), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--curva-suave);
}
.tarjeta:hover::after { opacity: 1; }

/* ---------- pie ---------- */
.pie {
  background: var(--tinta);
  color: #ffffffb8;
  padding-block: var(--s6) var(--s4);
}
.pie a:hover { color: #fff; }
.pie h4 { color: #fff; font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s2); }

/* ---------- reserva ---------- */
.reserva-caja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.reserva-texto h2 { font-size: var(--t-2xl); margin-bottom: var(--s2); }
.lista-marcas { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .7rem; }
.lista-marcas li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--t-s);
  font-weight: 500;
}
.lista-marcas li::before {
  content: '';
  position: absolute;
  left: 0; top: .3em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.72rem no-repeat;
}

.reserva-widget { padding: clamp(1.4rem, 2.5vw, 2rem); }
.widget-cab {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--linea);
}
.widget-cab strong { display: block; font-size: var(--t-l); letter-spacing: -.02em; }
.widget-cab small { color: var(--humo); font-size: var(--t-s); }
.sello {
  flex: none;
  padding: .35rem .7rem;
  border-radius: 100px;
  background: var(--arena);
  font-size: var(--t-xs);
  font-weight: 600;
}

.widget-cuerpo { display: grid; gap: var(--s3); padding-block: var(--s3); }
.campo { display: block; }
.campo > span {
  display: block;
  margin-bottom: .6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--humo);
}

.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.dia {
  display: grid;
  gap: .1rem;
  padding: .55rem .2rem;
  border: 0;
  border-radius: 11px;
  background: var(--arena);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: background .3s var(--curva-suave), color .3s var(--curva-suave), transform .4s var(--curva);
}
.dia i { font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--humo); }
.dia b { font-size: var(--t-m); font-weight: 700; }
.dia:hover { transform: translateY(-2px); }
.dia.activa { background: var(--tinta); color: #fff; }
.dia.activa i { color: #ffffff9e; }
.dia:disabled { opacity: .32; cursor: not-allowed; transform: none; }

.franjas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.franja {
  display: grid;
  gap: .15rem;
  padding: .8rem .5rem;
  border: 1.5px solid var(--linea);
  border-radius: 13px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--t-s);
  cursor: pointer;
  transition: border-color .3s var(--curva-suave), background .3s var(--curva-suave), transform .4s var(--curva);
}
.franja b { font-size: var(--t-l); font-weight: 700; letter-spacing: -.02em; }
.franja:hover { transform: translateY(-2px); border-color: #17130f40; }
.franja.activa { border-color: var(--rojo); background: var(--rojo-tenue); }
.franja.activa b { color: var(--rojo); }

.horas { display: flex; flex-wrap: wrap; gap: .4rem; }
.hora {
  padding: .5rem .85rem;
  border: 1.5px solid var(--linea);
  border-radius: 100px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--t-s);
  font-weight: 500;
  cursor: pointer;
  transition: all .3s var(--curva-suave);
}
.hora:hover { border-color: #17130f40; }
.hora.activa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hora:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

.widget-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--linea);
}
.total small { display: block; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }
.total b {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.total em { font-style: normal; font-size: var(--t-xs); color: var(--humo); }

/* ---------- sedes ---------- */
.cabeza-seccion { margin-bottom: var(--s5); }
.cabeza-seccion h2 { font-size: var(--t-2xl); }

.sedes-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.sede { display: flex; flex-direction: column; }
.sede-media { aspect-ratio: 4 / 3; border-radius: 0; }
.sede-media img { transform-origin: center; }

.ver-video {
  position: absolute;
  left: 1rem; bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.1rem .6rem .75rem;
  border: 0;
  border-radius: 100px;
  background: #ffffff26;
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1.5px #ffffff40;
  color: #fff;
  font: inherit;
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
  transition: background .4s var(--curva-suave), transform .5s var(--curva);
}
.ver-video svg { width: 20px; height: 20px; }
.ver-video:hover { background: var(--rojo); transform: translateY(-2px); }

.sede-texto { padding: var(--s3) clamp(1.2rem, 2.5vw, 2rem) clamp(1.6rem, 3vw, 2.2rem); }
.sede-texto h3 { font-size: var(--t-xl); margin-bottom: .5rem; }
.sede-nota { color: var(--humo); font-size: var(--t-s); }
.sede-datos {
  list-style: none;
  margin: var(--s2) 0;
  padding: var(--s2) 0;
  border-block: 1px solid var(--linea);
  display: grid;
  gap: .45rem;
  font-size: var(--t-s);
}
.sede-datos b { display: inline-block; min-width: 1.7rem; font-weight: 700; color: var(--rojo); }

.sede-resena { display: flex; align-items: center; gap: .5rem; font-size: var(--t-s); }
.estrellas { color: var(--rojo); letter-spacing: -.06em; }
.estrellas i { opacity: .3; font-style: normal; }
.sede-resena-nueva { color: var(--humo); }
.punto {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--roble);
  box-shadow: 0 0 0 0 #c69c6d99;
  animation: latir 2.4s var(--curva-suave) infinite;
}
@keyframes latir {
  70% { box-shadow: 0 0 0 .55rem #c69c6d00; }
  100% { box-shadow: 0 0 0 0 #c69c6d00; }
}

/* ---------- cinta de coworkers ----------
   Desfile infinito de los logos reales de las empresas residentes.
   Se para al pasar el ratón para poder leerlos. */
.coworkers { padding-block: var(--s6); background: var(--blanco); border-block: 1px solid var(--linea); }
.coworkers .cabeza-seccion { margin-bottom: var(--s4); }
.coworkers h2 { font-size: var(--t-xl); max-width: 24ch; }

.cinta {
  overflow: hidden;
  padding-block: var(--s2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cinta-pista {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  width: max-content;
  animation: desfilar 46s linear infinite;
}
@keyframes desfilar { to { transform: translateX(-50%); } }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-pista img {
  width: clamp(126px, 12vw, 168px);
  height: clamp(63px, 6vw, 84px);
  object-fit: contain;
  border-radius: 12px;
  filter: grayscale(1) contrast(.92);
  opacity: .55;
  transition: filter .45s var(--curva-suave), opacity .45s var(--curva-suave), transform .5s var(--curva);
}
.cinta-pista img:hover { filter: none; opacity: 1; transform: scale(1.06); }
.cinta-pie { margin-top: var(--s3); font-size: var(--t-s); color: var(--humo); max-width: 56ch; }

/* ---------- texto que se revela palabra a palabra con el scroll ---------- */
.revelar > span { display: inline-block; }
.revelar .pal {
  opacity: .28;
  animation: revelar-pal linear both;
  animation-timeline: view();
  /* el recorrido acaba dentro de «entry»: así el texto queda siempre legible
     aunque la pantalla sea corta y la sección no llegue a cubrirla */
  animation-range: entry calc(16% + var(--i) * 3%) entry calc(58% + var(--i) * 3%);
}
@keyframes revelar-pal { to { opacity: 1; } }
@supports not (animation-timeline: view()) {
  .revelar .pal { opacity: 1; animation: none; }
}

/* ---------- destello al pasar por encima de una tarjeta ---------- */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 42%, #ffffff59 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 1s var(--curva);
}
.tarjeta:hover::before { transform: translateX(130%); }

/* ---------- opiniones ---------- */
.opiniones-caja {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.nota-grande {
  position: sticky;
  top: 7rem;
  display: grid;
  gap: var(--s3);
  justify-items: center;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border-radius: var(--radio-l);
  background: var(--blanco);
  box-shadow: var(--sombra);
  text-align: center;
}
.nota-cifra b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'opsz' 144;
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.04em;
}
.estrellas-g { display: block; margin: .5rem 0 .3rem; font-size: 1.3rem; }
.nota-cifra small { display: block; font-size: var(--t-s); color: var(--humo); }

.opiniones-texto h2 { font-size: var(--t-xl); margin-bottom: var(--s2); max-width: 22ch; }
.temas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--s3); }
.temas span {
  padding: .45rem .95rem;
  border-radius: 100px;
  background: var(--arena);
  font-size: var(--t-s);
  font-weight: 500;
}
.aviso {
  margin-top: var(--s4);
  padding: var(--s3);
  border-left: 3px solid var(--rojo);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--rojo-tenue);
  font-size: var(--t-s);
}
.aviso b { color: var(--rojo); }

/* ---------- dónde estamos ---------- */
.mapa-caja {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.mapa {
  position: relative;
  border-radius: var(--radio-l);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--arena);
}
.mapa img { width: 100%; height: auto; }

.chincheta {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -100%;
  display: grid;
  justify-items: center;
  z-index: 2;
}
.chincheta-b { z-index: 3; }
.chincheta-punto {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 4px 14px #17130f4d, 0 0 0 0 #c2202c80;
  animation: chincheta 2.8s var(--curva-suave) infinite;
}
.chincheta-b .chincheta-punto { animation-delay: 1.4s; }
@keyframes chincheta {
  60% { box-shadow: 0 4px 14px #17130f4d, 0 0 0 1.1rem #c2202c00; }
  100% { box-shadow: 0 4px 14px #17130f4d, 0 0 0 0 #c2202c00; }
}
.chincheta-globo {
  position: absolute;
  bottom: calc(100% + .55rem);
  display: grid;
  gap: .1rem;
  width: max-content;
  max-width: 15rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  background: var(--tinta);
  color: #fff;
  font-size: var(--t-xs);
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .35s var(--curva-suave), transform .45s var(--curva);
  pointer-events: none;
}
.chincheta-globo b { font-size: var(--t-s); }
.chincheta:hover .chincheta-globo,
.chincheta:focus-visible .chincheta-globo { opacity: 1; transform: none; }

.donde-fichas { display: grid; gap: var(--s2); }
.ficha {
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border-radius: var(--radio-l);
  background: var(--blanco);
  box-shadow: var(--sombra);
}
.ficha h3 { font-size: var(--t-l); margin-bottom: .4rem; }
.ficha p { font-size: var(--t-s); color: var(--humo); margin-bottom: .2rem; }
.ficha-horario { margin-bottom: var(--s2) !important; }
.ficha .btn { padding: .7rem 1.2rem; }
.mapa-credito { font-size: .68rem; color: var(--humo); margin: 0; }

/* ---------- lema ---------- */
/* La pizarra ya lleva su lema escrito a mano: no se tapa. El texto va al lado
   y concreta lo que ahí llaman «el resto». */
.lema {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 82svh;
  overflow: clip;
  color: #fff;
}
.lema-foto { position: absolute; inset: 0; }
.lema-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 22% center; }
.lema-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, #17130f14 0%, #17130f38 34%, #17130fdb 58%, #17130ff2 100%);
}
.lema-texto { position: relative; padding-block: var(--s5); }
.lema-caja { max-width: 30rem; margin-left: auto; }
.lema-caja .epigrafe { color: var(--roble); }
.lema-caja p {
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: var(--s3);
}
.lema-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}
.lema-lista li {
  padding: .7rem 0 .7rem 1.7rem;
  border-top: 1px solid #ffffff24;
  font-size: var(--t-s);
  position: relative;
}
.lema-lista li:last-child { border-bottom: 1px solid #ffffff24; }
.lema-lista li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.15em;
  width: .5rem; height: 1.5px;
  background: var(--rojo-vivo);
}

/* En móvil no se puede superponer el texto: caería justo encima de la pizarra
   y taparía su propia letra. La foto pasa a ser una franja y el texto va debajo. */
@media (max-width: 900px) {
  .lema { display: block; min-height: 0; background: var(--tinta); }
  .lema-foto { position: relative; height: 46svh; min-height: 260px; }
  .lema-foto img { object-position: 50% center; }
  .lema-foto::after { background: linear-gradient(180deg, #17130f00 55%, #17130f 100%); }
  .lema-texto { padding-block: var(--s4) var(--s5); }
  .lema-caja { margin-left: 0; max-width: none; }
}

/* ---------- pie ---------- */
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s4) var(--s3);
}
.pie-logo { margin-bottom: var(--s2); }
.pie-nota { font-size: var(--t-s); max-width: 30ch; }
.pie p { font-size: var(--t-s); line-height: 1.75; }
.pie-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s2);
  border-top: 1px solid #ffffff1f;
  font-size: var(--t-xs);
}
.pie-demo { color: var(--roble); }

/* ---------- visor de vídeo ---------- */
.visor {
  width: min(94vw, 1100px);
  padding: 0;
  border: 0;
  border-radius: var(--radio-l);
  background: #000;
  overflow: visible;
}
.visor::backdrop { background: #17130fe0; backdrop-filter: blur(8px); }
.visor[open] { animation: visor-entra .5s var(--curva) both; }
@keyframes visor-entra {
  from { opacity: 0; transform: scale(.94) translateY(20px); }
  to { opacity: 1; transform: none; }
}
.visor-marco { aspect-ratio: 16 / 9; border-radius: var(--radio-l); overflow: hidden; }
.visor-marco iframe { width: 100%; height: 100%; border: 0; }
.visor-cerrar {
  position: absolute;
  top: -2.9rem; right: 0;
  width: 2.2rem; height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: #ffffff1f;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--curva-suave);
}
.visor-cerrar:hover { background: var(--rojo); }

/* ---------- móvil: menú y barras de Safari ----------
   En iPhone la barra del navegador aparece y desaparece: por eso todo lo que
   tiene que caber en pantalla usa svh, y los bordes respetan el notch. */
.solo-estrecho { display: none; }
.btn-reservar { white-space: nowrap; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s3);
  padding: calc(5.5rem + env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--papel);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu.abriendo { animation: menu-entra .45s var(--curva) both; }
@keyframes menu-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.menu-lista { display: grid; }
.menu-lista a {
  display: grid;
  gap: .2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linea);
}
.menu-lista b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.menu-lista span { font-size: var(--t-s); color: var(--humo); }
.menu-pie { display: grid; gap: var(--s2); justify-items: start; font-size: var(--t-s); }
.menu-pie .btn { width: 100%; }
body.menu-abierto { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .solo-ancho { display: none; }
  .solo-estrecho { display: inline; }
  .cabecera-fila { gap: .6rem; }
  .btn-reservar { padding: .8rem 1.1rem; font-size: var(--t-xs); }
  .cabecera { padding-top: calc(1.1rem + env(safe-area-inset-top)); }
  .cabecera.fija { padding-top: calc(.6rem + env(safe-area-inset-top)); }
  .env, .env-ancho { padding-inline: max(0px, env(safe-area-inset-left)); }
  .pie { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
  .nav { display: none; }
  .tel span { display: none; }
  .menu-btn {
    display: inline-flex;
    margin-left: auto;
    padding: .7rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .cifra { border-left: 0; border-top: 1px solid var(--linea); }
  .reserva-caja, .sedes-rejilla, .opiniones-caja, .mapa-caja { grid-template-columns: 1fr; }
  .nota-grande { position: static; }
  .donde-fichas { grid-template-columns: 1fr 1fr; align-items: start; }
  .mapa-credito { grid-column: 1 / -1; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .heroe-pie { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .pie-rejilla, .donde-fichas { grid-template-columns: 1fr; }
  .franjas { grid-template-columns: 1fr; }
  .franja { display: flex; align-items: baseline; justify-content: space-between; }
  .widget-pie { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .widget-pie .btn { width: 100%; }
  .heroe-botones .btn { flex: 1 1 100%; }
  .dias { gap: .25rem; }
  .dia { padding: .5rem .1rem; }
}

/* ---------- respeto por quien no quiere movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .palabra > span { transform: none; }
  .heroe-foto img { animation: none; }
}