/* ============================================================
   STARDENT — Sistema visual "La luz del estudio" (LIGHT MODE)
   Paleta de marca preservada — fondos claros, texto oscuro
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --noche: #060D1A;
    --noche-2: #0C1730;
    --azul-star: #1D6DF0;
    --azul-ink: #1554C9;
    /* azul legible sobre claro */
    --violeta: #6B3CE0;
    --magenta: #E4409A;
    --destello: #D4960A;
    /* dorado mas oscuro para mejor contraste sobre blanco */
    --esmalte: #F2F6FC;
    --perla: #8FA0B8;
    --perla-dark: #4E5E78;
    /* texto secundario sobre claro */

    /* Superficies light */
    --bg: #FFFFFF;
    --bg-2: #F7F9FD;
    --bg-3: #EEF2FA;
    --surface: #FFFFFF;
    --border: rgba(29, 109, 240, .14);
    --border-strong: rgba(6, 13, 26, .12);

    /* Texto */
    --text: #060D1A;
    --text-2: #2A3A56;
    --text-muted: #5A6E8A;

    --grad: linear-gradient(118deg, #1D6DF0 0%, #6B3CE0 48%, #E4409A 100%);
    --hair: 1px solid rgba(6, 13, 26, .10);
    --hair-l: 1px solid rgba(6, 13, 26, .10);
    --glow: 0 8px 48px -12px rgba(29, 109, 240, .22);
    --shadow-card: 0 2px 20px -6px rgba(6, 13, 26, .10), 0 1px 4px rgba(6, 13, 26, .06);
    --shadow-md: 0 8px 40px -12px rgba(6, 13, 26, .15);
    --r-card: 20px;
    --r-pill: 999px;
    --f-display: "Fraunces", Georgia, serif;
    --f-ui: "Outfit", system-ui, -apple-system, sans-serif;
    --f-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;
    --ease: cubic-bezier(.22, .61, .21, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.65 var(--f-ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit
}

::selection {
    background: rgba(29, 109, 240, .18);
    color: var(--azul-ink)
}

:focus-visible {
    outline: 2px solid var(--azul-star);
    outline-offset: 3px;
    border-radius: 4px
}

section[id] {
    scroll-margin-top: 96px
}

.container {
    width: min(100% - 40px, 1240px);
    margin-inline: auto
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--azul-star);
    color: #fff;
    padding: .8rem 1.4rem;
    border-radius: 0 0 12px 0;
    z-index: 200
}

.skip:focus {
    left: 0
}

/* ---------- Tipografia ---------- */
.h1 {
    font: 560 clamp(2.6rem, 6vw, 5.2rem)/1.04 var(--f-display);
    letter-spacing: -.02em;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 20, "WONK" 1;
    margin: 1.1rem 0 1.4rem;
    color: var(--text);
}

.h1 em {
    font-style: italic;
    background: linear-gradient(transparent 76%, rgba(29, 109, 240, .22) 76% 90%, transparent 90%)
}

.h2 {
    font: 540 clamp(2rem, 3.6vw, 3.2rem)/1.12 var(--f-display);
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 20, "WONK" 1;
    margin: .9rem 0 1.2rem;
    color: var(--text);
}

.h2 em {
    font-style: italic;
    color: var(--azul-star)
}

h3 {
    font: 520 1.5rem/1.25 var(--f-display);
    letter-spacing: -.01em;
    color: var(--text)
}

.lead {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 56ch
}

.eyebrow {
    font: 500 .75rem/1.4 var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--azul-star);
}

.dato {
    font: 400 .8125rem/1.6 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.luz .eyebrow {
    color: var(--azul-ink)
}

.luz .dato {
    color: var(--perla-dark)
}

/* ---------- Animaciones de aparicion ---------- */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s)
}

.js .reveal.in {
    opacity: 1;
    transform: none
}

.js .mask-line {
    overflow: hidden
}

.js .mask-line>span {
    display: block;
    transform: translateY(112%);
    transition: transform .9s var(--ease) .05s
}

.js .mask-line.in>span {
    transform: none
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.7rem;
    border-radius: var(--r-pill);
    font: 500 1rem var(--f-ui);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .3s var(--ease), background .3s, box-shadow .3s, border-color .3s;
}

.btn-primary {
    background: var(--azul-star);
    color: #fff;
    box-shadow: 0 4px 24px -6px rgba(29, 109, 240, .45)
}

.btn-primary:hover {
    background: var(--violeta);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px -8px rgba(107, 60, 224, .5)
}

.btn-ghost {
    border-color: rgba(6, 13, 26, .20);
    color: var(--text-2)
}

.btn-ghost:hover {
    border-color: var(--azul-star);
    color: var(--azul-star);
    transform: translateY(-2px)
}

.btn-block {
    width: 100%
}

.ico-wa {
    width: 20px;
    height: 20px;
    flex: none
}

.t-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: 500 .95rem var(--f-ui);
    color: var(--azul-ink);
    text-decoration: none;
}

.t-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

.t-link--light {
    color: var(--azul-star);
    font-size: 1.05rem
}

/* ---------- Cabecera ---------- */
.top {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .35s, border-color .35s, backdrop-filter .35s
}

.top.scrolled {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: var(--hair);
    box-shadow: 0 1px 24px -8px rgba(6, 13, 26, .10)
}

.top-in {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 76px
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none
}

.brand-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15
}

.brand-txt strong {
    font: 600 1.2rem var(--f-display);
    letter-spacing: -.01em;
    color: var(--text)
}

.brand-txt small {
    font: 400 .58rem var(--f-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-muted)
}

.nav {
    display: flex;
    gap: .2rem;
    margin-left: auto
}

.nav a {
    color: var(--text-2);
    text-decoration: none;
    font: 400 .95rem var(--f-ui);
    padding: .5rem .85rem;
    border-radius: var(--r-pill);
    transition: color .25s, background .25s
}

.nav a:hover {
    color: var(--azul-star);
    background: rgba(29, 109, 240, .07)
}

.nav-cta {
    padding: .7rem 1.3rem;
    font-size: .9rem
}

.burger {
    display: none;
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: relative;
    z-index: 120
}

.burger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--text);
    transition: transform .35s var(--ease), top .35s var(--ease)
}

.burger span:first-child {
    top: 18px
}

.burger span:last-child {
    top: 26px
}

body.nav-open .burger span:first-child {
    top: 22px;
    transform: rotate(45deg)
}

body.nav-open .burger span:last-child {
    top: 22px;
    transform: rotate(-45deg)
}

.m-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(255, 255, 255, .97);
    display: grid;
    place-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease)
}

body.nav-open .m-nav {
    opacity: 1;
    pointer-events: auto
}

.m-nav nav {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    text-align: center
}

.m-nav a:not(.btn) {
    font: 500 1.9rem var(--f-display);
    color: var(--text);
    text-decoration: none
}

.m-nav .btn {
    margin-top: 1rem
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 90px;
    background: var(--bg)
}

/* Fondo con puntos sutiles y gradiente claro */
.hero-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(29, 109, 240, .15) 1px, transparent 1.6px),
        radial-gradient(rgba(107, 60, 224, .12) 1px, transparent 2px);
    background-size: 130px 130px, 470px 470px;
    background-position: 0 0, 80px 120px;
    opacity: .6;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 30%, #000 30%, transparent 100%);
    mask-image: radial-gradient(80% 80% at 50% 30%, #000 30%, transparent 100%);
}

.hero-spot {
    position: absolute;
    left: 50%;
    top: 28%;
    width: 72vmax;
    height: 72vmax;
    margin: -36vmax 0 0 -36vmax;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(29, 109, 240, .07), transparent 70%);
    transition: transform 1.4s var(--ease);
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2rem
}

.hero-data {
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: var(--hair);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.8rem
}

.hero-case figcaption {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    align-items: baseline
}

.caso-quote {
    font: italic 500 1.15rem var(--f-display);
    color: var(--text-2)
}

/* ---------- El revelado (comparador) ---------- */
.revelado {
    --pos: 50%;
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--r-card);
    overflow: hidden;
    border: var(--hair);
    box-shadow: var(--shadow-md);
    background: var(--bg-2);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
}

.revelado--sm {
    aspect-ratio: 3/2
}

.ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none
}

.ba-after {
    clip-path: inset(0 0 0 var(--pos))
}

.ba-flag {
    position: absolute;
    top: 14px;
    z-index: 3;
    font: 500 .6875rem var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .42rem .8rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    border: var(--hair);
    color: var(--text-2)
}

.ba-flag--a {
    left: 14px
}

.ba-flag--d {
    right: 14px
}

.ba-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    z-index: 2;
    transform: translateX(-1px);
    background: linear-gradient(180deg, #1D6DF0, #6B3CE0, #E4409A);
    box-shadow: 0 0 24px rgba(29, 109, 240, .6);
}

.ba-handle {
    position: absolute;
    left: var(--pos);
    top: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: ew-resize;
    background: #fff;
    color: var(--azul-star);
    border: 2px solid var(--azul-star);
    box-shadow: 0 0 0 4px rgba(29, 109, 240, .14), 0 4px 20px rgba(29, 109, 240, .25);
    display: grid;
    place-items: center;
}

/* ---------- Ticker ---------- */
.ticker {
    border-block: var(--hair);
    overflow: hidden;
    background: var(--bg-2)
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tick 30s linear infinite;
    padding: .95rem 0
}

.ticker-track>span {
    display: flex;
    gap: 3rem;
    padding-right: 3rem;
    font: 400 .75rem var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap
}

.ticker i {
    font-style: normal;
    color: var(--azul-star)
}

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

/* ---------- Secciones ---------- */
.sec {
    padding: clamp(88px, 10vw, 160px) 0;
    position: relative;
    background: var(--bg)
}

/* Secciones alternas para ritmo visual */
.sec:nth-of-type(even) {
    background: var(--bg-2)
}

.sec-head {
    max-width: 760px;
    margin-bottom: 3.2rem
}

.sec-sub {
    color: var(--text-muted);
    max-width: 62ch;
    margin-top: .4rem;
    font-weight: 300
}

/* Seccion "luz" — ahora es mas neutra */
.luz {
    background: var(--bg-2);
    color: var(--text)
}

.luz::before {
    display: none
}

.luz .sec-sub {
    color: var(--perla-dark)
}

.luz h3 {
    color: var(--text)
}

/* ---------- Pilares ---------- */
.pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 2.8rem
}

.pilar {
    position: relative;
    background: var(--surface);
    border: var(--hair);
    border-radius: var(--r-card);
    padding: 2.2rem;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    box-shadow: var(--shadow-card)
}

.pilar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease)
}

.pilar:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

.pilar:hover::before {
    transform: scaleX(1)
}

.pilar-ico {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(29, 109, 240, .30);
    color: var(--azul-star);
    font-size: 1.1rem;
    margin-bottom: 1.3rem;
    background: rgba(29, 109, 240, .06)
}

.pilar h3 {
    margin-bottom: .7rem
}

.pilar p {
    color: var(--text-muted);
    font-weight: 300
}

/* ---------- Banda anti-vergüenza ---------- */
.band {
    padding: clamp(96px, 11vw, 168px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(29, 109, 240, .06) 0%, rgba(107, 60, 224, .06) 50%, rgba(228, 64, 154, .04) 100%),
        var(--bg-2)
}

.band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--bg-2), transparent 15%, transparent 85%, var(--bg-2));
    pointer-events: none
}

.band-in {
    max-width: 880px;
    position: relative
}

.band-q {
    font: italic 500 clamp(1.9rem, 4.2vw, 3.4rem)/1.2 var(--f-display);
    margin: 1.6rem 0 1.8rem;
    color: var(--text)
}

.band-a {
    color: var(--text-muted);
    font-weight: 300;
    max-width: 62ch;
    margin: 0 auto 2rem
}

/* ---------- Tratamientos ---------- */
.t-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px
}

.t-card {
    position: relative;
    background: var(--surface);
    border: var(--hair);
    border-radius: var(--r-card);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s;
    box-shadow: var(--shadow-card)
}

.t-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease)
}

.t-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

.t-card:hover::before {
    transform: scaleX(1)
}

.t-kicker {
    color: var(--azul-ink)
}

.t-card p:not(.dato) {
    color: var(--text-muted);
    font-weight: 300
}

.t-data {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px dashed rgba(6, 13, 26, .12)
}

.t-note {
    margin-top: 2.4rem;
    max-width: 80ch
}

/* ---------- Proceso ---------- */
.proc {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start
}

.proc-left {
    position: sticky;
    top: 110px
}

.proc-dato {
    margin-top: 2rem;
    background: var(--bg-3);
    border: var(--hair);
    border-radius: var(--r-card);
    padding: 1.4rem 1.6rem
}

.proc-aviso {
    margin-top: .7rem;
    font: 500 .95rem var(--f-ui);
    color: var(--text-2)
}

.steps {
    position: relative
}

.steps::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 14px;
    bottom: 30px;
    width: 2px;
    background: var(--grad)
}

.step {
    position: relative;
    padding: 0 0 44px 74px
}

.step-dot {
    position: absolute;
    left: 12px;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--azul-star);
    box-shadow: 0 0 0 4px rgba(29, 109, 240, .12)
}

.step:last-child .step-dot {
    background: var(--azul-star);
    border-color: var(--azul-star)
}

.step:last-child {
    padding-bottom: 0
}

.step-n {
    color: var(--azul-ink);
    margin-bottom: .35rem
}

.step p:not(.dato) {
    color: var(--text-muted);
    font-weight: 300;
    max-width: 56ch
}

/* ---------- Casos ---------- */
.casos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 3rem
}

.caso {
    position: relative;
    background: var(--surface);
    border: var(--hair);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .4s var(--ease), box-shadow .4s
}

.caso:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

.caso--wide {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch
}

.caso--wide .caso-media {
    padding: 1.4rem;
    display: grid
}

.caso-media {
    position: relative
}

.caso-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(6px);
    border: var(--hair);
    border-radius: var(--r-pill);
    padding: .4rem .8rem;
    color: var(--azul-star)
}

.caso-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    justify-content: center
}

.caso-title {
    font: 520 1.4rem/1.3 var(--f-display);
    color: var(--text)
}

.caso-body p:not(.dato) {
    color: var(--text-muted);
    font-weight: 300
}

.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 16/9
}

.pair-cell {
    position: relative;
    overflow: hidden
}

.pair-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pair-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(4px);
    border: var(--hair);
    border-radius: var(--r-pill);
    padding: .3rem .7rem;
    font-size: .625rem;
    color: var(--text-2)
}

/* ---------- La doctora ---------- */
.doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center
}

.retrato {
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    border: var(--hair);
    box-shadow: var(--shadow-md);
    aspect-ratio: 4/5;
    max-width: 520px;
    width: 100%
}

.retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
    display: block
}

.retrato::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--azul-star);
    opacity: .06;
    mix-blend-mode: multiply;
    pointer-events: none
}

.retrato::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 12%, transparent 55%, rgba(6, 13, 26, .12));
    pointer-events: none
}

.doc-cred {
    margin: .4rem 0 1.6rem;
    color: var(--azul-ink)
}

.doc-quote {
    font: italic 500 1.45rem/1.4 var(--f-display);
    margin: 0 0 1.4rem;
    padding-left: 1.2rem;
    border-left: 3px solid var(--azul-star);
    color: var(--text)
}

.doc-grid>div>p {
    color: var(--text-muted);
    font-weight: 300;
    max-width: 60ch;
    margin-bottom: 1.2rem
}

.doc-list {
    list-style: none;
    display: grid;
    gap: .6rem;
    margin-bottom: 2rem
}

.doc-list li {
    padding-left: 1.6rem;
    position: relative;
    color: var(--text-2)
}

.doc-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--azul-star);
    font-size: .8rem;
    top: .3rem
}

/* ---------- Ubicacion ---------- */
.ubic-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center
}

.ubic-grid>div>p {
    color: var(--text-muted);
    font-weight: 300;
    max-width: 56ch;
    margin-bottom: 1rem
}

.ubic-data {
    margin: 1.6rem 0 2rem;
    padding: 1.2rem 1.4rem;
    border: var(--hair);
    border-radius: var(--r-card);
    background: var(--bg-2)
}

.map-card {
    border: var(--hair);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-md)
}

/* ---------- FAQ ---------- */
.faq-list {
    margin-top: 2.4rem;
    max-width: 820px;
    border-top: var(--hair)
}

.faq details {
    border-bottom: var(--hair)
}

.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem .2rem;
    font: 500 1.15rem var(--f-ui);
    color: var(--text);
    transition: color .25s
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary:hover {
    color: var(--azul-star)
}

.faq-x {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px
}

.faq-x::before,
.faq-x::after {
    content: "";
    position: absolute;
    background: var(--azul-star);
    transition: transform .35s var(--ease)
}

.faq-x::before {
    left: 0;
    right: 0;
    top: 6px;
    height: 2px
}

.faq-x::after {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px
}

details[open] .faq-x::after {
    transform: scaleY(0)
}

.faq-a {
    padding: 0 .2rem 1.6rem;
    color: var(--text-muted);
    font-weight: 300;
    max-width: 66ch
}

/* ---------- Agendar ---------- */
.cita {
    background:
        linear-gradient(135deg, rgba(29, 109, 240, .05) 0%, rgba(107, 60, 224, .04) 50%, rgba(242, 246, 252, 0) 100%),
        var(--bg-2)
}

.cita-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center
}

.cita-info>p {
    color: var(--text-muted);
    font-weight: 300;
    max-width: 52ch;
    margin-bottom: 1rem
}

.cita-points {
    list-style: none;
    display: grid;
    gap: .6rem;
    margin: 1.4rem 0 1.8rem
}

.cita-points li {
    padding-left: 1.6rem;
    position: relative;
    color: var(--text-2)
}

.cita-points li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--azul-star);
    font-size: .8rem;
    top: .3rem
}

.cita-card {
    background: var(--surface);
    border: var(--hair);
    border-radius: var(--r-card);
    padding: 2rem;
    box-shadow: var(--shadow-md)
}

.cita-card-title {
    color: var(--azul-ink);
    margin-bottom: 1.4rem
}

.field {
    margin-bottom: 1.2rem;
    border: 0
}

.field label,
.field legend {
    display: block;
    font: 500 .8rem var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .5rem
}

.field input[type=text],
.field select {
    width: 100%;
    background: var(--bg-2);
    border: var(--hair);
    border-radius: 12px;
    color: var(--text);
    font: 400 1rem var(--f-ui);
    padding: .85rem 1rem;
    transition: border-color .25s, box-shadow .25s;
}

.field select option {
    color: var(--text)
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--azul-star);
    box-shadow: 0 0 0 3px rgba(29, 109, 240, .15)
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.pills label {
    position: relative;
    margin: 0
}

.pills input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.pills span {
    display: inline-block;
    padding: .55rem 1.1rem;
    border-radius: var(--r-pill);
    border: var(--hair);
    font: 400 .9rem var(--f-ui);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .25s
}

.pills input:checked+span {
    background: var(--azul-star);
    border-color: var(--azul-star);
    color: #fff
}

.pills input:focus-visible+span {
    outline: 2px solid var(--azul-star);
    outline-offset: 2px
}

.consent {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .85rem;
    color: var(--text-muted);
    margin: 0 0 1.4rem
}

.consent input {
    margin-top: .3rem;
    accent-color: var(--azul-star)
}

.consent a {
    color: var(--azul-ink)
}

.cita-note {
    margin-top: 1rem;
    text-align: center
}

/* ---------- Footer ---------- */
.foot {
    background: var(--noche);
    border-top: 1px solid rgba(242, 246, 252, .08);
    padding: 64px 0 32px
}

.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px
}

.foot-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font: 600 1.3rem var(--f-display);
    margin-bottom: .6rem;
    color: var(--esmalte)
}

.foot-tag {
    font-weight: 400;
    color: var(--esmalte)
}

.foot-slogan {
    font: italic 400 1rem var(--f-display);
    color: var(--perla);
    margin-top: .3rem
}

.foot-title {
    margin-bottom: 1rem;
    color: var(--azul-star)
}

.foot-col {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.foot-col a {
    color: var(--perla);
    text-decoration: none;
    font-weight: 300;
    transition: color .25s
}

.foot-col a:hover {
    color: var(--esmalte)
}

.foot-zona {
    color: var(--perla);
    font-weight: 300;
    font-size: .9rem;
    margin-top: .4rem
}

.foot-legal {
    border-top: 1px solid rgba(242, 246, 252, .08);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 2rem;
    font-size: .8rem;
    color: var(--perla)
}

.foot-legal a {
    color: var(--perla)
}

.foot-legal a:hover {
    color: var(--esmalte)
}

/* ---------- Paginas legales / 404 ---------- */
.page-head {
    padding: 170px 0 40px;
    background:
        linear-gradient(135deg, rgba(29, 109, 240, .06) 0%, rgba(107, 60, 224, .04) 100%),
        var(--bg)
}

.legal {
    padding: 60px 0 120px
}

.legal-body {
    max-width: 760px;
    color: var(--text-muted);
    font-weight: 300
}

.legal-body h2 {
    font: 540 1.5rem var(--f-display);
    color: var(--text);
    margin: 2.4rem 0 .8rem
}

.legal-body p,
.legal-body li {
    margin-bottom: .9rem
}

.legal-body ul {
    padding-left: 1.4rem
}

.legal-body a {
    color: var(--azul-ink)
}

.p404 {
    min-height: 60vh;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 1rem;
    padding: 40px 0
}

.p404 .h1 {
    margin: 0
}

/* ---------- Responsive ---------- */
@media (max-width:1024px) {

    .hero-grid,
    .proc,
    .doc-grid,
    .ubic-grid,
    .cita-grid {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .proc-left {
        position: static
    }

    .caso--wide {
        grid-template-columns: 1fr
    }

    .hero {
        padding-top: 120px
    }

    /* Reducir padding en tablets */
    .sec {
        padding-top: clamp(56px, 8vw, 120px);
        padding-bottom: clamp(56px, 8vw, 120px)
    }

    .band {
        padding-top: clamp(56px, 8vw, 128px);
        padding-bottom: clamp(56px, 8vw, 128px)
    }

    /* Retrato en columna simple: mantener proporción vertical */
    .retrato {
        aspect-ratio: 4/5;
        max-width: 560px;
        margin: 0 auto
    }
}

@media (max-width:860px) {

    .nav,
    .nav-cta {
        display: none
    }

    .burger {
        display: block;
        margin-left: auto
    }

    .pilares {
        grid-template-columns: 1fr
    }

    .casos-grid {
        grid-template-columns: 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }
}

@media (max-width:480px) {
    .hero-cta .btn {
        width: 100%
    }

    .pair {
        aspect-ratio: 4/3
    }

    /* Espacios mucho mas compactos en movil */
    .sec {
        padding-top: 44px;
        padding-bottom: 44px
    }

    .hero {
        padding-top: 88px;
        padding-bottom: 40px
    }

    .band {
        padding-top: 44px;
        padding-bottom: 44px
    }

    /* Retrato en móvil: proporción retrato compacta */
    .retrato {
        aspect-ratio: 3/4;
        max-width: 100%;
        margin: 0 auto
    }

    .sec-head {
        margin-bottom: 1.6rem
    }

    .pilares {
        gap: 12px
    }

    .t-grid {
        gap: 12px
    }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .js .reveal,
    .js .mask-line>span {
        opacity: 1 !important;
        transform: none !important
    }

    .ticker-track {
        animation: none;
        flex-wrap: wrap
    }
}

/* ===== FIX: menu movil abierto con la pagina scrolleada ===== */
body.nav-open {
    overflow: hidden
}

body.nav-open .top {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
}

.map-card iframe {
    width: 100%;
    height: 440px;
    border: 0;
    display: block
}

/* (retrato styles consolidated above) */