/* =====================================================================
   PROYECTO VALKIRIA — Escape room · Terrassa
   Aventura de espías, 1944: verde oliva, caqui y luz de farol.
   ===================================================================== */

/* ---------- 1. Variables ---------- */
:root {
  --fondo:    #1f2a1c;
  --fondo-2:  #161f14;
  --fondo-3:  #2a3826;
  --tinta:    #f3ebd6;
  --tinta-2:  #bcc5a8;
  --tinta-3:  rgba(243, 235, 214, .55);
  --linea:    rgba(243, 235, 214, .14);
  --linea-2:  rgba(243, 235, 214, .26);

  --papel:    #efe4c8;
  --papel-2:  #e3d4ad;
  --tinta-papel: #2c2a1e;

  --acento:   #f0b43c;
  --acento-h: #ffc859;
  --rojo:     #c8452f;
  --celeste:  #62c6d9;
  --verde:    #25d366;

  --display:  "Saira Stencil One", Impact, "Arial Narrow", sans-serif;
  --texto:    "Barlow", system-ui, -apple-system, sans-serif;
  --cond:     "Barlow Condensed", "Arial Narrow", sans-serif;
  --maquina:  "Special Elite", "Courier New", monospace;

  --ease:     cubic-bezier(.16, 1, .3, 1);
  --radio:    6px;
  --nav-h:    72px;
  --gutter:   clamp(16px, 4vw, 40px);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--texto); font-size: 17px; line-height: 1.6;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--acento); color: var(--fondo-2); }
:focus-visible { outline: 2px dashed var(--acento); outline-offset: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 16px; background: var(--acento); color: var(--fondo-2); font-weight: 700; text-decoration: none; border-radius: var(--radio); }
.skip:focus { top: 12px; }

.contenedor { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.bloque { position: relative; padding-block: clamp(80px, 11vw, 140px); }

h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: .95; letter-spacing: .01em;
  text-wrap: balance;
}
h2 em { font-style: normal; color: var(--acento); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento);
}
.etiqueta::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.etiqueta--pequena { font-size: .82rem; margin-bottom: 10px; }
.entradilla { color: var(--tinta-2); font-size: clamp(1.05rem, 1.35vw, 1.18rem); max-width: 56ch; margin-top: 20px; }
.entradilla a { color: var(--acento); }

.cabecera { margin-bottom: clamp(40px, 6vw, 64px); }
.cabecera--centro { text-align: center; }
.cabecera--centro .etiqueta::after { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.cabecera--centro .entradilla { margin-inline: auto; }

/* ---------- 3. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: var(--radio);
  font-family: var(--cond); font-weight: 700; font-size: 1.08rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  transition: transform .3s var(--ease), background-color .25s, color .25s, box-shadow .3s, border-color .25s;
}
.boton--principal { background: var(--acento); color: #1d1606; box-shadow: 0 10px 30px -10px rgba(240,180,60,.7), inset 0 -3px 0 rgba(0,0,0,.15); }
.boton--principal:hover { background: var(--acento-h); transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(240,180,60,.8), inset 0 -3px 0 rgba(0,0,0,.15); }
.boton--principal:active { transform: translateY(0); }
.boton--fantasma { border: 2px solid var(--linea-2); color: var(--tinta); }
.boton--fantasma:hover { border-color: var(--acento); color: var(--acento); }
.boton--whatsapp { background: var(--verde); color: #06301a; }
.boton--whatsapp:hover { background: #3be07c; transform: translateY(-2px); }
.boton--sm { min-height: 42px; padding: 10px 20px; font-size: .98rem; }
.boton--grande { min-height: 62px; padding: 18px 40px; font-size: 1.2rem; }

/* ---------- 4. Apertura (compuerta) ---------- */
.portal {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  display: grid; place-items: center; background: var(--fondo-2);
  animation: portalFundido 1.1s ease forwards;
}
.portal svg { width: min(40vmin, 260px); height: auto; animation: portalAbre 1.1s cubic-bezier(.22,.75,.2,1) forwards; }
@keyframes portalFundido { 0%, 55% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes portalAbre {
  0% { transform: scale(.5) rotate(-90deg); opacity: 0; }
  30% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { transform: scale(6) rotate(40deg); opacity: 0; }
}

/* ---------- 5. Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.nav.is-scrolled { background: rgba(22, 31, 20, .94); border-bottom-color: var(--linea); }
@supports (backdrop-filter: blur(8px)) {
  .nav.is-scrolled { background: rgba(22, 31, 20, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.nav__inner { height: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; color: var(--tinta); transition: transform .8s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-20deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .02em; }
.brand__text small { font-family: var(--cond); font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); margin-top: 5px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a:not(.boton) {
  position: relative; text-decoration: none; color: var(--tinta-2);
  font-family: var(--cond); font-weight: 600; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s;
}
.nav__links a:not(.boton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--acento); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav__links a:not(.boton):hover, .nav__links a.is-current { color: var(--tinta); }
.nav__links a:not(.boton):hover::after, .nav__links a.is-current::after { transform: scaleX(1); }
.nav__cta-mobile { display: none; }
.burger { display: none; width: 44px; height: 44px; position: relative; margin-left: auto; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 30px) 0 110px;
  background: radial-gradient(120% 90% at 75% 15%, #3a5a52 0%, #24382f 38%, #1a2618 75%, var(--fondo-2) 100%);
}
.hero__lienzo { position: absolute; inset: 0; z-index: -2; }
.hero__lienzo svg { width: 100%; height: 100%; }
.capa { transition: transform .9s var(--ease); will-change: transform; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22,31,20,.82) 0%, rgba(22,31,20,.45) 40%, transparent 70%),
    linear-gradient(180deg, transparent 70%, var(--fondo) 100%);
}
.reflector { transform-origin: 1086px 432px; animation: barrido 9s ease-in-out infinite alternate; }
@keyframes barrido { from { transform: rotate(-26deg); } to { transform: rotate(22deg); } }
.parpadea { animation: ventana 6s steps(1) infinite; }
.parpadea--2 { animation-duration: 8.5s; animation-delay: 1.3s; }
.parpadea--3 { animation-duration: 5.2s; animation-delay: 2.1s; }
@keyframes ventana { 0%, 78% { opacity: 1; } 80%, 92% { opacity: .15; } 94%, 100% { opacity: 1; } }
.estrellas circle { animation: brillo 3.6s ease-in-out infinite; }
.estrellas circle:nth-child(3n) { animation-delay: 1.2s; }
.estrellas circle:nth-child(3n+1) { animation-delay: 2.3s; }
@keyframes brillo { 50% { opacity: .35; } }

.hero__cuerpo { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.hero__etiqueta {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: rgba(240,180,60,.14); border: 1px solid rgba(240,180,60,.4);
  font-family: var(--cond); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .88rem; color: var(--acento);
}
.hero h1 {
  margin-top: 24px;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.4rem, 10.5vw, 9.4rem); line-height: .86; letter-spacing: -.005em;
  max-width: 9.5ch;
  text-shadow: 0 18px 50px rgba(10, 16, 9, .7);
}
.hero h1 em {
  display: block; margin-top: 18px; font-style: normal;
  font-family: var(--cond); font-weight: 700; font-size: .2em; letter-spacing: .3em; color: var(--acento);
}
.hero__gancho { margin-top: 26px; max-width: 34ch; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--tinta); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.valoracion {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; text-decoration: none;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(22,31,20,.6); border: 1px solid var(--linea);
  transition: border-color .25s;
}
.valoracion:hover { border-color: var(--acento); }
.valoracion__nota { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.valoracion__estrellas { color: var(--acento); letter-spacing: 2px; }
.valoracion__texto { color: var(--tinta-2); font-size: .95rem; }

/* ---------- 7. Ficha ---------- */
.ficha { position: relative; z-index: 3; margin-top: -60px; padding-inline: var(--gutter); }
.ficha__inner {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--papel); color: var(--tinta-papel); border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.ficha__dato { padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.ficha__dato + .ficha__dato { border-left: 1px dashed rgba(44,42,30,.25); }
.ficha__dato strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; }
.ficha__dato > span { font-family: var(--cond); font-weight: 600; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(44,42,30,.7); }

/* ---------- 8. Reveal ---------- */
[data-reveal] { opacity: 0; translate: 0 32px; }
html [data-reveal] { transition: opacity .8s var(--ease), translate .8s var(--ease), transform .5s var(--ease), border-color .3s, background-color .3s; }
[data-reveal].is-visible { opacity: 1; translate: none; }
.no-js [data-reveal] { opacity: 1; translate: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- 9. La misión ---------- */
.mision { padding-top: clamp(100px, 12vw, 150px); }
.mision__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px);
  grid-template-areas: "cab dossier" "real dossier";
  align-items: start;
}
.mision .cabecera { grid-area: cab; margin-bottom: 0; }
.dossier { grid-area: dossier; }
.real { grid-area: real; }

.dossier {
  position: relative; padding: clamp(28px, 4vw, 44px); padding-bottom: 96px;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(180deg, var(--papel), var(--papel-2));
  color: var(--tinta-papel); border-radius: 4px;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.65);
  transform: rotate(1.4deg);
}
.dossier::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(44,42,30,.08) 31px 32px); }
.dossier__clip { position: absolute; top: -18px; right: 48px; width: 26px; height: 62px; border: 3px solid #9a978c; border-radius: 13px; border-bottom-color: transparent; }
.dossier__cabeza { font-family: var(--cond); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: rgba(44,42,30,.6); padding-bottom: 12px; border-bottom: 1px dashed rgba(44,42,30,.35); }
.dossier__titulo { font-family: var(--maquina); font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.3; margin: 20px 0 16px; }
.dossier__texto { font-family: var(--maquina); font-size: 1.02rem; line-height: 1.75; }
.dossier__texto p + p { margin-top: 12px; }
.dossier__firma { margin-top: 20px !important; }
.sello {
  position: absolute; right: clamp(16px, 3vw, 32px); bottom: clamp(20px, 3vw, 32px);
  font-family: var(--display); text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: .08em;
  color: var(--rojo); border: 4px double var(--rojo); padding: 2px 14px; border-radius: 4px;
  mix-blend-mode: multiply; opacity: 0; transform: rotate(-12deg) scale(2.2);
}
.dossier.is-visible .sello { animation: sello .45s .6s var(--ease) forwards; }
.no-js .sello { opacity: .8; transform: rotate(-12deg); }
@keyframes sello { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 70% { opacity: .9; transform: rotate(-12deg) scale(.94); } 100% { opacity: .8; transform: rotate(-12deg) scale(1); } }

.real { padding: 28px 30px; border-radius: 10px; background: var(--fondo-3); border: 1px solid var(--linea); }
.real h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1; margin-bottom: 12px; }
.real p:last-child { color: var(--tinta-2); }

/* ---------- 10. Modalidades ---------- */
.modos { background: var(--fondo-2); transition: background-color .6s; }
.modos[data-mode="aventura"] { --modo: var(--acento); }
.modos[data-mode="terror"]   { --modo: #e0563d; background: #1a1110; }
.modos[data-mode="kids"]     { --modo: var(--celeste); background: #13262b; }
.modos h2 em { color: var(--modo); transition: color .5s; }

.modos__tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 48px); }
.tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; border-radius: 999px;
  background: var(--fondo-3); border: 2px solid var(--linea);
  font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; color: var(--tinta-2);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.tab:hover { color: var(--tinta); transform: translateY(-2px); }
.tab__icono { font-size: 1.1rem; }
.tab.is-active { background: var(--modo); border-color: var(--modo); color: #1a1406; }

.panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.panel + .panel { margin-top: 64px; }
.is-enhanced .panel { display: none; margin-top: 0; }
.is-enhanced .panel.is-active { display: grid; animation: panelEntra .6s var(--ease); }
@keyframes panelEntra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.panel__arte { border-radius: 14px; overflow: hidden; background: var(--fondo-3); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); aspect-ratio: 4 / 3; }
.panel__arte svg { width: 100%; height: 100%; }
.panel[data-panel="aventura"] .panel__arte { background: #2d3b28; }
.aguja { animation: aguja 5s ease-in-out infinite; }
@keyframes aguja { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(35deg); } }
.ruta { animation: ruta 2.4s linear infinite; }
@keyframes ruta { to { stroke-dashoffset: -38; } }
.ojos { animation: ojos 5s steps(1) infinite; }
@keyframes ojos { 0%, 60% { opacity: 1; } 62%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }
.linterna-haz { animation: haz 4s ease-in-out infinite alternate; transform-origin: 40px 250px; }
@keyframes haz { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.lupa { animation: lupa 5s ease-in-out infinite; }
@keyframes lupa { 0%, 100% { transform: translate(250px, 130px); } 50% { transform: translate(210px, 150px); } }

.panel__pre { font-family: var(--cond); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .92rem; color: var(--modo); }
.panel__titulo { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 6.4vw, 5.2rem); line-height: .9; margin: 10px 0 18px; }
.panel__texto { color: var(--tinta-2); max-width: 50ch; }
.datos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 20px; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.datos div { padding: 12px 16px; }
.datos div + div { border-left: 1px solid var(--linea); }
.datos dt { font-family: var(--cond); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.datos dd { font-weight: 600; margin-top: 2px; line-height: 1.3; }
.nivel { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.nivel__etiqueta { font-family: var(--cond); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .88rem; color: var(--tinta-3); }
.nivel__barras { display: inline-flex; gap: 5px; }
.nivel__barras i { width: 24px; height: 10px; border-radius: 3px; background: var(--linea); }
.nivel__barras[data-nivel="1"] i:nth-child(-n+1),
.nivel__barras[data-nivel="2"] i:nth-child(-n+2),
.nivel__barras[data-nivel="3"] i:nth-child(-n+3),
.nivel__barras[data-nivel="4"] i:nth-child(-n+4),
.nivel__barras[data-nivel="5"] i:nth-child(-n+5) { background: var(--modo); }
.nivel__nota { font-family: var(--cond); font-weight: 700; color: var(--modo); letter-spacing: .06em; }
.modos .panel .boton--principal { background: var(--modo); box-shadow: none; }
.modos[data-mode="terror"] .panel .boton--principal { color: #fff3e6; }
.modos.is-flicker { animation: parpadeo .7s steps(1) 1; }
@keyframes parpadeo { 0% { filter: brightness(1); } 15% { filter: brightness(.35); } 25% { filter: brightness(1.05); } 40% { filter: brightness(.3); } 55%, 100% { filter: brightness(1); } }

/* ---------- 11. Por qué ---------- */
.porque__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carta { padding: 30px 26px; border-radius: 12px; background: var(--fondo-3); border: 1px solid var(--linea); }
.carta:hover { border-color: rgba(240,180,60,.5); }
.carta__icono { width: 46px; height: 46px; margin-bottom: 22px; fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carta h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; margin-bottom: 10px; }
.carta p { color: var(--tinta-2); font-size: .98rem; }

/* ---------- 12. Pasos ---------- */
.pasos { background: var(--fondo-2); }
.pasos__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.pasos__lista::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; border-top: 2px dashed rgba(240,180,60,.35); }
.pasos__lista li { position: relative; text-align: center; padding: 0 8px; }
.pasos__num {
  position: relative; display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--fondo-2); border: 2px solid var(--acento); color: var(--acento);
  font-family: var(--display); font-size: 1.6rem; margin-bottom: 18px;
}
.pasos__lista h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; margin-bottom: 8px; }
.pasos__lista p { color: var(--tinta-2); font-size: .98rem; }

/* ---------- 13. Opiniones ---------- */
.opiniones__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(36px, 5vw, 56px); }
.opiniones__cabeza .cabecera { margin-bottom: 0; }
.nota-google { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 14px; background: var(--papel); color: var(--tinta-papel); text-decoration: none; transition: transform .3s var(--ease); }
.nota-google__num { font-family: var(--display); font-size: 3.6rem; line-height: .9; }
.nota-google__lado { display: flex; flex-direction: column; font-weight: 600; line-height: 1.3; }
.nota-google__estrellas { color: #e2a21e; font-size: 1.2rem; letter-spacing: 2px; }
.nota-google__ver { font-family: var(--cond); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; color: var(--rojo); margin-top: 4px; }
.opiniones__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.opinion { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 30px; border-radius: 12px; background: var(--fondo-3); border: 1px solid var(--linea); }
.opinion p { font-size: 1.06rem; line-height: 1.6; }
.opinion footer { display: flex; align-items: center; gap: 12px; }
.opinion__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: #1d1606; font-family: var(--cond); font-weight: 700; }
.opinion footer span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.opinion small { color: var(--tinta-3); }
.opiniones__cortas { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 30px; border-radius: 12px; border: 2px dashed rgba(240,180,60,.35); }
.opiniones__cortas p { font-family: var(--maquina); font-size: 1.08rem; color: var(--tinta); }

/* ---------- 14. FAQ ---------- */
.faq { background: var(--fondo-2); }
.faq__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.faq details { border-bottom: 1px solid var(--linea-2); }
.faq details:first-child { border-top: 1px solid var(--linea-2); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; font-weight: 600; font-size: clamp(1.08rem, 1.5vw, 1.25rem); transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.7rem; color: var(--acento); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--acento); }
.faq details p { color: var(--tinta-2); padding: 0 40px 24px 0; }

/* ---------- 15. Reserva ---------- */
.reserva { background: radial-gradient(70% 60% at 50% 0%, rgba(240,180,60,.12), transparent 70%), var(--fondo); }
.reserva__tarjeta { max-width: 980px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: 16px; background: var(--fondo-3); border: 1px solid var(--linea-2); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.elige { border: 0; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.elige legend { font-family: var(--cond); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .92rem; color: var(--tinta-3); margin-bottom: 12px; padding: 0; }
.elige label { position: relative; cursor: pointer; }
.elige input { position: absolute; opacity: 0; pointer-events: none; }
.elige span { display: block; padding: 14px 10px; text-align: center; border-radius: 10px; border: 2px solid var(--linea-2); font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; transition: background-color .25s, border-color .25s, color .25s; }
.elige label:hover span { border-color: var(--tinta-2); }
.elige input:checked + span { background: var(--acento); border-color: var(--acento); color: #1d1606; }
.elige input:focus-visible + span { outline: 2px dashed var(--tinta); outline-offset: 3px; }
.reserva__calendario { min-height: 420px; border-radius: 12px; background: rgba(0,0,0,.18); overflow: hidden; }
.reserva__calendario--listo { min-height: 0; background: none; }
.reserva__cargando { display: grid; place-items: center; min-height: 420px; margin: 0; color: var(--tinta-3); font-family: var(--cond); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.reserva__calendario--listo .reserva__cargando { display: none; }
.reserva__fallo { padding: 40px 24px; text-align: center; }
.reserva__fallo h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 8px; }
.reserva__fallo p { color: var(--tinta-2); }
.reserva__otra { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--linea-2); text-align: center; }
.reserva__texto { font-size: 1.08rem; color: var(--tinta-2); }
.reserva__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }

/* ---------- 16. Dónde ---------- */
.donde__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.donde__lista { margin: 30px 0; display: grid; gap: 18px; }
.donde__lista li { display: grid; gap: 2px; padding-left: 16px; border-left: 3px solid var(--acento); }
.donde__lista span { font-family: var(--cond); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--tinta-3); }
.donde__lista strong { font-weight: 600; font-size: 1.1rem; }
.donde__lista a { text-decoration: none; }
.mapa { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transform: rotate(-1.2deg); }
.mapa svg { width: 100%; height: auto; }
.pin { animation: pin 2.2s var(--ease) infinite; }
@keyframes pin { 0%, 100% { transform: translate(252px, 170px); } 50% { transform: translate(252px, 158px); } }
.mapa__boton { position: absolute; right: 16px; bottom: 16px; padding: 10px 16px; border-radius: 999px; background: var(--fondo); color: var(--tinta); font-family: var(--cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }

/* ---------- 17. CTA final ---------- */
.final { padding: clamp(80px, 10vw, 130px) 0; text-align: center; background: linear-gradient(180deg, var(--fondo) 0%, #2d3b28 100%); }
.final h2 { font-size: clamp(2.8rem, 7vw, 6rem); }
.final p { color: var(--tinta-2); max-width: 46ch; margin: 18px auto 32px; font-size: 1.12rem; }

/* ---------- 18. Pie ---------- */
.pie { background: var(--fondo-2); padding-top: 70px; border-top: 1px solid var(--linea); }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; }
.pie__logo { font-family: var(--display); text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin-bottom: 12px; }
.pie__texto { color: var(--tinta-3); max-width: 38ch; }
.pie__col { display: flex; flex-direction: column; gap: 8px; }
.pie__titulo { font-family: var(--cond); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: var(--acento); margin-bottom: 4px; }
.pie__col a, .pie__col span { color: var(--tinta-2); text-decoration: none; }
.pie__col a:hover { color: var(--tinta); }
.pie__legal { margin-top: 50px; padding-block: 22px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: .9rem; }

/* ---------- 19. Tilt ---------- */
.tilt { transition: transform .5s var(--ease); }

/* ---------- 20. Responsive ---------- */
@media (max-width: 1060px) {
  .nav__links { gap: 18px; }
  .porque__grid { grid-template-columns: 1fr 1fr; }
  .ficha__inner { grid-template-columns: repeat(3, 1fr); }
  .ficha__dato:nth-child(4) { border-left: 0; }
  .ficha__dato:nth-child(n+4) { border-top: 1px dashed rgba(44,42,30,.25); }
}
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  body { font-size: 16px; }
  .burger { display: block; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; flex-direction: column; gap: 0;
    padding: 28px var(--gutter); background: rgba(22,31,20,.98);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s, transform .4s var(--ease), visibility .3s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav.is-open { background: rgba(22,31,20,.98); }
  .nav__links a:not(.boton) { font-family: var(--display); font-size: 2rem; color: var(--tinta); padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .nav__links a:not(.boton)::after { display: none; }
  .nav__cta-mobile { display: inline-flex; margin-top: 26px; }

  .hero { align-items: flex-end; padding-bottom: 110px; }
  .hero__velo { background: linear-gradient(180deg, rgba(22,31,20,.25) 0%, rgba(22,31,20,.55) 45%, rgba(22,31,20,.9) 80%, var(--fondo) 100%); }
  .hero h1 { font-size: clamp(3rem, 16vw, 6rem); }
  .hero__acciones .boton { flex: 1 1 100%; }

  .mision__grid { grid-template-columns: 1fr; grid-template-areas: "cab" "dossier" "real"; }
  .dossier { transform: rotate(.6deg); }
  .panel { grid-template-columns: 1fr; }
  .panel .boton { width: 100%; }
  .pasos__lista { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .pasos__lista::before { display: none; }
  .opiniones__grid { grid-template-columns: 1fr; }
  .faq__grid, .donde__grid { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ficha__inner { grid-template-columns: 1fr 1fr; }
  .ficha__dato:nth-child(n) { border-left: 0; border-top: 1px dashed rgba(44,42,30,.25); }
  .ficha__dato:nth-child(-n+2) { border-top: 0; }
  .ficha__dato:nth-child(even) { border-left: 1px dashed rgba(44,42,30,.25); }
  .ficha__dato:last-child { grid-column: 1 / -1; border-left: 0; }
  .porque__grid, .pasos__lista { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .datos div + div { border-left: 0; border-top: 1px solid var(--linea); }
  .elige { grid-template-columns: 1fr; }
  .modos__tabs { gap: 6px; }
  .tab { padding: 10px 14px; font-size: 1rem; gap: 6px; }
  .tab__icono { display: none; }
  .reserva__botones .boton { width: 100%; }
  .pie__grid { grid-template-columns: 1fr; }
  .brand__text small { display: none; }
  .valoracion__texto { font-size: .85rem; }
}

/* ---------- 21. Movimiento reducido: solo lo intrusivo ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portal { display: none; }
  .modos.is-flicker { animation: none; }
}

/* ---------- 22. Páginas de estado del pago ---------- */
.estado-pagina { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(90% 70% at 50% 0%, #2d4238 0%, var(--fondo) 55%, var(--fondo-2) 100%); }
.estado-barra { max-width: 1200px; width: 100%; margin-inline: auto; padding: 20px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.estado-barra .volver { font-family: var(--cond); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .95rem; color: var(--tinta-2); text-decoration: none; }
.estado-barra .volver:hover { color: var(--acento); }
.estado { flex: 1; display: grid; place-items: center; padding: 30px var(--gutter) 80px; }
.estado__tarjeta { position: relative; width: 100%; max-width: 640px; text-align: center; padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 52px); border-radius: 18px; background: var(--fondo-3); border: 1px solid var(--linea-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.estado__icono { width: 116px; height: 116px; margin: 0 auto 26px; }
.estado__icono .aro { stroke-dasharray: 340; stroke-dashoffset: 340; animation: dibujar 1s .2s var(--ease) forwards; }
.estado__icono .marca { stroke-dasharray: 90; stroke-dashoffset: 90; animation: dibujar .6s .9s var(--ease) forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
.estado__sello { display: inline-block; margin-bottom: 18px; padding: 4px 16px; border: 3px double currentColor; border-radius: 4px; font-family: var(--display); font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg); }
.estado--ok .estado__sello { color: var(--acento); }
.estado--error .estado__sello { color: #e0563d; }
.estado h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 3.8rem); line-height: .95; }
.estado h1 em { font-style: normal; display: block; color: var(--acento); }
.estado--error h1 em { color: #e0563d; }
.estado__texto { color: var(--tinta-2); font-size: 1.1rem; margin: 20px auto 0; max-width: 46ch; }
.estado__aviso { display: flex; gap: 14px; align-items: flex-start; text-align: left; margin: 28px 0 0; padding: 18px 20px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px dashed var(--linea-2); }
.estado__aviso svg { flex-shrink: 0; width: 28px; height: 28px; margin-top: 2px; }
.estado__aviso strong { display: block; margin-bottom: 2px; }
.estado__aviso p { color: var(--tinta-2); font-size: .98rem; }
.estado__lista { text-align: left; margin: 24px 0 0; display: grid; gap: 10px; }
.estado__lista li { position: relative; padding-left: 26px; color: var(--tinta-2); }
.estado__lista li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.estado--error .estado__lista li::before { background: #e0563d; }
.estado__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.estado__pie { margin-top: 26px; color: var(--tinta-3); font-size: .95rem; }
.estado__pie a { color: var(--acento); }
@media (max-width: 600px) { .estado__botones .boton { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .estado__icono .aro, .estado__icono .marca { animation: none; stroke-dashoffset: 0; } }

/* ---------- 23. Ajustes del calendario de erdpanel sobre fondo oscuro ---------- */
#reserva-calendario #ercalendar h2,
#reserva-calendario #ercalendar h3 { color: var(--tinta) !important; font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
#reserva-calendario #ercalendar label,
#reserva-calendario #ercalendar p { color: var(--tinta-2); }
.reserva__nota { margin: 0 0 22px; padding: 14px 18px; border-radius: 10px; background: rgba(240,180,60,.1); border: 1px solid rgba(240,180,60,.35); color: var(--tinta-2); text-align: center; }
.reserva__nota strong { color: var(--acento); }
/* 404 */
.estado__codigo { font-family: var(--display); font-size: clamp(4rem, 14vw, 6.5rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(240,180,60,.55); margin-bottom: 14px; }
.estado__aguja { transform-origin: 60px 60px; animation: perdida 4s ease-in-out infinite; }
@keyframes perdida { 0% { transform: rotate(0deg); } 20% { transform: rotate(140deg); } 35% { transform: rotate(95deg); } 55% { transform: rotate(-120deg); } 70% { transform: rotate(-60deg); } 85% { transform: rotate(200deg); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .estado__aguja { animation-duration: 12s; } }