/* Home v3: estilos propios de la home. Lo compartido vive en v3-system.css */

/* ---------- Hero ---------- */

.v3-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 100svh;
    padding: 8rem var(--gutter) 7rem;
    overflow: hidden;
    isolation: isolate;
    --lx: 70%;
    --ly: 58%;
    --lr: 30rem;
}

.v3-hero__media {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.v3-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
    transform: scale(1.08);
    filter: brightness(.55) saturate(.8);
    transition: transform 6s cubic-bezier(.22, .61, .36, 1), filter 3.2s ease;
}

.is-lit .v3-hero__media img { transform: scale(1); filter: brightness(1) saturate(1); }

.v3-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(17, 17, 17, .72) 0%, rgba(17, 17, 17, .32) 38%, transparent 62%),
        linear-gradient(0deg, rgba(17, 17, 17, .72) 0%, transparent 28%),
        linear-gradient(180deg, rgba(17, 17, 17, .35) 0%, transparent 20%);
}

.v3-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(circle var(--lr) at var(--lx) var(--ly), rgba(10, 9, 12, 0) 0%, rgba(10, 9, 12, .14) 36%, rgba(10, 9, 12, .68) 100%);
}

.v3-hero__glow {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(circle calc(var(--lr) * .55) at var(--lx) var(--ly), rgba(var(--luz), .34) 0%, rgba(var(--luz), .12) 38%, rgba(var(--luz), 0) 72%);
    mix-blend-mode: screen;
    opacity: .5;
    transition: opacity 1.2s ease;
}

.v3-hero.has-pointer .v3-hero__glow { opacity: 1; }

.v3-firefly {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(var(--luz-core));
    box-shadow: 0 0 10px 2px rgba(var(--luz), .95), 0 0 36px 10px rgba(var(--luz), .35);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--fx, -100px), var(--fy, -100px), 0) translate(-50%, -50%);
    transition: opacity .5s ease, width .35s var(--ease-out), height .35s var(--ease-out);
}

.v3-hero.has-pointer { cursor: none; }
.v3-hero.has-pointer a,
.v3-hero.has-pointer button { cursor: pointer; }
.v3-hero.has-pointer .v3-firefly { opacity: 1; }
.v3-hero.is-over-link .v3-firefly { width: 4px; height: 4px; opacity: .55; }

.v3-hero__content { position: relative; max-width: 40rem; }

.v3-hero__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(3.1rem, 6.2vw, 6.6rem);
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: .98;
}

.v3-hero__pillars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    margin: 1.8rem 0 0;
    color: rgba(245, 244, 241, .86);
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    font-weight: 300;
    letter-spacing: .04em;
}

.v3-hero__pillars i { width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--luz), .9); }

.v3-hero__intro {
    max-width: 29rem;
    margin: 1.3rem 0 2.4rem;
    color: rgba(245, 244, 241, .76);
    font-size: clamp(.98rem, 1.05vw, 1.06rem);
    font-weight: 300;
    line-height: 1.7;
}

.v3-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; }

.v3-aside--hero {
    position: absolute;
    top: max(21rem, 44%);
    right: var(--gutter);
}

.v3-hero__foot {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 2.3rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: rgba(245, 244, 241, .6);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .26em;
    line-height: 1.9;
    text-transform: uppercase;
}

.v3-hero__motto {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-align: left;
}

.v3-hero__motto::before {
    content: "";
    width: 3.5rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--luz), 0), rgba(var(--luz), .8));
}


/* ---------- Clientes ---------- */

.v3-clients {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: 1.9rem var(--gutter);
    color: var(--carbon);
    background: var(--niebla);
}

.v3-clients__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.v3-clients__track {
    display: flex;
    width: max-content;
    animation: v3Marquee 69s linear infinite; /* 15-10-2026: más lento (antes 46s) */
}

.v3-clients__track span {
    padding: 0 clamp(1.6rem, 3vw, 3rem);
    color: rgba(42, 38, 51, .72);
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    font-weight: 400;
    letter-spacing: .06em;
    white-space: nowrap;
}

.v3-clients:hover .v3-clients__track { animation-play-state: paused; }

@keyframes v3Marquee { to { transform: translateX(-50%); } }

/* ---------- Manifiesto ---------- */

.v3-manifesto {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 clamp(2rem, 6vw, 6rem);
    padding: clamp(7rem, 16vh, 11rem) var(--gutter);
    background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(131, 19, 108, .09), transparent 70%), var(--carbon);
}

.v3-manifesto__rule { position: relative; width: 1px; background: rgba(245, 244, 241, .08); }

.v3-manifesto__text {
    max-width: 21em;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.9vw, 4rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.16;
}

.v3-word { opacity: .06; transition: opacity .5s ease, text-shadow .8s ease; }
.v3-word.is-on { opacity: 1; }

/* Firma (15-10-2026): como la de la cabecera (libro de marca: la ciruela en línea y «Big Plum Digital» en Inter negrita),
   más pequeña y apagada */
.v3-manifesto__sign {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: .75em;
    margin: 2.6rem 0 0;
    color: rgba(245, 244, 241, .5);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}
.v3-manifesto__sign img { width: auto; height: 1.77em; margin-top: -.3em; opacity: .5; }

/* ---------- Problema ---------- */

.v3-problem {
    position: relative;
    min-height: clamp(38rem, 92svh, 58rem);
    display: grid;
    align-items: center;
    padding: 7rem var(--gutter);
    overflow: hidden;
    isolation: isolate;
}

.v3-problem__media { position: absolute; inset: 0; z-index: -1; }
.v3-problem__media img { width: 100%; height: 118%; object-fit: cover; object-position: 60% center; will-change: transform; }
.v3-problem__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(17, 17, 17, .9) 0%, rgba(17, 17, 17, .62) 36%, rgba(17, 17, 17, .12) 62%, rgba(17, 17, 17, .45) 100%),
        linear-gradient(180deg, var(--carbon) 0%, transparent 16%, transparent 84%, var(--carbon-2) 100%);
}

.v3-problem__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 3rem;
    align-items: end;
}

.v3-problem__copy { max-width: 34rem; }
.v3-problem__copy .v3-body { margin-top: 1.6rem; }

.v3-problem__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.v3-problem__list li {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid rgba(245, 244, 241, .16);
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    font-weight: 300;
    will-change: transform, filter, opacity;
}

.v3-problem__list li span {
    color: rgba(var(--luz), .8);
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
}

.v3-aside--problem { position: absolute; top: 7rem; right: var(--gutter); }

/* ---------- Servicios (seccion clara) ---------- */

.v3-services {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(5rem, 12vh, 8rem);
    color: var(--carbon);
    background:
        radial-gradient(ellipse 45% 55% at 92% 0%, rgba(var(--luz), .18), transparent 70%),
        var(--hueso);
}

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

.v3-services__head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2rem 4rem;
    align-items: end;
    margin-bottom: clamp(3rem, 7vh, 4.5rem);
}

.v3-services__head .v3-title { max-width: 14em; }
.v3-services__head .v3-body { justify-self: end; }

.v3-services__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17, 17, 17, .12); }

.v3-service {
    position: relative;
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1.25fr) minmax(0, 1fr) 2rem;
    gap: 1.6rem;
    align-items: center;
    padding: clamp(1.4rem, 3vh, 1.9rem) 1rem;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
    --mx: 50%;
}

.v3-service::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle 24rem at var(--mx) 50%, rgba(var(--luz), .34), rgba(var(--luz), .1) 40%, transparent 72%);
    opacity: 0;
    transition: opacity .6s ease;
}

.v3-service::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(131, 19, 108, 0), var(--ciruela) 35%, rgba(var(--luz), 1) 75%, rgba(var(--luz), 0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s var(--ease-curtain);
}

.v3-service__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(17, 17, 17, .14);
    border-radius: 50%;
    color: var(--plomo);
    transition: color .5s ease, border-color .5s ease, background-color .5s ease, box-shadow .6s ease;
}

.v3-service__icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.4; }
.v3-service__name { font-family: var(--serif); font-size: clamp(1.45rem, 2.3vw, 2.3rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.1; transition: transform .7s var(--ease-out), color .5s ease; }
.v3-service__desc { color: rgba(17, 17, 17, .58); font-size: .92rem; font-weight: 300; line-height: 1.6; transition: color .5s ease; }
.v3-service__arrow { display: grid; place-items: center; color: rgba(17, 17, 17, .45); transition: transform .7s var(--ease-curtain), color .5s ease; }
.v3-service__arrow svg { width: 1.2rem; height: 1.2rem; }

html:not(.is-touch) .v3-service:hover::before,
.v3-service.is-focus::before,
.v3-service:focus-visible::before { opacity: 1; }
html:not(.is-touch) .v3-service:hover::after,
.v3-service.is-focus::after,
.v3-service:focus-visible::after { transform: scaleX(1); }
html:not(.is-touch) .v3-service:hover .v3-service__icon,
.v3-service.is-focus .v3-service__icon,
.v3-service:focus-visible .v3-service__icon { color: #fff; border-color: var(--ciruela); background-color: var(--ciruela); box-shadow: 0 10px 26px -12px rgba(131, 19, 108, .8); }
html:not(.is-touch) .v3-service:hover .v3-service__name,
.v3-service.is-focus .v3-service__name,
.v3-service:focus-visible .v3-service__name { transform: translateX(.6rem); }
html:not(.is-touch) .v3-service:hover .v3-service__desc,
.v3-service.is-focus .v3-service__desc,
.v3-service:focus-visible .v3-service__desc { color: rgba(17, 17, 17, .82); }
html:not(.is-touch) .v3-service:hover .v3-service__arrow,
.v3-service.is-focus .v3-service__arrow,
.v3-service:focus-visible .v3-service__arrow { color: var(--ciruela); transform: translate(.2rem, -.2rem); }
.v3-service:focus-visible { outline: 1px solid var(--ciruela); outline-offset: -1px; }

/* En pantallas tactiles todas las partes de la fila se encienden y se apagan al mismo ritmo */
html.is-touch .v3-service::before,
html.is-touch .v3-service::after,
html.is-touch .v3-service__icon,
html.is-touch .v3-service__name,
html.is-touch .v3-service__desc,
html.is-touch .v3-service__arrow {
    transition-duration: var(--glow-dur);
    transition-timing-function: var(--glow-ease);
}

/* ---------- Proceso ---------- */

.v3-process {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    background:
        radial-gradient(ellipse 40% 30% at 0% 100%, rgba(131, 19, 108, .08), transparent 70%),
        linear-gradient(180deg, var(--carbon-2), var(--carbon));
    --gap: clamp(3rem, 7vw, 7rem);
}

.v3-process__sticky {
    position: sticky;
    top: clamp(6rem, 15vh, 9rem);
    align-self: start;
}

.v3-process__now {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(245, 244, 241, .12);
}

.v3-process__num {
    color: rgba(var(--luz), .9);
    font-family: var(--serif);
    font-size: clamp(3.4rem, 5vw, 5rem);
    font-weight: 300;
    font-style: italic;
    line-height: .8;
}

.v3-process__text strong { display: block; margin-bottom: .6rem; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 400; line-height: 1.1; }
.v3-process__text span { display: block; max-width: 22rem; color: rgba(245, 244, 241, .66); font-size: .95rem; font-weight: 300; line-height: 1.65; }

.v3-process__now > * { transition: opacity .45s ease, transform .6s var(--ease-out), filter .45s ease; }
.v3-process__now.is-changing > * { opacity: 0; transform: translateY(10px); filter: blur(4px); }

.v3-process__ticks { display: flex; gap: .5rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.v3-process__ticks li { width: 2.2rem; height: 2px; background: rgba(245, 244, 241, .14); transition: background-color .6s ease, width .6s var(--ease-out); }
.v3-process__ticks li.is-active { width: 3.6rem; background: rgba(var(--luz), .9); }

.v3-process__steps {
    position: relative;
    display: grid;
    gap: clamp(4rem, 12vh, 8rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rail de luz en el eje central, alineado con la rendija de la pausa */
.v3-rail {
    position: absolute;
    top: clamp(6rem, 14vh, 9rem);
    bottom: clamp(6rem, 14vh, 9rem);
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, rgba(245, 244, 241, .07) calc(100% - 90px), rgba(245, 244, 241, 0));
    pointer-events: none;
}

.v3-step figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0d0c0f;
}

.v3-step img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 2.6s var(--ease-out), filter 2.2s ease; }
.v3-step.is-open img { transform: scale(1); }
.v3-light { position: absolute; inset: 0; pointer-events: none; }
.v3-step__caption { display: none; }

/* 01 · Rendija: se abre desde el centro y la luz viaja a los bordes */
.v3-step[data-light="slit"] figure { clip-path: inset(0 50% 0 50%); transition: clip-path 1.8s var(--ease-out); }
.v3-step[data-light="slit"].is-open figure { clip-path: inset(0 0 0 0); }
.v3-step[data-light="slit"] .v3-light::before,
.v3-step[data-light="slit"] .v3-light::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgb(var(--luz-core));
    box-shadow: 0 0 12px 2px rgba(var(--luz), .9), 0 0 42px 8px rgba(var(--luz), .35);
    transition: left 1.8s var(--ease-out), opacity .7s ease .95s;
}
.v3-step[data-light="slit"].is-open .v3-light::before { left: 1px; opacity: 0; }
.v3-step[data-light="slit"].is-open .v3-light::after { left: calc(100% - 1px); opacity: 0; }

/* 02 · Amanecer: la luz baja de arriba abajo */
.v3-step[data-light="dawn"] img { filter: brightness(.55); }
.v3-step[data-light="dawn"].is-open img { filter: brightness(1); }
.v3-step[data-light="dawn"] .v3-light { background: #0d0c0f; transform: translateY(0); transition: transform 2.4s cubic-bezier(.65, 0, .25, 1); }
.v3-step[data-light="dawn"] .v3-light::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 45%;
    background: linear-gradient(180deg, rgba(var(--luz), 0), rgba(var(--luz), .22));
}
.v3-step[data-light="dawn"] .v3-light::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--luz), .2), rgb(var(--luz-core)) 50%, rgba(var(--luz), .2));
    box-shadow: 0 0 18px 4px rgba(var(--luz), .6);
}
.v3-step[data-light="dawn"].is-open .v3-light { transform: translateY(101%); }

/* 03 · Tira de luz: barrido lateral que deja una tira calida en el borde */
.v3-step[data-light="strip"] .v3-light { background: #0d0c0f; transform: translateX(0); transition: transform 2.2s cubic-bezier(.65, 0, .25, 1); }
.v3-step[data-light="strip"] .v3-light::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 35%;
    background: linear-gradient(270deg, rgba(var(--luz), .25), rgba(var(--luz), 0));
}
.v3-step[data-light="strip"] .v3-light::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 3px;
    background: rgb(var(--luz-core));
    box-shadow: 0 0 14px 3px rgba(var(--luz), .85), 0 0 60px 12px rgba(var(--luz), .3);
}
.v3-step[data-light="strip"].is-open .v3-light { transform: translateX(101%); }
.v3-step[data-light="strip"] figure::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(var(--luz-core), .2), rgb(var(--luz-core)) 50%, rgba(var(--luz-core), .2));
    box-shadow: 0 0 16px 3px rgba(var(--luz), .7), -40px 0 80px -10px rgba(var(--luz), .35);
    opacity: 0;
}
/* 15-10-2026: se enciende cuando llega el barrido y se apaga (antes se quedaba fija) */
.v3-step[data-light="strip"].is-open figure::after { animation: v3StripOut 2.6s ease 1.7s both; }
@keyframes v3StripOut { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* 04 · Revelado: la imagen se expone desde la oscuridad con un destello calido */
.v3-step[data-light="develop"] img { filter: brightness(0) sepia(0) blur(10px); }
.v3-step[data-light="develop"].is-open img { animation: v3Develop 3s ease forwards; }
.v3-step[data-light="develop"] .v3-light {
    background: radial-gradient(ellipse 45% 40% at 34% 72%, rgba(var(--luz), .85), rgba(var(--luz), .25) 45%, transparent 75%);
    mix-blend-mode: screen;
    opacity: 0;
}
.v3-step[data-light="develop"].is-open .v3-light { animation: v3Bloom 3s ease forwards; }

@keyframes v3Develop {
    0% { filter: brightness(0) sepia(0) blur(10px); }
    45% { filter: brightness(1.35) sepia(.3) blur(2px); }
    100% { filter: brightness(1) sepia(0) blur(0); }
}

@keyframes v3Bloom {
    0% { opacity: 0; }
    40% { opacity: .9; }
    100% { opacity: 0; }
}

/* ---------- Pausa: rendija de luz en el muro ---------- */

.v3-pause {
    position: relative;
    height: clamp(34rem, 56.25vw, 100svh);
    overflow: hidden;
    isolation: isolate;
    background: var(--carbon);
    --p: 0;
}

.v3-pause__photo {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.v3-pause__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
}

/* La luz baja por la pared desde la rendija (--edge) y su reflejo en el suelo sube a su encuentro, como en un espejo
   (--refl = el suelo + lo que le falta a la luz para llegar a él); se juntan en la línea del suelo (15-10-2026) */
.v3-pause__on {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--edge, 0px) - 90px), transparent var(--edge, 0px)), linear-gradient(180deg, transparent var(--refl, 99999px), #000 calc(var(--refl, 99999px) + 90px));
    mask-image: linear-gradient(180deg, #000 calc(var(--edge, 0px) - 90px), transparent var(--edge, 0px)), linear-gradient(180deg, transparent var(--refl, 99999px), #000 calc(var(--refl, 99999px) + 90px));
}

.v3-pause__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--carbon) 0%, rgba(17, 17, 17, 0) 14%, rgba(17, 17, 17, 0) 84%, var(--carbon) 100%);
}

.v3-pause__line {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 42%;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(4rem, 10vw, 9rem) minmax(0, 1fr);
    align-items: center;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 4.2vw, 4.4rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.05;
    transform: translateY(-50%);
}

/* "ruido." recibe la luz por detras: halo calido tras las letras mas cercanas a la rendija */
.v3-pause__quiet {
    position: relative;
    justify-self: end;
    color: var(--hueso);
    opacity: calc(1 - var(--k, 0));
    filter: blur(calc(var(--k, 0) * 3px));
}

.v3-pause__quiet::before {
    content: "";
    position: absolute;
    top: -55%;
    bottom: -55%;
    right: -.45em;
    z-index: -1;
    width: 2.8em;
    background: radial-gradient(ellipse 60% 50% at 88% 50%, rgba(var(--luz), .5), rgba(var(--luz), .16) 50%, transparent 75%);
    filter: blur(14px);
    opacity: var(--lw, 0);
}

/* "Mas" recibe la luz de frente: calida junto a la rendija y hueso hacia el final */
.v3-pause__bright {
    justify-self: start;
    padding: 0 .12em;
    color: transparent;
    font-style: italic;
    background-image:
        linear-gradient(90deg, rgba(var(--luz-warm), var(--lw, 0)) 0%, rgba(var(--luz-warm), calc(var(--lw, 0) * .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;
    opacity: var(--k, 0);
    filter: blur(calc((1 - var(--k, 0)) * 4px)) drop-shadow(-8px 0 22px rgba(var(--luz), calc(var(--lw, 0) * .35)));
}

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

@media (max-width: 1180px) {
    .v3-aside--hero { right: var(--gutter); top: auto; bottom: 7rem; }
    .v3-process { grid-template-columns: 1fr; }
    .v3-process__sticky { position: static; }
    .v3-rail { display: none; }
    .v3-process__now, .v3-process__ticks { display: none; }
    .v3-step__caption { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.2rem; margin-top: 1.4rem; }
    .v3-step__caption span { grid-row: span 2; color: rgba(var(--luz), .9); font-family: var(--serif); font-size: 2.6rem; font-style: italic; font-weight: 300; line-height: .9; }
    .v3-step__caption h3 { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
    .v3-step__caption p { margin: .3rem 0 0; color: rgba(245, 244, 241, .66); font-size: .95rem; font-weight: 300; line-height: 1.6; }
}

@media (max-width: 820px) {
    .v3-hero { align-items: end; padding: 7rem 1.5rem 8.5rem; }
    .v3-hero__media img { object-position: 74% center; }
    .v3-hero__media::after {
        background:
            linear-gradient(0deg, rgba(17, 17, 17, .92) 0%, rgba(17, 17, 17, .6) 42%, transparent 70%),
            linear-gradient(180deg, rgba(17, 17, 17, .4) 0%, transparent 22%);
    }
    .v3-hero__title { font-size: clamp(2.7rem, 12vw, 3.8rem); }
    .v3-hero__pillars { margin-top: 1.3rem; font-size: 1.05rem; }
    .v3-hero__intro { margin: 1rem 0 1.8rem; font-size: .96rem; }
    .v3-aside--hero { display: none; }
    .v3-hero__foot { bottom: 1.8rem; left: 1.5rem; right: 1.5rem; }
    .v3-hero__motto { display: none; }

    .v3-clients { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.5rem 0; }

    .v3-manifesto { grid-template-columns: 1px minmax(0, 1fr); gap: 0 1.5rem; padding: 6rem 1.5rem; }

    .v3-problem { padding: 6rem 1.5rem 5rem; align-items: end; }
    .v3-problem__media::after { background: linear-gradient(180deg, var(--carbon) 0%, rgba(17, 17, 17, .35) 30%, rgba(17, 17, 17, .88) 62%, var(--carbon-2) 100%); }
    .v3-problem__inner { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 12rem; }
    .v3-aside--problem { top: 5.5rem; right: auto; left: 1.5rem; }

    .v3-services { padding: 5.5rem 1.5rem 4.5rem; }
    .v3-services__head { grid-template-columns: 1fr; }
    .v3-services__head .v3-body { justify-self: start; }
    .v3-service { grid-template-columns: 2.6rem minmax(0, 1fr) 1.4rem; gap: .35rem 1rem; padding: 1.5rem .2rem; }
    .v3-service__icon { grid-row: span 2; align-self: start; width: 2.5rem; height: 2.5rem; }
    .v3-service__icon svg { width: 1.05rem; height: 1.05rem; }
    .v3-service__desc { grid-column: 2; font-size: .88rem; }
    .v3-service__arrow { grid-column: 3; grid-row: 1; }

    .v3-process { padding: 5.5rem 1.5rem; }
    .v3-process__steps { gap: 3.5rem; }

    .v3-pause { height: 92svh; }
    .v3-pause__photo { top: 12%; }
    .v3-pause__line { top: 4%; bottom: 4%; left: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-size: clamp(2.1rem, 9.5vw, 3rem); text-align: center; transform: none; }
    .v3-pause__gap { display: none; }
    .v3-pause__quiet::before { display: none; }
    .v3-pause__bright {
        background-image:
            radial-gradient(ellipse 45% 90% at 50% 55%, rgba(var(--luz-warm), var(--lw, 0)), rgba(var(--luz-warm), 0) 70%),
            linear-gradient(var(--hueso), var(--hueso));
        filter: blur(calc((1 - var(--k, 0)) * 4px)) drop-shadow(0 0 20px rgba(var(--luz), calc(var(--lw, 0) * .3)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .v3-hero__media img { transform: none; filter: none; transition: none; }
    .v3-clients__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: space-between; row-gap: .6rem; }
    .v3-clients__track span { padding: 0 .8rem; }
    .v3-clients__viewport { -webkit-mask-image: none; mask-image: none; }
    .v3-clients__track span[aria-hidden] { display: none; }
    .v3-word { opacity: 1; }
    .v3-step figure { clip-path: none !important; transition: none; }
    .v3-step .v3-light { display: none; }
    .v3-step img { transform: none; transition: none; filter: none !important; animation: none !important; }
    .v3-step[data-light="strip"] figure::after { opacity: 0; animation: none; }
    .v3-pause { --edge: 100%; --k: 1; --lw: 1; }
    .v3-pause__on { -webkit-mask-image: none; mask-image: none; }
    .v3-rail b { display: none; }
    .v3-manifesto__rule .v3-beam { --fill: 100%; }
    .v3-firefly { display: none; }
}