/*
 * Lume Digital · «Encendido» · portada (prototipo aprobado prototipos/encendido/, B4).
 * Se carga solo en la portada. Las secciones son grupos del editor con clases `inicio-*` y `lume-estado-*`
 * (estado del arco de luz, assets/js/luz.js).
 */

/* Arco de luz (WebGL) y respaldo estático sin WebGL. */
.luz-lienzo { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.luz-respaldo {
	position: fixed; z-index: 0; top: 50%; right: 6vw; width: min(58vh, 44vw); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; pointer-events: none;
	background: conic-gradient(from 225deg, var(--clorofila) 0 270deg, transparent 270deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
	filter: drop-shadow(0 0 18px rgba(87, 214, 90, .7)) drop-shadow(0 0 60px rgba(87, 214, 90, .35));
}
.con-webgl .luz-respaldo { display: none; }
@media (max-width: 63.99em) { .luz-respaldo { top: 5.5rem; right: 50%; width: 60vw; translate: 50% 0; } }

.lienzo--inicio { --t-display: clamp(2.75rem, .9rem + 5.4vw, 6.5rem); --t-h3: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); }
.lienzo--inicio .is-style-lume-entradilla { color: var(--niebla) !important; }

/* 1 · Hero */
.lienzo > .inicio-hero { position: relative; display: grid; align-content: end; min-height: 100svh; padding-block: 7.5rem clamp(2rem, 4.5vh, 3.5rem); }
.inicio-hero > * { margin: 0; }
.inicio-hero__linea { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem !important; color: var(--niebla); font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); font-weight: 540; font-stretch: 112%; }
.inicio-hero__linea::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--clorofila); box-shadow: 0 0 12px var(--clorofila); }
.inicio-hero h1 { font-size: var(--t-display); font-weight: 760; font-stretch: 120%; line-height: .96; letter-spacing: -.04em; text-wrap: initial; }
.h1__intro { display: block; max-width: 24em; margin-bottom: .5em; color: var(--bruma); font-size: clamp(1.15rem, .8rem + 1.25vw, 1.95rem); font-weight: 620; font-stretch: 108%; line-height: 1.18; letter-spacing: -.015em; text-wrap: balance; }
.h1__b { display: block; opacity: var(--o); text-shadow: 0 0 var(--g) rgba(87, 214, 90, .4); }
.h1__b:nth-child(2) { --o: .45; --g: 0; }
.h1__b:nth-child(3) { --o: .72; --g: 0; }
.h1__b:nth-child(4) {
	--o: 1; --g: 28px;
	background: linear-gradient(100deg, var(--bruma) 40%, #fff 50%, var(--bruma) 60%) 100% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
	padding-bottom: .22em; margin-bottom: -.22em; /* Sitio para la «j» y la «y»: el degradado se pinta solo dentro de la caja. */
}
.inicio-hero__pie { display: grid; grid-template-columns: minmax(0, 35rem) auto; gap: 1.75rem 3.5rem; align-items: end; margin-top: 2.25rem !important; }
.inicio-hero__pie > * { margin: 0; }
.inicio-hero__texto { color: var(--niebla); font-size: var(--t-lead); text-wrap: pretty; }
.inicio-hero__texto strong { color: var(--bruma); font-weight: 600; }
.inicio-hero .is-style-lume-enlaces { margin-top: clamp(2.25rem, 5vh, 4rem) !important; }
/* Plano de un sitio web dentro del arco: dice «hacemos sitios web» sin palabras. */
.plano { position: absolute; z-index: 0; left: 83vw; top: 46vh; width: min(26vh, 19vw); height: auto; overflow: visible; translate: -50% -50%; pointer-events: none; }
.plano__trazo { fill: none; stroke: rgba(139, 234, 140, .55); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.plano__titulo { stroke: rgba(232, 238, 233, .85); stroke-width: 4; stroke-linecap: round; }
.plano__boton { fill: rgba(87, 214, 90, .75); stroke: none; }
.plano__punto { fill: rgba(139, 234, 140, .45); }
@keyframes trazar { from { stroke-dashoffset: 1; } }
@keyframes encender { 0% { opacity: .03; } 55% { text-shadow: 0 0 50px rgba(87, 214, 90, .6); } 100% { opacity: var(--o); } }
@media (prefers-reduced-motion: no-preference) {
	.js .plano__trazo { animation: trazar 1.6s var(--ease) both; animation-delay: calc(1.9s + var(--d, 0s)); }
	.js .plano__titulo { --d: .35s; }
	.js .plano__boton { animation: aparecer .8s var(--ease) 2.8s both; }
	.js .plano__punto { animation: aparecer .6s var(--ease) 2s both; }
	.js .h1__intro { animation: aparecer .9s var(--ease) .1s both; }
	.js .h1__b { animation: encender 1.6s var(--ease) both; }
	.js .h1__b:nth-child(2) { animation-delay: .4s; }
	.js .h1__b:nth-child(3) { animation-delay: .75s; }
	.js .h1__b:nth-child(4) { animation: encender 1.6s var(--ease) 1.1s both, brillo 2.2s var(--ease) 2.2s both; }
	.js .inicio-hero__linea { animation: aparecer .9s var(--ease) both; }
	.js .inicio-hero__pie, .js .inicio-hero .is-style-lume-enlaces { animation: aparecer 1s var(--ease) 1.3s both; }
	.js .inicio-hero .is-style-lume-enlaces { animation-delay: 1.5s; }
}
@media (max-width: 63.99em) {
	.lienzo > .inicio-hero { padding-top: 37vh; background: linear-gradient(to bottom, transparent 22vh, rgba(3, 5, 4, .9) 40vh); }
	.inicio-hero__pie { grid-template-columns: minmax(0, 1fr); }
	.plano { left: 50vw; top: 21vh; width: min(19vh, 40vw); }
}

/* 2 · El problema */
.lienzo > .inicio-senales { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: start; padding-block: clamp(7rem, 18vh, 12rem) clamp(5rem, 12vh, 8rem); }
.inicio-senales > * { margin: 0; }
.inicio-senales__cab { position: sticky; top: 7rem; }
.inicio-senales__cab > * { margin: 0; }
.lienzo .inicio-senales__cab > * + * { margin-top: 1.25rem; }
.inicio-senales__cab .is-style-lume-kicker + * { margin-top: 0; }
.inicio-senales__cuerpo > * { margin: 0; }
.is-style-lume-senales { display: grid; gap: clamp(1.75rem, 4vh, 2.75rem); margin: 0; padding: 0; list-style: none; }
.senal { position: relative; padding-left: 1.75rem; }
.senal::before {
	content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .6rem; border-radius: 50%;
	background: var(--tenue); transition: background-color .5s, box-shadow .5s;
}
.senal.on::before, html:not(.js) .senal::before { background: var(--filamento); box-shadow: 0 0 12px var(--filamento), 0 0 28px rgba(255, 182, 72, .45); }
@property --fin { syntax: "<color>"; inherits: false; initial-value: #7F8B83; }
.senal__frase {
	display: block; font-size: clamp(1.7rem, 1rem + 2.4vw, 3.1rem); font-weight: 700; font-stretch: 108%; line-height: 1.06; letter-spacing: -.025em;
	background: radial-gradient(circle 15rem at var(--x, -40rem) var(--y, -40rem), #fff 0, var(--bruma) 25%, var(--fin, #7F8B83) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; transition: --fin .8s;
	padding-bottom: .22em; margin-bottom: -.22em; /* Sitio para los descendentes de la última línea. */
}
.senal.on .senal__frase, html:not(.js) .senal__frase { --fin: #C9D2CB; }
.senal__costo { display: block; max-width: 32rem; margin-top: .6rem; color: var(--niebla); font-size: 1.02rem; transition: opacity .7s var(--ease) .15s, translate .7s var(--ease) .15s; }
.js .senal:not(.on) .senal__costo { opacity: 0; translate: 0 8px; }
.inicio-senales__remate { position: relative; margin-top: clamp(3rem, 7vh, 5rem) !important; padding-top: 2rem; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 700; font-stretch: 115%; line-height: 1.1; letter-spacing: -.02em; }
.inicio-senales__remate::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, var(--clorofila), rgba(87, 214, 90, .25) 40%, transparent); box-shadow: 0 0 12px rgba(87, 214, 90, .5);
}
.inicio-senales__remate strong { display: block; color: var(--clorofila); font-weight: inherit; text-shadow: 0 0 34px rgba(87, 214, 90, .35); }
@media (max-width: 63.99em) { .lienzo > .inicio-senales { grid-template-columns: minmax(0, 1fr); } .inicio-senales__cab { position: static; } }

/* 3 · Capítulos: resultados y servicios */
.lienzo > .inicio-capitulos { padding-block: 0; }
.inicio-capitulos > * { margin: 0; }
.inicio-capitulos__intro { padding-block: clamp(4rem, 10vh, 7rem) 1rem; }
.inicio-capitulos__intro > * { margin: 0; }
.inicio-capitulos__intro h2 { max-width: min(13em, 46vw); }
.capitulo { display: grid; align-items: center; min-height: 110svh; padding-block: 5rem; }
.capitulo > * { margin: 0; }
.capitulo__texto { max-width: min(36rem, 46vw); }
.capitulo__texto > * { margin: 0; }
.capitulo__kicker { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem !important; color: var(--niebla); font-size: .95rem; font-weight: 560; font-stretch: 112%; }
.capitulo__barra { display: flex; gap: 4px; }
.capitulo__barra i { width: 22px; height: 3px; border-radius: 2px; background: var(--linea-2); }
.capitulo__barra i.on { background: var(--clorofila); box-shadow: 0 0 10px var(--clorofila); }
.capitulo:last-child .capitulo__barra i.on { background: var(--filamento); box-shadow: 0 0 10px var(--filamento); }
.lienzo .capitulo__titulo { font-size: var(--t-h3); font-weight: 760; font-stretch: 120%; line-height: 1; letter-spacing: -.035em; }
.capitulo__lead { margin: 1.2rem 0 1.9rem !important; color: var(--bruma); opacity: .88; font-size: var(--t-lead); text-wrap: pretty; }
.capitulo .servicio h4 { font-size: 1.18rem; }
.capitulo .servicio--pilar h4 { font-size: 1.4rem; }
@media (max-width: 63.99em) {
	.inicio-capitulos__intro h2 { max-width: none; }
	.capitulo { gap: 1.5rem; min-height: auto; padding-block: 3.5rem; }
	.capitulo__texto { max-width: none; }
}

/* Viñetas: escenas dentro del arco (fijas en escritorio, en línea en móvil). */
.vineta {
	width: min(30vw, 26rem); padding: 1.1rem; border: 1px solid var(--linea-2); border-radius: 22px; font-size: .88rem;
	background: linear-gradient(180deg, rgba(12, 18, 14, .82), rgba(7, 12, 9, .72)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(87, 214, 90, .06);
}
.vineta__pie { display: flex; justify-content: space-between; gap: 1rem; margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--linea); color: var(--tenue); font-size: .76rem; }
@media (min-width: 64em) {
	.vineta {
		position: fixed; z-index: 1; left: 73vw; top: 50%; translate: -50% -46%; scale: .96; opacity: 0; visibility: hidden;
		transition: opacity .55s var(--ease), scale .7s var(--ease), translate .7s var(--ease), visibility 0s .55s;
	}
	.capitulo.activo .vineta, html:not(.js) .vineta { opacity: 1; visibility: visible; scale: 1; translate: -50% -50%; transition: opacity .7s var(--ease) .15s, scale .8s var(--ease) .15s, translate .8s var(--ease) .15s, visibility 0s; }
	html:not(.js) .vineta { position: static; translate: none; }
	html:not(.js) .capitulo { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 63.99em) { .vineta { order: -1; justify-self: center; width: 100%; max-width: 26rem; } }

/* Escena 1: búsqueda */
.busq__barra { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--linea-2); border-radius: 999px; background: rgba(232, 238, 233, .06); }
.busq__barra svg { flex: none; width: 1rem; height: 1rem; color: var(--niebla); }
.busq__texto { overflow: hidden; color: var(--bruma); white-space: nowrap; }
.busq__cursor { width: 2px; height: 1.1em; background: var(--clorofila); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.busq__res { display: grid; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.busq__res li { padding: .65rem .8rem; border: 1px solid var(--linea); border-radius: 12px; background: rgba(232, 238, 233, .02); transition: border-color .6s, background-color .6s, box-shadow .6s, opacity .5s, translate .5s var(--ease); }
.busq__res b { display: block; color: var(--niebla); font-size: .84rem; font-weight: 600; }
.busq__res i { display: block; height: 6px; margin-top: .4rem; border-radius: 3px; background: rgba(232, 238, 233, .12); }
.busq__res i + i { width: 70%; }
.busq__res .tuyo b { color: var(--bruma); }
.vineta.paso-2 .busq__res .tuyo { border-color: var(--linea-verde); background: rgba(87, 214, 90, .08); box-shadow: 0 0 30px -6px rgba(87, 214, 90, .45); }
.vineta.paso-2 .busq__res .tuyo b { color: var(--clorofila); }
.busq__ia { margin-top: .6rem; padding: .75rem .85rem; border: 1px solid var(--linea-verde); border-radius: 12px; background: linear-gradient(135deg, rgba(87, 214, 90, .12), rgba(255, 182, 72, .06)); transition: opacity .6s var(--ease), translate .6s var(--ease); }
.js .vineta--busqueda:not(.paso-3) .busq__ia { opacity: 0; translate: 0 8px; }
.busq__ia span { display: inline-flex; align-items: center; gap: .4rem; color: var(--clorofila-2); font-size: .74rem; font-weight: 600; }
.busq__ia span::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--clorofila); box-shadow: 0 0 8px var(--clorofila); }
.busq__ia p { margin: .35rem 0 0; color: var(--bruma); font-size: .86rem; line-height: 1.45; }
.js .vineta--busqueda .busq__res li { opacity: .25; translate: 0 6px; }
.js .vineta--busqueda.paso-1 .busq__res li { opacity: 1; translate: 0 0; }
.js .vineta--busqueda.paso-1 .busq__res li:nth-child(2) { transition-delay: .12s; }
.js .vineta--busqueda.paso-1 .busq__res li:nth-child(3) { transition-delay: .24s; }

/* Escena 2: el mensaje se ordena */
.pagina-mini { position: relative; display: grid; gap: .55rem; padding: .8rem; border: 1px solid var(--linea-2); border-radius: 14px; background: rgba(3, 5, 4, .6); }
.vineta--mensaje .pagina-mini { margin-right: 4.5rem; }
.pagina__barra { display: flex; gap: 5px; padding-bottom: .55rem; border-bottom: 1px solid var(--linea); }
.pagina__barra i { width: 7px; height: 7px; border-radius: 50%; background: var(--linea-2); }
.pieza { position: relative; border-radius: 8px; transition: translate 1s var(--ease), rotate 1s var(--ease), opacity .6s, background-color .6s, border-color .6s; transition-delay: calc(var(--i) * 90ms); }
.pieza--titulo { width: 78%; height: 18px; background: var(--bruma); }
.pieza--sub { width: 58%; height: 8px; background: rgba(232, 238, 233, .35); }
.pieza--cta { width: 34%; height: 22px; border-radius: 999px; background: var(--clorofila); box-shadow: 0 0 18px rgba(87, 214, 90, .45); }
.pieza--tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pieza--tarjetas i { height: 44px; border: 1px solid var(--linea-2); border-radius: 8px; background: rgba(232, 238, 233, .04); }
.pieza__et {
	position: absolute; right: -.2rem; top: 50%; translate: 100% -50%; padding: .15rem .45rem; border-radius: 6px; opacity: 0; white-space: nowrap;
	background: rgba(87, 214, 90, .14); color: var(--clorofila-2); font-size: .68rem; font-weight: 600; transition: opacity .5s var(--ease) calc(.8s + var(--i) * 90ms);
}
.vineta--mensaje.orden .pieza__et, html:not(.js) .pieza__et { opacity: 1; }
.js .vineta--mensaje:not(.orden) .pieza { translate: var(--dx) var(--dy); rotate: var(--r); opacity: .55; }
.js .vineta--mensaje:not(.orden) .pieza--titulo { background: rgba(232, 238, 233, .35); }
.js .vineta--mensaje:not(.orden) .pieza--cta { background: rgba(232, 238, 233, .18); box-shadow: none; }

/* Escena 3: medición real */
.medida__que { margin: 0; color: var(--niebla); }
.medida__cifra {
	display: flex; align-items: baseline; gap: .4rem; margin: .2rem 0 .1rem; color: #fff; font-size: clamp(3rem, 2rem + 3vw, 4.6rem); font-weight: 760; font-stretch: 118%;
	line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(87, 214, 90, .35);
}
.medida__cifra small { color: var(--niebla); font-size: .4em; font-weight: 600; letter-spacing: 0; }
.escala { position: relative; height: 8px; margin: 1.1rem 0 .4rem; border-radius: 4px; background: linear-gradient(90deg, rgba(87, 214, 90, .45) 0 41.6%, rgba(255, 182, 72, .45) 41.6% 66.6%, rgba(255, 106, 72, .4) 66.6%); }
.escala__aguja { position: absolute; top: 50%; left: var(--pos, 0%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(87, 214, 90, .35), 0 0 16px #fff; transition: left 1.4s var(--ease); }
.escala__marcas { display: flex; justify-content: space-between; color: var(--tenue); font-size: .72rem; font-variant-numeric: tabular-nums; }
.medida__veredicto { margin: .8rem 0 0; color: var(--bruma); font-size: .9rem; }
.medida__datos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .9rem 0 0; }
.medida__datos div { padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 10px; background: rgba(232, 238, 233, .04); }
.medida__datos dt { color: var(--tenue); font-size: .72rem; }
.medida__datos dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Escena 4: el sitio sigue encendido */
.vineta--cuidado .latido { margin: -.2rem 0 .4rem; }
.vineta--cuidado .latido path { stroke-dashoffset: 420; }
.vineta--cuidado.vivo .latido path { animation: latir 2.6s linear infinite; }
html:not(.js) .vineta--cuidado .latido path { stroke-dashoffset: 0; }
.bitacora { display: grid; align-content: start; gap: .4rem; min-height: 12.6rem; margin: 0; padding: 0; list-style: none; }
.bitacora li { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 10px; background: rgba(232, 238, 233, .035); animation: entrada .55s var(--ease) both; }
.bitacora li::before {
	content: ""; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: rgba(87, 214, 90, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2357D65A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.bitacora li:first-child { border-color: var(--linea-verde); background: rgba(87, 214, 90, .07); }
@keyframes entrada { from { opacity: 0; translate: 0 -8px; } }

/* 4 · Autoevaluación (estilos del bloque en autoevaluacion.css) */
.lienzo > .inicio-evaluacion { padding-block: clamp(6rem, 14vh, 10rem); }
.inicio-evaluacion__aviso { display: flex; align-items: baseline; gap: .6rem; color: var(--niebla); font-size: .92rem; }
.inicio-evaluacion__aviso::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--filamento); translate: 0 -1px; }

/* 5 · Método */
.lienzo > .inicio-metodo { overflow-x: clip; padding-block: clamp(6rem, 14vh, 10rem); }
.inicio-metodo .ruta-marco { margin-top: clamp(3rem, 7vh, 4.5rem) !important; }
.inicio-metodo .ruta__linea { right: -50vw; }
.inicio-metodo__pie { margin-top: 3.5rem !important; color: var(--filamento); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 700; font-stretch: 115%; letter-spacing: -.02em; text-shadow: 0 0 30px rgba(255, 182, 72, .35); }
@media (max-width: 63.99em) { .inicio-metodo .ruta__linea { right: auto; } }

/* 6 · Activos digitales */
.lienzo > .inicio-control { padding-block: clamp(6rem, 14vh, 10rem); }

/* 7 · Para quién */
.inicio-para > * { margin: 0; }
.inicio-para .is-style-lume-kicker + * { margin-top: 0; }
.inicio-para .lume-rejilla { margin-top: clamp(2rem, 5vh, 3rem); }
.inicio-para__nota { max-width: 44rem; margin-top: 2rem !important; color: var(--niebla); font-size: 1.05rem; }

/* 8 · Cierre de la portada: el arco se enciende detrás; sin WebGL queda el haz del cierre interior. */
.cierre-int--inicio { display: grid; align-content: center; justify-items: center; min-height: 100svh; padding-block: 8rem; }
.cierre-int--inicio .h2 { max-width: 11.5em; font-size: clamp(2.4rem, 1rem + 4.8vw, 6rem); text-shadow: 0 0 60px rgba(3, 5, 4, .95); }
.con-webgl .cierre-int--inicio::before, .con-webgl .cierre-int--inicio::after { display: none; }

/* Alto contraste y móvil */
@media (forced-colors: active) {
	.senal__frase, .h1__b:nth-child(4) { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
	.luzita { forced-color-adjust: none; }
}
@media (max-width: 63.99em) {
	.vineta { background: rgba(9, 14, 11, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}