/* ==========================================================================
   Nuvora Convert — popup de captación (v1.1).
   Namespaced .anl-*. Color de acento por campaña vía --anl-accent (inline).
   6 plantillas: Lista Privada, Cupón de Bienvenida (split), Novedades,
   Cinta, Inmersiva, Ficha Lateral.
   ========================================================================== */

/* ---- Overlay + modal base (SIEMPRE centrado, desktop y móvil) ---- */
.anl-overlay {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	background: rgb(6 22 39 / 0.62);
	padding: 1.25rem;
	opacity: 0; transition: opacity 0.3s ease;
}
.anl-overlay.anl-visible { opacity: 1; }
.anl-overlay[hidden] { display: none; }

.anl-modal {
	position: relative;
	width: 100%; max-width: 480px; max-height: calc(100vh - 2.5rem);
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: #fff; border-radius: 16px;
	box-shadow: 0 28px 60px -12px rgb(0 0 0 / 0.45);
	transform: translateY(16px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.anl-visible .anl-modal { transform: translateY(0) scale(1); }

/* ---- Botón ✕: ÚNICO cierre por clic → táctil 44×44, contraste AA en las 6
   plantillas, hover en el azul de acento (consistente con el CTA). ---- */
.anl-close {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid #e2e8f0; cursor: pointer; font-size: 1.35rem; line-height: 1;
	background: #fff; color: #0f172a;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
	transition: background 0.2s ease, color 0.2s ease;
}
.anl-close:hover { background: var(--anl-accent, #0284c7); color: #fff; border-color: transparent; }
.anl-close:focus-visible { outline: 3px solid var(--anl-accent, #0284c7); outline-offset: 2px; }
.anl-close--dark { background: rgb(255 255 255 / 0.95); } /* sobre fondos oscuros */

/* ---- Tipografía base ---- */
.anl-title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: #0f172a; margin: 0 0 0.5rem; }
.anl-subtitle { color: #64748b; font-size: 1rem; margin: 0 0 1rem; }
.anl-bullets { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.anl-bullets li { display: flex; gap: 0.65rem; align-items: flex-start; color: #334155; font-size: 0.97rem; line-height: 1.55; margin-bottom: 0.7rem; }
.anl-bullets--center { text-align: left; max-width: 22rem; margin-left: auto; margin-right: auto; }
.anl-bullets--compact li { font-size: 0.92rem; margin-bottom: 0.55rem; }
.anl-check { color: var(--anl-accent, #0284c7); font-size: 0.85rem; margin-top: 0.15rem; }

/* Resaltado por atajos del texto ([c=#hex] color, [r=#hex] fondo). El tono llega
   como custom property inline; el estilo real vive aquí (sin `style` de propiedad). */
.anl-mark--fg { color: var(--anl-mk-fg); }
.anl-mark--bg { background-color: var(--anl-mk-bg); padding: 0.02em 0.28em; border-radius: 0.25em; }

/* Iconos Lucide (solo Cupón, Cinta y Ficha Lateral). Color: --anl-icon
   (campo de campaña) con fallback al acento. */
.anl-ico { color: var(--anl-icon, var(--anl-accent, #0284c7)); flex-shrink: 0; margin-top: 0.05rem; }
.anl-ico svg { width: 20px; height: 20px; display: block; }

/* ---- Formulario compartido ---- */
.anl-form { display: flex; flex-direction: column; gap: 0.65rem; }
.anl-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }
.anl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anl-input {
	width: 100%; padding: 0.85rem 1rem; font-size: 1rem;
	border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
}
.anl-input:focus { outline: none; border-color: var(--anl-accent, #0284c7); box-shadow: 0 0 0 3px rgb(2 132 199 / 0.18); }
.anl-submit {
	width: 100%; padding: 0.9rem 1rem; border: 0; border-radius: 10px; cursor: pointer;
	font-size: 1rem; font-weight: 700; letter-spacing: 0.02em;
	color: #fff; background: var(--anl-accent, #0284c7);
	transition: filter 0.2s ease, transform 0.2s ease;
}
.anl-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.anl-submit:disabled, .anl-loading { opacity: 0.65; cursor: wait; transform: none; }
.anl-submit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.anl-privacy { font-size: 0.8rem; color: #94a3b8; text-align: center; margin: 0; }
.anl-feedback { font-size: 0.95rem; font-weight: 600; text-align: center; margin: 0; min-height: 1.2em; color: #16a34a; }
.anl-feedback.anl-error { color: #dc2626; }
.anl-form.anl-done .anl-input,
.anl-form.anl-done .anl-submit,
.anl-form.anl-done .anl-privacy { display: none; }
.anl-form.anl-done .anl-feedback { font-size: 1.05rem; padding: 0.5rem 0 0.25rem; }

/* Botón de descarga del Lead Magnet (aparece tras el éxito). */
.anl-download {
	display: block; width: 100%; padding: 0.95rem 1rem; text-align: center;
	border-radius: 10px; text-decoration: none;
	font-size: 1rem; font-weight: 700;
	color: #fff; background: #16a34a;
	box-shadow: 0 8px 18px -8px rgb(22 163 74 / 0.7);
	transition: filter 0.2s ease, transform 0.2s ease;
}
.anl-download:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.anl-download:focus-visible { outline: 3px solid #16a34a; outline-offset: 3px; }
.anl-download[hidden] { display: none; }

/* ==========================================================================
   1. Lista Privada — panel claro + franja azul profundo (más aire arriba).
   ========================================================================== */
.anl-t-lista { padding: 0; }

/* Tamaño CONTENIDO + sombra suave: se percibe como una ventana modal ligera (con
   fondo visible), NO como pantalla superpuesta. Esquinas RECTAS por defecto; el
   toggle "Bordes redondeados" añade .anl-t-lista--rounded. */
.anl-modal.anl-t-lista {
	max-width: 400px;
	border-radius: 0;
	box-shadow: 0 24px 60px -20px rgb(6 22 39 / 0.45), 0 8px 24px -12px rgb(6 22 39 / 0.28);
}
/* Especificidad (0,2,0) y posterior → gana a `.anl-modal.anl-t-lista { border-radius: 0 }`,
   así el MODAL sí se redondea (antes ganaba el 0 y asomaban las esquinas cuadradas). */
.anl-modal.anl-t-lista--rounded { border-radius: 14px; }
.anl-t-lista--rounded .anl-t-lista__body { border-radius: 14px 14px 0 0; }
.anl-t-lista--rounded .anl-t-lista__band { border-radius: 0 0 14px 14px; }

/* Entrada: el modal DESCIENDE desde arriba (elegante, esc.+móvil). Empieza fuera
   del viewport (-100vh) para arrancar siempre por encima en cualquier alto. */
@keyframes anl-slide-in-top {
	0%   { transform: translateY(-100vh); opacity: 0; }
	100% { transform: translateY(0);      opacity: 1; }
}
.anl-visible .anl-t-lista { animation: anl-slide-in-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

/* Botón ✕ MINIMALISTA (solo Lista Privada): sin círculo/borde/sombra, más grande. */
.anl-t-lista .anl-close {
	background: transparent; border: none; box-shadow: none; border-radius: 0;
	color: #0f172a; font-size: 2rem; top: 10px; right: 12px;
}
.anl-t-lista .anl-close:hover { background: transparent; border-color: transparent; color: var(--anl-accent, #0284c7); }

/* Cuerpo: flex vertical con gap uniforme → composición equilibrada CON o SIN
   bullets. TODO alineado a la izquierda. */
.anl-t-lista__body {
	display: flex; flex-direction: column; gap: 0.6rem;
	padding: 3.15rem 1.75rem 1.4rem; text-align: left;
	background: #f4f6f8; border-radius: 0;
}

/* Tipografía de referencia, alineada a la izquierda. Título Roboto Condensed Bold;
   texto Raleway Thin. El gap del cuerpo gobierna la separación (sin márgenes). */
/* Tipografía AUTORITATIVA (!important): el popup es un componente aislado; algunos
   temas (p. ej. Asap → Poppins) aplican su tipografía con !important y ganarían al
   popup. Con !important el título queda SIEMPRE en Roboto Condensed Bold y el resto
   en Raleway con el peso del selector, con independencia del tema anfitrión. */
.anl-t-lista .anl-title {
	margin: 0;
	font-family: 'Roboto Condensed', system-ui, sans-serif !important;
	font-weight: 700 !important; font-size: 2rem; line-height: 1.06; letter-spacing: 0;
	color: #102C50; text-align: left;
}
.anl-t-lista .anl-subtitle {
	margin: 0;
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 300) !important; font-size: 0.9375rem; line-height: 1.46; letter-spacing: 0.3px;
	color: #555; text-align: left;
}
.anl-t-lista .anl-bullets { text-align: left; max-width: none; margin: 0.15rem 0 0; }
.anl-t-lista .anl-bullets li {
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 300) !important; font-size: 0.9375rem; line-height: 1.46; letter-spacing: 0.3px;
	color: #555; margin-bottom: 0.5rem;
}
/* Formulario de Lista Privada: input, placeholder y CTA en Raleway (el input/placeholder
   siguen el peso del selector; el CTA va SIEMPRE en negrita para destacar). Ancho de
   input y CTA configurables de forma independiente (--anl-input-w / --anl-cta-w, en %). */
.anl-t-lista .anl-input {
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 300) !important;
	width: var(--anl-input-w, 100%) !important; max-width: 100% !important;
}
.anl-t-lista .anl-input::placeholder {
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 300) !important;
	font-size: 0.9rem !important;
}
.anl-t-lista .anl-submit {
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: 700 !important;
	width: var(--anl-cta-w, 100%); max-width: 100%;
}
/* Con un ancho menor al 100%, input y CTA quedan a la izquierda por sí solos (un ítem
   flex de ancho fijo se alinea al inicio bajo el `align-items: stretch` por defecto).
   En modo centrado (.anl-t-lista--center: sin lista + "Alineación: Centrada") se
   centran con `align-self: center` para seguir al título/descripción; en modo izquierda
   permanecen a la izquierda. La nota `.anl-privacy` va a la izquierda por defecto (regla
   de `.anl-t-lista__band .anl-privacy`) y se centra en modo centrado más abajo. Cada
   ancho es independiente. */
.anl-t-lista--center .anl-input,
.anl-t-lista--center .anl-submit { align-self: center; }
.anl-t-lista .anl-bullets li:last-child { margin-bottom: 0; }

.anl-t-lista__band { position: relative; background: #0b2740; padding: 1.55rem 1.75rem 1.4rem; border-radius: 0; }
.anl-t-lista__notch {
	position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
	border-left: 14px solid transparent; border-right: 14px solid transparent;
	border-top: 12px solid #f4f6f8;
}
.anl-t-lista__band .anl-privacy {
	color: rgb(226 240 250 / 0.55); text-align: left;
	font-family: 'Raleway', system-ui, sans-serif !important; font-weight: var(--anl-body-w, 300) !important;
}

/* Centrado del contenido SOLO cuando la campaña no tiene beneficios (opción admin). */
.anl-t-lista--center .anl-t-lista__body { text-align: center; align-items: center; }
.anl-t-lista--center .anl-title,
.anl-t-lista--center .anl-subtitle { text-align: center; }
/* La nota de privacidad sigue al contenido: izquierda con lista, centrada sin lista. */
.anl-t-lista--center .anl-t-lista__band .anl-privacy { text-align: center; }
.anl-t-lista__band .anl-feedback { color: #7ee2a8; }
.anl-t-lista__band .anl-feedback.anl-error { color: #fda4af; }

/* ==========================================================================
   2. Cupón de Bienvenida (REDISEÑO) — split: contenido | panel de formulario.
   ========================================================================== */
.anl-t-cupon { max-width: 680px; padding: 0; }
.anl-t-cupon__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 320px; }
.anl-t-cupon__content { padding: 2.75rem 2rem 2rem 2.25rem; }
.anl-t-cupon__content .anl-title { font-size: 1.65rem; }
.anl-t-cupon__panel {
	display: flex; flex-direction: column; justify-content: center;
	padding: 2rem 1.75rem;
	background: color-mix(in srgb, var(--anl-accent, #0284c7) 8%, #fff);
	border-left: 1px solid color-mix(in srgb, var(--anl-accent, #0284c7) 18%, #fff);
	border-radius: 0 16px 16px 0;
}
@media (max-width: 640px) {
	.anl-t-cupon__grid { grid-template-columns: 1fr; }
	.anl-t-cupon__content { padding: 2.5rem 1.5rem 1rem; }
	.anl-t-cupon__panel { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--anl-accent, #0284c7) 18%, #fff); border-radius: 0 0 16px 16px; padding: 1.5rem; }
}

/* ==========================================================================
   3. Novedades y Lanzamientos — imagen protagonista (sin cambios de layout).
   ========================================================================== */
.anl-t-novedades { padding: 0; overflow: hidden; }
.anl-t-novedades__media { aspect-ratio: 2 / 1; background: #e2e8f0; }
.anl-t-novedades__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anl-t-novedades__body { padding: 1.75rem 2rem 1.9rem; }
.anl-close--overimage { background: rgb(255 255 255 / 0.92); }

/* ==========================================================================
   4. Cinta — listón cruzado con el título sobre el modal.
   ========================================================================== */
.anl-t-cinta { overflow: visible; padding: 0 0 1.9rem; margin-top: 1.25rem; }
.anl-t-cinta__ribbon {
	position: relative;
	margin: 1.5rem -18px 1.75rem;
	padding: 1rem 1.5rem;
	background: var(--anl-accent, #0284c7);
	text-align: center;
	box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.35);
}
.anl-t-cinta__ribbon .anl-title { color: #fff; margin: 0; font-size: 1.35rem; }
/* Pliegues del listón (triángulos bajo los extremos que sobresalen). */
.anl-t-cinta__ribbon::before,
.anl-t-cinta__ribbon::after {
	content: ''; position: absolute; bottom: -10px;
	border-style: solid;
}
.anl-t-cinta__ribbon::before { left: 0;  border-width: 10px 0 0 18px; border-color: transparent transparent transparent color-mix(in srgb, var(--anl-accent, #0284c7) 55%, #000); }
.anl-t-cinta__ribbon::after  { right: 0; border-width: 0 0 10px 18px; border-color: transparent transparent color-mix(in srgb, var(--anl-accent, #0284c7) 55%, #000) transparent; }
.anl-t-cinta__body { padding: 0 2rem; text-align: center; }
.anl-t-cinta__body .anl-form { max-width: 22rem; margin: 0 auto; }

/* ==========================================================================
   5. Inmersiva — azul profundo (identidad del hero), texto claro, CTA brillante.
   Contraste AA: texto slate-100/sky-200, inputs con fondo translúcido y borde
   visible, placeholder legible.
   ========================================================================== */
.anl-t-inmersiva {
	background:
		radial-gradient(520px 300px at 85% -10%, rgb(56 189 248 / 0.22), transparent 60%),
		radial-gradient(420px 260px at -5% 110%, rgb(2 132 199 / 0.28), transparent 55%),
		linear-gradient(170deg, #0b2740 0%, #061627 100%);
	padding: 2.9rem 2.25rem 2.1rem; text-align: center; overflow: hidden;
}
.anl-t-inmersiva__glow { position: absolute; inset: 0; pointer-events: none; }
.anl-t-inmersiva__body { position: relative; }
.anl-t-inmersiva .anl-title { color: #fff; font-size: 1.7rem; }
.anl-t-inmersiva .anl-subtitle { color: #bae6fd; }
.anl-t-inmersiva .anl-bullets li { color: #e2f0fa; }
.anl-t-inmersiva .anl-check { color: #7dd3fc; }
.anl-t-inmersiva .anl-input {
	background: rgb(255 255 255 / 0.08); border-color: rgb(186 230 253 / 0.45); color: #fff;
}
.anl-t-inmersiva .anl-input::placeholder { color: rgb(186 230 253 / 0.75); }
.anl-t-inmersiva .anl-input:focus { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgb(125 211 252 / 0.25); }
.anl-t-inmersiva .anl-submit { box-shadow: 0 10px 24px -8px rgb(56 189 248 / 0.55); }
.anl-t-inmersiva .anl-privacy { color: rgb(186 230 253 / 0.6); }
.anl-t-inmersiva .anl-feedback { color: #7ee2a8; }
.anl-t-inmersiva .anl-feedback.anl-error { color: #fda4af; }
.anl-t-inmersiva .anl-form { max-width: 22rem; margin: 0 auto; }

/* ==========================================================================
   6. Ficha Lateral — tarjeta angosta con avatar circular.
   ========================================================================== */
.anl-t-ficha { max-width: 360px; padding: 0 1.6rem 1.7rem; overflow: visible; margin-top: 3rem; }
.anl-t-ficha__avatar {
	width: 96px; height: 96px; margin: -48px auto 1rem; border-radius: 50%;
	overflow: hidden; border: 4px solid #fff;
	box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.35);
	background: #f0f7fc;
}
.anl-t-ficha__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anl-t-ficha__body { text-align: center; padding-top: 1.75rem; }
.anl-t-ficha__avatar + .anl-t-ficha__body { padding-top: 0; }
.anl-t-ficha .anl-title { font-size: 1.3rem; }
.anl-t-ficha .anl-bullets { text-align: left; }

/* NOTA: la plantilla "Recurso Descargable" es un COMPONENTE INDEPENDIENTE:
   su maquetación vive en assets/recurso.css (se encola solo cuando la campaña
   usa esa plantilla). Aquí no hay estilos de ese diseño. */

/* ---- Móvil: el modal permanece CENTRADO (decisión del owner; el fondo se
   bloquea desde leads.js con overflow:hidden mientras está abierto). ---- */
@media (max-width: 480px) {
	.anl-overlay { padding: 0.9rem; }
	.anl-title { font-size: 1.3rem; }
	.anl-t-cinta__body, .anl-t-inmersiva { padding-left: 1.4rem; padding-right: 1.4rem; }
	.anl-t-novedades__body { padding: 1.5rem 1.4rem 1.6rem; }

	/* Lista Privada en móvil: más aire lateral (se siente modal, no pantalla
	   completa), cuerpo compacto, título más contenido y texto Raleway Light
	   (Thin resulta demasiado fino a este tamaño). */
	.anl-overlay:has(.anl-t-lista) { padding: 1.5rem 1.4rem; }
	.anl-t-lista__body { padding: 2.75rem 1.3rem 1.15rem; }
	.anl-t-lista__band { padding: 1.35rem 1.3rem 1.25rem; }
	.anl-t-lista .anl-title { font-size: 1.6rem; }
	/* El peso del texto lo gobierna --anl-body-w (opción del admin) en ambos
	   breakpoints; sin override móvil fijo. */
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.anl-overlay, .anl-modal, .anl-submit, .anl-download { transition: none; }
	.anl-visible .anl-t-lista { animation: none; }
}