/*
 * Estilo nuevo en todo el sitio (desde v0.47.0): el lenguaje de la portada alternativa aplicado a las clases que ya
 * usan todas las páginas (plantillas y Elementor), sin tocar su contenido. Todo va bajo body.lnc-en (lnc_estilo_nuevo()).
 * Hero oscuro con linterna que sigue al cursor, títulos que entran palabra por palabra, entradas al hacer scroll
 * (assets/js/estilo-nuevo.js), botones y tarjetas con respuesta al toque, bandas de cierre oscuras con un haz de luz
 * y barra de progreso de lectura. Sin JS o con movimiento reducido, todo queda visible y quieto.
 */
.lnc-en {
	--en-out: cubic-bezier(.23, 1, .32, 1);
	--en-io: cubic-bezier(.77, 0, .175, 1);
	--en-mint: #36D399;
	--en-mint-2: #6EE7B7;
	--en-negro: #0B0C0E;
}
/*
 * Velocidad (v0.48.2): lo del hero se ve desde el primer cuadro (nada arranca en opacidad 0 ni con blur, porque el
 * título, la bajada o el panel son el LCP) y todo lo que se repite se anima con transform u opacity, que van por la
 * placa de video; animar --x/--y o box-shadow repintaba la página en cada cuadro.
 */
@keyframes en-barrido { 0% { transform: translate(18vw, 20vh); } 50% { transform: translate(78vw, 35vh); } 100% { transform: translate(55vw, 70vh); } }
@keyframes en-palabra { from { opacity: .25; } to { opacity: 1; } }
@keyframes en-sube { from { opacity: .3; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes en-panel { from { opacity: .3; translate: 0 40px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes en-latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes en-gira { to { transform: rotate(360deg); } }

/* ---------- Títulos: más grandes y apretados, como en la portada ---------- */
.lnc-en .lnc-h1, .lnc-en .lnc-h1 .elementor-heading-title { letter-spacing: -.045em; line-height: 1; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-h1, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-h1 .elementor-heading-title { font-size: clamp(42px, 6vw, 80px); }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-h1--sm, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-h1--sm .elementor-heading-title { font-size: clamp(38px, 5.2vw, 66px); }
.lnc-en .lnc-h2, .lnc-en .lnc-h2 .elementor-heading-title { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.04; letter-spacing: -.035em; }
/* Palabras inline dentro de un solo bloque (así el título entero cuenta como LCP); el título no se mueve (Chrome demoraba el LCP mientras se animaba). */
.lnc-en .en-w { animation: en-palabra 700ms ease-out both; animation-delay: calc(120ms + var(--i) * 60ms); }

/* ---------- Hero oscuro: la linterna ---------- */
/* Capa 0 con el contenido por encima: en los contenedores de Elementor, z-index -1 quedaba detrás de su fondo. */
.lnc-en .en-luz { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0; width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(#000 calc(100% - 110px), transparent calc(100% - 40px)); mask-image: linear-gradient(#000 calc(100% - 110px), transparent calc(100% - 40px)); }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child > :not(.en-luz) { position: relative; z-index: 1; }
/* Sin mouse: un círculo de luz que se mueve solo (transform). Con mouse (.is-mano): la luz sigue al puntero (--x/--y). */
.lnc-en .en-luz::before { content: ""; position: absolute; left: 0; top: 0; width: 1040px; height: 1040px; margin: -520px 0 0 -520px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(54, 211, 153, .2), rgba(54, 211, 153, .05) 64%, transparent); will-change: transform; animation: en-barrido 11s var(--en-io) infinite alternate; }
.lnc-en .en-luz.is-mano::before { inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; animation: none; will-change: auto; background: radial-gradient(circle 520px at var(--x) var(--y), rgba(54, 211, 153, .2), rgba(54, 211, 153, .05) 45%, transparent 70%); }
.lnc-en .en-luz::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--en-mint) 1.2px, transparent 1.6px); background-size: 28px 28px; opacity: 0; -webkit-mask-image: radial-gradient(circle 260px at var(--x) var(--y), #000 0%, transparent 75%); mask-image: radial-gradient(circle 260px at var(--x) var(--y), #000 0%, transparent 75%); }
.lnc-en .en-luz.is-mano::after { opacity: .55; }
.lnc-en .en-luz { background-image: radial-gradient(ellipse 80% 60% at 50% 120%, rgba(14, 124, 85, .35), transparent 70%), radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: auto, 28px 28px; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child { padding-top: 72px; padding-bottom: 140px; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-lead { animation: en-sube 800ms var(--en-out) 600ms both; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-actions, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-hero__note { animation: en-sube 800ms var(--en-out) 720ms both; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-eyebrow { animation: en-sube 700ms var(--en-out) 60ms both; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-hero__side, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child > .lnc-phone { animation: en-panel 1100ms var(--en-out) 300ms both; }
/* Etiqueta: píldora translúcida con un punto que late (como "Webs · Tiendas · SEO · Tracking") */
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child p.lnc-eyebrow, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-eyebrow p { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(54, 211, 153, .1); box-shadow: inset 0 0 0 1px rgba(54, 211, 153, .3); color: var(--en-mint-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child p.lnc-eyebrow::before, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-eyebrow p::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--en-mint); animation: en-latido 2.2s ease-out infinite; }
/* Panel blanco: se inclina hacia el puntero (estilo-nuevo.js pone --rx / --ry) */
@media (min-width: 601px) {
	.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-panel { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.2deg); }
}
/* Botones del hero: menta y contorno claro */
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-btn--blue, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-bw--blue .elementor-button { background: var(--en-mint); color: #08281B; }
.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-btn--ghost, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-bw--ghost .elementor-button { border-color: rgba(255, 255, 255, .35); }
@media (hover: hover) and (pointer: fine) {
	.lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-btn--blue:hover, .lnc-en.lnc-hero-oscuro .lnc-hero:first-child .lnc-bw--blue .elementor-button:hover { background: var(--en-mint-2); color: #08281B; box-shadow: 0 10px 40px -8px rgba(54, 211, 153, .65); }
}

/* ---------- Botones: responden al toque ---------- */
.lnc-en .lnc .lnc-btn, .lnc-en .lnc .elementor-button { transition: transform 160ms var(--en-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.lnc-en .lnc .lnc-btn:active, .lnc-en .lnc .elementor-button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.lnc-en .lnc .lnc-btn--blue:hover, .lnc-en .lnc .lnc-bw--blue .elementor-button:hover { box-shadow: 0 10px 30px -10px rgba(54, 211, 153, .7); }
}

/* ---------- Tarjetas: se levantan con un borde menta ---------- */
.lnc-en .lnc-card, .lnc-en .lnc-strip, .lnc-en .lnc-case, .lnc-en .lnc-kpi, .lnc-en .lnc-post-card, .lnc-en .lnc-404__link, .lnc-en .lnc-funnel__step, .lnc-en .lnc-dest__card { transition: transform 300ms var(--en-out), box-shadow 300ms ease, border-color 300ms ease; }
@media (hover: hover) and (pointer: fine) {
	.lnc-en .lnc-card:hover, .lnc-en .lnc-strip:hover, .lnc-en .lnc-case:hover, .lnc-en .lnc-404__link:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1.5px var(--en-mint), 0 30px 60px -30px rgba(17, 18, 20, .4); }
	/* Tarjetas del blog: sin caja propia (imagen + texto), así que nada de anillo alrededor; sube la imagen con sombra y el título se pinta. */
	.lnc-en .lnc-post-card:hover { transform: none; box-shadow: none; }
	.lnc-en .lnc-post-card__img { transition: transform 300ms var(--en-out), box-shadow 300ms ease; }
	.lnc-en .lnc-post-card:hover .lnc-post-card__img { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(17, 18, 20, .5); }
	.lnc-en .lnc-post-card:hover .lnc-post-card__t a { color: #0E7C55; }
	.lnc-en .lnc-card--dark:hover, .lnc-en .lnc-dark .lnc-card:hover, .lnc-en .lnc-funnel__step:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1.5px var(--en-mint), 0 30px 60px -30px rgba(0, 0, 0, .7); }
	.lnc-en .lnc-post-card img, .lnc-en .lnc-case img { transition: transform 700ms var(--en-out); }
	.lnc-en .lnc-post-card:hover img, .lnc-en .lnc-case:hover img { transform: scale(1.05); }
}

/* ---------- Secciones oscuras: una luz suave que sigue al puntero ---------- */
.lnc-en .lnc-dark { --x: 30%; --y: 40%; background-image: radial-gradient(circle 560px at var(--x) var(--y), rgba(54, 211, 153, .12), transparent 70%); }

/* ---------- Bandas de cierre: oscuras con un haz de luz que gira ---------- */
.lnc-en .lnc-band:not(.lnc-band--gen) { --x: 50%; --y: 50%; position: relative; isolation: isolate; overflow: hidden; background: var(--en-negro); box-shadow: inset 0 0 0 1px #23262E; }
.lnc-en .lnc-band:not(.lnc-band--gen)::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: conic-gradient(from 0deg, transparent 0deg, rgba(54, 211, 153, .12) 16deg, transparent 38deg, transparent 180deg, rgba(54, 211, 153, .08) 198deg, transparent 220deg); animation: en-gira 24s linear infinite; }
.lnc-en .lnc-band:not(.lnc-band--gen)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle 380px at var(--x) var(--y), rgba(54, 211, 153, .16), transparent 70%); }
.lnc-en .lnc-band:not(.lnc-band--gen) .lnc-band__txt p { color: #BFC3CC; }
.lnc-en .lnc-band:not(.lnc-band--gen) .lnc-btn--white, .lnc-en .lnc-band:not(.lnc-band--gen) .lnc-bw--white .elementor-button { background: var(--en-mint); color: #08281B; }
@media (hover: hover) and (pointer: fine) { .lnc-en .lnc-band:not(.lnc-band--gen) .lnc-btn--white:hover, .lnc-en .lnc-band:not(.lnc-band--gen) .lnc-bw--white .elementor-button:hover { background: var(--en-mint-2); color: #08281B; } }

/* ---------- Entradas al hacer scroll (estilo-nuevo.js marca solo lo que está fuera de pantalla al cargar) ---------- */
/* `translate` (no `transform`) para no pisar el levantado de las tarjetas al pasar el mouse. */
.lnc-en [data-en] { opacity: 0; translate: 0 32px; filter: blur(5px); transition: opacity 850ms var(--en-out), translate 850ms var(--en-out), filter 850ms var(--en-out), transform 300ms var(--en-out), box-shadow 300ms ease; transition-delay: calc(var(--en-i, 0) * 70ms); }
.lnc-en [data-en].is-in { opacity: 1; translate: 0 0; filter: blur(0); }
.lnc-en [data-en].is-in.en-listo { transition-delay: 0ms; filter: none; }

/* ---------- Barra de progreso de lectura ---------- */
.lnc-en .en-progreso { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; height: 3px; pointer-events: none; }
.lnc-en .en-progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--en-mint), var(--en-mint-2)); transform-origin: left; transform: scaleX(0); }

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
	.lnc-en .en-w, .lnc-en .en-luz::before, .lnc-en .lnc-band::before, .lnc-en .lnc-hero:first-child *, .lnc-en .lnc-hero:first-child .lnc-eyebrow p::before { animation: none !important; }
	.lnc-en [data-en] { opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important; }
	.lnc-en .lnc-card, .lnc-en .lnc-strip, .lnc-en .lnc-case, .lnc-en .lnc-post-card { transition: box-shadow 200ms ease; }
	.lnc-en .lnc-card:hover, .lnc-en .lnc-strip:hover, .lnc-en .lnc-case:hover, .lnc-en .lnc-post-card:hover { transform: none !important; }
}