/* Auditoría digital v2 — "La luz rasante". Con luz de frente todo parece en orden; con luz rasante aparecen las fisuras. Lo compartido vive en v3-system.css */

.d2 {
    /* La esfera de hero.webp esta en 1212,572 (72 % 61 %) y el canto iluminado del muro en x 632 */
    --cover-focus: 70% 58%;
    --cover-focus-x: 64%;
    --cover-stack-pos: 62% 50%;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- Luz rasante: la foto con luz de frente debajo y la misma foto con luz rasante encima, revelada desde el lado de la fuente ---------- */
/* El fundido ocupa toda la foto: la luz crece a la vez en toda la superficie, antes cerca de la fuente, sin un borde que avance como una cortina */

.d2-rake { --rake: 0; }
.d2-rake img + img {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--rake) * 200% - 100%), rgba(0, 0, 0, .5) calc(var(--rake) * 200% - 55%), transparent calc(var(--rake) * 200%));
    mask-image: linear-gradient(90deg, #000 calc(var(--rake) * 200% - 100%), rgba(0, 0, 0, .5) calc(var(--rake) * 200% - 55%), transparent calc(var(--rake) * 200%));
}

/* ---------- Informe de estado: escena fija ---------- */

.d2-report {
    position: relative;
    height: 440svh;
    background: var(--carbon);
}

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

.d2-report__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.d2-report__media .v3-slot { position: absolute; inset: 0; }

/* informe-oscuro / informe-luz: en escritorio se ancla a la derecha (la red termina antes de las notas); en móvil se encuadra la rendija y el primer tramo de la red */
.d2-report__media img { object-position: 100% 50%; }

/* La foto encendida: solo se usa sin WebGL (se funde entera) o quieta */
.d2-lit { position: absolute; inset: 0; opacity: 0; }

/* La luz que entra por la rendija y recorre las fisuras (WebGL: la foto apagada y la encendida, descubierta según la distancia por la red) */
.d2-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
}

.d2-cracks.is-ready { opacity: 1; }

/* Sombra para leer: abajo a la izquierda, donde hablan las frases y las notas */
.d2-report__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgba(10, 10, 12, .82), rgba(10, 10, 12, 0) 48%),
        linear-gradient(180deg, rgba(10, 10, 12, .5), rgba(10, 10, 12, 0) 22%);
}

.d2-report {
    /* La rendija encendida hace de filete a la izquierda: los textos empiezan a su derecha */
    --report-left: calc(var(--gutter) + 3.6rem);
}

.d2-report__kicker {
    position: absolute;
    top: clamp(6rem, 14svh, 8.5rem);
    left: var(--report-left);
    margin: 0;
}

/* Marcas del informe: un punto pequeño sobre la grieta (con contorno oscuro, se lee incluso sobre la luz)
   y una línea fina que lleva a su número (anillo cálido, sin fondo), colocado en una zona oscura del muro calculada para cada marca */
.d2-pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.d2-pin {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.d2-pin::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--luz-core));
    box-shadow: 0 0 0 2px rgba(10, 10, 12, .85), 0 0 12px 2px rgba(var(--luz), .7);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .8s var(--ease-out);
}

.d2-pin i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--len, 0px);
    height: 1px;
    background: linear-gradient(90deg, rgba(245, 244, 241, .15), rgba(245, 244, 241, .75));
    box-shadow: 0 0 0 .5px rgba(10, 10, 12, .5);
    transform-origin: 0 50%;
    transform: rotate(var(--ang, 0deg)) scaleX(0);
    transition: transform .9s var(--ease-out) .2s;
}

.d2-pin b {
    position: absolute;
    left: var(--lx, 0px);
    top: var(--ly, 0px);
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(var(--luz-warm), .7);
    border-radius: 50%;
    color: rgb(var(--luz-warm));
    background: none;
    text-shadow: 0 0 6px rgba(8, 8, 10, .9);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .04em;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.85);
    transition: opacity .8s ease .55s, transform 1s var(--ease-out) .55s;
}

.d2-pin.is-on::after { transform: translate(-50%, -50%) scale(1); }
.d2-pin.is-on i { transform: rotate(var(--ang, 0deg)) scaleX(1); }
.d2-pin.is-on b { opacity: 1; transform: translate(-50%, -50%); }

.d2-says {
    position: absolute;
    left: var(--report-left);
    bottom: 11svh;
    display: grid;
    width: min(44rem, 62vw);
}

.d2-say {
    grid-area: 1 / 1;
    align-self: end;
    margin: 0;
    text-wrap: balance;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.5vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.08;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
    transition: opacity .9s ease, transform 1.3s var(--ease-out), filter 1s ease;
}

.d2-say.is-on { opacity: 1; transform: none; filter: none; }
.d2-say em { color: var(--ciruela-luz); font-style: italic; font-weight: 300; }

/* Las notas del informe: cada fisura ocupa el sitio de la frase grande cuando la luz llega a ella (una cada vez), con su
   número en luz cálida encima, el mismo que su marca en el muro */
.d2-notes {
    position: absolute;
    left: var(--report-left);
    bottom: 11svh;
    display: grid;
    width: min(44rem, 62vw);
    margin: 0;
    padding: 0;
    list-style: none;
}

.d2-note {
    grid-area: 1 / 1;
    align-self: end;
    display: grid;
    gap: 1rem;
    margin: 0;
    color: var(--hueso);
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.5vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.08;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
    transition: opacity .9s ease, transform 1.3s var(--ease-out), filter 1s ease;
}

.d2-note b {
    justify-self: start;
    color: rgba(var(--luz-warm), .9);
    font-family: var(--mono);
    font-size: .74rem;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1;
}

.d2-note.is-current { opacity: 1; transform: none; filter: none; }
.d2-report.is-linked .d2-note { opacity: 0; transform: translateY(-8px); filter: blur(5px); }

.d2-report__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- El peso sobre las grietas ---------- */

.d2-weight {
    padding: clamp(7rem, 20vh, 12rem) var(--gutter);
    background: var(--carbon);
    --lit: 0;
}

/* La luz rasante llega desde la izquierda: solo el principio de la frase se calienta */
.d2-weight__text {
    max-width: 22em;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 4.4vw, 4.2rem);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.08;
    background: linear-gradient(90deg, rgb(var(--luz-warm)) calc(var(--lit) * 22% - 22%), var(--hueso) calc(var(--lit) * 22% + 14%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(-10px 0 18px rgba(var(--luz), calc(var(--lit) * .16)));
}

.d2-weight__text em {
    font-style: italic;
    -webkit-text-fill-color: var(--ciruela-luz);
}

/* ---------- Qué analizamos (claro) ---------- */

.d2-scope {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    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 0% 30%, rgba(var(--luz), .16), transparent 70%),
        var(--hueso);
}

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

.d2-scope__media .v3-slot { position: absolute; inset: 0; }
/* analisis.webp: la lupa, la muestra y la esfera, un poco por debajo del centro */
.d2-scope__media img { object-position: 50% 54%; }

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

.d2-areas { margin: 3rem 0 0; padding: 0; list-style: none; }

/* Cada área entra desenfocada y se enfoca al llegar a su sitio, como bajo una lupa */
.d2-area {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 1.2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(17, 17, 17, .12);
    opacity: .38;
    filter: blur(3px);
    transition: opacity 1.4s ease, filter 1.4s var(--glow-ease);
}

.d2-area.is-sharp { opacity: 1; filter: none; }

.d2-area__num {
    color: var(--ciruela);
    font-family: var(--serif);
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
}

.d2-area h3 {
    margin: .1rem 0 .55rem;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    font-weight: 300;
    letter-spacing: -.015em;
    line-height: 1.1;
}

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

.d2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.d2-tags li {
    padding: .38rem .75rem;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 999px;
    color: rgba(17, 17, 17, .72);
    font-size: .76rem;
    font-weight: 400;
    letter-spacing: .01em;
}

.d2-area__link {
    display: inline-block;
    margin-top: 1.1rem;
    color: var(--ciruela) !important;
    font-size: .88rem;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: .22em;
}

/* ---------- Diagnóstico gratuito: la luz barre y deja los resultados detrás ---------- */

.d2-scan {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    background: var(--carbon-2);
    --sweep: 0;
}

.d2-scan__demo {
    position: relative;
    max-width: 52rem;
    margin: clamp(3rem, 7vh, 4.5rem) auto 0;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border: 1px solid rgba(245, 244, 241, .09);
    border-radius: 4px;
    background: rgba(245, 244, 241, .015);
}

.d2-scan__url {
    display: flex;
    align-items: center;
    gap: .15rem;
    min-height: 1.4em;
    margin: 0 0 1.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(245, 244, 241, .1);
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    letter-spacing: -.01em;
}

.d2-scan__url::before {
    content: "https://";
    margin-right: .1rem;
    color: rgba(245, 244, 241, .3);
}

/* El cursor de escritura */
.d2-scan__url i {
    width: 1px;
    height: 1.05em;
    background: rgba(245, 244, 241, .7);
    animation: d2-caret 1.1s steps(1) infinite;
}

.d2-scan.is-typed .d2-scan__url i { opacity: 0; animation: none; }

@keyframes d2-caret { 50% { opacity: 0; } }

/* El barrido es la luz de la web (.v3-beam), en vertical, que cruza los resultados de izquierda a derecha */
.d2-scan__sweep {
    position: absolute;
    top: 6.2rem;
    bottom: 1.2rem;
    left: calc(clamp(1.6rem, 3vw, 2.6rem) + var(--sweep) * (100% - 2 * clamp(1.6rem, 3vw, 2.6rem)));
    width: 1px;
    opacity: calc(min(1, var(--sweep) * 10) * min(1, (1 - var(--sweep)) * 10));
    pointer-events: none;
}

.d2-scan__light { --fill: 100%; }
.d2-scan__light.v3-beam { -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }

.d2-scan__results {
    margin: 0;
    padding: 0;
    list-style: none;
    clip-path: inset(-1rem calc(100% - var(--sweep) * 100%) -1rem -1rem);
}

.d2-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 7.5rem;
    gap: 1.4rem;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(245, 244, 241, .07);
    font-size: .95rem;
    font-weight: 300;
}

.d2-result:first-child { border-top: 0; }
.d2-result span { color: rgba(245, 244, 241, .78); }
.d2-result b { color: rgba(245, 244, 241, .92); font-family: var(--mono); font-size: .82rem; font-weight: 400; }

/* El estado: un punto que se enciende después de que pase la luz */
.d2-result em {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: rgba(245, 244, 241, .4);
    font-size: .74rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: color var(--glow-dur) var(--glow-ease);
}

.d2-result em::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(245, 244, 241, .14);
    transition: background-color var(--glow-dur) var(--glow-ease), box-shadow var(--glow-dur) var(--glow-ease);
}

.d2-result.is-on em { color: rgba(245, 244, 241, .85); }
.d2-result.is-on[data-state="crack"] em::before { background: var(--ciruela-luz); box-shadow: 0 0 12px rgba(176, 74, 151, .7); }
.d2-result.is-on[data-state="warn"] em::before { background: rgb(var(--luz)); box-shadow: 0 0 12px rgba(var(--luz), .7); }
.d2-result.is-on[data-state="ok"] em::before { background: var(--hueso); box-shadow: 0 0 10px rgba(245, 244, 241, .45); }

.d2-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 72rem;
    margin: clamp(3.5rem, 8vh, 5rem) auto 0;
    padding: 0;
    list-style: none;
}

.d2-step span {
    display: block;
    color: rgba(245, 244, 241, .07);
    font-family: var(--serif);
    font-size: clamp(2.2rem, 3vw, 3rem);
    font-style: italic;
    font-weight: 300;
    line-height: .9;
    transition: color .9s ease, text-shadow .9s ease;
}

.d2-step h3 {
    margin: 1rem 0 .5rem;
    color: rgba(245, 244, 241, .08);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 1.7vw, 1.6rem);
    font-weight: 300;
    line-height: 1.15;
    transition: color .9s ease;
}

.d2-step p {
    margin: 0;
    color: rgba(245, 244, 241, .07);
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.65;
    transition: color .9s ease;
}

.d2-step.is-lit span { color: rgba(var(--luz), .95); text-shadow: 0 0 24px rgba(var(--luz), .3); }
.d2-step.is-lit h3 { color: var(--hueso); }
.d2-step.is-lit p { color: rgba(245, 244, 241, .7); }

.d2-scan__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: center;
    margin-top: clamp(3rem, 7vh, 4.5rem);
    text-align: center;
}

.d2-scan__cta p {
    max-width: 24rem;
    margin: 0;
    color: rgba(245, 244, 241, .5);
    font-size: .88rem;
    font-weight: 300;
    line-height: 1.6;
    text-align: left;
}

/* ---------- Niveles: cuanto más baja la luz, más detalle aparece ---------- */

.d2-tiers {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    background: var(--carbon);
}

.d2-tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    margin-top: clamp(3rem, 7vh, 4.5rem);
    align-items: stretch;
}

.d2-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.8rem, 2.6vw, 2.6rem);
    border: 1px solid rgba(245, 244, 241, .09);
    border-radius: 4px;
    background: rgba(245, 244, 241, .015);
    transition: border-color var(--glow-dur) var(--glow-ease), background-color var(--glow-dur) var(--glow-ease);
}

.d2-tier--main { border-color: rgba(176, 74, 151, .35); background: rgba(131, 19, 108, .06); }

html:not(.is-touch) .d2-tier:hover,
.d2-tier.is-focus { border-color: rgba(var(--luz), .32); }

/* La lente: la misma superficie vista con la luz cada vez más baja */
.d2-tier__lens {
    position: relative;
    width: 5.6rem;
    aspect-ratio: 1;
    margin-bottom: 1.6rem;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(245, 244, 241, .05), rgba(245, 244, 241, 0) 70%),
        #1b1a1f;
    box-shadow: inset 0 0 0 1px rgba(245, 244, 241, .1);
    --lens: var(--depth);
}

.d2-tier__lens i,
.d2-tier__lens img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Marcador: una textura rayada que la luz revela desde la izquierda */
.d2-tier__lens i {
    background:
        linear-gradient(118deg, transparent 46%, rgba(10, 10, 12, .9) 47%, transparent 48.5%),
        linear-gradient(64deg, transparent 58%, rgba(10, 10, 12, .8) 59%, transparent 60%),
        linear-gradient(90deg, rgba(var(--luz), .55), rgba(var(--luz), .08));
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--lens) * 145% - 45%), transparent calc(var(--lens) * 145%));
    mask-image: linear-gradient(90deg, #000 calc(var(--lens) * 145% - 45%), transparent calc(var(--lens) * 145%));
    transition: --lens var(--glow-dur) var(--glow-ease);
}

.d2-tier__lens img + img {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--lens) * 145% - 45%), transparent calc(var(--lens) * 145%));
    mask-image: linear-gradient(90deg, #000 calc(var(--lens) * 145% - 45%), transparent calc(var(--lens) * 145%));
}

@property --lens { syntax: "<number>"; inherits: true; initial-value: 0; }

.d2-tier__lens { transition: --lens var(--glow-dur) var(--glow-ease); }
html:not(.is-touch) .d2-tier:hover .d2-tier__lens,
.d2-tier.is-focus .d2-tier__lens { --lens: min(1, calc(var(--depth) + .3)); }

.d2-tier__depth {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    margin: 0;
    color: rgba(245, 244, 241, .55);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.d2-tier__depth span {
    padding: .3rem .6rem;
    border-radius: 999px;
    color: var(--hueso);
    background: var(--ciruela);
    font-size: .62rem;
    letter-spacing: .16em;
}

.d2-tier h3 {
    margin: .9rem 0 .4rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 2.8vw, 2.7rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1;
}

.d2-tier__meta {
    margin: 0 0 1.6rem;
    color: rgba(var(--luz-warm), .85);
    font-size: .86rem;
    font-weight: 400;
}

.d2-tier ul {
    flex: 1;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.d2-tier li {
    position: relative;
    padding: .55rem 0 .55rem 1.2rem;
    border-top: 1px solid rgba(245, 244, 241, .07);
    color: rgba(245, 244, 241, .72);
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.55;
}

.d2-tier li::before {
    content: "";
    position: absolute;
    top: 1.18rem;
    left: 0;
    width: .45rem;
    height: 1px;
    background: rgba(var(--luz), .7);
}

.d2-tier .v3-button,
.d2-tier .v3-textlink { align-self: flex-start; }

/* ---------- ¿Es para ti? (claro) ---------- */

.d2-fit {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    color: var(--carbon);
    background: var(--hueso);
}

.d2-fit .v3-kicker { color: var(--plomo); }
.d2-fit .v3-kicker::before { background: linear-gradient(90deg, var(--ciruela), rgba(131, 19, 108, 0)); }
.d2-fit .v3-title em { color: var(--ciruela); }

.d2-fit__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(3rem, 7vw, 7rem);
    margin-top: clamp(3rem, 7vh, 4.5rem);
}

.d2-fit__col h3 {
    margin: 0 0 1rem;
    color: var(--plomo);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.d2-fit__col ul { margin: 0; padding: 0; list-style: none; }

.d2-fit__col li {
    position: relative;
    padding: 1.1rem 0 1.1rem 2.4rem;
    border-top: 1px solid rgba(17, 17, 17, .12);
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    font-weight: 300;
    line-height: 1.35;
}

/* Una fisura que se sella: la grieta se cierra en ciruela cuando la frase llega al centro */
.d2-fit__col li::before {
    content: "";
    position: absolute;
    top: 1.85rem;
    left: 0;
    width: 1.3rem;
    height: 1px;
    background: linear-gradient(90deg, var(--ciruela) 50%, rgba(17, 17, 17, .18) 50%) 100% 0 / 200% 100%;
    transition: background-position 1.2s var(--glow-ease);
}

.d2-fit__col li.is-on::before { background-position: 0 0; }

.d2-fit__col--no li {
    color: rgba(17, 17, 17, .5);
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
}

.d2-fit__col--no li::before {
    width: .8rem;
    background: rgba(17, 17, 17, .2);
    transition: none;
}

/* ---------- Quién lo revisa ---------- */

.d2-who {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    background: var(--carbon);
    --p: 0;
}

.d2-who__disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 0;
    margin: clamp(3rem, 7vh, 4.5rem) 0 0;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.4vw, 2.3rem);
    font-weight: 300;
    letter-spacing: -.01em;
}

.d2-who__disciplines span {
    color: rgba(245, 244, 241, .06);
    transition: color 1.2s ease, text-shadow 1.2s ease;
}

.d2-who__disciplines span:not(:last-child)::after {
    content: "·";
    margin: 0 .7em;
    color: rgba(245, 244, 241, .06);
}

.d2-who__disciplines span.is-lit { color: var(--hueso); text-shadow: -6px 0 20px rgba(var(--luz), .18); }

/* ---------- Contacto: amanece sobre el muro reparado ---------- */

/* La misma foto apagada y fría, como antes del alba; la luz del sol entra desde la izquierda con la pieza de luz rasante (--rake) */
.d2-predawn { filter: brightness(.5) saturate(.45) contrast(1.06) hue-rotate(-14deg); }

/* El amanecer del contacto es un fundido de toda la escena, no un barrido: una máscara que avanza con el scroll
   se veía pasar a ráfagas con cada salto de la rueda o del dedo. La transición corta suaviza esos saltos */
.d2-rake[data-d2-rake="contact"] img + img {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: var(--rake);
    transition: opacity .45s linear;
}

/* En escritorio la foto se ancla a la izquierda: la frase queda sobre el lago y no cruza el canto del muro (x 638) */
@media (min-width: 821px) { .d2 .v3-contact__media img { object-position: 0% 50%; } }

.d2-form__legal {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(245, 244, 241, .42);
    font-size: .76rem;
    font-weight: 300;
    line-height: 1.6;
}

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

@media (max-width: 1180px) {
    .d2-scope { grid-template-columns: 1fr; }
    .d2-scope__media { position: relative; top: 0; order: -1; aspect-ratio: 16 / 10; }
    .d2-tiers__grid { grid-template-columns: 1fr; max-width: 40rem; }
}

@media (max-width: 820px) {
    /* Más recorrido en móvil: cada nota tiene su tramo de scroll (ver mobileFlow) */
    .d2-report { height: 820svh; --report-left: 2.6rem; }
    .d2-report__media::after {
        background:
            linear-gradient(0deg, rgba(10, 10, 12, .88), rgba(10, 10, 12, 0) 52%),
            linear-gradient(180deg, rgba(10, 10, 12, .78), rgba(10, 10, 12, 0) 40%);
    }
    .d2-says { right: var(--gutter); bottom: 8svh; width: auto; }
    .d2-say { font-size: clamp(1.55rem, 6.8vw, 2.1rem); }
    .d2-notes { right: var(--gutter); bottom: 8svh; width: auto; }
    .d2-note { gap: .8rem; font-size: clamp(1.55rem, 6.8vw, 2.1rem); }
    .d2-pin b { width: 1.8rem; height: 1.8rem; font-size: .64rem; }

    .d2-scope,
    .d2-scan,
    .d2-tiers,
    .d2-fit,
    .d2-who { padding: 5.5rem 1.5rem; }
    .d2-scope__media { aspect-ratio: 4 / 5; }
    .d2-area { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; }

    .d2-scan__demo { padding: 1.3rem 1.1rem; }
    .d2-scan__url { font-size: 1.45rem; }
    .d2-scan__sweep { top: 5.2rem; left: calc(1.1rem + var(--sweep) * (100% - 2.2rem)); }
    .d2-result { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; }
    .d2-result em { grid-column: 1 / -1; }
    .d2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.4rem; }
    .d2-scan__cta { justify-content: flex-start; }

    .d2-fit__cols { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 420px) {
    .d2-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .d2-rake { --rake: 1; }
    .d2-predawn { visibility: hidden; }
    .d2-report { height: auto; }
    .d2-report__stage { position: relative; height: auto; min-height: 100svh; padding: 8rem var(--gutter) 6rem; }
    .d2-lit { opacity: 1; }
    .d2-says { position: relative; inset: auto; width: auto; gap: 1.6rem; margin-top: 3rem; }
    .d2-say { grid-area: auto; opacity: 1; transform: none; filter: none; }
    .d2-notes { position: relative; inset: auto; width: auto; gap: 1.6rem; margin-top: 2.4rem; }
    .d2-note { grid-area: auto; gap: .6rem; font-size: clamp(1.3rem, 2.2vw, 1.8rem); opacity: 1; transform: none; filter: none; }
    /* Quieta, la escena es texto sobre la foto: sin marcas (las notas ya las nombran) y con la foto más oscura */
    .d2-pins { display: none; }
    .d2-report__media::after { background: rgba(10, 10, 12, .74); }
    .d2-weight { --lit: 1; }
    .d2-area { opacity: 1; filter: none; }
    .d2-scan { --sweep: 1; }
    .d2-scan__sweep { display: none; }
    .d2-result em { color: rgba(245, 244, 241, .85); }
    .d2-step span { color: rgba(var(--luz), .95); }
    .d2-step h3 { color: var(--hueso); }
    .d2-step p { color: rgba(245, 244, 241, .7); }
    .d2-fit__col li::before { background-position: 0 0; }
    .d2-who__disciplines span { color: var(--hueso); }
}