/* ==========================================================================
   Nuvora Convert — "Recurso Descargable" (Lead Magnet).
   COMPONENTE INDEPENDIENTE (.anl-rc-*): réplica fiel de la referencia.
   Este archivo se encola SOLO cuando la campaña usa esta plantilla.

   Composición (referencia): listón de esquina "GRATIS" · título grande navy ·
   texto descriptivo con la flecha AL FINAL (en flujo) · input + CTA azul ·
   imagen del recurso inclinada a la derecha · ✕.
   Sin listados de beneficios. Fondo configurable (3 estilos) + patrón opcional
   de triángulos. En móvil la imagen se oculta y el contenido se centra.
   ========================================================================== */

/* ---- Tarjeta + fondo configurable ----
   El fondo se compone por variables: --anl-rc-bg (color/degradado base, según el
   estilo elegido) y --anl-rc-texture (patrón de triángulos opcional, o none). */
.anl-rc {
	--anl-rc-bg: linear-gradient(155deg, #ffffff 0%, #eaeef4 100%); /* degradado (default) */
	--anl-rc-texture: none;                                          /* triángulos: off */
	/* Ancho INDEPENDIENTE de título y descripción (en `ch` = nº de caracteres por
	   línea → legibilidad + control de saltos). Única palanca de ajuste; afinar aquí.
	   La descripción, más estrecha, gobierna sus saltos → la flecha queda en la última
	   línea junto a la última palabra. */
	/* Valor configurable desde el admin vía --anl-*-w-cfg (en %); si no se define,
	   se usa el valor por defecto en `ch`. Se usa esta indirección para que el
	   media query móvil pueda reasignar --anl-desc-w sin que el inline lo pise. */
	--anl-title-w: var(--anl-title-w-cfg, 20ch);
	--anl-desc-w:  var(--anl-desc-w-cfg, 44ch);
	position: relative;
	width: 100%; max-width: 780px;
	background: var(--anl-rc-texture), var(--anl-rc-bg);
	border-radius: 10px;
	box-shadow: 0 30px 70px -18px rgb(6 22 39 / 0.55);
	/* overflow VISIBLE: el listón sobresale del modal como en la referencia. */
	overflow: visible;
	transform: translateY(18px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.anl-visible .anl-rc { transform: translateY(0) scale(1); }

/* Animación de entrada opcional (toggle del admin): con la clase .anl-rc--anim-top el
   modal DESCIENDE desde arriba, igual que Lista Privada (keyframe anl-slide-in-top,
   definido en leads.css, siempre encolado). Sin la clase, se mantiene la aparición
   suave por defecto (rise + scale del `transition` de arriba). */
.anl-visible .anl-rc--anim-top { animation: anl-slide-in-top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

/* Estilos de fondo (selector del admin). */
.anl-rc--fondo-blanco { --anl-rc-bg: #fbfcfd; }
.anl-rc--fondo-beige  { --anl-rc-bg: linear-gradient(155deg, #fbf7ef 0%, #f1e7d6 100%); }
/* Patrón de triángulos (toggle del admin): se superpone al fondo elegido. */
.anl-rc--textura { --anl-rc-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M35 26l11 19H24zM105 96l11 19H94z' fill='none' stroke='%230f2a43' stroke-opacity='0.06' stroke-width='2'/%3E%3C/svg%3E"); }
/* Sin imagen (escritorio): tarjeta más angosta para no dejar hueco. */
.anl-rc--sin-imagen { max-width: 540px; }

/* ---- Listón de esquina "GRATIS" — adaptación DIRECTA del corner-ribbon de
   referencia (listonTarjeta.html):
   · El contenedor recorta (overflow:hidden) y asoma fuera de la esquina:
     ese corte al filo es lo que hace que el listón ABRACE el modal.
   · La banda se centra sola con el flex del contenedor y se rota -45°; sus
     extremos se recortan a ras del contenedor.
   · Los pliegues son un cuadrito abajo-izq. + su gemelo pintado vía box-shadow
     (arriba-der.), tras la banda: la "cara trasera" del listón doblada.
   Posición FIJA por diseño (una sola pieza que abraza la esquina): las variables ↓
   son constantes internas —las comparten la banda y los pliegues—; NO se editan
   desde el admin. Valores portados 1:1 de la referencia aprobada por el owner:
   listón corto y pegado a la esquina, con los pliegues UNIDOS a la banda (la
   "magia": sep = -altura_banda/2 → cero separación). Si se recalibra, se hace aquí. */
.anl-rc__corner {
	--anl-rib-size:   96px;    /* tamaño del contenedor (recorta y define el "volado") */
	--anl-rib-top:    -6px;    /* posición vertical (negativo = sobresale arriba) */
	--anl-rib-left:   -6px;    /* posición horizontal (negativo = sobresale a la izq.) */
	--anl-rib-h:      32px;    /* altura de la banda naranja */
	--anl-rib-sep:    calc(var(--anl-rib-h) / -2); /* pliegues UNIDOS a la banda (sin hueco) */
	--anl-rib-scale:  1;       /* ESCALA = tamaño global de TODA la pieza (cohesiva) */
	--anl-rib-rot:    -45deg;  /* rotación de la banda */
	--anl-rib-font:   0.85rem; /* tamaño de la palabra "GRATIS" (escala con la pieza) */
	--anl-rib-z:      3;       /* capa del listón (mayor = delante del modal) */
	--anl-rib-fold-z: -1;      /* capa de los DOBLECES: -1 = tras la banda (envoltura) */

	position: absolute; overflow: hidden;
	width: var(--anl-rib-size); height: var(--anl-rib-size);
	top: var(--anl-rib-top); left: var(--anl-rib-left);
	z-index: var(--anl-rib-z);
	display: flex; align-items: center; justify-content: center;
	transform: scale(var(--anl-rib-scale));
	/* La escala pivota sobre la ESQUINA DEL MODAL: banda, pliegues, sombra y volado
	   escalan como UNA sola pieza → nunca se desacoplan y el "abrazo" se conserva. */
	transform-origin: calc(-1 * var(--anl-rib-left)) calc(-1 * var(--anl-rib-top));
	pointer-events: none;
}
.anl-rc__ribbon {
	position: absolute; width: 150%; height: var(--anl-rib-h);
	background-image: linear-gradient(45deg, #fb923c 0%, #f97316 51%, #ea580c 100%);
	transform: rotate(var(--anl-rib-rot)) translateY(var(--anl-rib-sep));
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 800; font-size: var(--anl-rib-font); letter-spacing: 0.1em; text-transform: uppercase;
	box-shadow: 0 5px 10px rgb(0 0 0 / 0.23);
}
/* Pliegues (cuadrito + gemelo por box-shadow), pegados a los extremos de la banda
   y escalados con la pieza: llenan el hueco del volado y crean la ilusión 3D de
   que el listón envuelve la esquina. Capa propia vía --anl-rib-fold-z. */
.anl-rc__corner::after {
	content: ''; position: absolute;
	width: calc(-1 * var(--anl-rib-left));
	height: calc(-1 * var(--anl-rib-top));
	bottom: 0; left: 0;
	z-index: var(--anl-rib-fold-z);
	box-shadow: calc(var(--anl-rib-size) + var(--anl-rib-left)) calc(-1 * var(--anl-rib-size) - var(--anl-rib-top)) #b45309;
	background-image: linear-gradient(45deg, #9a3d08 0%, #c2410c 51%, #9a3d08 100%);
}

/* ---- Layout: contenido | imagen ---- */
.anl-rc__grid {
	display: grid; grid-template-columns: 1.15fr 0.85fr;
	gap: 1.4rem; align-items: center;
	/* Compacto pero con aire; el padding sup./izq. deja pasar el listón. */
	padding: 3.4rem 2rem 1.9rem 2.9rem;
}

/* Sin imagen (escritorio) y móvil: una columna, contenido centrado. */
.anl-rc--sin-imagen .anl-rc__grid { grid-template-columns: 1fr; }
.anl-rc--sin-imagen .anl-rc__content { text-align: center; }
/* Título y descripción CONSERVAN su ancho (--anl-*-w) y solo se centran. */
.anl-rc--sin-imagen .anl-rc__title,
.anl-rc--sin-imagen .anl-rc__desc { margin-inline: auto; }
.anl-rc--sin-imagen .anl-rc__form { max-width: none; margin-inline: auto; }

/* ---- Columna de contenido (tipografía de la referencia) ----
   Distribución AUTOMÁTICA: la columna es un flex vertical con `gap`, así el título,
   la descripción y el formulario mantienen un ritmo constante y proporcional SIN
   márgenes por elemento (nunca se enciman ni quedan demasiado juntos). El clamp()
   garantiza un mínimo de separación en móvil y un máximo cómodo en escritorio. */
.anl-rc__content {
	display: flex; flex-direction: column;
	gap: clamp(0.9rem, 2vw, 1.3rem);
}
/* Tipografía AUTORITATIVA (!important): igual que Lista Privada, el popup es un
   componente aislado y debe imponer su tipografía sobre la del tema. Título SIEMPRE
   Roboto Condensed Bold; el resto Raleway con el peso del selector (--anl-body-w). */
.anl-rc__title {
	margin: 0; max-width: var(--anl-title-w);
	font-family: 'Roboto Condensed', system-ui, sans-serif !important;
	font-weight: 700 !important; font-size: 2.25rem; line-height: 1.05; letter-spacing: 0;
	color: #102c50;
}
.anl-rc__desc {
	margin: 0; max-width: var(--anl-desc-w);
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 400) !important; font-size: 0.9375rem; line-height: 1.46; letter-spacing: 0.3px;
	color: #555555;
}

/* Flecha EN EL FLUJO del texto: va inline al final del texto descriptivo, así
   siempre acompaña a la última línea y se re-flowa sola (nunca se descuadra al
   cambiar resolución o longitud del texto). Solo se ajustan tamaño y rotación
   desde el admin (--anl-arrow-w / --anl-arrow-rot[-m]). */
.anl-rc__arrow {
	display: inline-block; vertical-align: middle;
	color: var(--anl-arrow-color, var(--anl-accent, #0284c7)); /* color propio; si no, hereda el acento */
	line-height: 0; margin: 0 0 -1.6rem 0.3rem; /* "cuelga" hacia el input sin inflar el interlineado */
	/* Alineación óptica: desciende un poco para que su extremo superior nazca a ~la
	   mitad de la última letra (no en su parte superior). En rem (absoluto) →
	   consistente en escritorio y móvil, y también cuando acompaña al título. */
	transform: translateY(0.55rem);
}
.anl-rc__arrow svg { display: inline-block; height: auto; vertical-align: middle; }
.anl-rc__arrow--trazo svg { width: var(--anl-arrow-w, 86px); transform: rotate(var(--anl-arrow-rot, 20deg)); }
.anl-rc__arrow--retorno svg { width: var(--anl-arrow-w, 34px); transform: rotate(var(--anl-arrow-rot, 110deg)); }

/* En la pantalla de éxito (leads.js añade .anl-done al formulario) la flecha ya
   cumplió su función de dirigir al formulario: se oculta para no quedar
   "flotando" ni descuadrada. Sin tocar JS. */
.anl-rc:has(.anl-form.anl-done) .anl-rc__arrow { display: none; }

/* ---- Formulario (visual propio; la mecánica la aporta leads.js/leads.css) ---- */
/* Distribución interna del formulario: flex vertical con `gap` (email · CTA ·
   privacidad), con un ritmo un poco más ceñido que el de la columna de contenido.
   El margin-top añade AIRE extra solo entre la descripción y el input (se suma al
   gap de la columna) para que la flecha señale el campo sin quedar pegada a él. */
.anl-rc__form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 24rem; margin-top: 1.6rem; }
.anl-rc__input.anl-input {
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 400) !important;
	background: #fff; border: 1px solid #94a3b8; border-radius: 6px; /* borde fino, más oscuro y definido */
	padding: 0.9rem 1rem; font-size: 1rem;
}
.anl-rc__input.anl-input::placeholder {
	font-family: 'Raleway', system-ui, sans-serif !important;
	font-weight: var(--anl-body-w, 400) !important;
	font-size: 0.9rem !important;
}
/* CTA en Raleway SIEMPRE en negrita (el título es el único Roboto Condensed). */
.anl-rc__cta.anl-submit {
	font-family: 'Raleway', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 1.1875rem;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--anl-accent, #0284c7) 0%, color-mix(in srgb, var(--anl-accent, #0284c7) 65%, #0b3a5e) 100%);
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--anl-accent, #0284c7) 70%, transparent);
}
.anl-rc__privacy.anl-privacy { font-family: 'Raleway', system-ui, sans-serif !important; font-weight: var(--anl-body-w, 400) !important; text-align: left; font-size: 0.78rem; }

/* ---- Imagen del recurso (portada PNG inclinada) ----
   Las portadas se suben en PNG con transparencia: SIN marco/fondo (evita el
   recuadro) y con drop-shadow, que proyecta sombra siguiendo la silueta. */
.anl-rc__media { display: flex; justify-content: center; }
.anl-rc__media img {
	max-width: 100%; height: auto;
	transform: rotate(6deg);
	filter: drop-shadow(0 20px 26px rgb(6 22 39 / 0.38));
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.anl-rc:hover .anl-rc__media img { transform: rotate(3.5deg); }

/* ---- Botón de cierre MINIMALISTA: solo la "X" (sin círculo ni sombra), pero
   conserva el área táctil de 44px de la base .anl-close (accesibilidad). ---- */
.anl-rc__close.anl-close {
	top: 8px; right: 8px;
	background: transparent; border: none; box-shadow: none;
	color: #0f2a43; opacity: 0.7;
	font-size: 30px; line-height: 1; /* X más grande y visible */
}
.anl-rc__close.anl-close:hover { background: transparent; border-color: transparent; color: #0f2a43; opacity: 1; }
.anl-rc__close.anl-close:focus-visible { outline: 3px solid var(--anl-accent, #0284c7); outline-offset: 2px; }

/* ---- Responsive ----
   ≤700px = móvil: se OCULTA la imagen (modal más compacto) y el contenido se
   CENTRA. La flecha sigue en el flujo del texto con su rotación móvil propia. */
@media (max-width: 700px) {
	/* (Sin max-height/overflow interno: recortaría el volado del listón; el
	   contenido de esta plantilla es compacto y el overlay aporta márgenes.) */
	.anl-rc__grid { grid-template-columns: 1fr; gap: 1.1rem; padding: 3.2rem 1.4rem 1.7rem; }
	.anl-rc__media { display: none; } /* imagen oculta en móvil */
	.anl-rc__content { text-align: center; }
	/* Título y descripción CONSERVAN su ancho (--anl-*-w) y solo se centran. */
	.anl-rc__title, .anl-rc__desc { margin-inline: auto; }
	.anl-rc {--anl-desc-w: 30ch; /* móvil */}
	/* La flecha móvil (rotación más pronunciada) "cuelga" más abajo: un pelín más de
	   aire para conservar ~10 px entre su punta y el input, igual que en escritorio. */
	.anl-rc__form { max-width: none; margin-inline: auto; margin-top: 2rem; }

	/* La flecha inline usa su rotación móvil propia (independiente de escritorio). */
	.anl-rc__arrow--trazo svg { width: var(--anl-arrow-w, 72px); transform: rotate(var(--anl-arrow-rot-m, 28deg)); }
	.anl-rc__arrow--retorno svg { width: var(--anl-arrow-w, 30px); transform: rotate(var(--anl-arrow-rot-m, 120deg)); }

	/* El título reduce su tamaño en móvil; el resto del espaciado lo aporta solo el
	   `gap` con clamp() de la columna y del formulario (sin ajustes propios). */
	.anl-rc__title { font-size: 1.85rem; }
}
@media (max-width: 480px) {
	.anl-rc__title { font-size: 1.6rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.anl-rc, .anl-rc__media img { transition: none; }
	.anl-visible .anl-rc--anim-top { animation: none; }
}