/* ================================================================
   NOVIEMBRE EXTREMO — estilos de la campaña
   ─────────────────────────────────────────────────────────────────
   Se carga SÓLO en /noviembre-extremo/, después de /custom.css.
   Todo va prefijado con .ne- para no afectar al resto del sitio.
   Campaña temporal: al terminar, basta con borrar este archivo,
   la carpeta /noviembre-extremo/ y su entrada en custom.js.
   ================================================================ */

.ne-page {
	--ne-negro:   #060606;
	--ne-carbon:  #101010;
	--ne-borde:   #2a1010;
	--ne-rojo:    #c1121f;
	--ne-rojo-cl: #e03131;
	--ne-hueso:   #efe7dd;
	--ne-gris:    #9a9a9a;
	--ne-azul:    #4d90b8;   /* acento pack de 2, como en el cartel */
	--ne-ambar:   #d97706;   /* acento pack de 3 */

	color: var(--ne-hueso);
	font-family: 'Nunito Sans', sans-serif;
}

/* El contenido de esta página va a ancho completo.
   custom.css limita .entry-content a 1100px con !important, así que aquí
   hace falta !important + más especificidad para liberarlo. */
body.ne-body .entry-content {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.ne-body #content,
body.ne-body #primary,
body.ne-body .site-main {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* El tema (brompton) limita cada hijo de .entry-content a 750px con un selector
   de altísima especificidad (.entry-content > :not(...):not(...)…), así que aquí
   hace falta !important para que las secciones vayan a sangre. */
body.ne-body .entry-content > * {
	max-width: none !important;
	margin: 0 !important;
}

.ne-wrap { max-width: 1500px; margin: 0 auto; padding: 0 28px; }

.ne-page h1, .ne-page h2, .ne-page h3, .ne-page .ne-num {
	font-family: 'Cinzel', serif;
	letter-spacing: .02em;
	line-height: 1.1;
	margin: 0;
}

.ne-section { padding: 72px 0; border-top: 1px solid var(--ne-borde); }
.ne-section--plain { background: var(--ne-negro); }
.ne-section--carbon { background: var(--ne-carbon); }

.ne-section-title {
	text-align: center;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	text-transform: uppercase;
	margin-bottom: 8px !important;
}
.ne-section-title em { font-style: normal; color: var(--ne-rojo); }

.ne-section-sub {
	text-align: center;
	color: var(--ne-gris);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .82rem;
	margin: 0 0 48px;
}

/* ── Regla decorativa ─────────────────────────────────────────── */
.ne-rule {
	width: 100%; max-width: 520px; height: 1px; margin: 18px auto;
	background: linear-gradient(90deg, transparent, var(--ne-rojo), transparent);
	border: 0;
}

/* ================================================================
   HERO
   ================================================================ */
.ne-hero { position: relative; background: #000; padding-top: 34px; }

/* El cartel se muestra completo: lleva su propia tipografía y recortarlo
   se come el título y los reclamos.
   La figura calca exactamente la caja renderizada de la imagen (mismo ancho y
   misma relación de aspecto 1717x916) para poder posicionar encima el hotspot
   del botón "RESERVA AHORA" que va dibujado en el propio cartel. */
.ne-hero-figure {
	position: relative;
	display: block;
	margin: 0 auto;
	width: min(1717px, 100%, calc(76vh * 1.8744));
}
.ne-hero-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Zona clicable sobre el "RESERVA AHORA" pintado en el cartel.
   Coordenadas en % del cartel original (1717x916). */
.ne-hero-hotspot {
	position: absolute;
	left: 32.2%;
	top: 85.8%;
	width: 35.3%;
	height: 11.4%;
	border: 1px solid transparent;
	border-radius: 2px;
	text-indent: -9999px;
	overflow: hidden;
	transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.ne-hero-hotspot:hover,
.ne-hero-hotspot:focus-visible {
	border-color: rgba(224,49,49,.85);
	background: rgba(193,18,31,.16);
	box-shadow: 0 0 26px rgba(193,18,31,.55);
}

.ne-hero-inner {
	position: relative;
	width: 100%;
	padding: 40px 28px 52px;
	text-align: center;
	background: linear-gradient(180deg, rgba(0,0,0,.85), var(--ne-negro));
}

.ne-hero h1 {
	font-size: clamp(2rem, 5.5vw, 3.6rem);
	text-transform: uppercase;
	text-shadow: 0 4px 26px rgba(0,0,0,.9);
}
.ne-hero h1 span { color: var(--ne-rojo); }

.ne-hero-claim {
	font-family: 'Cinzel', serif;
	font-size: clamp(1rem, 2.4vw, 1.6rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 14px 0 4px;
	color: var(--ne-hueso);
}
.ne-hero-sub {
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--ne-gris);
	margin: 0 0 28px;
}

.ne-hero-meta {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
	margin-top: 26px; font-size: .78rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ne-gris);
}

/* ================================================================
   BOTONES
   ================================================================ */
.ne-btn {
	display: inline-block;
	background: var(--ne-rojo);
	color: #fff !important;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	text-decoration: none !important;
	padding: 15px 38px;
	border: 1px solid #7d0d16;
	box-shadow: 0 0 0 rgba(193,18,31,.6);
	transition: background .2s ease, box-shadow .25s ease, transform .15s ease;
}
.ne-btn:hover, .ne-btn:focus-visible {
	background: #a10e19;
	box-shadow: 0 0 26px rgba(193,18,31,.55);
	transform: translateY(-1px);
}
.ne-btn small {
	display: block; font-family: 'Nunito Sans', sans-serif; font-weight: 400;
	letter-spacing: .1em; font-size: .62rem; opacity: .85; margin-top: 3px;
}
.ne-btn--ghost {
	background: transparent; color: var(--ne-hueso) !important;
	border-color: #4a2020;
}
.ne-btn--ghost:hover { background: rgba(193,18,31,.14); box-shadow: none; }
.ne-btn--sm { padding: 11px 26px; font-size: .8rem; }

/* Badge +18 */
.ne-edad {
	display: inline-block; border: 1px solid var(--ne-rojo); color: var(--ne-rojo);
	font-family: 'Cinzel', serif; font-weight: 700; padding: 4px 12px; font-size: .85rem;
}

/* ================================================================
   EXPERIENCIAS
   ================================================================ */
.ne-exp {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 0;
	align-items: center;
	border: 1px solid var(--ne-borde);
	background: #0b0b0b;
	margin-bottom: 34px;
}
/* En las fichas pares el cartel pasa a la derecha; hay que invertir también las
   columnas o el cartel caería en la pista estrecha y se vería más pequeño. */
.ne-exp:nth-child(even) { grid-template-columns: 1fr 1.6fr; }
.ne-exp:nth-child(even) .ne-exp-media { order: 2; }

/* Los carteles se ven enteros: llevan el título y el lema dibujados. */
.ne-exp-media {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}
.ne-exp-body { padding: 40px 40px; display: flex; flex-direction: column; justify-content: center; }

.ne-exp-kicker {
	color: var(--ne-rojo); text-transform: uppercase; letter-spacing: .2em;
	font-size: .72rem; margin: 0 0 10px;
}
.ne-exp-body h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-transform: uppercase; }
.ne-exp-lema {
	font-family: 'Cinzel', serif; color: var(--ne-rojo-cl); text-transform: uppercase;
	letter-spacing: .08em; font-size: .95rem; margin: 8px 0 18px;
}
.ne-exp-body p { color: #cfcfcf; margin: 0 0 14px; font-size: .96rem; }

/* Gancho extra del Akelarre: el premio real */
.ne-exp-body .ne-exp-extra { color: var(--ne-rojo-cl); font-size: .9rem; }

.ne-exp-datos {
	list-style: none; margin: 4px 0 24px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ne-gris);
}
.ne-exp-datos li::before { content: '· '; color: var(--ne-rojo); }
.ne-exp-cta { align-self: flex-start; }

/* ================================================================
   MODOS DE JUEGO
   ================================================================ */
.ne-modos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ne-modo {
	border: 1px solid var(--ne-borde); padding: 34px 30px; background: #0b0b0b;
}
.ne-modo--extremo { border-color: #5a1218; background: linear-gradient(180deg, #140708, #0b0b0b); }
.ne-modo h3 { font-size: 1.6rem; text-transform: uppercase; margin-bottom: 6px; }
.ne-modo--extremo h3 { color: var(--ne-rojo); }
.ne-modo p { color: #cfcfcf; margin: 10px 0 0; font-size: .95rem; }

.ne-nota {
	margin-top: 26px; text-align: center; color: var(--ne-gris);
	font-size: .92rem; line-height: 1.7;
}
.ne-nota strong { color: var(--ne-hueso); }

/* ================================================================
   PRECIOS  (cartel del cliente: ya lleva packs, precios y ahorro)
   ================================================================ */
.ne-precios-img {
	display: block;
	width: 100%;
	max-width: 1536px;   /* ancho nativo del cartel: no ampliar y perder nitidez */
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--ne-borde);
}

.ne-precios-cta { text-align: center; margin: 34px 0 0; }

/* ================================================================
   CALENDARIO
   ================================================================ */
.ne-cal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ne-dia { border: 1px solid var(--ne-borde); background: #0b0b0b; padding: 22px 22px 18px; }
.ne-dia h3 {
	font-size: 1.15rem; text-transform: uppercase; padding-bottom: 12px;
	border-bottom: 1px solid var(--ne-borde);
}
.ne-dia h3 span { display: block; font-size: .7rem; letter-spacing: .2em; color: var(--ne-rojo); margin-bottom: 4px; font-family: 'Nunito Sans', sans-serif; }

.ne-dia-exp { margin-top: 16px; }
.ne-dia-exp h4 {
	font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ne-gris); margin: 0 0 8px; font-weight: 700;
}
.ne-horas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ne-horas li {
	border: 1px solid #3a1a1a; padding: 5px 11px; font-size: .84rem;
	font-variant-numeric: tabular-nums; color: var(--ne-hueso); background: #120b0b;
}
.ne-horas li small { display: block; font-size: .58rem; letter-spacing: .08em; color: var(--ne-gris); text-transform: uppercase; }

.ne-cal-aviso {
	margin-top: 30px; text-align: center; color: var(--ne-gris); font-size: .9rem; line-height: 1.7;
}

/* ================================================================
   RESERVAS (widget de EscapeUp)
   ================================================================ */
.ne-reservas-item {
	border: 1px solid var(--ne-borde);
	background: #0b0b0b;
	padding: 26px 24px 28px;
	margin-bottom: 26px;
}
.ne-reservas-item h3 { font-size: 1.5rem; text-transform: uppercase; }
.ne-reservas-nota {
	margin: 8px 0 0; color: var(--ne-gris);
	font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
}

/* El widget de EscapeUp ya viene en oscuro (fondo negro, cabecera roja),
   así que no lleva panel propio: se apoya directo sobre el fondo de la campaña. */
.ne-reservas-cal { margin-top: 20px; }

/* Aviso dentro de la caja de una experiencia, bajo su línea de datos. */
.ne-reservas-volver { text-align: center; margin: 22px 0 0; }

.ne-reservas-aviso {
	margin: 10px 0 0; color: var(--ne-gris); font-size: .92rem; line-height: 1.6;
}
.ne-reservas-aviso strong { color: var(--ne-hueso); }

/* ================================================================
   INFO PRÁCTICA + CIERRE
   ================================================================ */
.ne-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 300px));
	gap: 22px;
	justify-content: center;   /* el grupo va centrado, no estirado a todo el ancho */
}
.ne-info-item { border-left: 2px solid var(--ne-rojo); padding: 4px 0 4px 18px; }
.ne-info-item h3 { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ne-rojo); }
.ne-info-item p { margin: 8px 0 0; color: #cfcfcf; font-size: .94rem; }
.ne-info-item a { color: var(--ne-hueso); }

.ne-pasos { counter-reset: paso; list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 14px; }
.ne-pasos li { counter-increment: paso; padding-left: 46px; position: relative; color: #cfcfcf; font-size: .95rem; }
.ne-pasos li::before {
	content: counter(paso); position: absolute; left: 0; top: -2px;
	width: 30px; height: 30px; line-height: 28px; text-align: center;
	border: 1px solid var(--ne-rojo); color: var(--ne-rojo);
	font-family: 'Cinzel', serif; font-weight: 700;
}
.ne-pasos li strong { color: var(--ne-hueso); }

.ne-cierre { text-align: center; background: var(--ne-carbon); }
.ne-cierre h2 { font-size: clamp(1.7rem, 4.5vw, 2.8rem); text-transform: uppercase; }
.ne-cierre p { color: var(--ne-gris); margin: 14px 0 30px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 980px) {
	.ne-cal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
	.ne-section { padding: 52px 0; }
	.ne-exp,
	.ne-exp:nth-child(even) { grid-template-columns: 1fr; }
	.ne-exp:nth-child(even) .ne-exp-media { order: 0; }
	.ne-exp-body { padding: 30px 24px; }
	.ne-modos { grid-template-columns: 1fr; }
	.ne-cal { grid-template-columns: 1fr; }
	.ne-hero-inner { padding: 30px 20px 40px; }
	.ne-hero { padding-top: 16px; }
}

/* Intro del calendario resumido */
.ne-cal-intro {
	text-align: center;
	margin: -28px 0 34px;
	color: var(--ne-gris);
	font-size: .95rem;
}
.ne-cal-intro strong { color: var(--ne-hueso); }