/* ==========================================================================
   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(30px, 4.2vw, 46px);
  --t-h2: clamp(24px, 3vw, 34px);
  --t-h3: clamp(18px, 1.8vw, 22px);

  /* 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: 14px;
}

/* --------------------------------------------------------------------------
   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] .zone-nav-btn,
[data-route] .stage-btn {
  border-radius: var(--btn-radio) !important;
  padding: 13px 22px !important;
  font-size: 15px !important;
  min-height: 46px;
  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: 16px 30px !important;
  font-size: 17px !important;
  min-height: 54px;
}

/* --------------------------------------------------------------------------
   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%;
  }
}