/* ════════════════════════════════════════════════════════════════════
   Alta en las alertas — popup del newsletter

   Hermano de valoracion-popup.css y alquiler-popup.css con namespace
   propio (.scn-pop capa, .scn-w formulario) para convivir con ellos en la
   misma página. Global: el markup vive en un <template> del pie, así que
   no pinta nada hasta que el JS lo clona.

   Dos usos:
     - modal      .scn-pop > .scn-pop__dialog > .scn-w
     - incrustado .scn-w--inline (en /alertas/), sin capa ni X

   UNA sola pantalla desde septiembre de 2026: ni barra de pasos, ni botón
   «Atrás», ni chips. Los criterios se eligen después, en la página de
   preferencias a la que lleva el correo (newsletter-paginas.css).

   Paleta y tipografía: tokens de base.css con fallback, para que la hoja
   siga siendo correcta si se carga suelta.
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset de ámbito: el componente no hereda estilos de la página ── */
.scn-pop,
.scn-pop *,
.scn-w,
.scn-w *,
.scn-w *::before,
.scn-w *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scn-w button,
.scn-w input { font-family: 'DM Sans', sans-serif; color: inherit; }

.scn-w ol,
.scn-w ul { list-style: none; }

/* `hidden` gana siempre, aunque la regla del bloque sea display:flex/grid. */
.scn-pop[hidden],
.scn-w [hidden] { display: none !important; }

/* ── Capa modal ──────────────────────────────────────────────────── */
.scn-pop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.scn-pop--visible { opacity: 1; }

.scn-pop__back {
	position: absolute;
	inset: 0;
	background: rgba(24, 26, 30, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* Alto AUTOMÁTICO con tope: con una sola pantalla de tres campos, forzar la
   altura de la época de los dos pasos dejaba medio diálogo vacío. Crece con
   el contenido, y a partir del tope el cuerpo scrollea. */
.scn-pop__dialog {
	position: relative;
	width: 100%;
	max-width: 860px;
	height: auto;
	max-height: min(94vh, 720px);
	background: var(--blanco, #fff);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	transform: translateY(14px) scale(0.985);
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
}

.scn-pop--visible .scn-pop__dialog { transform: none; }

.scn-pop__sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.scn-pop__x {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 4;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gris-texto, #54585e);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.scn-pop__x:hover { background: var(--beige, #fbf5e9); color: var(--negro, #333); }
.scn-pop__x:focus-visible { outline: 2px solid var(--azul, #4a8fcc); outline-offset: 2px; }

.scn-pop__mount { display: flex; width: 100%; min-width: 0; }

/* Bloqueo del fondo (iOS-safe: position fixed en body) */
body.scn-pop-lock {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* ── Componente ──────────────────────────────────────────────────── */
.scn-w {
	display: grid;
	grid-template-columns: 260px 1fr;
	width: 100%;
	min-width: 0;
	font-family: 'DM Sans', sans-serif;
	color: var(--negro, #333);
	font-size: 15px;
	line-height: 1.55;
}

/* ── Panel de confianza (izquierda, escritorio) ──────────────────── */
/* Centrado en vertical: el panel es una columna del grid y por tanto tan alto
   como el formulario. Con un titular y una línea, alinearlo arriba dejaba todo
   el aire abajo y parecía que faltaba contenido. */
.scn-w__aside {
	background: var(--beige, #fbf5e9);
	border-right: 1px solid var(--beige-dark, #f0e8d5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.scn-w__aside-in { padding: 30px 24px; overflow-y: auto; }

.scn-w__aside-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 10px;
	color: var(--negro, #333);
}

.scn-w__aside-text { font-size: 13.5px; color: var(--gris-texto, #54585e); }

/* ── Columna principal ───────────────────────────────────────────── */
.scn-w__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--blanco, #fff);
	max-height: min(94vh, 720px);
}

.scn-w__head {
	position: relative;
	padding: 20px 66px 0 30px;
	flex-shrink: 0;
}

/* Tira de sellos: la única vez que se dice «gratis / sin spam / baja». Va en
   la cabecera, en escritorio y en móvil. */
.scn-w__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.scn-w__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px 30px 24px;
	overscroll-behavior: contain;
}

.scn-w__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.scn-w__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.12;
	margin-bottom: 6px;
	color: var(--negro, #333);
}

.scn-w__sub {
	font-size: 14px;
	color: var(--gris-texto, #54585e);
	margin-bottom: 26px;
}

/* ── Campos ──────────────────────────────────────────────────────── */
/* Con tres campos y nada de letra pequeña, el aire lo pone el margen. */
.scn-w__field { margin-bottom: 20px; }

.scn-w__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--negro, #333);
}

.scn-w__opt { font-weight: 400; color: var(--gris-texto, #54585e); }

.scn-w__inp {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1.5px solid var(--borde, #e5e5e5);
	border-radius: 10px;
	background: var(--blanco, #fff);
	/* 16 px: por debajo de eso iOS hace zoom al enfocar el campo. */
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.scn-w__inp::placeholder { color: #9aa0a8; }
.scn-w__inp:hover { border-color: #d3d7dd; }

.scn-w__inp:focus {
	outline: none;
	border-color: var(--azul, #4a8fcc);
	box-shadow: 0 0 0 3px var(--azul-light, rgba(74, 143, 204, 0.08));
}

.scn-w__inp[aria-invalid="true"] { border-color: #e74c3c; }
.scn-w__inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12); }

.scn-w__err {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: #c0392b;
}

/* ── Casilla de privacidad ───────────────────────────────────────── */
.scn-w__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gris-texto, #54585e);
	cursor: pointer;
}

.scn-w__check input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	accent-color: var(--azul, #4a8fcc);
	cursor: pointer;
}

.scn-w__check a { color: var(--azul, #4a8fcc); text-decoration: underline; }
.scn-w__check input[aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 2px; }

/* ── Sellos de confianza ─────────────────────────────────────────── */
.scn-w__badges li {
	position: relative;
	padding-left: 18px;
	font-size: 12px;
	color: var(--gris-texto, #54585e);
}

.scn-w__badges li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 5px;
	width: 5px;
	height: 9px;
	border: solid var(--azul, #4a8fcc);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ── Pie con el botón principal ──────────────────────────────────── */
.scn-w__foot {
	flex-shrink: 0;
	padding: 14px 30px 18px;
	border-top: 1px solid var(--borde, #e5e5e5);
	background: var(--blanco, #fff);
}

.scn-w__alert {
	margin-bottom: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: #c0392b;
	font-size: 13px;
	font-weight: 500;
}

.scn-w__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	border: 0;
	border-radius: 12px;
	background: var(--azul, #4a8fcc);
	color: #fff;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.scn-w__cta:hover { background: var(--azul-hover, #3a7fb8); box-shadow: 0 6px 18px rgba(74, 143, 204, 0.28); color: #fff; }
.scn-w__cta:active { transform: translateY(1px); }
.scn-w__cta:focus-visible { outline: 2px solid var(--negro, #333); outline-offset: 2px; }
.scn-w__cta[disabled] { opacity: 0.65; cursor: default; box-shadow: none; }

/* ── Éxito ───────────────────────────────────────────────────────── */
/* Al llegar al éxito el panel lateral ya no aporta nada —vendía el alta que
   acaba de hacerse— y su columna beige medio vacía delataba el hueco. Fuera, y
   el diálogo se estrecha a la medida del mensaje (la clase la pone el JS). */
.scn-w--ok { grid-template-columns: 1fr; }
.scn-w--ok .scn-w__aside { display: none; }
.scn-pop--ok .scn-pop__dialog { max-width: 520px; }
/* Incrustado: la tarjeta de /alertas/ también se recoge al ancho del mensaje. */
.scn-w--inline.scn-w--ok { max-width: 560px; }

.scn-w__ok {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 34px 30px 30px;
	text-align: center;
}

.scn-w__ok-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--azul-light, rgba(74, 143, 204, 0.08));
	color: var(--azul, #4a8fcc);
}

.scn-w__ok-c,
.scn-w__ok-p {
	stroke: var(--azul, #4a8fcc);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.scn-w__ok-c { stroke-dasharray: 152; stroke-dashoffset: 152; animation: scnDraw 0.5s ease forwards; }
.scn-w__ok-p { stroke-dasharray: 40; stroke-dashoffset: 40; animation: scnDraw 0.35s 0.4s ease forwards; }

@keyframes scnDraw { to { stroke-dashoffset: 0; } }

.scn-w__ok-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 8px;
}

.scn-w__ok-title:focus { outline: none; }

.scn-w__ok-desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--gris-texto, #54585e);
	max-width: 460px;
	margin: 0 auto;
	overflow-wrap: anywhere;
}

/* Media línea en gris pequeño, sin caja: es un por si acaso, no un aviso. */
.scn-w__ok-spam {
	margin: 12px auto 0;
	max-width: 460px;
	font-size: 12px;
	color: #8b9098;
}

/* El botón no se estira a lo ancho de la tarjeta: en el éxito no hay
   formulario que acompañar y un botón de 800 px pedía a gritos contenido. */
.scn-w__ok-btn {
	margin: 24px auto 0;
	max-width: 300px;
}

/* ════════════════════════════════════════════════════════════════
   Incrustado (/alertas/): sin capa, sin X, con marco de tarjeta
   ════════════════════════════════════════════════════════════════ */
.scn-w--inline {
	max-width: 900px;
	margin: 0 auto;
	border: 1px solid var(--borde, #e5e5e5);
	border-radius: 18px;
	overflow: hidden;
	background: var(--blanco, #fff);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	scroll-margin-top: 90px;
	transition: box-shadow 0.3s ease;
}

.scn-w--inline .scn-w__main { max-height: none; }
.scn-w--inline .scn-w__head { padding-right: 30px; }
.scn-w--inline .scn-w__body { overflow: visible; }

/* Destello al llegar desde un CTA de la misma página. */
.scn-w--destacado { box-shadow: 0 0 0 3px var(--azul, #4a8fcc), 0 8px 30px rgba(74, 143, 204, 0.25); }

/* ════════════════════════════════════════════════════════════════
   Móvil: hoja a pantalla completa, cabecera y pie fijos
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* Hoja anclada abajo y a la MEDIDA del contenido. Antes ocupaba los
	   100dvh siempre: con tres campos, el botón quedaba a media pantalla del
	   formulario. Ahora la hoja crece con lo que hay y solo llega al tope
	   cuando de verdad no cabe, momento en que scrollea el cuerpo.
	   El pie sigue pegado al borde inferior, así que al abrirse el teclado
	   —el JS ajusta #scnPopup al visualViewport— el botón queda justo encima
	   de él, que es como funcionaba antes. */
	.scn-pop { padding: 0; align-items: flex-end; }

	.scn-pop__dialog {
		max-width: none;
		width: 100%;
		height: auto;
		max-height: 100%;
		border-radius: 18px 18px 0 0;
		transform: translateY(24px);
	}

	.scn-pop__back { background: rgba(24, 26, 30, 0.4); }
	.scn-pop__x { top: 10px; right: 10px; width: 40px; height: 40px; background: #fff; }

	.scn-pop__mount { min-height: 0; }
	.scn-w { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
	.scn-w__aside { display: none; }
	.scn-w__main { max-height: 100%; min-height: 0; }

	.scn-w__head { padding: 14px 58px 0 18px; }

	.scn-w__badges { gap: 6px 14px; }
	.scn-w__badges li { font-size: 11.5px; padding-left: 16px; }

	.scn-w__body { padding: 16px 18px 22px; }
	.scn-w__title { font-size: 24px; }
	.scn-w__sub { font-size: 13.5px; margin-bottom: 22px; }
	.scn-w__field { margin-bottom: 18px; }

	.scn-w__foot {
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
	}

	.scn-w__ok { padding: 26px 18px 30px; }
	.scn-w__ok-title { font-size: 26px; }

	/* Incrustado en móvil: la tarjeta ocupa el ancho, sin altura fija. */
	.scn-w--inline { border-radius: 14px; height: auto; grid-template-rows: none; }
	.scn-w--inline .scn-w__main { height: auto; max-height: none; }
	.scn-w--inline .scn-w__head { padding-right: 18px; }
}

@media (max-width: 380px) {
	.scn-w__title { font-size: 22px; }
}

/* Escritorio pequeño: el panel de confianza estorba más que ayuda */
@media (max-width: 900px) and (min-width: 769px) {
	.scn-w { grid-template-columns: 1fr; }
	.scn-w__aside { display: none; }
	.scn-pop__dialog { max-width: 540px; }
}

@media (prefers-reduced-motion: reduce) {
	.scn-pop,
	.scn-pop__dialog,
	.scn-w__ok-c,
	.scn-w__ok-p,
	.scn-w--inline { transition: none !important; animation: none !important; }
	.scn-w__ok-c,
	.scn-w__ok-p { stroke-dashoffset: 0; }
}

/* ── Escritorio con poca altura (portátiles 768-820 px) ──────────── */
@media (min-width: 769px) and (max-height: 840px) {
	.scn-pop__dialog,
	.scn-w__main { max-height: min(calc(100vh - 20px), 720px); }
	.scn-w__head { padding: 14px 66px 8px 30px; }
	.scn-w__body { padding: 12px 30px 14px; }
	.scn-w__foot { padding: 10px 30px 12px; }
	.scn-w__field { margin-bottom: 16px; }
	.scn-w__title { font-size: 26px; }
	.scn-w__sub { margin-bottom: 20px; }
}