/* Publicidad digital v2 — "Una luz en el lugar exacto". Lo compartido vive en v3-system.css */

/* Punto que ilumina el haz en la portada: la camara avanza hacia el y la oscuridad se cierra a su alrededor */
.p2 { --cover-focus: 70% 57%; --cover-focus-x: 70%; }

/* ---------- Texto que alcanza la luz calida (solo el lado cercano a la fuente) ---------- */

.p2-lit {
    justify-self: start;
    padding-right: .12em;
    color: transparent;
    background-image:
        linear-gradient(270deg, rgba(var(--luz-warm), var(--on)) 0%, rgba(var(--luz-warm), calc(var(--on) * .5)) 14%, rgba(var(--luz-warm), 0) 40%),
        linear-gradient(var(--hueso), var(--hueso));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    --on: 0;
    filter: drop-shadow(8px 0 22px rgba(var(--luz), calc(var(--on) * .35)));
    transition: --on 1.6s ease .15s;
}

/* Fuente de luz a la izquierda del texto */
.p2-lit--left {
    padding: 0 0 0 .08em;
    background-image:
        linear-gradient(90deg, rgba(var(--luz-warm), var(--on)) 0%, rgba(var(--luz-warm), calc(var(--on) * .5)) 14%, rgba(var(--luz-warm), 0) 40%),
        linear-gradient(var(--hueso), var(--hueso));
    filter: drop-shadow(-8px 0 22px rgba(var(--luz), calc(var(--on) * .35)));
}

/* ---------- Portada ---------- */

.p2-focus {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at var(--cover-focus), rgba(10, 10, 12, 0) calc(70vmax - var(--enter, 0) * 58vmax), rgba(10, 10, 12, .92) calc(100vmax - var(--enter, 0) * 66vmax));
}

.p2-motes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ---------- Ruido y señal: miles de luces que se apagan hasta dejar un solo haz ---------- */

.p2-signal {
    position: relative;
    height: 340svh;
    background: var(--carbon);
}

.p2-signal__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.p2-signal__canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.p2-signal__beam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 72%;
    width: 1px;
}

.p2-signal__copy {
    position: absolute;
    top: 50%;
    left: var(--gutter);
    width: min(58rem, 64vw);
    transform: translateY(-50%);
}

.p2-says { display: grid; }

.p2-say {
    grid-area: 1 / 1;
    display: grid;
    /* Las tres frases comparten celda: sin esto, las de dos líneas se estiraban al alto de la de tres y sus líneas se separaban */
    align-content: start;
    gap: .06em;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.3rem, 4.3vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.05;
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
    transition: opacity .9s ease, transform 1.3s var(--ease-out), filter 1s ease;
}

.p2-say > span { white-space: nowrap; }
.p2-say.is-on { opacity: 1; transform: none; filter: none; }
.p2-say em { color: var(--ciruela-luz); font-style: italic; font-weight: 300; }
.p2-say--lit em { color: inherit; }
.p2-say--lit.is-lit .p2-lit { --on: 1; }

/* ---------- Canales: la luz cruza la imagen y revela el siguiente momento ---------- */

.p2-channels {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem);
    background: var(--carbon-2);
}

.p2-channels__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}

.p2-channels__frame {
    --frame-h: min(78svh, 48rem);
    position: sticky;
    top: calc((100svh - var(--frame-h)) / 2);
    height: var(--frame-h);
    overflow: hidden;
    isolation: isolate;
}

.p2-shot { --w: 1; }
.p2-shot + .p2-shot {
    --w: 0;
    clip-path: inset(0 calc(100% - var(--w) * 100%) 0 0);
}

/* La puerta iluminada de canal-google.webp queda algo por encima del centro */
.p2-channels [data-slot="B1"] img { object-position: 50% 44%; }
.p2-channels [data-slot="B2"] img { object-position: 50% 40%; }
.p2-channels [data-slot="B3"] img { object-position: 50% 50%; }

.p2-shot img { transform: scale(calc(1.08 - var(--w) * .08)); will-change: transform; }

.p2-channels__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(12, 11, 14, .35) 0%, rgba(12, 11, 14, 0) 30%);
    pointer-events: none;
}

.p2-channels__wipe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 1px;
    opacity: 0;
    transition: opacity .5s ease;
}

.p2-channels__wipe.is-moving { opacity: 1; }

.p2-channels__list { margin: 0; padding: 0; list-style: none; }

.p2-channel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 82svh;
    padding: 3rem 0;
    opacity: .06;
    transition: opacity 1s ease;
}

.p2-channel.is-active { opacity: 1; }

.p2-channel__media { display: none; }

.p2-channel__num {
    color: rgba(var(--luz), .9);
    font-family: var(--serif);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
}

.p2-channel h3 {
    margin: .7rem 0 0;
    font-family: var(--serif);
    font-size: clamp(2.3rem, 3.9vw, 3.9rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.04;
}

.p2-channel h3 em { color: var(--ciruela-luz); font-style: italic; font-weight: 300; }

.p2-channel__name {
    display: block;
    margin-bottom: 1.1rem;
    color: rgba(245, 244, 241, .62);
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .3em;
    line-height: 1.6;
    text-transform: uppercase;
}

.p2-channel__text {
    max-width: 30rem;
    margin: 1.5rem 0 0;
    color: rgba(245, 244, 241, .7);
    font-size: clamp(.98rem, 1.05vw, 1.06rem);
    font-weight: 300;
    line-height: 1.7;
}

.p2-channel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
}

.p2-channel__tags li {
    padding: .42rem .8rem;
    border: 1px solid rgba(245, 244, 241, .18);
    border-radius: 999px;
    color: rgba(245, 244, 241, .72);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.p2-channel__fit {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 0;
    color: rgba(245, 244, 241, .6);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 300;
}

.p2-channel__fit b {
    width: 2.6rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--luz), .85), rgba(var(--luz), 0));
}

/* ---------- Que medimos: la luz deja a oscuras lo que no importa ---------- */

.p2-measure {
    padding: clamp(7rem, 16vh, 10rem) var(--gutter);
    background: radial-gradient(ellipse 50% 55% at 50% 62%, rgba(131, 19, 108, .09), transparent 70%), var(--carbon);
}

.p2-measure__head { max-width: 54rem; margin: 0 auto clamp(3.5rem, 8vh, 5rem); text-align: center; }
.p2-measure__head .v3-kicker { justify-content: center; }
.p2-measure__head .v3-title em { display: block; }
.p2-measure__head .v3-kicker::after { content: ""; width: 2.2rem; height: 1px; background: linear-gradient(270deg, rgba(var(--luz), .9), rgba(var(--luz), 0)); }

.p2-measure__table { max-width: 64rem; margin: 0 auto; }

.p2-measure__labels,
.p2-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 8vw, 7rem);
}

.p2-measure__labels {
    margin-bottom: 1.6rem;
    color: rgba(245, 244, 241, .5);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.p2-measure__labels span:first-child { text-align: right; }

.p2-measure__body { position: relative; }

.p2-measure__rule {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, rgba(245, 244, 241, .08) calc(100% - 90px), rgba(245, 244, 241, 0));
}

.p2-measure__rows { margin: 0; padding: 0; list-style: none; }

.p2-row {
    align-items: baseline;
    padding: clamp(1rem, 2.2vh, 1.5rem) 0;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.p2-row__from {
    color: rgba(245, 244, 241, .5);
    text-align: right;
    transition: opacity 1.2s ease, color 1.2s ease, filter 1.2s ease;
}

.p2-row__to { display: grid; opacity: .2; transition: opacity 1.1s ease; }

.p2-row.is-on .p2-row__from { opacity: .3; color: rgba(245, 244, 241, .42); filter: blur(1.2px); }
.p2-row.is-on .p2-row__to { opacity: 1; }
.p2-row.is-on .p2-lit { --on: 1; }

.p2-measure__note {
    max-width: 34rem;
    margin: clamp(3rem, 7vh, 4.5rem) auto 0;
    color: rgba(245, 244, 241, .55);
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.7;
    text-align: center;
}

/* ---------- Ciclo: la luz da la vuelta y vuelve a empezar ---------- */

.p2-cycle {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    background: linear-gradient(180deg, var(--carbon), var(--carbon-2));
}

.p2-cycle__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.p2-ring {
    position: relative;
    width: min(100%, 32rem);
    aspect-ratio: 1;
    margin: 0 auto;
    --a: 0deg;
    --fh: 50deg;
    --ft: 40deg;
}

.p2-ring__track {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(245, 244, 241, .1);
    border-radius: 50%;
}

/* Tres capas como la luz de las lineas: halo ancho, cuerpo y nucleo. El desenfoque va en el contenedor para no recortarlo con la mascara */
.p2-ring__glow { position: absolute; inset: 0; }

.p2-ring__glow i {
    --c: rgba(190, 128, 64, .55);
    --t: 18px;
    position: absolute;
    inset: calc(var(--t) / -2 + .5px);
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--c) min(var(--ft), calc(var(--a) * .5)), var(--c) max(0deg, calc(var(--a) - var(--fh))), transparent var(--a));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t) - .5px), #000 calc(100% - var(--t) + .5px), #000 calc(100% - .5px), transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--t) - .5px), #000 calc(100% - var(--t) + .5px), #000 calc(100% - .5px), transparent 100%);
}

.p2-ring__glow--wide { filter: blur(14px); }
.p2-ring__glow--mid { filter: blur(2.5px); }
.p2-ring__glow--mid i { --c: rgba(232, 176, 108, .9); --t: 5px; }
.p2-ring__glow--core i { --c: rgb(254, 243, 202); --t: 2px; }

/* Cuando la vuelta se completa, un destello sigue recorriendo el ciclo */
.p2-ring__pulse {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: blur(1.5px);
    transition: opacity 1.4s ease;
}

.p2-ring__pulse i {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--luz-core), .95) 22deg, transparent 44deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1px), transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1px), transparent 100%);
    animation: p2Orbit 9s linear infinite;
    animation-play-state: paused;
}

.p2-ring.is-complete .p2-ring__pulse { opacity: .8; }
.p2-ring.is-complete .p2-ring__pulse i { animation-play-state: running; }

@keyframes p2Orbit { to { transform: rotate(360deg); } }

.p2-ring__mark {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border: 1px solid rgba(245, 244, 241, .3);
    border-radius: 50%;
    background: var(--carbon);
    transition: background-color .8s ease, border-color .8s ease, box-shadow .8s ease;
}

.p2-ring__mark b {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(245, 244, 241, .3);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 300;
    white-space: nowrap;
    transform: translate(calc(-50% + var(--dx) * 1.5rem), calc(-50% + var(--dy) * 1.3rem));
    transition: color .8s ease;
}

.p2-ring__mark.is-lit { border-color: rgb(var(--luz-core)); background: rgb(var(--luz-core)); box-shadow: 0 0 14px rgba(var(--luz), .9); }
.p2-ring__mark.is-lit b { color: rgba(var(--luz), .95); }

.p2-ring__center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    color: rgba(245, 244, 241, .78);
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    font-weight: 300;
    letter-spacing: -.015em;
    line-height: 1.12;
    text-align: center;
    transform: translate(-50%, -50%);
}

.p2-ring__center em { color: var(--ciruela-luz); font-style: italic; }

.p2-cycle__steps { margin: 0; padding: 0; list-style: none; }

/* Apagado = se intuye pero no se lee (regla del 16-10-2026): número y texto al 7 %, título al 8 % */
.p2-cstep {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.6rem 0;
    border-top: 1px solid rgba(245, 244, 241, .1);
}

.p2-cstep:last-child { border-bottom: 1px solid rgba(245, 244, 241, .1); }

.p2-cstep__num {
    color: rgba(245, 244, 241, .07);
    font-family: var(--serif);
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    transition: color .9s ease;
}

.p2-cstep h3 {
    margin: 0 0 .45rem;
    color: rgba(245, 244, 241, .08);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    font-weight: 400;
    line-height: 1.1;
    transition: color .9s ease;
}

.p2-cstep p {
    max-width: 30rem;
    margin: 0;
    color: rgba(245, 244, 241, .07);
    font-size: .94rem;
    font-weight: 300;
    line-height: 1.65;
    transition: color .9s ease;
}

.p2-cstep.is-lit .p2-cstep__num { color: rgba(var(--luz), .95); }
.p2-cstep.is-lit h3 { color: var(--hueso); }
.p2-cstep.is-lit p { color: rgba(245, 244, 241, .7); }

/* ---------- Antes de invertir (seccion clara) ---------- */

.p2-truth {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    color: var(--carbon);
    background:
        radial-gradient(ellipse 45% 55% at 92% 0%, rgba(var(--luz), .18), transparent 70%),
        var(--hueso);
}

.p2-truth .v3-kicker { color: var(--plomo); }
.p2-truth .v3-kicker::before { background: linear-gradient(90deg, var(--ciruela), rgba(131, 19, 108, 0)); }
.p2-truth .v3-title { max-width: 13em; }
.p2-truth .v3-title em { color: var(--ciruela); }
.p2-truth .v3-body { margin-top: 1.4rem; color: rgba(17, 17, 17, .66); }

.p2-truth__media {
    position: sticky;
    top: clamp(6rem, 12vh, 8rem);
    aspect-ratio: 4 / 5;
}

/* Maqueta y esfera de antes-de-invertir.webp, algo por debajo del centro */
.p2-truth__media img { object-position: 50% 56%; }

.p2-truth__list { margin: 3rem 0 0; padding: 0; list-style: none; }

.p2-check {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.9rem 0;
    border-top: 1px solid rgba(17, 17, 17, .12);
}

.p2-check__mark { width: 2.6rem; height: 2.6rem; overflow: visible; }

.p2-check__mark circle,
.p2-check__mark path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
}

.p2-check__mark circle {
    stroke: rgba(17, 17, 17, .16);
    stroke-width: 1;
}

.p2-check__mark path {
    stroke: var(--ciruela);
    stroke-width: 1.6;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s var(--ease-out) .35s;
}

.p2-check.is-checked .p2-check__mark circle { stroke: var(--ciruela); stroke-dashoffset: 0; animation: p2Draw 1s var(--ease-out); }
.p2-check.is-checked .p2-check__mark path { stroke-dashoffset: 0; }

@keyframes p2Draw { from { stroke-dashoffset: 1; } }

.p2-check h3 {
    margin: .25rem 0 .5rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 300;
    letter-spacing: -.015em;
    line-height: 1.1;
}

.p2-check p {
    max-width: 32rem;
    margin: 0;
    color: rgba(17, 17, 17, .66);
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.7;
}

.p2-truth a {
    color: var(--ciruela);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.p2-truth__more {
    margin: 2.4rem 0 0;
    padding-top: 1.9rem;
    border-top: 1px solid rgba(17, 17, 17, .12);
    color: rgba(17, 17, 17, .66);
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 300;
}

/* ---------- Contacto en escena (v3-contact--scene): el mismo lago al amanecer, que anochece mientras sube el formulario ---------- */

.p2 .v3-contact {
    --dusk: 0;
    --sun-y: 0px;
}

.p2 .v3-contact__media img { object-position: 70% 55%; }

/* El dia se funde en el anochecer (mismo encuadre al pixel); debajo espera la rendija encendida */
.p2-day { opacity: calc(1 - var(--dusk)); }

/* El sol baja tras la cresta: la mascara recorta el cielo de la montaña con la misma geometria que la foto */
.p2-sun {
    position: absolute;
    inset: 0;
    -webkit-mask: url("/assets/img/publicidad-v2/contacto-cielo-2k.png") 70% 55% / cover no-repeat;
    mask: url("/assets/img/publicidad-v2/contacto-cielo-2k.png") 70% 55% / cover no-repeat;
    opacity: calc(1 - var(--dusk) * .45);
}

.p2-sun img { transform: translateY(var(--sun-y)); will-change: transform; }

/* En escritorio el anillo se queda fijo mientras la luz da la vuelta completa, con reposo al final */
@media (min-width: 1181px) {
    .p2-cycle { padding-bottom: 0; }
    .p2-cycle__pin { height: 190svh; }
    .p2-cycle__stage { position: sticky; top: 0; height: 100svh; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .p2-cycle__stage { grid-template-columns: 1fr; }
    .p2-ring { width: min(100%, 28rem); margin-bottom: 1rem; }
    .p2-truth { grid-template-columns: 1fr; }
    .p2-truth__media { position: relative; top: 0; order: -1; aspect-ratio: 16 / 10; }
}

@media (max-width: 900px) {
    .p2-channels__stage { grid-template-columns: 1fr; }
    .p2-channels__frame { display: none; }
    .p2-channel { min-height: 0; padding: 0 0 4.5rem; opacity: 1; }
    .p2-channel__media { position: relative; display: block; aspect-ratio: 4 / 5; margin: 0 0 1.8rem; overflow: hidden; }
}

@media (max-width: 820px) {
    /* En movil la portada apila foto y texto (v3-cover--stack): la esfera queda por encima del titular */
    .p2 { --cover-focus: 72% 57%; --cover-stack-pos: 72% 57%; }

    .p2-signal { height: 320svh; }
    .p2-signal__beam { left: 88%; }
    .p2-signal__copy { top: auto; bottom: 16svh; left: 1.5rem; width: calc(88% - 3.5rem); transform: none; }
    .p2-say { font-size: clamp(2rem, 9vw, 2.8rem); }
    .p2-say > span { white-space: normal; }

    .p2-channels,
    .p2-cycle,
    .p2-truth { padding: 5.5rem 1.5rem; }
    .p2-measure { padding: 6rem 1.5rem; }

    .p2-measure__labels,
    .p2-row { column-gap: 2.2rem; }
    .p2-row { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
    .p2-measure__labels { font-size: .54rem; letter-spacing: .18em; }

    .p2-ring { width: min(100%, 22rem); }
    .p2-ring__mark b { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .p2-focus { display: none; }
    .p2-motes { display: none; }
    .p2-cycle { padding-bottom: clamp(6rem, 14vh, 9rem); }
    .p2-cycle__pin { height: auto; }
    .p2-cycle__stage { position: static; height: auto; }
    .p2 .v3-contact { --dusk: 1; }
    .p2-sun { display: none; }
    .p2-signal { height: auto; }
    .p2-signal__stage { position: relative; height: auto; min-height: 100svh; padding: 8rem 0; }
    .p2-signal__beam .v3-beam { --fill: 100%; }
    .p2-signal__copy { position: relative; top: 0; transform: none; }
    .p2-says { gap: 2.4rem; }
    .p2-say { grid-area: auto; opacity: 1; transform: none; filter: none; }
    .p2-lit { --on: 1; transition: none; }
    /* Sin barrido: cada canal muestra su propia imagen */
    .p2-channels__stage { grid-template-columns: 1fr; }
    .p2-channels__frame { display: none; }
    .p2-channels__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 3rem; }
    .p2-channel { min-height: 0; padding: 0; opacity: 1; justify-content: flex-start; }
    .p2-channel__media { position: relative; display: block; aspect-ratio: 4 / 5; margin: 0 0 1.8rem; overflow: hidden; }
    .p2-channel h3 { font-size: clamp(2rem, 2.8vw, 2.8rem); }
    .p2-row__to { opacity: 1; }
    .p2-row__from { opacity: .3; }
    .p2-measure__rule .v3-beam { --fill: 100%; }
    .p2-ring { --a: 360deg; --fh: 0deg; --ft: 0deg; }
    .p2-ring__mark { border-color: rgb(var(--luz-core)); background: rgb(var(--luz-core)); }
    .p2-ring__mark b,
    .p2-cstep__num { color: rgba(var(--luz), .95); }
    .p2-cstep h3 { color: var(--hueso); }
    .p2-cstep p { color: rgba(245, 244, 241, .7); }
    .p2-ring__pulse { display: none; }
    .p2-check__mark circle { stroke: var(--ciruela); }
    .p2-check__mark path { stroke-dashoffset: 0; transition: none; }
}