/* ==========================================================================
   Glopy · Onboarding · Screen 02 — "¿Qué quieres descubrir?"
   Glopy's first intelligent filter. Fast, clean, premium. Form-free feel.
   ========================================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.ob-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(120% 80% at 50% 8%, #0d1426 0%, var(--gl-bg-1) 46%, var(--gl-bg-0) 100%);
    color: var(--gl-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
}

.ob-aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 38% at 50% 26%, rgba(16, 96, 255, 0.26) 0%, rgba(16, 96, 255, 0) 70%),
        radial-gradient(45% 30% at 50% 92%, rgba(16, 96, 255, 0.14) 0%, rgba(16, 96, 255, 0) 72%);
    animation: ob-breathe 7s ease-in-out infinite;
}

/* Layout ------------------------------------------------------------------- */
.ob-screen {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: calc(clamp(12px, 2.6vh, 30px) + env(safe-area-inset-top))
             clamp(18px, 5vw, 26px)
             calc(clamp(12px, 2.2vh, 26px) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 26px);
    animation: ob-fade-in 0.3s ease-out both;
}

/* Top: logo ---------------------------------------------------------------- */
.ob-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.ob-logo {
    margin: 0;
    font-weight: 900;
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, var(--gl-blue-soft) 0%, var(--gl-blue) 60%, var(--gl-blue-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gl-blue);
    filter: drop-shadow(0 4px 18px rgba(16, 96, 255, 0.45));
}

/* Hero: character + title + subtitle --------------------------------------- */
.ob-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(4px, 1vh, 12px);
}

/* Sized against viewport HEIGHT, not width: on a short phone the screen has to
   give somewhere, and shrinking the mascot is far less costly than pushing the
   CTA below the fold. (It was clamp(110px, 30vw, 150px), which never shrank on
   short screens because vw says nothing about available height.) */
.ob-character {
    position: relative;
    width: clamp(78px, 13.5vh, 150px);
    height: clamp(78px, 13.5vh, 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.ob-character__glow {
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(16, 96, 255, 0.55) 0%, rgba(16, 96, 255, 0.14) 46%, rgba(16, 96, 255, 0) 72%);
    filter: blur(6px);
    animation: ob-glow 3.6s ease-in-out infinite;
}

.ob-character__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: ob-float 4s ease-in-out infinite;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
    will-change: transform;
}

.ob-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.45rem, 6.6vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.ob-subtitle {
    margin: 0;
    font-size: clamp(0.9rem, 3.6vw, 1.08rem);
    line-height: 1.4;
    color: var(--gl-text-muted);
    max-width: 30ch;
}

/* CTA ---------------------------------------------------------------------- */
.ob-cta {
    padding-top: 2px;
}

.ob-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Floor of 52px keeps it comfortably above the 44px touch-target minimum. */
    min-height: clamp(52px, 7.5vh, 60px);
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--gl-blue-soft) 0%, var(--gl-blue) 60%, var(--gl-blue-deep) 100%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 10px 30px rgba(16, 96, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.16s ease, box-shadow 0.25s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ob-btn:hover { filter: brightness(1.05); }

.ob-btn:active {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        0 16px 44px rgba(16, 96, 255, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ob-btn:focus-visible {
    outline: 3px solid rgba(61, 134, 255, 0.7);
    outline-offset: 3px;
}

/* Keyframes ---------------------------------------------------------------- */
@keyframes ob-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ob-glow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes ob-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

/* Column wrappers are transparent on mobile (layout flows exactly as before)... */
.ob-col { display: contents; }

/* Mobile: center the WHOLE bloque (logo + héroe + tarjetas) como una unidad.
   Repartir el hueco sobrante en los márgenes del héroe (margin-block: auto)
   abría un agujero entre el logotipo GLOPY y la mascota al desaparecer el
   botón inferior: el contenido parecía "empujado hacia abajo". */
@media (max-width: 899px) {
    .ob-screen--split:not(.ob-screen--form) { justify-content: center; }
}

/* ...and become a real two-column split hero on large screens. -------------- */
@media (min-width: 900px) {
    .ob-screen--split {
        max-width: 1080px;
        padding-inline: clamp(40px, 6vw, 72px);
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        align-items: center;
        column-gap: clamp(40px, 5vw, 84px);
        gap: 0;
    }

    .ob-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    /* Left column: branding + conversational hero, left-aligned. */
    .ob-col--left { gap: clamp(20px, 3.5vh, 34px); }
    .ob-top { align-items: flex-start; }
    .ob-hero { align-items: flex-start; text-align: left; }
    .ob-logo { font-size: clamp(1.8rem, 2.4vw, 2.35rem); }
    .ob-character {
        width: clamp(140px, 12vw, 188px);
        height: clamp(140px, 12vw, 188px);
        margin: 0 0 4px;
    }
    .ob-title { font-size: clamp(2.1rem, 3vw, 2.9rem); }
    .ob-subtitle { max-width: 34ch; }

    /* Right column: the decision (cards + CTA). */
    .ob-col--right { gap: clamp(16px, 2.6vh, 22px); }

}

/* Very wide screens: a hair more breathing room. */
@media (min-width: 1280px) {
    .ob-screen--split { max-width: 1160px; column-gap: 96px; }
}

/* ==========================================================================
   ESCRITORIO (>=1024px) · Pantalla 02 — maqueta del cliente.
   Vuelve a UNA columna centrada (logo + mascota + pregunta arriba) con las
   dos tarjetas EN FILA debajo, en vez del split hero/tarjetas.
   Solo afecta a discover: las pantallas de formulario (preferencias, resumen)
   llevan .ob-screen--form y conservan su split de dos columnas.
   Nada de esto baja de 1024px, asi que movil y tablet quedan intactos.
   ========================================================================== */
@media (min-width: 1024px) {
    .ob-screen--split:not(.ob-screen--form) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 1560px;
        padding-inline: clamp(28px, 4vw, 64px);
        gap: clamp(20px, 3.4vh, 44px);
    }
    /* Héroe centrado ------------------------------------------------------- */
    .ob-screen--split:not(.ob-screen--form) .ob-top { align-items: center; }
    .ob-screen--split:not(.ob-screen--form) .ob-hero {
        align-items: center;
        text-align: center;
        gap: clamp(6px, 1.2vh, 14px);
    }
    .ob-screen--split:not(.ob-screen--form) .ob-logo {
        font-size: clamp(1.9rem, 2.3vw, 2.35rem);
        letter-spacing: 0.1em;
    }
    .ob-screen--split:not(.ob-screen--form) .ob-character {
        width: clamp(110px, 13vh, 150px);
        height: clamp(110px, 13vh, 150px);
        margin: 0 0 4px;
    }
    .ob-screen--split:not(.ob-screen--form) .ob-title { font-size: clamp(2.1rem, 2.9vw, 2.85rem); }
    .ob-screen--split:not(.ob-screen--form) .ob-subtitle {
        max-width: 36ch;
        font-size: clamp(1rem, 1.2vw, 1.15rem);
    }

}

/* Escritorio en ventana baja: se aprieta el héroe para que las dos tarjetas
   sigan cabiendo sin scroll. */
@media (min-width: 1024px) and (max-height: 820px) {
    .ob-screen--split:not(.ob-screen--form) { gap: clamp(14px, 2.2vh, 26px); }
    .ob-screen--split:not(.ob-screen--form) .ob-character {
        width: clamp(92px, 11.5vh, 120px);
        height: clamp(92px, 11.5vh, 120px);
    }
    .ob-screen--split:not(.ob-screen--form) .ob-title { font-size: clamp(1.85rem, 2.4vw, 2.3rem); }
    .ob-screen--split:not(.ob-screen--form) .ob-subtitle { font-size: 1rem; }

}

/* Short viewports -----------------------------------------------------------
   The whole screen must fit without scrolling, so trim the mascot and compact
   the cards rather than let the CTA fall below the fold.
   Note: the old rule here used 18vh, which on a 640px-tall phone resolved to
   115px — LARGER than the base size, so it grew the mascot exactly where space
   was tightest.
   The 760px threshold used to leave a gap: heights 761-870px (very common —
   iPhone X/11 Pro/12 mini at 812, most Android phones, narrow desktop
   windows) fell through to the "tall" sizing below and overflowed by up to
   76px, forcing a scroll on a screen designed not to need one. 900px covers
   the whole gap with margin. */
@media (max-height: 900px) {
    .ob-character { width: clamp(72px, 11.5vh, 120px); height: clamp(72px, 11.5vh, 120px); }
    .ob-hero { gap: 4px; }
}

/* Anchos intermedios (tablet vertical / ventana estrecha de escritorio): los
   tamaños en vw crecen con el ancho y las dos tarjetas dejan de caber en
   alto; se les pone techo. En móviles reales (≤460px) no aplica y la pantalla
   queda exactamente como la maqueta de Toni. */
@media (min-width: 460px) and (max-width: 899px) {

}

   Same 900px threshold as the mascot rule above, for the same reason (see
   comment there) — this one also has to win over the 460-899px "intermediate
   width" rule right above it whenever both apply, hence declaring it after. */
@media (max-width: 899px) and (max-height: 900px) {
    /* .ob-screen caps at 460px wide from 460px up (see below), but .ob-title's
       font-size keeps scaling with raw viewport width (vw) past that — so
       anywhere from ~545px to 899px it maxes out its clamp while the column
       holding it stays pinned at ~408px, wrapping "¿Qué quieres descubrir?"
       to 2 lines the "short viewport" budget above didn't account for. */
    .ob-title { font-size: clamp(1.3rem, 5.6vw, 1.75rem); line-height: 1.1; }
    .ob-subtitle { font-size: clamp(0.82rem, 3vw, 0.95rem); line-height: 1.3; }

}

/* Very short viewports (old/small phones like the 320x568 iPhone SE 1st gen,
   or any phone under ~620px tall) still overflowed by up to ~40px even in
   compact mode above: the padding/gap vh-formulas hadn't hit their floors
   yet at this height, and the card content (icon + 2-line title + wrapped
   description + arrow) doesn't compress further just from a smaller
   min-height. One more notch on every lever fixes it. */
@media (max-width: 899px) and (max-height: 620px) {
    .ob-screen {
        padding-top: calc(8px + env(safe-area-inset-top));
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        gap: 8px;
    }
    .ob-character { width: 58px; height: 58px; }
    .ob-hero { gap: 2px; }
    .ob-title { font-size: 1.3rem; }
    .ob-subtitle { font-size: 0.78rem; line-height: 1.25; }

}

/* Landscape phones (rotated) ------------------------------------------------
   Width > height and usually 560-950px wide but only 320-430px tall: the
   stacked mobile layout has no vertical room for mascot + title + two tall
   cards no matter how compact — every real device tested overflowed by
   100-190px even with every lever above maxed out. Below 900px width this
   normally still stacks (.ob-col is display:contents there); in landscape it
   borrows the same two-column grid desktop already uses instead, which
   needs far less height per column since the cards sit side by side.
   Not gated to max-width:899px: desktop's OWN grid (>=900px wide) has the
   same problem at these heights — its card min-height floors at 230px, so a
   wide-but-short window (e.g. a 915x412 phone in landscape, or a 926x428
   one) overflowed there too. max-height carries the condition instead. */
@media (orientation: landscape) and (max-height: 700px) {
    .ob-screen--split {
        max-width: none;
        padding-inline: clamp(16px, 4vw, 36px);
        display: grid;
        grid-template-columns: 0.85fr 1fr;
        align-items: center;
        column-gap: clamp(14px, 3vw, 32px);
        gap: 0;
        justify-content: initial;
    }
    .ob-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
    .ob-col--left { gap: clamp(4px, 1.4vh, 10px); }
    .ob-top { align-items: flex-start; }
    .ob-hero { align-items: flex-start; text-align: left; gap: 2px; }
    .ob-character { width: clamp(40px, 15vh, 84px); height: clamp(40px, 15vh, 84px); margin: 0; }
    .ob-title { font-size: clamp(1rem, 4.4vh, 1.5rem); line-height: 1.15; }
    .ob-subtitle { font-size: clamp(0.68rem, 2.6vh, 0.82rem); line-height: 1.25; max-width: 30ch; }
    .ob-col--right { gap: clamp(6px, 1.6vh, 12px); justify-content: center; }

}

@media (prefers-reduced-motion: reduce) {
    .ob-aurora, .ob-character__glow, .ob-character__img { animation: none !important; }
    .ob-screen { animation: none !important; }
    .ob-slider::-webkit-slider-thumb { transition: none !important; }
}

/* ==========================================================================
   Screen 03 — Preferences ("Cuéntame tus preferencias")
   A conversational setup, never a classic form.
   ========================================================================== */

/* Header becomes a positioning context for the back button. */
.ob-top { position: relative; }

/* Back button (sits at the start of the header row). */
.ob-back {
    position: absolute;
    left: 0;
    top: -2px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gl-surface-hover);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--gl-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.ob-back:hover { background: rgba(255, 255, 255, 0.1); }
.ob-back:active { transform: scale(0.92); }
.ob-back svg { width: 20px; height: 20px; }

/* The form is just a stack of "conversation" blocks. */
.ob-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vh, 18px);
}

.ob-block {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--gl-radius);
    padding: clamp(16px, 4.4vw, 22px);
}

.ob-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ob-block__label {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--gl-text-muted);
}

.ob-block__aux {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gl-text-muted);
}

.ob-bigval {
    font-size: clamp(1.5rem, 6.2vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 2px 0 14px;
}

/* Sliders ------------------------------------------------------------------ */
.ob-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.12);
    background-image: linear-gradient(90deg, var(--gl-blue-soft), var(--gl-blue));
    background-size: var(--pct, 50%) 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    outline-offset: 6px;
}
.ob-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: transparent; }
.ob-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--gl-text);
    border: 3px solid var(--gl-blue);
    box-shadow: 0 2px 12px rgba(16, 96, 255, 0.65);
    transition: transform 0.12s ease;
}
.ob-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.ob-slider::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.ob-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--gl-blue-soft), var(--gl-blue)); }
.ob-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--gl-text); border: 3px solid var(--gl-blue);
    box-shadow: 0 2px 12px rgba(16, 96, 255, 0.65);
}

.ob-bounds {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--gl-text-muted);
}

/* Chips (radio / checkbox driven) ------------------------------------------ */
.ob-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.ob-chip-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ob-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.02);
    color: var(--gl-text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease, transform 0.14s ease;
}
.ob-chip svg { width: 18px; height: 18px; color: var(--gl-text-muted); transition: color 0.2s ease; }
.ob-chip i.bi { font-size: 18px; line-height: 1; color: var(--gl-text-muted); transition: color 0.2s ease; }
.ob-chip .emoji { font-size: 1.05rem; line-height: 1; }
.ob-chip:active { transform: scale(0.96); }

.ob-chip-input:checked + .ob-chip {
    background: linear-gradient(180deg, var(--gl-blue-soft), var(--gl-blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(16, 96, 255, 0.45);
}
.ob-chip-input:checked + .ob-chip svg,
.ob-chip-input:checked + .ob-chip i.bi { color: var(--gl-text); }
.ob-chip-input:focus-visible + .ob-chip { outline: 3px solid rgba(61, 134, 255, 0.7); outline-offset: 2px; }

/* Number pills (habitaciones): evenly spread across the row. */
.ob-chips--nums .ob-chip { flex: 1 1 0; justify-content: center; min-width: 52px; padding: 13px 12px; }

/* Pets: two large side-by-side options. */
.ob-pets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-pets .ob-chip { width: 100%; justify-content: center; padding: 16px 14px; border-radius: 14px; }

/* Zona — custom smart selector --------------------------------------------- */
.ob-select { position: relative; }
.ob-select__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: var(--gl-text);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.ob-select__btn:hover { border-color: rgba(61, 134, 255, 0.4); }
.ob-select__btn .pin { display: flex; color: var(--gl-blue-soft); }
.ob-select__btn .pin svg { width: 20px; height: 20px; }
.ob-select__btn .label { flex: 1 1 auto; }
.ob-select__btn .chev { display: flex; color: var(--gl-text-muted); transition: transform 0.25s ease; }
.ob-select__btn .chev svg { width: 18px; height: 18px; }
.ob-select.is-open .ob-select__btn .chev { transform: rotate(180deg); }
.ob-select.is-open .ob-select__btn { border-color: var(--gl-blue); }

.ob-select__menu {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    background: var(--gl-surface-sunken);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    display: none;
    flex-direction: column;
    gap: 2px;
}
.ob-select.is-open .ob-select__menu { display: flex; animation: ob-fade-in 0.15s ease-out both; }
.ob-select__item {
    padding: 12px; border-radius: 10px;
    background: transparent; border: 0;
    color: var(--gl-text); text-align: left; font-size: 0.95rem; cursor: pointer;
    transition: background 0.15s ease;
}
.ob-select__item:hover { background: rgba(16, 96, 255, 0.18); }
.ob-select__item.is-active { background: rgba(16, 96, 255, 0.28); }

/* Continue button arrow */
.ob-btn { position: relative; }
.ob-btn__arrow { position: absolute; right: 24px; display: flex; }
.ob-btn__arrow svg { width: 22px; height: 22px; }

/* ==========================================================================
   Screen 04 — "¡Listo! Glopy ya está aprendiendo de ti."
   ========================================================================== */

/* Graduation cap + twinkling particles around Glopy. */
.ob-character--grad .ob-character__glow {
    background: radial-gradient(circle at 50% 45%, rgba(16, 96, 255, 0.65) 0%, rgba(16, 96, 255, 0.18) 46%, rgba(16, 96, 255, 0) 72%);
}

.ob-gradcap {
    position: absolute;
    top: -16%;
    left: 50%;
    transform: translateX(-52%) rotate(-12deg);
    font-size: clamp(2.3rem, 8vw, 3.1rem);
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

.ob-spark {
    position: absolute;
    color: var(--gl-blue-soft);
    filter: drop-shadow(0 0 6px rgba(61, 134, 255, 0.85));
    pointer-events: none;
    animation: ob-twinkle 2.4s ease-in-out infinite;
}

@keyframes ob-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.55); }
    50%      { opacity: 1;    transform: scale(1); }
}

/* Preferences summary -------------------------------------------------------*/
.ob-summary__title {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ob-sum-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid var(--gl-surface-hover);
    text-decoration: none;
    color: inherit;
}
.ob-sum-row:first-of-type { border-top: 0; }

.ob-sum-row__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 96, 255, 0.12);
    border: 1px solid rgba(61, 134, 255, 0.3);
    color: var(--gl-blue-soft);
    font-size: 1.2rem;
}

.ob-sum-row__main { flex: 1 1 auto; min-width: 0; }
.ob-sum-row__label { font-size: 0.95rem; font-weight: 600; color: var(--gl-text); }
.ob-sum-row__value {
    margin-top: 2px;
    font-size: 0.92rem;
    color: var(--gl-blue-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ob-sum-row__chev {
    flex: 0 0 auto;
    color: var(--gl-text-muted);
    font-size: 1.1rem;
    display: flex;
    transition: transform 0.15s ease, color 0.15s ease;
}
.ob-sum-row:hover .ob-sum-row__chev { color: var(--gl-text); transform: translateX(3px); }

/* AI highlight block --------------------------------------------------------*/
.ob-ai {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 96, 255, 0.18), rgba(16, 96, 255, 0.05));
    border: 1px solid rgba(61, 134, 255, 0.25);
}
.ob-ai__icon { flex: 0 0 auto; display: flex; color: var(--gl-blue-soft); font-size: 1.7rem; }
.ob-ai__text { font-size: 0.9rem; line-height: 1.45; color: #cfd9f0; }
.ob-ai__spark {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gl-blue-soft);
    opacity: 0.65;
    font-size: 1.15rem;
    animation: ob-twinkle 2.8s ease-in-out infinite;
}

/* Desktop: sticky conversational hero on the left, scrolling form on right. */
@media (min-width: 900px) {
    .ob-screen--form { align-items: start; }
    .ob-screen--form .ob-col--left {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        height: 100dvh;
        justify-content: center;
        padding-block: 24px;
    }
    .ob-screen--form .ob-col--right { padding-block: clamp(28px, 5vh, 60px); }
}


/* ==========================================================================
   Pantalla 02 — "¿Qué quieres descubrir?" (rediseño del cliente, sep 2026)
   Tres momentos en la misma pantalla: estado limpio → tarjeta marcada →
   el bloque superior sube mientras "Cuéntanos lo básico" se despliega.
   Sirve para móvil y escritorio; abajo hay un bloque con las proporciones
   de escritorio.
   ========================================================================== */
.ob-screen--discover {
    --ob-gap: clamp(10px, 2vh, 26px);
    --ob-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ob-dur: 0.56s;
    gap: var(--ob-gap);
    justify-content: flex-start;   /* centran los .ob-spacer, no justify-content */
    transition: gap var(--ob-dur) var(--ob-ease);
}
.ob-title__accent { color: var(--gl-blue-soft); }

/* Fondo fotografico (imagen del cliente, sep 2026). La foto es apaisada
   (1536x1024) y en un movil vertical no puede cubrir toda la pantalla sin
   perder la villa y el coche: como en las maquetas, se ancla arriba a todo
   el ancho y se funde hacia abajo con el azul oscuro de la app. Un velo
   suave por encima mantiene legibles el titulo y el subtitulo. El fondo del
   body queda debajo por si la foto tarda en cargar. */
.ob-body--discover { background-color: var(--gl-bg-0); }
.ob-photo {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #05080f;
    overflow: hidden;
}
/* Móvil (maqueta del cliente, sep 2026): la villa y el coche se ven enteros
   arriba (foto a su ancho natural) y la imagen NO se corta: por debajo sigue
   la misma foto desenfocada y oscurecida hasta el negro, y la banda nítida se
   disuelve sobre ella con una máscara. Un solo fundido continuo. */
@media (max-width: 1023px) {
    .ob-photo::before, .ob-photo::after {
        content: ""; position: absolute; left: 0; right: 0; top: 0;
        background-image: var(--ob-photo); background-repeat: no-repeat;
    }
    .ob-photo::before {                     /* fondo: foto desenfocada a negro */
        bottom: 0; inset: -40px;
        background-size: cover; background-position: center top;
        filter: blur(26px) brightness(0.36) saturate(0.9);
    }
    .ob-photo::after {                      /* banda nítida que se funde a negro sobre la foto desenfocada */
        height: calc(100vw * 2 / 3);
        background-image:
            linear-gradient(180deg, rgba(5, 8, 15, 0) 30%, rgba(5, 8, 15, 0.45) 55%, rgba(5, 8, 15, 0.85) 80%, #05080f 100%),
            var(--ob-photo);
        background-size: 100% 100%, 100% auto; background-position: top center, top center;
    }
    .ob-photo::before { z-index: 0; }
    .ob-photo::after { z-index: 1; }
    .ob-photo__veil {                        /* oscurecido general hacia abajo, por encima de las dos capas */
        position: absolute; inset: 0; z-index: 2;
        background: linear-gradient(180deg, rgba(5, 8, 15, 0.18) 0%, rgba(5, 8, 15, 0.30) 34%, rgba(5, 8, 15, 0.62) 60%, rgba(5, 8, 15, 0.86) 100%);
    }
}
/* Las auroras azules sobre la foto la ensuciaban: fuera en esta pantalla. */
.ob-body--discover .ob-aurora { display: none; }
.ob-body--discover .ob-subtitle { color: #d6def0; }
.ob-body--discover .ob-basics__card { background: rgba(11, 19, 34, 0.94); }

/* Espaciadores: con flex-grow 1/1 el contenido queda centrado; al abrir, el
   de arriba pasa a 0 con transición (flex-grow se anima) y todo sube de
   forma continua. Si el contenido no cabe, ambos miden 0 y la página hace
   scroll normal (nunca queda nada cortado por arriba). El margen negativo
   anula el `gap` que les tocaría como hijos del flex. */
.ob-spacer {
    flex: 1 1 0;
    min-height: 0;
    transition: flex-grow var(--ob-dur) var(--ob-ease);
}
.ob-spacer--top { margin-bottom: calc(-1 * var(--ob-gap)); }
.ob-spacer--bottom { margin-top: calc(-1 * var(--ob-gap)); }
.ob-screen--discover.is-open .ob-spacer--top { flex-grow: 0; }

/* El héroe se compacta al abrir: mismos tiempos que el resto para que se lea
   como una sola animación. Especificidad alta a propósito: las reglas de
   alto de pantalla de arriba (max-height) tocan .ob-character y .ob-title. */
.ob-screen--discover .ob-character {
    transition: width var(--ob-dur) var(--ob-ease), height var(--ob-dur) var(--ob-ease);
}
.ob-screen--discover .ob-title { transition: font-size var(--ob-dur) var(--ob-ease); }
.ob-screen--discover .ob-hero { transition: gap var(--ob-dur) var(--ob-ease); }
.ob-screen--discover.is-open .ob-character {
    width: clamp(66px, 9.5vh, 104px);
    height: clamp(66px, 9.5vh, 104px);
}
.ob-screen--discover.is-open .ob-title { font-size: clamp(1.3rem, 5.6vw, 1.85rem); }

/* Tarjetas: dos cuadradas, foto a sangre, icono + nombre abajo y check
   arriba a la derecha cuando esta elegida. -------------------------------- */
.ob-screen--discover .ob-cards {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 3.4vw, 16px);
}
.ob-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-height: 46vh;          /* apaisado: que no se coman la pantalla */
    padding: 0;
    border: 1.5px solid rgba(140, 165, 220, 0.38);
    border-radius: 22px;
    background: var(--gl-card);
    overflow: hidden;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.18s ease;
}
.ob-card__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.001);
    transition: transform 0.5s ease;
}
.ob-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 7, 15, 0) 42%, rgba(5, 7, 15, 0.86) 100%);
}
.ob-card__label {
    position: absolute;
    left: clamp(12px, 4vw, 18px);
    right: 12px;
    bottom: clamp(10px, 3.4vw, 16px);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: clamp(1rem, 4.4vw, 1.3rem);
    letter-spacing: -0.01em;
}
.ob-card__ico { width: clamp(26px, 8vw, 36px); height: clamp(26px, 8vw, 36px); flex: none; }
.ob-card__check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gl-blue);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 6px 18px rgba(16, 96, 255, 0.5);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ob-card:hover .ob-card__media { transform: scale(1.04); }
.ob-card:active { transform: scale(0.985); }
.ob-card:focus-visible { outline: 3px solid rgba(61, 134, 255, 0.7); outline-offset: 3px; }
.ob-card.is-selected {
    border-color: var(--gl-blue);
    box-shadow: 0 0 0 1px var(--gl-blue), 0 0 28px rgba(16, 96, 255, 0.5);
}
.ob-card.is-selected .ob-card__check { opacity: 1; transform: scale(1); }

/* "Cuéntanos lo básico": se despliega desde abajo. La altura se anima con
   grid-template-rows 0fr → 1fr (la única forma de animar "auto"); opacidad y
   desplazamiento acompañan. Cerrado no ocupa nada ni recibe clics. -------- */
.ob-basics {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(24px);
    margin-top: calc(-1 * var(--ob-gap));
    pointer-events: none;
    transition:
        grid-template-rows var(--ob-dur) var(--ob-ease),
        opacity 0.42s ease,
        transform var(--ob-dur) var(--ob-ease),
        margin-top var(--ob-dur) var(--ob-ease);
}
.ob-screen--discover.is-open .ob-basics {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    margin-top: 0;
    pointer-events: auto;
}
.ob-basics__inner { min-height: 0; overflow: hidden; }
.ob-basics__card {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 5vw, 26px);
    border-radius: 24px;
    background: var(--gl-card);
    border: 1px solid var(--gl-border);
}
.ob-basics__title {
    margin: 0 0 6px;
    font-size: clamp(1.35rem, 6vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}
.ob-basics__body { transition: opacity 0.16s ease; }
.ob-basics__body.is-swapping { opacity: 0; }
.ob-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.ob-fields[hidden] { display: none; }
.ob-basics__label {
    display: block;
    margin: 14px 0 8px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--gl-text);
}
.ob-basics__seg {
    display: flex;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gl-border);
}
.ob-basics__opt { position: relative; flex: 1 1 0; }
.ob-basics__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ob-basics__opt span {
    display: flex;
    justify-content: center;
    padding: 13px 8px;
    border-radius: 11px;
    font-weight: 700;
    color: var(--gl-blue-soft);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ob-basics__opt input:checked + span {
    background: var(--gl-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16, 96, 255, 0.35);
}
.ob-basics__opt input:focus-visible + span { outline: 2px solid rgba(61, 134, 255, 0.8); outline-offset: 1px; }
.ob-basics__input {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gl-border);
}
.ob-basics__input:focus-within,
.ob-basics__select select:focus { border-color: var(--gl-blue); outline: 0; }
.ob-basics__input i { color: var(--gl-blue-soft); font-size: 1.2rem; flex: none; }
.ob-basics__input input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    color: var(--gl-text);
    font: inherit;
    font-size: 1rem;   /* 16px: por debajo iOS hace zoom al enfocar */
}
.ob-basics__input input::placeholder { color: var(--gl-text-muted); font-size: 0.92rem; }
.ob-basics__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-basics__row .ob-basics__label { margin-top: 14px; }
.ob-basics__select { position: relative; }
.ob-basics__select select {
    width: 100%;
    height: 54px;
    padding: 0 26px 0 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gl-border);
    color: var(--gl-text);
    font: inherit;
    font-size: 1rem;
    letter-spacing: -0.02em;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
}
.ob-basics__select select:disabled { opacity: 0.55; cursor: default; }
.ob-basics__select option { color: var(--gl-text); background: #0b1322; }
.ob-basics__select i {
    position: absolute;
    right: 8px;
    font-size: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gl-blue-soft);
}
.ob-basics__cta {
    margin-top: 18px;
    height: 58px;
    border: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--gl-blue-soft) 0%, var(--gl-blue) 100%);
    color: #fff;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(16, 96, 255, 0.4);
    transition: transform 0.15s ease, filter 0.2s ease;
}
.ob-basics__cta:hover { filter: brightness(1.06); }
.ob-basics__cta:active { transform: translateY(1px) scale(0.99); }
.ob-basics__cta:disabled { opacity: 0.7; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .ob-spacer, .ob-basics, .ob-basics__body, .ob-card, .ob-card__check,
    .ob-screen--discover .ob-character, .ob-screen--discover .ob-title,
    .ob-screen--discover .ob-hero { transition: none !important; }
}

/* Escritorio: misma logica con proporciones de escritorio (maqueta del
   cliente, sep 2026): tarjetas apaisadas 3:2 que NO cambian de tamaño al
   abrir, subtitulo en una linea, heroe compacto (al abrir solo encoge la
   mascota) y el formulario justo debajo, del ancho de las dos tarjetas.
   Los tamaños van en vh con suelo para que abierto quepa sin scroll tambien
   en un portatil de 1440x900 (746px utiles). ------------------------------ */
@media (min-width: 1024px) {
    .ob-photo::before, .ob-photo::after, .ob-photo__veil { display: none; }
    .ob-photo {
        background-image:
            linear-gradient(180deg, rgba(5, 8, 20, 0.36) 0%, rgba(5, 8, 20, 0.52) 55%, rgba(5, 8, 20, 0.72) 100%),
            var(--ob-photo);
        background-size: cover, cover;
        background-position: center, center;
    }
    .ob-screen--discover {
        --ob-gap: clamp(14px, 2.2vh, 24px);
        --ob-card-w: clamp(260px, 36vh, 322px);
        --ob-card-gap: 16px;
    }
    .ob-screen--discover.is-open { --ob-gap: clamp(10px, 1.5vh, 16px); }

    /* Heroe: mascota ~100px y titulo ~36px como la maqueta (las reglas
       genericas de onboarding lo pintaban al doble). */
    /* Con .ob-screen--split delante a proposito: las reglas de escritorio
       genericas de esta hoja (.ob-screen--split:not(.ob-screen--form) .ob-x)
       tienen tres clases y si no le ganaban a estas (subtitulo a 36ch en dos
       lineas, titulo y mascota mas grandes que la maqueta). */
    .ob-screen--split.ob-screen--discover .ob-character { width: 104px; height: 104px; margin: 0; }
    .ob-screen--split.ob-screen--discover .ob-title { font-size: clamp(2rem, 2.4vw, 2.35rem); }
    .ob-screen--split.ob-screen--discover .ob-subtitle { max-width: 80ch; font-size: 1rem; }
    .ob-screen--split.ob-screen--discover.is-open .ob-character { width: 72px; height: 72px; }
    .ob-screen--discover.is-open .ob-hero { gap: 4px; }
    .ob-screen--discover.is-open .ob-top { margin-top: -4px; }
    .ob-screen--discover.is-open { padding-top: 14px; padding-bottom: 14px; }

    /* Los envoltorios de columna tienen que ser transparentes tambien aqui:
       si .ob-col--right sigue siendo flex, el panel hereda su ancho
       ajustado al contenido y el `width: 100%` no sirve de nada. */
    .ob-screen--discover .ob-col { display: contents; }

    .ob-screen--discover .ob-cards { width: auto; gap: var(--ob-card-gap); justify-content: center; }
    .ob-screen--discover .ob-card {
        flex: 0 0 var(--ob-card-w);
        aspect-ratio: 3 / 2;
        max-height: none;
        border-radius: 18px;
    }
    .ob-card__label { font-size: 1.15rem; left: 16px; bottom: 14px; gap: 9px; }
    .ob-card__ico { width: 30px; height: 30px; }
    .ob-card__check { width: 40px; height: 40px; top: 12px; right: 12px; }

    /* Formulario: exactamente el ancho de las dos tarjetas. */
    .ob-screen--discover .ob-basics {
        width: 100%;
        max-width: calc(2 * var(--ob-card-w) + var(--ob-card-gap));
    }
    .ob-basics__card { padding: 18px 22px 20px; border-radius: 18px; }
    .ob-basics__title { font-size: 1.35rem; margin-bottom: 0; }
    .ob-basics__label { margin: 8px 0 6px; font-size: 0.92rem; }
    .ob-basics__opt span { padding: 11px 8px; }
    .ob-basics__input, .ob-basics__select select { height: 48px; }
    .ob-basics__cta { height: 48px; margin-top: 12px; font-size: 1.02rem; }
}

/* Portatiles bajos (1440x900 -> 746px utiles): abierto sobraban 14px. */
@media (min-width: 1024px) and (max-height: 800px) {
    .ob-screen--discover { --ob-card-w: clamp(244px, 34vh, 322px); }
    .ob-screen--discover.is-open { padding-top: 10px; padding-bottom: 10px; }
    .ob-basics__card { padding: 16px 22px 18px; }
    .ob-basics__label { margin: 7px 0 5px; }
}

/* Moviles estrechos (360-380px): un poco menos de relleno para que "Elige
   modelo" quepa entero sin bajar la letra de 16px (por debajo iOS hace zoom). */
@media (max-width: 380px) {
    .ob-basics__card { padding: 16px 14px 18px; }
    .ob-basics__row { gap: 10px; }
    .ob-basics__input { gap: 8px; padding: 0 12px; }
    .ob-basics__input input::placeholder { font-size: 0.82rem; }
}

/* ===== Tema claro (punto 17) =====
Onboarding (descubrir, preferencias, final) en tema claro.
   ========================================================================== */

:root[data-theme="light"] .ob-body { background: radial-gradient(120% 90% at 50% 10%, #ffffff 0%, #f2f6fe 42%, #e8eefa 100%); }
:root[data-theme="light"] .ob-aurora {
    background:
        radial-gradient(55% 40% at 50% 26%, rgba(16, 96, 255, 0.12) 0%, rgba(16, 96, 255, 0) 70%),
        radial-gradient(45% 30% at 50% 92%, rgba(124, 77, 255, 0.08) 0%, rgba(124, 77, 255, 0) 70%);
}
:root[data-theme="light"] .ob-logo { filter: drop-shadow(0 4px 14px rgba(16, 96, 255, 0.22)); }
:root[data-theme="light"] .ob-character__glow, :root[data-theme="light"] .ob-character--grad .ob-character__glow {
    background: radial-gradient(circle at 50% 45%, rgba(16, 96, 255, 0.26) 0%, rgba(16, 96, 255, 0.08) 46%, rgba(16, 96, 255, 0) 72%);
}
:root[data-theme="light"] .ob-character__img { filter: drop-shadow(0 12px 22px rgba(16, 96, 255, 0.2)); }
:root[data-theme="light"] .ob-gradcap { filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.25)); }
:root[data-theme="light"] .ob-spark { filter: drop-shadow(0 0 4px rgba(16, 96, 255, 0.5)); }
:root[data-theme="light"] .ob-btn { border-color: transparent; box-shadow: 0 10px 24px rgba(16, 96, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
:root[data-theme="light"] .ob-btn:active { box-shadow: 0 12px 30px rgba(16, 96, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
:root[data-theme="light"] .ob-back { background: #fff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
:root[data-theme="light"] .ob-back:hover { background: var(--gl-surface-sunken); }
/* Preferencias: tarjetas blancas, controles claros */
:root[data-theme="light"] .ob-block { background: #fff; border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px rgba(15, 23, 42, 0.05); }
:root[data-theme="light"] .ob-slider { background-color: rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .ob-slider::-moz-range-track { background: rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .ob-slider::-webkit-slider-thumb { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3); }
:root[data-theme="light"] .ob-slider::-moz-range-thumb { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3); }
:root[data-theme="light"] .ob-chip { background: #fff; border-color: rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .ob-chip-input:checked + .ob-chip { background: linear-gradient(180deg, var(--gl-blue-soft), var(--gl-blue)); border-color: transparent; color: #fff; }
:root[data-theme="light"] .ob-chip-input:checked + .ob-chip { box-shadow: 0 4px 12px rgba(16, 96, 255, 0.25); }
:root[data-theme="light"] .ob-chip-input:checked + .ob-chip svg, :root[data-theme="light"] .ob-chip-input:checked + .ob-chip i.bi { color: #fff; }
:root[data-theme="light"] .ob-select__btn { background: #fff; border-color: rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .ob-select__menu { background: #fff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); }
:root[data-theme="light"] .ob-select__item:hover { background: rgba(16, 96, 255, 0.07); }
:root[data-theme="light"] .ob-select__item.is-active { background: rgba(16, 96, 255, 0.12); color: var(--gl-blue); }
:root[data-theme="light"] .ob-sum-row__icon { background: rgba(16, 96, 255, 0.07); border-color: rgba(16, 96, 255, 0.2); }
:root[data-theme="light"] .ob-ai { background: linear-gradient(135deg, rgba(16, 96, 255, 0.08), rgba(16, 96, 255, 0.02)), #fff; border-color: rgba(16, 96, 255, 0.18); }
:root[data-theme="light"] .ob-ai__text { color: var(--gl-text-soft); }
:root[data-theme="light"] .ob-basics__seg { background: var(--gl-surface-sunken); }
:root[data-theme="light"] .ob-basics__opt input:checked + span { box-shadow: 0 4px 12px rgba(16, 96, 255, 0.25); }
:root[data-theme="light"] .ob-basics__input, :root[data-theme="light"] .ob-basics__select select { background: #fff; }
:root[data-theme="light"] .ob-basics__select option { background: #fff; }
:root[data-theme="light"] .ob-basics__cta { box-shadow: 0 8px 20px rgba(16, 96, 255, 0.26); }

/* «¿Qué quieres descubrir?»: la foto (villa y coche de noche) arriba, nítida,
   y se funde hacia el fondo CLARO de la página en vez de hacia el negro. */
:root[data-theme="light"] .ob-body--discover { background-color: #f5f7fb; }
:root[data-theme="light"] .ob-photo { background: #f5f7fb; }
:root[data-theme="light"] .ob-body--discover .ob-subtitle { color: var(--gl-text-soft); }
:root[data-theme="light"] .ob-body--discover .ob-basics__card { background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10); }
:root[data-theme="light"] .ob-card { border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .ob-card.is-selected { box-shadow: 0 0 0 2px var(--gl-blue), 0 10px 24px rgba(16, 96, 255, 0.25); }
:root[data-theme="light"] .ob-card__check { box-shadow: 0 4px 12px rgba(16, 96, 255, 0.3); }
@media (max-width: 1023px) {
    /* Bajo la banda de la foto, color de página liso: sin costura. */
    :root[data-theme="light"] .ob-photo::before { display: none; }
    :root[data-theme="light"] .ob-photo::after {
        background-image:
            linear-gradient(180deg, rgba(245, 247, 251, 0) 34%, rgba(245, 247, 251, 0.5) 60%, rgba(245, 247, 251, 0.88) 84%, #f5f7fb 100%),
            var(--ob-photo);
    }
    :root[data-theme="light"] .ob-photo__veil { background: none; }
}
@media (min-width: 1024px) {
    :root[data-theme="light"] .ob-photo {
        background-image:
            linear-gradient(180deg, rgba(245, 247, 251, 0.62) 0%, rgba(245, 247, 251, 0.78) 50%, rgba(245, 247, 251, 0.92) 100%),
            var(--ob-photo);
    }
}