/* ==========================================================================
   TODO EL ESTILO DE LA WEB, EN UN SOLO FICHERO
   ==========================================================================
   Generado por scripts/unir-css.mjs. NO SE EDITA A MANO: se tocan las hojas
   sueltas de styles/ y se vuelve a generar.

   La web pedía 26 hojas en cada página, y el navegador no pinta una letra
   hasta que llegan todas: 26 esperas en fila antes de arrancar. En una sola
   son 25 peticiones menos y exactamente el mismo CSS.

   El orden es el que aplica el navegador, no el del HTML. Ver el comentario
   del generador.
   ========================================================================== */


/* ===== base.css ===== */
:root{--bg:#0a090d;--ink:#f7f7ff;--muted:#b2b6c6;--line:rgba(255,255,255,.10);--pink:#ff2e80;--pink2:#ff6aa8;--ink-dim:#d7dbe2;--glass:rgba(0,0,0,.52);--glass-strong:rgba(0,0,0,.66);--radius:22px;--shadow:0 34px 100px rgba(0,0,0,.45)}
*{box-sizing:border-box}
html,body{margin:0;background:#0a090d;color:var(--ink);font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1180px;padding-inline:clamp(16px,3vw,28px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav{position:fixed;top:0;left:0;right:0;z-index:110;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;box-shadow:none}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,3vw,28px);gap:14px}
.brand img.logo{height:80px;width:auto;display:block}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 12px;border-radius:999px}
.dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--pink),var(--pink2))}
.nav-links{display:flex;gap:16px;align-items:center}
.nav-links a{padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:rgba(255,46,128,.12)}
.nav-links a.active:not(.btn-primary){background:rgba(255,46,128,.18);border:1px solid rgba(255,46,128,.35)}
/* Mantener aspecto del botón principal en estado activo dentro del menú */
.nav-links a.btn-primary.active{background:linear-gradient(135deg,var(--pink),var(--pink2));color:#ffffff;border:none;}
.nav .btn-primary{color:#fff;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.16);transition:transform .2s,background .2s}
.btn:hover{}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--pink2));color:#ffffff;border:none;font-weight:800;}
.btn-ghost{background:rgba(255,255,255,.06)}
.hamburger{display:none;gap:8px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06)}
.hamburger span{width:18px;height:2px;background:#fff;display:block;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
@media (max-width:980px){.hamburger{display:inline-flex}.nav-links{position:fixed;inset:64px 14px auto 14px;flex-direction:column;gap:8px;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px;border:1px solid var(--line);border-radius:16px;transform:translateY(-20px);opacity:0;pointer-events:none;transition:.2s}.nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}.nav-links a{display:block;width:100%;padding:12px 16px;border-radius:10px;text-align:center}.brand img.logo{height:54px}}
[data-route]{display:none}
[data-route].active{display:block}
header.hero{position:relative;overflow:hidden}
.bg-video{position:absolute;inset:0;z-index:-2;opacity:.28}
.bg-gradient{display:none}
.hero-inner{padding:120px 0 80px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px}
.kicker{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);margin-bottom:12px}
.title{font-size:clamp(38px,7.2vw,82px);line-height:1.04;margin:0 0 10px;letter-spacing:-.5px}
.title em{-webkit-background-clip:text;background-clip:text;color:transparent;background:linear-gradient(135deg,var(--pink),var(--pink2))}
.hero p{color:var(--ink-dim);max-width:60ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.stat{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);padding:16px;border-radius:16px;text-align:center}
section{padding:96px 0}
.section-title{font-size:clamp(26px,4.8vw,36px);margin:0 0 8px;position:relative}
.section-sub{color:#aeb6c1;margin:0 0 26px;max-width:70ch}
.grid{display:grid;gap:18px}
@media(min-width:900px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.chip{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:#c2c8d1;border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px}
.circle{display:grid;gap:18px}
@media(min-width:960px){.circle{grid-template-columns:1fr 1fr 1fr}}
.carousel{position:relative}
.track{display:flex;overflow:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}
.slide{min-width:80%;scroll-snap-align:center;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.carousel .navbtn{position:absolute;top:40%;transform:translateY(-50%);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid var(--line);padding:10px;border-radius:12px;cursor:pointer}
.carousel .prev{left:6px}.carousel .next{right:6px}
@media(min-width:900px){.slide{min-width:32%}}
.slide img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover}
.t-slide{min-width:90%;scroll-snap-align:center}
@media(min-width:900px){.t-slide{min-width:48%}}
.bubble{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);padding:16px;border-radius:18px}
.drag{cursor:grab;user-select:none}
.local-card{position:relative;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:var(--glass)}
.stack{position:relative;height:220px}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .4s}
.stack img:nth-child(2){transform:translate(8px,8px);opacity:.85}
.stack img:nth-child(3){transform:translate(16px,16px);opacity:.7}
.local-card.open .stack img{position:static;transform:none;opacity:1}
.local-card .meta{padding:14px}
form .row{display:grid;gap:12px}
@media(min-width:820px){form .row.cols-2{grid-template-columns:1fr 1fr}}
input,select,textarea{padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:var(--glass-strong);color:var(--ink)}
footer{padding:44px 0;color:#aeb6c1;font-size:14px}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:24px 0}
.float{position:fixed;right:18px;bottom:18px;z-index:130;display:flex;flex-direction:column;gap:10px}
.fab-wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:130;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(37,211,102,.3),0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .3s cubic-bezier(0.4,0,0.2,1),box-shadow .3s cubic-bezier(0.4,0,0.2,1);overflow:hidden;contain:layout}
.fab-wa::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);border-radius:50%;opacity:0;transition:opacity .3s ease}
.fab-wa:hover{box-shadow:0 16px 32px rgba(37,211,102,.4),0 8px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.fab-wa:hover::before{opacity:1}
.fab-wa:active{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 16px rgba(37,211,102,.3),0 4px 8px rgba(0,0,0,.2)}
.fab-wa:focus-visible{outline:3px solid rgba(255,255,255,.5);outline-offset:2px}
.fab-wa .wa-icon{font-size:28px;line-height:1;position:relative;z-index:1;transition:transform .3s ease}
.fab-wa:hover .wa-icon{animation:wa-bounce .6s ease}
@keyframes wa-bounce{0%,100%{transform:scale(1)}25%{transform:scale(1.1) rotate(-5deg)}50%{transform:scale(1.15) rotate(5deg)}75%{transform:scale(1.1) rotate(-3deg)}}
.fab-wa .wa-ripple{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease,opacity .6s ease;opacity:0}
.fab-wa:active .wa-ripple{width:100px;height:100px;opacity:1}
.fab-wa::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid rgba(37,211,102,.3);border-radius:50%;opacity:0;transition:opacity .3s ease}
.fab-wa:hover::after{opacity:1;animation:wa-pulse 2s infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:.4}100%{transform:scale(1.2);opacity:0}}
@media (max-width:768px){.fab-wa{width:56px;height:56px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}.fab-wa .wa-icon{font-size:24px}}
@media (max-width:480px){.fab-wa{width:52px;height:52px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.fab-wa .wa-icon{font-size:22px}}
:where([data-route] h1,[data-route] h2)[tabindex="-1"]:focus{outline:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:12px}
.nav-links a:focus-visible,.btn:focus-visible,.nav .hamburger:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:12px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important}.fab-wa::after{display:none}}

/* Keyframe animations */
@keyframes wa-bounce{0%,100%{transform:scale(1)}25%{transform:scale(1.1) rotate(-5deg)}50%{transform:scale(1.15) rotate(5deg)}75%{transform:scale(1.1) rotate(-3deg)}}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:.4}100%{transform:scale(1.2);opacity:0}}

/* Focus and accessibility */
:where([data-route] h1,[data-route] h2)[tabindex="-1"]:focus{outline:none !important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:12px}
.nav-links a:focus-visible,.btn:focus-visible,.nav .hamburger:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:12px}

/* Global video background */
.site-bg-video{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;transition:opacity .45s ease}
/* El video de fondo asomaba 4px por el borde derecho en movil y aparecia
   un desplazamiento lateral. El clip en html lo corta sin convertir el body
   en contenedor de scroll (con overflow hidden en body se rompe scrollTo). */
html{overflow-x:clip}
.site-bg-video video{width:100%;height:100%;object-fit:cover;opacity:.32;transition:opacity .45s ease}

/* El vídeo va en TODA la web y de arriba abajo: es de Emilio y es lo que da
   ambiente. Lo que sí lleva encima es el velo de aquí abajo, que es lo que
   hace que el texto se lea igual pase el fotograma que pase.
   (Si algún día se quiere solo en la portada, `ui.js` ya marca el <body> con
   `tgm-portada`: basta con volver a poner aquí la regla que lo apagaba.) */

/* Velo sobre el vídeo: el titular de la portada tiene que leerse igual sea
   cual sea el fotograma que esté pasando por detrás. */
.site-bg-video::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,13,.5) 0%,rgba(10,9,13,.3) 45%,rgba(10,9,13,.8) 100%)}
main,header,section,footer{position:relative;z-index:1}

/* La cabecera es transparente SOLO sobre la portada. Aquí había un bloque con
   `!important` que anulaba `.nav-solida` de más abajo, así que el menú se
   quedaba transparente los diez mil píxeles de página: los títulos de sección
   pasaban por detrás de los enlaces y no se leía ni una cosa ni la otra. */
.nav:not(.nav-solida){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;box-shadow:none}
@media (max-width:980px){.hero-inner{grid-template-columns:1fr;gap:20px;padding:96px 0 60px}}

/* ====== Cabecera con fondo al hacer scroll ====== */
.nav.nav-solida{background:rgba(10,9,13,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* ====== Barra de accion fija en movil ====== */
#tgm-barra{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,9,13,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.10);transform:translateY(110%);transition:transform .25s ease}
#tgm-barra.tb-visible{transform:none}
#tgm-barra .tb-btn{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-weight:700;font-size:15px;text-decoration:none}
#tgm-barra .tb-oro{background:linear-gradient(135deg,#FFD46A,#D4AF37);color:#1a1a1a}
#tgm-barra .tb-wa{background:#25D366;color:#fff}
@media (max-width:700px){#tgm-barra{display:flex}}
/* mientras el banner de cookies este abierto, la barra cede el sitio */
body:has(#tgm-cookies) #tgm-barra{display:none}
/* que el pie no quede tapado por la barra en movil */
@media (max-width:700px){.site-footer .f-legal{padding-bottom:96px}}
@media (prefers-reduced-motion:reduce){#tgm-barra{transition:none}}

/* ====== Transicion suave entre rutas de la SPA ====== */
@media (prefers-reduced-motion:no-preference){
  [data-route].active{animation:rutaIn .22s ease}
  @keyframes rutaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* Con la barra movil visible, la burbuja de WhatsApp sobra (la barra ya lo lleva) */
@media (max-width:700px){
  body:has(#tgm-barra.tb-visible) .fab-wa{opacity:0;pointer-events:none;transition:opacity .2s ease}
}


/* ===== colors-gold.css ===== */
:root {
  /* Paleta de colores dorados basada en el logo */
  --gold-light: #FFD46A;      /* Color principal claro del logo */
  --gold-medium: #D4AF37;     /* Color dorado medio */
  --gold-dark: #8C6A2E;       /* Color dorado oscuro/sombra */
  --gold-deep: #5A3E1A;       /* Color dorado profundo/bordes */
  
  /* Variaciones para gradientes */
  --gold-highlight: #FFE08A;  /* Destalles brillantes */
  --gold-midtone: #CFA23A;    /* Tono medio */
  --gold-shadow: #6E4F1F;     /* Sombra profunda */
  --gold-ring: #E2B54A;       /* Color del anillo */
  --gold-ring-light: #FFF0A6; /* Brillo del anillo */
  --gold-ring-dark: #7A5827;  /* Sombra del anillo */
  
  /* Aplicaciones específicas */
  --gold-primary: var(--gold-medium);
  --gold-secondary: var(--gold-light);
  --gold-accent: var(--gold-dark);
  --gold-gradient: linear-gradient(135deg, var(--gold-light), var(--gold-medium), var(--gold-dark));
  --gold-gradient-soft: linear-gradient(135deg, var(--gold-light), var(--gold-medium));
  --gold-gradient-deep: linear-gradient(135deg, var(--gold-medium), var(--gold-dark));
  
  /* Reemplazos para colores anteriores */
  --pink: var(--gold-medium) !important;
  --pink2: var(--gold-light) !important;
  --pink-dark: var(--gold-dark) !important;
  --pink-deep: var(--gold-deep) !important;
  
  /* Variables del formulario actualizadas */
  --form-focus: var(--gold-medium) !important;
  --form-focus-glow: rgba(212, 175, 55, 0.2) !important;
  --form-focus-light: rgba(255, 212, 106, 0.15) !important;
  
  /* Sombras doradas */
  --gold-shadow-light: 0 4px 20px rgba(212, 175, 55, 0.3);
  --gold-shadow-medium: 0 8px 32px rgba(212, 175, 55, 0.4);
  --gold-shadow-deep: 0 12px 40px rgba(212, 175, 55, 0.5);
  
  /* Texto sobre fondos dorados */
  --text-on-gold: #1a1a1a;
  --text-on-gold-light: #333333;
}

/* Clases de utilidad dorada */
.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-text-light {
  background: var(--gold-gradient-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-bg {
  background: var(--gold-gradient);
}

.gold-bg-light {
  background: var(--gold-gradient-soft);
}

.gold-bg-dark {
  background: var(--gold-gradient-deep);
}

/* Botones dorados */
.btn-gold {
  background: var(--gold-gradient);
  border: none;
  color: var(--text-on-gold);
  transition: all 0.3s ease;
}

.btn-gold:hover {
}

.btn-gold:active {
  transform: translateY(0);
}

/* Efectos especiales dorados */
.gold-glow {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.gold-ring {
  border: 2px solid var(--gold-ring);
  box-shadow: 0 0 0 4px var(--gold-ring-light), 0 0 20px var(--gold-ring-dark);
}

/* Animaciones doradas */
@keyframes gold-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.gold-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  background-size: 200% 100%;
  animation: gold-shimmer 2s infinite;
}

/* ===== home.css ===== */
[data-route="home"] .hero .container,[data-route="home"] .hero .hero-inner{justify-items:center;text-align:center}
[data-route="home"] .hero p{max-width:900px;margin-left:auto;margin-right:auto}
[data-route="home"] .hero{position:relative;isolation:isolate}
[data-route="home"] .hero .bg-video,[data-route="home"] .hero .bg-gradient{position:absolute;inset:0;z-index:-1}
[data-route="home"] .hero .hero-inner{display:flex !important;align-items:center;justify-content:center;min-height:min(100svh,900px);padding-block:clamp(28px,6vw,96px);text-align:center}
[data-route="home"] .hero .hero-core{width:min(100%,960px);margin-inline:auto}
[data-route="home"] .hero .title{margin:8px 0 10px}
[data-route="home"] .hero p{margin:0 0 16px}
[data-route="home"] .hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:12px 0 14px}
[data-route="home"] .btn{padding:12px 16px;border-radius:12px;font-weight:600;line-height:1;transform:translateZ(0)}
[data-route="home"] .btn-ghost{background:rgba(255,255,255,.06);outline:1px solid rgba(255,255,255,.14)}
[data-route="home"] .btn-ghost:hover{background:rgba(255,255,255,.12)}
[data-route="home"] .btn-wa{background:#25D366;color:#fff !important;border:none;outline:1px solid rgba(255,255,255,.12)}
[data-route="home"] .btn-wa:hover{}
[data-route="home"] .stats{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px;opacity:.95}
[data-route="home"] .stat{padding:12px 16px;border-radius:12px;min-width:150px;background:rgba(20,20,24,.32);outline:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px rgba(0,0,0,.28)}
[data-route="home"] .stat b{font-size:clamp(18px,2.2vw,22px);display:block}
[data-route="home"] .stat small{opacity:.9}
@media (max-width:640px){[data-route="home"] .stat{min-width:130px}}
[data-route="home"] .checker{margin-top:16px;display:grid;gap:12px;grid-template-columns:1.2fr 1fr auto;align-items:end}
[data-route="home"] .checker .field{display:flex;flex-direction:column;gap:6px;text-align:left}
[data-route="home"] .checker input{height:46px;border-radius:10px;padding:0 12px;background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.15);outline:none}
[data-route="home"] .checker input:focus{border-color:rgba(255,255,255,.35)}
[data-route="home"] .checker small.hint{opacity:.8}
@media (max-width:720px){[data-route="home"] .checker{grid-template-columns:1fr}}
[data-route="home"] .section-title{margin:28px 0 6px}
[data-route="home"] .section-sub{margin:0 0 16px;opacity:.9}
[data-route="home"] .grid{display:grid;gap:14px}
[data-route="home"] .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-route="home"] .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){[data-route="home"] .grid.cols-3{grid-template-columns:repeat(2,1fr)}[data-route="home"] .grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){[data-route="home"] .grid.cols-3{grid-template-columns:1fr}[data-route="home"] .grid.cols-4{grid-template-columns:1fr}}
[data-route="home"] .card{border-radius:16px;padding:18px;background:rgba(20,20,24,.25);outline:1px solid rgba(255,255,255,.10);box-shadow:0 10px 24px rgba(0,0,0,.28)}
[data-route="home"] .venue{display:flex;gap:12px;align-items:center}
[data-route="home"] .venue img{width:108px;height:72px;object-fit:cover;border-radius:10px}
[data-route="home"] .calbar{display:flex;gap:12px;align-items:center}
[data-route="home"] .bar{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
[data-route="home"] .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,.6))}
[data-route="home"] .mini-gallery{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){[data-route="home"] .mini-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){[data-route="home"] .mini-gallery{grid-template-columns:1fr;gap:16px}}
[data-route="home"] .mini-gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.28);outline:1px solid rgba(255,255,255,.10)}
[data-route="home"] .oklist.card{padding:22px}
[data-route="home"] .oklist{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);font-size:clamp(16px,1.35vw,18px)}
@media (max-width:720px){[data-route="home"] .oklist{grid-template-columns:1fr}}
[data-route="home"] .faq.card{padding:22px}
[data-route="home"] .faq details{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
[data-route="home"] .faq details:last-child{border-bottom:none}
[data-route="home"] .faq summary{cursor:pointer;font-size:clamp(16px,1.3vw,18px)}
[data-route="home"] .faq p{margin:8px 0 0;opacity:.95;font-size:clamp(15px,1.15vw,17px)}

/* ===== STAGE CARDS - Diseño Premium ===== */
[data-route="home"] .stage-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 44px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.28), 0 0 22px rgba(212,175,55,0.15);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Asegurar que el contenedor de stage cards esté perfectamente centrado */
[data-route="home"] .stage-cards-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  gap: 20px;
}

[data-route="home"] .stage-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ffd700, #ffed4e, #ffd700);
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-route="home"] .stage-card:hover::before {
  opacity: 1;
}

[data-route="home"] .stage-card:hover {
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  border-color: rgba(255,215,0,0.3);
}

[data-route="home"] .stage-icon {
  font-size: 48px;
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)) drop-shadow(0 0 24px rgba(212,175,55,0.5));
  transition: transform 0.3s ease;
}

[data-route="home"] .stage-card:hover .stage-icon {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4)) drop-shadow(0 0 30px rgba(255,215,0,0.6));
}

[data-route="home"] .stage-content h3 {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
  margin: 0 0 12px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

[data-route="home"] .stage-content > p:first-of-type {
  font-size: clamp(14px, 1.5vw, 16px);
  color: #ffd700;
  font-weight: 500;
  margin: 0 0 20px;
  opacity: 0.9;
}

[data-route="home"] .stage-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: center;
  margin: 20px 0;
}

/* Los chips de FP caben en dos renglones y los de las otras tres en tres: sin
   esto la descripción de FP arrancaba 40 px más arriba que la de al lado.
   Solo en escritorio: en móvil las tarjetas van una debajo de otra, no hay
   nada con lo que cuadrar y reservar el hueco solo dejaría un vacío. */
@media (min-width: 901px) {
  [data-route="home"] .stage-features { min-height: 111px; }
}

[data-route="home"] .feature-tag {
  background: rgba(10,9,13,.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFD46A;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
  /* Borde neutro: en la tarjeta ya hay dorado en el subtítulo y en el botón.
     Con los chips también perfilados en dorado no destacaba ninguno. */
  border: 1px solid rgba(255,255,255,.14);
  transition: all 0.3s ease;
}

[data-route="home"] .stage-card:hover .feature-tag {
  border-color: var(--gold-medium);
}

[data-route="home"] .stage-desc {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  color: #aeb6c1;
  margin: 20px 0 24px;
  opacity: 0.9;
}

[data-route="home"] .stage-btn {
  background: linear-gradient(135deg, #ffe36a, #ffd700 60%, #ffed4e);
  color: #0a090d !important;
  border: 2.5px solid #D4AF37;
  padding: 18px 26px;
  border-radius: 14px;
  font-weight: 800;
  font-size: clamp(15px, 1.4vw, 17px);
  text-decoration: none;
  display: block;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: .2px;
}

[data-route="home"] .stage-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

[data-route="home"] .stage-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

[data-route="home"] .stage-btn:hover::before {
  left: 100%;
}

[data-route="home"] .stage-btn:hover {
  background: linear-gradient(135deg, #fff08a, #ffd700 60%, #ffe36a);
  border-color: #e2c35c;
}

/* Responsive para stage cards */
@media (max-width: 960px) {
  [data-route="home"] .stage-card {
    padding: 28px 22px;
  }
  
  [data-route="home"] .stage-icon img {
    width: 110px !important;
    height: 110px !important;
  }
  
  [data-route="home"] .stage-features {
    gap: 6px;
  }
  
  [data-route="home"] .feature-tag {
    font-size: 11px;
    padding: 5px 10px;
  }
}

@media (max-width: 600px) {
  [data-route="home"] .stage-card {
    padding: 20px 16px;
    min-height: auto; /* Altura automática en móviles */
  }
  
  [data-route="home"] .stage-icon {
    font-size: 36px;
    margin-bottom: 16px;
  }
  
  [data-route="home"] .stage-icon img {
    width: 90px !important;
    height: 90px !important;
  }
  
  [data-route="home"] .stage-features {
    gap: 4px;
  }
  
  [data-route="home"] .feature-tag {
    font-size: 10px;
    padding: 4px 8px;
  }
  
  /* Reducir márgenes en móviles para ambas secciones */
  [data-route="home"] .how-it-works {
    margin: 4px 0;
  }
}

/* Encabezado de sección Elige tu etapa */
[data-route="home"] .stage-section { padding-top: 80px; padding-bottom: 60px; }
@media (max-width: 900px){ [data-route="home"] .stage-section { padding-top: 64px; padding-bottom: 48px; } }
[data-route="home"] .stage-header { position: relative; text-align: center; margin-bottom: 18px; }
[data-route="home"] .stage-header::before {
  content: '';
  position: absolute;
  inset: -10px 0 -10px 0;
  margin: 0 auto;
  width: min(100%, 860px);
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
  filter: blur(6px);
  border-radius: 18px;
  z-index: -1;
}

/* ====== Cómo funciona tu graduación ====== */
[data-route="home"] .how-it-works{margin:8px 0;display:flex;flex-direction:column;align-items:center}
[data-route="home"] .how-it-works .section-title{margin-bottom:16px;text-align:center;width:100%}
[data-route="home"] .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:16px;max-width:1000px;margin:16px auto 0;width:100%}
[data-route="home"] .step-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;transition:transform .3s ease,box-shadow .3s ease;min-height:280px;justify-content:flex-start}
[data-route="home"] .step-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.4)}
[data-route="home"] .step-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#FFD700);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#0a090d;flex-shrink:0}
[data-route="home"] .step-content{display:flex;flex-direction:column;gap:16px}
[data-route="home"] .step-title{font-size:clamp(20px,2vw,24px);font-weight:700;color:#f7f7ff;margin:0;line-height:1.2}
[data-route="home"] .step-text{font-size:clamp(15px,1.3vw,17px);color:#c9cede;margin:0;line-height:1.6;opacity:.95}

@media (max-width:768px){
[data-route="home"] .steps-grid{grid-template-columns:1fr;gap:20px;max-width:400px;margin-top:20px}
[data-route="home"] .step-card{padding:28px 20px;min-height:auto}
[data-route="home"] .step-icon{width:64px;height:64px;font-size:28px}
[data-route="home"] .how-it-works{margin:4px 0}
}
[data-route="home"] .cta-final{text-align:center;padding:28px;border-radius:18px;background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.10),transparent 60%),rgba(20,20,24,.25);outline:1px solid rgba(255,255,255,.10)}
[data-route="home"] .cta-final .hero-cta .btn{padding:14px 18px;font-size:clamp(14px,1.1vw,16px)}
[data-route="home"] .feature-card{text-align:center;padding:24px;transition:transform .3s ease,box-shadow .3s ease;background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.08),transparent 60%),rgba(20,20,24,.25)}
[data-route="home"] .feature-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.4)}
[data-route="home"] .feature-icon{font-size:48px;margin-bottom:16px;display:block;animation:feature-bounce 2s ease-in-out infinite}
@keyframes feature-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
[data-route="home"] .testimonial-card{padding:20px;transition:transform .3s ease;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
[data-route="home"] .testimonial-card:hover{}
[data-route="home"] .testimonial-content p{font-style:italic;margin-bottom:12px;line-height:1.5}
[data-route="home"] .testimonial-author{border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
[data-route="home"] .testimonial-author strong{display:block;color:var(--pink)}
[data-route="home"] .testimonial-author small{opacity:.8}
[data-route="home"] .card{opacity:0;transform:translateY(20px);animation:fadeInUp .6s ease forwards}
[data-route="home"] .card:nth-child(2){animation-delay:.1s}
[data-route="home"] .card:nth-child(3){animation-delay:.2s}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

/* ====== Tarjetas de etapa: ajuste a 4 columnas (ESO / Bach / FP / Uni) ======
   El tamaño anterior del titulo (hasta 40px) estaba calculado para 3 tarjetas
   anchas; con 4 se salia "Universidad". Ademas se alinean las filas entre
   tarjetas para que iconos, titulos y botones queden a la misma altura. */
[data-route="home"] .stage-content h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}
[data-route="home"] .stage-card {
  padding-inline: 22px;
}
[data-route="home"] .stage-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* subtitulo: reserva dos lineas para que los chips arranquen a la misma altura */
[data-route="home"] .stage-content > p:first-of-type {
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* la descripcion absorbe la diferencia de longitud... */
[data-route="home"] .stage-desc {
  flex: 1 0 auto;
}
/* ...y el boton queda pegado abajo en las cuatro */
[data-route="home"] .stage-btn {
  margin-top: auto;
}
@media (max-width: 960px) {
  [data-route="home"] .stage-content h3 { font-size: clamp(24px, 4.5vw, 34px); }
  [data-route="home"] .stage-content > p:first-of-type { min-height: 0; }
}

/* ====== Hero en movil: una sola accion principal ======
   En pantalla pequena competian cuatro botones (mas la burbuja flotante de
   WhatsApp). Galeria y opiniones bajan a enlaces de texto: siguen accesibles
   pero dejan de disputarle el peso visual a "Reservar fecha". */
@media (max-width: 700px) {
  [data-route="home"] .hero-cta .hero-cta-sec {
    background: transparent;
    border: 0;
    outline: none;          /* .btn-ghost dibuja su marco con outline, no border */
    box-shadow: none;
    padding: 6px 10px;
    min-height: 44px;              /* zona tactil comoda pese a ser texto */
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--ink, #f7f7ff);
    opacity: .85;
  }
  [data-route="home"] .hero-cta .hero-cta-sec:hover { opacity: 1; }
}

/* La burbuja de WhatsApp no debe taparse con el banner de cookies */
body:has(#tgm-cookies) .fab-wa {
  bottom: 190px;
  transition: bottom .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body:has(#tgm-cookies) .fab-wa { transition: none; }
}


/* ===== eso.css ===== */
[data-route="eso"] .quick-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
[data-route="eso"] .grid-3x3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:900px){[data-route="eso"] .grid-3x3{grid-template-columns:repeat(3,1fr)}}
[data-route="eso"] .include-card{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);display:flex;gap:12px;align-items:flex-start}
[data-route="eso"] .include-card:hover{background:rgba(255,255,255,.09)}
[data-route="eso"] .include-card .icon{font-size:28px;min-width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
[data-route="eso"] .include-card h3{margin:0 0 4px;font-size:1.05rem;color:#FFFFFF !important;font-weight:600 !important}
[data-route="eso"] .include-card p{margin:0;opacity:.9;color:#FFFFFF !important}
[data-route="eso"] .include-card details summary{color:#FFFFFF !important}
[data-route="eso"] .faq-card details p{color:#FFFFFF !important;opacity:.85 !important}

/* Mejorar contraste y funcionalidad de FAQ chips */
[data-route="eso"] .faq-card{cursor:pointer;background:rgba(255,255,255,.08) !important}
[data-route="eso"] .faq-card:hover{background:rgba(255,255,255,.12) !important}
[data-route="eso"] .faq-card .icon{background:rgba(255,255,255,.15) !important;color:#FFFFFF !important}
[data-route="eso"] .faq-card summary h3{color:#FFFFFF !important;font-weight:600 !important}
[data-route="eso"] .gallery-videos{--tile-min:360px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr))}
@media (max-width:900px){[data-route="eso"] .gallery-videos{--tile-min:300px}}
@media (max-width:600px){[data-route="eso"] .gallery-videos{--tile-min:260px}}
[data-route="eso"] .video-tile{aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative}
[data-route="eso"] .video-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
[data-route="eso"] .faq-card{cursor:pointer}
[data-route="eso"] .faq-card details{width:100%}
[data-route="eso"] .faq-card summary{list-style:none;outline:none;display:flex;align-items:center;gap:12px}
[data-route="eso"] .faq-card summary::-webkit-details-marker{display:none}
[data-route="eso"] .faq-card details[open] .include-card{background:rgba(255,255,255,.12)}
[data-route="eso"] .btn-whatsapp{background:#25D366;color:#ffffff;border:none}
[data-route="eso"] .btn-whatsapp:hover{filter:brightness(1.05);}


/* ===== bach.css ===== */
[data-route="bach"] .quick-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
[data-route="bach"] .grid-3x3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:900px){[data-route="bach"] .grid-3x3{grid-template-columns:repeat(3,1fr)}}
[data-route="bach"] .include-card{padding:18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.28);display:flex;gap:12px;align-items:flex-start}
[data-route="bach"] .include-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
[data-route="bach"] .include-card .icon{font-size:28px;min-width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
[data-route="bach"] .include-card h3{margin:0 0 4px;font-size:1.08rem;color:#FFFFFF !important;font-weight:700 !important}
[data-route="bach"] .include-card p{margin:0;opacity:.92;color:#FFFFFF !important}
[data-route="bach"] .gallery-videos{--tile-min:360px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr))}
@media (max-width:900px){[data-route="bach"] .gallery-videos{--tile-min:300px}}
@media (max-width:600px){[data-route="bach"] .gallery-videos{--tile-min:260px}}
[data-route="bach"] .video-tile{aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative}
[data-route="bach"] .video-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
[data-route="bach"] .faq-card{cursor:pointer}
[data-route="bach"] .faq-card details{width:100%}
[data-route="bach"] .faq-card summary{list-style:none;outline:none;display:flex;align-items:center;gap:12px}
[data-route="bach"] .faq-card summary::-webkit-details-marker{display:none}
[data-route="bach"] .faq-card details[open] .include-card{background:rgba(255,255,255,.12)}
[data-route="bach"] .btn-whatsapp{background:#25D366;color:#ffffff;border:none}
[data-route="bach"] .btn-whatsapp:hover{filter:brightness(1.05);}
[data-route="bach"] .price-section{padding:28px 0}
[data-route="bach"] .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media (max-width:900px){[data-route="bach"] .price-grid{grid-template-columns:1fr}}
[data-route="bach"] .price-card{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.18));border:1px solid rgba(212,175,55,.25);border-radius:28px;padding:40px;box-shadow:0 16px 36px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
[data-route="bach"] .price-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#D4AF37,#FFD700);display:inline-flex;align-items:center;justify-content:center;color:#0a090d;font-weight:800;margin-bottom:10px}
[data-route="bach"] .price-title{margin:0 0 12px;font-size:1.3rem;color:#FFFFFF !important;font-weight:800 !important}
[data-route="bach"] .price-text{color:rgba(255,255,255,.9);margin:0 0 16px}
[data-route="bach"] .price-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
[data-route="bach"] .price-list li{display:flex;align-items:flex-start;gap:10px;color:#FFFFFF !important}
[data-route="bach"] .price-list li::before{content:'✓';color:#D4AF37;font-weight:800}
[data-route="bach"] .price-list.alt li::before{content:'–';color:#D4AF37;font-weight:800}
[data-route="bach"] .price-card .btn-whatsapp{display:block;width:100%;text-align:center;padding:16px 24px;border-radius:14px;background:linear-gradient(135deg,#ffd700,#ffed4e);color:#0a090d !important;border:2px solid #D4AF37;}


/* ===== fp.css ===== */
[data-route="fp"] .quick-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
[data-route="fp"] .grid-3x3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:900px){[data-route="fp"] .grid-3x3{grid-template-columns:repeat(3,1fr)}}
[data-route="fp"] .include-card{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);display:flex;gap:12px;align-items:flex-start}
[data-route="fp"] .include-card:hover{background:rgba(255,255,255,.09)}
[data-route="fp"] .include-card .icon{font-size:28px;min-width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
[data-route="fp"] .include-card h3{margin:0 0 4px;font-size:1.05rem;color:#FFFFFF !important;font-weight:600 !important}
[data-route="fp"] .include-card p{margin:0;opacity:.9;color:#FFFFFF !important}
[data-route="fp"] .gallery-videos{--tile-min:360px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr))}
@media (max-width:900px){[data-route="fp"] .gallery-videos{--tile-min:300px}}
@media (max-width:600px){[data-route="fp"] .gallery-videos{--tile-min:260px}}
[data-route="fp"] .video-tile{aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative}
[data-route="fp"] .video-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
[data-route="fp"] .faq-card{cursor:pointer}
[data-route="fp"] .faq-card details{width:100%}
[data-route="fp"] .faq-card summary{list-style:none;outline:none;display:flex;align-items:center;gap:12px}
[data-route="fp"] .faq-card summary::-webkit-details-marker{display:none}
[data-route="fp"] .faq-card details[open] .include-card{background:rgba(255,255,255,.12)}
[data-route="fp"] .btn-whatsapp{background:#25D366;color:#ffffff;border:none}
[data-route="fp"] .btn-whatsapp:hover{filter:brightness(1.05);}


/* ===== uni.css ===== */
/* ===== Estilos scoped a UNI ===== */
[data-route="uni"] .quick-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* Cards 3x3 (Incluye y FAQ) */
[data-route="uni"] .grid-3x3{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
@media (min-width:900px){
  [data-route="uni"] .grid-3x3{ grid-template-columns:repeat(3,1fr); }
}
[data-route="uni"] .include-card{
  padding:18px; border-radius:20px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  display:flex; gap:12px; align-items:flex-start;
}
[data-route="uni"] .include-card:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
[data-route="uni"] .include-card .icon{
  font-size:28px; min-width:48px; height:48px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10);
}
[data-route="uni"] .include-card h3{ margin:0 0 4px; font-size:1.08rem; color:#FFFFFF !important; font-weight:700 !important; }
[data-route="uni"] .include-card p{ margin:0; opacity:.92; color:#FFFFFF !important; }

/* Galería de vídeos */
[data-route="uni"] .gallery-videos{
  --tile-min:360px;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr));
}
@media (max-width:900px){ [data-route="uni"] .gallery-videos{ --tile-min:300px; } }
@media (max-width:600px){ [data-route="uni"] .gallery-videos{ --tile-min:260px; } }
[data-route="uni"] .video-tile{
  aspect-ratio:9/16; border-radius:18px; overflow:hidden; position:relative;
}
[data-route="uni"] .video-tile video{
  width:100%; height:100%; object-fit:cover; display:block; background:#000;
}

/* FAQ con mismo estilo que "Incluye" */
[data-route="uni"] .faq-card{ cursor:pointer; }
[data-route="uni"] .faq-card details{ width:100%; }
[data-route="uni"] .faq-card summary{
  list-style:none; outline:none; display:flex; align-items:center; gap:12px;
}
[data-route="uni"] .faq-card summary::-webkit-details-marker{ display:none; }
[data-route="uni"] .faq-card details[open] .include-card{ background:rgba(255,255,255,.12); }

/* Botón WhatsApp */
[data-route="uni"] .btn-whatsapp{
  background:#25D366; color:#ffffff; border:none;
}
[data-route="uni"] .btn-whatsapp:hover{ filter:brightness(1.05); }
[data-route="uni"] .price-section{padding:28px 0}
[data-route="uni"] .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media (max-width:900px){[data-route="uni"] .price-grid{grid-template-columns:1fr}}
[data-route="uni"] .price-card{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.18));border:1px solid rgba(212,175,55,.25);border-radius:28px;padding:40px;box-shadow:0 16px 36px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
[data-route="uni"] .price-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#D4AF37,#FFD700);display:inline-flex;align-items:center;justify-content:center;color:#0a090d;font-weight:800;margin-bottom:10px}
[data-route="uni"] .price-title{margin:0 0 12px;font-size:1.3rem;color:#FFFFFF !important;font-weight:800 !important}
[data-route="uni"] .price-text{color:rgba(255,255,255,.9);margin:0 0 16px}
[data-route="uni"] .price-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
[data-route="uni"] .price-list li{display:flex;align-items:flex-start;gap:10px;color:#FFFFFF !important}
[data-route="uni"] .price-list li::before{content:'✓';color:#D4AF37;font-weight:800}
[data-route="uni"] .price-list.alt li::before{content:'–';color:#D4AF37;font-weight:800}
[data-route="uni"] .price-card .btn-whatsapp{display:block;width:100%;text-align:center;padding:16px 24px;border-radius:14px;background:linear-gradient(135deg,#ffd700,#ffed4e);color:#0a090d !important;border:2px solid #D4AF37;}
[data-route="uni"] .faq-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){[data-route="uni"] .faq-grid{grid-template-columns:1fr}}
[data-route="uni"] .faq-card{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.18));border:1px solid rgba(212,175,55,.22);border-radius:22px;padding:36px;box-shadow:0 18px 40px rgba(0,0,0,.35);text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
[data-route="uni"] .faq-icon{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#FFD700);display:inline-flex;align-items:center;justify-content:center}
[data-route="uni"] .faq-title{margin:4px 0 6px;font-size:1.25rem;color:#FFFFFF !important;font-weight:800 !important}
[data-route="uni"] .faq-text{margin:0;color:rgba(255,255,255,.9)}

/* ===== galeria.css ===== */
/* ====== GALERÍA ÉPICA - ESTILO HOME - MOMENTOS ÉPICOS ====== */

/* Contenedor con estilo hero */
[data-route="galeria"] .container{
  max-width:min(1200px,95vw);
  margin-inline:auto;
  padding:clamp(40px,8vw,96px) clamp(20px,4vw,48px);
}

/* Header épico como el hero */
[data-route="galeria"] .section-header{
  text-align:center;
  margin-bottom:clamp(60px,10vw,120px);
  position:relative;
}

[data-route="galeria"] .section-title{
  font-size:clamp(48px,8vw,80px);
  font-weight:900;
  margin:0 0 24px;
  background:linear-gradient(135deg, #fff, #D4AF37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
}

[data-route="galeria"] .section-subtitle{
  font-size:clamp(20px,3vw,28px);
  color:#c9cede;
  margin:0 auto;
  max-width:800px;
  line-height:1.6;
  opacity:.95;
}

/* Grid épico con márgenes grandes */
[data-route="galeria"] .gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:clamp(40px,6vw,80px);
  margin:0;
  padding:0;
}

/* En móvil, fotos aún grandes pero adaptadas */
@media (max-width:768px){
  [data-route="galeria"] .gallery-grid{
    grid-template-columns:1fr;
    gap:clamp(32px,8vw,64px);
  }
}

/* Cards épicos con estilo hero */
[data-route="galeria"] .gallery-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.10), transparent 60%), rgba(20,20,24,.25);
  outline:2px solid rgba(255,255,255,.15);
  outline-offset:-2px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:all .4s cubic-bezier(.4,.2,.2,1);
  transform:translateY(0);
}

[data-route="galeria"] .gallery-card:hover{
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  outline-color:rgba(212,175,55,.4);
}

/* Las imágenes como momentos épicos */
[data-route="galeria"] .gallery-card img{
  display:block;
  width:100%;
  height:clamp(300px,40vw,500px); /* Altura épica */
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform:scale(1);
}

[data-route="galeria"] .gallery-card:hover img{ /* Zoom épico */
}

/* Overlay épico con información */
[data-route="galeria"] .gallery-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,.7) 100%
  );
  z-index:2;
  opacity:0;
  transition:opacity .4s ease;
}

[data-route="galeria"] .gallery-card:hover::before{
  opacity:1;
}

/* Texto épico sobre las fotos */
[data-route="galeria"] .gallery-card figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:clamp(24px,4vw,48px);
  z-index:3;
  color:#fff;
  text-align:center;
  transform:translateY(20px);
  opacity:0;
  transition:all .4s ease;
}

[data-route="galeria"] .gallery-card:hover figcaption{
  opacity:1;
}

[data-route="galeria"] .gallery-card .photo-title{
  font-size:clamp(24px,3vw,36px);
  font-weight:800;
  margin:0 0 12px;
  text-shadow:2px 2px 8px rgba(0,0,0,.8);
  color:#fff;
}

[data-route="galeria"] .gallery-card .photo-desc{
  font-size:clamp(16px,2vw,20px);
  opacity:.95;
  margin:0;
  text-shadow:1px 1px 4px rgba(0,0,0,.8);
  color:#c9cede;
  line-height:1.5;
}

/* Animación de entrada épica */
[data-route="galeria"] .gallery-card{
  opacity:0;
  transform:translateY(40px);
  animation:epicFadeIn .8s cubic-bezier(.4,.2,.2,1) forwards;
}

[data-route="galeria"] .gallery-card:nth-child(1){ animation-delay:.1s; }
[data-route="galeria"] .gallery-card:nth-child(2){ animation-delay:.2s; }
[data-route="galeria"] .gallery-card:nth-child(3){ animation-delay:.3s; }
[data-route="galeria"] .gallery-card:nth-child(4){ animation-delay:.4s; }
[data-route="galeria"] .gallery-card:nth-child(5){ animation-delay:.5s; }
[data-route="galeria"] .gallery-card:nth-child(6){ animation-delay:.6s; }

@keyframes epicFadeIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Botón épico al final */
[data-route="galeria"] .gallery-cta{
  text-align:center;
  margin-top:clamp(60px,10vw,120px);
  padding:clamp(40px,6vw,80px);
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.10), transparent 60%), rgba(20,20,24,.25);
  border-radius:24px;
  outline:1px solid rgba(255,255,255,.15);
}

[data-route="galeria"] .btn-epic{
  display:inline-block;
  padding:0 26px;
  background:linear-gradient(135deg, #D4AF37, #FFD700);
  color:#0a090d;
  font-size:16px;
  font-weight:700;
  border-radius:12px;
  text-decoration:none;
  transition:all .3s ease;
  transform:translateY(0);
}

[data-route="galeria"] .btn-epic:hover{
}

/* ===== locales.css ===== */
/* ====== Scoped styles solo para la página de locales ====== */
[data-route="locales"]{--bg:#0a090d;--ink:#f7f7ff;--muted:#c9cede;--line:rgba(255,255,255,.12);--accent:#D4AF37;--accent2:#FFD700}
[data-route="locales"] .wrap{max-width:1100px;margin:0 auto;padding:28px 16px 80px}
[data-route="locales"] .title{font-size:clamp(28px,4.5vw,44px);line-height:1.05;margin:6px 0 8px;color:var(--ink)}
[data-route="locales"] .sub{color:var(--muted);max-width:70ch}
[data-route="locales"] .grid{display:grid;gap:16px;margin-top:22px}
@media(min-width:900px){[data-route="locales"] .grid{grid-template-columns:1fr 1fr}}

/* Cards de locales */
[data-route="locales"] .card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
[data-route="locales"] .venue{display:flex;gap:12px;align-items:center}
[data-route="locales"] .venue img{width:108px;height:72px;object-fit:cover;border-radius:10px}
[data-route="locales"] .venue div{flex:1}
[data-route="locales"] .venue b{font-size:1.1rem;color:var(--ink)}
[data-route="locales"] .venue small{opacity:.8;color:var(--muted)}

/* Include cards */
[data-route="locales"] .include-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;transition:background .2s}
[data-route="locales"] .include-card:hover{background:rgba(255,255,255,.08)}
[data-route="locales"] .include-card .icon{font-size:1.5rem;margin-bottom:4px}
[data-route="locales"] .include-card h3{margin:0 0 4px;font-size:1.05rem;color:var(--ink)}
[data-route="locales"] .include-card p{margin:0;opacity:.9;color:var(--muted)}

/* Listas */
[data-route="locales"] ul{list-style:none;padding:0;margin:0}
[data-route="locales"] li{padding:4px 0;padding-left:20px;position:relative;color:var(--muted)}
[data-route="locales"] li:before{content:"✓";position:absolute;left:0;color:var(--accent)}

/* Grid layouts */
[data-route="locales"] .grid.cols-2{grid-template-columns:repeat(2,1fr);gap:16px}
[data-route="locales"] .grid.cols-3{grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:768px){
  [data-route="locales"] .grid.cols-2,[data-route="locales"] .grid.cols-3{grid-template-columns:1fr}
}

/* CTA final */
[data-route="locales"] .cta-final{text-align:center;margin-top:40px}
[data-route="locales"] .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
[data-route="locales"] .hero-cta .btn{padding:14px 18px;font-size:clamp(14px,1.1vw,16px)}

/* Secciones */
[data-route="locales"] .container{max-width:1100px;margin:0 auto;padding:28px 16px}
[data-route="locales"] .section-title{font-size:clamp(28px,4.5vw,44px);line-height:1.05;margin:6px 0 8px;color:var(--ink)}
[data-route="locales"] .section-sub{font-size:clamp(18px,2vw,24px);line-height:1.2;margin:0 0 16px;color:var(--muted)}

/* ====== NUEVA ESTRUCTURA DE LOCALES CON CARRUSEL ====== */

/* Zonas */
[data-route="locales"] .zone-section{margin-bottom:60px}
[data-route="locales"] .zone-header{text-align:center;margin-bottom:40px}
[data-route="locales"] .zone-title{font-size:clamp(32px,5vw,48px);font-weight:800;color:var(--accent);margin-bottom:12px}
[data-route="locales"] .zone-subtitle{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:60ch;margin:0 auto}

/* Grid de locales */
[data-route="locales"] .locales-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:32px}

/* Tarjetas premium */
[data-route="locales"] .venue-card-premium{background:rgba(15,15,20,0.8);border:2px solid var(--accent);border-radius:20px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.3);transition:transform 0.3s ease,box-shadow 0.3s ease}
[data-route="locales"] .venue-card-premium:hover{box-shadow:0 12px 40px rgba(212,175,55,0.2)}

/* Carrusel */
[data-route="locales"] .venue-carousel{position:relative;width:100%;height:240px;overflow:hidden;background:#1a1a1a;display:flex;align-items:center;justify-content:center}
[data-route="locales"] .carousel-images{position:relative;width:100%;height:100%}
[data-route="locales"] .carousel-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .6s ease}
[data-route="locales"] .carousel-image.active{opacity:1}

/* Contenido */
[data-route="locales"] .venue-content{padding:24px}
[data-route="locales"] .venue-name{font-size:1.5rem;font-weight:700;color:var(--accent);margin-bottom:8px}
[data-route="locales"] .venue-subtitle{font-size:1.1rem;color:var(--muted);margin-bottom:16px;font-weight:500}
[data-route="locales"] .venue-description{font-size:0.95rem;color:var(--ink);line-height:1.6;opacity:0.9}

/* Responsive */
@media(max-width:768px){
  [data-route="locales"] .locales-grid{grid-template-columns:1fr;gap:20px}
  [data-route="locales"] .venue-carousel{height:200px}
  [data-route="locales"] .venue-content{padding:20px}
}

/* ── Enlace «Ver … al detalle» ────────────────────────────────────────────
   Iba sin estilo propio: heredaba el gris de `.btn-ghost`, que no pinta nada
   en una tarjeta de borde dorado, y vivía FUERA del bloque con relleno, así
   que se pegaba al filo de la tarjeta.
   Y la ficha era un bloque normal: si una descripción ocupaba un renglón más
   que la de al lado, su botón bajaba y la fila quedaba escalonada. En columna,
   el texto se queda el aire sobrante y el botón se apoya abajo: todas las
   tarjetas de una fila acaban a la misma altura. */
.venue-card-premium,
.finca-card-premium { display: flex; flex-direction: column; }

.venue-card-premium .venue-content,
.finca-card-premium .finca-content { flex: 1 1 auto; }

.det-enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24px 24px;
  padding: 14px 18px;
  border: 1px solid var(--gold-medium, #D4AF37);
  border-radius: 14px;
  background: transparent;
  color: var(--gold-medium, #D4AF37);
  font-weight: 700;
  text-align: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.det-enlace:hover,
.det-enlace:focus-visible {
  background: var(--gold-medium, #D4AF37);
  border-color: var(--gold-medium, #D4AF37);
  /* El dorado es claro: encima va tinta oscura, no blanca */
  color: #1b1206;
  transform: none;
}

@media (max-width: 768px) {
  .det-enlace { margin: 0 20px 20px; padding: 13px 16px; }
}


/* ===== opiniones.css ===== */
/* ====== Scoped styles solo para la página de opiniones ====== */
[data-route="opiniones"]{--bg:#0a090d;--ink:#FFFFFF;--muted:#FFFFFF;--line:rgba(255,255,255,.12);--accent:#D4AF37;--accent2:#FFD700}
[data-route="opiniones"] .wrap{max-width:1180px;margin:0 auto;padding:28px clamp(16px,3vw,28px) 80px;position:relative;z-index:1}
[data-route="opiniones"] .title{font-size:clamp(28px,4.5vw,44px);line-height:1.1;margin:6px 0 8px;color:#FFFFFF;font-weight:700}
[data-route="opiniones"] .sub{color:#FFFFFF;max-width:70ch;margin:8px 0;line-height:1.5}
[data-route="opiniones"] .grid{display:grid;gap:24px;margin-top:22px} /* Aumentado gap de 16px a 24px */
@media(min-width:900px){[data-route="opiniones"] .grid{grid-template-columns:1fr 1fr}}

/* Tarjetas */
[data-route="opiniones"] .card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:20px;position:relative;z-index:2}
[data-route="opiniones"] .head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
[data-route="opiniones"] .avatar{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#FFD700);color:white;font-weight:700;font-size:18px}
[data-route="opiniones"] .id{display:flex;flex-direction:column;gap:6px}
[data-route="opiniones"] .name{font-weight:700;color:#FFFFFF;line-height:1.4;font-size:16px}
[data-route="opiniones"] .meta{font-size:14px;color:#FFFFFF;line-height:1.4;opacity:.85}

/* Chips */
[data-route="opiniones"] .chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
[data-route="opiniones"] .chip{font-size:13px;color:#FFFFFF !important;background:linear-gradient(135deg,#FFD700,#D4AF37);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 12px;font-weight:700;text-shadow:none !important}

/* Estrellas */
[data-route="opiniones"] .stars{display:inline-flex;gap:6px;margin-bottom:16px}
[data-route="opiniones"] .stars svg{width:20px;height:20px;fill:url(#gstar-op)}

/* Texto y leer más */
[data-route="opiniones"] .txt{color:#FFFFFF;line-height:1.8;font-size:16px;margin:0;padding:0;font-weight:400}
[data-route="opiniones"] .more{display:none;color:#FFFFFF}
[data-route="opiniones"] .btn-more{align-self:flex-start;border:1px solid rgba(255,255,255,.25);background:transparent;color:#FFFFFF;border-radius:999px;padding:10px 16px;font-size:14px;margin-top:16px;font-weight:600;transition:all .2s ease}
[data-route="opiniones"] .btn-more:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}

/* Nota: sin filtros, sin barras: solo reseñas. */

/* Asegurar visibilidad máxima del texto */
[data-route="opiniones"]{background:transparent;min-height:100vh}
[data-route="opiniones"] .wrap{background:transparent;position:relative}
[data-route="opiniones"] header{margin-bottom:40px;text-align:center}
[data-route="opiniones"] .card{box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(4px)}
[data-route="opiniones"] .card *{position:relative;z-index:3}
[data-route="opiniones"] .txt{word-wrap:break-word;overflow-wrap:break-word;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* Forzar color blanco en todos los botones de opiniones */
[data-route="opiniones"] .btn-more,
[data-route="opiniones"] .btn-more span,
[data-route="opiniones"] .btn-more *{color:#FFFFFF !important}

/* Aplicar color blanco a TODOS los botones dentro de opiniones */
[data-route="opiniones"] button,
[data-route="opiniones"] .btn,
[data-route="opiniones"] .btn-more,
[data-route="opiniones"] [class*="btn"]{color:#FFFFFF !important}

/* Reglas ultra-específicas para el texto de botones */
[data-route="opiniones"] .card .btn-more,
[data-route="opiniones"] article .btn-more,
[data-route="opiniones"] .btn-more.js-more{color:#FFFFFF !important;font-weight:600 !important;text-shadow:none !important}

/* Reglas ultra-específicas para CHIPS - texto BLANCO */
[data-route="opiniones"] .chips .chip,
[data-route="opiniones"] .card .chips .chip,
[data-route="opiniones"] article .chips .chip{color:#FFFFFF !important;font-weight:700 !important;text-shadow:none !important}

/* Mejorar contraste de chips con fondo dorado */
[data-route="opiniones"] .chip{background:linear-gradient(135deg,#D4AF37,#FFD700) !important;border:1px solid rgba(255,255,255,.4) !important}

/* Override extremo para herencia de color */
[data-route="opiniones"] .btn-more{color:#FFFFFF !important;background:transparent !important;border:1px solid rgba(255,255,255,.25) !important}

/* ===== reserva.css ===== */
/* Estilos específicos para la página de reserva */
[data-route="reserva"] .hero-inner {
  grid-template-columns: 1fr;
}

[data-route="reserva"] form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

[data-route="reserva"] form textarea {
  grid-column: 1/-1;
  height: 90px;
}

[data-route="reserva"] form button[type="submit"] {
  grid-column: 1/-1;
}

[data-route="reserva"] form small {
  grid-column: 1/-1;
  opacity: .8;
}

@media (max-width: 768px) {
  [data-route="reserva"] form {
    grid-template-columns: 1fr;
  }
}

/* ===== forms.css ===== */
/* ===== ESTILOS UNIFICADOS PARA FORMULARIOS ===== */

/* Variables de formulario */
:root {
  --form-bg: var(--glass);
  --form-border: var(--line);
  --form-focus: var(--gold-medium);
  --form-focus-glow: rgba(212, 175, 55, 0.2);
  --form-text: var(--ink);
  --form-text-dim: var(--ink-dim);
  --form-radius: 16px;
  --form-padding: 16px 20px;
  --form-gap: 16px;
  --form-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base para todos los formularios */
form {
  background: var(--form-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--form-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

/* Títulos de formularios */
.form-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Grid de formularios */
form .grid {
  display: grid;
  gap: var(--form-gap);
  grid-template-columns: repeat(2, 1fr);
}

/* Campos de formulario */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.field label {
  font-weight: 600;
  font-size: 14px;
  color: var(--form-text);
  margin-bottom: 4px;
}

.field .hint {
  font-size: 12px;
  color: var(--form-text-dim);
  opacity: 0.8;
  font-style: italic;
  margin-top: 4px;
}

/* Inputs, selects y textareas */
input, select, textarea {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--form-padding);
  color: var(--form-text);
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: var(--form-transition);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--form-focus);
  box-shadow: 0 0 0 4px var(--form-focus-glow), 0 8px 24px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  transform: translateY(-2px);
}

input::placeholder, textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

/* Textarea específico */
textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

/* Select específico */
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23b2b6c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

/* Botones de formulario */
form button[type="submit"], .form-submit {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  border: none;
  border-radius: var(--form-radius);
  color: white;
  cursor: pointer;
  transition: var(--form-transition);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

form button[type="submit"]:hover, .form-submit:hover {
}

form button[type="submit"]:active, .form-submit:active {
  transform: translateY(-1px) scale(0.98);
}

form button[type="submit"]:disabled, .form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Checkbox y radios */
input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--form-border);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: var(--form-transition);
  flex-shrink: 0;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  border-color: var(--pink);
  box-shadow: 0 0 0 4px var(--form-focus-glow);
}

/* Consentimiento */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--form-radius);
  border: 1px solid var(--form-border);
  font-size: 13px;
  line-height: 1.5;
}

.consent input[type="checkbox"] {
  margin-top: 2px;
}

.consent .link {
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  transition: var(--form-transition);
}

.consent .link:hover {
  color: var(--pink2);
  text-decoration: underline;
}

/* Notas de formulario */
.form-note {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--form-text-dim);
  opacity: 0.8;
  font-style: italic;
}

/* Formulario checker específico */
form.checker {
  background: linear-gradient(135deg, rgba(255, 46, 128, 0.1), rgba(255, 107, 157, 0.05));
  border: 1px solid rgba(255, 46, 128, 0.2);
  padding: 24px;
  max-width: 600px;
  margin: 0 auto;
}

form.checker .field {
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  form {
    padding: 24px 20px;
  }
  
  form .grid {
    grid-template-columns: 1fr;
  }
  
  .form-title {
    font-size: 1.25rem;
  }
}

/* Animaciones de entrada */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

form .field {
  animation: slideInUp 0.4s ease forwards;
  opacity: 0;
}

form .field:nth-child(1) { animation-delay: 0.1s; }
form .field:nth-child(2) { animation-delay: 0.2s; }
form .field:nth-child(3) { animation-delay: 0.3s; }
form .field:nth-child(4) { animation-delay: 0.4s; }
form .field:nth-child(5) { animation-delay: 0.5s; }
form .field:nth-child(6) { animation-delay: 0.6s; }
form .field:nth-child(7) { animation-delay: 0.7s; }
form .field:nth-child(8) { animation-delay: 0.8s; }

/* Botón con icono */
.btn-icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}



/* ===== forms-override.css ===== */
/* Sobrescribe estilos conflictivos de formularios */

/* Resetea estilos conflictivos de data-form="presu-lite" */
[data-form="presu-lite"]::before {
  display: none !important;
}

[data-form="presu-lite"] .field::before {
  display: none !important;
}

[data-form="presu-lite"] .field {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-form="presu-lite"] input,
[data-form="presu-lite"] select,
[data-form="presu-lite"] textarea {
  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  padding: var(--form-padding) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.2s ease !important;
}

[data-form="presu-lite"] input:focus,
[data-form="presu-lite"] select:focus,
[data-form="presu-lite"] textarea:focus {
  border-color: var(--gold-medium) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
  transform: translateY(-1px) !important;
}

[data-form="presu-lite"] .field label {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: inherit !important;
  margin-bottom: 0.5rem !important;
  text-shadow: none !important;
  position: static !important;
  z-index: auto !important;
}

[data-form="presu-lite"] small {
  opacity: 1 !important;
  font-size: 0.8rem !important;
  margin-top: 0.25rem !important;
  color: var(--muted) !important;
  font-style: normal !important;
  position: static !important;
  z-index: auto !important;
}

[data-form="presu-lite"] .consent {
  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: all 0.2s ease !important;
}

[data-form="presu-lite"] .consent:hover {
  background: var(--form-bg) !important;
  border-color: var(--form-border) !important;
  transform: none !important;
}

[data-form="presu-lite"] .consent input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  border-radius: 4px !important;
  border: 1px solid var(--form-border) !important;
  background: var(--bg) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-top: 0.125rem !important;
  position: static !important;
  transform: none !important;
}

[data-form="presu-lite"] .consent input[type="checkbox"]:checked {
  background: var(--gold-medium) !important;
  border-color: var(--gold-medium) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
  transform: none !important;
}

[data-form="presu-lite"] .consent .link {
  color: var(--form-focus) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  text-shadow: none !important;
  transform: none !important;
}

[data-form="presu-lite"] .consent .link:hover {
  color: var(--form-focus) !important;
  text-decoration: underline !important;
  transform: none !important;
}

[data-form="presu-lite"] .btn-primary {
  width: 100% !important;
  padding: 1rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  border: none !important;
  border-radius: var(--form-radius) !important;
  color: var(--text-on-gold) !important;
  transition: all 0.2s ease !important;
  position: static !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transform: none !important;
}

[data-form="presu-lite"] .btn-primary:hover {
}

[data-form="presu-lite"] .btn-primary::before {
  display: none !important;
}

[data-form="presu-lite"] .btn-primary:active {
  transform: translateY(0) !important;
}

[data-form="presu-lite"] .btn-primary:disabled {
  opacity: 0.6 !important;
  transform: none !important;
  cursor: not-allowed !important;
}

[data-form="presu-lite"] .btn-icon {
  font-size: 1.2rem !important;
  filter: none !important;
  transform: none !important;
}

/* Estilos base para todos los formularios */
.form-section {
  position: relative;
  overflow: hidden;
}

.form-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 46, 128, 0.05) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.form {
  position: relative;
  z-index: 1;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.form-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  animation: slideInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }
.form-group:nth-child(6) { animation-delay: 0.6s; }
.form-group:nth-child(7) { animation-delay: 0.7s; }
.form-group:nth-child(8) { animation-delay: 0.8s; }

.form-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: inherit;
}

.form-control {
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--form-padding);
  font-size: 1rem;
  color: inherit;
  transition: all 0.2s ease;
  outline: none;
}

.form-control:focus {
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px var(--form-focus-glow);
  transform: translateY(-1px);
}

.form-text {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.form-error {
  color: #ff6b6b !important;
  display: none;
}

.form-consent {
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: 1rem;
  margin: 1rem 0;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: var(--form-focus);
}

.form-check-text {
  flex: 1;
}

.form-note {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form {
    padding: 1.5rem;
  }
  
  .form-title {
    font-size: 1.25rem;
  }
}

/* ===== colors-gold-override.css ===== */
/* Sobrescribe todos los colores rosas con dorados */

/* Variables raíz - reemplaza colores rosas con dorados */
:root {
  --pink: #D4AF37 !important;        /* Dorado medio */
  --pink2: #FFD46A !important;       /* Dorado claro */
  --pink-dark: #8C6A2E !important;   /* Dorado oscuro */
  --pink-deep: #5A3E1A !important;   /* Dorado profundo */
}

/* Reemplaza gradientes de texto rosas */
.title em {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Reemplaza puntos rosas */
.dot {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
}

/* Reemplaza enlaces hover rosas */
.nav-links a:hover {
  background: rgba(212, 175, 55, .12) !important;
}

.nav-links a.active:not(.btn-primary) {
  background: rgba(212, 175, 55, .18) !important;
  border: 1px solid rgba(212, 175, 55, .35) !important;
}
/* Garantiza el estilo brillante del CTA activo en la nav */
.nav-links a.btn-primary.active {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  color: var(--text-on-gold) !important;
  border: none !important;
}

/* Reemplaza botones primarios rosas */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
  color: var(--text-on-gold) !important;
}

/* Reemplaza gradientes del hero */

/* Reemplaza otros gradientes rosas */

/* Actualiza cualquier otro gradiente rosa */

/* Reemplaza barras de progreso rosas */
[data-route="home"] .bar > i {
  background: linear-gradient(90deg, var(--gold-light), rgba(255, 255, 255, .6)) !important;
}

/* Reemplaza colores de acento en tarjetas y otros elementos */
.chip {
  border: 1px solid rgba(212, 175, 55, .14) !important;
  color: #c2c8d1 !important;
}

/* Reemplaza sombras rosas */
.btn-primary {
}

/* Asegura que el texto sobre fondos dorados tenga buen contraste */
.btn-primary {
  color: var(--text-on-gold) !important;
}

/* Reemplaza cualquier otro color rosa que pueda existir */
* {
  --pink: #D4AF37 !important;
  --pink2: #FFD46A !important;
}

/* Reemplaza gradientes del hero */



/* Reemplaza barras de progreso rosas */
[data-route="home"] .bar > i {
  background: linear-gradient(90deg, var(--gold-light), rgba(255, 255, 255, .6)) !important;
}

/* Reemplaza colores de acento en tarjetas y otros elementos */
.chip {
  border: 1px solid rgba(212, 175, 55, .14) !important;
  color: #c2c8d1 !important;
}

/* Reemplaza sombras rosas */
.btn-primary {
}

/* Reemplaza colores de focus rosas */
:focus-visible {
  outline: 2px solid var(--gold-medium) !important;
}

.nav-links a:focus-visible,
.btn:focus-visible,
.nav .hamburger:focus-visible {
  outline: 2px solid var(--gold-medium) !important;
}

/* Asegurar que la sección de opiniones use colores dorados */
[data-route="opiniones"] {
  --accent: var(--gold-medium) !important;
  --accent2: var(--gold-light) !important;
}

[data-route="opiniones"] .avatar {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
}

[data-route="opiniones"] .chip {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-medium)) !important;
}

#opinionesGrid .avatar {
  background: linear-gradient(135deg, var(--gold-medium), var(--gold-light)) !important;
}

/* Override any remaining pink/purple colors in opiniones section */
[data-route="opiniones"] .stars svg {
  fill: url(#gstar-op) !important;
}

/* Ensure all gradients in opiniones use gold colors */
[data-route="opiniones"] * {
  --accent: var(--gold-medium) !important;
  --accent2: var(--gold-light) !important;
}

/* ===== contrato.css ===== */
/* ===== ESTILOS PÁGINA CONTRATO DIGITAL ===== */

/* Sección principal del formulario */
[data-route="contrato"] .contrato-form-section {
  padding: 40px 0 80px;
}

/* Formulario de contrato */
.contrato-form {
  max-width: 800px;
  margin: 0 auto;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}

/* Grid del formulario */
.contrato-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Campo de ancho completo */
.contrato-form .field-full {
  grid-column: 1 / -1;
}

/* Estilos de campos */
.contrato-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contrato-form .field label {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.contrato-form .field .hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Hint de precios para tipo de evento */
.contrato-form .precio-hint {
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  color: var(--gold-medium, #D4AF37);
  font-weight: 500;
  font-style: normal;
  margin-top: 4px;
  display: none;
}

.contrato-form .precio-hint.visible {
  display: block;
}

/* Campo de fecha con checkbox */
.contrato-form .field-fecha .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.contrato-form .field-fecha .checkbox-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.contrato-form .field-fecha .checkbox-inline label {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}

/* Campo de fecha deshabilitado */
.contrato-form .field-fecha input[type="date"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
}

/* ===== CAMPO RESERVA DESTACADO ===== */
.contrato-form .field-reserva {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.04));
  border: 2px solid var(--gold-medium, #D4AF37);
  border-radius: 16px;
  padding: 20px;
  position: relative;
}

.contrato-form .field-reserva::before {
  content: '★';
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--gold-medium, #D4AF37);
  color: #000;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.contrato-form .field-reserva label {
  color: var(--gold-medium, #D4AF37);
  font-size: 15px;
}

.contrato-form .field-reserva input {
  border-color: var(--gold-medium, #D4AF37);
  font-size: 18px;
  font-weight: 600;
}

.contrato-form .field-reserva input:focus {
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3), 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Divisor del formulario */
.contrato-form .form-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 32px 0;
  grid-column: 1 / -1;
}

/* Texto legal */
.contrato-form .legal-text {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.contrato-form .legal-text p {
  margin: 0 0 12px;
}

.contrato-form .legal-text ul {
  margin: 0;
  padding-left: 20px;
}

.contrato-form .legal-text li {
  margin-bottom: 8px;
}

.contrato-form .legal-text .link {
  color: var(--pink);
  text-decoration: none;
}

.contrato-form .legal-text .link:hover {
  text-decoration: underline;
}

/* Checkbox de condiciones para contrato */
.contrato-form .consent-contrato {
  background: rgba(255, 46, 128, 0.08);
  border: 1px solid rgba(255, 46, 128, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.contrato-form .consent-contrato label {
  font-size: 14px;
  line-height: 1.5;
}

/* ===== FIRMA DIGITAL ===== */
.contrato-form .field-firma {
  margin-bottom: 20px;
}

.contrato-form .firma-container {
  position: relative;
  background: #ffffff;
  border: 2px dashed var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.contrato-form .firma-container:hover,
.contrato-form .firma-container.active {
  border-color: var(--pink);
  border-style: solid;
}

.contrato-form .firma-container.has-signature {
  border-color: var(--gold-medium, #D4AF37);
  border-style: solid;
}

.contrato-form #firmaCanvas {
  display: block;
  width: 100%;
  height: 150px;
  cursor: crosshair;
  touch-action: none;
}

.contrato-form .btn-limpiar {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contrato-form .firma-container:hover .btn-limpiar,
.contrato-form .firma-container.has-signature .btn-limpiar {
  opacity: 1;
}

.contrato-form .btn-limpiar:hover {
  background: rgba(255, 46, 128, 0.8);
}

/* Campo nombre firmante */
.contrato-form .field-nombre-firma {
  max-width: 400px;
  margin-bottom: 24px;
}

/* ===== BOTÓN DE ENVÍO ===== */
.contrato-form .btn-submit {
  width: 100%;
  padding: 18px 32px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--pink2, #ff6aa8));
  border: none;
  border-radius: 16px;
  color: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(255, 46, 128, 0.3);
  position: relative;
  overflow: hidden;
}

.contrato-form .btn-submit:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255, 46, 128, 0.4);
}

.contrato-form .btn-submit:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}

.contrato-form .btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.contrato-form .btn-submit .btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contrato-form .btn-submit .btn-loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Nota del formulario */
.contrato-form .form-note {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 16px;
  font-style: italic;
}

/* ===== MENSAJE DE ÉXITO ===== */
.mensaje-exito {
  max-width: 500px;
  margin: 60px auto;
  text-align: center;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 60px 40px;
}

.mensaje-exito .exito-icono {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.mensaje-exito h2 {
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 16px;
}

.mensaje-exito p {
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.6;
}

.mensaje-exito .btn {
  margin-top: 24px;
}

/* ===== ESTADOS DE ERROR ===== */
.contrato-form .field.error input,
.contrato-form .field.error select,
.contrato-form .field.error textarea {
  border-color: #ff4757;
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.2);
}

.contrato-form .field .error-msg {
  color: #ff4757;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.contrato-form .field.error .error-msg {
  display: block;
}

.contrato-form .firma-container.error {
  border-color: #ff4757;
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.2);
}

.contrato-form .consent-contrato.error {
  border-color: #ff4757;
  background: rgba(255, 71, 87, 0.1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .contrato-form {
    padding: 24px 20px;
    margin: 0 10px;
  }

  .contrato-form .form-grid {
    grid-template-columns: 1fr;
  }

  .contrato-form .field-reserva {
    padding: 16px;
  }

  .contrato-form .form-title {
    font-size: 1.25rem;
  }

  .contrato-form .btn-submit {
    font-size: 16px;
    padding: 16px 24px;
  }

  .contrato-form #firmaCanvas {
    height: 120px;
  }

  .mensaje-exito {
    margin: 40px 20px;
    padding: 40px 24px;
  }

  .mensaje-exito .exito-icono {
    width: 60px;
    height: 60px;
    font-size: 30px;
  }

  .mensaje-exito h2 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .contrato-form {
    padding: 20px 16px;
  }

  .contrato-form .legal-text {
    font-size: 12px;
    padding: 16px;
  }

  .contrato-form #firmaCanvas {
    height: 100px;
  }
}

/* ===== ANIMACIONES ===== */
.contrato-form .field {
  animation: slideInUp 0.4s ease forwards;
  opacity: 0;
}

.contrato-form .field:nth-child(1) { animation-delay: 0.05s; }
.contrato-form .field:nth-child(2) { animation-delay: 0.1s; }
.contrato-form .field:nth-child(3) { animation-delay: 0.15s; }
.contrato-form .field:nth-child(4) { animation-delay: 0.2s; }
.contrato-form .field:nth-child(5) { animation-delay: 0.25s; }
.contrato-form .field:nth-child(6) { animation-delay: 0.3s; }
.contrato-form .field:nth-child(7) { animation-delay: 0.35s; }
.contrato-form .field:nth-child(8) { animation-delay: 0.4s; }
.contrato-form .field:nth-child(9) { animation-delay: 0.45s; }
.contrato-form .field:nth-child(10) { animation-delay: 0.5s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .contrato-form .field {
    animation: none;
    opacity: 1;
  }
  
  .contrato-form .btn-submit .btn-loading::after {
    animation: none;
  }
}


/* ===== ciudades.css ===== */
/* ==========================================================================
   Las páginas de ciudad
   ==========================================================================

   Estas reglas vivían en un <style> suelto dentro del HTML, justo entre la
   sección del contrato y la primera ciudad. Cuando la web se partió en una
   página por dirección (26-08-2026), ese trozo se fue con la página del
   CONTRATO y las 54 ciudades se quedaron sin estilos: sin las píldoras de los
   chips, sin las tarjetas de las preguntas y con el titular cayendo en la
   letra del sistema. Aquí, en su hoja y enlazada desde la cabecera, le llegan
   a todas.

   De paso se ha quitado el `font-family: 'Anton'` del titular: esa letra no
   se carga en esta web —no está en el enlace de fuentes— así que nunca se vio.
   El titular lo pone ahora `estetica.css`, como en el resto del sitio.
   ========================================================================== */

      [data-ciudad] {
        background: linear-gradient(135deg, #0a090d, #141318);
        color: #fff;
        padding: 120px 0 80px;
      }
      [data-ciudad] .container { max-width: min(1100px, 92vw); margin-inline: auto; padding-inline: 20px; }
      [data-ciudad] .ciudad-eyebrow {
        display: inline-block;
        font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
        color: #D4AF37; margin-bottom: 14px;
      }
      [data-ciudad] h1 { line-height: 1.05;
        margin: 0 0 18px;
      }
      [data-ciudad] h1 span { color: #D4AF37; }
      [data-ciudad] .ciudad-lead { font-size: clamp(17px, 2vw, 20px); color: #d8d4dd; max-width: 60ch; margin: 0 0 18px; }
      [data-ciudad] .ciudad-cuerpo { color: #b9b4c2; max-width: 62ch; margin: 0 0 28px; line-height: 1.7; }
      [data-ciudad] .ciudad-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; list-style: none; padding: 0; }
      [data-ciudad] .ciudad-chips li {
        padding: 8px 16px; border: 1px solid rgba(212,175,55,.35); border-radius: 999px;
        background: rgba(212,175,55,.08); font-size: 14px; color: #E8D9A0;
      }
      [data-ciudad] .ciudad-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
      [data-ciudad] .ciudad-faq { display: grid; gap: 12px; margin-bottom: 40px; }
      [data-ciudad] .ciudad-faq details {
        border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
        background: rgba(255,255,255,.03);
      }
      [data-ciudad] .ciudad-faq summary { padding: 16px 20px; cursor: pointer; font-weight: 600; list-style: none; }
      [data-ciudad] .ciudad-faq summary::-webkit-details-marker { display: none; }
      [data-ciudad] .ciudad-faq summary::after { content: '+'; float: right; color: #D4AF37; font-size: 20px; line-height: 1; }
      [data-ciudad] .ciudad-faq details[open] summary::after { content: '−'; }
      [data-ciudad] .ciudad-faq p { padding: 0 20px 18px; margin: 0; color: #b9b4c2; line-height: 1.7; max-width: 62ch; }
      [data-ciudad] .ciudad-otras { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; }
      [data-ciudad] .ciudad-otras h2 { font-size: 15px; color: #8a8494; margin: 0 0 14px; }
      [data-ciudad] .ciudad-otras ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
      [data-ciudad] .ciudad-otras a {
        display: inline-block; padding: 9px 16px; border: 1px solid rgba(255,255,255,.14);
        border-radius: 999px; color: #d8d4dd; text-decoration: none; font-size: 14px;
      }
      [data-ciudad] .ciudad-otras a:hover { border-color: #D4AF37; color: #D4AF37; }

      /* Índice de los 179 */
      [data-route="ciudades"] .indice { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px),1fr)); }
      [data-route="ciudades"] .indice h3 {
        display: flex; align-items: baseline; gap: 8px;
        font-size: 17px; margin: 0 0 12px; padding-bottom: 8px;
        border-bottom: 2px solid #D4AF37; color: #fff;
      }
      [data-route="ciudades"] .indice h3 small { font-size: 12px; color: #8a8494; letter-spacing: .08em; }
      [data-route="ciudades"] .indice ul { list-style: none; margin: 0; padding: 0; }
      [data-route="ciudades"] .indice li { margin: 0 0 4px; }
      [data-route="ciudades"] .indice a { color: #d8d4dd; text-decoration: none; font-size: 15px; }
      [data-route="ciudades"] .indice a:hover { color: #D4AF37; }
      [data-route="ciudades"] .indice span { color: #6f6a79; font-size: 15px; }
    


/* ==========================================================================
   Repaso 31-08: la página se veía descuadrada
   ==========================================================================

   Dos cosas, las dos de medida:

   1. El hueco de arriba venía POR PARTIDA DOBLE. `unificado.css` le da a toda
      sección que no sea la portada 141 px por arriba (para que el título no se
      meta debajo del menú, que mide 108) y ADEMÁS le da otros 96 al contenedor
      de dentro. Total: 237 px de nada entre el menú y el antetítulo. Aquí se
      deja solo uno.

   2. Cada trozo tenía su propio ancho: el titular ocupaba 1.124 px, la entrada
      687, el cuerpo 586 y las preguntas otra vez 1.124. El ojo no encontraba
      un borde por el que bajar. Ahora todo el bloque de texto comparte la
      misma columna; el listado de ciudades de abajo sigue a lo ancho, que ahí
      sí interesa que quepan muchas.
   ========================================================================== */

section[data-ciudad] > .container {
  padding-top: 0;
  padding-bottom: 0;
}

section[data-route][data-ciudad] {
  padding-top: calc(108px + 34px) !important;
}

[data-ciudad] .ciudad-lead,
[data-ciudad] .ciudad-cuerpo,
[data-ciudad] .ciudad-chips,
[data-ciudad] .ciudad-cta,
[data-ciudad] .ciudad-faq {
  max-width: 780px;
}

/* La entrada y el cuerpo, con el mismo renglón: antes uno medía 60 caracteres
   y el otro 62, pero a cuerpos distintos, y se veían dos columnas diferentes
   una encima de otra. */
[data-ciudad] .ciudad-lead,
[data-ciudad] .ciudad-cuerpo {
  max-width: 780px;
}

/* El titular tampoco se estira hasta el borde: partido en dos renglones se
   lee mejor y hace bloque con lo de debajo. */
[data-ciudad] h1 {
  max-width: 16ch;
}

/* La pregunta y el «+» quedaban a 1.100 px de distancia. */
[data-ciudad] .ciudad-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

[data-ciudad] .ciudad-faq summary::after {
  float: none;
  flex: none;
}


/* ==========================================================================
   Repaso 01-09 · la carta de zona
   ==========================================================================
   Las 108 páginas de ciudad eran texto bien ordenado sobre negro liso: ni
   los focos de la sala, ni el oro de la casa, ni jerarquía. Ahora cada una
   es una carta de zona:

   · El fondo deja de ser liso: dos focos —uno cálido a la izquierda, otro
     frío a la derecha, como los de una sala de verdad— y un confeti tenue
     suspendido, todo con degradados, sin una sola imagen.
   · El titular a tamaño de cartel con su raya de rotulador, y el «eyebrow»
     convertido en el sello de la casa.
   · En escritorio, dos columnas: el texto y los chips a la izquierda; las
     dudas a la derecha, dentro de una entrada de papel oscuro con su filo
     dorado, como las de la portada. El rótulo «DUDAS RÁPIDAS» del talón
     sale de un ::before: no es texto del documento.
   · Los enlaces de «otras ciudades» son las píldoras de siempre, con el
     hover dorado, cerrando la carta a lo ancho.

   Ni una palabra ni un enlace cambian: es la misma página con luz. El
   guardián del SEO la ve idéntica.
   ========================================================================== */

/* -- El fondo: los dos focos y el confeti --------------------------------- */

/* (Sin foto de fondo: la ciudad ya enseña la suya en la carta de la derecha.) */

/* -- La carta, a dos columnas --------------------------------------------- */

[data-ciudad] .container {
  max-width: min(1240px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  grid-template-areas:
    'sello  faq'
    'titulo faq'
    'lead   faq'
    'cuerpo faq'
    'chips  faq'
    'cta    faq'
    'otras  otras';
  column-gap: clamp(28px, 4.5vw, 72px);
  align-content: start;
}

[data-ciudad] .ciudad-eyebrow { grid-area: sello; justify-self: start; }
[data-ciudad] h1 { grid-area: titulo; }
[data-ciudad] .ciudad-lead { grid-area: lead; }
[data-ciudad] .ciudad-cuerpo { grid-area: cuerpo; }
[data-ciudad] .ciudad-chips { grid-area: chips; }
[data-ciudad] .ciudad-cta { grid-area: cta; align-self: start; }
[data-ciudad] .ciudad-faq { grid-area: faq; align-self: start; }
[data-ciudad] .ciudad-otras { grid-area: otras; margin-bottom: 64px; }

@media (max-width: 1000px) {
  [data-ciudad] .container {
    grid-template-columns: 1fr;
    grid-template-areas: 'sello' 'titulo' 'lead' 'cuerpo' 'chips' 'cta' 'faq' 'otras';
  }
}

/* -- El sello y el titular ------------------------------------------------ */

[data-ciudad] .ciudad-eyebrow {
  padding: 6px 13px;
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 999px;
  background: rgba(212, 175, 55, .08);
  font-size: 11.5px;
  margin-bottom: 18px;
}

[data-ciudad] h1 {
  line-height: .96;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 22px;
}

/* La raya de rotulador, al pie del titular y a su izquierda. */
[data-ciudad] h1::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #8C6A2E, #FFD46A 55%, #D4AF37);
  transform: rotate(-.6deg);
}

/* El nombre de la ciudad, dorado y con un respiro de luz detrás. */
[data-ciudad] h1 span {
}

/* -- Chips y botones ------------------------------------------------------ */

[data-ciudad] .ciudad-chips li {
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

[data-ciudad] .ciudad-chips li:hover {
  border-color: rgba(212, 175, 55, .7);
  color: #fff;
}

[data-ciudad] .ciudad-cta .btn-primary {
  padding: 0 26px !important;
  font-size: 16px !important;
}

/* -- Las dudas, en su entrada de papel ------------------------------------ */

[data-ciudad] .ciudad-faq {
  position: relative;
  display: block;
  padding: 26px 22px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, .08), transparent 110px),
    linear-gradient(180deg, #141118, #0e0c12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  overflow: hidden;
  margin-bottom: 40px;
}

[data-ciudad] .ciudad-faq::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #D4AF37 30%, #D4AF37 70%, transparent);
  opacity: .8;
}

/* El rótulo del talón. Decorativo: sale del CSS, no del documento. */
[data-ciudad] .ciudad-faq::before {
  content: 'DUDAS RÁPIDAS';
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #FFD46A;
}

[data-ciudad] .ciudad-faq details {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0;
  background: transparent;
  margin: 0;
}

[data-ciudad] .ciudad-faq details:last-of-type { border-bottom: 0; }

[data-ciudad] .ciudad-faq summary {
  position: relative;
  padding: 14px 40px 14px 0;
  font-weight: 700;
}

[data-ciudad] .ciudad-faq summary::after {
  content: '+';
  float: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .5);
  color: #FFD46A;
  font-size: 18px;
  font-weight: 400;
  transition: transform .25s ease, background .2s ease;
}

[data-ciudad] .ciudad-faq details[open] summary::after {
  content: '+';
  transform: translateY(-50%) rotate(45deg);
  background: rgba(212, 175, 55, .15);
}

[data-ciudad] .ciudad-faq p { padding: 0 6px 16px 0; }

/* -- Otras ciudades ------------------------------------------------------- */

[data-ciudad] .ciudad-otras {
  border-top: 1px solid rgba(212, 175, 55, .22);
  padding-top: 28px;
}

[data-ciudad] .ciudad-otras a {
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

[data-ciudad] .ciudad-otras a:hover { }

/* -- La entrada en escena ------------------------------------------------- */

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

[data-ciudad] .ciudad-eyebrow,
[data-ciudad] h1,
[data-ciudad] .ciudad-lead,
[data-ciudad] .ciudad-cuerpo,
[data-ciudad] .ciudad-chips,
[data-ciudad] .ciudad-cta,
[data-ciudad] .ciudad-faq {
  animation: ciudad-sube .65s cubic-bezier(.2, .8, .3, 1) both;
}

[data-ciudad] h1 { animation-delay: .06s; }
[data-ciudad] .ciudad-lead { animation-delay: .14s; }
[data-ciudad] .ciudad-cuerpo { animation-delay: .2s; }
[data-ciudad] .ciudad-chips { animation-delay: .26s; }
[data-ciudad] .ciudad-cta { animation-delay: .32s; }
[data-ciudad] .ciudad-faq { animation-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  [data-ciudad] .ciudad-eyebrow,
  [data-ciudad] h1,
  [data-ciudad] .ciudad-lead,
  [data-ciudad] .ciudad-cuerpo,
  [data-ciudad] .ciudad-chips,
  [data-ciudad] .ciudad-cta,
  [data-ciudad] .ciudad-faq,
  [data-ciudad] .ciudad-chips li,
  [data-ciudad] .ciudad-otras a {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   Repaso 02-09 · la carta de zona gana cuerpo
   ==========================================================================
   Emilio: «el diseño me sigue pareciendo poco para el resto de la web». Lo
   que faltaba en la columna derecha: debajo de las dudas quedaba un vacío.
   Ahora lo llena UNA FOTO enmarcada, ligeramente torcida como pegada en la
   carta —es un pseudoelemento del propio contenedor (::after también puede
   ser pieza de la rejilla), así que el HTML sigue intacto— y detrás de todo
   asoma el año de la temporada, gigante y hueco. */

[data-ciudad] .container {
  grid-template-areas:
    'sello  faq'
    'titulo faq'
    'lead   faq'
    'cuerpo foto'
    'chips  foto'
    'cta    foto'
    'otras  otras';
}

[data-ciudad] .container::after {
  content: '';
  grid-area: foto;
  align-self: stretch;
  min-height: 240px;
  margin: 6px 0 40px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, transparent 55%, rgba(8, 6, 10, .45)),
    url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%204.w800.webp') center / cover no-repeat;
}

/* El año de la temporada, gigante y hueco, asomando bajo la carta. */
[data-ciudad] .container::before {
  position: absolute;
  right: -10px;
  bottom: 90px;
  z-index: 0;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: clamp(110px, 14vw, 230px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, .22);
  pointer-events: none;
}

[data-ciudad] .container { position: relative; }
[data-ciudad] .container > * { position: relative; z-index: 1; }

/* El titular, medio punto más de cartel. */
[data-ciudad] h1 { }

@media (max-width: 1000px) {
  [data-ciudad] .container {
    grid-template-areas: 'sello' 'titulo' 'lead' 'cuerpo' 'chips' 'cta' 'faq' 'foto' 'otras';
  }
  [data-ciudad] .container::after { margin: 0 0 32px; min-height: 200px; }
  [data-ciudad] .container::before { display: none; }
}


/* ==========================================================================
   El índice de los 179 (/ciudades) NO es una carta de zona
   ==========================================================================
   Lleva `data-ciudad` como las demás y la rejilla de dos columnas se lo
   comía: el marco de la foto se estiraba a lo alto de los 179 municipios y
   el titular caía al fondo. Aquí vuelve a ser una columna, sin foto ni año.
   ========================================================================== */

[data-route="ciudades"] .container {
  display: block !important;
  max-width: min(1100px, 92vw);
}

[data-route="ciudades"] .container::before,
[data-route="ciudades"] .container::after {
  content: none !important;
  display: none !important;
}

[data-route="ciudades"] h1 { }
[data-route="ciudades"] .ciudad-cta { margin-bottom: 40px; }


/* El índice de los 179: «Resto de la Comunidad» son 126 municipios en UNA
   columna, una lista de tres pantallas de alto. La lista larga se reparte en
   tres columnas y su bloque cruza la rejilla entera. Solo las largas: las
   zonas de 6-15 municipios se quedan como están. */
[data-route="ciudades"] .indice > div:has(li:nth-child(20)) {
  grid-column: 1 / -1;
}

[data-route="ciudades"] .indice ul:has(li:nth-child(20)) {
  columns: 3;
  column-gap: 32px;
}

@media (max-width: 720px) {
  [data-route="ciudades"] .indice ul:has(li:nth-child(20)) { columns: 2; }
}


/* ===== unificado.css ===== */
/* ==========================================================================
   La misma web en todas las páginas
   ==========================================================================

   Cada página se fue montando por su cuenta y con su propia hoja de estilos
   (eso.css, bach.css, uni.css, locales.css, opiniones.css…). El resultado: el
   MISMO elemento se veía distinto según dónde estuvieras.

   Lo que había, medido en el navegador:
     · El título de página, ocho tamaños: 24, 28, 32, 35, 36, 38, 48 y 51 px.
     · El botón `.btn-primary`: 14 px en la portada, 19,2 px en ESO, 13,3 px en
       la galería. Radios de 12, 14, 16 y 25 px.
     · Las tarjetas: esquinas de 20 px en locales y de 24 px en opiniones.
     · El ritmo de las secciones: 96/96 px casi siempre, 120/80 en las de
       ciudad y 40/40 en las legales.

   Esta hoja va la ÚLTIMA y fija una sola escala. Lleva `!important` a
   propósito: las reglas de cada página son muy específicas
   (`[data-route="eso"] .hero .btn`) y sin eso seguirían ganando. Es el precio
   de unificar sin reescribir diez ficheros; si algún día se limpian esas
   hojas, este `!important` se puede quitar.

   Para cambiar el tamaño de algo, se cambia AQUÍ y cambia en toda la web.
   ========================================================================== */

:root {
  /* Escala tipográfica. Un solo sitio donde tocarla. */
  --t-h1: clamp(40px, 4.6vw, 64px);
  --t-h2: clamp(28px, 2.6vw, 40px);
  --t-h3: 19px;

  /* Ritmo vertical de las secciones */
  --sec-y: clamp(56px, 7vw, 96px);

  /* Tarjetas */
  --card-radio: 18px;
  --card-borde: 1px solid rgba(255, 255, 255, .12);
  --card-fondo: rgba(255, 255, 255, .05);

  /* Botones */
  --btn-radio: 12px;
}

/* --------------------------------------------------------------------------
   1. El vídeo de fondo, en toda la web
   --------------------------------------------------------------------------
   Llegué a quitarlo de todas las rutas menos la portada y fue un error: el
   vídeo es parte de la web. Se queda donde estaba. Lo que arregla la
   legibilidad es el velo que lleva encima (ver `base.css`), no quitarlo. */

/* --------------------------------------------------------------------------
   2. Los títulos, del mismo tamaño en todas partes
   -------------------------------------------------------------------------- */

section[data-route] h1 { font-size: var(--t-h1) !important; line-height: 1.08; }
section[data-route] h2 { font-size: var(--t-h2) !important; line-height: 1.15; }
section[data-route] h3 { font-size: var(--t-h3) !important; line-height: 1.25; }

/* La portada es la portada: su titular manda sobre el resto. */
section[data-route="home"] .hero h1 { font-size: clamp(38px, 6vw, 68px) !important; }

/* --------------------------------------------------------------------------
   3. El mismo aire arriba y abajo de cada sección
   --------------------------------------------------------------------------
   La cabecera es fija y mide 108 px: la primera sección de cada página tiene
   que empezar por debajo o el título se mete detrás del menú. */

section[data-route] > .container,
section[data-route] > .px-wrap {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}

section[data-route]:not([data-route="home"]) {
  padding-top: calc(108px + var(--sec-y) * .35) !important;
  padding-bottom: var(--sec-y) !important;
}

/* --------------------------------------------------------------------------
   4. Un solo botón
   --------------------------------------------------------------------------
   `.btn` es la forma; el tamaño lo pone el sitio donde vive, no la página. */

[data-route] .btn,
[data-route] .btn-primary,
[data-route] .btn-secondary,
[data-route] .btn-epic,
[data-route] .zone-nav-btn,
[data-route] .stage-btn {
  border-radius: var(--btn-radio) !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

/* Los de la portada y los de reservar son los que hay que ver desde lejos */
[data-route] .hero .btn,
[data-route="reserva"] .btn,
[data-route] .btn-grande {
  padding: 0 26px !important;
  font-size: 16px !important;
  min-height: 48px;
}

/* --------------------------------------------------------------------------
   5. Una sola tarjeta
   -------------------------------------------------------------------------- */

[data-route] .card,
[data-route] .stage-card,
[data-route] .venue-card-premium,
[data-route] .finca-card-premium,
[data-route] .chat-card,
[data-route] .px-block {
  border-radius: var(--card-radio) !important;
}

/* --------------------------------------------------------------------------
   6. El mismo ancho de contenido
   -------------------------------------------------------------------------- */

[data-route] .container,
[data-route] .px-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* --------------------------------------------------------------------------
   7. El titular de una tarjeta se lee como una tarjeta
   --------------------------------------------------------------------------
   Los titulares de las tarjetas de ESO, Bachillerato, FP y Universidad eran
   `h3` justo debajo del `h1`, saltándose el `h2`. El orden de los titulares es
   de lo poco del diseño que Google lee de verdad, así que ahora son `h2`.
   Pero un `h2` de sección no puede medir lo mismo dentro de una tarjeta: aquí
   se les devuelve el tamaño que tenían. Cambia la etiqueta, no el aspecto. */

[data-route] .main-card-title,
[data-route] .card > h2,
[data-route] .include-card h2,
[data-route] .stage-card h2 {
  font-size: var(--t-h3) !important;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   8. El vídeo de fondo, en el móvil solo el cartel
   --------------------------------------------------------------------------
   El vídeo pesa 3,4 MB y se descargaba siempre, también con datos móviles.
   En pantalla pequeña se deja el cartel —la misma imagen congelada, 29 KB— y
   el vídeo queda para el ordenador, que es donde de verdad se aprecia.
   El fondo NO desaparece: se ve la misma escena, quieta.
   Lo mismo si el sistema pide ahorrar datos o menos movimiento. */

/* El cartel va con el mismo peso que tenía el vídeo (32 %). Puesto a plena
   luz cegaba: el fondo del móvil salía mucho más brillante que en el
   ordenador y el texto encima costaba de leer. */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .site-bg-video video { display: none; }
  .site-bg-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cartel-video);
    background-size: cover;
    background-position: center;
    opacity: .32;
  }
}

:root {
  --cartel-video: url("../recursos/GALERIA VIDEOS/posters/VIDEO GRADUACIONES MADRID HOME (1).webp");
}

/* --------------------------------------------------------------------------
   9. El dorado, para lo que importa
   --------------------------------------------------------------------------
   Estaba en el titular, en el subtítulo, en las etiquetas, en los bordes y en
   el botón. Cuando todo destaca no destaca nada. Se queda en los titulares y
   en los botones —lo que quieres que miren y que pulsen—; las etiquetas pasan
   a texto claro con un filo tenue. No desaparece ninguna: se ven igual de
   bien, dejan de competir. */

[data-route] .chip,
[data-route] .feature-tag,
[data-route] .tag,
[data-route] .pill {
  color: rgba(255, 255, 255, .88) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .05);
}

/* --------------------------------------------------------------------------
   10. La portada, menos amontonada
   --------------------------------------------------------------------------
   Antes de ver la primera foto había seis bloques apilados: etiqueta, caja de
   reserva, titular, párrafo, cuatro botones y tres cifras. No se quita nada;
   se juntan un poco para que quepa más en la primera pantalla. */

[data-route="home"] .hero-core > * + * { margin-top: 14px; }
[data-route="home"] .hero .stats,
[data-route="home"] .hero .hero-stats { margin-top: 22px; }

/* --------------------------------------------------------------------------
   11. El hueco de las tarjetas de etapa
   --------------------------------------------------------------------------
   El birrete ocupaba un tercio de la tarjeta y luego había un vacío antes del
   título. Se acerca el dibujo al texto y la tarjeta se lee de un golpe. */

[data-route="home"] .stage-icon { margin-bottom: 10px; }
[data-route="home"] .stage-card { padding-top: 30px; }

/* --------------------------------------------------------------------------
   12. «Ver galería» y «Ver opiniones» son botones, también en el móvil
   --------------------------------------------------------------------------
   En pantalla pequeña se les había quitado el marco y se les había puesto un
   subrayado, para que no le disputaran el sitio a «Reservar fecha». El efecto
   real era otro: entre dos botones de verdad aparecían dos enlaces sueltos, y
   no se entendía que fueran lo mismo. La jerarquía ya la da el color —el
   dorado es el principal, estos van en gris—, así que recuperan la forma de
   botón que tienen en el ordenador. Solo se anula el subrayado y el fondo
   transparente; el tamaño y el marco los pone `.btn-ghost`. */

@media (max-width: 700px) {
  [data-route="home"] .hero-cta .hero-cta-sec {
    background: rgba(255, 255, 255, .07) !important;
    outline: 1px solid rgba(255, 255, 255, .18) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    /* Más pequeños que «Reservar fecha»: se ve de un vistazo cuál es el que
       hay que pulsar, y los dos caben en un renglón. */
    padding: 13px 20px !important;
    font-size: 15px !important;
    min-height: 46px !important;
    /* Los dos se reparten un renglón para ellos solos. */
    flex: 1 1 0;
  }

  /* Reservar y WhatsApp, cada uno con su renglón entero: si comparten fila con
     un secundario, los cuatro botones parecen lo mismo. */
  [data-route="home"] .hero-cta .btn-primary,
  [data-route="home"] .hero-cta .btn-wa {
    flex: 1 0 100%;
  }
}


/* ===== letras.css ===== */
/* ==========================================================================
   Las letras de la web
   ==========================================================================
   Dos tipografías y ninguna más, servidas desde este mismo dominio.

   · LIBRE FRANKLIN para los titulares, puesta en 900. Es la Franklin Gothic
     de los carteles y los titulares de periódico americanos, en versión
     libre. En negra llena el ancho de la línea en vez de flotar en medio, y
     eso es lo que hace que un titular parezca un titular.

   · ARCHIVO para el texto, el menú y los botones. Es LA MISMA que usa
     projectxeventos.es, que es lo que se pidió: las dos webs son de la misma
     casa y el texto tiene que sonar igual. Allí los titulares van también en
     Archivo; aquí no, aquí manda la Franklin. Misma voz, distinto titular.

   Antes eran Poppins (la letra que lleva media internet) y Permanent Marker
   para los antetítulos, las dos pedidas a Google. Se van las dos peticiones
   y con ellas dos cosas: una conexión más antes de que se vea el primer
   titular, y el envío de la IP de cada visitante a un servidor de Google
   —que la política de cookies de esta web dice que no ocurre—.

   DÓNDE VIVEN: en `/letras/`, NO en `/recursos/`. Es a propósito. `recursos/`
   está fuera del repositorio y el despliegue lo excluye (son las 618 fotos,
   168 MB). Una tipografía metida ahí sobrevive al primer despliegue y
   desaparece en el segundo, con la web entera cayendo a la letra de respaldo
   sin que nadie lo relacione con el despliegue.

   PARA QUITARLO TODO: se borra el <link> de esta hoja y la web vuelve a la
   letra de sistema. No hay nada más enredado por ahí.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Los ficheros
   --------------------------------------------------------------------------
   Cada letra en dos trozos por `unicode-range`: el navegador solo se baja el
   segundo (latin-ext) si la página tiene caracteres que lo necesiten, cosa
   que en castellano casi nunca pasa. Sin cursivas: no se usan en ningún
   sitio y son otros cuatro ficheros. */

/* -- Libre Franklin · titulares. Un archivo cubre de 400 a 900. ----------- */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/letras/franklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/letras/franklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -- Archivo · texto, menú y botones -------------------------------------
   El mismo fichero que sirve projectxeventos.es. Es variable en DOS ejes,
   anchura (62-125) y peso (100-900), así que un solo archivo cubre desde el
   párrafo hasta el botón. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/letras/archivo-latin.v2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/letras/archivo-latin-ext.v2.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   2. Quién es quién
   -------------------------------------------------------------------------- */

:root {
  --letra-titular: 'Libre Franklin', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --letra-texto: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   3. El texto
   --------------------------------------------------------------------------
   `base.css` pone Poppins en `html,body` con una regla de un solo elemento;
   esta hoja va después y gana sin necesidad de `!important`. Los campos de
   formulario se nombran aparte porque el navegador NO les hereda la letra:
   sin esto, el formulario de reserva sale en la letra del sistema. */

html,
body {
  font-family: var(--letra-texto);
}

input,
textarea,
select,
button {
  font-family: inherit;
}


/* --------------------------------------------------------------------------
   4. Los titulares
   --------------------------------------------------------------------------
   En 900 y con las letras un punto más juntas de lo que vienen: a tamaño
   grande, el espaciado de fábrica deja el titular suelto. El tamaño NO se
   toca aquí —eso lo manda `unificado.css`, que es donde está la escala— y
   por eso estas reglas solo hablan de letra, peso y espaciado.

   `!important` en el peso porque varias hojas de página fijan `font-weight`
   en su propio titular (`opiniones.css` pone 700, por ejemplo) con más
   especificidad que esto. Es el mismo motivo por el que lo lleva
   `unificado.css`. */

h1, h2, h3, h4,
.title,
.section-title,
.hero .title,
.main-card-title,
[data-route] h1,
[data-route] h2,
[data-route] h3,
[data-route] .title,
[data-route] .section-title {
  font-family: var(--letra-titular) !important;
  font-weight: 900 !important;
  letter-spacing: -.005em;
}

/* El titular de portada es el más grande de la web: cuanto más grande, más
   se nota el aire entre letras, así que ahí se cierra un poco más. */
section[data-route="home"] .hero h1,
section[data-route="home"] .hero .title {
  letter-spacing: -.018em;
}


/* --------------------------------------------------------------------------
   5. Los antetítulos
   --------------------------------------------------------------------------
   Los `.kicker` («ESO», «Bachillerato», «Reserva»…) iban en Permanent
   Marker, una letra de rotulador que se pedía a Google solo para seis
   palabras. Ahora son Franklin en versalita ancha: se leen como una etiqueta
   y no como una nota a mano.

   Llevan `!important` porque el `font-family` está escrito EN EL ATRIBUTO
   `style` de cada span, dentro del HTML, y un atributo gana a cualquier hoja
   que no lo lleve. */

.kicker {
  font-family: var(--letra-titular) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height: 1.2;
}


/* --------------------------------------------------------------------------
   6. Los botones y el menú
   --------------------------------------------------------------------------
   Archivo, un poco ensanchada y en negrita: es la que aguanta el texto en
   caja alta de los botones sin que se junten las letras. */

.btn,
.btn-primary,
.nav-links a,
.nav-links button {
  font-family: var(--letra-texto);
  font-weight: 600;
  letter-spacing: .01em;
}


/* ===== menu.css ===== */
/* ==========================================================================
   El menú
   ==========================================================================
   Antes: ocho enlaces sueltos en fila —ESO, Bachillerato, FP, Universidad,
   Locales, Fincas, Galería, Opiniones— más el botón de reservar. Nueve cosas
   en la misma línea, todas con el mismo peso visual y, en cuanto la pantalla
   bajaba de 1200 px, apretándose unas contra otras.

   Ahora es el mismo menú de projectxeventos.es, que es lo que se pidió: dos
   grupos que se despliegan y tres cosas sueltas.

       Graduaciones ▾   Espacios ▾   Galería   Opiniones   [Reserva tu fecha]

   Lo que se copia es la MECÁNICA —el desplegable, la barra que se opaca al
   bajar, el panel de móvil que entra desde la derecha—; el color sigue
   siendo el de esta casa, el dorado del logo. Ni una regla de aquí toca la
   paleta.

   NO SE PIERDE NINGÚN ENLACE: los ocho siguen estando, y siguen siendo
   `<a href>` de verdad dentro de `.nav-links`. Esto último importa por dos
   motivos: Google los sigue leyendo igual, y `components/router.js` marca la
   página en la que estás recorriendo `.nav-links a`, así que sigue
   funcionando sin tocarle una línea.

   La cabecera pasa de 108 a 92 px de alto (el logo, de 80 a 64). El hueco
   que `unificado.css` deja arriba de cada página se mide contra 108, así que
   ahora sobran 16 px: es aire de más, nunca texto por debajo del menú.

   Para quitarlo: se borra el <link> de esta hoja y el menú vuelve a la fila
   de nueve. El HTML de los grupos se queda, pero se ve como una lista.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. La barra
   --------------------------------------------------------------------------
   El alto no se escribe a mano en ningún sitio: sale del logo más los 14 px
   de relleno de `.nav-inner` por arriba y por abajo. Se guarda en
   `--alto-nav` porque el panel de móvil tiene que empezar EXACTAMENTE donde
   acaba la barra; con el número escrito dos veces, al cambiar el logo una de
   las dos se queda vieja y el panel aparece con una franja transparente. */

.nav {
  --alto-nav: 92px;
}

.nav-inner {
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand img.logo {
  height: 64px;
  transition: height .25s ease;
}

/* La marca escrita al lado del escudo, como hace projectxeventos.es con la
   suya: el nombre en blanco y MADRID en el dorado de la casa. Va por CSS
   (content) y no en el HTML a propósito: el logo ya lleva el nombre en su
   `alt`, y así el texto de las 108 páginas no cambia ni una letra para el
   guardián del SEO. */
.brand img.logo { order: 0; }

/* Los dos van DETRÁS del escudo (order): un pseudoelemento ::before nace
   antes de la imagen y sin esto la marca quedaba partida por el logo. */
.brand::before,
.brand::after {
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.brand::before {
  content: 'Tu Graduación';
  order: 1;
  color: #fff;
}

.brand::after {
  content: 'Madrid';
  order: 2;
  margin-left: -6px;
  color: var(--gold-light, #FFD46A);
}

/* Entre el móvil y el portátil pequeño no caben marca escrita y menú:
   se queda el escudo, que ya dice quiénes somos. En móvil sí cabe, más
   pequeña, porque el menú está plegado en el botón. */
@media (max-width: 1220px) and (min-width: 981px) {
  .brand::before,
  .brand::after { display: none; }
}

@media (max-width: 980px) {
  .brand { gap: 9px; }
  .brand::before,
  .brand::after { font-size: 15px; }
  .brand::after { margin-left: -4px; }
}

@media (max-width: 370px) {
  .brand::before,
  .brand::after { display: none; }
}

/* Al bajar, la barra se opaca (`.nav-solida`, de `components/ui.js`) y el
   logo encoge un punto más: la cabecera estorba menos leyendo. */
.nav.nav-solida .brand img.logo {
  height: 54px;
}


/* --------------------------------------------------------------------------
   2. Los enlaces
   -------------------------------------------------------------------------- */

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav .nav-links > a,
.nav .nav-grupo-btn {
  position: relative;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--ink-dim, #d7dbe2);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.nav .nav-links > a:hover,
.nav .nav-grupo-btn:hover {
  color: #fff;
  background: rgba(212, 175, 55, .12) !important;
}

/* La página en la que estás: se subraya con un filo dorado corto en vez de
   pintarle una caja detrás. En una fila con desplegables, la caja hacía que
   el enlace activo pareciera un menú abierto. */
.nav .nav-links a.active:not(.btn-primary) {
  color: #fff;
  background: transparent !important;
  border: 0 !important;
}

.nav .nav-links > a.active:not(.btn-primary)::after,
.nav .nav-grupo.tiene-activo .nav-grupo-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-light, #FFD46A);
}

/* El botón de reservar no es un enlace más: se queda con su relleno dorado. */
.nav .nav-links a.btn-primary {
  margin-left: 8px;
  padding: 11px 20px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
}


/* --------------------------------------------------------------------------
   3. Los desplegables
   --------------------------------------------------------------------------
   `data-abierto` lo pone `components/menu.js`. En escritorio se abre también
   al pasar el ratón por encima; en móvil y en táctil, solo al tocar. */

.nav-grupo {
  position: relative;
}

.nav .nav-grupo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 15px;
}

/* La flechita. Va con `border` en vez de con un carácter: así hereda el
   color del texto y gira sin pedirle nada a nadie. */
.nav .nav-grupo-btn::before {
  content: '';
  order: 2;
  width: .4em;
  height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.06em, -.06em);
  transition: transform .2s ease;
}

.nav-grupo[data-abierto='true'] .nav-grupo-btn::before {
  transform: rotate(-135deg) translate(-.06em, -.06em);
}

.nav-grupo[data-abierto='true'] .nav-grupo-btn {
  color: #fff;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 232px;
  padding: 8px;
  background: rgba(12, 11, 16, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, .22);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  /* Escondido pero animable. `visibility` es lo que impide que un menú
     cerrado siga cazando clics encima de la página. */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.nav-grupo[data-abierto='true'] .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-menu-lista {
  display: grid;
  gap: 2px;
}

.nav .nav-menu a {
  display: block;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-dim, #d7dbe2);
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}

.nav .nav-menu a:hover,
.nav .nav-menu a.active {
  background: rgba(212, 175, 55, .16) !important;
  color: #fff;
  border: 0 !important;
}


/* --------------------------------------------------------------------------
   4. El botón de menú
   --------------------------------------------------------------------------
   Las tres rayas eran una sola `<span>` con dos sombras haciendo de rayas de
   arriba y de abajo. Con tres `<span>` de verdad se pueden cruzar en aspa al
   abrir, que es la señal de «esto se cierra por donde se abrió». */

.nav .hamburger {
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  background: rgba(255, 255, 255, .06);
}

.nav .hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
  transition: transform .28s ease, opacity .2s ease;
}

.nav.open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .hamburger span:nth-child(2) { opacity: 0; }
.nav.open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* --------------------------------------------------------------------------
   5. Móvil: panel entero, no tarjeta flotante
   --------------------------------------------------------------------------
   Lo de antes era una tarjeta pegada arriba con `inset: 64px 14px auto 14px`
   y alto automático: con nueve enlaces llegaba casi al final de la pantalla
   igual, pero sin poder desplazarse. Esto es un panel a pantalla completa
   que entra desde la derecha y sí se desplaza.

   El corte está en 980 px, que es donde ya lo tenía `base.css`. */

@media (max-width: 980px) {
  /* El logo baja a 52 px, así que la barra mide 80: 52 + 14 + 14. */
  .nav {
    --alto-nav: 80px;
  }

  .nav .hamburger {
    display: inline-flex;
  }

  .nav-links {
    position: fixed;
    /* Con alto propio en vez de `bottom: 0`. Al bajar, la barra estrena
       `backdrop-filter` y eso la convierte en el bloque contenedor de lo que
       lleva dentro en posición fija: con `bottom: 0` el panel se mediría
       contra la cabecera y se quedaría en una tira de 80 px. */
    top: var(--alto-nav);
    left: 0;
    right: 0;
    height: calc(100vh - var(--alto-nav));
    height: calc(100dvh - var(--alto-nav));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px clamp(16px, 5vw, 28px) 40px;
    background: rgba(10, 9, 13, .97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Fuera de pantalla y sin capturar toques mientras está cerrado */
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
    visibility: hidden;
    transition: transform .3s cubic-bezier(.3, .8, .3, 1), visibility .3s;
  }

  .nav.open .nav-links {
    transform: none;
    pointer-events: auto;
    visibility: visible;
  }

  .nav .nav-links > a,
  .nav .nav-grupo-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 15px 8px;
    font-size: 17px;
    border-radius: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .nav .nav-grupo-btn {
    display: flex;
  }

  .nav .nav-grupo-btn::before {
    margin-left: auto;
  }

  .nav .nav-links > a.active:not(.btn-primary)::after,
  .nav .nav-grupo.tiene-activo .nav-grupo-btn::after {
    left: 8px;
    bottom: 8px;
    transform: none;
  }

  .nav-grupo {
    display: flex;
    flex-direction: column;
  }

  /* En móvil el submenú no flota: se abre hacia abajo empujando la lista.
     El alto se anima con `grid-template-rows` —de 0fr a 1fr— porque es la
     única forma de que un alto automático se despliegue sin dar el salto.
     Por eso los enlaces cuelgan de `.nav-menu-lista` y no del menú: la fila
     que se comprime tiene que ser un hijo ÚNICO y sin relleno propio. */
  .nav-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0 0 0 10px;
    padding: 0 0 0 12px;
    background: none;
    border: 0;
    border-left: 2px solid rgba(212, 175, 55, .3);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .28s ease;
  }

  .nav-menu-lista {
    overflow: hidden;
  }

  .nav-grupo[data-abierto='true'] .nav-menu {
    grid-template-rows: 1fr;
    transform: none;
  }

  /* `base.css` centra todo lo que hay dentro de `.nav-links` en móvil. En una
     lista colgando de su grupo eso queda torcido: el título a la izquierda y
     sus hijos en medio. */
  .nav .nav-menu a {
    padding: 12px 8px;
    font-size: 16px;
    text-align: left;
    white-space: normal;
  }

  .nav .nav-links a.btn-primary {
    margin: 18px 0 0;
    padding: 15px 20px;
    justify-content: center;
    text-align: center;
  }

  .brand img.logo,
  .nav.nav-solida .brand img.logo {
    height: 52px;
  }
}

/* Con el panel abierto, la página de detrás no se mueve. La clase va en
   <html>, que es quien tiene el scroll. */
html.menu-abierto,
html.menu-abierto body {
  overflow: hidden;
}


/* ==========================================================================
   El menú con alma (repaso 02-09)
   ==========================================================================
   Era una fila de enlaces correcta y anónima. Tres gestos de la casa:

   · Los enlaces, en la Franklin del cartel: versalita ancha, pequeña, con
     aire entre letras. Es la letra de los titulares puesta a trabajar de
     rótulo, y lo que hace que el menú sea DE ESTA web y no de cualquiera.
   · El subrayado se dibuja de izquierda a derecha al pasar el ratón, como
     la raya de rotulador de los titulares.
   · El botón de reservar es una ENTRADA de verdad: dos muescas troqueladas
     a los lados, como las de las tarjetas de etapa. Nadie más lleva ese
     botón.
   ========================================================================== */

.nav .nav-links > a:not(.btn-primary),
.nav .nav-grupo-btn {
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* El subrayado que se dibuja. El activo lo lleva fijo (regla de arriba);
   el resto lo estrena al pasar el ratón. */
.nav .nav-links > a:not(.btn-primary):not(.active)::after,
.nav .nav-grupo:not(.tiene-activo) .nav-grupo-btn::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-light, #FFD46A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}

.nav .nav-links > a:not(.btn-primary):not(.active):hover::after,
.nav .nav-grupo:not(.tiene-activo):hover .nav-grupo-btn::after {
  transform: scaleX(1);
}

/* OJO: `:not(.btn-primary)`. Sin esa exclusión, esta regla le quitaba el
   degradado dorado al botón de reservar y se quedaba NEGRO al pasar el
   ratón: el único enlace del menú con relleno propio no puede compartir el
   hover de los que no lo tienen. */
.nav .nav-links > a:not(.btn-primary):hover,
.nav .nav-grupo-btn:hover {
  background: transparent !important;
}

/* La entrada: muescas a media altura y esquinas de papel, no de píldora. */
.nav .nav-links a.btn-primary {
  border-radius: 11px;
  padding: 14px 26px;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-mask:
    radial-gradient(circle 5px at 0 50%, transparent 4px, #000 5px),
    radial-gradient(circle 5px at 100% 50%, transparent 4px, #000 5px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 5px at 0 50%, transparent 4px, #000 5px),
    radial-gradient(circle 5px at 100% 50%, transparent 4px, #000 5px);
  mask-composite: intersect;
}

/* El oro, declarado a la cara en los dos estados. `colors-gold-override.css`
   lleva un `.nav-links a:hover { background: rgba(212,175,55,.12) !important }`
   que gana en especificidad al `.btn-primary` de esa misma hoja; y como es
   `background` a secas (no `background-color`), borraba el degradado y el
   botón se quedaba negro. Escribirlo aquí, en los dos estados, lo cierra. */
.nav .nav-links a.btn-primary,
.nav .nav-links a.btn-primary:hover,
.nav .nav-links a.btn-primary.active {
  background: linear-gradient(135deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A)) !important;
  color: var(--text-on-gold, #1a1204) !important;
}

.nav .nav-links a.btn-primary:hover {
  filter: saturate(1.08) brightness(1.04);
}

@media (max-width: 980px) {
  .nav .nav-links > a:not(.btn-primary),
  .nav .nav-grupo-btn { font-size: 15px; letter-spacing: .08em; }
  .nav .nav-links > a:not(.btn-primary):not(.active)::after,
  .nav .nav-grupo:not(.tiene-activo) .nav-grupo-btn::after { display: none; }
  .nav .nav-links a.btn-primary { -webkit-mask: none; mask: none; }
}


/* ===== etapas.css ===== */
/* ==========================================================================
   «Elige tu etapa» — cuatro entradas de fiesta
   ==========================================================================
   Lo que había: cuatro tarjetas de cristal esmerilado, las mismas cuatro
   tarjetas que hay en cualquier web hecha este año. Correctas y sin alma.

   La idea nueva sale del propio negocio: aquí se venden FIESTAS y la entrada
   va en la app. Pues cada etapa es eso, una entrada: papel oscuro con el filo
   dorado, las dos muescas troqueladas a los lados, la línea de puntos por
   donde se corta y el talón abajo con el botón. El gorro hace lo que hace un
   gorro de graduación cuando la cosa sale bien: al pasar el ratón, vuela.

   Cada etapa lleva su color de birrete —el violeta de la ESO, el azul de
   Bachillerato, el verde de FP y el dorado de la Universidad, que son los de
   las fotos de los gorros— pero solo en los detalles: el sello del curso, el
   filo de arriba y el brillo. El papel es el mismo para todas; la casa sigue
   siendo dorada.

   TODO LO DECORATIVO VA POR CSS (`content: attr(...)` y pseudoelementos):
   el sello «4º ESO», el número de entrada, la perforación. Nada de eso entra
   en el texto del documento, así que el guardián del SEO ve la MISMA página
   de siempre. Los titulares, las etiquetas y los botones no cambian ni una
   letra.

   El movimiento es solo CSS:
   · Las entradas suben escalonadas al llegar con el scroll
     (`animation-timeline: view()`; donde no existe, se ven quietas y ya).
   · Los gorros se mecen despacio en reposo, cada uno a su ritmo.
   · Al pasar el ratón por una entrada: sube, el brillo la recorre como una
     luz de sala, y el gorro se lanza al aire con giro y vuelta.
   Con «reducir movimiento» activado no se mueve nada de nada.

   Para quitarlo: se borra el <link> de esta hoja. El HTML de la sección es
   markup propio (clases `etapa-*`) y sin ella queda como una lista sobria.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. La sección y su cabecera
   -------------------------------------------------------------------------- */

[data-route="home"] .etapas-seccion {
  padding-top: 84px;
  padding-bottom: 72px;
}

[data-route="home"] .etapas-cabecera {
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 52px);
}

/* El titular, con la raya de rotulador dorado debajo: corta, gruesa y un
   pelín torcida, como la que se hace al subrayar un cartel a mano. */
[data-route="home"] .etapas-cabecera .section-title {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}

[data-route="home"] .etapas-cabecera .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}

[data-route="home"] .etapas-cabecera .section-sub {
  margin: 10px auto 0;
  max-width: 52ch;
  color: var(--muted, #b2b6c6);
}


/* --------------------------------------------------------------------------
   2. La rejilla
   --------------------------------------------------------------------------
   Cuatro columnas en pantalla grande, con las entradas pares un poco más
   bajas: colgadas, no alineadas con regla. En medio, dos y dos; en móvil,
   una debajo de otra y todas a la misma altura. */

[data-route="home"] .etapas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}

@media (max-width: 1000px) {
  [data-route="home"] .etapas {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  [data-route="home"] .etapas { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   3. La entrada
   -------------------------------------------------------------------------- */

[data-route="home"] .etapa {
  /* El color del birrete de cada curso. Se pisa más abajo por etapa. */
  --tinte: 212, 175, 55;
  /* Alto del talón: donde van las muescas y la línea de puntos. */
  --talon: 86px;
  --reposo: 0px;

  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr var(--talon);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(var(--tinte), .10), transparent 130px),
    linear-gradient(180deg, #141118, #0e0c12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  transform: translateY(var(--reposo));
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
  overflow: hidden;

  /* Las dos muescas del troquel, a la altura del corte. Donde `mask` no
     exista, la entrada queda sin agujeros y tan tranquila. */
  -webkit-mask:
    radial-gradient(circle 11px at 0 calc(100% - var(--talon)), transparent 10px, #000 11px),
    radial-gradient(circle 11px at 100% calc(100% - var(--talon)), transparent 10px, #000 11px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 11px at 0 calc(100% - var(--talon)), transparent 10px, #000 11px),
    radial-gradient(circle 11px at 100% calc(100% - var(--talon)), transparent 10px, #000 11px);
  mask-composite: intersect;
}

/* El filo de arriba: la banda de color del curso, como la cinta del gorro. */
[data-route="home"] .etapa::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgb(var(--tinte)) 30%, rgb(var(--tinte)) 70%, transparent);
  opacity: .85;
}

/* El brillo que recorre la entrada al pasar el ratón: una luz de sala
   barriendo el papel, no un destello de plantilla. Nace fuera y cruza. */
[data-route="home"] .etapa::after {
  content: '';
  position: absolute;
  inset: -40% auto auto -30%;
  width: 45%;
  height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .065) 45%, rgba(var(--tinte), .10) 55%, transparent);
  transform: translateX(-140%) rotate(8deg);
  pointer-events: none;
}

[data-route="home"] .etapa:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--tinte), .28), 0 0 44px rgba(var(--tinte), .12);
}

[data-route="home"] .etapa:hover::after {
  transition: transform .9s cubic-bezier(.3, .7, .3, 1);
}

/* Los colores, sacados de los propios gorros de las fotos. */
[data-route="home"] .etapa[data-etapa="eso"]  { --tinte: 139, 123, 216; }  /* violeta */
[data-route="home"] .etapa[data-etapa="bach"] { --tinte: 91, 141, 239; }   /* azul */
[data-route="home"] .etapa[data-etapa="fp"]   { --tinte: 63, 169, 124; }   /* verde */
[data-route="home"] .etapa[data-etapa="uni"]  { --tinte: 212, 175, 55; }   /* dorado */


/* --------------------------------------------------------------------------
   4. El sello del curso y el número de entrada
   --------------------------------------------------------------------------
   Texto decorativo, así que sale de `attr()`: no existe para el buscador.
   El sello dice el curso con nombre de instituto («4º ESO», «2º BACH»…);
   el número va girado en el borde, como el de una entrada de verdad. */

[data-route="home"] .etapa .etapa-gorro::before {
  content: attr(data-curso);
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--tinte), .55);
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgb(var(--tinte));
  background: rgba(var(--tinte), .08);
}

[data-route="home"] .etapa .etapa-gorro::after {
  content: 'Nº ' attr(data-n);
  position: absolute;
  top: 26px;
  right: -13px;
  transform: rotate(90deg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .34em;
  color: rgba(255, 255, 255, .28);
}


/* --------------------------------------------------------------------------
   5. El gorro
   -------------------------------------------------------------------------- */

[data-route="home"] .etapa-gorro {
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px 20px 6px;
}

[data-route="home"] .etapa-gorro img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(var(--tinte), .22));
  /* En reposo se mece despacio; el retardo distinto por tarjeta hace que no
     bailen a la vez, que era lo que delataba el truco. */
  animation: gorro-mecerse 5.2s ease-in-out infinite;
}

[data-route="home"] .etapa:nth-child(2) .etapa-gorro img { animation-delay: -1.3s; }
[data-route="home"] .etapa:nth-child(3) .etapa-gorro img { animation-delay: -2.6s; }
[data-route="home"] .etapa:nth-child(4) .etapa-gorro img { animation-delay: -3.9s; }

@keyframes gorro-mecerse {
  0%, 100% { transform: rotate(-2.2deg) translateY(0); }
  50%      { transform: rotate(2.2deg) translateY(-4px); }
}

/* El lanzamiento. Sube con giro, se queda un instante arriba y cae con un
   rebote corto: la física de tirar el birrete, en cuatro fotogramas. */
[data-route="home"] .etapa:hover .etapa-gorro img {
  animation: gorro-al-aire 1s cubic-bezier(.3, .6, .3, 1) both;
}

@keyframes gorro-al-aire {
  0%   { transform: rotate(0) translateY(0); }
  38%  { transform: rotate(-14deg) translateY(-26px); }
  58%  { transform: rotate(-10deg) translateY(-22px); }
  82%  { transform: rotate(3deg) translateY(3px); }
  100% { transform: rotate(0) translateY(0); }
}


/* --------------------------------------------------------------------------
   6. El cuerpo: titular, lema, etiquetas y texto
   -------------------------------------------------------------------------- */

[data-route="home"] .etapa h3 {
  margin: 6px 18px 2px;
  text-align: center;
  letter-spacing: -.01em;
}

[data-route="home"] .etapa-lema {
  margin: 0 18px 14px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: rgb(var(--tinte));
  opacity: .95;
}

/* En columna y del mismo ancho: centradas y de anchos distintos dibujaban un
   zigzag distinto en cada tarjeta (2+1, 1+1+1, 1+2…). Así las tres filas
   casan entre las cuatro tarjetas. */
[data-route="home"] .etapa-tags {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 20px 16px;
  text-align: center;
}

[data-route="home"] .etapa-tags span {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-dim, #d7dbe2);
  background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, color .2s ease;
}

[data-route="home"] .etapa:hover .etapa-tags span {
  border-color: rgba(var(--tinte), .45);
  color: #fff;
}

[data-route="home"] .etapa-desc {
  margin: 0 20px 18px;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted, #b2b6c6);
}


/* --------------------------------------------------------------------------
   7. El talón
   --------------------------------------------------------------------------
   La franja de abajo, con las muescas de los lados marcando el corte.
   Dentro, el botón ocupa el talón entero: ESA es la zona que se pulsa,
   como se arranca un talón. */

[data-route="home"] .etapa-talon {
  position: relative;
  display: grid;
  background: rgba(var(--tinte), .05);
}

[data-route="home"] .etapa-talon::before {
  /* Había una línea de puntos aquí, imitando el troquel. Se pidió quitarla:
     las dos muescas de los lados ya cuentan por dónde se corta. Queda un
     filo fino, casi nada, para que el talón no flote. */
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}

[data-route="home"] .etapa-talon .etapa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-on-gold, #1a1a1a);
  background: linear-gradient(135deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A));
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

[data-route="home"] .etapa:hover .etapa-talon .etapa-btn {
  filter: saturate(1.1);
}

[data-route="home"] .etapa-talon .etapa-btn:active {
  transform: translateY(1px) scale(.985);
}


/* --------------------------------------------------------------------------
   8. La llegada
   --------------------------------------------------------------------------
   Donde el navegador sabe de animaciones con el scroll, las entradas suben
   escalonadas al entrar en pantalla: la primera abre camino y las otras la
   siguen con un compás de retraso, que es lo que da la sensación de mano.
   Donde no (Safari viejo, Firefox), están quietas desde el principio:
   nadie ve un hueco vacío. */

@supports (animation-timeline: view()) {
  [data-route="home"] .etapa {
    animation: etapa-llega linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
  [data-route="home"] .etapa:nth-child(2) { animation-range: entry 8% entry 52%; }
  [data-route="home"] .etapa:nth-child(3) { animation-range: entry 16% entry 62%; }
  [data-route="home"] .etapa:nth-child(4) { animation-range: entry 24% entry 72%; }

  /* La raya del titular se dibuja al llegar, de un trazo. */
  [data-route="home"] .etapas-cabecera .section-title::after {
    animation: raya-se-dibuja linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 90%;
  }
}

@keyframes etapa-llega {
  from {
    opacity: 0;
    transform: translateY(calc(var(--reposo) + 46px)) rotate(1.2deg);
  }
  to {
    opacity: 1;
    transform: translateY(var(--reposo)) rotate(0);
  }
}

@keyframes raya-se-dibuja {
  from { width: 0; opacity: 0; }
  to   { width: 128px; opacity: 1; }
}


/* --------------------------------------------------------------------------
   9. Quien pide quietud, quietud
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-route="home"] .etapa,
  [data-route="home"] .etapa::after,
  [data-route="home"] .etapa-gorro img,
  [data-route="home"] .etapas-cabecera .section-title::after {
    animation: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   10. Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  [data-route="home"] .etapa { --talon: 78px; }
  [data-route="home"] .etapa-gorro { padding-top: 28px; }
  [data-route="home"] .etapa-gorro img { width: 96px; height: 96px; }
}


/* ===== lugares.css ===== */
/* ==========================================================================
   «Nuestras fincas y locales» — el sitio se enseña, no se cuenta
   ==========================================================================
   Lo que había: dos cajas de cristal con tres fotos pequeñas dentro de cada
   una, como un álbum en miniatura. Las fotos —que es lo único que de verdad
   vende un sitio— salían del tamaño de un sello.

   Ahora la sección son dos escenas grandes y enfrentadas, una por mundo:

   · FINCAS, con la luz del jardín: el titular enorme a la izquierda y una
     tira de fotos de cine que se sale hacia el borde derecho de la pantalla.
   · NUESTROS LOCALES, con la luz de la sala: lo mismo pero en espejo, el
     texto a la derecha y las fotos escapándose por la izquierda.

   Cada mundo con su temperatura —verde de jardín las fincas, violeta de LED
   los locales— sobre el mismo papel oscuro de la casa. Las fotos van en una
   tira que se arrastra (o se empuja con las flechas), a media pantalla de
   alto, con su nombre decorativo en grande cruzando por detrás.

   EL TEXTO NO CAMBIA NI UNA LETRA: mismos titulares, mismos párrafos,
   mismos botones y las mismas fotos con sus mismos `alt`, en el mismo
   orden. Solo cambia el escenario. Lo decorativo (el rótulo gigante del
   fondo, el sello de cada mundo) sale de `content: attr(...)`: el guardián
   del SEO ve la página de siempre.

   Movimiento, todo CSS: el texto entra desde su lado y la tira desde el
   suyo al llegar con el scroll (`animation-timeline: view()`, con respaldo
   quieto), y cada foto se levanta un punto al pasar el ratón. Con «reducir
   movimiento», nada.

   Para quitarlo: se borra el <link> de esta hoja.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. La sección
   -------------------------------------------------------------------------- */

[data-route="home"] .lugares {
  position: relative;
  padding: clamp(64px, 8vw, 110px) 0;
  overflow: hidden;
}

/* (Los filos dorados de arriba y abajo se fueron el 2-oct: la separa la banda.) */

[data-route="home"] .lugares-cabecera {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}

[data-route="home"] .lugares-cabecera .section-title {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}

[data-route="home"] .lugares-cabecera .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}

[data-route="home"] .lugares-cabecera .section-sub {
  margin: 10px auto 0;
  max-width: 56ch;
  color: var(--muted, #b2b6c6);
}


/* --------------------------------------------------------------------------
   2. Cada mundo
   --------------------------------------------------------------------------
   Texto a un lado, la tira de fotos al otro, y la tira ESCAPA hacia el
   borde de la pantalla: por eso el ancho se monta a mano en vez de usar
   `.container`, que encerraría las fotos en la caja de siempre. */

[data-route="home"] .lugar {
  --tinte: 63, 169, 124;
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1.35fr);
  gap: clamp(22px, 3.5vw, 56px);
  align-items: center;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-left: clamp(16px, 4vw, 56px);
}

[data-route="home"] .lugar + .lugar {
  margin-top: clamp(64px, 8vw, 110px);
}

/* El segundo mundo, en espejo: texto a la derecha, fotos escapando por la
   izquierda. El orden del HTML no cambia (texto primero); cambia la caja. */
[data-route="home"] .lugar[data-lugar="locales"] {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr);
  padding-left: 0;
  padding-right: clamp(16px, 4vw, 56px);
}

[data-route="home"] .lugar[data-lugar="locales"] .lugar-texto { order: 2; }
[data-route="home"] .lugar[data-lugar="locales"] .lugar-fotos { order: 1; }

/* La lámpara de cada mundo: un foco enorme y tenue detrás de todo. */

[data-route="home"] .lugar[data-lugar="fincas"]  { --tinte: 88, 181, 116; --foco: 15%; }   /* verde jardín */
[data-route="home"] .lugar[data-lugar="locales"] { --tinte: 168, 106, 255; --foco: 85%; }  /* violeta LED */


/* --------------------------------------------------------------------------
   3. El texto
   -------------------------------------------------------------------------- */

/* El sello del mundo, encima del titular. Decorativo → attr(). */
[data-route="home"] .lugar-texto::before {
  content: attr(data-sello);
  display: inline-block;
  padding: 5px 11px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--tinte), .55);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgb(var(--tinte));
  background: rgba(var(--tinte), .08);
}

/* El titular, GRANDE de verdad. `unificado.css` clava los h3 a 22px con
   !important para igualar las tarjetas de toda la web; aquí el titular es
   protagonista y se gana la excepción con más señas. */
section[data-route="home"] .lugar .lugar-texto h3 {
  font-size: clamp(38px, 4.6vw, 68px) !important;
  line-height: .98;
  margin: 0 0 14px;
}

[data-route="home"] .lugar-sub {
  margin: 0 0 10px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-dim, #d7dbe2);
  max-width: 44ch;
}

[data-route="home"] .lugar-desc {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted, #b2b6c6);
  max-width: 44ch;
}

[data-route="home"] .lugar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 13px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-on-gold, #1a1a1a);
  background: linear-gradient(135deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A));
  transition: transform .2s ease, box-shadow .2s ease;
}

[data-route="home"] .lugar-btn:hover {
}

/* El rótulo gigante del fondo, cruzando por detrás de las fotos: la palabra
   del mundo en Franklin hueca, como pintada en la pared de la sala. */
[data-route="home"] .lugar-fotos::before {
  content: attr(data-rotulo);
  position: absolute;
  top: -.52em;
  left: 0;
  z-index: 0;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: clamp(84px, 11vw, 190px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--tinte), .28);
  pointer-events: none;
  white-space: nowrap;
}

[data-route="home"] .lugar[data-lugar="locales"] .lugar-fotos::before {
  left: auto;
  right: 0;
}


/* --------------------------------------------------------------------------
   4. La tira de fotos
   -------------------------------------------------------------------------- */

[data-route="home"] .lugar-fotos {
  position: relative;
  min-width: 0;
}

[data-route="home"] .lugar .px-carousel { position: relative; z-index: 1; }

[data-route="home"] .lugar .track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: clamp(10px, 1.5vw, 18px) 4px;
  scrollbar-width: none;
  /* El borde por donde escapa la tira se funde, no se corta a cuchillo. */
  -webkit-mask: linear-gradient(90deg, #000 88%, transparent);
  mask: linear-gradient(90deg, #000 88%, transparent);
}

[data-route="home"] .lugar[data-lugar="locales"] .track {
  -webkit-mask: linear-gradient(270deg, #000 88%, transparent);
  mask: linear-gradient(270deg, #000 88%, transparent);
}

[data-route="home"] .lugar .track::-webkit-scrollbar { display: none; }

[data-route="home"] .lugar .slide {
  flex: 0 0 min(480px, 82%);
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* El velo de cada foto: abajo oscurece para asentarla, y encima va una
   veladura finísima del color del mundo, que es lo que unifica ocho fotos
   hechas en ocho noches distintas. */
[data-route="home"] .lugar .slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(8, 6, 10, .55)),
    linear-gradient(180deg, rgba(var(--tinte), .07), rgba(var(--tinte), .07));
  pointer-events: none;
  transition: opacity .3s ease;
}

[data-route="home"] .lugar .slide img {
  width: 100%;
  height: clamp(240px, 26vw, 380px);
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

[data-route="home"] .lugar .slide:hover {
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--tinte), .35);
}

[data-route="home"] .lugar .slide:hover img { }
[data-route="home"] .lugar .slide:hover::after { opacity: .55; }


/* --------------------------------------------------------------------------
   5. Las flechas
   --------------------------------------------------------------------------
   `components/carousel.js` ya sabe empujar la tira si encuentra `.prev` y
   `.next`; hasta hoy nadie se los había puesto. La flecha se dibuja con dos
   bordes girados: hereda el color y no mete texto en la página. */

[data-route="home"] .lugar .px-carousel .prev,
[data-route="home"] .lugar .px-carousel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 8, 13, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

[data-route="home"] .lugar .px-carousel .prev { left: 10px; }
[data-route="home"] .lugar .px-carousel .next { right: 10px; }

[data-route="home"] .lugar .px-carousel .prev::before,
[data-route="home"] .lugar .px-carousel .next::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

[data-route="home"] .lugar .px-carousel .prev::before { transform: rotate(135deg) translate(-1px, 1px); }
[data-route="home"] .lugar .px-carousel .next::before { transform: rotate(-45deg) translate(-1px, 1px); }

[data-route="home"] .lugar .px-carousel .prev:hover,
[data-route="home"] .lugar .px-carousel .next:hover {
  border-color: rgba(var(--tinte), .7);
  background: rgba(var(--tinte), .22);
}

/* En táctil la tira se arrastra con el dedo: las flechas solo estorban. */
@media (hover: none), (max-width: 760px) {
  [data-route="home"] .lugar .px-carousel .prev,
  [data-route="home"] .lugar .px-carousel .next { display: none; }
}


/* --------------------------------------------------------------------------
   6. La llegada
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  [data-route="home"] .lugar-texto {
    animation: lugar-texto-entra linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }

  [data-route="home"] .lugar-fotos {
    animation: lugar-fotos-entran linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 55%;
  }

  /* En el mundo en espejo, cada cosa entra desde su lado espejado. */
  [data-route="home"] .lugar[data-lugar="locales"] .lugar-texto { animation-name: lugar-texto-entra-espejo; }
  [data-route="home"] .lugar[data-lugar="locales"] .lugar-fotos { animation-name: lugar-fotos-entran-espejo; }
}

@keyframes lugar-texto-entra {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lugar-fotos-entran {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lugar-texto-entra-espejo {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lugar-fotos-entran-espejo {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-route="home"] .lugar-texto,
  [data-route="home"] .lugar-fotos,
  [data-route="home"] .lugar .slide,
  [data-route="home"] .lugar .slide img {
    animation: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   7. Pantallas medianas y móvil
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  [data-route="home"] .lugar,
  [data-route="home"] .lugar[data-lugar="locales"] {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-inline: clamp(16px, 4vw, 28px) 0;
  }

  [data-route="home"] .lugar[data-lugar="locales"] { padding-inline: clamp(16px, 4vw, 28px) 0; }

  /* En columna, el texto SIEMPRE antes que sus fotos, también en el espejo. */
  [data-route="home"] .lugar[data-lugar="locales"] .lugar-texto { order: 1; }
  [data-route="home"] .lugar[data-lugar="locales"] .lugar-fotos { order: 2; }

  [data-route="home"] .lugar-texto { padding-right: clamp(16px, 4vw, 28px); }

  [data-route="home"] .lugar-fotos::before { font-size: clamp(64px, 16vw, 110px); }

  [data-route="home"] .lugar[data-lugar="locales"] .lugar-fotos::before { right: auto; left: 0; }

  [data-route="home"] .lugar[data-lugar="locales"] .track {
    -webkit-mask: linear-gradient(90deg, #000 88%, transparent);
    mask: linear-gradient(90deg, #000 88%, transparent);
  }

  [data-route="home"] .lugar .slide { flex-basis: min(360px, 86%); }
  [data-route="home"] .lugar .slide img { height: clamp(220px, 52vw, 300px); }
}


/* ===== salas.css ===== */
/* ==========================================================================
   /locales — cada sala con todas sus fotos a la vista
   ==========================================================================
   Lo que había: una rejilla de tarjetitas de tres columnas, cada una con UNA
   foto de 240 px y las otras cinco escondidas en un carrusel que había que
   descubrir. Para vender una sala, esconder las fotos es tirar piedras al
   tejado propio.

   Ahora cada local es una ficha grande a lo ancho, como las de
   projectxeventos.es pero con la voz de esta casa: el nombre enorme en
   Franklin con su subtítulo dorado al lado, el texto debajo y TODAS las
   fotos desplegadas en un mosaico —la primera grande, las demás en teselas—
   con un número de sala gigante y hueco asomando por detrás, como el rótulo
   de FINCAS/LOCALES de la portada.

   ESTA HOJA NO TOCA EL HTML. El documento es exactamente el de antes
   —mismos textos, mismas fotos con sus alt, mismos enlaces— y aquí solo se
   le cambia el traje: el carrusel de tarjeta (.carousel-track) pasa a ser
   una rejilla donde todos los fotogramas se ven a la vez, y los botones e
   indicadores del carrusel, que ya estaban ocultos, siguen ocultos. El
   guardián del SEO ve la página de siempre. El número de sala sale de un
   contador CSS: tampoco existe para el buscador.

   Para quitarlo: se borra el <link> de esta hoja y vuelven las tarjetitas.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Las cabeceras de zona, con la raya de la casa
   -------------------------------------------------------------------------- */

[data-route="locales"] .zone-header .zone-title {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
  color: var(--ink, #f7f7ff);
}

[data-route="locales"] .zone-header .zone-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}


/* --------------------------------------------------------------------------
   2–7. Listados de /locales y /fincas: una fila por espacio (2-oct-2026)
   --------------------------------------------------------------------------
   Sustituye a los bloques gemelos que había para locales (venue-*) y fincas
   (finca-*): nombre gigante con «·», número hueco detrás, todas las fotos
   del carrusel desplegadas en mosaico (panorámicas de 768 px estiradas a
   1140), velo, saltito y zoom al pasar el ratón, y una llegada animada.
   Ahora cada espacio es una fila: el texto a la izquierda y a la derecha
   un mosaico fijo de cinco fotos (una grande y cuatro pequeñas). El resto
   de fotos se ven en su ficha. /fincas pasa de 13.000 px a menos de la
   mitad. */

:is([data-route="locales"] .locales-grid, [data-route="fincas"] .fincas-grid) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 72px !important;
  margin-top: 32px;
}

:is([data-route="locales"] .venue-card-premium, [data-route="fincas"] .finca-card-premium) {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas:
    'contenido fotos'
    'boton     fotos';
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  align-items: start;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
}

:is([data-route="locales"] .venue-card-premium, [data-route="fincas"] .finca-card-premium)::before { content: none !important; }

/* -- El texto ---------------------------------------------------------------- */

:is([data-route="locales"] .venue-content, [data-route="fincas"] .finca-content) {
  grid-area: contenido;
  display: block;
  padding: 0 !important;
}
[data-route="fincas"] .finca-header { display: block; margin: 0; }

section:is([data-route="locales"], [data-route="fincas"]) :is(.venue-name, .finca-name) {
  font-size: 40px !important;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 8px;
}

:is([data-route="locales"] .venue-subtitle, [data-route="fincas"] .finca-location) {
  margin: 0 0 14px !important;
  font-size: 17px !important;
  font-weight: 700;
  color: var(--gold-light, #FFD46A) !important;
}
[data-route="fincas"] .finca-header { margin: 0 !important; }

/* El contenedor de los listados llevaba 20 px de margen y no 28: las filas
   empezaban 8 px más a la izquierda que la cabecera. */
section:is([data-route="locales"], [data-route="fincas"]) > section.container {
  padding-inline: clamp(16px, 3vw, 28px) !important;
}
:is([data-route="locales"] .venue-subtitle, [data-route="fincas"] .finca-location)::before { content: none !important; }

:is([data-route="locales"] .venue-description, [data-route="fincas"] .finca-description) {
  margin: 0 !important;
  max-width: 52ch !important;
  padding: 0 !important;
  font-size: 16.5px !important;
  line-height: 1.6;
  color: var(--s-gris, #c9c2b8) !important;
}

[data-route="fincas"] .finca-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
[data-route="fincas"] .finca-feature {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: 13.5px;
  color: var(--s-tinta, #f4f1ea);
}

/* -- El botón, abajo del texto --------------------------------------------- */

:is([data-route="locales"], [data-route="fincas"]) .det-enlace {
  grid-area: boton;
  align-self: end;
  justify-self: start;
  margin: 24px 0 0 !important;
  min-height: 48px;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  background: linear-gradient(135deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A)) !important;
  transform: none !important;
}

/* -- El mosaico: una grande y cuatro pequeñas ------------------------------- */

:is([data-route="locales"], [data-route="fincas"]) :is(.venue-image, .venue-carousel, .finca-image, .finca-carousel) {
  grid-area: fotos;
  position: relative;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: block !important;
}
:is([data-route="locales"], [data-route="fincas"]) .carousel-container { height: auto !important; overflow: visible !important; }

:is([data-route="locales"], [data-route="fincas"]) .carousel-track {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 132px;
  gap: 10px;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
}

:is([data-route="locales"], [data-route="fincas"]) .carousel-slide {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  grid-column: span 1;
  border-radius: 12px;
  overflow: hidden !important;
  background: #131118;
}
:is([data-route="locales"], [data-route="fincas"]) .carousel-slide:first-child { grid-column: span 2; grid-row: span 2; }
:is([data-route="locales"], [data-route="fincas"]) .carousel-slide:nth-child(n + 6) { display: none !important; }
/* Con cuatro fotos, la última ocupa las dos casillas de abajo: no queda hueco */
:is([data-route="locales"], [data-route="fincas"]) .carousel-slide:first-child:nth-last-child(4) ~ .carousel-slide:last-child { grid-column: span 2; }

:is([data-route="locales"], [data-route="fincas"]) .carousel-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transform: none !important;
  transition: none !important;
}
:is([data-route="locales"], [data-route="fincas"]) .carousel-slide::after { content: none !important; }
:is([data-route="locales"], [data-route="fincas"]) :is(.carousel-btn, .carousel-indicators) { display: none !important; }

/* -- Pantalla mediana y móvil: el texto arriba, el mosaico debajo ----------- */

@media (max-width: 1020px) {
  :is([data-route="locales"] .venue-card-premium, [data-route="fincas"] .finca-card-premium) {
    grid-template-columns: 1fr;
    grid-template-areas: 'contenido' 'fotos' 'boton';
    row-gap: 20px;
  }
  :is([data-route="locales"], [data-route="fincas"]) .det-enlace { margin-top: 0 !important; }
}

@media (max-width: 640px) {
  :is([data-route="locales"] .locales-grid, [data-route="fincas"] .fincas-grid) { gap: 56px !important; }
  section:is([data-route="locales"], [data-route="fincas"]) :is(.venue-name, .finca-name) { font-size: 30px !important; }
  :is([data-route="locales"], [data-route="fincas"]) .carousel-track {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 28vw;
    gap: 8px;
  }
  :is([data-route="locales"], [data-route="fincas"]) .carousel-slide:first-child { grid-column: span 2; grid-row: span 2; }
  :is([data-route="locales"], [data-route="fincas"]) .det-enlace { justify-self: stretch; text-align: center; justify-content: center; }
}


/* ==========================================================================
   8. Los heros de /locales y /fincas, en cartel (repaso 01-09, noche)
   ==========================================================================
   Eran un titular centrado flotando sobre la foto, con dos botones dorados
   gemelos debajo: la portada de cualquier plantilla. Ahora es el cartel de
   la casa: sello arriba (texto decorativo por CSS), titular enorme a la
   izquierda con su raya de rotulador, subtítulo al mismo margen y la
   botonera en fila. La foto de fondo que ya tenían se queda; se le añade el
   velo que aprieta a la izquierda y respira a la derecha, y el foco cálido.
   El texto del documento no cambia.
   ========================================================================== */

:is([data-route="locales"], [data-route="fincas"]) :is(.hero-locales, .hero-fincas) {
  justify-content: flex-start !important;
  text-align: left !important;
  align-items: center !important;
}

/* La página ENTERA sobre su fiesta, como las de etapa: la foto en el fondo
   de la sección con el velo de la casa. Antes el velo vivía solo en el hero
   y al acabarse dejaba una costura horizontal a mitad de página. Cada
   página con una foto de lo suyo: la sala de LED para locales, el jardín
   para fincas. */
/* (La foto de la cabecera vive ahora en sistema.css §2. La de locales era
   s2-1, que lleva escrito el nombre de la sala: fuera.) */

/* Y arranca arriba: el cartel pegado a la cabecera, no flotando a media
   pantalla con medio metro de negro encima. */
:is([data-route="locales"], [data-route="fincas"]) :is(.hero-locales, .hero-fincas) {
  min-height: 0 !important;
  align-items: flex-start !important;
  padding-block: clamp(120px, 14vh, 160px) clamp(40px, 5vw, 64px) !important;
}

/* El aire entre el hero y la primera zona, y entre zona y zona, a compás:
   había 60 de margen + 96 de colchón + 40 de cabecera sumándose. */
[data-route="locales"] .zone-section { margin-bottom: 28px !important; }
[data-route="locales"] .zone-header { margin-bottom: 28px !important; }
:is([data-route="locales"], [data-route="fincas"]) section.container { padding-top: 44px !important; }

:is([data-route="locales"], [data-route="fincas"]) .hero-content {
  position: relative;
  z-index: 1;
  max-width: 1180px !important;
  width: 100%;
  margin-inline: auto !important;
  padding: 0 clamp(16px, 3vw, 28px) !important;
}

/* El sello de cada página, decorativo: no es texto del documento. */
:is([data-route="locales"], [data-route="fincas"]) .hero-content::before {
  display: inline-block;
  padding: 6px 13px;
  margin-bottom: 16px;
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 999px;
  background: rgba(212, 175, 55, .08);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--gold-light, #FFD46A);
}

[data-route="locales"] .hero-content::before { content: 'ZONA SUR · CORREDOR DEL HENARES'; }
[data-route="fincas"] .hero-content::before { content: 'TODA LA COMUNIDAD · CON AUTOBÚS'; }

:is([data-route="locales"], [data-route="fincas"]) .hero-title {
  line-height: .96 !important;
  letter-spacing: -.02em;
  text-align: left !important;
  position: relative;
  padding-bottom: 20px;
  margin: 0 0 14px !important;
  max-width: 18ch;
}

:is([data-route="locales"], [data-route="fincas"]) .hero-title::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: rotate(-.6deg);
}

:is([data-route="locales"], [data-route="fincas"]) .hero-subtitle {
  text-align: left !important;
  max-width: 52ch;
  margin: 0 0 22px !important;
  color: var(--ink-dim, #d7dbe2) !important;
}

/* La botonera, al margen del cartel: el primero manda en oro macizo y el
   resto acompaña en fantasma con filo dorado. */
[data-route="locales"] .zone-nav { text-align: left !important; margin: 0 0 14px !important; }

[data-route="locales"] .zone-nav-buttons {
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  max-width: none !important;
}

[data-route="locales"] .zone-nav-btn {
  min-width: 0 !important;
  padding: 13px 24px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  letter-spacing: .03em !important;
}

[data-route="locales"] .zone-nav-btn:hover {
}

:is([data-route="locales"], [data-route="fincas"]) .hero-cta {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* La entrada en escena, por su orden. El fadeInUp viejo del bloque entero
   se apaga para que no pelee con la escalera. */
:is([data-route="locales"], [data-route="fincas"]) .hero-content {
  animation: none !important;
}

@keyframes salas-hero-sube {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

:is([data-route="locales"], [data-route="fincas"]) :is(.hero-title, .hero-subtitle, .zone-nav, .hero-cta) {
  animation: salas-hero-sube .6s cubic-bezier(.2, .8, .3, 1) both;
}

:is([data-route="locales"], [data-route="fincas"]) .hero-subtitle { animation-delay: .1s; }
:is([data-route="locales"], [data-route="fincas"]) .zone-nav { animation-delay: .2s; }
:is([data-route="locales"], [data-route="fincas"]) .hero-cta { animation-delay: .3s; }

@media (max-width: 640px) {
  :is([data-route="locales"], [data-route="fincas"]) .hero-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is([data-route="locales"], [data-route="fincas"]) :is(.hero-title, .hero-subtitle, .zone-nav, .hero-cta) {
    animation: none !important;
  }
}


/* 9. (Las fichas de detalle van ahora con la plantilla .ficha-*: sistema.css §1.) */


/* ==========================================================================
   10. El cierre de /locales, al papel (repaso 02-09)
   ==========================================================================
   Debajo de las fichas seguían tres bloques con el traje viejo: «Lo que
   incluye», «Tipos de locales» y «Cómo reservar». Mismo papel de la casa
   que el resto, con el aro para los emojis. */

[data-route="locales"] :is(.servicio-card, .include-card) {
  position: relative;
  background: linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 110px), linear-gradient(180deg, #141118, #0e0c12) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
  backdrop-filter: none !important;
  overflow: hidden;
  padding: 24px !important;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease !important;
}

[data-route="locales"] :is(.servicio-card, .include-card)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 30%, var(--gold-medium, #D4AF37) 70%, transparent);
  opacity: .8;
}

[data-route="locales"] :is(.servicio-card, .include-card):hover {
  box-shadow: 0 24px 56px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 55, .3) !important;
}

[data-route="locales"] :is(.servicio-icon, .include-card .icon) {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  display: grid !important;
  place-items: center;
  font-size: 20px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, .5) !important;
  background: rgba(212, 175, 55, .08) !important;
  margin-bottom: 14px;
}

section[data-route="locales"] :is(.servicio-title, .include-card h3) {
  font-size: 16.5px !important;
}

[data-route="locales"] :is(.servicio-desc, .include-card p) {
  color: var(--ink-dim, #d7dbe2) !important;
  opacity: 1 !important;
}

/* El contenedor «Tipos de locales» era una tarjeta con tarjetas dentro. */
[data-route="locales"] section.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* La caja exterior de «Lo que incluye» era una tarjeta con seis tarjetas
   dentro: fuera el marco, que ya lo ponen las fichas. */
[data-route="locales"] .servicios-premium {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ===== portada.css ===== */
/* ==========================================================================
   La portada, afinada con lo aprendido en el resto de la web
   ==========================================================================
   Después de las entradas de etapa, las escenas de fincas/locales y las
   fichas de /locales y /fincas, la portada se había quedado a medias: el
   hero con las estadísticas en cajitas, cuatro tarjetas de cristal para los
   pasos, otras ocho para la app y los porqués, y una minigalería de sellos
   de correos. Esta hoja lo pone todo en el mismo idioma:

   · Los titulares de sección, con la raya de rotulador dorado.
   · Las cifras del hero, en Franklin gigante y sin cajitas.
   · Los cuatro pasos, sobre una ruta de puntos dorados con su número
     gigante y hueco detrás (del contador CSS).
   · Las tarjetas de la app y de «con quién estáis tratando», en el papel
     oscuro de las entradas, con su filo dorado arriba.
   · La minigalería, en el mosaico de las fichas: la primera foto manda.
   · Las garantías como lista con filo, el FAQ con el «+» que gira, y el
     cierre como una entrada grande con sus muescas.

   ESTA HOJA NO TOCA EL HTML: mismos textos, mismas fotos, mismos enlaces.
   El guardián del SEO ve la página de siempre. Todo lo decorativo sale de
   pseudoelementos y contadores.

   Los <style> incrustados en la propia página van después que esta hoja en
   el documento y empatan en especificidad: de ahí los !important en las
   propiedades que ellos también escriben. No es gusto, es orden de carga.

   Para quitarlo: se borra el <link> de esta hoja.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. El ritmo de la portada
   --------------------------------------------------------------------------
   `unificado.css` da a cada sección un colchón de ~96px arriba y abajo;
   entre dos secciones seguidas eso son casi 200px de negro muerto con el
   vídeo asomando. A poco más de la mitad, y la página fluye. */

[data-route="home"] section.container,
[data-route="home"] .process-section {
  padding-top: clamp(36px, 4.5vw, 60px) !important;
  padding-bottom: clamp(36px, 4.5vw, 60px) !important;
}


/* --------------------------------------------------------------------------
   1. Todos los titulares de sección, con la raya de la casa
   -------------------------------------------------------------------------- */

[data-route="home"] section.container > .section-title,
[data-route="home"] .process-section > .section-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  padding-bottom: 14px;
}

[data-route="home"] section.container > .section-title::after,
[data-route="home"] .process-section > .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}

[data-route="home"] section.container > .section-sub,
[data-route="home"] .process-section > .section-sub {
  text-align: center;
  max-width: 56ch;
  margin: 10px auto 26px;
  color: var(--muted, #b2b6c6);
}


/* --------------------------------------------------------------------------
   2. El hero: un cartel, no una portada de plantilla
   --------------------------------------------------------------------------
   Lo que había: todo centrado y apilado —aviso, titular, párrafo, botones,
   cifras—, la portada que hace cualquiera. Ahora es un cartel asimétrico:

   · A la IZQUIERDA, el titular a tamaño de pared: «Graduaciones» en blanco,
     «en» hueco y «MADRID» dentro de una caja dorada un grado torcida — el
     gesto del cartel de projectxeventos (su caja roja), en el oro de esta
     casa. Debajo, el párrafo y los botones, alineados al mismo margen.
   · A la DERECHA, las tres cifras en columna, como el talón lateral de una
     entrada: números enormes alineados a la derecha, separados por la línea
     de puntos del troquel.
   · En el borde izquierdo del hero, el rótulo vertical de la casa, como la
     firma en el canto de un cartel pegado.
   · Al cargar, cada pieza entra por su orden, un compás por detrás de la
     anterior. (Aquí con animación clásica: el hero nace ya en pantalla y
     las de scroll no pintan nada.)

   Los ÚNICOS cambios de HTML son dos <span> dentro del h1 para poder pintar
   «en» hueco y «Madrid» en caja: el texto del titular es el mismo, letra a
   letra. El resto es recolocar lo que había. */

/* El hero arranca arriba, pegado a la cabecera: el <style> de la página lo
   centraba en vertical con una pantalla entera de alto y el cartel flotaba
   en medio de un mar negro. */
[data-route="home"] .hero .hero-inner {
  align-items: flex-start !important;
  min-height: 0 !important;
  padding-block: clamp(120px, 14vh, 170px) clamp(48px, 7vw, 100px) !important;
}

/* El interior del hero pasa de pila centrada a rejilla de cartel. Los
   !important pisan al <style> de la propia página, que centra con ellos. */
[data-route="home"] .hero .hero-core {
  width: min(100%, 1240px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'aviso   .'
    'titulo  cifras'
    'texto   cifras'
    'botones cifras';
  align-items: center;
  column-gap: clamp(28px, 5vw, 84px);
  text-align: left !important;
}

[data-route="home"] .hero .aviso-2627 { grid-area: aviso; justify-content: flex-start !important; margin: 0 0 14px !important; }
[data-route="home"] .hero .title { grid-area: titulo; }
[data-route="home"] .hero .hero-core > p { grid-area: texto; }
[data-route="home"] .hero .hero-cta { grid-area: botones; justify-content: flex-start !important; }
[data-route="home"] .hero .stats { grid-area: cifras; }

/* -- El titular ---------------------------------------------------------- */

[data-route="home"] .hero .title {
  font-size: clamp(48px, 8.6vw, 128px) !important;
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0 0 18px !important;
}

/* «en», solo el contorno: deja pasar la fiesta de detrás. */
[data-route="home"] .hero .title .t-hueco {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .85);
}

/* «Madrid», en la caja dorada, un grado torcida como un cartel pegado con
   prisa. El degradado es el del botón de reservar: mismo oro, mismo sitio. */
[data-route="home"] .hero .title .t-caja {
  display: inline-block;
  padding: 0 .14em;
  background: linear-gradient(135deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A));
  color: #1a1204;
  transform: rotate(-1.2deg);
  box-shadow: 0 14px 44px rgba(212, 175, 55, .3);
}

[data-route="home"] .hero .hero-core > p {
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--ink-dim, #d7dbe2);
  max-width: 52ch;
  margin: 0 0 22px !important;
}

/* -- El aviso de la temporada, de cartelón a sello ------------------------ */

[data-route="home"] .aviso-2627 a {
  max-width: none !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A)) !important;
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, .3) !important;
  text-align: left !important;
  transform: rotate(-.5deg);
  animation: aviso-late 3s ease-in-out infinite;
}

[data-route="home"] .aviso-2627 a:hover {
  transform: rotate(-.5deg) translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(212, 175, 55, .5) !important;
  animation-play-state: paused;
}

@keyframes aviso-late {
  0%, 100% { box-shadow: 0 10px 30px rgba(212, 175, 55, .3); }
  50%      { box-shadow: 0 10px 42px rgba(255, 217, 122, .55); }
}

[data-route="home"] .aviso-2627 .aviso-titular {
  display: inline !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  color: #1a1204 !important;
}

[data-route="home"] .aviso-2627 .aviso-anio { color: #1a1204 !important; }

[data-route="home"] .aviso-2627 .aviso-sub {
  display: inline !important;
  margin: 0 0 0 8px !important;
  font-size: 12.5px !important;
  opacity: 1;
  color: rgba(26, 18, 4, .78) !important;
  font-weight: 700 !important;
}

/* La flecha, empujando hacia la reserva. */
[data-route="home"] .aviso-2627 .aviso-flecha {
  color: #1a1204 !important;
  display: inline-block;
  animation: flecha-empuja 1.6s ease-in-out infinite;
}

@keyframes flecha-empuja {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* -- Las cifras: el talón lateral ----------------------------------------- */

[data-route="home"] .hero .stats {
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  gap: 0 !important;
  margin: 0 !important;
  justify-items: end;
  text-align: right;
  /* Estirado del titular a los botones: la columna mide lo que el cartel. */
  align-self: stretch;
  grid-row: titulo-start / botones-end;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 0;
  position: relative;
}

/* La línea de puntos del troquel, en vertical: el talón se corta por ahí. */
[data-route="home"] .hero .stats::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-image: radial-gradient(circle 1.5px, rgba(212, 175, 55, .5) 1.4px, transparent 1.6px);
  background-size: 2px 11px;
  background-repeat: repeat-y;
}

[data-route="home"] .hero .stats .stat {
  background: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  display: grid;
  gap: 4px;
  justify-items: end;
}

[data-route="home"] .hero .stats .stat + .stat {
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  border-left: 0 !important;
}

[data-route="home"] .hero .stats .stat b {
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
}

[data-route="home"] .hero .stats .stat small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light, #FFD46A);
  opacity: .9;
}

/* -- La firma vertical del canto ------------------------------------------ */

[data-route="home"] .hero {
  position: relative;
}

[data-route="home"] .hero::after {
  content: 'TU GRADUACIÓN · MADRID · 2026/2027';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .22);
  pointer-events: none;
}

/* -- La entrada en escena, pieza a pieza ---------------------------------- */

@keyframes hero-sube {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

[data-route="home"] .hero .aviso-2627,
[data-route="home"] .hero .title,
[data-route="home"] .hero .hero-core > p,
[data-route="home"] .hero .hero-cta,
[data-route="home"] .hero .stats {
  animation: hero-sube .7s cubic-bezier(.2, .8, .3, 1) both;
}

[data-route="home"] .hero .title { animation-delay: .08s; }
[data-route="home"] .hero .hero-core > p { animation-delay: .18s; }
[data-route="home"] .hero .hero-cta { animation-delay: .28s; }
[data-route="home"] .hero .stats { animation-delay: .4s; }

/* La caja de MADRID llega la última, con un golpe corto de sello. */
@keyframes caja-sella {
  0%   { opacity: 0; transform: rotate(-1.2deg) scale(1.25); }
  70%  { opacity: 1; transform: rotate(-1.2deg) scale(.97); }
  100% { opacity: 1; transform: rotate(-1.2deg) scale(1); }
}

[data-route="home"] .hero .title .t-caja {
  animation: caja-sella .5s cubic-bezier(.2, .8, .3, 1) .55s both;
}

/* -- Pantallas medianas y móvil ------------------------------------------- */

@media (max-width: 1080px) {
  [data-route="home"] .hero .hero-core {
    grid-template-columns: 1fr;
    grid-template-areas:
      'aviso'
      'titulo'
      'texto'
      'botones'
      'cifras';
  }

  [data-route="home"] .hero::after { display: none; }

  /* El talón vuelve a ser fila, centrado bajo los botones. */
  [data-route="home"] .hero .stats {
    grid-area: cifras;
    grid-row: auto;
    align-self: auto;
    grid-template-rows: none;
    grid-template-columns: repeat(3, 1fr) !important;
    justify-content: stretch;
    justify-items: start;
    text-align: left;
    padding: 18px 0 0;
    margin-top: 10px !important;
  }

  [data-route="home"] .hero .stats::before {
    top: 0;
    bottom: auto;
    left: 6px;
    right: 6px;
    width: auto;
    height: 2px;
    background-size: 11px 2px;
    background-repeat: repeat-x;
  }

  [data-route="home"] .hero .stats .stat { justify-items: start; padding: 0 14px 0 0 !important; }
  [data-route="home"] .hero .stats .stat + .stat { border-top: 0 !important; padding-left: 14px !important; border-left: 1px solid rgba(255, 255, 255, .08) !important; }
  [data-route="home"] .hero .stats .stat b { font-size: clamp(22px, 6.4vw, 32px); }
  [data-route="home"] .hero .stats .stat small { font-size: 10px; letter-spacing: .1em; }
}

@media (max-width: 640px) {
  /* El aviso en línea se salía por la derecha: en el móvil vuelve a ser un
     bloque de dos líneas, a lo ancho de la pantalla y para. */
  [data-route="home"] .aviso-2627 a {
    display: block !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    padding: 11px 14px !important;
  }
  [data-route="home"] .aviso-2627 .aviso-titular { display: block !important; }
  [data-route="home"] .aviso-2627 .aviso-sub { display: block !important; margin: 4px 0 0 !important; }

  /* El tercer talón se cortaba contra el borde. */
  [data-route="home"] .hero .stats .stat { min-width: 0; }
  [data-route="home"] .hero .stats .stat small { white-space: normal; }
  [data-route="home"] .hero .stats .stat:last-child { padding-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-route="home"] .hero .aviso-2627,
  [data-route="home"] .hero .title,
  [data-route="home"] .hero .hero-core > p,
  [data-route="home"] .hero .hero-cta,
  [data-route="home"] .hero .stats,
  [data-route="home"] .hero .title .t-caja,
  [data-route="home"] .aviso-2627 a,
  [data-route="home"] .aviso-2627 .aviso-flecha {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   3. Los cuatro pasos, sobre la ruta de puntos
   --------------------------------------------------------------------------
   Fuera las cajas: los pasos son un camino. Una línea de puntos dorados los
   une por detrás (solo en escritorio, donde están en fila) y cada paso
   lleva su número gigante y hueco, del contador. El emoji se queda como
   está —es texto del documento— pero pasa a vivir dentro de un aro dorado
   que pisa la ruta, como una parada. */

[data-route="home"] .process-grid {
  position: relative;
  counter-reset: paso;
  gap: clamp(18px, 2.5vw, 30px) !important;
}

@media (min-width: 981px) {
  [data-route="home"] .process-grid::before {
    content: '';
    position: absolute;
    top: 37px;
    left: 6%;
    right: 6%;
    height: 2px;
    background-image: radial-gradient(circle 1.5px, rgba(212, 175, 55, .55) 1.4px, transparent 1.6px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
  }
}

[data-route="home"] .process-card {
  counter-increment: paso;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  overflow: visible !important;
}

/* El número del paso, gigante y hueco, asomando detrás del texto. */
[data-route="home"] .process-card::before {
  content: '0' counter(paso);
  position: absolute;
  top: 8px;
  right: 2px;
  z-index: 0;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: clamp(64px, 6vw, 96px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, .30);
  pointer-events: none;
}

[data-route="home"] .process-icon {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  margin: 0 auto 6px;
  display: grid !important;
  place-items: center;
  font-size: 30px !important;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .5);
  background: linear-gradient(180deg, #141118, #0e0c12);
  box-shadow: 0 0 0 6px rgba(8, 6, 10, .9), 0 0 24px rgba(212, 175, 55, .18);
  animation: none !important;
}

section[data-route="home"] .process-card .process-title {
  position: relative;
  z-index: 1;
  font-size: 19px !important;
}

[data-route="home"] .process-text {
  position: relative;
  z-index: 1;
  color: var(--muted, #b2b6c6);
}

[data-route="home"] .process-bullet {
  position: relative;
  z-index: 1;
  /* Texto pequeño en dorado, sin píldora: las cápsulas medían uno o dos
     renglones según la frase y cada paso acababa a una altura distinta. */
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-light, #FFD46A);
}


/* --------------------------------------------------------------------------
   4. Las tarjetas de la app y de «con quién estáis tratando»
   --------------------------------------------------------------------------
   El papel de las entradas de etapa: oscuro, filo dorado arriba y el brillo
   que sube al pasar el ratón. El emoji, en su aro, como en los pasos. */

[data-route="home"] .feature-card {
  position: relative;
  background: linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 110px), linear-gradient(180deg, #141118, #0e0c12) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease !important;
}

[data-route="home"] .feature-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 30%, var(--gold-medium, #D4AF37) 70%, transparent);
  opacity: .8;
}

[data-route="home"] .feature-card:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 55, .3), 0 0 40px rgba(212, 175, 55, .1) !important;
}

[data-route="home"] .feature-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
  display: grid !important;
  place-items: center;
  font-size: 30px !important;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .5);
  background: rgba(212, 175, 55, .07);
  /* El botecito perpetuo de los iconos mareaba más que acompañaba. */
  animation: none !important;
}

section[data-route="home"] .feature-card h3 {
  font-size: 19px !important;
}

[data-route="home"] .feature-card p {
  color: var(--muted, #b2b6c6);
}


/* --------------------------------------------------------------------------
   5. La minigalería, en el mosaico de la casa
   -------------------------------------------------------------------------- */

[data-route="home"] .mini-gallery {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: clamp(120px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: 12px !important;
}

[data-route="home"] .mini-gallery img {
  grid-column: span 3;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: 14px !important;
  outline: 0 !important;
  transition: transform .3s ease, box-shadow .3s ease;
}

[data-route="home"] .mini-gallery img:first-child {
  grid-column: span 6;
  grid-row: span 2;
}

/* Son seis fotos: la grande y cuatro teselas cierran dos filas exactas, y
   la sexta se quedaba huérfana en su esquina. Pues panorámica a todo el
   ancho, de remate. */
[data-route="home"] .mini-gallery img:last-child {
  grid-column: span 12;
}

[data-route="home"] .mini-gallery img:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 175, 55, .4) !important;
}

@media (max-width: 760px) {
  [data-route="home"] .mini-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: clamp(130px, 32vw, 180px);
    gap: 10px !important;
  }

  [data-route="home"] .mini-gallery img { grid-column: span 1; }

  [data-route="home"] .mini-gallery img:first-child,
  [data-route="home"] .mini-gallery img:last-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}


/* --------------------------------------------------------------------------
   6. Las garantías, de caja a lista con filo
   -------------------------------------------------------------------------- */

[data-route="home"] .oklist.card {
  /* Transparente flotaba sobre el vídeo y no había quien la leyera: al
     papel de las entradas, como todo lo demás. */
  position: relative;
  background: linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 110px), linear-gradient(180deg, #141118, #0e0c12) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
  overflow: hidden;
  padding: 26px 26px 14px !important;
  gap: 0 36px !important;
}

[data-route="home"] .oklist.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 30%, var(--gold-medium, #D4AF37) 70%, transparent);
  opacity: .8;
}

[data-route="home"] .oklist > div {
  padding: 14px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: padding-left .2s ease, border-color .2s ease;
}

/* La última fila de cada columna, sin filo colgando (7 en dos columnas:
   la impar cierra la izquierda, la última la derecha). */
[data-route="home"] .oklist > div:last-child,
[data-route="home"] .oklist > div:nth-last-child(2) {
  border-bottom: 0;
}

[data-route="home"] .oklist > div:hover {
  padding-left: 14px;
  border-bottom-color: rgba(212, 175, 55, .4);
}


/* --------------------------------------------------------------------------
   7. Las dudas: nueve fichas, no nueve renglones
   --------------------------------------------------------------------------
   Eran filas pegadas unas a otras, a todo el ancho de la pantalla, con la
   pregunta en un extremo y el «+» perdido en el otro: una tabla, no un
   diseño. Ahora cada duda es una ficha con su papel, en dos columnas, con
   el «+» al lado de la pregunta y la respuesta desplegándose dentro.
   -------------------------------------------------------------------------- */

[data-route="home"] .faq.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* Dos columnas de verdad (multicolumna), no una rejilla: con rejilla, al
     abrir una duda su fila entera crecía y la vecina se quedaba con un
     hueco debajo. Así las fichas fluyen y se recolocan solas. */
  display: block;
  columns: 2;
  column-gap: 14px;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 820px) {
  [data-route="home"] .faq.card { columns: 1; }
}

[data-route="home"] .faq details {
  position: relative;
  break-inside: avoid;
  margin: 0 0 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 0 !important;
  background: #131118;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  overflow: hidden;
}

/* Todas las dudas cerradas miden lo mismo (las preguntas largas ocupan dos
   renglones): así las tres columnas acaban a la misma altura. */
[data-route="home"] .faq summary { min-height: 78px; }

/* El filo dorado, solo cuando la duda está abierta: señala dónde estás. */
[data-route="home"] .faq details::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 30%, var(--gold-medium, #D4AF37) 70%, transparent);
  opacity: 0;
  transition: opacity .25s ease;
}

[data-route="home"] .faq details[open]::before { opacity: .85; }

[data-route="home"] .faq summary {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

[data-route="home"] .faq summary::-webkit-details-marker { display: none; }

/* El «+» va PEGADO a la pregunta, no en la otra punta de la pantalla. */
[data-route="home"] .faq summary::after {
  content: '+';
  order: -1;
  flex: 0 0 auto;
  position: static;
  transform: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .5);
  background: rgba(212, 175, 55, .08);
  color: var(--gold-light, #FFD46A);
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
  transition: transform .25s ease, background .2s ease;
}

[data-route="home"] .faq details[open] summary::after {
  transform: rotate(45deg);
  background: rgba(212, 175, 55, .2);
}

[data-route="home"] .faq details p {
  margin: 0;
  padding: 0 22px 20px 68px;
  color: var(--muted, #b2b6c6);
  line-height: 1.6;
}

@media (max-width: 560px) {
  [data-route="home"] .faq summary { padding: 17px 16px; font-size: 15px; gap: 12px; }
  [data-route="home"] .faq details p { padding: 0 16px 18px 16px; }
}


/* --------------------------------------------------------------------------
   8. El cierre: una entrada grande (en todas las páginas)
   --------------------------------------------------------------------------
   La portada acaba en el FAQ (el `.cta-final` del CSS viejo no existe en el
   HTML: era una regla huérfana). El cierre de verdad vive en las páginas de
   etapa y en /reserva: el formulario de presupuesto. Pues ese formulario es
   la entrada más grande de la web, en todas ellas: papel oscuro, filo
   dorado y las dos muescas del troquel a media altura, como las de las
   etapas. Los campos por dentro no se tocan: son de forms.css.
   OJO: el formulario NO cuelga de ninguna sección [data-route] —lo inserta
   presu-form.js fuera—, por eso estas reglas van sin ese prefijo. */

form.wa-form.card {
  --troquel: 50%;
  position: relative;
  padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 56px) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(212, 175, 55, .10), transparent 140px), linear-gradient(180deg, #16121c, #0e0c12) !important;
  outline: 0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
  -webkit-mask:
    radial-gradient(circle 13px at 0 var(--troquel), transparent 12px, #000 13px),
    radial-gradient(circle 13px at 100% var(--troquel), transparent 12px, #000 13px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 13px at 0 var(--troquel), transparent 12px, #000 13px),
    radial-gradient(circle 13px at 100% var(--troquel), transparent 12px, #000 13px);
  mask-composite: intersect;
}

form.wa-form.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 25%, var(--gold-light, #FFD46A) 50%, var(--gold-medium, #D4AF37) 75%, transparent);
}

form.wa-form .form-title {
  font-size: clamp(24px, 2.8vw, 38px) !important;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  text-align: center;
  margin-bottom: 18px;
}


/* --------------------------------------------------------------------------
   9. La llegada de cada pieza
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  [data-route="home"] .process-card,
  [data-route="home"] .feature-card,
  [data-route="home"] .mini-gallery img,
  form.wa-form.card {
    animation: pieza-llega linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  [data-route="home"] .process-card:nth-child(2),
  [data-route="home"] .feature-card:nth-child(2) { animation-range: entry 6% entry 38%; }
  [data-route="home"] .process-card:nth-child(3),
  [data-route="home"] .feature-card:nth-child(3) { animation-range: entry 12% entry 46%; }
  [data-route="home"] .process-card:nth-child(4),
  [data-route="home"] .feature-card:nth-child(4) { animation-range: entry 18% entry 54%; }
}

@keyframes pieza-llega {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-route="home"] .process-card,
  [data-route="home"] .feature-card,
  [data-route="home"] .mini-gallery img,
  form.wa-form.card,
  [data-route="home"] .faq summary::after {
    animation: none !important;
    transition: none !important;
    /* Y AQUI VA LO IMPORTANTE, que faltaba. Estas tarjetas heredan de
       `[data-route="home"] .card` un `opacity: 0` que solo levantaba la
       animacion. Al apagarla por quietud se quedaban invisibles PARA
       SIEMPRE: 14 tarjetas de la portada —el como funciona y la entrada en
       el movil— en blanco para cualquiera que tenga puesto "reducir
       movimiento" en el movil o en el ordenador. Medido el 2026-09-04.
       Apagar una animacion nunca puede dejar el estado inicial puesto. */
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }
}


/* ==========================================================================
   10. /reserva — la última página con traje viejo (repaso 01-09, noche)
   ==========================================================================
   Kicker de rotulador pedido a Google que ya no existe, chips grises y tres
   pasos en cajas de cristal. Se viste con lo de la casa: sello, cartel con
   raya, chips dorados, los pasos como paradas numeradas y las citas con su
   comilla grande. El formulario del final ya era la entrada grande. */


[data-route="reserva"] .hero .bg-gradient { display: none !important; }

[data-route="reserva"] .kicker {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid rgba(212, 175, 55, .5) !important;
  border-radius: 999px;
  background: rgba(212, 175, 55, .08);
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--gold-light, #FFD46A) !important;
}

section[data-route="reserva"] .hero .title {
  line-height: .96;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 20px;
  margin: 16px 0 14px !important;
}

section[data-route="reserva"] .hero .title::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: rotate(-.6deg);
}

[data-route="reserva"] .hero p { max-width: 56ch; }

[data-route="reserva"] .rsv-chip {
  border: 1px solid rgba(212, 175, 55, .35) !important;
  border-radius: 999px !important;
  background: rgba(212, 175, 55, .07) !important;
  color: var(--ink-dim, #d7dbe2) !important;
  transition: border-color .2s ease, transform .2s ease;
}

[data-route="reserva"] .rsv-chip:hover {
  border-color: rgba(212, 175, 55, .7) !important;
}

/* Los pasos de la reserva, como los de la portada: papel, número en su aro
   y la ruta de puntos por detrás en escritorio. */
[data-route="reserva"] .rsv-steps { position: relative; }

@media (min-width: 900px) {
  [data-route="reserva"] .rsv-steps::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 8%;
    right: 8%;
    height: 2px;
    background-image: radial-gradient(circle 1.5px, rgba(212, 175, 55, .55) 1.4px, transparent 1.6px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
  }
}

[data-route="reserva"] .rsv-step {
  position: relative;
  background: linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 100px), linear-gradient(180deg, #141118, #0e0c12) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease;
}

[data-route="reserva"] .rsv-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 30%, var(--gold-medium, #D4AF37) 70%, transparent);
  opacity: .8;
}

[data-route="reserva"] .rsv-step:hover {
  box-shadow: 0 24px 56px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 55, .3) !important;
}

[data-route="reserva"] .rsv-step .n {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, .55) !important;
  background: rgba(212, 175, 55, .1) !important;
  color: var(--gold-light, #FFD46A) !important;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: 20px !important;
}

/* -- El ritmo de /reserva ------------------------------------------------
   Cada bloque lleva 96 px de relleno arriba Y abajo (`unificado.css`), así
   que entre el título de una sección y su contenido se sumaban 192 px de
   vacío: la queja de «mucho hueco negro». El título y lo que cuenta son la
   misma cosa, así que van pegados; el aire se queda ENTRE secciones. */

[data-route="reserva"] .rsv-mid {
  padding: 64px 0 0 !important;
}

[data-route="reserva"] .rsv-mid + .container {
  padding-top: 26px !important;
  padding-bottom: 44px !important;
}

/* El último bloque muere contra el formulario, que ya trae su propio aire:
   con los 96 de serie quedaban 250 px de negro entre el botón y el form. */
[data-route="reserva"] .container:last-of-type {
  padding-bottom: 40px !important;
}

/* -- Las citas: entradas ya reservadas -----------------------------------
   Tres burbujas blancas iguales en fila eran correctas y anónimas. La
   sección se llama «Promos que YA RESERVARON»: pues cada promo tiene su
   entrada. Papel oscuro de la casa con el filo dorado, las dos muescas del
   troquel a media altura, el sello RESERVADA estampado torcido en la
   esquina, el mensaje del grupo en grande y el instituto como titular de
   la entrada. Detrás, el rótulo hueco, como en el resto de la web.

   OJO: el texto de la cita es oscuro por una regla incrustada en la
   página; sobre papel oscuro hay que declararlo blanco a la cara o
   desaparece (ya pasó una vez). */

[data-route="reserva"] .rsv-quotes {
  position: relative;
  max-width: 1100px;
  gap: 18px !important;
  padding-top: 34px;
}

[data-route="reserva"] .rsv-quotes::before {
  content: 'RESERVADAS';
  position: absolute;
  top: -22px;
  left: 50%;
  translate: -50% 0;
  z-index: 0;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: clamp(64px, 8.5vw, 140px);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, .22);
  pointer-events: none;
}

[data-route="reserva"] .rsv-quote {
  --talon: 50%;
  position: relative;
  z-index: 1;
  /* 56 arriba: el sello vive en su propia franja y no pisa la primera
     línea del mensaje, que era lo que pasaba con 34. */
  padding: 56px 26px 24px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(212, 175, 55, .09), transparent 120px), linear-gradient(180deg, #141118, #0e0c12) !important;
  color: #fff !important;
  font-size: 17px !important;
  line-height: 1.5;
  box-shadow: inset 0 3px 0 rgba(212, 175, 55, .85), 0 0 0 1px rgba(212, 175, 55, .16) !important;
  transition: transform .25s ease, box-shadow .25s ease;
  /* Las muescas del troquel, a media altura. */
  -webkit-mask:
    radial-gradient(circle 9px at 0 var(--talon), transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% var(--talon), transparent 8px, #000 9px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 9px at 0 var(--talon), transparent 8px, #000 9px),
    radial-gradient(circle 9px at 100% var(--talon), transparent 8px, #000 9px);
  mask-composite: intersect;
}

[data-route="reserva"] .rsv-quote:hover {
  box-shadow: inset 0 3px 0 rgba(212, 175, 55, 1), 0 0 0 1px rgba(212, 175, 55, .45) !important;
}

/* El sello, estampado torcido en la esquina. */
[data-route="reserva"] .rsv-quote::before {
  content: 'RESERVADA';
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 4px 10px;
  border: 1.5px dashed rgba(212, 175, 55, .8);
  border-radius: 6px;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold-light, #FFD46A);
  background: rgba(212, 175, 55, .08);
  rotate: -6deg;
  pointer-events: none;
}

/* El doble check: el guiño de que llegó por WhatsApp. */
[data-route="reserva"] .rsv-quote::after {
  content: '✓✓';
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 12px;
  letter-spacing: -.08em;
  color: #34b7f1;
}

/* El instituto, como titular de la entrada. */
[data-route="reserva"] .rsv-quote small {
  display: block;
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .14);
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light, #FFD46A) !important;
}

@media (max-width: 900px) {
  [data-route="reserva"] .rsv-quotes::before { font-size: 54px; top: -12px; }
}

section[data-route="reserva"] .section-title {
  display: table;
  /* El <style> de la página lo alinea a la izquierda con su propia regla. */
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  text-align: center;
  position: relative;
  padding-bottom: 14px;
}

section[data-route="reserva"] .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}

@supports (animation-timeline: view()) {
  [data-route="reserva"] :is(.rsv-step, .rsv-quote) {
    animation: pieza-llega linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  [data-route="reserva"] :is(.rsv-step, .rsv-quote):nth-child(2) { animation-range: entry 8% entry 40%; }
  [data-route="reserva"] :is(.rsv-step, .rsv-quote):nth-child(3) { animation-range: entry 16% entry 50%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-route="reserva"] :is(.rsv-step, .rsv-quote, .rsv-chip) {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   11. Equilibrio y la cinta (repaso 02-09)
   ==========================================================================
   Dos quejas con razón: «una sección ancha y otra que se corta» y «la
   portada no sorprende».

   EQUILIBRIO: las entradas de etapa iban en la caja de lectura (1180) y las
   escenas de fincas/locales a 1500, y en una pantalla grande se veía la
   costura. Ahora las dos secciones GRANDES —etapas y espacios— comparten
   anchura, y las de lectura (pasos, app, garantías, dudas) van más
   estrechas a propósito: es el ritmo ancho/estrecho de una revista, no un
   descuido.

   LA CINTA: entre el hero y las entradas cruza una cinta dorada de cartel,
   ligeramente torcida, con las cifras de la casa desfilando sin parar
   —★ 4.9 · +285 centros · fotos en 72 h…—. Es el gesto de marquesina de
   sala de fiestas. Todo por CSS: el texto es un pseudoelemento (invisible
   para el buscador) repetido dos veces y desplazado un 50% en bucle, que es
   lo que hace el giro sin salto. Con «reducir movimiento» se queda quieta.
   ========================================================================== */

[data-route="home"] .etapas-seccion {
  max-width: 1180px !important;
  padding-inline: clamp(16px, 3vw, 28px) !important;
  position: relative;
  padding-top: 120px !important;
}

/* -- La cinta ------------------------------------------------------------ */

[data-route="home"] .etapas-seccion::before {
  content: '★ 4.9 EN RESEÑAS REALES  ·  +285 CENTROS EN 2026  ·  FOTOS EN 72 HORAS  ·  BARRA LIBRE  ·  DJ Y ROBOT LED  ·  TODO EL AÑO  ·  DE 4º DE ESO A FIN DE CARRERA  ·  ★ 4.9 EN RESEÑAS REALES  ·  +285 CENTROS EN 2026  ·  FOTOS EN 72 HORAS  ·  BARRA LIBRE  ·  DJ Y ROBOT LED  ·  TODO EL AÑO  ·  DE 4º DE ESO A FIN DE CARRERA  ·  ';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 110vw;
  translate: -50% 0;
  rotate: -1.4deg;
  z-index: 2;
  padding: 12px 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .12em;
  line-height: 1;
  color: #1a1204;
  background: linear-gradient(90deg, var(--gold-medium, #D4AF37), var(--gold-light, #FFD46A) 50%, var(--gold-medium, #D4AF37));
  box-shadow: 0 14px 40px rgba(212, 175, 55, .3);
  pointer-events: none;
  /* El texto empieza donde acaba: la mitad exacta del contenido es una
     copia, y desplazar el 50 % cierra el bucle sin costura. */
  animation: cinta-desfila 34s linear infinite;
}

@keyframes cinta-desfila {
  from { text-indent: 0; }
  to   { text-indent: -50%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-route="home"] .etapas-seccion::before { animation: none; }
}

@media (max-width: 640px) {
  [data-route="home"] .etapas-seccion { padding-top: 96px !important; }
  [data-route="home"] .etapas-seccion::before { font-size: 12px; padding: 10px 0; }
}

/* La cinta de cartel mide 110vw para cruzar torcida de borde a borde, y lo
   que sobresale (5 % por lado: 72 px a 1440, 96 a 1920) ensanchaba el
   documento. Se recorta en la propia sección de la portada. `clip`, no
   `hidden`: hidden convierte la sección en contenedor de scroll y rompe
   las animaciones ligadas al scroll de la página. */
[data-route="home"] { overflow-x: clip; }


/* ==========================================================================
   12. Las cifras que contaban solas descolocaban la página (04-09)
   ==========================================================================
   Las tres cifras del hero se animan de 0 a su valor. Cada fotograma cambia
   el número de dígitos —0, 1.234, 20.000— y con ello el ancho de la caja;
   como van alineadas a la derecha, TODO se recolocaba en cada paso. Medido:
   234 saltos diminutos que sumaban 0,14 de CLS en la portada, que es rojo
   en Google (el umbral está en 0,1).

   Dos cosas lo cierran: cifras de ancho fijo (`tabular-nums`, todos los
   dígitos ocupan lo mismo) y un ancho mínimo reservado desde el principio,
   para que pasar de un dígito a seis no mueva nada. `contain: layout` remata:
   lo que cambie aquí dentro no puede recolocar el resto de la página.
   ========================================================================== */

[data-route="home"] .hero .stats {
  contain: layout;
}

[data-route="home"] .hero .stats .stat b {
  display: block;
  min-width: 5.5ch;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-align: right;
}

@media (max-width: 1080px) {
  /* En la fila de móvil las cifras van a la izquierda: el ancho reservado
     se mantiene, pero el texto se alinea con su etiqueta. */
  [data-route="home"] .hero .stats .stat b { text-align: left; }
}


/* ===== graduaciones.css ===== */
/* ==========================================================================
   Las cuatro páginas de etapa (/eso, /bach, /fp, /uni), al nivel de la casa
   ==========================================================================
   Eran las páginas más viejas de la web: hero plano con estilos escritos en
   los atributos, tarjetas de cristal de tres modelos distintos y ni rastro
   del color de cada curso. Esta hoja las pone en el idioma del resto:

   · Cada etapa con el color de su birrete —el mismo que sus entradas de la
     portada: violeta ESO, azul Bachillerato, verde FP, oro Universidad— en
     el sello, la raya del titular, los filos y los focos.
   · El hero con una foto de fiesta del archivo de la casa bajo el velo,
     como las páginas de ciudad, y el titular a tamaño de cartel.
   · Todas las tarjetas (main-card, include-card, faq-card, tgm-price-card)
     en el papel de las entradas: oscuro, filo del curso arriba, subida al
     pasar el ratón. Los emojis, en su aro.
   · Titulares de sección con la raya de rotulador.
   · Las piezas suben escalonadas al llegar con el scroll.

   ESTA HOJA NO TOCA EL HTML: mismos textos, mismos enlaces. Muchos estilos
   viejos van escritos EN EL ATRIBUTO style de cada elemento (el hero
   entero) o en el <style> incrustado de la sección, que va después que las
   hojas del head: de ahí los !important. Guardián del SEO en verde.

   Para quitarlo: se borra el <link> de esta hoja.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. El color y la foto de cada etapa
   -------------------------------------------------------------------------- */

[data-route="eso"]  { --tinte: 139, 123, 216; }
[data-route="bach"] { --tinte: 91, 141, 239;  }
[data-route="fp"]   { --tinte: 63, 169, 124;  }
[data-route="uni"]  { --tinte: 212, 175, 55;  }

/* El fondo de la página: ver sistema.css §2 (cabecera con foto y negro liso). */


/* --------------------------------------------------------------------------
   2. El hero: cartel sobre la fiesta
   -------------------------------------------------------------------------- */

/* El hero ya no lleva foto propia: la de la página se ve a través, con un
   foco extra del curso para que la entrada tenga más luz que el resto. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .hero {
  position: relative;
}

/* El degradado viejo del hero pintaba encima de la foto: fuera. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .hero .bg-gradient {
  display: none !important;
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .hero .hero-inner {
  padding-top: clamp(56px, 8vw, 110px) !important;
  padding-bottom: clamp(56px, 8vw, 110px) !important;
}

/* El sello del curso: pisa el estilo escrito en el atributo del span. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .kicker {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid rgba(var(--tinte), .55) !important;
  border-radius: 999px;
  background: rgba(var(--tinte), .1);
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgb(var(--tinte)) !important;
  margin-bottom: 0 !important;
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .hero .title {
  line-height: .98 !important;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 20px;
  margin: 18px 0 14px !important;
}

/* La raya de rotulador, en el color del curso. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .hero .title::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--tinte), .5), rgb(var(--tinte)));
  transform: rotate(-.6deg);
  box-shadow: 0 0 18px rgba(var(--tinte), .5);
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .hero p {
  max-width: 56ch;
  color: var(--ink-dim, #d7dbe2);
}


/* --------------------------------------------------------------------------
   3. Los titulares de sección, con la raya
   -------------------------------------------------------------------------- */

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .section-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  padding-bottom: 14px;
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .section-sub {
  text-align: center;
  max-width: 56ch;
  margin: 10px auto 26px;
}


/* --------------------------------------------------------------------------
   4–7. Tarjetas, «Lo que incluye» y «Dudas» (repaso 2-oct-2026)
   --------------------------------------------------------------------------
   Antes: 21 tarjetas iguales seguidas, cada una con degradado del color del
   curso, filo de color, sombra, saltito al pasar el ratón y animación de
   llegada; «Lo que incluye» a 1.060 px y las dudas a 1.124; números «01-09»
   en cada ficha. Ahora: papel liso, alto natural, el icono al lado del
   título, un solo ancho, y las dudas como lista con una raya entre
   preguntas (seis cajas más no aportaban nada). */

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) :is(.main-card, .include-card, .tgm-price-card) {
  position: relative;
  background: #131118 !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) :is(.main-card, .include-card, .faq-card, .tgm-price-card)::before,
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .include-card::after { content: none !important; }

/* Los iconos, en su aro fino del color del curso */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) :is(.main-card-icon, .include-card .icon, .faq-icon, .tgm-price-icon) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: grid !important;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid rgba(var(--tinte), .45) !important;
  background: transparent !important;
}
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) :is(.main-card-icon, .include-card .icon, .faq-icon, .tgm-price-icon) .ico {
  width: 22px; height: 22px; color: rgb(var(--tinte));
}

section:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) :is(.main-card-title, .include-card h3, .faq-title, .tgm-price-title) {
  font-size: 18px !important;
}

/* Un solo ancho para todas las rejillas */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) :is(.main-cards-grid, .grid-3x3, .faq-grid, .price-grid, .tgm-price-grid) {
  max-width: none !important;
  margin-inline: 0 !important;
}

/* «Lo que incluye»: el icono a la izquierda, texto a su lado */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .grid-3x3 { gap: 12px !important; }
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .include-card {
  display: grid !important;
  grid-template-columns: 44px 1fr;
  column-gap: 16px;
  align-items: start !important;
  padding: 20px !important;
}
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .include-card .icon { grid-row: span 2; margin: 0 !important; }
section[data-route]:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .include-card h3 {
  margin: 2px 0 6px !important;
  font-size: 17px !important;
  line-height: 1.25;
  padding: 0 !important;
}
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .include-card p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.55;
  color: #c9c2b8 !important;
  opacity: 1 !important;
}

/* «Dudas»: lista, no tarjetas */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .faq-grid { column-gap: 48px !important; row-gap: 0 !important; }
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .faq-card {
  display: grid !important;
  grid-template-columns: 44px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 24px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .faq-card .faq-icon { grid-row: span 2; margin: 0 !important; }
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .faq-card .faq-title { margin: 2px 0 6px !important; }
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .faq-card .faq-text { margin: 0 !important; color: #c9c2b8 !important; }

/* Los vídeos, sin saltito */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile { transition: none !important; }
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile:hover { transform: none !important; box-shadow: none !important; }

/* Los vídeos: con cuatro, cuatro en fila. */
@media (min-width: 900px) {
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  }
}

/* Los dos botones del final de las dudas, centrados */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .container > div:not([class]):has(> .btn) {
  justify-content: center !important;
  margin-top: 40px !important;
}

@media (max-width: 760px) {
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .faq-grid { grid-template-columns: 1fr !important; }
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .include-card { padding: 16px !important; }
}


/* ==========================================================================
   8. «Momentos»: UN carrete que cruza la pantalla
   ==========================================================================
   Primer intento: tres carretes sueltos, cada uno con sus perforaciones, en
   una caja de 1060. Resultado: tres vídeos pequeños en medio de un desierto
   negro, con 400 px vacíos a cada lado y nada que mandara. Basura.

   La idea buena era la película, pero mal montada: una película no son tres
   trozos separados, es UNA tira. Así que ahora es una sola: cruza la
   pantalla casi de borde a borde, ligeramente torcida como una cinta
   pegada, con las perforaciones arriba y abajo —donde van en el celuloide
   de verdad—, el marcaje del negativo impreso en el borde y los tres
   fotogramas grandes y pegados dentro, sin aire muerto entre ellos.

   Los fotogramas van en 4:5 en vez de 9:16: el clip se recorta un poco por
   arriba y por abajo, pero caben grandes y la tira no se come una pantalla
   entera de alto. Todo el marcaje sale de pseudoelementos y contadores.
   ========================================================================== */

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos {
  position: relative;
  counter-reset: clip;
  /* La tira es MÁS ANCHA que el contenedor de lectura donde vive, así que
     `margin-inline: auto` no la centraba: la empujaba a desbordar por la
     derecha y aparecía scroll lateral (42 px a 1920, 104 a 1440). Se saca
     del contenedor y se centra contra la ventana. */
  width: min(1560px, 92vw);
  margin-left: 50%;
  translate: -50% 0;
  /* Flex y no rejilla de 3: /uni tiene CUATRO clips y el cuarto caía
     huérfano en una segunda fila. Una tira de película no tiene filas —
     todos los fotogramas van seguidos, repartiéndose el ancho. */
  display: flex !important;
  gap: 6px !important;
  padding: 30px 14px !important;
  border-radius: 8px;
  background: linear-gradient(180deg, #17141c, #100d15);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--tinte), .18);
  rotate: -.7deg;
}

/* Las perforaciones del celuloide: arriba y abajo, a lo largo de la tira. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos::before {
  content: '';
  position: absolute;
  inset: 9px 12px auto;
  height: 12px;
  box-shadow: 0 calc(100% + 6px) 0 0 rgba(0, 0, 0, 0);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 26px);
  background-size: 100% 6px, 100% 6px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Segunda fila de perforaciones, abajo del todo. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos::after {
  content: '';
  position: absolute;
  inset: auto 12px 9px;
  height: 6px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 10px, transparent 10px 26px);
  pointer-events: none;
}

/* -- Cada fotograma ------------------------------------------------------- */

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile {
  counter-increment: clip;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 4 / 5 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #000;
  box-shadow: none;
  transition: filter .3s ease;
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 0;
  box-shadow: none;
}

/* El marcaje del negativo, impreso sobre el fotograma. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile::after {
  content: counter(clip, decimal-leading-zero) ' · TU GRADUACIÓN MADRID';
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 1;
  font-family: var(--letra-titular, 'Libre Franklin', sans-serif);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  pointer-events: none;
}

/* Al pasar por un fotograma, los otros dos se apagan un punto: manda el que
   estás mirando, como en una mesa de montaje. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos:hover .video-tile {
  filter: brightness(.55) saturate(.85);
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos .video-tile:hover {
  filter: none;
}

@media (max-width: 700px) {
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos {
    flex-direction: column;
    gap: 8px !important;
  }

  /* En columna, `flex: 1 1 0` reparte el alto y aplasta los fotogramas
     (la tira se quedaba en 148 px). Aquí cada uno manda sobre su alto. */
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile {
    flex: 0 0 auto;
    /* Los clips son 540x960, o sea verticales. Con la caja a 4/5 y 24 px de
       relleno DENTRO del marco, en un móvil quedaba de 311x369: `cover`
       recortaba 184 px, un tercio del vídeo, por arriba y por abajo. Se veía
       la tripa de la gente y no la cara.

       Ahora la caja tiene la forma del clip (9/16) y el relleno se va fuera,
       al margen entre clips. Y se limita el ancho: a pantalla completa un
       9/16 mide 690 px de alto en un iPhone, y tres seguidos son dos metros
       de scroll. Al 62 % se ve entero y se pasa de uno a otro. */
    width: min(100%, 62vw);
    margin-inline: auto;
    rotate: none;
    padding: 0 !important;
    aspect-ratio: 9 / 16 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .video-tile,
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos:hover .video-tile { transition: none !important; filter: none !important; }
}

/* El botón de «Calcula tu precio» iba en bloque y el texto quedaba arriba */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .tgm-price-card .btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
}


/* ===== galeria-opiniones.css ===== */
/* ==========================================================================
   /galeria y /opiniones, al nivel de la casa
   ==========================================================================
   La galería era una lista de fotos iguales a dos columnas con un mar de
   aire entre ellas; las opiniones ya tenían su idea buena —los chats tal
   cual llegan por WhatsApp— pero flotaban sobre negro liso en tarjetas de
   cristal. Esta hoja:

   · GALERÍA: mosaico de la casa a lo ancho —una foto grande marcando el
     compás cada pocas teselas—, con el velo abajo, la subida con anillo
     dorado al pasar el ratón y la llegada escalonada con el scroll.
   · OPINIONES: el fondo con los focos y la fiesta detrás, y cada chat en
     el papel de las entradas con su filo VERDE WhatsApp arriba — aquí el
     filo no es dorado a propósito: el verde es la prueba de que son
     mensajes de verdad, y esa es la gracia de la página.

   ESTA HOJA NO TOCA EL HTML. Guardián del SEO en verde.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Galería: el fondo y el titular
   -------------------------------------------------------------------------- */


section[data-route="galeria"] .section-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  padding-bottom: 14px;
}

section[data-route="galeria"] .section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}


/* --------------------------------------------------------------------------
   2. Galería: el mosaico
   --------------------------------------------------------------------------
   De la lista a dos columnas con 80 px de aire, al mosaico de la casa:
   teselas apretadas y, cada siete, una foto grande que marca el compás.
   `dense` recoloca para que no queden huecos. */

[data-route="galeria"] .gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: clamp(140px, 16vw, 240px);
  grid-auto-flow: dense;
  gap: 12px !important;
}

[data-route="galeria"] .gallery-item {
  grid-column: span 4;
  position: relative;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  transition: transform .3s ease, box-shadow .3s ease;
}

[data-route="galeria"] .gallery-item:nth-child(7n + 1) {
  grid-column: span 8;
  grid-row: span 2;
}

[data-route="galeria"] .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* El velo que asienta cada foto. */
[data-route="galeria"] .gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 6, 10, .35));
  pointer-events: none;
}

[data-route="galeria"] .gallery-item:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 175, 55, .4);
  z-index: 1;
}

[data-route="galeria"] .gallery-item:hover img {
}

/* Las ocultas tras el «mostrar más» siguen ocultas: esto solo viste. */

@media (max-width: 760px) {
  [data-route="galeria"] .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: clamp(130px, 30vw, 180px);
    gap: 10px !important;
  }

  [data-route="galeria"] .gallery-item { grid-column: span 1; }

  [data-route="galeria"] .gallery-item:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 1;
  }
}


/* --------------------------------------------------------------------------
   3. Opiniones: el fondo y el titular
   -------------------------------------------------------------------------- */


section[data-route="opiniones"] .title {
  position: relative;
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 16px;
}

section[data-route="opiniones"] .title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}


/* --------------------------------------------------------------------------
   4. Opiniones: cada chat, en su papel
   --------------------------------------------------------------------------
   El filo de arriba va VERDE WhatsApp, no dorado: estos son mensajes de
   verdad y el verde es su sello. Todo lo demás es el papel de la casa. */

[data-route="opiniones"] .chat-card {
  position: relative;
  background: linear-gradient(180deg, rgba(37, 211, 102, .05), transparent 90px), linear-gradient(180deg, #141118, #0e0c12) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease !important;
}

[data-route="opiniones"] .chat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #25D366 30%, #25D366 70%, transparent);
  opacity: .75;
  z-index: 1;
}

[data-route="opiniones"] .chat-card:hover {
  box-shadow: 0 24px 56px rgba(0, 0, 0, .55), 0 0 0 1px rgba(37, 211, 102, .3) !important;
}

[data-route="opiniones"] .chat-avatar {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, .45);
}


/* --------------------------------------------------------------------------
   5. La llegada
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  [data-route="galeria"] .gallery-item,
  [data-route="opiniones"] .chat-card {
    animation: pieza-galeria-llega linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 26%;
  }

  [data-route="galeria"] .gallery-item:nth-child(3n),
  [data-route="opiniones"] .chat-card:nth-child(3n) { animation-range: entry 6% entry 32%; }
  [data-route="galeria"] .gallery-item:nth-child(3n + 2),
  [data-route="opiniones"] .chat-card:nth-child(3n + 2) { animation-range: entry 12% entry 38%; }
}

@keyframes pieza-galeria-llega {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-route="galeria"] .gallery-item,
  [data-route="galeria"] .gallery-item img,
  [data-route="opiniones"] .chat-card {
    animation: none !important;
    transition: none !important;
  }
}


/* La caja del final de la galería seguía en cristal viejo. Al papel. */
[data-route="galeria"] .gallery-cta {
  position: relative;
  background: linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 110px), linear-gradient(180deg, #141118, #0e0c12) !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
  overflow: hidden;
}

[data-route="galeria"] .gallery-cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-medium, #D4AF37) 30%, var(--gold-medium, #D4AF37) 70%, transparent);
  opacity: .8;
}


/* ==========================================================================
   6. Opiniones sin huecos (repaso 02-09)
   ==========================================================================
   Los chats tienen alturas distintas y en rejilla cada fila crecía hasta el
   más alto: quedaban huecos negros bajo los cortos. Multicolumna: fluyen y
   se recolocan solos. La caja «¿quieres que tu promo escriba el siguiente?»
   vive entre los chats y cruza las tres columnas de un lado a otro. */

[data-route="opiniones"] .reviews-grid {
  display: block !important;
  columns: 3;
  column-gap: 16px;
}

[data-route="opiniones"] .reviews-grid > .chat-card {
  break-inside: avoid;
  margin-bottom: 16px !important;
}

[data-route="opiniones"] .reviews-grid > :not(.chat-card) {
  column-span: all;
  margin-block: 18px 30px;
}

@media (max-width: 980px) { [data-route="opiniones"] .reviews-grid { columns: 2; } }
@media (max-width: 620px) { [data-route="opiniones"] .reviews-grid { columns: 1; } }


/* ===== animaciones.css ===== */
/* ==========================================================================
   El movimiento de la casa, en todas partes
   ==========================================================================
   Cada sección fue ganando sus animaciones por su cuenta (las entradas que
   suben, el gorro que vuela, el aviso que late). Esta hoja añade la capa
   común que faltaba, con dos reglas de oro: los momentos importantes se
   llevan el movimiento grande, y ningún adorno se mueve en bucle a la
   vista del que lee. Todo es CSS; con «reducir movimiento», nada.

   1 · La raya de rotulador de cualquier titular se DIBUJA al llegar con el
       scroll, de un trazo, como quien subraya. (Solo donde el navegador
       sabe de animation-timeline; en el resto está pintada desde el
       principio y nadie echa nada en falta.)
   2 · Los botones dorados llevan el brillo de sala: una luz los recorre al
       pasar el ratón, la misma que barre las entradas de etapa.
   3 · Los desplegables del menú caen con sus enlaces en cascada, cada uno
       un compás después, como en projectxeventos.
   4 · Los aros de emoji hacen una reverencia corta al pasar por su tarjeta.
   5 · Las respuestas del FAQ entran deslizándose al abrir el «+».
   ========================================================================== */

/* -- 1 · La raya que se dibuja ------------------------------------------- */

@supports (animation-timeline: view()) {
  :is(section[data-route], [data-ciudad]) :is(.section-title, .zone-title, .title, h1)::after,
  [data-route="home"] :is(.etapas-cabecera, .lugares-cabecera) .section-title::after {
    animation: raya-de-un-trazo linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 45%;
  }
}

@keyframes raya-de-un-trazo {
  from { width: 0; opacity: 0; }
  to   { width: 128px; opacity: 1; }
}

/* -- 2 · El brillo de sala en los botones dorados ------------------------- */

/* Solo dentro de <main>: el botón del menú tiene su propia vida y el
   brillo ahí interfería con su dibujo. */
main :is(.btn-primary, .etapa-btn, .lugar-btn, .det-enlace, .zone-nav-btn, .aviso-2627 a) {
  position: relative;
  overflow: hidden;
}

main :is(.btn-primary, .etapa-btn, .lugar-btn, .det-enlace, .zone-nav-btn, .aviso-2627 a)::after {
  position: absolute;
  inset: -10% auto auto -30%;
  width: 36%;
  height: 130%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38) 50%, transparent);
  transform: translateX(-160%) rotate(10deg);
  pointer-events: none;
}

main :is(.btn-primary, .etapa-btn, .lugar-btn, .det-enlace, .zone-nav-btn, .aviso-2627 a):hover::after {
  transition: transform .7s cubic-bezier(.3, .7, .3, 1);
}

/* -- 3 · La cascada del desplegable --------------------------------------- */

@media (min-width: 981px) {
  .nav .nav-menu a {
    opacity: 0;
    translate: 0 6px;
    transition: opacity .22s ease, translate .22s ease, background .16s ease, color .16s ease;
  }

  .nav-grupo[data-abierto='true'] .nav-menu a { opacity: 1; translate: 0 0; }

  .nav-grupo[data-abierto='true'] .nav-menu a:nth-child(2) { transition-delay: .04s; }
  .nav-grupo[data-abierto='true'] .nav-menu a:nth-child(3) { transition-delay: .08s; }
  .nav-grupo[data-abierto='true'] .nav-menu a:nth-child(4) { transition-delay: .12s; }
}

/* -- 4 · La reverencia de los aros ---------------------------------------- */

:is(.main-card-icon, .include-card .icon, .faq-icon, .tgm-price-icon, .process-icon, .feature-icon, .rsv-step .n) {
  transition: transform .25s cubic-bezier(.3, .8, .3, 1);
}

:is(.main-card, .include-card, .faq-card, .tgm-price-card, .process-card, .feature-card, .rsv-step):hover
  :is(.main-card-icon, .include-card .icon, .faq-icon, .tgm-price-icon, .process-icon, .feature-icon, .rsv-step .n) {
  transform: rotate(-8deg) scale(1.1);
}

/* -- 5 · Las respuestas que se deslizan ----------------------------------- */

@keyframes respuesta-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

:is([data-route="home"] .faq, [data-ciudad] .ciudad-faq) details[open] p {
  animation: respuesta-entra .3s ease both;
}

/* -- Quien pide quietud, quietud ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  :is(section[data-route], [data-ciudad]) :is(.section-title, .zone-title, .title, h1)::after,
  main :is(.btn-primary, .etapa-btn, .lugar-btn, .det-enlace, .zone-nav-btn, .aviso-2627 a)::after,
  .nav .nav-menu a,
  :is(.main-card-icon, .include-card .icon, .faq-icon, .tgm-price-icon, .process-icon, .feature-icon, .rsv-step .n),
  :is([data-route="home"] .faq, [data-ciudad] .ciudad-faq) details[open] p {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    translate: none;
  }
}


/* ==========================================================================
   Los fundidos entre mundos (repaso 02-09)
   ==========================================================================
   Toda sección con foto de fondo moría en un filo duro contra lo que viene
   después — el «corte raro». Un fundido interior por abajo (y un suspiro
   por arriba) la deja morir en el negro de la casa antes de ceder el paso.
   Es una sombra interior: no toca el HTML ni tapa nada que se lea. */

[data-ciudad],
[data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"],
[data-route="reserva"], [data-route="opiniones"],
[data-route="locales"], [data-route="fincas"] {
  box-shadow:
    inset 0 -160px 120px -80px #0a090d,
    inset 0 60px 80px -60px rgba(10, 9, 13, .85);
}

/* La sección del formulario (vive FUERA de la sección de ruta) se planta
   sobre el negro de la casa con su foco, en vez de heredar lo que caiga. */
section[data-form="presu-lite"] {
  background:
    radial-gradient(50% 70% at 50% 0%, rgba(212, 175, 55, .07), transparent 70%),
    linear-gradient(180deg, #0a090d, #0e0c12) !important;
  margin: 0 !important;
  max-width: none !important;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 28px) !important;
}

section[data-form="presu-lite"] .wa-form.card {
  max-width: 1180px;
  margin-inline: auto !important;
}

/* Fuera de la portada, el vídeo de fondo está APAGADO pero su cartel seguía
   pintado detrás de todo y asomaba por cada hueco: era la banda clara del
   «corte raro». El guion solo lo pausa; aquí se esconde del todo. La
   portada, que es la suya, lo conserva. (El formulario vive FUERA de <main>
   —lo inserta presu-form.js—, por eso pintar main no bastaba.) */
body:not(.tgm-portada) .site-bg-video {
  display: none !important;
}

body:not(.tgm-portada) main {
  background: #0a090d;
}

/* ==========================================================================
   La cabecera fotográfica muere en el negro de la casa
   ==========================================================================
   Las fotos de fondo iban con `background-attachment: fixed` para que no se
   estirasen a lo alto de páginas de 13.000 px. Salió caro por dos lados: en
   una pantalla grande y retina el navegador NO pintaba la foto (el hero de
   /fincas se veía negro, justo lo que Emilio reportó el 02-09) y, aun
   pintándola, obligaba a repintarla en cada scroll.

   Ahora la foto ocupa el ancho y su alto natural arriba —sin estirarse— y
   este velo la funde con el negro antes de que se corte. Se ve siempre, en
   cualquier pantalla, y el scroll va suelto.
   ========================================================================== */


[data-ciudad],
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"], [data-route="locales"], [data-route="fincas"], [data-route="reserva"], [data-route="opiniones"]) {
  position: relative;
}

/* El contenido, por encima del velo. */
[data-ciudad] > *,
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"], [data-route="locales"], [data-route="fincas"], [data-route="reserva"], [data-route="opiniones"]) > * {
  position: relative;
  z-index: 1;
}


/* ===== repaso.css ===== */
/* ==========================================================================
   REPASO DE DISEÑO — 23-09-2026
   ==========================================================================
   Arreglos de fallos medidos en producción a 390 y 1440 px. No cambia la
   maquetación ni el estilo de la web: corrige lo que estaba roto o
   descuadrado. Va la última para ganar la cascada; borrándola de la lista
   de scripts/unir-css.mjs la web vuelve a como estaba.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Interlineado del texto
   --------------------------------------------------------------------------
   Nadie le daba interlineado al cuerpo, así que casi todo el texto de las
   tarjetas iba con el `normal` de la letra: 1,1 en Archivo. Medido: 40
   tipos de párrafo con los renglones pegados (pasos, tarjetas de la app,
   dudas de cada etapa, pie, precios, reserva…). `:where()` no pesa nada,
   así que los titulares y todo lo que ya tenía su interlineado lo conservan. */

body {
  line-height: 1.55;
}

:where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.15;
}

:where(button, .btn, .btn-primary, .btn-secondary, .btn-ghost, input, select, textarea) {
  line-height: 1.2;
}


/* --------------------------------------------------------------------------
   2. Portada — los cuatro pasos
   --------------------------------------------------------------------------
   El número gigante (01, 02…) iba pegado a la derecha y el aro del emoji
   le tapaba el primer dígito: se leía «1», «2». Ahora arranca justo donde
   termina el aro. */

[data-route="home"] .process-card::before {
  right: auto;
  left: calc(50% + 42px);
  top: -6px;
}


/* --------------------------------------------------------------------------
   3. Portada — la app: los botones de las tiendas, centrados
   --------------------------------------------------------------------------
   Todo el bloque va centrado menos los dos botones y la nota, que se
   quedaban pegados a la izquierda. */

[data-route="home"] .app-badges {
  justify-content: center;
}

[data-route="home"] .app-note {
  text-align: center;
}


/* --------------------------------------------------------------------------
   4. Portada — el carrusel de opiniones
   --------------------------------------------------------------------------
   (a) El script calcula la anchura de cada tarjeta para que entren tres,
   pero una regla vieja las capaba a 320 px: entraban tres y media y la
   cuarta salía cortada por el borde. (b) Las flechas se montaban encima de
   la primera y la última tarjeta. (c) El botón «Ver todas» iba a la
   izquierda con el título centrado. */

#homeReviewsTrack > .chat-card {
  max-width: none !important;
  flex-shrink: 0 !important;
}

[data-route="home"] .reviews-cta {
  display: flex !important;
  justify-content: center !important;
}

@media (min-width: 601px) {
  [data-route="home"] .reviews-carousel {
    padding-inline: 48px;
  }

  [data-route="home"] .reviews-carousel .arrow.left { left: 0; }
  [data-route="home"] .reviews-carousel .arrow.right { right: 0; }
}

[data-route="home"] .reviews-carousel .arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   5. Opiniones — la hora se montaba sobre el mensaje
   --------------------------------------------------------------------------
   La hora iba en `position: absolute` en la esquina: en los mensajes
   cortos («lo pasamos genial») caía encima de la última palabra. Ahora va
   flotando a la derecha, como en WhatsApp: si cabe se queda en el renglón,
   y si no, baja al siguiente. */

:is([data-route="opiniones"], [data-route="home"]) .message .time {
  position: static;
  float: right;
  margin: 8px 0 -4px 12px;
  line-height: 1;
}

:is([data-route="opiniones"], [data-route="home"]) .message::after {
  content: '';
  display: block;
  clear: both;
}


/* --------------------------------------------------------------------------
   6. El formulario de presupuesto
   -------------------------------------------------------------------------- */

/* El enlace a la política de privacidad, la casilla y el borde del campo
   activo salían en verde turquesa, un color que no existe en ningún otro
   sitio de la web. */
:is(.wa-form, [data-footer-form]) .consent-text a,
.wa-form a {
  color: var(--gold-light, #FFD46A) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

[data-footer-form] .consent-checkbox input[type="checkbox"] {
  accent-color: var(--gold-medium, #D4AF37) !important;
}

[data-footer-form] :is(input, select):focus {
  border-color: rgba(212, 175, 55, .85) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .22) !important;
}

/* El desplegable «Etapa» usaba la flecha y el fondo del sistema y salía de
   otro alto que los campos de al lado (51, 53 y 54 px). */
.wa-form :is(input:not([type="checkbox"]), select) {
  min-height: 54px;
  box-sizing: border-box;
}

.wa-form select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 12px 8px !important;
  padding-right: 48px !important;
}

.wa-form select option {
  background: #141118;
  color: #f7f7ff;
}

/* Antes del formulario había 230 px de nada: el relleno de la última
   sección MÁS el del bloque del formulario, los dos de 96. Y otros 180
   entre el formulario y el pie. */
#footer-form {
  padding-top: 24px !important;
  padding-bottom: 32px !important;
}


/* --------------------------------------------------------------------------
   7. El pie: los iconos de contacto, en su renglón
   --------------------------------------------------------------------------
   El emoji iba más bajo que el texto del enlace en «WhatsApp» y «correo». */

.site-footer li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}


/* 8. (Mosaicos de /locales y /fincas: ahora en salas.css §2–7.) */


/* --------------------------------------------------------------------------
   10. /locales — rótulos y botones de arriba
   -------------------------------------------------------------------------- */

/* «Tipos de locales disponibles» y «¿Cómo reservar tu local?» eran los
   únicos títulos de sección de la web pequeños y a la izquierda. */
[data-route="locales"] section.card > h2.section-sub {
  text-align: center;
  font-size: var(--t-h2, clamp(24px, 3vw, 34px)) !important;
  color: #fff;
  margin: 0 0 28px;
}

/* Los tres botones de la cabecera: dos en un renglón y el tercero solo en
   el de abajo. Ahora van los tres seguidos. */
@media (min-width: 761px) {
  [data-route="locales"] .hero-locales .zone-nav,
  [data-route="locales"] .hero-locales .hero-cta {
    display: inline-block !important;
    vertical-align: middle;
    margin: 24px 0 20px !important;
  }

  [data-route="locales"] .hero-locales .zone-nav {
    margin-right: 12px !important;
  }

  [data-route="locales"] .hero-locales .zone-nav-buttons {
    gap: 12px !important;
  }
}


/* --------------------------------------------------------------------------
   11. Páginas de ciudad — «Graduaciones cerca de …»
   --------------------------------------------------------------------------
   Estaba escrito como rótulo pequeño (15 px), pero la regla común de los
   títulos lo inflaba a 34 px con el espaciado de rótulo: salía un titular
   gris enorme, montado sobre el «26/27» del fondo. */

section[data-ciudad] .ciudad-otras h2 {
  font-size: 13px !important;
  letter-spacing: .14em;
  color: var(--gold-medium, #D4AF37);
  margin: 0 0 14px;
}

/* Y entre esa lista y el formulario quedaban 190 px vacíos: 96 del
   contenedor más otros 96 de la sección. */
section[data-route][data-ciudad][data-ciudad] {
  padding-bottom: 0 !important;
}

section[data-route][data-ciudad] > .container {
  padding-bottom: 56px !important;
}


/* --------------------------------------------------------------------------
   12. Aviso legal, privacidad y cookies — un marco, no dos
   --------------------------------------------------------------------------
   El texto iba en una tarjeta con sombra y desenfoque DENTRO de otra caja
   con borde: dos marcos, uno más corto que el otro. Y la caja de fuera
   llevaba 96 px de relleno arriba, vacíos. */

:is([data-route="legal"], [data-route="privacidad"], [data-route="cookies"]) .container {
  padding: clamp(24px, 4vw, 48px) !important;
}

:is([data-route="legal"], [data-route="privacidad"], [data-route="cookies"]) .container > .card {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  padding: 0 !important;
}


/* --------------------------------------------------------------------------
   13. Móvil — la burbuja de WhatsApp tapaba las cifras de la portada
   --------------------------------------------------------------------------
   Nada más entrar, la burbuja verde caía encima de «+285 centros». En la
   portada no hace falta: arriba ya está el botón «Hablar por WhatsApp» y,
   al bajar, sale la barra de abajo, que lleva otro. */

@media (max-width: 700px) {
  body.tgm-portada .fab-wa {
    opacity: 0;
    pointer-events: none;
  }
}


/* --------------------------------------------------------------------------
   14. /locales — doble raya bajo la cabecera
   --------------------------------------------------------------------------
   La lista de salas es una sección dentro de otra y las dos llevan la raya
   de separación arriba: salían dos rayas paralelas a 45 px. */

[data-route="locales"] section.container > section.zone-section:first-of-type {
  border-top: 0 !important;
}



/* ==========================================================================
   SEGUNDA TANDA — 23-09-2026, revisado en iPhone (Safari) y a 1920 px
   ========================================================================== */


/* --------------------------------------------------------------------------
   15. La cabecera dejaba ver el texto que pasaba por detrás
   --------------------------------------------------------------------------
   Iba al 88 % de opacidad: en el iPhone se leían los titulares a través
   del logo al bajar. Ahora es prácticamente opaca. */

.nav.nav-solida {
  background: rgba(10, 9, 13, .97) !important;
}


/* --------------------------------------------------------------------------
   16. Galería: las fotos se montaban unas encima de otras
   --------------------------------------------------------------------------
   Cada foto llevaba una altura mínima de 300 px (del esqueleto de carga)
   pero su hueco en la rejilla mide 130-240 px: se salían de su fila y
   pisaban la de abajo. Pasaba en móvil y en ordenador. Fuera también el
   brillo animado del esqueleto, que seguía corriendo sobre fotos cargadas. */

[data-route="galeria"] .gallery-item {
  min-height: 0 !important;
}

[data-route="galeria"] .gallery-item::before {
  content: none !important;
  animation: none !important;
}


/* --------------------------------------------------------------------------
   17. Móvil: tarjetas compactas
   --------------------------------------------------------------------------
   En el móvil cada tarjeta era un bloque de 230-340 px: aro del emoji
   grande arriba, título centrado y tres renglones de texto. Seis tarjetas
   así son casi dos pantallas de scroll por sección. Ahora el emoji va a la
   izquierda del título y el texto debajo, a lo ancho: la mitad de alto. */

@media (max-width: 760px) {
  section[data-route] :is(.feature-card, .main-card, .faq-card, .tgm-price-card) {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    text-align: left !important;
    padding: 18px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  section[data-route] :is(.feature-icon, .main-card-icon, .faq-icon, .tgm-price-icon) {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    font-size: 21px !important;
    align-self: center;
  }

  section[data-route] :is(.feature-card, .main-card, .faq-card, .tgm-price-card) > :is(h2, h3) {
    margin: 0 !important;
    font-size: 16.5px !important;
    line-height: 1.2 !important;
  }

  section[data-route] :is(.feature-card, .main-card, .faq-card, .tgm-price-card) > :is(p, ul, a) {
    grid-column: 1 / -1;
    margin: 12px 0 0 !important;
    max-width: none !important;
  }

  section[data-route] :is(.feature-card, .main-card, .faq-card, .tgm-price-card) > a {
    justify-self: stretch;
    text-align: center;
  }

  /* «Lo que incluye» de cada etapa: ya traía el emoji y el texto en dos
     cajas; solo faltaba ponerlas en fila. */
  section[data-route] .include-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 14px;
    text-align: left !important;
    padding: 18px !important;
    min-height: 0 !important;
  }

  section[data-route] .include-card > .icon {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  section[data-route] .include-card h3 {
    margin: 2px 40px 6px 0 !important;
  }

  section[data-route] .include-card p {
    margin: 0 !important;
  }

  /* Los números gigantes huecos de cada sala y finca se montaban sobre el
     título («FINCA 2 · Zona Norte / Noreste»). En el móvil no caben. */
  [data-route="locales"] .venue-card-premium::before,
  [data-route="fincas"] .finca-card-premium::before {
    display: none !important;
  }

  /* Los dos botones de debajo de las dudas de cada etapa salían de anchos
     distintos, uno debajo del otro. */
  section[data-route] div[style*="display:flex;gap:12px"] > .btn {
    flex: 1 1 100%;
    margin-top: 0 !important;
    text-align: center;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   18. Portada: «Fincas» y «Nuestros locales»
   --------------------------------------------------------------------------
   (a) La palabra gigante hueca del fondo («FINCAS», «LOCALES») se montaba
   sobre las fotos en el ordenador y sobre el botón en el móvil: se leía
   como un fallo, no como un adorno. (b) En el ordenador la tira de fotos
   se cortaba a cuchillo por la mitad de una foto justo donde empieza el
   texto. Ahora entran dos fotos enteras y las flechas pasan a la siguiente. */

[data-route="home"] .lugar-fotos::before {
  content: none !important;
}

@media (min-width: 761px) {
  [data-route="home"] .lugar .slide {
    flex: 0 0 calc((100% - 14px) / 2) !important;
  }

  [data-route="home"] .lugar .track,
  [data-route="home"] .lugar[data-lugar="locales"] .track {
    -webkit-mask: none !important;
    mask: none !important;
  }

  [data-route="home"] .lugar {
    width: min(1180px, calc(100% - 32px)) !important;
    padding-inline: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   19. Portada: la flecha del aviso de arriba caía sola a otro renglón
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  [data-route="home"] .aviso-sub {
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   20. Formulario en el iPhone
   --------------------------------------------------------------------------
   La fecha salía con los números en azul del sistema y centrada, y el
   campo «¿Cuántos sois?» con las flechitas de subir y bajar. */

.wa-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  color: #f7f7ff;
  text-align: left;
}

.wa-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.wa-form input[type="date"]::-webkit-datetime-edit,
.wa-form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.wa-form input[type="date"]::-webkit-datetime-edit-day-field,
.wa-form input[type="date"]::-webkit-datetime-edit-month-field,
.wa-form input[type="date"]::-webkit-datetime-edit-year-field {
  color: #f7f7ff;
}

.wa-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.8) sepia(1) saturate(3) hue-rotate(5deg);
  opacity: .8;
}

.wa-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.wa-form input[type="number"]::-webkit-inner-spin-button,
.wa-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Galería en el móvil: con la foto ancha cada siete, las 15 del primer
   bloque dejaban la última sola en su fila. Con una ancha cada cinco
   (1 + 4 + 1 + 4 + 1 + 4) el bloque cierra justo. */
@media (max-width: 760px) {
  [data-route="galeria"] .gallery-item:nth-child(7n + 1) {
    grid-column: span 1 !important;
  }

  [data-route="galeria"] .gallery-item:nth-child(5n + 1) {
    grid-column: span 2 !important;
  }
}


/* --------------------------------------------------------------------------
   21. Galería: fondo liso
   --------------------------------------------------------------------------
   Llevaba dos manchas de color (granate arriba a la izquierda, morada abajo
   a la derecha). Sobre negro se veían como franjas sucias, y la morada se
   cortaba en seco donde acaba la sección, justo encima del formulario. Las
   fotos son el color de esta página: el fondo, negro liso como el resto. */

section[data-route="galeria"] {
  background: #0a090d !important;
}


/* ===== arreglos-25sep.css ===== */
/* ==========================================================================
   Arreglos del 25-09-2026
   --------------------------------------------------------------------------
   Emilio: «hay muchos errores… el diseño, los fondos, la estructura».
   Revisadas las páginas en iPhone (WebKit) y a 1440/1920. Cada bloque dice
   qué se veía mal y por qué. Va la ÚLTIMA en `unir-css.mjs`: quitarla de la
   lista deshace todo esto.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Opiniones: la hora volvía a pisar el mensaje
   --------------------------------------------------------------------------
   El arreglo del 23-09 (repaso.css §5) empataba en especificidad con el
   `<style>` escrito dentro de la propia página de opiniones, y ese va DESPUÉS
   en el documento: ganaba el viejo `position: absolute` y «fiestónnn»,
   «queremos repetir» o «mil gracias» salían con la hora encima. */

[data-route][data-route] .message .time {
  position: static !important;
  float: right;
  margin: 6px 0 -3px 12px !important;
  line-height: 1;
}

[data-route][data-route] .message::after {
  content: '';
  display: block;
  clear: both;
}


/* --------------------------------------------------------------------------
   2. Galería: agujero al final del mosaico (ordenador)
   --------------------------------------------------------------------------
   Con una foto grande cada siete, las filas no cerraban nunca: el bloque
   acababa con una foto suelta y un hueco negro a su derecha. Ahora es una
   grande (media anchura, dos filas) y cuatro pequeñas a su lado: cada cinco
   fotos, dos filas completas. El móvil ya iba de cinco en cinco, así que los
   dos mosaicos van al mismo compás. La grande cambia de lado en cada grupo
   para que no sea una columna fija. */

@media (min-width: 761px) {
  [data-route="galeria"] .gallery-item,
  [data-route="galeria"] .gallery-item:nth-child(7n + 1) {
    grid-column: span 3 !important;
    grid-row: span 1 !important;
  }

  [data-route="galeria"] .gallery-item:nth-child(5n + 1) {
    grid-column: span 6 !important;
    grid-row: span 2 !important;
  }

  [data-route="galeria"] .gallery-item:nth-child(10n + 6) {
    grid-column: 7 / span 6 !important;
  }

  /* Al abrirlas todas son 79: el último grupo trae cuatro y la última
     ocupa las dos casillas que quedarían vacías. */
  [data-route="galeria"] .gallery-item:last-child:nth-child(5n + 4) {
    grid-column: span 6 !important;
  }
}

/* Primer bloque de 25 (antes 23) y tandas de 15: siempre múltiplo de cinco,
   el mosaico cierra en cada «Ver más fotos». */
@media (max-width: 760px) {
  [data-route="galeria"] .gallery-item:last-child:nth-child(5n + 4) {
    grid-column: span 2 !important;
  }
}


/* 3. (Descripción de locales: ahora en salas.css §2–7.) */


/* --------------------------------------------------------------------------
   4. Locales y fincas: botones de arriba en mayúsculas y enormes en móvil
   --------------------------------------------------------------------------
   Eran los únicos botones de la web en mayúsculas, y en el iPhone
   «LOCALES CORREDOR DEL HENARES» se partía en dos renglones con un botón a
   todo el ancho. Mismo estilo que el resto; en móvil, los dos de zona lado
   a lado. */

:is([data-route="locales"], [data-route="fincas"]) :is(.zone-nav-btn, .hero .btn, .scroll-to-form, .hero-content .btn) {
  text-transform: none !important;
  letter-spacing: normal !important;
}

@media (max-width: 760px) {
  [data-route="locales"] .zone-nav-btn {
    font-size: 14px !important;
    padding: 12px 10px !important;
    line-height: 1.2 !important;
  }
}


/* 5. (Galería de las fichas en el móvil: ahora en sistema.css §1.) */


/* --------------------------------------------------------------------------
   6. Huecos de 300 px entre el final de la página y el formulario
   --------------------------------------------------------------------------
   El último `.container` de cada página lleva 96 px abajo (unificado.css) y
   la sección otros 96: se sumaban, y antes del formulario quedaba una franja
   vacía de 300-350 px en galería, reserva, fichas y etapas. Se deja el hueco
   de la sección y el del contenedor final a cero. */

section[data-route] > .container:last-child {
  padding-bottom: 0 !important;
}


/* ==========================================================================
   SEGUNDA TANDA (25-09, tarde) — revisión sección por sección
   --------------------------------------------------------------------------
   Emilio: «sigue habiendo un montón de errores… la web deja mucho que
   desear, pero no jodas el SEO». Todo lo de abajo es de dibujo: ni un
   texto, ni un enlace, ni un alt.
   ========================================================================== */


/* --------------------------------------------------------------------------
   7. Portada: el vídeo, solo en la cabecera
   --------------------------------------------------------------------------
   El vídeo de la fiesta iba FIJO detrás de toda la portada, y las secciones
   no tienen fondo propio: de «Elige tu etapa» al pie, todo flotaba sobre
   gente borrosa que cambiaba de amarillo a morado a verde al reproducirse.
   Era lo más «sucio» de la web. El vídeo se queda donde luce —la cabecera,
   de arriba abajo de la pantalla— y a partir de ahí cada sección va sobre
   el negro de la casa, a todo el ancho (border-image con desborde lateral:
   pinta de lado a lado sin crear scroll horizontal). */

body.tgm-portada section[data-route="home"] > .hero ~ section,
body.tgm-portada .site-footer {
  position: relative;
  border-image: linear-gradient(#0a090d, #0a090d) fill 0 / 0 / 0 100vmax;
}

/* Debajo de todo, el negro de la casa: si alguna capa se retira (el vídeo
   se aparta al bajar), nunca asoma el blanco del navegador. */
html {
  background: #0a090d;
}

/* El formulario vive fuera de <main>, con huecos arriba y abajo: los cubre. */
body.tgm-portada section[data-footer-form] {
  position: relative;
  border-image: linear-gradient(#0a090d, #0a090d) fill 0 / 0 / 80px 100vmax 40px;
}

/* La primera, fundiendo el vídeo en negro para que no haya corte. */
body.tgm-portada section[data-route="home"] > .hero + section {
  border-image: linear-gradient(rgba(10, 9, 13, 0), #0a090d 160px) fill 0 / 0 / 0 100vmax;
}


/* --------------------------------------------------------------------------
   8. Portada: «Cómo funciona» — adornos que pisaban el texto
   --------------------------------------------------------------------------
   Los «01-04» huecos de 86 px se salían de su columna y asomaban cortados en
   la de al lado, y la línea de puntos los atravesaba. Fuera los números
   gigantes (el paso ya lo cuenta el orden y el icono). */

[data-route="home"] .process-card::before {
  content: none !important;
}

[data-route="home"] .process-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* --------------------------------------------------------------------------
   9. Portada: títulos de «Nuestras fincas y locales» más grandes que el
      título de la sección
   --------------------------------------------------------------------------
   «FINCAS» y «NUESTROS LOCALES» iban a 66 px debajo de un título de sección
   de 34: la jerarquía al revés, y «NUESTROS LOCALES» partido en dos. */

section[data-route="home"] .lugar .lugar-texto h3 {
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.05 !important;
}


/* --------------------------------------------------------------------------
   10. Portada: listas y rejillas con una pieza suelta
   --------------------------------------------------------------------------
   «Garantías de seguridad»: 7 puntos en 2 columnas, el último solo con
   media fila vacía. «Dudas rápidas»: 9 preguntas en 2 columnas. */

@media (min-width: 721px) {
  [data-route="home"] .oklist > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  [data-route="home"] .faq.card {
    columns: 3 !important;
  }
}


/* --------------------------------------------------------------------------
   11. Portada: la firma vertical y los «Nº» girados de las etapas
   --------------------------------------------------------------------------
   Dos rótulos de 10-11 px girados 90°: a 1920 la firma flotaba a 25 px del
   borde lejos de todo, y los «Nº 01» de las tarjetas parecían marcas de
   imprenta olvidadas. */

[data-route="home"] .hero::after,
[data-route="home"] .etapa .etapa-gorro::after {
  content: none !important;
}

/* El aviso amarillo de arriba: a 1920 medía 800 px con media píldora vacía. */
[data-route="home"] .aviso-2627 {
  width: fit-content !important;
  max-width: min(100%, 620px) !important;
}


/* --------------------------------------------------------------------------
   12. Opiniones de la portada: flechas tapadas por la tarjeta
   -------------------------------------------------------------------------- */

[data-route="home"] .reviews-carousel .arrow {
  z-index: 3;
}


/* --------------------------------------------------------------------------
   13. El formulario: las muescas parecían manchas
   --------------------------------------------------------------------------
   Los medios círculos negros a los lados de la tarjeta del formulario se
   leían como un fallo de pintado, no como una entrada troquelada. Y el
   botón verde llevaba un resplandor rosa debajo. */

form.wa-form.card {
  -webkit-mask: none !important;
  mask: none !important;
}

form.wa-form .btn-whatsapp-form {
  min-height: 48px;
  padding: 0 22px !important;
  border-radius: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   14. Un solo borde izquierdo
   --------------------------------------------------------------------------
   El contenido de las secciones empieza a 158 px (a 1440) pero el
   formulario y el pie empezaban a 100: al bajar, los bloques «saltaban» de
   lado. Formulario y pie al mismo ancho que el resto (1180 con 28 de
   margen interior = 1124 útiles). */

section[data-form="presu-lite"] .wa-form.card {
  max-width: 1124px !important;
}

.site-footer > .container,
.site-footer .footer-grid,
.site-footer .footer-bottom {
  max-width: 1124px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   15. Páginas de curso: la banda oscura bajo el menú y la foto borrosa
   --------------------------------------------------------------------------
   El foco de color del hero empezaba 50 px por debajo del menú y dejaba una
   raya horizontal de lado a lado. Y la foto del fondo era la versión de
   800 px estirada a 1440-1920: barro. */

/* (La foto de la cabecera vive ahora en sistema.css §2.) */

/* La tira de película iba torcida -0,7°: los fotogramas bajaban 5 px cada
   uno y parecía un error, no un gesto. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .gallery-videos {
  rotate: none !important;
  max-width: 1124px;
  margin-inline: auto !important;
  left: auto !important;
  translate: none !important;
}


/* 16. (Números huecos de salas: fuera, salas.css §2–7.) */


/* --------------------------------------------------------------------------
   17. /reserva: el rótulo hueco «RESERVADAS» detrás de las citas
   -------------------------------------------------------------------------- */

[data-route="reserva"] .rsv-quotes::before {
  content: none !important;
}


/* --------------------------------------------------------------------------
   18. Páginas de ciudad: el «26/27» hueco asomaba como un «7» suelto
   -------------------------------------------------------------------------- */

[data-ciudad] .container::before {
  content: none !important;
}


/* --------------------------------------------------------------------------
   19. /opiniones: la entradilla descentrada bajo un título centrado
   -------------------------------------------------------------------------- */

[data-route="opiniones"] .section-sub,
[data-route="opiniones"] .opiniones-sub,
[data-route="opiniones"] h1 + p {
  margin-inline: auto !important;
  text-align: center;
}


/* --------------------------------------------------------------------------
   20. /galeria: la caja final de 293 px para una línea y un botón
   -------------------------------------------------------------------------- */

[data-route="galeria"] .gallery-cta {
  padding: 32px 24px !important;
  min-height: 0 !important;
}


/* --------------------------------------------------------------------------
   21. Móvil: la burbuja de WhatsApp tapaba botones y textos
   --------------------------------------------------------------------------
   En la primera pantalla la burbuja verde caía encima de lo que hubiera
   (en /locales, sobre el botón del Corredor) y al bajar la sustituía la
   barra de abajo: dos botones para lo mismo que se turnaban. En el móvil se
   queda solo la barra, siempre visible, y la página le deja su sitio. */

@media (max-width: 700px) {
  .fab-wa {
    display: none !important;
  }

  #tgm-barra {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Con el menú abierto la barra se va: se veía por encima de las opciones. */
  html.menu-abierto #tgm-barra {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   22. Menú del móvil: se leía la página a través
   --------------------------------------------------------------------------
   El panel usaba un desenfoque dentro de otro desenfoque, que no llega a la
   página: detrás de «GALERÍA» se leía el texto de la sección. Fondo sólido. */

@media (max-width: 980px) {
  .nav .nav-links.open,
  .nav.open .nav-links,
  html.menu-abierto .nav .nav-links,
  html.menu-abierto .nav {
    background: #0c0a10 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* --------------------------------------------------------------------------
   23. El visor de fotos en iPhone
   --------------------------------------------------------------------------
   Safari de iPhone no manda el toque a un oyente global si el elemento no
   parece pulsable: la mano lo arregla. */

:is(.gallery-item, .carousel-slide, .venue-image, .mini-gallery, .det-foto, .lugar) img {
  cursor: pointer;
}


/* 24. (Galería de las fichas: ahora en sistema.css §1.) */


/* --------------------------------------------------------------------------
   25. Páginas de ciudad: la MISMA foto en las 75
   --------------------------------------------------------------------------
   La carta de foto de cada ciudad era siempre «Fotos Graduaciones Madrid 4»:
   quien abría dos ciudades veía un clon. Ahora cada una lleva una foto
   distinta de la galería (lista generada; si se añade una ciudad sin línea,
   hereda la de siempre). */

[data-ciudad] .container::after {
  background:
    linear-gradient(180deg, transparent 55%, rgba(8, 6, 10, .45)),
    var(--foto-ciudad, url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%204.w800.webp')) center / cover no-repeat !important;
  transform: none !important;
}

[data-route="ciudades"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%202.w800.webp'); }
[data-route="graduaciones-alcala-de-henares"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2010.w800.webp'); }
[data-route="graduaciones-alcobendas"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2017.w800.webp'); }
[data-route="graduaciones-alcorcon"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2024.w800.webp'); }
[data-route="graduaciones-algete"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2031.w800.webp'); }
[data-route="graduaciones-alpedrete"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2038.w800.webp'); }
[data-route="graduaciones-aranjuez"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2045.w800.webp'); }
[data-route="graduaciones-arganda-del-rey"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2053.w800.webp'); }
[data-route="graduaciones-arroyomolinos"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2060.w800.webp'); }
[data-route="graduaciones-boadilla-del-monte"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2067.w800.webp'); }
[data-route="graduaciones-brunete"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2074.w800.webp'); }
[data-route="graduaciones-ciempozuelos"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2081.w800.webp'); }
[data-route="graduaciones-collado-villalba"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%209.w800.webp'); }
[data-route="graduaciones-colmenar-viejo"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2016.w800.webp'); }
[data-route="graduaciones-coslada"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2023.w800.webp'); }
[data-route="graduaciones-daganzo-de-arriba"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2030.w800.webp'); }
[data-route="graduaciones-el-alamo"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2037.w800.webp'); }
[data-route="graduaciones-el-escorial"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2044.w800.webp'); }
[data-route="graduaciones-fuenlabrada"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2052.w800.webp'); }
[data-route="graduaciones-galapagar"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2059.w800.webp'); }
[data-route="graduaciones-getafe"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2066.w800.webp'); }
[data-route="graduaciones-grinon"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2073.w800.webp'); }
[data-route="graduaciones-guadarrama"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2080.w800.webp'); }
[data-route="graduaciones-humanes-de-madrid"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%208.w800.webp'); }
[data-route="graduaciones-las-rozas-de-madrid"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2015.w800.webp'); }
[data-route="graduaciones-leganes"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2022.w800.webp'); }
[data-route="graduaciones-madrid-arganzuela"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2029.w800.webp'); }
[data-route="graduaciones-madrid-barajas"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2036.w800.webp'); }
[data-route="graduaciones-madrid-carabanchel"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2043.w800.webp'); }
[data-route="graduaciones-madrid-centro"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2051.w800.webp'); }
[data-route="graduaciones-madrid-chamartin"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2058.w800.webp'); }
[data-route="graduaciones-madrid-chamberi"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2065.w800.webp'); }
[data-route="graduaciones-madrid-ciudad-lineal"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2072.w800.webp'); }
[data-route="graduaciones-madrid-fuencarral-el-pardo"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2079.w800.webp'); }
[data-route="graduaciones-madrid-hortaleza"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%207.w800.webp'); }
[data-route="graduaciones-madrid-latina"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2014.w800.webp'); }
[data-route="graduaciones-madrid-moncloa-aravaca"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2021.w800.webp'); }
[data-route="graduaciones-madrid-moratalaz"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2028.w800.webp'); }
[data-route="graduaciones-madrid-puente-de-vallecas"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2035.w800.webp'); }
[data-route="graduaciones-madrid-retiro"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2042.w800.webp'); }
[data-route="graduaciones-madrid-salamanca"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2050.w800.webp'); }
[data-route="graduaciones-madrid-san-blas-canillejas"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2057.w800.webp'); }
[data-route="graduaciones-madrid-tetuan"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2064.w800.webp'); }
[data-route="graduaciones-madrid-usera"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2071.w800.webp'); }
[data-route="graduaciones-madrid-vicalvaro"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2078.w800.webp'); }
[data-route="graduaciones-madrid-villa-de-vallecas"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%206.w800.webp'); }
[data-route="graduaciones-madrid-villaverde"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2013.w800.webp'); }
[data-route="graduaciones-madrid"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2020.w800.webp'); }
[data-route="graduaciones-majadahonda"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2027.w800.webp'); }
[data-route="graduaciones-meco"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2034.w800.webp'); }
[data-route="graduaciones-mejorada-del-campo"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2041.w800.webp'); }
[data-route="graduaciones-moralzarzal"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2048.w800.webp'); }
[data-route="graduaciones-mostoles"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2056.w800.webp'); }
[data-route="graduaciones-navalcarnero"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2063.w800.webp'); }
[data-route="graduaciones-paracuellos-de-jarama"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2070.w800.webp'); }
[data-route="graduaciones-parla"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2077.w800.webp'); }
[data-route="graduaciones-pinto"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%205.w800.webp'); }
[data-route="graduaciones-pozuelo-de-alarcon"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2012.w800.webp'); }
[data-route="graduaciones-rivas-vaciamadrid"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2019.w800.webp'); }
[data-route="graduaciones-san-agustin-del-guadalix"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2026.w800.webp'); }
[data-route="graduaciones-san-fernando-de-henares"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2033.w800.webp'); }
[data-route="graduaciones-san-lorenzo-de-el-escorial"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2040.w800.webp'); }
[data-route="graduaciones-san-martin-de-la-vega"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2047.w800.webp'); }
[data-route="graduaciones-san-sebastian-de-los-reyes"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2055.w800.webp'); }
[data-route="graduaciones-torrejon-de-ardoz"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2062.w800.webp'); }
[data-route="graduaciones-torrejon-de-la-calzada"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2069.w800.webp'); }
[data-route="graduaciones-torrelodones"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2076.w800.webp'); }
[data-route="graduaciones-tres-cantos"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%203.w800.webp'); }
[data-route="graduaciones-valdemorillo"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2011.w800.webp'); }
[data-route="graduaciones-valdemoro"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2018.w800.webp'); }
[data-route="graduaciones-velilla-de-san-antonio"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2025.w800.webp'); }
[data-route="graduaciones-villalbilla"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2032.w800.webp'); }
[data-route="graduaciones-villanueva-de-la-canada"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2039.w800.webp'); }
[data-route="graduaciones-villanueva-del-pardillo"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2046.w800.webp'); }
[data-route="graduaciones-villaviciosa-de-odon"][data-ciudad] { --foto-ciudad: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2054.w800.webp'); }


/* ===== sistema.css ===== */
/* ==========================================================================
   sistema.css — las medidas de la casa (repaso del 2-oct-2026)
   ==========================================================================
   Plan en docs/PLAN-REPASO-DISENO-1002.md. Esta hoja NO es otra capa de
   parches: cada bloque sustituye reglas viejas, y cuando el bloque se extiende
   a toda la web las reglas viejas se BORRAN de su hoja. Si esta hoja crece y
   las demás no menguan, se está haciendo mal.

   Medidas (una de cada):
     columna 1124 px · primer contenido a ~142 px · 96 px entre bloques
     h1 de página 72 px (40 en móvil) · h2 40 px (28) · título de ficha 18 px
     botón 48 px de alto, esquina 12, sin resplandor
     fotos en 3/2 · iconos de línea de 22 px en dorado
   ========================================================================== */

:root {
  --s-columna: 1124px;
  --s-tinta: #f4f1ea;
  --s-gris: #c9c2b8;
  --s-gris-2: #8f8a82;
  --s-oro: var(--gold-medium, #D4AF37);
  --s-oro-claro: var(--gold-light, #FFD46A);
  --s-linea: rgba(255, 255, 255, .10);
  --s-papel: #131118;
  --s-boton-alto: 48px;
  --s-boton-esquina: 12px;
  --s-foto-esquina: 12px;
  --s-fondo: #0a090d;
  --s-banda: #111018;
  --s-menu: 92px;
}


/* --------------------------------------------------------------------------
   1. Ficha de espacio (/finca-N, /local-…) — `.ficha`  (rehecha el 2-oct, tarde)
   --------------------------------------------------------------------------
   Emilio: «peor que nunca»; rehacerla tomando de referencia el resto de la
   web. La primera versión de la mañana era una plantilla propia (foto
   enmarcada a la derecha, negro liso, franja de iconos suelta) que no se
   parecía a nada más de la web. Ahora usa las piezas de las demás páginas:
     · cabecera con la foto del espacio a todo lo ancho, oscura solo detrás
       del texto, como /fincas, /locales y los cursos;
     · el sello de zona y la raya dorada bajo el título, como esas cabeceras;
     · lo que entra en la fiesta en una banda, con los círculos de icono de
       «Cómo funciona»;
     · el título de la galería centrado con su raya, como las secciones.
   SOLO CSS: el HTML, los textos, los titulares, las fotos y los enlaces son
   los mismos (el guardián del SEO no ve nada). */

/* La cabecera arranca pegada al menú, como las demás con foto */
section[data-route]:is([data-route^="finca-"], [data-route^="local-"]) {
  padding-top: var(--s-menu) !important;
  overflow-x: clip;
}

section[data-route] > .container.ficha {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 1180px;
}

/* -- Cabecera: foto a todo lo ancho, texto encima a la izquierda ---------- */

.ficha-cab {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(72px, 8vw, 120px) max(clamp(16px, 3vw, 28px), calc(50vw - 562px)) clamp(64px, 6vw, 96px);
  min-height: 560px;
}

.ficha .det-foto.ficha-principal {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  background: var(--s-fondo);
}
.ficha .ficha-principal img { cursor: default; object-position: center 45%; }

/* El velo: oscuro detrás del texto, la foto a la vista a la derecha, y
   fundido abajo — el mismo que llevan las cabeceras de /fincas y los cursos */
.ficha .ficha-principal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 9, 13, .96) 0%, rgba(10, 9, 13, .88) 30%, rgba(10, 9, 13, .4) 60%, rgba(10, 9, 13, .1) 100%),
    linear-gradient(0deg, var(--s-fondo) 0, rgba(10, 9, 13, 0) 150px);
}

.ficha-texto, .ficha-pie { position: relative; max-width: 600px; }

.ficha-migas {
  font-size: 13.5px;
  color: var(--s-gris);
  margin: 0 0 22px;
}
.ficha-migas a { color: var(--s-gris); text-decoration: none; }
.ficha-migas a:hover { color: var(--s-oro-claro); }
.ficha-migas span { margin: 0 4px; }
.ficha-migas [aria-current] { color: var(--s-oro-claro); margin: 0; }

/* El sello de zona: el mismo que «Toda la Comunidad · con autobús» */
.ficha-zona {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 13px;
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 999px;
  background: rgba(212, 175, 55, .08);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-oro-claro);
}

/* El título con la raya de rotulador, como las cabeceras de /fincas */
section[data-route] .ficha h1 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 20px;
  line-height: .98;
  color: #fff;
}
section[data-route] .ficha h1::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: rotate(-.6deg);
}

.ficha-titular {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--s-oro-claro);
}

.ficha-intro {
  margin: 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-dim, #d7dbe2);
}

/* Las etiquetas: las mismas píldoras doradas de las ciudades */
.ficha-etiquetas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}
.ficha-etiquetas li {
  padding: 7px 13px;
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 999px;
  background: rgba(10, 9, 13, .55);
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--s-tinta);
}

.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
section[data-route] .ficha .btn::after { display: none !important; }

/* -- Lo que entra en la fiesta: banda con los círculos de «Cómo funciona» -- */

/* Un panel sobrio: cinco casillas separadas por líneas finas, icono dorado
   pequeño y el texto debajo. Sin círculos, sin puntos y sin brillo (los
   círculos de «Cómo funciona» aquí quedaban recargados: rechazados). */
.ficha-incluye {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 48px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #131118;
  overflow: hidden;
}

.ficha-incluye li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--s-tinta);
}
.ficha-incluye li + li { border-left: 1px solid rgba(255, 255, 255, .08); }

.ficha-incluye svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--s-oro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -- La galería: título de sección centrado con su raya ------------------- */

section[data-route] .ficha .ficha-h2 {
  position: relative;
  display: table;
  margin: 88px auto 36px;
  padding-bottom: 16px;
  text-align: center;
  color: #fff;
}
.ficha-h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dark, #8C6A2E), var(--gold-light, #FFD46A) 55%, var(--gold-medium, #D4AF37));
  transform: translateX(-50%) rotate(-.6deg);
}

.ficha .det-foto {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--s-papel);
  aspect-ratio: 3 / 2;
}
.ficha .det-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.ficha-fotos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.ficha-fotos > * { grid-column: span 2; }
/* Ninguna foto suelta: si sobran una o dos, las últimas van de dos en dos.
   (El guion de las fichas pone la clase según cuántas fotos hay.) */
.ficha-fotos--resto2 > :nth-last-child(-n + 2),
.ficha-fotos--resto1 > :nth-last-child(-n + 4) { grid-column: span 3; }

/* -- Al final, anterior / todas / siguiente, como botones de la casa ------ */

.ficha-vecinas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 56px 0 0;
}
.ficha-vecinas a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--s-tinta);
  text-decoration: none;
}
.ficha-vecinas a:hover { border-color: var(--s-oro); color: var(--s-oro-claro); }

/* -- Pantallas medianas ----------------------------------------------------- */

@media (max-width: 1100px) {
  .ficha-incluye { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha-incluye li { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
  .ficha-incluye li:nth-child(-n + 3) { border-top: 0; }
  .ficha-incluye li:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(255, 255, 255, .08) !important; }
  .ficha-incluye li:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* -- Móvil: la foto arriba, entera; el texto debajo, como las demás ------- */

@media (max-width: 760px) {
  .ficha-cab {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 clamp(16px, 3vw, 28px) 48px;
  }
  .ficha .det-foto.ficha-principal {
    position: relative;
    inset: auto;
    z-index: 0;
    order: -1;
    margin: 0 calc(-1 * clamp(16px, 3vw, 28px)) 24px;
    aspect-ratio: 3 / 2;
  }
  .ficha .ficha-principal::after { background: linear-gradient(0deg, var(--s-fondo) 0, rgba(10, 9, 13, 0) 90px); }
  .ficha-migas { margin-bottom: 14px; }
  .ficha-intro { font-size: 16.5px; }
  section[data-route] .ficha .btn { flex: 1 1 100%; }
  .ficha-incluye { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .ficha-incluye li { padding: 20px 12px; font-size: 14.5px; gap: 10px; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
  .ficha-incluye li:nth-child(-n + 2) { border-top: 0; }
  .ficha-incluye li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .08) !important; }
  .ficha-incluye svg { width: 24px; height: 24px; }
  section[data-route] .ficha .ficha-h2 { margin-top: 56px; }
  .ficha-fotos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ficha-fotos > * { grid-column: auto !important; }
  .ficha-fotos > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .ficha-incluye li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ficha-vecinas a { flex: 1 1 100%; justify-content: center; }
}


/* --------------------------------------------------------------------------
   2. El fondo — toda la web
   --------------------------------------------------------------------------
   Antes cada página apilaba cinco capas: foto de 800 px estirada a 1920
   (ampliada hasta 2,4 veces), un velo oscuro de 1.344 px, dos manchas de
   color (granate y morada) y un degradado. La foto se veía como barro y se
   cortaba a media página. Esas capas se han BORRADO de base, colors-gold-
   override, graduaciones, salas, ciudades, galeria-opiniones, portada,
   animaciones, lugares y arreglos-25sep.

   Ahora:
     · el fondo es negro liso;
     · las páginas con foto la enseñan en su cabecera, nítida (fichero de
       1800 px), oscurecida solo detrás del texto y fundida abajo;
     · las secciones se separan con una banda un punto más clara, no con
       rayas ni brillos. */

html, body { background: var(--s-fondo); }

/* -- Cabecera con foto ------------------------------------------------------ */

[data-route="eso"]     { --cabecera: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%204.webp'); }
[data-route="bach"]    { --cabecera: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2010.webp'); }
[data-route="fp"]      { --cabecera: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%203.webp'); }
[data-route="uni"]     { --cabecera: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%2079.webp'); }
[data-route="reserva"] { --cabecera: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%208.webp'); }
[data-route="locales"] { --cabecera: url('/recursos/GALERIA%20FOTOS/Fotos%20Graduaciones%20Madrid%205.webp'); }
[data-route="fincas"]  { --cabecera: url('/recursos/fincas/f1/f1-5.webp'); --cabecera-pos: center 75%; }

/* La cabecera empieza pegada al menú: sin franja negra encima de la foto */
section[data-route]:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"], [data-route="reserva"], [data-route="locales"], [data-route="fincas"]) {
  padding-top: var(--s-menu) !important;
}

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"], [data-route="reserva"]) > header.hero,
[data-route="locales"] > .hero-locales,
[data-route="fincas"] > .hero-fincas {
  position: relative;
  background:
    linear-gradient(90deg, rgba(10, 9, 13, .96) 0%, rgba(10, 9, 13, .88) 30%, rgba(10, 9, 13, .4) 60%, rgba(10, 9, 13, .1) 100%),
    linear-gradient(0deg, var(--s-fondo) 0, rgba(10, 9, 13, 0) 150px),
    var(--cabecera) var(--cabecera-pos, center 40%) / cover no-repeat,
    var(--s-fondo) !important;
}

/* Móvil: la foto arriba, entera y sin velo; el texto debajo, sobre negro */
@media (max-width: 760px) {
  :is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"], [data-route="reserva"]) > header.hero,
  [data-route="locales"] > .hero-locales,
  [data-route="fincas"] > .hero-fincas {
    background:
      linear-gradient(180deg, rgba(10, 9, 13, 0) 0, rgba(10, 9, 13, 0) 38vw, var(--s-fondo) 64vw),
      var(--cabecera) center top / 100% auto no-repeat,
      var(--s-fondo) !important;
  }
  section[data-route] > header.hero > .hero-inner { padding-top: 48vw !important; }
  section[data-route] > :is(.hero-locales, .hero-fincas) { padding-top: 48vw !important; }
}

/* -- Bandas: una sección sí, otra no --------------------------------------- */
/* border-image con desborde lateral pinta de lado a lado sin crear scroll. */

:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) > section.container:nth-of-type(2n),
body.tgm-portada section[data-route="home"] > section:nth-of-type(2n) {
  border-image: linear-gradient(var(--s-banda), var(--s-banda)) fill 0 / 0 / 0 100vmax !important;
}


/* --------------------------------------------------------------------------
   3. Iconos de línea en vez de emojis
   --------------------------------------------------------------------------
   Había 257 emojis; unos 140 hacían de icono (📸 🛡️ 📱 🎉…) dentro de
   círculos dorados. Cada móvil los pinta distinto y ninguno casa con el
   dorado: era lo que más «hecho deprisa» delataba. Ahora son un juego de
   unos 35 dibujos de línea en el propio HTML (`.ico`), que heredan el
   tamaño de letra del sitio donde viven. Las citas de /opiniones y los
   mensajes que se mandan por WhatsApp conservan sus emojis: son literales. */

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.14em;
}
.ico-wa { fill: currentColor; stroke: none; }

/* En los recuadros de icono: dorado y un punto más grande */
:is(.icon, .faq-icon, .servicio-icon, .feature-icon, .process-icon, .main-card-icon, .tgm-price-icon, .exito-icono) .ico {
  width: 24px;
  height: 24px;
  color: var(--s-oro);
  vertical-align: middle;
}

/* Dentro del texto (etiquetas, garantías, pie): un hueco a la derecha */
:is(.chip, .rsv-chip, .oklist, .site-footer, .btn, .tb-btn) .ico {
  margin-right: .5em;
  color: var(--s-oro);
}
:is(.btn, .tb-btn) .ico { width: 1.15em; height: 1.15em; color: inherit; }

/* Los círculos grandes de la portada (74 px) piden un icono algo mayor */
[data-route="home"] :is(.icon, .feature-icon, .process-icon) .ico { width: 28px; height: 28px; }

/* Fila de botones al final de las dudas de cada curso: el dorado se estiraba
   a la altura del verde (56 px). Cada botón a su alto. */
:is([data-route="eso"], [data-route="bach"], [data-route="fp"], [data-route="uni"]) .container > div:not([class]) > .btn {
  align-self: center;
  margin-top: 0 !important;
}


/* --------------------------------------------------------------------------
   4. Móvil: la primera pantalla de la portada sin botones repetidos
   --------------------------------------------------------------------------
   En el móvil la barra de abajo (Reservar fecha + WhatsApp) va siempre
   visible; el cartel repetía esos dos mismos botones encima. Se quedan los
   de la barra. Mientras está abierto el aviso de cookies la barra se oculta,
   y entonces el cartel conserva los suyos. */
@media (max-width: 700px) {
  body:not(:has(#tgm-cookies)) [data-route="home"] .hero-cta :is(.btn-primary, .btn-wa) {
    display: none !important;
  }
}