﻿/*
 * EL REY ROJO — ESTILOS PROPIOS v3.1
 * Editar css/main.css para cambios futuros.
 */
/* Cinzel disponible en todas las páginas (fuente de títulos y logo) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/* ================================================================
   EL REY ROJO ESCAPE ROOM — ESTILOS PROPIOS
   v3.0 — Fuente única de verdad (consolida custom.css + wp-custom-css)
   ================================================================

   HOJAS DE ESTILO EXTERNAS QUE SE CARGAN ANTES QUE ESTE ARCHIVO
   ──────────────────────────────────────────────────────────────
   [NECESARIO]  /wp-includes/css/dist/block-library/style.min.css
                  → Estilos base de bloques Gutenberg (cover, buttons,
                    media-text, separator, video…). Necesario mientras
                    se usen bloques del editor de WordPress.

   [NECESARIO]  Google Fonts CDN
                  → Cinzel (títulos), Lora, Nunito Sans (cuerpo)

   [NECESARIO]  Font Awesome CDN + local SVG shim
                  → Iconos usados en el sitio

   [PRESCINDIBLE EN PRODUCCIÓN]  /wp-content/themes/brompton/style.css
                  → Tema hijo de WordPress. Todo lo relevante de este
                    archivo ya queda sobreescrito por los estilos de abajo.
                    Puede eliminarse si se comprueba que no rompe nada.

   [PRESCINDIBLE EN PRODUCCIÓN]  /wp-content/themes/varia/print.css
                  → Sólo afecta a impresión (media="print").
                    Se puede eliminar sin impacto visual en pantalla.

   NOTA: El bloque <style id="wp-custom-css"> inline en cada HTML
   es un duplicado antiguo de este archivo. Puede eliminarse de todos
   los HTML para reducir peso y eliminar conflictos.
   ================================================================ */


/* ================================================================
   1. VARIABLES DE MARCA
   ================================================================ */

:root {
	--rr-rojo:        #b91c1c;
	--rr-rojo-oscuro: #7f1d1d;
	--rr-dorado:      #d97706;
	--rr-blanco:      #fafafa;
	--rr-gris:        #a1a1aa;
}


/* ================================================================
   2. BASE — HTML y BODY
   ================================================================ */

html {
	font-size: 90%; /* Zoom general: todo se ve un poco más compacto */
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background: #0a0a0a !important;
	color: var(--rr-blanco) !important;
	font-family: 'Nunito Sans', sans-serif !important;
	line-height: 1.6 !important;
	overflow-x: hidden;
}


/* ================================================================
   3. ELEMENTOS DEL TEMA QUE SE OCULTAN
   ─────────────────────────────────────────────────────────────────
   Estos elementos existen en el HTML generado por WordPress/Brompton
   pero no forman parte del diseño propio del sitio.
   ================================================================ */

.entry-header          { display: none !important; }
.woocommerce-cart-count { display: none !important; }
.site-info             { display: none !important; }


/* ================================================================
   4. HEADER Y NAVEGACIÓN PRINCIPAL
   ================================================================ */

/* Quitar pseudoelementos decorativos del tema */
#masthead::before,
#masthead::after { content: none !important; }

/* Cabecera fija en la parte superior */
#masthead {
	border-bottom: 3px solid var(--rr-rojo) !important;
	border-top:    3px solid var(--rr-rojo) !important;
	background:    rgba(0,0,0,0.95) !important;
	padding:       1rem 0 !important;
	position:      fixed !important;
	top:   0 !important;
	left:  0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 200 !important;
	backdrop-filter: blur(8px);
	box-sizing: border-box !important;
}

/* Compensar la altura del menú fijo */
#page { padding-top: 80px !important; }

/* Título del sitio */
.site-title { margin: 0 !important; }
.site-title a {
	font-family:     'Cinzel', serif !important;
	font-size:       1.75rem !important;
	font-weight:     900 !important;
	letter-spacing:  0.15em !important;
	color:           var(--rr-rojo) !important;
	text-decoration: none !important;
}
.site-title a:hover { color: var(--rr-blanco) !important; }

/* Tagline / descripción */
.site-description {
	color:          var(--rr-gris) !important;
	font-size:      0.9rem !important;
	letter-spacing: 0.05em !important;
	margin:         0.15rem 0 0 !important;
}

/* Menú principal */
.main-navigation { margin-top: 0 !important; }
.main-navigation a,
.main-navigation .menu-item a {
	color:           var(--rr-blanco) !important;
	font-weight:     600 !important;
	font-size:       0.9rem !important;
	text-decoration: none !important;
}
.main-navigation a:hover,
.main-navigation .menu-item a:hover { color: var(--rr-rojo) !important; }

/* Móvil: logo izquierda, hamburguesa derecha, misma fila */
@media (max-width: 559px) {
	#masthead {
		flex-flow:       row nowrap !important;
		justify-content: space-between !important;
		align-items:     center !important;
		padding:         0.6rem 1rem !important;
	}
	#masthead .site-branding {
		order:      1 !important;
		text-align: left !important;
		width:      auto !important;
	}
	#masthead .main-navigation {
		order:      2 !important;
		text-align: right !important;
	}

	/* Panel del menú abierto en móvil */
	#masthead .main-navigation .menu-menu-de-paginas-container {
		position:   fixed !important;
		top:        80px !important;
		left:       0 !important;
		right:      0 !important;
		width:      100vw !important;
		background: rgba(0,0,0,0.97) !important;
		border-top: 2px solid var(--rr-rojo) !important;
		padding:    1.2rem 0 1.8rem !important;
		box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important;
		z-index:    500 !important;
		box-sizing: border-box !important;
	}
	#masthead .main-navigation .menu-menu-de-paginas-container ul {
		display:        flex !important;
		flex-direction: column !important;
		gap:            0 !important;
		list-style:     none !important;
		margin:         0 !important;
		padding:        0 !important;
	}
	#masthead .main-navigation .menu-menu-de-paginas-container > ul > li > a {
		display:     block !important;
		padding:     0.85rem 1.5rem !important;
		font-size:   1rem !important;
		border-bottom: 1px solid rgba(255,255,255,0.06) !important;
	}
	#masthead .main-navigation .menu-menu-de-paginas-container .sub-menu {
		position:   relative !important;
		top:        auto !important;
		left:       auto !important;
		background: rgba(185,28,28,0.08) !important;
		border:     none !important;
		box-shadow: none !important;
		padding:    0 !important;
	}
	#masthead .main-navigation .menu-menu-de-paginas-container .sub-menu a {
		padding-left: 2.5rem !important;
		font-size:    0.9rem !important;
	}
}

/* ── Botón hamburguesa moderno ── */
#toggle-menu {
	display:         flex !important;
	flex-direction:  column !important;
	justify-content: space-between !important;
	width:           38px !important;
	height:          30px !important;
	padding:         5px 6px !important;
	cursor:          pointer !important;
	background:      transparent !important;
	border:          1.5px solid rgba(255,255,255,0.18) !important;
	border-radius:   7px !important;
	transition:      border-color 0.25s, background 0.25s !important;
	text-transform:  none !important;
	box-sizing:      border-box !important;
}
#toggle-menu:hover {
	border-color: var(--rr-rojo) !important;
	background:   rgba(185,28,28,0.12) !important;
}
.rr-bar {
	display:          block;
	width:            100%;
	height:           2px;
	background:       var(--rr-blanco);
	border-radius:    2px;
	transform-origin: center;
	transition:       transform 0.3s ease, opacity 0.2s ease;
}
/* Estado abierto: barras → X */
#toggle:checked + #toggle-menu { border-color: var(--rr-rojo) !important; }
#toggle:checked + #toggle-menu .rr-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#toggle:checked + #toggle-menu .rr-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#toggle:checked + #toggle-menu .rr-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Ocultar botón hamburguesa en escritorio (va después del display:flex para ganar) */
@media (min-width: 560px) {
	#toggle-menu { display: none !important; }
}

/* Submenú desplegable en el header */
#masthead .main-navigation .sub-menu,
#masthead .main-navigation ul ul {
	list-style: none !important;
	margin:     0 !important;
	padding:    4px 0 0 !important;
	display:    none !important;
	position:   absolute !important;
	left: 0 !important;
	top:  100% !important;
	background:    #0a0a0a !important;
	border:        1px solid rgba(185,28,28,0.35) !important;
	border-radius: 6px !important;
	min-width:     13rem !important;
	z-index:       300 !important;
	box-shadow:    0 8px 24px rgba(0,0,0,0.6) !important;
}
#masthead .main-navigation .menu-item-has-children {
	position:       relative !important;
	padding-bottom: 4px !important;
}
#masthead .main-navigation .menu-item-has-children:hover > .sub-menu,
#masthead .main-navigation .menu-item-has-children:focus-within > .sub-menu {
	display: block !important;
}
#masthead .main-navigation .sub-menu li {
	margin:  0 !important;
	padding: 0 !important;
}
#masthead .main-navigation .sub-menu a {
	display:        block !important;
	padding:        0.5rem 0.9rem !important;
	font-size:      0.82rem !important;
	font-weight:    600 !important;
	color:          var(--rr-blanco) !important;
	letter-spacing: 0.03em !important;
	transition:     color 0.2s, background 0.2s !important;
	border-radius:  0 !important;
	background:     transparent !important;
}
#masthead .main-navigation .sub-menu a:hover {
	color:      var(--rr-rojo) !important;
	background: rgba(185,28,28,0.08) !important;
}

/* Ítem activo en el submenú */
#masthead .main-navigation .sub-menu .current-menu-item > a,
#masthead .main-navigation .sub-menu .current_page_item > a {
	color: var(--rr-rojo) !important;
}

/* Quitar guiones heredados del tema */
#masthead .main-navigation .sub-menu .menu-item a::before {
	content: none !important;
	display: none !important;
}

/* Indicador visual de submenú (▾) */
#masthead .main-navigation .menu-item-has-children > a::after {
	content:      ' \25BE';
	font-size:    0.65em;
	opacity:      0.7;
	margin-left:  0.2em;
	vertical-align: middle;
	transition:   transform 0.2s;
	display:      inline-block;
}
#masthead .main-navigation .menu-item-has-children.sub-menu-open > a::after,
#masthead .main-navigation .menu-item-has-children:hover > a::after,
#masthead .main-navigation .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

/* Submenú abierto por JS en móvil (clase añadida dinámicamente) */
#masthead .main-navigation .menu-item-has-children.sub-menu-open > .sub-menu {
	display:       block !important;
	position:      static !important;
	min-width:     unset !important;
	border:        none !important;
	border-left:   2px solid rgba(185,28,28,0.4) !important;
	border-radius: 0 !important;
	box-shadow:    none !important;
	background:    rgba(185,28,28,0.05) !important;
	padding:       0.25rem 0 0.5rem 0.75rem !important;
	margin-top:    0.25rem !important;
}


/* ================================================================
   5. CONTENIDO PRINCIPAL
   ================================================================ */

.entry-content {
	max-width:    1100px !important;
	margin-left:  auto !important;
	margin-right: auto !important;
	padding:      0 1.5rem !important;
}

/* Bloques alignfull a ancho completo */
.entry-content > hr.alignfull,
.entry-content > .alignfull {
	width:        100vw !important;
	max-width:    100vw !important;
	margin-left:  calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing:   border-box;
}

/* Portada de Alicia: quitar margen superior del tema */
.portadaalicia { margin-top: -5rem !important; }

/* Quitar overlay del tema en la portada de Alicia */
.portadaalicia .wp-block-cover__background.has-background-dim {
	background-color: transparent !important;
}


/* ================================================================
   6. BLOQUES GUTENBERG — PERSONALIZACIÓN
   ================================================================ */

/* ── Cover ─────────────────────────────── */
.wp-block-cover { overflow: hidden !important; }
.wp-block-cover .wp-block-cover__image-background {
	position:          absolute !important;
	inset:             0 !important;
	background-size:   cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.wp-block-cover .wp-block-cover__background     { z-index: 0 !important; }
.wp-block-cover .wp-block-cover__inner-container { z-index: 1 !important; position: relative !important; }

/* Video dentro de un cover (p.ej. página Alicia) */
.wp-block-cover .wp-block-video             { max-width: 100% !important; }
.wp-block-cover .wp-block-video video {
	width:    100% !important;
	max-width: 100% !important;
	height:   auto !important;
	display:  block !important;
}

/* ── Separadores ───────────────────────── */
hr.wp-block-separator {
	height:     2px !important;
	width:      100% !important;
	background: linear-gradient(90deg, transparent, var(--rr-rojo), var(--rr-dorado), var(--rr-rojo), transparent) !important;
	opacity:    0.8 !important;
	margin:     2.5rem 0 !important;
	border:     none !important;
}

/* ── Media-text (tarjetas de experiencias) ── */
.wp-block-media-text.alignwide {
	background:    rgba(255,255,255,0.03) !important;
	border:        1px solid rgba(185,28,28,0.3) !important;
	border-radius: 8px !important;
	padding:       1.5rem !important;
	margin:        2rem 0 !important;
	transition:    border-color 0.25s, box-shadow 0.25s !important;
}
.wp-block-media-text.alignwide:hover {
	border-color: rgba(185,28,28,0.6) !important;
	box-shadow:   0 0 30px rgba(185,28,28,0.15) !important;
}
.wp-block-media-text .wp-block-media-text__content { padding: 1rem 1.5rem !important; }
.wp-block-media-text .has-medium-font-size {
	font-family: 'Cinzel', serif !important;
	color:       var(--rr-blanco) !important;
	font-size:   1.2rem !important;
}
.wp-block-media-text p { color: var(--rr-gris) !important; }

/* ── Botones ───────────────────────────── */
.entry-content .wp-block-buttons,
.wp-block-buttons.is-content-justification-center,
.wp-container-core-buttons-is-layout-a89b3969 {
	justify-content: center !important;
	margin-left:     auto !important;
	margin-right:    auto !important;
}
.wp-block-button__link.wp-element-button {
	background:     var(--rr-rojo) !important;
	color:          var(--rr-blanco) !important;
	border:         none !important;
	padding:        0.75rem 1.75rem !important;
	font-weight:    700 !important;
	letter-spacing: 0.05em !important;
	border-radius:  4px !important;
	transition:     background 0.2s, transform 0.2s !important;
}
.wp-block-button__link.wp-element-button:hover {
	background: var(--rr-rojo-oscuro) !important;
	transform:  translateY(-2px) !important;
}

/* ── Columnas ──────────────────────────── */
.wp-block-columns.alignwide .wp-block-column { padding: 1rem; }
.wp-block-columns.alignwide .wp-block-group {
	background:    rgba(255,255,255,0.02);
	border-left:   4px solid var(--rr-rojo);
	padding:       1.25rem;
	border-radius: 0 8px 8px 0;
	margin-bottom: 1rem;
}
.wp-block-columns.are-vertically-aligned-center.alignwide {
	padding:    2rem 0 !important;
	border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── Video independiente ───────────────── */
.entry-content .wp-block-video {
	max-width:    640px !important;
	margin-left:  auto !important;
	margin-right: auto !important;
}
.entry-content .wp-block-video video {
	width:   100% !important;
	height:  auto !important;
	display: block !important;
}

/* ── Encabezados de sección ────────────── */
.entry-content .wp-block-heading.has-text-align-center {
	font-family:    'Cinzel', serif !important;
	font-size:      clamp(1.5rem, 4vw, 2.25rem) !important;
	font-weight:    700 !important;
	letter-spacing: 0.12em !important;
	color:          var(--rr-blanco) !important;
	text-transform: uppercase !important;
	margin:         2.5rem 0 1.5rem !important;
	text-align:     center !important;
}
.entry-content h2 {
	text-align:   center !important;
	margin-left:  auto !important;
	margin-right: auto !important;
}
.entry-content h3.wp-block-heading.has-medium-font-size {
	text-align:   center !important;
	margin-left:  auto !important;
	margin-right: auto !important;
	display:      block !important;
}

/* ── Group block (testimonios en layout antiguo) ── */
.wp-block-group__inner-container .wp-block-heading.has-small-font-size {
	font-family:   'Cinzel', serif;
	color:         var(--rr-dorado) !important;
	font-size:     0.95rem !important;
	margin-bottom: 0.5rem;
}
.wp-block-group__inner-container .has-small-font-size em,
.wp-block-group__inner-container .has-ast-global-color-3-color {
	color:      var(--rr-gris) !important;
	font-style: italic;
}


/* ================================================================
   7. SLIDER DE TESTIMONIOS (componente propio .rr-*)
   ================================================================ */

/* Contenedor al 75 % del viewport, centrado */
.entry-content > .rr-testimonios-slider,
.entry-content > .rr-testimonios-dots {
	position:   relative;
	left:       50%;
	transform:  translateX(-50%);
	width:      75vw;
	max-width:  75vw;
	box-sizing: border-box;
}
.entry-content > .rr-testimonios-slider { margin-bottom: 2.5rem; }
.entry-content > .rr-testimonios-dots   { margin-bottom: 2rem; }

.rr-testimonios-slider {
	position:   relative;
	width:      100% !important;
	max-width:  none !important;
	padding:    0 2rem;
	box-sizing: border-box;
}
.rr-testimonios-dots {
	display:   flex;
	justify-content: center;
	width:     100% !important;
	max-width: none !important;
}
.rr-testimonios-viewport {
	overflow: hidden;
	width:    100%;
}
.rr-testimonios-slider-inner {
	display:    flex;
	flex-wrap:  nowrap;
	gap:        1.25rem;
	align-items: stretch;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Tarjeta: 1 por fila en móvil, 4 en escritorio */
.rr-testimonios-slider-inner .rr-testimonio {
	flex:      0 0 calc(100% - 1.25rem);
	min-width: 0;
	min-height: 160px;
}
@media (min-width: 960px) {
	.rr-testimonios-slider-inner .rr-testimonio {
		flex: 0 0 calc(25% - 0.95rem);
	}
}

/* Tarjeta de testimonio */
.rr-testimonio {
	background:    rgba(255,255,255,0.02);
	border:        1px solid rgba(185,28,28,0.35);
	border-top:    4px solid var(--rr-rojo);
	padding:       1.25rem 1.75rem;
	border-radius: 8px;
	text-align:    center;
}
.rr-testimonio h6 {
	font-family:    'Cinzel', serif;
	color:          var(--rr-dorado);
	font-size:      0.95rem;
	margin:         0 0 0.5rem;
	text-align:     center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.rr-testimonio-stars {
	color:          #fbbf24;
	font-size:      0.95rem;
	letter-spacing: 0.15em;
	margin:         0 0 0.5rem;
	text-align:     center;
}
.rr-testimonio p {
	font-size:  0.9rem;
	color:      var(--rr-gris);
	font-style: italic;
	text-align: center;
	margin:     0;
}

/* Flechas del slider */
.rr-arrow {
	position:      absolute;
	top:           50%;
	transform:     translateY(-50%);
	width:         32px;
	height:        32px;
	border-radius: 999px;
	border:        1px solid rgba(148,163,184,0.7);
	background:    rgba(15,23,42,0.75);
	color:         var(--rr-blanco);
	display:       flex;
	align-items:   center;
	justify-content: center;
	cursor:        pointer;
	font-size:     1.2rem;
	transition:    background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.rr-arrow:hover {
	background: rgba(185,28,28,0.9);
	box-shadow: 0 0 18px rgba(185,28,28,0.5);
	transform:  translateY(-50%) translateY(-1px);
}
.rr-arrow.rr-prev { left:  0; margin-left:  -1.25rem; }
.rr-arrow.rr-next { right: 0; margin-right: -1.25rem; }

/* Puntos de navegación */
.rr-testimonios-dots {
	display:       flex;
	justify-content: center;
	gap:           0.4rem;
	margin-bottom: 2rem;
}
.rr-testimonios-dots button {
	width:         9px;
	height:        9px;
	border-radius: 999px;
	border:        none;
	background:    rgba(148,163,184,0.6);
	padding:       0;
	cursor:        pointer;
	transition:    background 0.2s, transform 0.2s, width 0.2s;
}
.rr-testimonios-dots button.rr-active {
	background: var(--rr-rojo);
	width:      18px;
	transform:  translateY(-1px);
}


/* ================================================================
   8. FOOTER (#colophon + clases .rr-footer-*)
   ================================================================ */

#colophon {
	display:     block !important;
	background:  #050505 !important;
	border-top:  3px solid var(--rr-rojo) !important;
	padding:     2.5rem 1.5rem 1.5rem !important;
	margin-top:  0 !important;
	overflow:    visible !important;
}
.rr-footer-inner,
.rr-footer-top,
.rr-footer-nav,
.rr-footer-nav li { overflow: visible !important; }

/* Submenú del footer legacy (footer-navigation) */
.footer-navigation .footer-menu .sub-menu {
	display:    none;
	position:   absolute;
	bottom:     100%;
	left:       0;
	top:        auto;
	background: #0a0a0a !important;
	border:        1px solid rgba(185,28,28,0.35);
	border-radius: 6px;
	min-width:     13rem;
	padding:       0;
	list-style:    none;
	z-index:       300;
	box-shadow:    0 8px 24px rgba(0,0,0,0.6);
}
.footer-navigation .footer-menu li:hover > .sub-menu,
.footer-navigation .footer-menu li:focus-within > .sub-menu { display: block; }
.footer-navigation .footer-menu .sub-menu li { margin: 0 !important; padding: 0 !important; }
.footer-navigation .footer-menu .sub-menu a {
	display:        block !important;
	padding:        0.45rem 0.85rem !important;
	font-size:      0.8rem !important;
	font-weight:    900 !important;
	color:          var(--rr-rojo) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	transition:     color 0.2s !important;
}
.footer-navigation .footer-menu .sub-menu a:hover { color: var(--rr-blanco) !important; }

/* Contenedor del footer propio */
.rr-footer-inner {
	max-width: 960px;
	margin:    0 auto;
}

/* Fila superior: logo | nav | rrss */
.rr-footer-top {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             1.5rem;
	padding-bottom:  1.5rem;
	border-bottom:   1px solid rgba(255,255,255,0.07);
	margin-bottom:   1.25rem;
}

/* Logo */
.rr-footer-logo img {
	width:         72px;
	height:        72px;
	border-radius: 8px;
	opacity:       0.85;
	transition:    opacity 0.2s;
}
.rr-footer-logo:hover img { opacity: 1; }

/* Navegación central del footer */
.rr-footer-nav ul {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             0.35rem 1.25rem;
	list-style:      none;
	margin:          0;
	padding:         0;
}
.rr-footer-nav li { position: relative; }
.rr-footer-nav a {
	color:          var(--rr-gris);
	text-decoration: none;
	font-size:      0.85rem;
	letter-spacing: 0.03em;
	transition:     color 0.2s;
}
.rr-footer-nav a:hover                   { color: var(--rr-blanco); }
.rr-footer-nav .current-menu-item > a    { color: var(--rr-rojo); }

/* Submenú del footer propio */
.rr-footer-nav .sub-menu {
	display:       none;
	position:      absolute;
	bottom:        100%;
	left:          0;
	background:    #0a0a0a;
	border:        1px solid rgba(185,28,28,0.35);
	border-radius: 6px;
	min-width:     13rem;
	padding:       0.25rem 0;
	list-style:    none;
	z-index:       9999;
	margin-bottom: 0;
	box-shadow:    0 -8px 24px rgba(0,0,0,0.7);
}

/* Pseudo-elemento que rellena el hueco entre el enlace y el popup */
.rr-footer-nav li:has(> .sub-menu)::after {
	content:  '';
	position: absolute;
	bottom:   100%;
	left:     0;
	width:    100%;
	height:   0.6rem;
	display:  block;
}

/* Ampliar zona activa del ítem padre */
.rr-footer-nav li:has(> .sub-menu) > a {
	padding: 0.4rem 0.5rem;
}

.rr-footer-nav li:hover > .sub-menu,
.rr-footer-nav li:focus-within > .sub-menu { display: block; }
.rr-footer-nav .sub-menu a {
	display: block;
	padding: 0.45rem 0.85rem;
	font-size: 0.8rem;
}

/* Iconos de redes sociales */
.rr-footer-rrss {
	display:     flex;
	gap:         0.65rem;
	align-items: center;
}
.rr-footer-rrss a {
	opacity:    0.75;
	transition: opacity 0.2s, transform 0.2s;
}
.rr-footer-rrss a:hover {
	opacity:   1;
	transform: translateY(-2px);
}
.rr-footer-rrss img {
	width:      36px;
	height:     36px;
	object-fit: contain;
	display:    block;
}

/* Fila inferior: copyright + privacidad */
.rr-footer-bottom {
	display:         flex;
	justify-content: center;
	align-items:     center;
	flex-wrap:       wrap;
	gap:             0.5rem 1.5rem;
}
.rr-footer-copy {
	font-size: 0.78rem;
	color:     var(--rr-gris);
}
.privacy-policy-link {
	font-size:       0.78rem;
	color:           var(--rr-gris);
	text-decoration: none;
	transition:      color 0.2s;
}
.privacy-policy-link:hover { color: var(--rr-rojo); }

/* RRSS legacy (clase usada en bloques inline antiguos) */
.rrssclass {
	width:           10rem;
	display:         flex;
	justify-content: space-around !important;
	margin:          0 auto;
	gap:             0.5rem;
}
.rrssclass a             { opacity: 0.85; transition: opacity 0.2s; }
.rrssclass a:hover       { opacity: 1; }
.rrssclass img           { width: 36px; height: 36px; object-fit: contain; }


/* ================================================================
   9. PÁGINAS ESPECÍFICAS
   ================================================================ */

/* Compensar el header fijo al saltar a anclas internas */
[id] {
	scroll-margin-top: 100px;
}


/* ── Página principal / experiencias (#post-9418) ── */

#post-9418 { color: var(--rr-blanco) !important; }

/* Hero: imagen de portada contenida en altura */
#post-9418 .entry-content > figure.wp-block-image.size-full:first-of-type {
	position:   relative !important;
	margin:     -0.5rem -1.5rem 2.5rem !important;
	max-width:  none !important;
	height:     42vh !important;
	max-height: 42vh !important;
	border-radius: 0 !important;
	overflow:   hidden !important;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6) !important;
}
#post-9418 .entry-content > figure.wp-block-image.size-full:first-of-type::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
	pointer-events: none;
}
#post-9418 .entry-content > figure.wp-block-image.size-full:first-of-type img {
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	display:    block !important;
}

/* Tagline bajo el hero */
.entry-content > p.has-text-align-center:first-of-type {
	font-size:    1.25rem !important;
	color:        var(--rr-gris) !important;
	max-width:    640px !important;
	margin-left:  auto !important;
	margin-right: auto !important;
	line-height:  1.7 !important;
}

/* H2 de la portada */
#post-9418 .entry-content h2.wp-block-heading.has-text-align-center {
	text-align:   center !important;
	margin-left:  auto !important;
	margin-right: auto !important;
	display:      block !important;
}

/* Columna de icono en layout de introducción */
#post-9418 > div > div.wp-block-columns.are-vertically-aligned-center.has-normal-font-size.is-layout-flex.wp-container-14 > div > figure { width: 20%; }

/* Texto blanco en la columna de descripción */
#post-9418 > div > div.wp-block-columns.are-vertically-aligned-center.is-layout-flex.wp-container-14 > div:nth-child(1) > p { color: white; }

/* Color de lista de la portada */
#post-9418 > div > div > div > ul:nth-child(3) > li { color: var(--rr-rojo); }

/* Iconos con fondo blanco y tamaño reducido */
.cuatroiconos > div > figure > img,
.wp-image-9901 {
	background:    white;
	border-radius: 10%;
	width:         64px !important;
	height:        64px !important;
	object-fit:    contain;
}

/* Centrar la imagen de duración (wp-image-9901) dentro de su columna de galería */
figure:has(> .wp-image-9901),
.wp-block-gallery:has(.wp-image-9901) {
	display:         flex !important;
	justify-content: center !important;
	align-items:     center !important;
}

/* Primer párrafo de la sección de cuatro cosas */
.cuatrocosas > div > p:first-child { color: var(--rr-rojo); }

/* ── Página de Contacto (#post-45) ── */

/* Cabecera visible con separación respecto al menú fijo */
#post-45 .entry-header,
body.page-id-45 .entry-header {
	display:          block !important;
	text-align:       center;
	padding:          3.5rem 1.5rem 2rem !important;
	background:       linear-gradient(180deg, rgba(185,28,28,0.08) 0%, transparent 100%);
	border-bottom:    1px solid rgba(185,28,28,0.2);
	margin-bottom:    0 !important;
	width:            100vw !important;
	max-width:        100vw !important;
	margin-left:      calc(50% - 50vw) !important;
	margin-right:     calc(50% - 50vw) !important;
	box-sizing:       border-box !important;
	position:         relative !important;
	left:             0 !important;
}

/* Anular max-width del tema en el header de contacto */
#post-45 .entry-header.responsive-max-width,
body.page-id-45 .entry-header.responsive-max-width {
	max-width: 100vw !important;
}

/* Título */
#post-45 .entry-title,
body.page-id-45 .entry-title {
	font-family:    'Cinzel', serif !important;
	font-size:      clamp(2rem, 5vw, 3rem) !important;
	font-weight:    700 !important;
	letter-spacing: 0.15em !important;
	color:          var(--rr-blanco) !important;
	text-transform: uppercase !important;
	margin:         0 0 0.5rem !important;
}


/* Contenedor del contenido */
#post-45 .entry-content,
body.page-id-45 .entry-content {
	max-width:    100vw !important;
	width:        100vw !important;
	margin-left:  calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding:      2.5rem calc(50vw - 320px) 3rem !important;
	text-align:   center !important;
	box-sizing:   border-box !important;
}

/* Todas las preguntas (textorojo dentro de párrafo) */
#post-45 .entry-content p .textorojo,
body.page-id-45 .entry-content p .textorojo {
	font-family:    'Cinzel', serif !important;
	font-size:      0.95rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color:          var(--rr-dorado) !important;
}

/* Tarjeta genérica para bloques de respuesta */
#post-45 .entry-content > p,
body.page-id-45 .entry-content > p {
	color:       rgba(250,250,250,0.85);
	line-height: 1.75;
	margin:      0.5rem 0 !important;
}

/* Párrafos de pregunta (contienen .textorojo) */
#post-45 .entry-content > p:has(.textorojo),
body.page-id-45 .entry-content > p:has(.textorojo) {
	margin-top:  2rem !important;
	padding-top: 1.5rem !important;
	border-top:  1px solid rgba(185,28,28,0.25) !important;
}

/* Primer elemento: sin borde superior */
#post-45 .entry-content > p:first-child:has(.textorojo),
body.page-id-45 .entry-content > p:first-child:has(.textorojo) {
	margin-top:  0 !important;
	padding-top: 0 !important;
	border-top:  none !important;
}

/* Links de contacto (email, teléfono, mapa) */
#post-45 .entry-content a,
body.page-id-45 .entry-content a {
	color:           var(--rr-blanco) !important;
	text-decoration: none !important;
	border-bottom:   1px solid rgba(185,28,28,0.5);
	transition:      color 0.2s, border-color 0.2s;
	padding-bottom:  1px;
}
#post-45 .entry-content a:hover,
body.page-id-45 .entry-content a:hover {
	color:        var(--rr-rojo) !important;
	border-color: var(--rr-rojo);
}

/* Link del mapa como botón */
#post-45 .entry-content p:last-of-type a,
body.page-id-45 .entry-content p:last-of-type a {
	display:         inline-flex !important;
	align-items:     center !important;
	gap:             0.5rem !important;
	padding:         0.65rem 1.5rem !important;
	background:      rgba(185,28,28,0.15) !important;
	border:          1px solid rgba(185,28,28,0.4) !important;
	border-bottom:   1px solid rgba(185,28,28,0.4) !important;
	border-radius:   6px !important;
	font-weight:     600 !important;
	transition:      background 0.2s, transform 0.2s, box-shadow 0.2s !important;
	margin-top:      0.5rem !important;
}
#post-45 .entry-content p:last-of-type a:hover,
body.page-id-45 .entry-content p:last-of-type a:hover {
	background:  rgba(185,28,28,0.35) !important;
	transform:   translateY(-2px) !important;
	box-shadow:  0 4px 16px rgba(185,28,28,0.3) !important;
	color:       var(--rr-blanco) !important;
}

/* Separador dentro del contenido */
#post-45 .entry-content > hr,
body.page-id-45 .entry-content > hr {
	margin-top:    1rem !important;
	margin-bottom: 1rem !important;
}

/* ── Página Alicia (#post-11687) ── */

/* Portada: altura generosa para ver bien la imagen */
.portadaalicia {
	min-height: 70vh !important;
	max-height: 85vh !important;
	height:     80vh !important;
}
.portadaalicia .wp-block-cover__image-background {
	background-size:     cover !important;
	background-position: center 30% !important;
}

/* Título principal en la portada: tipografía de marca */
.portadaalicia p.has-large-font-size {
	font-family:    'Cinzel', serif !important;
	font-size:      clamp(1.8rem, 5vw, 3rem) !important;
	font-weight:    700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color:          var(--rr-blanco) !important;
	text-shadow:    0 2px 20px rgba(0,0,0,0.8) !important;
	margin-bottom:  0.5rem !important;
}

/* Badge "Experiencia extrema": oculto */
.portadaalicia p.has-medium-font-size {
	display: none !important;
}

/* Subtítulo/tagline de la portada */
.portadaalicia p.has-normal-font-size {
	color:       rgba(250,250,250,0.85) !important;
	font-size:   1.05rem !important;
	font-style:  italic !important;
	font-weight: 400 !important;
	text-shadow: 0 1px 8px rgba(0,0,0,0.7) !important;
	margin-top:  0.5rem !important;
}

/* Segunda sección: cover con vídeo + historia */
#post-11687 .entry-content > .wp-block-cover:not(.portadaalicia) {
	padding: 3rem 2rem !important;
}

/* Grid: vídeo izquierda | texto derecha */
#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-cover__inner-container {
	display:               grid !important;
	grid-template-columns: 380px 1fr !important;
	gap:                   2rem !important;
	align-items:           start !important;
	max-width:             960px !important;
	margin:                0 auto !important;
}

/* Columnas del vídeo: columna izquierda, abarca todas las filas */
#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-columns {
	grid-column: 1 !important;
	grid-row:    1 / 10 !important;
	display:     block !important;
}

/* Columnas espaciadoras del 25%: ocultas */
#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-column[style*="flex-basis:25%"] {
	display: none !important;
}

/* Columna del vídeo: ocupa el ancho completo de su celda */
#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-column[style*="flex-basis:50%"] {
	width:    100% !important;
	flex:     none !important;
	max-width: none !important;
	margin:   0 !important;
}

/* Vídeo */
#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-video video {
	width:         100% !important;
	border-radius: 8px !important;
	box-shadow:    0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Párrafos de texto: columna derecha */
#post-11687 .wp-block-cover:not(.portadaalicia) p {
	grid-column: 2 !important;
}

/* Responsive: apilado en móvil */
@media (max-width: 700px) {
	#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-cover__inner-container {
		grid-template-columns: 1fr !important;
	}
	#post-11687 .wp-block-cover:not(.portadaalicia) .wp-block-columns {
		grid-row: 1 !important;
	}
	#post-11687 .wp-block-cover:not(.portadaalicia) p {
		grid-column: 1 !important;
	}
}

/* Texto de la historia: legible, no todo negrita */
#post-11687 .wp-block-cover:not(.portadaalicia) p strong {
	font-weight:  400 !important;
	color:        rgba(250,250,250,0.9) !important;
	font-size:    1rem !important;
	line-height:  1.8 !important;
}
#post-11687 .wp-block-cover:not(.portadaalicia) p.has-text-align-center strong {
	font-style: italic !important;
	color:      rgba(250,250,250,0.75) !important;
}

/* ── Página de Información (#post-518) ── */

#post-518 .entry-content > h1.wp-block-heading.has-text-align-center,
body.page-id-518 .entry-content > h1.wp-block-heading.has-text-align-center {
	text-align:   center !important;
	display:      block !important;
	width:        100% !important;
	margin-left:  auto !important;
	margin-right: auto !important;
}


/* ================================================================
   10. CLASES DE UTILIDAD
   ================================================================ */

/* Textos y colores */
.textorojo  { color: var(--rr-rojo) !important; }
.temporal   { color: var(--rr-rojo) !important; }
.h2julia    { color: var(--rr-rojo) !important; }
.llama      { font-size: 1.5rem !important; }

/* Recordatorio */
.recordatorio   { font-size: 0.8rem !important; }
.recordatorio p { margin: 1rem !important; }

/* Vídeo de Julia */
.videojulia { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Vídeo de Anier */
.video_anier { max-width: 50% !important; }

/* Sección de paralaje */
.paralaje {
	background-image:      url("../images/2019-07-Cabeza-Escape-Room-Terror-El-Rey-Rojo-La-casa-en-piezas-683x1024.jpg");
	height:                100%;
	background-attachment: fixed;
	background-position:   center;
	background-repeat:     no-repeat;
	background-size:       cover;
	margin-left:           -410px;
	margin-right:          -410px;
}
.contenido-paralaje { padding-left: 50px; padding-top: 50px; padding-bottom: 50px; }

/* Modal del plugin Booked (si sigue activo) */
body > div.booked-modal > div.bm-window > div { color: black !important; }

/* Imagen de Alicia (recorte de tamaño) */
img.wp-image-11740 {
	max-width: 320px !important;
	height:    auto !important;
	margin:    0 auto !important;
	display:   block !important;
}


/* ================================================================
   11. SECCIÓN SÍGUENOS (redes sociales)
   ================================================================ */

.rr-social-section {
	max-width:  1100px;
	margin:     2rem auto 3rem;
	padding:    0 1.5rem;
	text-align: center;
}

.rr-social-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   2rem;
	align-items:           start;
	margin-top:            1.5rem;
}

.rr-ig-wrapper,
.rr-fb-wrapper {
	display:         flex;
	justify-content: center;
	align-items:     flex-start;
	width:           100%;
}

.rr-ig-wrapper .instagram-media {
	border-radius: 8px !important;
	width:         100% !important;
	max-width:     100% !important;
	margin:        0 !important;
}

.rr-fb-wrapper .fb-page,
.rr-fb-wrapper .fb-page span,
.rr-fb-wrapper .fb-page iframe {
	width:         100% !important;
	border-radius: 8px;
}

@media (max-width: 700px) {
	.rr-social-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   12. RESPONSIVE
   ================================================================ */

@media (max-width: 736px) {
	/* Ocultar sección de 4 iconos en móvil */
	.cuatroiconos { display: none !important; }

	/* Centrar texto en bloques media-text apilados */
	.wp-block-media-text.alignwide.is-stacked-on-mobile { text-align: center !important; }

	/* Márgenes del hero en móvil */
	#post-9418 .entry-content > figure.wp-block-image.size-full:first-of-type {
		margin-left:  -1rem !important;
		margin-right: -1rem !important;
	}
}

@media (max-width: 600px) {
	/* Footer centrado en móvil */
	.rr-footer-top { justify-content: center; text-align: center; }
}
