@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fuentes/inter-tight-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fuentes/inter-tight-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --negro: #000;
    --blanco: #fff;
    --radio: 24px;
    --radio-pequeno: 16px;
    --lado: 32px;
    --fuente: "Inter Tight", system-ui, sans-serif;
    --curva: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--blanco);
    color: var(--negro);
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.portada, .persona, .llamada, .clave {
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
}

.portada::before, .persona::before, .llamada::before, .clave::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: grayscale(1) contrast(1.15) brightness(.78);
    z-index: 0;
}

.portada { background-position: 70% center; }
.portada::before { filter: grayscale(1) contrast(1.1) brightness(.5); }
.llamada::before { filter: grayscale(1) contrast(1.1) brightness(.42); }

.persona::before { transition: transform 1.2s var(--curva); }
.persona:hover::before { transform: scale(1.04); }

.portada > *, .persona > *, .llamada > *, .clave > * { position: relative; z-index: 1; }

.etiqueta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 12px;
}

.texto-pequeno { font-size: 14px; }

.boton {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    padding: 0 4px 0 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid currentColor;
    transition: transform .2s var(--curva);
}

.boton:active { transform: scale(.97); }

.boton__punto {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: transform .3s var(--curva);
}

.boton:hover .boton__punto { transform: rotate(45deg); }
.boton--blanco { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.boton--blanco .boton__punto { background: var(--negro); color: var(--blanco); }
.boton--borde { padding: 0 20px; }
.boton--pequeno { height: 36px; padding: 0 16px; font-size: 13px; margin-top: 12px; }

.portada {
    position: relative;
    min-height: min(100svh, 920px);
    color: var(--blanco);
    padding: 20px var(--lado) var(--lado);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.logo { font-weight: 900; font-size: 20px; letter-spacing: -.04em; }

.nav__enlaces {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
}

.nav__enlaces li + li::before { content: "•"; margin-right: 28px; }

.nav__enlaces a { position: relative; }

.nav__enlaces a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s var(--curva);
}

.nav__enlaces a:hover::after { transform: scaleX(1); transform-origin: left; }

.portada__titulo {
    margin-top: 48px;
    font-weight: 900;
    font-size: clamp(56px, 10vw, 152px);
    line-height: .88;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.linea { display: block; overflow: hidden; padding-bottom: .04em; }

.linea > span {
    display: inline-block;
    transform: translateY(105%);
    animation: subir 1s var(--curva) forwards;
}

.linea:nth-child(2) > span { animation-delay: .14s; }
.linea:nth-child(3) > span { animation-delay: .28s; }

@keyframes subir { to { transform: translateY(0); } }

.portada__pie {
    margin-top: auto;
    padding-top: 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.portada__puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    max-width: 320px;
}

.portada__puntos li {
    display: grid;
    gap: 2px;
    padding-left: 16px;
    border-left: 2px solid var(--blanco);
}

.portada__puntos strong { font-size: 14px; font-weight: 600; }
.portada__puntos span { font-size: 13px; }

.portada__llamada { display: grid; gap: 20px; justify-items: start; max-width: 520px; }

.portada__llamada p {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.aviso {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 32px var(--lado) 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.aviso__asterisco {
    font-size: 24px;
    line-height: 1;
    animation: girar 12s linear infinite;
}

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

.declaracion { padding: 80px var(--lado) 96px; }

.declaracion h2 {
    max-width: 18ch;
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
}

.personas { padding-bottom: 96px; }

.personas__carril {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(280px, 32vw, 420px);
    gap: 12px;
    padding: 0 var(--lado);
    scroll-padding: 0 var(--lado);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.personas__carril::-webkit-scrollbar { display: none; }

.persona {
    position: relative;
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
    border-radius: var(--radio-pequeno);
    overflow: hidden;
    color: var(--blanco);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.persona__cabeza {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--blanco);
}

.persona__cabeza strong {
    grid-row: 1 / 3;
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.05em;
}

.persona__unidad { font-size: 12px; padding-top: 4px; }

.persona__tema {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 14px;
    font-weight: 600;
    padding-left: 12px;
    border-left: 1px solid var(--blanco);
}

.persona__barras { grid-column: 4; display: flex; gap: 2px; padding-top: 4px; }
.persona__barras i { width: 6px; height: 6px; background: var(--blanco); }
.persona__barras i:last-child { background: transparent; border: 1px solid var(--blanco); }

.persona__texto { display: block; font-size: 15px; line-height: 1.5; max-width: 32ch; }

.persona[style] .persona__texto > span {
    background: var(--negro);
    padding: 2px 8px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.persona:not([style]) .persona__texto { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }

.personas__flechas {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px var(--lado) 0;
}

.flecha {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--negro);
    font-weight: 600;
    transition: transform .2s var(--curva);
}

.flecha:active { transform: scale(.92); }
.flecha--llena { background: var(--negro); color: var(--blanco); }

.medidas, .otras { border-top: 2px solid var(--negro); }

.medidas h2, .otras__titulo {
    padding: 64px var(--lado) 48px;
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
}

.medidas { padding-bottom: 96px; }

.areas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 var(--lado);
}

.area {
    padding: 24px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 2px solid var(--negro);
    border-radius: var(--radio);
    transition: background .3s var(--curva), color .3s var(--curva), transform .3s var(--curva);
}

.area:hover { background: var(--negro); color: var(--blanco); }
.area:active { transform: scale(.98); }
.area--preparando { border-style: dashed; }
.otras { padding-bottom: 96px; }

.buscador { padding: 0 var(--lado) 32px; position: relative; }

.buscador__caja {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 24px;
    border: 2px solid var(--negro);
    border-radius: 999px;
    transition: background .2s var(--curva);
}

.buscador__caja:focus-within { background: var(--negro); color: var(--blanco); }
.buscador__icono { font-size: 24px; line-height: 1; }

.buscador__caja input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
}

.buscador__caja input::placeholder { color: currentColor; opacity: .6; }

.buscador__resultados {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.resultado {
    display: grid;
    gap: 6px;
    height: 100%;
    padding: 20px;
    background: var(--negro);
    color: var(--blanco);
    border-radius: var(--radio-pequeno);
    animation: entra .35s var(--curva);
}

.resultado__area { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.resultado strong { font-size: 20px; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.resultado__texto { font-size: 14px; }

@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.buscador__nada { margin-top: 16px; font-size: 16px; font-weight: 500; }
.buscador__nada a { text-decoration: underline; text-underline-offset: 4px; }

.franja-lista {
    margin: 0 var(--lado) 96px;
    padding: 40px;
    border-radius: var(--radio);
    border: 2px solid var(--negro);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 32px;
}

.franja-lista > p {
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
}

.franja-lista .lista,
.portada__llamada .lista { justify-items: start; width: 100%; }

.portada__llamada { width: min(100%, 560px); }

.lista--claro .lista__fila { border-color: var(--negro); }
.lista--claro .lista__fila input { color: var(--negro); }
.lista--claro .lista__fila input::placeholder { color: var(--negro); }
.lista--claro .lista__fila:focus-within { outline-color: var(--negro); }
.lista--claro .lista__permiso input { accent-color: var(--negro); }
.lista--claro .lista__respuesta { background: var(--negro); color: var(--blanco); }

.boton--negro { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.boton--negro .boton__punto { background: var(--blanco); color: var(--negro); }
.boton--grande { height: 60px; font-size: 16px; padding-left: 28px; }
.boton--grande .boton__punto { width: 48px; height: 48px; }

.lista {
    width: min(100%, 600px);
    display: grid;
    gap: 16px;
    justify-items: center;
}

.lista__fila {
    width: 100%;
    display: flex;
    gap: 8px;
    padding: 6px;
    border: 2px solid var(--blanco);
    border-radius: 999px;
}

.lista__fila input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--blanco);
    font: inherit;
    font-size: 17px;
    font-weight: 500;
}

.lista__fila input::placeholder { color: var(--blanco); opacity: .7; }
.lista__fila:focus-within { outline: 2px solid var(--blanco); outline-offset: 4px; }
.lista__fila .boton { flex-shrink: 0; }
.lista .boton:disabled { opacity: .6; cursor: wait; }

.lista__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lista__permiso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 52ch;
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.lista__permiso input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--blanco); }
.lista__permiso a { text-decoration: underline; text-underline-offset: 3px; }

.lista__ventajas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: 14px;
    font-weight: 500;
}

.lista__ventajas li::before { content: "✓ "; font-weight: 900; }

.lista__respuesta {
    max-width: 44ch;
    padding: 16px 20px;
    background: var(--blanco);
    color: var(--negro);
    border-radius: var(--radio-pequeno);
    font-size: 14px;
    font-weight: 500;
}

.area__num {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--negro);
    margin-bottom: auto;
}

.area:hover .area__num { -webkit-text-stroke-color: var(--blanco); }

.area h3 { font-size: 24px; font-weight: 900; letter-spacing: -.03em; }
.area p { font-size: 14px; max-width: 30ch; }

.area__pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid currentColor;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.area__pie b { font-size: 16px; transition: transform .3s var(--curva); }
.area:hover .area__pie b { transform: translateX(4px); }

.area--preparando .area__pie { border-top-style: dashed; }

.portada--area { min-height: min(100svh, 860px); }

.portada__area {
    margin-top: 48px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.portada__titulo--area { margin-top: 16px; font-size: clamp(48px, 8.4vw, 128px); }

.portada__entrada {
    max-width: 40ch;
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.plan { padding: 96px var(--lado); }

.plan__titulo {
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.05em;
    text-transform: uppercase;
    margin-bottom: 48px;
}

.plan__lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--negro); }

.plan__medida {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) minmax(0, 3fr);
    gap: 32px;
    padding: 32px 0;
    border-bottom: 2px solid var(--negro);
}

.plan__num {
    font-size: clamp(56px, 7vw, 112px);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 2px var(--negro);
}

.plan__medida h3 {
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
    margin-bottom: 12px;
}

.plan__medida p { font-size: 18px; max-width: 52ch; }

.no-es {
    background: var(--negro);
    color: var(--blanco);
    padding: 96px var(--lado);
}

.no-es p {
    max-width: 24ch;
    font-size: clamp(32px, 4.6vw, 64px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
}

.portada--legal { min-height: 0; padding-bottom: 64px; }

.legal { padding: 64px var(--lado) 96px; max-width: 960px; }

.legal__entrada {
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: 48px;
}

.legal__lista { margin: 0; border-top: 2px solid var(--negro); }

.legal__lista dt {
    padding-top: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.legal__lista dd {
    margin: 8px 0 0;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--negro);
    font-size: 17px;
    max-width: 60ch;
}

.legal__lista a { text-decoration: underline; text-underline-offset: 3px; }

.pie__areas { display: grid !important; grid-template-columns: repeat(2, max-content); gap: 8px 32px; }

.mision {
    background: var(--negro);
    color: var(--blanco);
    padding: 128px var(--lado);
}

.mision__texto {
    max-width: 20ch;
    font-size: clamp(36px, 5.6vw, 80px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
}

.js .mision__texto span {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--blanco);
    transition: color .25s linear;
}

.mision__texto span.lleno { color: var(--blanco); }

.cuentas {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    border-bottom: 2px solid var(--negro);
}

.cuentas__lista { padding: 64px var(--lado); }

.cuentas h2 {
    font-size: clamp(32px, 3.6vw, 52px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
    margin-bottom: 12px;
}

.acordeon { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 8px; }

.acordeon__fila {
    border: 2px solid var(--negro);
    border-radius: var(--radio-pequeno);
    transition: background .3s var(--curva), color .3s var(--curva);
}

.acordeon__fila.activa { background: var(--negro); color: var(--blanco); }

.acordeon__boton {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
}

.acordeon__importe { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

.acordeon__cuerpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--curva);
}

.acordeon__cuerpo > div { overflow: hidden; }
.acordeon__cuerpo p { padding: 0 20px 20px; font-size: 14px; max-width: 48ch; }
.acordeon__fila.activa .acordeon__cuerpo { grid-template-rows: 1fr; }

.cuentas__panel {
    border-left: 2px solid var(--negro);
    padding: 64px var(--lado);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.cuentas__grande {
    font-size: clamp(72px, 11vw, 168px);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
}

.cuentas__saldo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--negro);
    padding-top: 16px;
    font-weight: 600;
}

.cuentas__saldo strong { font-size: 32px; font-weight: 900; letter-spacing: -.03em; }

.llamada {
    position: relative;
    overflow: hidden;
    color: var(--blanco);
    padding: 160px var(--lado);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 24px;
}

.llamada h2 {
    font-size: clamp(44px, 8vw, 120px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase;
    max-width: 12ch;
}

.llamada p { max-width: 40ch; font-size: 18px; }
.llamada__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.pie {
    background: var(--negro);
    color: var(--blanco);
    padding: 64px var(--lado) 0;
    overflow: hidden;
    border-top: 2px solid var(--blanco);
}

.pie__columnas {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
}

.pie h4 {
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--blanco);
    margin-bottom: 16px;
}

.pie__columnas div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pie__columnas a:not(.boton) { font-size: 15px; }
.pie__columnas a:not(.boton):hover { text-decoration: underline; text-underline-offset: 4px; }

.pie__lema { margin-top: 64px; font-size: 14px; font-weight: 600; }
.pie__nota { margin-top: 4px; font-size: 12px; }

.marca { display: block; width: 100%; height: auto; margin: 8px 0 -4.4%; overflow: visible; }

.marca text {
    font-family: var(--fuente);
    font-weight: 900;
    font-size: 214px;
    letter-spacing: -.02em;
    fill: var(--blanco);
}

.js .aparece {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--curva), transform .8s var(--curva);
}

.js .aparece.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
    :root { --lado: 20px; }
    .nav__enlaces { display: none; }
    .portada__pie { flex-direction: column-reverse; align-items: flex-start; }
    .areas { grid-template-columns: 1fr 1fr; }
    .plan__medida { grid-template-columns: 1fr; gap: 12px; }
    .cuentas { grid-template-columns: 1fr; }
    .cuentas__panel { border-left: 0; border-top: 2px solid var(--negro); }
    .pie__columnas { grid-template-columns: 1fr 1fr; }
    .pie__columnas div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .portada {
        min-height: min(100svh, 760px);
        background-repeat: no-repeat;
        background-size: auto 56%;
        background-position: 38% 72%;
    }
    .portada__titulo { margin-top: 32px; }
    .portada__puntos { display: none; }
    .declaracion { padding: 56px var(--lado) 64px; }
    .personas__carril { grid-auto-columns: 82%; }
    .areas { grid-template-columns: 1fr; gap: 8px; }
    .area { min-height: 0; }
    .area__num { margin-bottom: 16px; }
    .franja-lista { padding: 28px 20px; margin-bottom: 64px; grid-template-columns: 1fr; gap: 20px; }
    .buscador__caja { height: 56px; padding: 0 20px; }
    .buscador__caja input { font-size: 16px; }
    .lista__fila { flex-direction: column; border-radius: var(--radio); padding: 8px; }
    .lista__fila input { height: 48px; }
    .lista__fila .boton { justify-content: space-between; }
    .boton--grande { height: 56px; font-size: 15px; padding-left: 20px; }
    .plan, .no-es { padding: 64px var(--lado); }
    .pie__areas { grid-template-columns: 1fr 1fr; }
    .mision { padding: 96px var(--lado); }
    .cuentas__lista, .cuentas__panel { padding: 48px var(--lado); }
    .acordeon__boton { font-size: 15px; padding: 16px; }
    .acordeon__cuerpo p { padding: 0 16px 16px; }
    .llamada { padding: 112px var(--lado); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .linea > span, .aparece { transform: none; opacity: 1; }
    .mision__texto span { color: var(--blanco); }
}

.portada__area:is(a):hover, .portada__area a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1.portada__area { line-height: 1.4; max-width: 64ch; }

.claves {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 32px var(--lado) 96px;
}

.clave {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    padding: 24px;
    border-radius: var(--radio);
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.clave::before { filter: grayscale(1) contrast(1.1) brightness(.42); transition: transform 1.2s var(--curva); }
.clave:hover::before { transform: scale(1.04); }

.clave__cifra {
    font-size: clamp(64px, 8vw, 120px);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.06em;
}

.clave__cifra small { font-size: .35em; letter-spacing: -.02em; }

.clave__texto { display: grid; gap: 8px; max-width: 46ch; }
.clave__texto strong { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.clave__texto span { font-size: 15px; }

.inicio-claves { border-top: 2px solid var(--negro); }
.inicio-claves h2 {
    padding: 64px var(--lado) 0;
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
}
.inicio-claves__todas { padding: 0 var(--lado) 96px; margin-top: -64px; }

.nota { padding: 64px var(--lado) 96px; display: grid; gap: 48px; }

.nota__cifra {
    display: grid;
    gap: 8px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--negro);
}

.nota__cifra strong {
    font-size: clamp(96px, 18vw, 280px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.07em;
}

.nota__cifra small { font-size: .3em; letter-spacing: -.02em; margin-left: .1em; }
.nota__cifra span { font-size: clamp(18px, 2vw, 24px); font-weight: 600; max-width: 36ch; }

.nota__cuerpo { max-width: 720px; display: grid; gap: 20px; }

.nota__cuerpo > p { font-size: 19px; line-height: 1.6; }

.nota__cuerpo h2 {
    margin-top: 28px;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.nota__cuerpo blockquote {
    margin: 20px 0;
    padding: 32px;
    background: var(--negro);
    color: var(--blanco);
    border-radius: var(--radio);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.nota__propuesta {
    margin-top: 28px;
    padding: 32px;
    border-radius: var(--radio);
    background: var(--negro);
    color: var(--blanco);
    display: grid;
    gap: 16px;
    justify-items: start;
}

.nota__propuesta p { font-size: 22px; font-weight: 600; line-height: 1.3; }

.nota__lista {
    padding: 32px;
    border: 2px solid var(--negro);
    border-radius: var(--radio);
    display: grid;
    gap: 16px;
}

.nota__lista > p { font-size: 22px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; }

.nota__fuentes { display: grid; gap: 12px; font-size: 14px; }
.nota__fuentes ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.nota__fuentes a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .claves { grid-template-columns: 1fr; }
    .clave { min-height: 300px; }
}

@media (max-width: 560px) {
    .nota { padding: 40px var(--lado) 64px; }
    .nota__cuerpo > p { font-size: 17px; }
    .nota__cuerpo blockquote, .nota__propuesta, .nota__lista { padding: 24px 20px; }
    .nota__propuesta p, .nota__lista > p { font-size: 19px; }
}

@media (max-width: 560px) {
    .portada--legal { min-height: 0; }
}


.cinta { position: absolute; pointer-events: none; overflow: visible; }

.cinta path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: trazar 2.4s var(--curva) .2s forwards;
}

@keyframes trazar { to { stroke-dashoffset: 0; } }

.resalte {
    display: inline-block;
    padding: 0 .3em;
    border-radius: .3em;
    background: var(--negro);
    color: var(--blanco);
}

.medidas__titulo { text-transform: uppercase; font-weight: 900; text-align: center; max-width: 22ch; margin: 0 auto; }

.secciones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 var(--lado) 96px;
}

.seccion {
    position: relative;
    aspect-ratio: 4 / 5;
    padding: 12px;
    border-radius: var(--radio);
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.seccion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: grayscale(1) contrast(1.1) brightness(.7);
    transition: transform 1.2s var(--curva);
}

.seccion:hover::before { transform: scale(1.05); }
.seccion > * { position: relative; }

.seccion__medidas {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    border: 2px solid var(--blanco);
    font-size: 12px;
    font-weight: 600;
}

.seccion__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: var(--blanco);
    color: var(--negro);
}

.seccion__pie strong { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }

.seccion__pie b {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--negro);
    color: var(--blanco);
    transition: transform .3s var(--curva);
}

.seccion:hover .seccion__pie b { transform: rotate(45deg); }
.seccion--preparando { background-color: var(--blanco); color: var(--negro); border: 2px dashed var(--negro); }
.seccion--preparando::before { display: none; }
.seccion--preparando .seccion__medidas { border-color: var(--negro); }
.seccion--preparando .seccion__pie { background: var(--negro); color: var(--blanco); }
.seccion--preparando .seccion__pie b { background: var(--blanco); color: var(--negro); }

.entradas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 32px var(--lado) 96px;
}

.entrada {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 8px 20px;
    border-radius: var(--radio);
    border: 2px solid var(--negro);
    transition: transform .3s var(--curva);
}

.entrada:active { transform: scale(.98); }

.entrada__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radio-pequeno);
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
    color: var(--blanco);
    display: flex;
    align-items: flex-end;
    padding: 16px;
}

.entrada__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: grayscale(1) contrast(1.1) brightness(.55);
    transition: transform 1.2s var(--curva);
}

.entrada:hover .entrada__foto::before { transform: scale(1.05); }

.entrada__cifra {
    position: relative;
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.06em;
}

.entrada__cifra small { font-size: .4em; letter-spacing: -.02em; }

.entrada__etiqueta {
    align-self: flex-start;
    margin: 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--negro);
    color: var(--blanco);
    font-size: 12px;
    font-weight: 600;
}

.entrada__titulo { margin: 0 12px; font-size: 19px; font-weight: 900; line-height: 1.1; letter-spacing: -.025em; }
.entrada__fecha { margin: auto 12px 0; font-size: 13px; }

.entradas--oscuras { padding: 0 0 96px; }
.entradas--oscuras .entrada { border-color: #262626; background: #141414; color: var(--blanco); }
.entradas--oscuras .entrada__etiqueta { background: var(--blanco); color: var(--negro); }
.entradas--oscuras .entrada:hover { border-color: var(--blanco); }
.entrada[hidden] { display: none; }

.blog {
    background: var(--negro);
    color: var(--blanco);
    padding: 20px var(--lado) 0;
}

.blog__ruta { display: block; margin-top: 64px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.blog__titulo {
    margin-top: 16px;
    text-align: center;
    font-size: clamp(48px, 8.4vw, 128px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.055em;
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 40px 0 32px;
}

.filtro {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: #1f1f1f;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}

.filtro:active { transform: scale(.97); }
.filtro[aria-pressed="true"] { background: var(--blanco); color: var(--negro); }

.cuenta {
    margin: 0 var(--lado) 96px;
    padding: 64px 32px;
    border-radius: var(--radio);
    border: 2px solid var(--negro);
    display: grid;
    justify-items: center;
    gap: 24px;
    text-align: center;
}

.cuenta__titulo {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.05em;
    text-transform: uppercase;
    max-width: 16ch;
}

.cuenta__reloj { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.cuenta__bloque {
    display: grid;
    gap: 4px;
    min-width: 136px;
    padding: 20px 16px;
    border-radius: var(--radio-pequeno);
    background: var(--negro);
    color: var(--blanco);
}

.cuenta__bloque strong {
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
}

.cuenta__bloque span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.cuenta__lista { display: grid; justify-items: center; gap: 16px; width: min(100%, 600px); }
.cuenta__lista > p { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.cuenta__aviso { max-width: 72ch; font-size: 12px; line-height: 1.5; }
.cuenta__aviso a { text-decoration: underline; text-underline-offset: 3px; }

.cierre { padding: 0 12px 12px; }

.cierre__marco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: var(--radio);
    background: #efefef;
}

.cierre__tarjeta {
    position: relative;
    overflow: hidden;
    padding: 40px 32px 32px;
    border-radius: var(--radio);
    background: var(--negro);
    color: var(--blanco);
    display: grid;
    align-content: end;
    gap: 20px;
    min-height: 560px;
}

.cinta--tarjeta { top: -40px; left: -40px; width: 140%; height: 260px; color: var(--blanco); }
.cinta--tarjeta path { stroke-width: 10; }

.cierre__tarjeta h2 {
    position: relative;
    font-size: clamp(40px, 4.4vw, 72px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.05em;
}

.cierre__tarjeta p { position: relative; max-width: 44ch; font-size: 16px; }
.cierre__tarjeta .lista { position: relative; justify-items: start; }

.cierre__foto {
    position: relative;
    overflow: hidden;
    border-radius: var(--radio);
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
}

.cierre__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: grayscale(1) contrast(1.1);
}

.pie {
    position: relative;
    margin: 0 12px 12px;
    padding: 56px 40px 24px;
    border-radius: var(--radio);
    border-top: 0;
    background: var(--negro);
    color: var(--blanco);
    overflow: hidden;
}

.cinta--pie { right: -160px; top: 40px; width: 720px; height: 560px; color: var(--blanco); opacity: 1; }
.cinta--pie path { stroke-width: 28; }

.pie__rejilla {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px 32px;
    align-items: start;
}

.pie__lema {
    margin: 0;
    grid-row: span 2;
    font-size: clamp(36px, 4vw, 60px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.05em;
}

.pie__grupo { display: grid; gap: 12px; justify-items: start; }
.pie__rotulo { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.pie__pastillas { display: flex; flex-wrap: wrap; gap: 8px; }

.pie__pastillas a {
    padding: 4px 12px;
    border: 2px solid var(--blanco);
    border-radius: 999px;
    background: var(--negro);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s var(--curva), color .2s var(--curva);
}

.pie__pastillas a:hover { background: var(--blanco); color: var(--negro); }

.pie__redes { display: flex; gap: 8px; }

.pie__redes a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blanco);
    color: var(--negro);
    font-weight: 900;
}

.pie__correo { padding: 4px 8px; margin-left: -8px; border-radius: 8px; background: var(--negro); font-size: clamp(18px, 1.6vw, 22px); font-weight: 900; letter-spacing: -.02em; }
.pie__correo:hover { text-decoration: underline; text-underline-offset: 4px; }

.pie__tarjeta {
    grid-column: 3;
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 24px;
    border-radius: var(--radio-pequeno);
    background: var(--blanco);
    color: var(--negro);
}

.pie__tarjeta strong { font-size: 28px; font-weight: 900; letter-spacing: -.04em; }
.pie__tarjeta p { font-size: 14px; }

.pie .marca { position: relative; margin: 48px 0 0; }

.pie__base {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .cierre__marco { grid-template-columns: 1fr; }
    .cierre__foto { min-height: 360px; order: -1; }
    .cierre__tarjeta { min-height: 0; }
    .entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .cierre__marco { grid-template-columns: 1fr; }
    .cierre__foto { min-height: 320px; order: -1; }
    .cierre__tarjeta { min-height: 0; }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
    .pie__lema { grid-column: 1 / -1; grid-row: auto; }
    .pie__tarjeta { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .secciones { grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 64px; }
    .seccion { aspect-ratio: 3 / 4; padding: 8px; }
    .seccion__pie { padding: 6px 6px 6px 12px; }
    .seccion__pie strong { font-size: 12px; }
    .seccion__pie b { width: 28px; height: 28px; }
    .entradas { grid-template-columns: 1fr; }
    .blog__ruta { margin-top: 40px; }
    .cuenta { padding: 40px 16px; margin-bottom: 64px; }
    .cuenta__bloque { min-width: 0; flex: 1 1 calc(50% - 6px); padding: 16px 12px; }
    .cierre { padding: 0 8px 8px; }
    .cierre__marco { padding: 8px; }
    .cierre__tarjeta { padding: 32px 20px 24px; }
    .pie { margin: 0 8px 8px; padding: 40px 20px 20px; }
    .pie__rejilla { grid-template-columns: 1fr; gap: 32px; }
    .cinta--pie { right: -320px; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cinta path { stroke-dashoffset: 0; }
}

:root { --tono: saturate(.75) contrast(1.08) brightness(.82); }

.cierre__foto::before { filter: var(--tono); }

.persona::before,
.seccion::before { filter: saturate(.7) contrast(1.08) brightness(.6); }

.entrada__foto::before { filter: saturate(.7) contrast(1.08) brightness(.5); }

.nav--claro { color: var(--negro); }

.dato {
    min-height: 100svh;
    padding: 20px var(--lado) 32px;
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    color: var(--negro);
}

.dato__cuerpo {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 32px;
    padding-top: 56px;
}

.dato__lema {
    max-width: 44ch;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.dato__escena { display: grid; align-items: center; }

.dato__item {
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity .5s var(--curva), transform .6s var(--curva), visibility 0s .6s;
}

.dato__item.activo {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s var(--curva) .1s, transform .7s var(--curva) .1s, visibility 0s;
}

.dato__cifra {
    display: flex;
    align-items: baseline;
    gap: .06em;
    font-size: clamp(120px, 21vw, 340px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.07em;
    font-variant-numeric: tabular-nums;
}

.dato__cifra span { font-size: .28em; letter-spacing: -.03em; }

.dato__texto {
    max-width: 30ch;
    font-size: clamp(22px, 2.6vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.dato__enlace {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid currentColor;
    font-size: 15px;
    font-weight: 600;
}

.dato__enlace b { transition: transform .3s var(--curva); }
.dato__item:hover .dato__enlace b { transform: translateX(4px); }

.dato__pie {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    align-items: end;
    gap: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--negro);
}

.dato__lista .lista { justify-items: start; }

.dato__pasos { display: flex; gap: 8px; justify-content: flex-end; padding-bottom: 12px; }

.dato__paso {
    width: 48px;
    height: 24px;
    display: grid;
    align-items: center;
}

.dato__paso i {
    position: relative;
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #d9d9d9;
    overflow: hidden;
}

.dato__paso i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--negro);
    transform: scaleX(0);
    transform-origin: left;
}

.dato__paso.hecho i::after { transform: scaleX(1); }
.dato__paso.activo i { animation: avanzar 6s linear forwards; }
.dato__paso.activo i::after { animation: llenar 6s linear forwards; }

.dato.pausado .dato__paso.activo i,
.dato.pausado .dato__paso.activo i::after { animation-play-state: paused; }

@keyframes llenar { to { transform: scaleX(1); } }
@keyframes avanzar { to { opacity: 1; } }

.versus { padding: 20px var(--lado) 64px; }

.versus__cabeza { padding: 56px 0 24px; display: grid; gap: 12px; }

.versus__titulo {
    font-size: clamp(48px, 7vw, 112px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.06em;
}

.versus__entrada { max-width: 48ch; font-size: clamp(16px, 1.4vw, 19px); }

.versus__selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.versus__selector::-webkit-scrollbar { display: none; }

.versus__opcion {
    flex: none;
    height: 44px;
    padding: 0 20px;
    scroll-snap-align: start;
    border: 2px solid var(--negro);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
    transition: background-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}

.versus__opcion:active { transform: scale(.97); }
.versus__opcion[aria-selected="true"] { background: var(--negro); color: var(--blanco); }

.versus__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px;
    align-items: start;
}

.versus__marco {
    position: relative;
    aspect-ratio: 16 / 10;
    max-height: calc(100svh - 120px);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--negro);
    user-select: none;
    touch-action: pan-y;
}

.versus__lado {
    position: absolute;
    inset: 0;
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
}

.versus__lado::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: grayscale(1) contrast(1.1) brightness(.85);
}

.versus__lado--suyo { clip-path: inset(0 0 0 var(--corte)); }

.versus__marca {
    position: absolute;
    top: 16px;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--blanco);
    color: var(--negro);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.versus__marca--tuya { left: 16px; }
.versus__marca--suya { right: 16px; background: var(--negro); color: var(--blanco); }

.versus__barra {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--corte);
    width: 4px;
    margin-left: -2px;
    background: var(--blanco);
    z-index: 2;
    pointer-events: none;
}

.versus__barra span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--blanco);
    color: var(--negro);
    font-size: 20px;
    font-weight: 900;
    transition: transform .2s var(--curva);
}

.versus__marco.arrastrando .versus__barra span { transform: scale(1.12); }

.versus__control {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 3;
}

.versus__marco:has(.versus__control:focus-visible) .versus__barra span { outline: 4px solid var(--negro); outline-offset: 4px; }

.versus__datos { display: grid; align-content: start; gap: 12px; }

.versus__dato {
    display: grid;
    gap: 4px;
    padding: 20px;
    border-radius: var(--radio-pequeno);
    border: 2px solid var(--negro);
}

.versus__dato--suyo { background: var(--negro); color: var(--blanco); }
.versus__dato span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.versus__dato strong { font-size: clamp(32px, 3.2vw, 48px); font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.versus__dato em { font-size: 14px; font-style: normal; }

.versus__veces {
    padding-top: 8px;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.versus__detalle { font-size: 15px; line-height: 1.5; }

@media (max-width: 1100px) {
    .versus__rejilla { grid-template-columns: 1fr; }
    .versus__marco { aspect-ratio: 4 / 3; max-height: 70svh; }
    .versus__datos { grid-template-columns: 1fr 1fr; }
    .versus__veces, .versus__detalle { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .dato { min-height: 0; }
    .dato__escena { padding: 40px 0 16px; }
    .dato__pie { grid-template-columns: 1fr; }
    .dato__pasos { justify-content: flex-start; order: -1; padding-bottom: 0; }
}

@media (max-width: 560px) {
    .dato { padding: 16px 16px 24px; }
    .dato__cuerpo { padding-top: 32px; gap: 24px; }
    .dato__lema { font-size: 14px; }
    .dato__cifra { font-size: clamp(96px, 30vw, 140px); }
    .dato__texto { font-size: 22px; }
    .dato__paso { width: 36px; }
    .versus { padding: 16px 16px 48px; }
    .versus__cabeza { padding: 32px 0 16px; }
    .versus__selector { margin: 0 -16px 12px; padding: 0 16px; }
    .versus__marco { aspect-ratio: 4 / 5; max-height: 64svh; }
    .versus__marca { top: 12px; font-size: 11px; }
    .versus__marca--tuya { left: 12px; }
    .versus__marca--suya { right: 12px; }
    .versus__barra span { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
    .versus__datos { gap: 8px; }
    .versus__dato { padding: 16px; }
    .versus__dato strong { font-size: 24px; }
    .versus__titulo { font-size: 44px; }
    .versus__dato em { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .dato__item { transition: none; }
}

.dato__cifra { padding-bottom: .1em; }

.dato__foto { display: none; }

@media (min-width: 760px) {
    .dato__item {
        grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 420px);
        grid-template-rows: auto auto auto 1fr;
        column-gap: 48px;
        align-content: stretch;
    }

    .dato__item > :not(.dato__foto) { grid-column: 1; }
    .dato__cifra { align-self: end; font-size: clamp(96px, 14vw, 240px); }

    .dato__foto {
        grid-column: 2;
        grid-row: 1 / -1;
        position: relative;
        display: block;
        min-height: 360px;
        border-radius: var(--radio);
        overflow: hidden;
        background-color: var(--negro);
        background-size: cover;
        background-position: center;
        transform: scale(.96);
        transition: transform 1s var(--curva);
    }

    .dato__foto::before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        filter: var(--tono);
    }

    .dato__item.activo .dato__foto { transform: none; }
}

.cabeza {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr);
    align-items: baseline;
    gap: 16px 32px;
    padding: 64px var(--lado) 40px;
}

.cabeza .etiqueta { margin: 0; }

.cabeza h2 {
    padding: 0;
    max-width: 18ch;
    font-size: clamp(40px, 5.6vw, 88px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.055em;
}

.medidas .buscador { padding-bottom: 24px; }

.indice { list-style: none; margin: 0; padding: 0 var(--lado); }

.indice__fila {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 24px;
    padding: 28px 16px;
    border-top: 2px solid var(--negro);
    transition: background-color .25s var(--curva), color .25s var(--curva);
}

.indice li:last-child .indice__fila { border-bottom: 2px solid var(--negro); }

.indice__num { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.indice__nombre {
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.045em;
}

.indice__texto { max-width: 52ch; font-size: 16px; line-height: 1.4; }

.indice__pie {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.indice__pie b {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid currentColor;
    transition: transform .3s var(--curva);
}

.indice__foto {
    position: absolute;
    right: 160px;
    top: 50%;
    width: 160px;
    height: 112px;
    margin-top: -56px;
    border-radius: var(--radio-pequeno);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(.9) rotate(-3deg);
    transition: opacity .3s var(--curva), transform .4s var(--curva);
    pointer-events: none;
}

.indice__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: var(--tono);
}

.indice__fila--preparando { color: #8a8a8a; }

@media (hover: hover) {
    .indice__fila:hover { background: var(--negro); color: var(--blanco); }
    .indice__fila:hover .indice__pie b { transform: rotate(-45deg); }
    .indice__fila:hover .indice__foto { opacity: 1; transform: none; }
}

.inicio-claves .entradas { padding-top: 0; }
.inicio-claves__todas { margin-top: -48px; }

.cierre { padding: 0 var(--lado) 12px; }
.cierre__marco { padding: 0; background: none; }
.pie { margin: 0 var(--lado) 12px; }

@media (max-width: 900px) {
    .cabeza { grid-template-columns: 1fr; padding: 48px var(--lado) 32px; }
    .indice__fila { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 16px; padding: 20px 8px; }
    .indice__texto { grid-column: 2 / -1; grid-row: 2; font-size: 15px; }
    .indice__pie { grid-column: 3; grid-row: 1; }
    .indice__foto { display: none; }
}

@media (max-width: 560px) {
    .indice__fila { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .indice__pie { font-size: 0; gap: 0; }
    .indice__pie b { font-size: 16px; width: 36px; height: 36px; }
    .indice__nombre { font-size: 26px; }
    .cierre { padding: 0 8px 8px; }
    .pie { margin: 0 8px 8px; }
}

:root {
    --gris: #f2f2f2;
    --gris-texto: #5c5c5c;
    --ancho: 1200px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; }

.dato > .nav,
.dato__cuerpo { width: 100%; max-width: var(--ancho); margin-inline: auto; }

.bloque { padding: 120px var(--lado); }
.bloque--gris { background: var(--gris); }
.bloque--negro { background: var(--negro); color: var(--blanco); }
.bloque--centro { text-align: center; padding-bottom: 40px; }
.bloque--centro .contenedor { display: grid; justify-items: center; gap: 20px; }

.pastilla {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--gris);
    font-size: 13px;
    font-weight: 600;
}

.pastilla--clara { background: #1f1f1f; color: var(--blanco); }

.bloque__cabeza {
    display: grid;
    justify-items: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.bloque__titulo {
    font-size: clamp(40px, 5.4vw, 76px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
    max-width: 16ch;
}

.bloque__sub { max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: var(--gris-texto); }
.bloque--negro .bloque__sub { color: #b3b3b3; }

.bloque__accion { display: flex; justify-content: center; margin-top: 40px; }

.bloque__nota {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    margin-top: 24px;
    font-size: 14px;
    color: var(--gris-texto);
}

.bloque__nota a:hover { color: var(--negro); text-decoration: underline; text-underline-offset: 4px; }

.bloque .buscador { max-width: 720px; margin: 0 auto 40px; padding: 0; }
.bloque .buscador__caja { border: 0; background: var(--gris); }
.bloque .buscador__caja:focus-within { background: var(--negro); color: var(--blanco); }

.rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    border-radius: 32px;
    background: var(--gris);
    overflow: hidden;
    transition: transform .3s var(--curva);
}

.tarjeta:active { transform: scale(.985); }

.tarjeta__texto { display: grid; gap: 8px; padding: 32px 32px 24px; }
.tarjeta__eti { font-size: 13px; font-weight: 600; color: var(--gris-texto); }
.tarjeta__texto strong { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.tarjeta__texto span:last-child { font-size: 16px; line-height: 1.45; color: var(--gris-texto); max-width: 40ch; }

.tarjeta__foto {
    position: relative;
    flex: 1;
    min-height: 200px;
    margin: 0 16px 16px;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center 30%;
}

.tarjeta__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: var(--tono);
    transition: transform 1.2s var(--curva);
}

.tarjeta:hover .tarjeta__foto::before { transform: scale(1.04); }

.tarjeta--ancha { grid-column: span 2; flex-direction: row; }
.tarjeta--ancha .tarjeta__texto { flex: 1; align-content: end; padding: 40px; }
.tarjeta--ancha .tarjeta__texto strong { font-size: clamp(36px, 3.6vw, 52px); }
.tarjeta--ancha .tarjeta__foto { flex: 1.1; margin: 16px 16px 16px 0; }

.bloque .entradas { padding: 0; }
.bloque--gris .entrada { background: var(--blanco); border-color: var(--blanco); }
.bloque--gris .entrada:hover { border-color: var(--negro); }

.bloque .cuentas {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    border: 0;
}

.bloque .acordeon { margin: 0; }
.bloque .acordeon__fila { border: 0; background: var(--gris); border-radius: 20px; }
.bloque .acordeon__fila.activa { background: var(--negro); }

.bloque .cuentas__panel {
    border: 0;
    border-radius: 32px;
    background: var(--gris);
    padding: 40px;
}

.bloque .cuentas__saldo { border-top-color: #cfcfcf; }

.bloque--negro .cuenta__reloj { margin-bottom: 48px; }
.bloque--negro .cuenta__bloque { background: #161616; border-radius: 24px; min-width: 160px; padding: 28px 20px; }
.bloque--negro .cuenta__lista { margin: 0 auto; }
.bloque--negro .cuenta__lista > p { text-align: center; }
.bloque--negro .cuenta__lista .lista { margin: 0 auto; }
.bloque--negro .cuenta__aviso { margin: 32px auto 0; text-align: center; color: #9a9a9a; }
.bloque--negro .cuenta__aviso a { color: var(--blanco); }
.cuenta__reloj { justify-content: center; }
.cuenta__lista { display: grid; justify-items: center; gap: 16px; width: min(100%, 600px); }

.final { padding: 120px var(--lado) 40px; text-align: center; }
.final .contenedor { display: grid; justify-items: center; gap: 20px; }

.final__titulo {
    font-size: clamp(44px, 6.4vw, 96px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.05em;
    max-width: 14ch;
}

.final__sub { max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: var(--gris-texto); }
.final__lista { width: min(100%, 600px); }
.final__lista .lista { margin: 0 auto; }
.final .lista__ventajas { justify-content: center; }

.final__foto {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    margin-top: 40px;
    border-radius: 32px;
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
}

.final__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: var(--tono);
}

.rodapie { padding: 64px var(--lado) 40px; background: var(--gris); }

.rodapie__arriba {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 40px;
    border-bottom: 1px solid #d6d6d6;
}

.rodapie__arriba .logo { font-size: 28px; }

.rodapie__columnas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 40px 0;
    border-bottom: 1px solid #d6d6d6;
}

.rodapie__columnas div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rodapie__columnas h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; }
.rodapie__columnas a { font-size: 15px; color: var(--gris-texto); transition: color .2s var(--curva); }
.rodapie__columnas a:hover { color: var(--negro); }

.rodapie__legal { display: grid; gap: 8px; padding-top: 24px; font-size: 12px; line-height: 1.5; color: var(--gris-texto); max-width: 96ch; }

@media (max-width: 1100px) {
    .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tarjeta--ancha { grid-column: span 2; }
    .bloque .cuentas { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .bloque { padding: 80px var(--lado); }
    .bloque__cabeza { margin-bottom: 40px; }
    .rejilla { grid-template-columns: 1fr; }
    .tarjeta, .tarjeta--ancha { grid-column: auto; flex-direction: column; min-height: 400px; }
    .tarjeta--ancha .tarjeta__texto { padding: 32px 32px 24px; }
    .tarjeta--ancha .tarjeta__foto { margin: 0 16px 16px; }
    .rodapie__columnas { grid-template-columns: 1fr 1fr; }
    .final { padding: 80px var(--lado) 24px; }
    .final__foto { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
    .bloque { padding: 64px 16px; }
    .bloque--centro { padding-bottom: 24px; }
    .tarjeta__texto, .tarjeta--ancha .tarjeta__texto { padding: 24px 24px 16px; }
    .tarjeta__foto, .tarjeta--ancha .tarjeta__foto { margin: 0 8px 8px; }
    .tarjeta { border-radius: 24px; min-height: 360px; }
    .bloque .cuentas__panel { padding: 24px; border-radius: 24px; }
    .bloque--negro .cuenta__bloque { min-width: 0; padding: 20px 12px; }
    .rodapie { padding: 48px 16px 32px; }
    .rodapie__arriba { flex-direction: column; align-items: flex-start; }
    .final { padding: 64px 16px 16px; }
    .final__foto { border-radius: 24px; }
}

.dato { min-height: min(100svh, 940px); }
@media (max-width: 900px) { .dato { min-height: 0; } }

.bloque .cuentas__grande { font-size: clamp(64px, 7.4vw, 120px); }
.tarjeta--pronto { justify-content: space-between; padding-bottom: 32px; }
.tarjeta--pronto .boton { margin: 0 32px; align-self: flex-start; }
.final { padding-bottom: 120px; }

@media (min-width: 761px) and (max-width: 1100px) {
    .tarjeta--pronto { grid-column: span 2; min-height: 0; gap: 24px; }
}

@media (max-width: 760px) {
    .tarjeta--pronto { min-height: 0; gap: 16px; }
    .tarjeta--pronto .boton { margin: 0 24px; }
}

.pagina { padding: 20px var(--lado) 0; }
.pagina > .nav { max-width: var(--ancho); margin: 0 auto; }

.pagina__cabeza {
    display: grid;
    justify-items: center;
    gap: 20px;
    padding: 96px 0 64px;
    text-align: center;
}

.pagina__h1 { max-width: 48ch; font-size: 15px; font-weight: 600; line-height: 1.4; }

.pagina__titulo {
    max-width: 18ch;
    font-size: clamp(44px, 6.4vw, 96px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.05em;
}

.pagina__foto {
    position: relative;
    aspect-ratio: 21 / 9;
    border-radius: 32px;
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center 35%;
}

.pagina__foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: var(--tono);
}

.pastilla--blanca { background: var(--blanco); }

.bloque--corto { padding-top: 96px; padding-bottom: 96px; }
.bloque--pegado { padding-top: 0; }
.bloque__titulo--medio { font-size: clamp(32px, 4vw, 56px); }
.bloque__accion--suelta { margin: 0 auto; padding: 0 var(--lado) 96px; }

.pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.paso {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 32px;
    border-radius: 32px;
    background: var(--gris);
    scroll-margin-top: 24px;
}

.paso:target { background: var(--negro); color: var(--blanco); }
.paso:target p { color: #c9c9c9; }

.paso__num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--negro);
    color: var(--blanco);
    font-size: 15px;
    font-weight: 800;
}

.paso:target .paso__num { background: var(--blanco); color: var(--negro); }
.paso h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.paso p { font-size: 16px; line-height: 1.5; color: var(--gris-texto); }

.aclaracion {
    display: grid;
    justify-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 48px 32px;
    border-radius: 32px;
    background: var(--negro);
    color: var(--blanco);
    text-align: center;
}

.aclaracion .pastilla { color: var(--negro); }
.aclaracion p { max-width: 36ch; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }

.otras-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.otras-areas a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--gris);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s var(--curva), color .2s var(--curva);
}

.otras-areas a:hover { background: var(--negro); color: var(--blanco); }

.entradas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.filtros { margin: 0 0 32px; }
.filtro { background: var(--gris); color: var(--negro); }
.filtro[aria-pressed="true"] { background: var(--negro); color: var(--blanco); }

.nota.contenedor { padding: 64px var(--lado) 120px; justify-items: center; }
.nota__cifra { width: 100%; max-width: 720px; border-bottom-color: #d6d6d6; }
.nota__cuerpo { width: 100%; }
.nota__lista { border: 0; background: var(--gris); border-radius: 32px; }
.nota__propuesta, .nota__cuerpo blockquote { border-radius: 32px; }

.legal { max-width: 800px; margin: 0 auto; padding: 0 var(--lado) 120px; }
.legal__entrada { text-align: center; }
.legal__lista dd { border-bottom: 1px solid #d6d6d6; color: var(--gris-texto); }
.legal__lista dt { color: var(--negro); }

.versus { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; }
.versus__cabeza { justify-items: center; text-align: center; padding: 96px 0 40px; }
.versus__titulo { font-weight: 800; letter-spacing: -.05em; }
.versus__entrada { color: var(--gris-texto); }
.versus__selector { justify-content: center; }
.versus__opcion { border: 0; background: var(--gris); }
.versus__opcion[aria-selected="true"] { background: var(--negro); }
.versus__dato { border: 0; background: var(--gris); border-radius: 24px; }
.versus__dato--suyo { background: var(--negro); }

@media (max-width: 1100px) {
    .entradas--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .pagina__cabeza { padding: 64px 0 40px; }
    .pagina__foto { aspect-ratio: 4 / 3; border-radius: 24px; }
    .pasos { grid-template-columns: 1fr; }
    .paso { padding: 24px; border-radius: 24px; }
    .aclaracion { padding: 32px 20px; border-radius: 24px; }
    .entradas--tres { grid-template-columns: 1fr; }
    .versus__cabeza { padding: 56px 0 24px; }
    .versus__selector { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .pagina { padding: 16px 16px 0; }
    .nota.contenedor { padding: 40px 16px 80px; }
    .legal { padding: 0 16px 80px; }
}

.nota__cifra strong { padding-bottom: .12em; }
.entrada { border-color: var(--gris); background: var(--gris); }
.entrada:hover { border-color: var(--negro); }
.legal__lista { border-top-color: #d6d6d6; }

@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fuentes/instrument-serif-italic.woff2) format("woff2");
}

:root {
    --acento: #ff4d1a;
    --fondo: #f4f4f4;
    --gris-claro: #a6a6a6;
    --serif: "Instrument Serif", Georgia, serif;
}

em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.k-gris { color: var(--gris-claro); }
.k-chispa { color: var(--acento); font-size: .7em; vertical-align: .2em; margin-right: .4em; }
.k-chispa--centro { display: block; margin: 0 auto 24px; font-size: 32px; text-align: center; }

.k-eti { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--acento); }
.k-eti--acento { color: var(--acento); }

.k-etiqueta {
    align-self: flex-start;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.k-punto { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }

.k-boton {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 6px 0 22px;
    border-radius: 999px;
    background: var(--negro);
    color: var(--blanco);
    font-size: 15px;
    font-weight: 500;
    transition: transform .2s var(--curva);
}

.k-boton b {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blanco);
    color: var(--negro);
    transition: transform .3s var(--curva);
}

.k-boton:hover b { transform: translateX(3px); }
.k-boton:active { transform: scale(.97); }
.k-boton--claro { background: var(--blanco); color: var(--negro); }
.k-boton--claro b { background: var(--negro); color: var(--blanco); }

.k-nota { max-width: 52ch; margin-top: 24px; font-size: 14px; line-height: 1.5; color: #7a7a7a; }
.k-nota a { text-decoration: underline; text-underline-offset: 3px; }

.h4 { padding: 20px var(--lado) 0; }
.h4 > .nav { max-width: var(--ancho); margin: 0 auto; }

.h4__cabeza {
    display: grid;
    justify-items: center;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
    padding: 72px 0 48px;
    text-align: center;
}

.h4__antetitulo { font-family: var(--serif); font-style: italic; font-size: 19px; }

.h4__titulo {
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.055em;
}

.h4__titulo em { letter-spacing: -.02em; }
.h4__sub { max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: #6e6e6e; }
.h4__lista { width: min(100%, 560px); }
.h4__lista .lista { margin: 0 auto; }

.h4__imagen {
    position: relative;
    max-width: var(--ancho);
    margin: 0 auto;
    aspect-ratio: 16 / 8;
    border-radius: 32px;
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center 40%;
    color: var(--blanco);
}

.h4__imagen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: var(--tono);
}

.h4__dato {
    position: absolute;
    top: 40px;
    left: 40px;
    display: grid;
    width: min(340px, 60%);
}

.h4__item {
    grid-area: 1 / 1;
    display: grid;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .5s var(--curva), transform .6s var(--curva), visibility 0s .6s;
}

.h4__item.activo { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--curva) .1s, transform .6s var(--curva) .1s, visibility 0s; }
.h4__item strong { font-size: clamp(56px, 6.4vw, 96px); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.h4__item strong span { font-size: .32em; margin-left: .15em; letter-spacing: -.02em; }
.h4__item > span { max-width: 28ch; font-size: 15px; line-height: 1.4; }

.h4__pasos { grid-area: 2 / 1; justify-content: flex-start; padding: 16px 0 0; }
.h4__pasos .dato__paso i { background: rgba(255, 255, 255, .35); }
.h4__pasos .dato__paso i::after { background: var(--blanco); }

.h4__esquina {
    position: absolute;
    right: 40px;
    bottom: 96px;
    display: grid;
    gap: 6px;
    max-width: 240px;
    text-align: right;
}

.h4__esquina strong { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.h4__esquina span { font-size: 14px; line-height: 1.4; }
.h4__esquina:hover strong { text-decoration: underline; text-underline-offset: 4px; }

.h4__pestana {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 40px 12px;
    border-radius: 24px 24px 0 0;
    background: var(--blanco);
    color: var(--negro);
    white-space: nowrap;
}

.h4__pestana::before,
.h4__pestana::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 24px;
    height: 24px;
    background: transparent;
}

.h4__pestana::before { left: -24px; border-bottom-right-radius: 24px; box-shadow: 8px 8px 0 8px var(--blanco); }
.h4__pestana::after { right: -24px; border-bottom-left-radius: 24px; box-shadow: -8px 8px 0 8px var(--blanco); }
.h4__pestana span { font-size: 12px; color: #7a7a7a; }
.h4__pestana b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }

.k-sobre { padding: 120px var(--lado) 80px; }
.k-sobre .contenedor { padding-left: min(24%, 280px); }

.k-frase {
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.k-pildora {
    position: relative;
    display: inline-block;
    width: 2.2em;
    height: .9em;
    vertical-align: -.08em;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
}

.k-pildora::before { content: ""; position: absolute; inset: 0; background: inherit; filter: var(--tono); }

.k-cifras {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 80px 0 0;
    padding-top: 32px;
    border-top: 1px solid #dcdcdc;
}

.k-cifras dt { font-size: clamp(36px, 4vw, 56px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.k-cifras dd { margin: 8px 0 0; font-size: 13px; color: #7a7a7a; }

.k-escalera-sec { padding: 40px var(--lado) 120px; }

.k-escalera {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.k-paso {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 340px;
    padding: 20px;
    border-radius: 24px;
    overflow: hidden;
    background-color: #e9e9e9;
    background-size: cover;
    background-position: center;
    transition: transform .4s var(--curva);
}

.k-paso:hover { transform: translateY(-6px); }
.k-paso > * { position: relative; }
.k-paso--1 { background-color: var(--negro); color: var(--blanco); }
.k-paso--2 { margin-top: 72px; }
.k-paso--4 { margin-top: 72px; }
.k-paso--foto { color: var(--blanco); }
.k-paso--foto::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(.75) contrast(1.08) brightness(.55); }
.k-paso__pie { display: grid; gap: 10px; }
.k-paso__pie strong { font-size: 21px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.k-paso__pie span:last-child { font-size: 13px; line-height: 1.4; opacity: .7; }
.k-paso--4 .k-paso__pie span:last-child { opacity: 1; color: #7a7a7a; }

.k-accion { display: flex; justify-content: center; margin-top: 56px; }

.k-medidas { padding: 80px var(--lado) 120px; text-align: center; }

.k-gran {
    max-width: 16ch;
    margin: 0 auto;
    font-size: clamp(44px, 6.4vw, 96px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.055em;
}

.k-laterales {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    margin: 24px 0 48px;
    text-align: left;
}

.k-laterales p { max-width: 30ch; font-size: 13px; line-height: 1.5; color: #7a7a7a; }
.k-laterales p:last-child { text-align: right; }

.k-buscador { max-width: 640px; margin: 0 auto 48px; padding: 0; }
.k-buscador .buscador__caja { border: 0; background: #ececec; }
.k-buscador .buscador__resultados { text-align: left; }

.k-fila {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    text-align: left;
}

.k-area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 200px;
    padding: 16px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ececec;
    background-size: cover;
    background-position: center;
    transition: transform .4s var(--curva), color .3s var(--curva), min-height .4s var(--curva);
}

.k-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: saturate(.75) contrast(1.08) brightness(.5);
    opacity: 0;
    transition: opacity .4s var(--curva);
}

.k-area > * { position: relative; }
.k-area strong { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }

.k-area__ver {
    align-self: flex-start;
    height: 0;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--blanco);
    color: var(--negro);
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s var(--curva), height .3s var(--curva);
}

.k-area:hover,
.k-area:focus-visible { color: var(--blanco); transform: translateY(-24px); min-height: 240px; }
.k-area:hover::before,
.k-area:focus-visible::before { opacity: 1; }
.k-area:hover .k-area__ver,
.k-area:focus-visible .k-area__ver { height: 28px; opacity: 1; }

.k-negro { padding: 120px 0 96px; background: var(--negro); color: var(--blanco); overflow: hidden; }
.k-negro .contenedor { padding: 0 var(--lado); padding-left: max(var(--lado), min(24%, 280px)); }
.k-frase--claro .k-gris { color: #7d7d7d; }

.k-carrusel {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 72px;
    padding: 24px calc(50% - 170px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.k-carrusel::-webkit-scrollbar { display: none; }

.k-casa {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 340px;
    aspect-ratio: 1;
    padding: 20px;
    border: 3px solid var(--blanco);
    border-radius: 28px;
    overflow: hidden;
    background-color: #222;
    background-size: cover;
    background-position: center;
    scroll-snap-align: center;
    transform: scale(.66);
    opacity: .7;
    transition: transform .5s var(--curva), opacity .5s var(--curva);
}

.k-casa::before { content: ""; position: absolute; inset: 0; background: inherit; filter: grayscale(1) contrast(1.1) brightness(.6); }
.k-casa > * { position: relative; }
.k-casa.activa { transform: none; opacity: 1; }
.k-casa__marca { font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.k-casa__pie { display: grid; gap: 4px; opacity: 0; transition: opacity .4s var(--curva); }
.k-casa.activa .k-casa__pie { opacity: 1; }
.k-casa__pie strong { font-size: 36px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.k-casa__pie span { font-size: 13px; }

.k-flechas { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }

.k-flecha {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--blanco);
    color: var(--negro);
    font-size: 22px;
    transition: transform .2s var(--curva);
}

.k-flecha:active { transform: scale(.94); }
.k-flecha--acento { background: var(--acento); color: var(--blanco); }

.k-cuentas { padding: 120px var(--lado); }

.k-cuentas__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.k-medio {
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.05em;
}

.k-saldo { display: grid; gap: 8px; margin-top: 48px; }
.k-saldo strong { font-size: clamp(72px, 9vw, 136px); font-weight: 500; line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.k-saldo span { font-size: 14px; color: #7a7a7a; }

.k-acordeon { margin: 0; gap: 8px; }
.k-acordeon .acordeon__fila { border: 0; border-radius: 16px; background: #ececec; }
.k-acordeon .acordeon__fila.activa { background: var(--negro); color: var(--blanco); }
.k-acordeon .acordeon__boton { font-weight: 500; }

.k-cuenta { padding: 0 var(--lado) 120px; }
.k-cuenta .contenedor { padding-top: 64px; border-top: 1px solid #dcdcdc; }

.k-reloj {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
}

.k-reloj div { display: grid; gap: 8px; padding: 24px; border-radius: 24px; background: #ececec; }
.k-reloj div:first-child { background: var(--negro); color: var(--blanco); }
.k-reloj strong { font-size: clamp(56px, 7vw, 112px); font-weight: 500; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.k-reloj span { font-size: 13px; color: #7a7a7a; }
.k-reloj div:first-child span { color: var(--acento); }

.final { padding: 120px var(--lado); background: var(--fondo); }
.final__titulo { font-weight: 500; letter-spacing: -.055em; max-width: 16ch; }
.final__sub { color: #6e6e6e; }

.rodapie { position: relative; padding: 80px var(--lado) 0; background: var(--negro); color: var(--blanco); overflow: hidden; }
.rodapie__arriba { border-bottom-color: #2a2a2a; }
.rodapie__arriba .logo { color: var(--blanco); }
.rodapie__columnas { border-bottom-color: #2a2a2a; }
.rodapie__columnas h4 { color: var(--blanco); font-weight: 600; }
.rodapie__columnas a { color: #9a9a9a; }
.rodapie__columnas a:hover { color: var(--blanco); }
.rodapie__legal { color: #7a7a7a; }

.rodapie__marca {
    margin: 48px 0 0;
    font-size: clamp(120px, 27vw, 420px);
    font-weight: 300;
    line-height: .72;
    letter-spacing: -.07em;
    text-align: center;
    color: var(--blanco);
    white-space: nowrap;
    transform: translateY(8%);
}

@media (max-width: 1100px) {
    .k-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .k-escalera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-paso--2, .k-paso--4 { margin-top: 48px; }
    .k-paso--3 { margin-top: -48px; }
    .k-cuentas__rejilla { grid-template-columns: 1fr; gap: 40px; }
    .h4__imagen { aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
    .h4__cabeza { padding: 48px 0 32px; }
    .h4__imagen { aspect-ratio: 3 / 4; border-radius: 24px; }
    .h4__dato { top: 24px; left: 24px; width: calc(100% - 48px); }
    .h4__esquina { right: 24px; bottom: 112px; }
    .h4__pestana { gap: 16px; padding: 12px 20px 8px; }
    .h4__pestana b:nth-of-type(n+4) { display: none; }
    .k-sobre { padding: 80px var(--lado) 48px; }
    .k-sobre .contenedor, .k-negro .contenedor { padding-left: var(--lado); }
    .k-sobre .contenedor { padding-left: 0; }
    .k-cifras { grid-template-columns: 1fr 1fr; margin-top: 48px; }
    .k-laterales { flex-direction: column; gap: 12px; text-align: center; }
    .k-laterales p, .k-laterales p:last-child { margin: 0 auto; text-align: center; }
    .k-fila { grid-template-columns: 1fr 1fr; }
    .k-area { min-height: 160px; }
    .k-area:hover, .k-area:focus-visible { transform: none; min-height: 160px; }
    .k-negro { padding: 80px 0 64px; }
    .k-carrusel { padding: 16px calc(50% - 130px); margin-top: 48px; }
    .k-casa { width: 260px; }
    .k-reloj { grid-template-columns: 1fr 1fr; }
    .k-cuentas { padding: 80px var(--lado); }
}

@media (max-width: 560px) {
    .h4 { padding: 16px 16px 0; }
    .h4__titulo { font-size: 46px; }
    .k-escalera { grid-template-columns: 1fr; }
    .k-paso--2, .k-paso--3, .k-paso--4 { margin-top: 0; }
    .k-paso { min-height: 260px; }
    .k-reloj div { padding: 16px; border-radius: 20px; }
    .rodapie { padding: 56px 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .h4__item, .k-casa, .k-area, .k-paso { transition: none; }
}

.k-escalera-sec { padding-bottom: 64px; }
.k-medidas { padding-top: 64px; }

.k-area { background-size: 0 0; }
.k-area::before { background-size: cover; background-position: center; }
.rodapie__marca, .h4__titulo, .k-gran, .final__titulo { font-variant-ligatures: none; }
@media (hover: none) {
    .k-area { color: var(--blanco); }
    .k-area::before { opacity: 1; }
    .k-area .k-area__ver { height: 28px; opacity: 1; }
}

@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fuentes/anton-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fuentes/anton-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --display: "Anton", "Impact", sans-serif;
    --papel: #ebe7e0;
    --tinta: #0d0d0d;
}

.c-portada {
    position: relative;
    min-height: 100svh;
    padding: 20px var(--lado) 0;
    display: flex;
    flex-direction: column;
    color: var(--blanco);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center 35%;
    overflow: hidden;
}

.c-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: saturate(.8) contrast(1.05) brightness(.5);
}

.c-portada > * { position: relative; z-index: 1; }

.c-portada__cuerpo {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
    padding: 96px 0 40px;
}

.c-sello {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--acento);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.c-portada__titulo {
    margin: 24px 0 32px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(64px, 9vw, 148px);
    line-height: .9;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.c-portada__lista { max-width: 560px; }
.c-portada__lista .lista { justify-items: start; }

.c-portada__der { position: relative; display: grid; gap: 24px; align-content: end; }
.c-comillas { font-family: var(--serif); font-style: italic; font-size: 72px; line-height: .5; color: var(--acento); }

.c-cita {
    grid-area: 2 / 1;
    display: grid;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .5s var(--curva), transform .6s var(--curva), visibility 0s .6s;
}

.c-cita.activo { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--curva) .1s, transform .6s var(--curva) .1s, visibility 0s; }
.c-cita em { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; max-width: 22ch; }
.c-cita strong { font-family: var(--display); font-weight: 400; font-size: 40px; text-transform: uppercase; color: var(--acento); }

.c-numeros { grid-area: 3 / 1; display: flex; gap: 12px; }

.c-numero {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    font-size: 12px;
    font-weight: 600;
}

.c-numero.activo { border-color: var(--blanco); }
.c-numero i { position: absolute; left: 8px; right: 8px; bottom: -8px; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, .2); }

.c-portada__gigante {
    margin: 0 -2vw -.18em;
    font-family: var(--display);
    font-size: clamp(120px, 26vw, 460px);
    line-height: .85;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, .9);
    pointer-events: none;
}

.c-portada__barra {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: var(--ancho);
    width: 100%;
    margin: 0 auto;
    padding: 20px 24px;
    background: var(--blanco);
    color: var(--negro);
}

.c-portada__barra a { display: flex; gap: 12px; align-items: center; }
.c-portada__barra strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.c-portada__barra small { display: block; margin-top: 4px; font-size: 12px; color: #7a7a7a; }
.c-portada__barra a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.c-mini {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background-color: var(--negro);
    background-size: cover;
    background-position: center;
}

.c-mini::before, .c-foto::before { content: ""; position: absolute; inset: 0; background: inherit; filter: var(--tono); }

.c-manifiesto { padding: 120px var(--lado) 32px; background: var(--tinta); color: var(--papel); }

.c-manifiesto__linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 .25em;
    font-family: var(--display);
    font-size: clamp(56px, 10.4vw, 176px);
    line-height: 1.02;
    text-transform: uppercase;
}

.c-manifiesto__linea:nth-child(2) { justify-content: flex-end; }
.c-manifiesto__linea:nth-child(4) { justify-content: center; }

.c-foto {
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: .82em;
    border-radius: 6px;
    overflow: hidden;
    background-color: #222;
    background-size: cover;
    background-position: center;
}

.c-foto--ancha { width: 2.4em; }
.c-acento { color: var(--acento); }

.c-pie-escena {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 96px;
    padding-top: 16px;
    border-top: 1px solid rgba(235, 231, 224, .25);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.c-medidas { padding: 96px var(--lado) 120px; background: var(--papel); }

.c-titulo-gigante {
    margin-bottom: 32px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(64px, 11.6vw, 200px);
    line-height: .86;
    text-transform: uppercase;
    text-align: center;
}

.c-carteles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: var(--ancho);
    margin: 0 auto;
}

.c-cartel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    aspect-ratio: 3 / 4;
    padding: 24px;
    border-radius: 12px;
    overflow: hidden;
    color: var(--blanco);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center;
}

.c-cartel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: saturate(.8) contrast(1.05) brightness(.55);
    transition: transform 1.2s var(--curva), filter .6s var(--curva);
}

.c-cartel:hover::before { transform: scale(1.05); filter: saturate(.9) contrast(1.05) brightness(.68); }
.c-cartel > * { position: relative; }
.c-cartel__flecha { position: absolute; top: 24px; left: 24px; font-size: 40px; line-height: 1; transition: transform .3s var(--curva); }
.c-cartel:hover .c-cartel__flecha { transform: translate(4px, -4px); }
.c-cartel strong { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.4vw, 72px); line-height: .9; text-transform: uppercase; }
.c-cartel > span:last-child { max-width: 34ch; font-size: 14px; line-height: 1.4; }

.c-buscador { max-width: 720px; margin: 48px auto 0; padding: 0; }
.c-buscador .buscador__caja { border-color: var(--negro); }

.c-cinta { overflow: hidden; background: var(--negro); color: var(--papel); padding: 20px 0; }

.c-cinta__pista {
    display: flex;
    align-items: center;
    gap: 32px;
    width: max-content;
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    animation: correr 28s linear infinite;
}

.c-cinta__pista b { font-weight: 400; color: var(--acento); font-size: .6em; }

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

.c-mascara { padding: 96px var(--lado) 120px; background: var(--papel); text-align: center; }

.c-mascara__texto {
    display: block;
    font-family: var(--display);
    font-size: clamp(120px, 25vw, 440px);
    line-height: .86;
    text-transform: uppercase;
    color: transparent;
    background-color: var(--negro);
    background-size: cover;
    background-position: center 40%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: saturate(.8) contrast(1.1);
}

.c-mascara__sub { max-width: 40ch; margin: 24px auto 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.c-mascara__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.c-boton {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 28px;
    border: 1px solid var(--negro);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}

.c-boton:hover { background: var(--negro); color: var(--papel); }
.c-boton:active { transform: scale(.97); }
.c-boton--acento { border-color: var(--acento); background: var(--acento); color: var(--blanco); }
.c-boton--acento:hover { background: var(--negro); border-color: var(--negro); }

.c-escena {
    position: relative;
    min-height: 92svh;
    padding: 64px var(--lado) 32px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    color: var(--blanco);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.c-escena::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(.85) contrast(1.05) brightness(.45); }
.c-escena > * { position: relative; }

.c-escena__linea { position: relative; width: 140px; height: 4px; border-radius: 2px; background: var(--blanco); align-self: end; margin-bottom: 32px; }
.c-escena__linea::after { content: ""; position: absolute; right: -8px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); }

.c-escena__texto { grid-row: 2; align-self: center; max-width: 52ch; font-size: clamp(20px, 2vw, 28px); line-height: 1.4; }
.c-escena__texto em { color: var(--acento); }
.c-escena__hashtag { justify-self: end; font-family: var(--display); font-size: clamp(56px, 7vw, 120px); line-height: 1; }
.c-pie-escena--claro { margin-top: 32px; border-top-color: rgba(255, 255, 255, .3); }

.c-cuentas { padding: 120px var(--lado); background: var(--papel); }

.c-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 48px;
    border-radius: 20px;
    background: var(--negro);
    color: var(--blanco);
}

.c-panel__izq { display: flex; flex-direction: column; gap: 16px; }
.c-panel__izq h2 { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 5.4vw, 88px); line-height: .9; text-transform: uppercase; }
.c-panel__izq p { max-width: 40ch; font-size: 16px; line-height: 1.5; color: #b0b0b0; }
.c-panel__cifra { margin-top: auto; font-family: var(--display); font-weight: 400; font-size: clamp(88px, 10vw, 168px); line-height: .85; font-variant-numeric: tabular-nums; }
.c-panel__izq > span { font-size: 14px; color: var(--acento); }

.c-acordeon { margin: 0; gap: 8px; align-self: center; }
.c-acordeon .acordeon__fila { border: 0; border-radius: 12px; background: #1b1b1b; color: var(--blanco); }
.c-acordeon .acordeon__fila.activa { background: var(--papel); color: var(--negro); }

.c-cuenta { padding: 120px var(--lado); background: var(--tinta); color: var(--papel); }

.c-cuenta__cabeza { display: flex; justify-content: space-between; align-items: end; gap: 32px; max-width: var(--ancho); margin: 0 auto 48px; }
.c-cuenta__cabeza h2 { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 8vw, 136px); line-height: .9; text-transform: uppercase; }
.c-cuenta__cabeza p { max-width: 32ch; font-size: 18px; line-height: 1.4; text-align: right; }

.c-reloj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--ancho); margin: 0 auto; border-top: 1px solid rgba(235, 231, 224, .25); }
.c-reloj div { display: grid; gap: 8px; padding: 24px 0 0; }
.c-reloj div + div { padding-left: 24px; border-left: 1px solid rgba(235, 231, 224, .25); }
.c-reloj strong { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 10vw, 176px); line-height: .9; font-variant-numeric: tabular-nums; }
.c-reloj div:first-child strong { color: var(--acento); }
.c-reloj span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.c-cuenta__aviso { max-width: var(--ancho); margin: 40px auto 0; font-size: 12px; line-height: 1.5; color: #8d8d8d; }
.c-cuenta__aviso a { color: var(--papel); text-decoration: underline; text-underline-offset: 3px; }

.final {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 92svh;
    padding: 96px var(--lado);
    text-align: center;
    color: var(--blanco);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.final::before { content: ""; position: absolute; inset: -40px; background: inherit; filter: saturate(.9) contrast(1.05) brightness(.45) blur(8px); }
.final__dentro { position: relative; display: grid; justify-items: center; gap: 24px; }

.final__titulo {
    max-width: none;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(140px, 26vw, 420px);
    line-height: .82;
    letter-spacing: 0;
    text-transform: uppercase;
}

.final__sub { max-width: 46ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--blanco); }
.final__sub em { color: var(--acento); }
.final__lista { width: min(100%, 600px); }
.final__lista .lista { margin: 0 auto; }

.rodapie__marca { font-family: var(--display); font-weight: 400; font-size: clamp(120px, 24vw, 400px); letter-spacing: 0; line-height: .8; transform: translateY(6%); }

@media (max-width: 1100px) {
    .c-portada__cuerpo { grid-template-columns: 1fr; gap: 40px; }
    .c-portada__barra { grid-template-columns: 1fr 1fr; }
    .c-carteles { grid-template-columns: 1fr 1fr; }
    .c-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .c-portada__cuerpo { padding-top: 56px; }
    .c-portada__barra { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
    .c-portada__barra a:nth-child(n+3) { display: none; }
    .c-manifiesto { padding: 80px var(--lado) 24px; }
    .c-manifiesto__linea, .c-manifiesto__linea:nth-child(2), .c-manifiesto__linea:nth-child(4) { justify-content: flex-start; }
    .c-pie-escena { margin-top: 56px; flex-wrap: wrap; }
    .c-carteles { grid-template-columns: 1fr; }
    .c-cartel { aspect-ratio: 4 / 5; }
    .c-panel { padding: 28px 20px; }
    .c-cuenta__cabeza { flex-direction: column; align-items: flex-start; }
    .c-cuenta__cabeza p { text-align: left; }
    .c-reloj { grid-template-columns: 1fr 1fr; }
    .c-reloj div:nth-child(3) { padding-left: 0; border-left: 0; }
    .c-escena { min-height: 80svh; }
}

@media (prefers-reduced-motion: reduce) {
    .c-cinta__pista { animation: none; }
    .c-cita { transition: none; }
}

.c-titulo-gigante, .c-panel__izq h2 { text-wrap: balance; }
.c-panel__izq h2 { line-height: .96; }
.final__titulo { padding-top: .14em; }

body { background: var(--papel); }

.pagina {
    position: relative;
    min-height: min(88svh, 860px);
    padding: 20px var(--lado) 24px;
    display: flex;
    flex-direction: column;
    background-color: var(--tinta);
    background-size: cover;
    background-position: center 35%;
    color: var(--blanco);
    overflow: hidden;
}

.pagina--foto::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(.8) contrast(1.05) brightness(.42); }
.pagina > * { position: relative; }
.pagina > .nav { width: 100%; }

.pagina__cabeza {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
    padding: 96px 0 48px;
    text-align: left;
}

.pagina__h1 { max-width: 60ch; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .8); }

.pagina__titulo {
    max-width: 14ch;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(56px, 8.4vw, 140px);
    line-height: .92;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.pagina__sub { max-width: 52ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .85); }
.pagina__pie { margin-top: 0; max-width: var(--ancho); width: 100%; margin-inline: auto; }

.bloque { background: var(--papel); }
.bloque--gris { background: var(--tinta); color: var(--papel); }
.bloque--gris .bloque__sub { color: #a8a39b; }
.bloque--negro { background: var(--negro); }

.bloque__titulo {
    max-width: 18ch;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 120px);
    line-height: .92;
    letter-spacing: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.bloque__titulo--medio { font-size: clamp(40px, 5vw, 80px); }
.bloque__sub { color: #6b665f; }

.paso { background: #ddd8cf; border-radius: 12px; }
.paso h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: .98; letter-spacing: 0; text-transform: uppercase; }
.paso p { color: #4d4943; }
.paso__num { background: var(--acento); }
.aclaracion { border-radius: 12px; }
.aclaracion p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: 0; }

.otras-areas a { background: #ddd8cf; }

.entrada { border-radius: 12px; background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.entrada__foto { border-radius: 8px; }
.entrada__cifra { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.entrada__titulo { font-weight: 700; }
.entrada__etiqueta { background: var(--acento); }
.bloque--gris .entrada { background: #1b1b1b; border-color: #1b1b1b; color: var(--papel); }
.bloque--gris .entrada:hover { border-color: var(--papel); }

.filtro { background: #ddd8cf; }
.filtro[aria-pressed="true"] { background: var(--negro); color: var(--papel); }

.nota.contenedor { background: var(--papel); }
.nota__cifra strong { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.nota__cuerpo h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.nota__cuerpo blockquote { border-radius: 12px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 42px); letter-spacing: 0; line-height: 1.15; }
.nota__propuesta, .nota__lista { border-radius: 12px; }
.nota__lista { background: #ddd8cf; }

.legal { background: var(--papel); padding-top: 80px; }
.legal__entrada { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; text-align: left; }

.versus { max-width: none; margin: 0; padding: 20px var(--lado) 80px; background: var(--tinta); color: var(--papel); }
.versus > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.versus > .nav { color: var(--blanco); }
.versus__titulo { font-family: var(--display); font-weight: 400; font-size: clamp(64px, 10vw, 168px); line-height: .9; letter-spacing: 0; text-transform: uppercase; }
.versus__entrada { color: #a8a39b; }
.versus__opcion { background: #1f1f1f; color: var(--papel); }
.versus__opcion[aria-selected="true"] { background: var(--acento); color: var(--blanco); }
.versus__marco { border-radius: 12px; }
.versus__dato { border-radius: 12px; background: #1b1b1b; color: var(--papel); }
.versus__dato--suyo { background: var(--papel); color: var(--negro); }
.versus__dato strong { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.versus__veces { font-family: var(--display); font-weight: 400; letter-spacing: 0; color: var(--acento); }
.versus__detalle { color: #c9c4bc; }

.bloque__accion--suelta { background: var(--papel); }

@media (max-width: 760px) {
    .pagina { min-height: 72svh; }
    .pagina__cabeza { padding: 64px 0 32px; }
}

.bloque--pegado { padding-top: 48px; }
.js .aparece { transform: translateY(8px); transition: opacity .4s var(--curva), transform .5s var(--curva); }

@media (max-width: 560px) {
    .c-portada__titulo { font-size: 52px; }
    .c-manifiesto__linea { font-size: 50px; }
    .c-foto { width: 1.3em; }
    .c-foto--ancha { width: 1.9em; }
}

.sueldos { display: grid; border-top: 1px solid #c9c4bb; }

.sueldo-fila {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 24px;
    padding: 24px 8px;
    border-bottom: 1px solid #c9c4bb;
    transition: background-color .25s var(--curva), color .25s var(--curva), padding .3s var(--curva);
}

.sueldo-fila__cargo { font-family: var(--display); font-size: clamp(32px, 4vw, 64px); line-height: .95; text-transform: uppercase; }
.sueldo-fila strong { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 48px); font-variant-numeric: tabular-nums; }
.sueldo-fila strong small { font-family: var(--fuente); font-size: 14px; font-weight: 500; margin-left: 8px; }
.sueldo-fila__veces { font-size: 15px; font-weight: 600; color: var(--acento); white-space: nowrap; }

@media (hover: hover) {
    .sueldo-fila:hover { background: var(--negro); color: var(--papel); padding-left: 24px; padding-right: 24px; }
}

.sueldos__nota { margin-top: 24px; font-size: 14px; color: #6b665f; }
.sueldos__nota a { text-decoration: underline; text-underline-offset: 3px; }

.comparativa { display: grid; gap: 16px; width: 100%; max-width: 720px; padding: 32px; border-radius: 12px; background: var(--negro); color: var(--papel); }

.comparativa__fila { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.comparativa__fila span { font-size: 14px; font-weight: 600; }
.comparativa__fila i { display: block; height: 24px; width: var(--ancho); min-width: 4px; border-radius: 4px; background: var(--acento); }
.comparativa__fila--tuya i { background: var(--papel); }
.comparativa__fila strong { font-family: var(--display); font-weight: 400; font-size: 24px; font-variant-numeric: tabular-nums; }
.comparativa__veces { margin-top: 8px; font-family: var(--display); font-size: clamp(36px, 4vw, 56px); line-height: 1; text-transform: uppercase; color: var(--acento); }

.desglose { width: 100%; border-collapse: collapse; font-size: 16px; }
.desglose th, .desglose td { padding: 16px 0; border-bottom: 1px solid #c9c4bb; text-align: left; vertical-align: top; }
.desglose th { font-weight: 600; }
.desglose th small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #6b665f; }
.desglose td { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.preguntas { margin: 0; display: grid; gap: 4px; }
.preguntas dt { margin-top: 16px; font-weight: 700; font-size: 17px; }
.preguntas dd { margin: 0; font-size: 17px; line-height: 1.5; color: #4d4943; }

@media (max-width: 760px) {
    .sueldo-fila { grid-template-columns: 1fr auto; gap: 8px 16px; }
    .sueldo-fila__cargo { grid-column: 1 / -1; }
    .comparativa { padding: 24px 16px; }
    .comparativa__fila { grid-template-columns: 72px minmax(0, 1fr); }
    .comparativa__fila strong { grid-column: 2; font-size: 20px; }
}

.b-portada { padding: 20px var(--lado) 64px; background: var(--blanco); color: var(--negro); }
.b-portada > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.b-portada .nav__enlaces { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }

.b-portada__titulo {
    margin-top: 80px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(72px, 11.4vw, 184px);
    line-height: .9;
    text-transform: uppercase;
}

.b-portada__sub { margin-top: 28px; font-size: 13px; line-height: 1.5; text-transform: uppercase; letter-spacing: .02em; }
.b-portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.b-pastilla {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--negro);
    border-radius: 999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: background-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}

.b-pastilla:hover { background: var(--negro); color: var(--blanco); }
.b-pastilla:active { transform: scale(.97); }
.b-pastilla--negra { background: var(--negro); color: var(--blanco); }
.b-pastilla--negra:hover { background: var(--acento); border-color: var(--acento); }

.b-portada__fila { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 88px; }
.b-meta { font-size: 11px; letter-spacing: .02em; }
.b-portada__h2 { margin-top: 8px; font-size: 22px; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.b-enlace { display: inline-flex; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 12px; text-transform: uppercase; }

.b-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }

.b-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4 / 5;
    padding: 16px;
    overflow: hidden;
    color: var(--blanco);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center;
}

.b-tarjeta::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(.8) contrast(1.05) brightness(.6); transition: transform 1.2s var(--curva); }
.b-tarjeta:hover::before { transform: scale(1.05); }
.b-tarjeta > * { position: relative; }
.b-tarjeta strong { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 4.4vw, 64px); line-height: .9; }
.b-tarjeta strong small { margin-left: 6px; font-size: .4em; }
.b-tarjeta span { font-size: 13px; line-height: 1.35; }

@media (max-width: 900px) {
    .b-tarjetas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .b-portada { padding: 16px 16px 48px; }
    .b-portada__titulo { margin-top: 56px; font-size: 60px; }
    .b-portada__sub br { display: none; }
    .b-portada__fila { margin-top: 56px; }
}

.contraste { padding: 96px var(--lado) 120px; background: var(--blanco); }
.contraste > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.contraste__cabeza { display: grid; gap: 8px; margin-bottom: 24px; }
.contraste__titulo { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 112px); line-height: .9; text-transform: uppercase; }
.contraste__cabeza p { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7a7a7a; }

.contraste__pestanas { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.contraste__pestanas::-webkit-scrollbar { display: none; }

.contraste__pestana {
    flex: none;
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--negro);
    border-radius: 999px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: background-color .2s var(--curva), color .2s var(--curva);
}

.contraste__pestana[aria-selected="true"] { background: var(--negro); color: var(--blanco); }

.contraste__marco {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - 120px);
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    background: var(--negro);
}

.contraste__lado { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.contraste__lado::before { content: ""; position: absolute; inset: 0; background: inherit; }
.contraste__lado--mal::before { filter: saturate(.75) contrast(1.05) brightness(.5); }
.contraste__lado--bien::before { filter: saturate(.95) brightness(1.02); }
.contraste__lado--mal { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }

.contraste__texto { position: absolute; bottom: 32px; z-index: 1; display: grid; gap: 10px; max-width: min(420px, 42%); }
.contraste__texto span { justify-self: start; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.contraste__texto strong { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.6vw, 56px); line-height: .95; text-transform: uppercase; }
.contraste__texto--mal { left: 32px; color: var(--blanco); }
.contraste__texto--mal span { background: var(--negro); }
.contraste__texto--bien { right: 32px; text-align: right; justify-items: end; color: var(--negro); }
.contraste__texto--bien span { justify-self: end; background: var(--blanco); }
.contraste__texto--bien strong { color: var(--papel); }
.contraste__texto--bien p { padding: 12px 16px; background: var(--papel); font-size: 15px; line-height: 1.4; text-align: left; }
.contraste__texto--bien .b-pastilla { position: relative; z-index: 4; }

.contraste__barra { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 3px; margin-left: -1.5px; background: var(--blanco); z-index: 2; pointer-events: none; }

.contraste__barra span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--blanco);
    color: var(--negro);
    font-size: 20px;
    font-weight: 900;
    transition: transform .2s var(--curva);
}

.contraste__marco.arrastrando .contraste__barra span { transform: scale(1.12); }
.contraste__control { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }

@media (max-width: 760px) {
    .contraste { padding: 64px 16px 80px; }
    .contraste__marco { aspect-ratio: 3 / 4; max-height: 76svh; }
    .contraste__texto { max-width: calc(50% - 20px); bottom: 16px; }
    .contraste__texto--mal { left: 12px; top: 16px; bottom: auto; }
    .contraste__texto--bien { right: 12px; }
    .contraste__texto strong { font-size: 26px; }
    .contraste__texto--bien p { display: none; }
}

.contraste__texto--bien { padding: 20px; background: var(--papel); }
.contraste__texto--bien strong { color: var(--negro); }
.contraste__texto--bien span { background: var(--acento); color: var(--blanco); }
.contraste__texto--bien p { padding: 0; background: none; text-align: right; }
@media (max-width: 760px) { .contraste__texto--bien { padding: 12px; } }

:root { --amarillo: #f5e663; }

.v-portada {
    position: relative;
    min-height: 100svh;
    padding: 20px var(--lado) 32px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--amarillo);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center 40%;
    overflow: hidden;
}

.v-portada::before {
    content: "";
    position: absolute;
    inset: -2%;
    background: inherit;
    filter: saturate(1.05) contrast(1.05) brightness(.82);
    animation: acercar 24s ease-in-out infinite alternate;
}

.v-portada::after, .v-capitulo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@keyframes acercar { to { transform: scale(1.06); } }

.v-portada > * { position: relative; z-index: 1; }
.v-portada > .nav { color: var(--blanco); }
.v-portada__texto { align-self: center; justify-self: start; margin-left: 4vw; }

.v-titulo {
    font-family: var(--fuente);
    font-weight: 800;
    font-size: clamp(72px, 12vw, 200px);
    line-height: .74;
    letter-spacing: -.075em;
    text-shadow: 0 0 1px rgba(0, 0, 0, .2);
}

.v-sub { margin-top: 20px; font-size: clamp(12px, 1vw, 15px); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.v-portada__lista { justify-self: start; width: min(100%, 560px); margin-left: 4vw; }
.v-portada__lista .lista { justify-items: start; }

.v-capitulos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--tinta); }

.v-capitulo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    aspect-ratio: 16 / 9;
    padding: 0 8%;
    overflow: hidden;
    color: var(--amarillo);
    background-color: var(--tinta);
    background-size: cover;
    background-position: center;
}

.v-capitulo::before { content: ""; position: absolute; inset: 0; background: inherit; filter: saturate(.9) brightness(.62); transition: transform 1.4s var(--curva), filter .6s var(--curva); }
.v-capitulo:hover::before { transform: scale(1.05); filter: saturate(1) brightness(.75); }
.v-capitulo > * { position: relative; z-index: 1; }
.v-capitulo__num { font-weight: 800; font-size: clamp(72px, 9vw, 140px); line-height: .8; letter-spacing: -.06em; }
.v-capitulo__texto { max-width: 34ch; font-size: clamp(12px, 1vw, 15px); font-weight: 600; line-height: 1.1; }

@media (max-width: 760px) {
    .v-portada__texto, .v-portada__lista { margin-left: 0; }
    .v-titulo { font-size: 76px; }
    .v-capitulos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .v-portada::before { animation: none; } }

@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fuentes/rubik-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fuentes/rubik-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fuentes/space-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fuentes/space-mono-700.woff2) format("woff2"); }

:root {
    --fuente: "Rubik", system-ui, sans-serif;
    --display: "Rubik", system-ui, sans-serif;
    --mono: "Space Mono", ui-monospace, monospace;
}

.c-cita strong, .c-cartel strong, .c-escena__hashtag, .c-panel__izq h2, .c-panel__cifra, .c-cuenta__cabeza h2, .c-reloj strong,
.rodapie__marca, .paso h3, .entrada__cifra, .nota__cifra strong, .nota__cuerpo h2, .versus__titulo, .versus__dato strong,
.versus__veces, .sueldo-fila__cargo, .sueldo-fila strong, .comparativa__fila strong, .comparativa__veces, .b-tarjeta strong,
.contraste__titulo, .contraste__texto strong, .c-portada__titulo, .c-manifiesto__linea, .c-titulo-gigante, .c-cinta__pista,
.c-mascara__texto, .final__titulo, .pagina__titulo, .bloque__titulo, .v-titulo, .v-capitulo__num, .b-portada__titulo {
    font-family: var(--display);
    font-weight: 900;
    text-transform: lowercase;
    letter-spacing: -.065em;
    font-variant-ligatures: none;
}

.c-manifiesto__linea, .c-titulo-gigante, .pagina__titulo, .bloque__titulo, .contraste__titulo, .versus__titulo, .final__titulo { line-height: .86; }
.v-titulo { line-height: .78; letter-spacing: -.075em; }
.final__titulo, .rodapie__marca, .c-mascara__texto { letter-spacing: -.07em; }
.c-cinta__pista { letter-spacing: -.04em; }

.c-sello, .b-meta, .c-pie-escena, .v-sub, .etiqueta, .nav__enlaces, .entrada__fecha, .entrada__etiqueta, .pagina__h1,
.contraste__cabeza p, .contraste__pestana, .contraste__texto span, .k-eti, .lista__permiso, .rodapie__legal, .b-pastilla,
.c-capitulo__texto, .v-capitulo__texto, .sueldo-fila__veces, .comparativa__fila span, .versus__dato span, .versus__marca,
.filtro, .c-numero, .c-reloj span, .rodapie__columnas h4 {
    font-family: var(--mono);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
}

.v-sub, .v-capitulo__texto { font-size: 11px; line-height: 1.25; text-align: justify; max-width: 44ch; }
.lista__permiso { font-size: 10px; line-height: 1.4; }
.nav__enlaces { font-size: 11px; }
.logo { font-weight: 900; letter-spacing: -.06em; text-transform: lowercase; }

.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav__enlaces li + li::before { content: none; }
.nav__enlaces { gap: 24px; }
.nav__enlaces--izq { justify-self: start; }
.nav .logo { justify-self: center; font-size: 30px; line-height: 1; }
.nav__der { justify-self: end; display: flex; align-items: center; gap: 24px; }

.v-portada__texto { justify-self: center; margin-left: 0; text-align: center; display: grid; justify-items: center; }
.v-titulo { font-size: clamp(64px, 10.4vw, 176px); }
.v-sub { text-align: center; max-width: 52ch; }
.v-portada__lista { justify-self: center; margin-left: 0; }
.v-portada__lista .lista { justify-items: center; }

@media (max-width: 900px) {
    .nav { grid-template-columns: 1fr auto; }
    .nav__enlaces--izq { display: none; }
    .nav .logo { justify-self: start; font-size: 24px; }
    .nav__der .nav__enlaces { display: none; }
}

.logo {
    display: inline-flex;
    align-items: flex-end;
    gap: .9em;
    padding: 0 .18em .05em 0;
    background: var(--negro);
    color: var(--blanco);
    line-height: .74;
    text-decoration: none;
}

.logo__palabra { font-family: var(--display); font-weight: 800; letter-spacing: -.075em; text-transform: lowercase; margin-left: -.02em; }
.logo__marca { font-family: var(--display); font-weight: 800; font-size: .26em; letter-spacing: -.05em; line-height: 1; padding-bottom: .15em; }
.nav .logo { font-size: 40px; }
.rodapie__arriba .logo { font-size: 48px; background: var(--blanco); color: var(--negro); }

@media (max-width: 900px) { .nav .logo { font-size: 32px; } }

.logo { padding: 0 .16em .16em 0; gap: .6em; }
.logo__marca { padding-bottom: 0; }

.logo { gap: .35em; padding-right: .22em; }
.logo__marca { font-size: .22em; padding-bottom: .1em; }
.nav .logo { font-size: 48px; }
.rodapie__arriba .logo { font-size: 64px; }
@media (max-width: 900px) { .nav .logo { font-size: 38px; } }

.logo, .rodapie__arriba .logo { padding: 0; gap: 0; background: none; color: inherit; line-height: 1; }
.nav .logo { font-size: 30px; }
.rodapie__arriba .logo { font-size: 40px; }
.logo__palabra { letter-spacing: -.07em; }
@media (max-width: 900px) { .nav .logo { font-size: 26px; } }