/* ---------------------------------------------------------------------------
   Ajustes de Melcón Estudio sobre el diseño de Eloy.
   Aparte del suyo a propósito: así se ve de un vistazo qué es de quién y, si
   él rehace el diseño, se vuelve a enganchar este archivo y ya está.
   --------------------------------------------------------------------------- */

/* El bloque del equipo se salía 35 px por la derecha en móvil y movía la página
   entera de lado. Las cuatro fotos van en abanico sobre un escenario con
   márgenes negativos; la de la derecha va al 70% y girada 7°, y al girar una
   caja su envoltura se ensancha. Se recorta aquí, en el contenedor interior, y
   nunca en html/body: eso provoca el "scroll infinito" de Safari en iPhone.
   Y clip en vez de hidden para no cortar las sombras por abajo. */
.people-stage { overflow-x: clip; }

/* Aviso de cookies: si algún día se usa el propio del diseño en vez de un
   plugin, los botones de aceptar y rechazar tienen que ser idénticos en tamaño
   Y color (norma de Rubén, 27/08/2026, y lo que pide la AEPD). */
.cookie-actions .cookie-equal,
.cookie-actions .cookie-equal.cookie-accept {
  color: #fff; background: #1a73e8; border-color: #1a73e8;
}

/* Página de gracias tras reservar (no existía en el diseño original). */
.gm-gracias { padding: 38px 26px 46px; text-align: center; }
.gm-gracias .gm-tic { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: #e8f0fe; color: #1a73e8; font-size: 30px; font-weight: 800; display: grid; place-items: center; }
.gm-gracias h1 { margin: 0 0 12px; font-size: 27px; line-height: 1.18; color: #0a0d13; }
.gm-gracias .gm-sub { margin: 0 auto 26px; max-width: 430px; color: #5b616e; font-size: 15px; line-height: 1.55; }
.gm-gracias ul { list-style: none; margin: 0 auto 30px; padding: 0; max-width: 430px; text-align: left; }
.gm-gracias ul li { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid #edf0f4;
  font-size: 14px; color: #1a2431; line-height: 1.45; }
.gm-gracias ul li:first-child { border-top: 0; }
.gm-gracias ul li span { color: #1a73e8; font-weight: 800; }
.gm-gracias .gm-volver { display: inline-block; background: #1a73e8; color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 11px; font-weight: 700; font-size: 15px; }
@media (max-width: 560px) { .gm-gracias h1 { font-size: 22px; } .gm-gracias { padding: 30px 18px 36px; } }

/* Capa del vídeo de intro (el botón "Ver vídeo"). En el diseño original lo
   montaba React; aquí se pinta con JavaScript propio y necesita su estilo. */
.gm-capa-video { position: fixed; inset: 0; z-index: 9999; background: rgba(8,11,18,.86);
  display: grid; place-items: center; padding: 20px; }
.gm-capa-caja { position: relative; width: min(920px, 100%); }
.gm-capa-caja video { width: 100%; border-radius: 14px; display: block; background: #000; }
.gm-capa-cerrar { position: absolute; top: -46px; right: 0; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: #fff; color: #0a0d13; font-size: 22px;
  line-height: 1; cursor: pointer; }
@media (max-width: 560px) { .gm-capa-cerrar { top: -42px; } }

/* Para poder arrastrar las webs de ejemplo con el dedo sin que el móvil se
   quede con el gesto para desplazar la página. */
.interactive-landing-stage { touch-action: pan-y; }

/* El aviso de cookies del plugin es fijo y se comía parte del botón "Ver vídeo"
   (medido el 28/08/2026: lo tapaba en PC y en móvil). Mientras el aviso esté a
   la vista, el botón se coloca por encima de él; el JavaScript calcula cuánto. */
.floating-video-launch { bottom: var(--gm-flotante-abajo, 24px); }
.floating-video-conversion { bottom: var(--gm-flotante-abajo, 24px); }

/* El botón azul "Ajustes Cookies" que deja el plugin caía justo encima de la
   píldora de "Ver vídeo". En pantalla ancha hay sitio de sobra a la izquierda,
   que además es donde lo pone media internet. En móvil no cabe al lado, así que
   se quedan apilados: cookies abajo y el vídeo justo encima (el JavaScript
   calcula cuánto subirlo). */
#gdpr-cookie-consent-show-again { left: 24px !important; right: auto !important; }
@media (max-width: 760px) {
  #gdpr-cookie-consent-show-again { left: auto !important; right: 12px !important; }
}

/* Los puntitos del carrusel ahora se pueden pulsar: que se note. */
.search-selector button { cursor: pointer; }

/* El logo y el "Volver a la web" de la página del Código pasaron de <button> a
   enlace de verdad (antes no navegaban a ninguna parte). El CSS de Eloy los
   estilaba como botones sin fondo; a un enlace hay que quitarle además el
   subrayado para que se vea igual. */
.hard-home-link { text-decoration: none; }

/* Índice de las páginas legales: los subapartados van sangrados y algo más
   pequeños, para que se distingan de los bloques grandes sin romper el diseño. */
.gm-sub { padding-left: 14px; opacity: .82; }
.gm-sub span { opacity: .7; }