/* ════════════════════════════════════════════════════════════════════
   Jiménez & Burbano · Sistema de diseño v5
   Restauración del v4 (Fraunces + Inter + sprite + microinteracciones)
   + mejoras de prioridad alta del benchmark:
     · Hero con imagen full-bleed
     · Header transparente sobre hero
     · Sticky property bar
     · Lightbox fullscreen
     · Similar properties section
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ──── Color tokens — paleta moderna e identitaria ──── */
    /* Tinta y papel: blanco puro, negro intenso, sin beige */
    --ink:        #0A0E14;
    --ink-2:      #14181F;
    --paper:      #FFFFFF;
    --paper-2:    #F5F6F7;
    --cream:      #F9FAFB;       /* mantenido como alias de blanco off; legado */

    /* Azul celeste — del logo y publicaciones (acento principal, calmado) */
    --sky:        #2D9CDB;
    --sky-deep:   #1A6FA0;
    --sky-pale:   #E8F4FB;

    /* AZUL ELECTRIC — color de identidad activa (highlights, eyebrows, brand mark) */
    --accent:     #0066FF;
    --accent-deep:#0044CC;
    --accent-pale:#E6EFFF;

    /* Neutros (cool, no warm) */
    --grey-900:   #14171D;
    --grey-700:   #2D333D;
    --grey-500:   #5C6470;
    --grey-400:   #8B919C;
    --grey-300:   #B3B8C0;
    --grey-200:   #D6D9DE;
    --grey-100:   #EAECEF;
    --grey-50:    #F5F6F7;

    --gold:       #B8945F;       /* legado — solo para badges "Reservada" */
    --green:      #2C7A4D;
    --red:        #B85042;

    /* ──── Tipografía moderna ──── */
    --f-display:  'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --f-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* ──── Espaciado (escala 4 px) ──── */
    --s-1:  .25rem;
    --s-2:  .5rem;
    --s-3:  .75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  3rem;
    --s-8:  4rem;
    --s-9:  6rem;
    --s-10: 8rem;

    /* ──── Radios ──── */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 14px;
    --r-4: 20px;
    --r-pill: 999px;

    /* ──── Sombras ──── */
    --shadow-sm: 0 1px 2px rgb(10 14 20 / .04), 0 1px 4px rgb(10 14 20 / .06);
    --shadow-md: 0 6px 16px rgb(10 14 20 / .07), 0 2px 6px rgb(10 14 20 / .04);
    --shadow-lg: 0 24px 48px rgb(10 14 20 / .10), 0 8px 16px rgb(10 14 20 / .06);

    /* ──── Easings ──── */
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-in:     cubic-bezier(.7, 0, .84, 0);
    --ease-bezier: cubic-bezier(.65, 0, .35, 1);

    /* ──── Containers ──── */
    --container: 1240px;
    --container-narrow: 920px;

    /* ──── Hero background ──── */
    /* Imagen del hero — paisaje cinematográfico. El cliente puede reemplazar
       con foto real de Ibarra subiéndola a /assets/img/hero.jpg y cambiando
       la ruta abajo, o sobreescribir esta variable inline en home.twig. */
    --hero-bg: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=2400&q=85&auto=format&fit=crop');
}

/* ──── Reset ──── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
body {
    font-family: var(--f-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--ease-out);
}
button { font: inherit; cursor: pointer; }

/* ──── Tipografía ──── */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    color: var(--ink);
    font-weight: 700;                     /* más peso, más presencia */
    line-height: 1.0;                     /* más cerrado, más moderno */
    letter-spacing: -.035em;              /* tight tracking moderno */
    font-variation-settings: 'opsz' 96, 'wdth' 100;
}
h1 { font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; font-weight: 700; }
h4 { font-size: 1rem; font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }

/* ──── Highlight identitario — naranja para palabras clave ──── */
.highlight {
    color: var(--accent);
    font-style: normal;
}
.highlight--block {
    background: var(--accent-pale);
    color: var(--accent-deep);
    padding: 0 .15em;
    border-radius: 4px;
}

p { font-size: 1rem; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--grey-700); line-height: 1.6; }

/* ──── Container ──── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-5);
}
@media (min-width: 720px) { .container { padding: 0 var(--s-6); } }
.container--narrow { max-width: var(--container-narrow); }

/* ──── Reveal on scroll ──── */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }

/* ──── Iconos ──── */
.icon {
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
}
.icon--accent { color: var(--sky); }

/* ════════════════════════════════════════════════════════════════════
   Botones (pills)
   ════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: .95rem;
    line-height: 1;
    border: 1.5px solid transparent;
    transition:
        background-color .25s var(--ease-out),
        color .25s var(--ease-out),
        border-color .25s var(--ease-out),
        transform .25s var(--ease-out),
        box-shadow .25s var(--ease-out);
    white-space: nowrap;
    text-align: center;
    justify-content: center;
}
.btn .icon { transition: transform .35s var(--ease-out); }
.btn:hover .icon { transform: translateX(2px); }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn--primary:hover {
    background: var(--ink-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--paper);
}
.btn--accent {
    background: var(--sky);
    color: white;
    border-color: var(--sky);
}
.btn--accent:hover {
    background: var(--sky-deep);
    border-color: var(--sky-deep);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: white;
}
.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--grey-200);
}
.btn--ghost:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}
.btn--ghost-light {
    background: transparent;
    color: var(--paper);
    border-color: rgb(255 255 255 / .25);
}
.btn--ghost-light:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.btn--link {
    background: transparent;
    color: var(--sky-deep);
    border: none;
    padding: var(--s-2) 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* ════════════════════════════════════════════════════════════════════
   Header — transparente sobre hero, sólido al scroll
   ════════════════════════════════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgb(250 250 247 / 0);
    backdrop-filter: saturate(140%) blur(0px);
    -webkit-backdrop-filter: saturate(140%) blur(0px);
    border-bottom: 1px solid transparent;
    transition:
        background-color .35s var(--ease-out),
        backdrop-filter .35s var(--ease-out),
        border-color .35s var(--ease-out),
        color .35s var(--ease-out);
    color: var(--ink);
}
/* Sobre páginas con hero foto: header transparente, texto blanco */
body[data-on-hero] .site-header:not(.is-scrolled) {
    color: var(--paper);
    background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, transparent 100%);
}
body[data-on-hero] .site-header:not(.is-scrolled) .brand,
body[data-on-hero] .site-header:not(.is-scrolled) .nav a,
body[data-on-hero] .site-header:not(.is-scrolled) .brand__sub { color: var(--paper); }
body[data-on-hero] .site-header:not(.is-scrolled) .brand__sub { color: rgb(255 255 247 / .65); }
body[data-on-hero] .site-header:not(.is-scrolled) .btn--ghost {
    color: var(--paper);
    border-color: rgb(255 255 247 / .35);
}
body[data-on-hero] .site-header:not(.is-scrolled) .btn--ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

.site-header.is-scrolled {
    background: rgb(250 250 247 / .95);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-color: var(--grey-100);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: var(--s-5);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: inherit;
    font-family: var(--f-display);
    font-weight: 500;
    letter-spacing: -.01em;
    font-variation-settings: 'opsz' 144;
    font-size: 1.1rem;
    line-height: 1;
}
.brand__mark {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    color: var(--sky);
}
.brand__name { font-weight: 600; letter-spacing: .03em; }
.brand__amp { color: var(--accent); font-weight: 700; padding: 0 .15em; }
.brand__sub {
    display: block;
    color: var(--grey-500);
    font-family: var(--f-body);
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 2px;
    line-height: 1;
}
.brand__stack {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}

.nav { display: flex; gap: var(--s-6); }
.nav a {
    position: relative;
    font-size: .92rem;
    font-weight: 500;
    color: var(--grey-700);
    padding: var(--s-2) 0;
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1.5px;
    background: var(--sky);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease-out);
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
body[data-on-hero] .site-header:not(.is-scrolled) .nav a:hover,
body[data-on-hero] .site-header:not(.is-scrolled) .nav a.is-active { color: var(--paper); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav__highlight { color: var(--sky-deep) !important; }
body[data-on-hero] .site-header:not(.is-scrolled) .nav__highlight { color: var(--sky-pale) !important; }

@media (max-width: 880px) {
    .nav { display: none; }
}

/* Compensar header fijo en páginas sin hero */
body:not([data-on-hero]) main { padding-top: 76px; }

/* ════════════════════════════════════════════════════════════════════
   HERO con imagen full-bleed
   ════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 92vh;
    display: grid;
    align-items: end;
    overflow: hidden;
    color: var(--paper);
    background: var(--ink);
    isolation: isolate;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center 35%;
    background-color: var(--ink);
    opacity: .7;
    animation: heroZoom 18s var(--ease-out) infinite alternate;
}
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(10 14 20 / .35) 0%, rgb(10 14 20 / .25) 40%, rgb(10 14 20 / .85) 100%),
        linear-gradient(90deg, rgb(10 14 20 / .55) 0%, transparent 50%);
}
@keyframes heroZoom {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__bg { animation: none; }
}
.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--s-10) 0 var(--s-8);
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--paper);
    margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px; height: 2px;
    background: var(--accent);            /* identidad: línea naranja en hero */
}
.hero__title {
    color: var(--paper);
    font-size: clamp(3rem, 9vw, 7.5rem);
    line-height: .92;
    letter-spacing: -.045em;
    max-width: 14ch;
    font-variation-settings: 'opsz' 96, 'wdth' 100;
    font-weight: 800;
    text-shadow: 0 2px 30px rgb(0 0 0 / .3);
}
/* Highlight de identidad — el naranja de la marca */
.hero__title .highlight {
    color: var(--accent);
    font-style: normal;
    position: relative;
    display: inline-block;
}
.hero__title em {
    font-style: normal;
    color: var(--accent);
}
.hero__lema {
    color: rgb(255 255 247 / .85);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    max-width: 52ch;
    line-height: 1.6;
    margin-top: var(--s-5);
}
.hero__actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-6);
}
.hero__actions .btn--ghost {
    color: var(--paper);
    border-color: rgb(255 255 247 / .35);
}
.hero__actions .btn--ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.hero__scroll-cue {
    position: absolute;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255 255 247 / .55);
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .25em;
    z-index: 2;
    animation: bounce 2.5s var(--ease-out) infinite;
}
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: .55; }
    50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   Sección genérica
   ════════════════════════════════════════════════════════════════════ */
section { padding: var(--s-9) 0; }
.section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
    flex-wrap: wrap;
}
.section__head h2 { max-width: 22ch; }
.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--grey-500);
    margin-bottom: var(--s-3);
}
.section__eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px; height: 2px;
    background: var(--accent);            /* identidad: línea naranja en eyebrows */
}
.section__sub {
    color: var(--grey-700);
    max-width: 60ch;
}

/* ════════════════════════════════════════════════════════════════════
   Categorías (home)
   ════════════════════════════════════════════════════════════════════ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3);
}
.cat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--paper-2);
    color: var(--ink);
    padding: var(--s-6);
    border-radius: var(--r-3);
    min-height: 240px;
    border: 1px solid var(--grey-100);
    transition:
        background-color .35s var(--ease-out),
        border-color .35s var(--ease-out),
        color .35s var(--ease-out),
        transform .35s var(--ease-out);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.cat-card::after {
    content: '';
    position: absolute;
    inset: auto auto -50% -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgb(45 156 219 / .15), transparent 60%);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
    z-index: -1;
}
.cat-card:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: translateY(-4px);
}
.cat-card:hover::after { opacity: 1; }
.cat-card__icon {
    color: var(--accent);                  /* identidad: ícono naranja */
    margin-bottom: var(--s-4);
    transition: transform .4s var(--ease-out), color .35s var(--ease-out);
}
.cat-card:hover .cat-card__icon { color: var(--sky); }
.cat-card:hover .cat-card__icon { transform: scale(1.08) rotate(-5deg); }
.cat-card h3 {
    color: inherit;
    margin-bottom: var(--s-1);
}
.cat-card__count {
    color: var(--grey-500);
    font-size: .85rem;
    margin-top: var(--s-2);
    transition: color .35s var(--ease-out);
}
.cat-card:hover .cat-card__count { color: var(--grey-300); }
.cat-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
    font-size: .85rem;
    font-weight: 600;
    color: var(--sky-deep);
    transition: color .35s var(--ease-out);
}
.cat-card:hover .cat-card__cta { color: var(--paper); }

/* ════════════════════════════════════════════════════════════════════
   Property card
   ════════════════════════════════════════════════════════════════════ */
.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--s-5);
}

.property-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: var(--r-3);
    overflow: hidden;
    color: inherit;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
    position: relative;
}
.property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgb(10 14 20 / .08), 0 4px 8px rgb(10 14 20 / .04);
}
.property-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-3);
    background: var(--grey-100);
}
.property-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}
.property-card:hover .property-card__image img { transform: scale(1.06); }
.property-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgb(10 14 20 / .35) 100%);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
}
.property-card:hover .property-card__image::after { opacity: 1; }

.property-card__body {
    padding: var(--s-5) var(--s-1) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.property-card__category {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--grey-500);
}
.property-card__title {
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--ink);
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.025em;
}
.property-card__location {
    color: var(--grey-500);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.property-card__meta {
    display: flex;
    gap: var(--s-4);
    color: var(--grey-700);
    font-size: .85rem;
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--grey-100);
    flex-wrap: wrap;
}
.property-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.property-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--s-3);
}
.property-card__price {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
}
.property-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: .85rem;
    font-weight: 600;
    color: var(--sky-deep);
    transition: gap .35s var(--ease-out);
}
.property-card:hover .property-card__cta { gap: var(--s-2); }

/* Badges (sutiles) */
.badge {
    position: absolute;
    z-index: 2;
    padding: var(--s-1) var(--s-3);
    background: rgb(250 250 247 / .92);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.badge--featured  { top: var(--s-3); left: var(--s-3); background: var(--ink); color: var(--paper); }
.badge--operation { top: var(--s-3); right: var(--s-3); }
.badge--status    { bottom: var(--s-3); left: var(--s-3); }
.badge--reserved  { background: var(--gold); color: white; }
.badge--sold      { background: var(--grey-500); color: white; }

/* ════════════════════════════════════════════════════════════════════
   CTA Band
   ════════════════════════════════════════════════════════════════════ */
.cta-band {
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-9) 0;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: -20% auto auto -20%;
    width: 60%; height: 140%;
    background: radial-gradient(ellipse at center, rgb(45 156 219 / .25), transparent 60%);
    pointer-events: none;
}
.cta-band__inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-6);
    align-items: center;
    position: relative;
    z-index: 1;
}
.cta-band .section__eyebrow,
.raffle-mechanics .section__eyebrow,
.hero .section__eyebrow {
    color: var(--sky-pale);
}
.cta-band .section__eyebrow::before,
.raffle-mechanics .section__eyebrow::before {
    background: var(--accent);
}
@media (max-width: 720px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band h2 { color: var(--paper); max-width: 18ch; }
.cta-band__lead { color: rgb(255 255 255 / .7); margin-top: var(--s-3); }
.cta-band__action { justify-self: end; }
@media (max-width: 720px) { .cta-band__action { justify-self: start; } }

/* ════════════════════════════════════════════════════════════════════
   Page hero (páginas internas — sin imagen)
   ════════════════════════════════════════════════════════════════════ */
.page-hero {
    padding: calc(var(--s-9) + 76px) 0 var(--s-7);
    border-bottom: 1px solid var(--grey-100);
    background: var(--paper);
}
.page-hero h1 { max-width: 22ch; margin-bottom: var(--s-3); }
.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--grey-500);
    margin-bottom: var(--s-4);
}
.page-hero__eyebrow::before {
    content: '';
    width: 24px; height: 2px;
    background: var(--accent);
}
.page-hero__sub { color: var(--grey-700); max-width: 60ch; }

/* ════════════════════════════════════════════════════════════════════
   Catálogo · Filtros
   ════════════════════════════════════════════════════════════════════ */
.catalog { padding: var(--s-7) 0 var(--s-9); }
.catalog__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--s-7);
    align-items: start;
}
@media (max-width: 880px) { .catalog__layout { grid-template-columns: 1fr; } }

.filters {
    position: sticky;
    top: 100px;
    background: var(--paper-2);
    border-radius: var(--r-3);
    padding: var(--s-5);
}
.filters h3 {
    font-family: var(--f-body);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey-500);
    margin-bottom: var(--s-4);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.filters__form { display: flex; flex-direction: column; gap: var(--s-4); }
.filters__field { display: flex; flex-direction: column; gap: var(--s-2); }
.filters__field > span {
    font-size: .8rem;
    color: var(--grey-500);
    font-weight: 500;
}
.filters__field input,
.filters__field select {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-2);
    background: var(--paper);
    font: inherit;
    color: var(--ink);
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.filters__field input:focus,
.filters__field select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgb(45 156 219 / .12);
}
.filters__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.filters__clear {
    color: var(--grey-500);
    font-size: .85rem;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.filters__clear:hover { color: var(--ink); }

.catalog__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
    gap: var(--s-3);
}
.catalog__count {
    color: var(--grey-500);
    font-size: .9rem;
}

.empty-state {
    background: var(--paper-2);
    border-radius: var(--r-3);
    padding: var(--s-9) var(--s-5);
    text-align: center;
}
.empty-state .icon {
    color: var(--grey-300);
    margin: 0 auto var(--s-4);
    width: 48px; height: 48px;
}
.empty-state p { color: var(--grey-700); margin-bottom: var(--s-4); font-size: 1.1rem; }

/* Sub-nav de categorías */
.cat-nav {
    display: flex;
    gap: var(--s-2);
    margin-bottom: var(--s-7);
    overflow-x: auto;
    padding-bottom: var(--s-2);
}
.cat-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--paper-2);
    color: var(--grey-700);
    border-radius: var(--r-pill);
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.cat-nav__item:hover { background: var(--grey-100); color: var(--ink); }
.cat-nav__item.is-active { background: var(--ink); color: var(--paper); }
.cat-nav__item em { color: inherit; opacity: .55; font-style: normal; font-size: .85em; }

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    color: var(--grey-500);
    font-size: .85rem;
    padding: calc(var(--s-5) + 76px) 0 var(--s-3);
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span[aria-hidden] { color: var(--grey-300); }
.breadcrumb__current { color: var(--ink); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   Property show — ficha cinematográfica
   ════════════════════════════════════════════════════════════════════ */
.property-show { padding-bottom: var(--s-9); }
.property-show__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}
@media (max-width: 720px) { .property-show__header { grid-template-columns: 1fr; } }
.property-show__category {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--grey-500);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: var(--s-3);
}
.property-show__category .icon { color: var(--sky); }
.property-show__header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--s-3);
}
.property-show__location {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--grey-700);
}
.property-show__price-block { text-align: right; }
@media (max-width: 720px) { .property-show__price-block { text-align: left; } }
.property-show__op {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--grey-500);
    font-weight: 600;
    margin-bottom: var(--s-1);
}
.property-show__price {
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

/* Galería */
.gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3);
    margin: var(--s-5) 0;
}
.gallery__main {
    aspect-ratio: 16 / 9;
    background: var(--grey-100);
    border-radius: var(--r-3);
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}
.gallery__main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .35s var(--ease-out), transform .8s var(--ease-out);
}
.gallery__main:hover img { transform: scale(1.02); }
.gallery__main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(10 14 20 / 0);
    transition: background .35s var(--ease-out);
    pointer-events: none;
}
.gallery__main:hover::after { background: rgb(10 14 20 / .15); }

.gallery__thumbs {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding-bottom: var(--s-1);
}
.gallery__thumb {
    flex: 0 0 100px;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--grey-100);
    padding: 0;
    position: relative;
    transition: transform .35s var(--ease-out);
    cursor: pointer;
}
.gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .35s var(--ease-out);
}
.gallery__thumb:not(.is-active) img { opacity: .55; }
.gallery__thumb:hover img { opacity: 1; }
.gallery__thumb.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--sky);
    border-radius: inherit;
    pointer-events: none;
}

/* Layout ficha */
.property-show__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--s-7);
    margin-top: var(--s-6);
}
@media (max-width: 880px) { .property-show__layout { grid-template-columns: 1fr; } }

.prop-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px;
    background: var(--grey-100);
    border-radius: var(--r-3);
    overflow: hidden;
    margin-bottom: var(--s-7);
}
.prop-spec {
    background: var(--paper);
    padding: var(--s-5) var(--s-3);
    text-align: center;
}
.prop-spec .icon {
    color: var(--sky);
    margin: 0 auto var(--s-2);
}
.prop-spec strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1;
}
.prop-spec span {
    display: block;
    color: var(--grey-500);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: var(--s-1);
}

.prop-description h2 {
    font-size: 1.5rem;
    margin-bottom: var(--s-4);
}
.prop-description div {
    color: var(--grey-700);
    line-height: 1.7;
    font-size: 1.02rem;
}

/* Sidebar contacto */
.contact-card {
    position: sticky;
    top: 100px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-3);
    padding: var(--s-6);
    overflow: hidden;
}
.contact-card__eyebrow {
    color: var(--sky);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.contact-card h3 {
    color: var(--paper);
    font-size: 1.4rem;
    margin-bottom: var(--s-3);
}
.contact-card p { color: rgb(255 255 255 / .7); margin-bottom: var(--s-5); font-size: .92rem; }
.contact-card__buttons { display: flex; flex-direction: column; gap: var(--s-2); }
.contact-card .btn--block { justify-content: space-between; }

/* ════════════════════════════════════════════════════════════════════
   AGENT CARD (asesor asignado a la propiedad)
   ════════════════════════════════════════════════════════════════════ */
.agent-card {
    position: sticky;
    top: 100px;
    background: var(--paper);
    border: 1px solid var(--grey-100);
    border-radius: var(--r-3);
    padding: var(--s-5);
    box-shadow: var(--shadow-sm);
}
.agent-card__head {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--grey-100);
    margin-bottom: var(--s-4);
}
.agent-card__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--grey-100);
    flex-shrink: 0;
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 1px var(--grey-100);
}
.agent-card__role {
    font-size: .68rem;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
    margin: 0 0 2px;
}
.agent-card__name {
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.1;
}
.agent-card__title {
    color: var(--grey-500);
    font-size: .82rem;
    margin: 2px 0 0;
}
.agent-card__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.agent-card .btn--block {
    justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════════════
   MAPA · Google Maps embed + barra de compartir
   ════════════════════════════════════════════════════════════════════ */
.prop-map-wrap { margin-top: var(--s-7); }
.prop-map-wrap h2 { font-size: 1.5rem; margin-bottom: var(--s-3); }
.prop-map-address {
    color: var(--grey-700);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.prop-map-address .icon { color: var(--accent); }

.prop-map-iframe {
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: var(--r-3);
    overflow: hidden;
    background: var(--grey-100);
    display: block;
    box-shadow: 0 0 0 1px var(--grey-100);
}

/* Barra de compartir bajo el mapa */
.prop-map-share {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}
.prop-map-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-pill);
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color .25s var(--ease-out),
        border-color .25s var(--ease-out),
        color .25s var(--ease-out),
        transform .2s var(--ease-out);
    font-family: var(--f-body);
}
.prop-map-share__btn:hover {
    background: var(--accent-pale);
    border-color: var(--accent);
    color: var(--accent-deep);
    transform: translateY(-1px);
}
.prop-map-share__btn--success {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}
.prop-map-share__btn--success:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--paper);
}
.prop-map-share__btn .icon { color: inherit; }

.prop-map-note {
    margin-top: var(--s-3);
    color: var(--grey-500);
    font-size: .82rem;
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   PREVIEW BANNER (admin previewing draft/hidden properties)
   ════════════════════════════════════════════════════════════════════ */
.preview-banner {
    position: sticky;
    top: 76px;                  /* debajo del site-header fijo */
    z-index: 49;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--paper);
    padding: var(--s-3) 0;
    box-shadow: 0 6px 20px rgb(10 14 20 / .18);
    border-bottom: 1px solid rgb(255 255 247 / .12);
}
.preview-banner__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.preview-banner__info {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.preview-banner__badge {
    background: rgb(255 255 247 / .22);
    color: var(--paper);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}
.preview-banner__status {
    color: var(--paper);
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
}
.preview-banner__status strong {
    background: rgb(255 255 247 / .15);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 2px;
}
.preview-banner__hint {
    color: rgb(255 255 247 / .82);
    font-size: .85rem;
    line-height: 1.4;
}
.preview-banner__actions {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Botón Publicar — blanco con texto azul, alto contraste */
.preview-banner__publish {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--paper);
    color: var(--accent-deep);
    border: 1.5px solid var(--paper);
    border-radius: var(--r-pill);
    padding: var(--s-2) var(--s-4);
    font-family: var(--f-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.preview-banner__publish:hover {
    background: rgb(255 255 247 / .9);
    transform: translateY(-1px);
}
.preview-banner__publish .icon { color: var(--accent-deep); }

/* Botón "Volver al editor" — ghost transparente */
.preview-banner__back {
    color: var(--paper);
    font-size: .88rem;
    font-weight: 500;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    border: 1px solid rgb(255 255 247 / .3);
    transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.preview-banner__back:hover {
    background: rgb(255 255 247 / .12);
    border-color: rgb(255 255 247 / .5);
    color: var(--paper);
}

@media (max-width: 720px) {
    .preview-banner__inner { flex-direction: column; align-items: stretch; }
    .preview-banner__hint  { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   STICKY PROPERTY BAR (NUEVO)
   ════════════════════════════════════════════════════════════════════ */
.property-stickybar {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--grey-100);
    box-shadow: var(--shadow-md);
    z-index: 49;
    transform: translateY(-100%);
    transition: transform .4s var(--ease-out);
    padding: var(--s-3) 0;
}
.property-stickybar.is-visible { transform: translateY(0); }
.property-stickybar__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--s-4);
    align-items: center;
}
@media (max-width: 720px) {
    .property-stickybar__inner { grid-template-columns: 1fr auto; }
    .property-stickybar__title { display: none; }
}
.property-stickybar__title {
    font-family: var(--f-display);
    font-weight: 500;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: -.01em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.property-stickybar__price {
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--ink);
    font-size: 1.15rem;
    letter-spacing: -.015em;
}

/* ════════════════════════════════════════════════════════════════════
   LIGHTBOX (NUEVO)
   ════════════════════════════════════════════════════════════════════ */
.lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: none;
    padding: 0;
    background: rgb(10 14 20 / .96);
    color: var(--paper);
}
.lightbox::backdrop { background: rgb(10 14 20 / .96); }
.lightbox[open] {
    display: grid;
    place-items: center;
}
.lightbox__img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--r-2);
    box-shadow: var(--shadow-lg);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgb(255 255 247 / .12);
    color: var(--paper);
    border: 1px solid rgb(255 255 247 / .15);
    border-radius: 50%;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgb(255 255 247 / .22);
    transform: scale(1.05);
}
.lightbox__close { top: var(--s-5); right: var(--s-5); }
.lightbox__prev  { left: var(--s-5);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--s-5); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__counter {
    position: absolute;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255 255 247 / .65);
    font-size: .85rem;
    letter-spacing: .15em;
    font-feature-settings: 'tnum';
}

/* ════════════════════════════════════════════════════════════════════
   SIMILAR PROPERTIES SECTION (NUEVO)
   ════════════════════════════════════════════════════════════════════ */
.similar-properties {
    padding: var(--s-9) 0;
    background: var(--paper-2);
    margin-top: var(--s-9);
}

/* ════════════════════════════════════════════════════════════════════
   Contacto
   ════════════════════════════════════════════════════════════════════ */
.contact-section { padding: var(--s-7) 0 var(--s-9); }
.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-7);
    align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form__field { display: flex; flex-direction: column; gap: var(--s-2); }
.form__field > span {
    font-size: .85rem;
    font-weight: 500;
    color: var(--grey-700);
}
.form__field em { color: var(--sky); font-style: normal; }
.form__field input,
.form__field textarea,
.form__field select {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--grey-200);
    border-radius: var(--r-2);
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
    outline: none;
    border-color: var(--sky);
    box-shadow: 0 0 0 3px rgb(45 156 219 / .12);
}
.form__field--error input,
.form__field--error textarea {
    border-color: var(--red);
    background: rgb(184 80 66 / .04);
}
.form__field small { color: var(--red); font-size: .82rem; }
.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__honeypot {
    position: absolute;
    left: -9999px;
    height: 0; width: 0;
    overflow: hidden;
}

.alert {
    border-radius: var(--r-3);
    padding: var(--s-5);
    border-left: 3px solid;
}
.alert--success {
    background: rgb(44 122 77 / .06);
    border-color: var(--green);
    color: var(--ink);
}
.alert--success h3 { color: var(--green); margin-bottom: var(--s-2); }
.alert--error {
    background: rgb(184 80 66 / .06);
    border-color: var(--red);
    color: var(--ink);
}

.contact-aside {
    background: var(--paper-2);
    border-radius: var(--r-3);
    padding: var(--s-6);
}
.contact-aside h3 {
    font-family: var(--f-body);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey-500);
    margin-bottom: var(--s-4);
}
.contact-aside dl {
    display: grid;
    gap: var(--s-4);
    margin: 0;
}
.contact-aside dt {
    font-size: .75rem;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: var(--s-1);
}
.contact-aside dd {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
}
.contact-aside dd a { color: var(--ink); }
.contact-aside dd a:hover { color: var(--sky-deep); }
.contact-aside__lic {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--grey-200);
    color: var(--grey-500);
    font-size: .85rem;
    letter-spacing: .05em;
}

/* ════════════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--ink);
    color: rgb(255 255 247 / .7);
    padding: var(--s-9) 0 var(--s-5);
    margin-top: var(--s-9);
    position: relative;
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-6);
    margin-bottom: var(--s-7);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
}
.footer__brand-name {
    color: var(--paper);
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}
.footer__brand-amp {
    color: var(--accent);
    font-weight: 700;
    padding: 0 .15em;
}
.footer__brand-sub {
    color: rgb(255 255 247 / .55);
    font-family: var(--f-body);
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    line-height: 1;
}
.footer__lic {
    color: rgb(255 255 247 / .4);
    font-size: .82rem;
    letter-spacing: .05em;
}
.footer h4 {
    color: var(--paper);
    font-family: var(--f-body);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: var(--s-4);
}
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer a { color: rgb(255 255 247 / .7); }
.footer a:hover { color: var(--paper); }
.footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.footer__social a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgb(255 255 247 / .15);
    transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.footer__social a:hover {
    background: var(--sky);
    border-color: var(--sky);
    color: var(--paper);
}

.footer__bottom {
    border-top: 1px solid rgb(255 255 247 / .08);
    padding-top: var(--s-5);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    color: rgb(255 255 247 / .4);
    font-size: .82rem;
}

/* ════════════════════════════════════════════════════════════════════
   STORIES — Vecinos reales / social proof
   ════════════════════════════════════════════════════════════════════ */
.stories {
    background: var(--paper-2);
    padding: var(--s-9) 0;
}
.stories .section__head h2 { max-width: 24ch; }
.stories .section__sub { max-width: 60ch; }

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-5);
}

.story-card {
    background: var(--paper);
    border-radius: var(--r-3);
    overflow: hidden;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
    border: 1px solid var(--grey-100);
    display: flex;
    flex-direction: column;
}
.story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgb(10 14 20 / .08), 0 4px 8px rgb(10 14 20 / .04);
}

.story-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--grey-100);
}
.story-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}
.story-card:hover .story-card__media img { transform: scale(1.04); }

.story-card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent 0%, rgb(10 14 20 / .55) 100%);
    pointer-events: none;
}

.story-card__badge {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    padding: var(--s-1) var(--s-3);
    background: rgb(255 255 247 / .92);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}

.story-card--video { cursor: pointer; }

/* Badges del media según plataforma de origen */
.story-card__badge--instagram {
    background: linear-gradient(135deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF 80%, #4F5BD5);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    text-transform: none;
    letter-spacing: .02em;
    font-size: .72rem;
}
.story-card__badge--instagram .icon { color: #fff; }
.story-card__badge--facebook {
    background: #1877F2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    text-transform: none;
    letter-spacing: .02em;
    font-size: .72rem;
}
.story-card__badge--facebook .icon { color: #fff; }
.story-card__badge--tiktok {
    background: linear-gradient(95deg, #25F4EE 0%, #000 50%, #FE2C55 100%);
    color: #fff;
    padding: 4px 10px;
    text-transform: none;
    letter-spacing: .02em;
    font-size: .72rem;
}
.story-card__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 0;
    background: rgb(255 255 247 / .92);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 6px 24px rgb(10 14 20 / .25);
    transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.story-card__play:hover {
    background: var(--accent);
    color: var(--paper);
    transform: translate(-50%, -50%) scale(1.06);
}

.story-card__body {
    padding: var(--s-4) var(--s-4) var(--s-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.story-card__name {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.2;
}
.story-card__meta {
    color: var(--grey-700);
    font-size: .88rem;
    margin: 0;
}
.story-card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: var(--s-1) 0 0;
}
.story-card__date .icon { color: var(--accent); }
.story-card__quote {
    color: var(--grey-700);
    font-size: .9rem;
    font-style: italic;
    line-height: 1.5;
    margin: var(--s-2) 0 0;
    border-left: 2px solid var(--accent);
    padding-left: var(--s-3);
    /* Limita a 4 líneas visuales para mantener todas las cards a la misma altura.
       El texto completo sigue en el DOM (lectores de pantalla lo leen completo). */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badge "Ver en Instagram / Facebook" — link al post original */
.story-card__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--s-2);
    align-self: flex-start;
    padding: 6px 10px 6px 8px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s var(--ease-out), filter .15s var(--ease-out);
}
.story-card__source:hover { transform: translateY(-1px); filter: brightness(1.05); }
.story-card__source--instagram {
    background: linear-gradient(135deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF 80%, #4F5BD5);
}
.story-card__source--facebook { background: #1877F2; }
.story-card__source .icon { color: #fff; }

.stories__cta {
    margin-top: var(--s-7);
    text-align: center;
    padding: var(--s-6);
    border-top: 1px solid var(--grey-100);
}
.stories__cta p {
    color: var(--grey-700);
    margin-bottom: var(--s-4);
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* Dialog para video */
.story-video-dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: 0;
    padding: var(--s-5);
    background: rgb(10 14 20 / .94);
}
.story-video-dialog::backdrop { background: rgb(10 14 20 / .94); }
.story-video-dialog[open] {
    display: grid;
    place-items: center;
}
.story-video-dialog__frame {
    width: min(900px, 92vw);
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.story-video-dialog__frame iframe { width: 100%; height: 100%; border: 0; }

/* Modal vertical: TikTok (aspect ratio puro) */
.story-video-dialog--vertical .story-video-dialog__frame {
    width: min(420px, 92vw);
    aspect-ratio: 9 / 16;
    max-height: 90vh;
}

/* Modal cuadrado (post tradicional de IG) */
.story-video-dialog--square .story-video-dialog__frame {
    width: min(540px, 92vw);
    aspect-ratio: 1 / 1;
}

/* IG y FB embeds añaden header (autor + acciones) sobre el video.
   Liberamos altura para que el video se vea completo + el chrome del embed. */
.story-video-dialog[data-provider="instagram"] .story-video-dialog__frame,
.story-video-dialog[data-provider="facebook"].story-video-dialog--vertical .story-video-dialog__frame {
    aspect-ratio: auto;
    height: 90vh;
    width: min(420px, 92vw);
}
.story-video-dialog[data-provider="instagram"] .story-video-dialog__frame iframe,
.story-video-dialog[data-provider="facebook"].story-video-dialog--vertical .story-video-dialog__frame iframe {
    width: 100%;
    height: 100%;
}
.story-video-dialog__close {
    position: absolute;
    top: var(--s-5);
    right: var(--s-5);
    background: rgb(255 255 247 / .12);
    color: var(--paper);
    border: 1px solid rgb(255 255 247 / .15);
    border-radius: 50%;
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.story-video-dialog__close:hover {
    background: rgb(255 255 247 / .22);
    transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════════════
   SORTEOS — listado, landing, compra
   ════════════════════════════════════════════════════════════════════ */

/* Grid de sorteos */
.raffle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s-5);
}

/* Raffle card */
.raffle-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: var(--r-3);
    overflow: hidden;
    color: inherit;
    transition: transform .4s var(--ease-out);
    position: relative;
}
.raffle-card:hover { transform: translateY(-3px); }
.raffle-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--r-3);
    background: var(--grey-100);
}
.raffle-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}
.raffle-card:hover .raffle-card__image img { transform: scale(1.06); }
.raffle-card__badge {
    top: var(--s-3);
    left: var(--s-3);
    background: var(--sky);
    color: var(--paper);
}
.raffle-card__badge--awarded { background: var(--gold); }
.raffle-card__badge--closed  { background: var(--grey-500); color: white; }

.raffle-card__body {
    padding: var(--s-5) var(--s-1) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.raffle-card__eyebrow {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--sky-deep);
}
.raffle-card__title {
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--ink);
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.025em;
}
.raffle-card__property {
    color: var(--grey-500);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.raffle-card__progress { margin-top: var(--s-3); }
.raffle-card__progress-bar {
    height: 6px;
    background: var(--grey-100);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--s-2);
}
.raffle-card__progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sky), var(--sky-deep));
    border-radius: inherit;
    transition: width 1.2s var(--ease-out);
}
.raffle-card__progress-label {
    font-size: .8rem;
    color: var(--grey-500);
    font-feature-settings: 'tnum';
}
.raffle-card__winner {
    color: var(--gold);
    font-size: .9rem;
    margin-top: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.raffle-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--grey-100);
}
.raffle-card__price {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.raffle-card__price small {
    font-size: .7rem;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 4px;
}
.raffle-card__price {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.03em;
}
.raffle-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: .85rem;
    font-weight: 600;
    color: var(--sky-deep);
    transition: gap .35s var(--ease-out);
}
.raffle-card:hover .raffle-card__cta { gap: var(--s-2); }

/* Listado page */
.raffles-section { padding: var(--s-9) 0; }

/* ──── Mecánica de sorteos ──── */
.raffle-mechanics {
    padding: var(--s-9) 0;
    background: var(--ink);
    color: var(--paper);
}
.raffle-mechanics .section__eyebrow { color: var(--sky); }
.raffle-mechanics h2 { color: var(--paper); }
.raffle-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3);
}
.raffle-steps li {
    background: rgb(255 255 247 / .04);
    border: 1px solid rgb(255 255 247 / .08);
    padding: var(--s-5);
    border-radius: var(--r-3);
    transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.raffle-steps li:hover {
    border-color: var(--sky);
    transform: translateY(-3px);
}
.raffle-step__num {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 3rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: var(--s-3);
    font-weight: 800;
    letter-spacing: -.04em;
}
.raffle-steps h3 { color: var(--paper); margin-bottom: var(--s-2); }
.raffle-steps p { color: rgb(255 255 247 / .65); font-size: .9rem; }

/* ──── Hero del sorteo ──── */
.raffle-hero {
    /* hereda de .hero pero con contenido extra */
}
.raffle-hero__keystats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid rgb(255 255 247 / .15);
    max-width: 600px;
}
.raffle-hero__stat strong {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    color: var(--paper);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.raffle-hero__stat span {
    display: block;
    font-size: .75rem;
    color: rgb(255 255 247 / .6);
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-top: var(--s-2);
}

/* ──── Status (countdown + progreso) ──── */
.raffle-status {
    background: var(--paper);
    padding: var(--s-8) 0 var(--s-7);
    border-bottom: 1px solid var(--grey-100);
}
.raffle-status__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: start;
}
@media (max-width: 760px) { .raffle-status__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.raffle-status__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--grey-500);
    margin-bottom: var(--s-4);
}
.raffle-status__sub {
    color: var(--grey-500);
    margin-top: var(--s-3);
    font-size: .9rem;
}

/* Countdown */
.raffle-countdown__boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
}
.raffle-countdown__boxes > div {
    background: var(--paper-2);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-2);
    text-align: center;
}
.raffle-countdown__boxes strong {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.04em;
    font-feature-settings: 'tnum';
}
.raffle-countdown__boxes span {
    display: block;
    font-size: .68rem;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    margin-top: var(--s-2);
}

/* Progress */
.raffle-progress__bar {
    height: 12px;
    background: var(--grey-100);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--s-3);
}
.raffle-progress__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--sky), var(--sky-deep));
    border-radius: inherit;
    transition: width 1.6s var(--ease-out);
}
.raffle-progress__bar span.is-filled { width: var(--pct); }
.raffle-progress__numbers {
    display: flex;
    justify-content: space-between;
    color: var(--grey-700);
    font-size: .85rem;
    font-feature-settings: 'tnum';
}
.raffle-progress__numbers strong {
    font-family: var(--f-display);
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    margin-right: 4px;
    letter-spacing: -.02em;
}

/* ──── Detalle del sorteo (galería + buybox) ──── */
.raffle-detail { padding: var(--s-7) 0 var(--s-9); }
.raffle-detail__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--s-7);
    margin-top: var(--s-6);
}
@media (max-width: 880px) { .raffle-detail__layout { grid-template-columns: 1fr; } }

/* Buybox sidebar */
.raffle-buybox {
    position: sticky;
    top: 100px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-3);
    padding: var(--s-6);
    overflow: hidden;
}
.raffle-buybox__eyebrow {
    color: var(--sky);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.raffle-buybox h3 { color: var(--paper); margin-bottom: var(--s-4); font-size: 1.4rem; }
.raffle-buybox__lead {
    margin-top: var(--s-4);
    color: rgb(255 255 247 / .55);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

/* Ticket tiers */
.ticket-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.ticket-tier {
    background: rgb(255 255 247 / .06);
    border: 1.5px solid rgb(255 255 247 / .12);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-2);
    text-align: center;
    color: var(--paper);
    transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
    position: relative;
    cursor: pointer;
}
.ticket-tier:hover {
    background: rgb(255 255 247 / .1);
    border-color: var(--sky);
    transform: translateY(-2px);
    color: var(--paper);
}
.ticket-tier strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -.03em;
}
.ticket-tier span {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgb(255 255 247 / .5);
    margin-bottom: var(--s-2);
}
.ticket-tier em {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: .9rem;
    color: var(--sky-pale);
    font-feature-settings: 'tnum';
}
.ticket-tier small {
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    background: var(--sky);
    color: var(--paper);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.ticket-tier--featured { border-color: var(--sky); background: rgb(45 156 219 / .12); }
.ticket-tier--featured:hover { background: rgb(45 156 219 / .18); }

/* Tiers en form (con radio) */
.ticket-tiers--inline { background: var(--paper-2); padding: var(--s-3); border-radius: var(--r-3); }
.ticket-tiers--inline .ticket-tier {
    background: var(--paper);
    border-color: var(--grey-200);
    color: var(--ink);
}
.ticket-tiers--inline .ticket-tier strong { color: var(--ink); }
.ticket-tiers--inline .ticket-tier span   { color: var(--grey-500); }
.ticket-tiers--inline .ticket-tier em     { color: var(--sky-deep); }
.ticket-tiers--inline .ticket-tier:hover { border-color: var(--sky); background: var(--paper); }
.ticket-tiers--inline .ticket-tier.is-active {
    border-color: var(--sky);
    background: var(--sky-pale);
}
.ticket-tiers--inline .ticket-tier input { position: absolute; opacity: 0; pointer-events: none; }

/* ──── FAQ accordion ──── */
.raffle-faq { margin-top: var(--s-7); }
.raffle-faq h2 { font-size: 1.5rem; margin-bottom: var(--s-4); }
.raffle-faq__item {
    border-top: 1px solid var(--grey-100);
    padding: var(--s-4) 0;
}
.raffle-faq__item:last-child { border-bottom: 1px solid var(--grey-100); }
.raffle-faq__item summary {
    cursor: pointer;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    letter-spacing: -.02em;
}
.raffle-faq__item summary::-webkit-details-marker { display: none; }
.raffle-faq__item summary::after {
    content: '+';
    font-family: var(--f-body);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--sky);
    transition: transform .25s var(--ease-out);
    line-height: 1;
}
.raffle-faq__item[open] summary::after { transform: rotate(45deg); }
.raffle-faq__item div {
    padding: var(--s-4) 0 0;
    color: var(--grey-700);
    line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════════════
   Compra de boletos
   ════════════════════════════════════════════════════════════════════ */
.purchase-section { padding: var(--s-5) 0 var(--s-9); }
.purchase-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--s-7);
    align-items: start;
}
@media (max-width: 880px) { .purchase-grid { grid-template-columns: 1fr; } }

.purchase-form-wrap h1 { margin-bottom: var(--s-3); }
.purchase-form-wrap .lead { margin-bottom: var(--s-7); }

.purchase-step {
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--grey-100);
}
.purchase-step:last-of-type { border-bottom: none; }
.purchase-step__number {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--sky-deep);
    margin-bottom: var(--s-4);
}

.payment-methods {
    display: grid;
    gap: var(--s-3);
}
.payment-method {
    cursor: pointer;
    display: block;
}
.payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.payment-method__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    background: var(--paper-2);
    border: 1.5px solid var(--grey-200);
    border-radius: var(--r-3);
    padding: var(--s-5);
    transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.payment-method__inner .icon { color: var(--sky); margin-bottom: var(--s-2); }
.payment-method__inner strong {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
}
.payment-method__inner em {
    font-style: normal;
    color: var(--grey-500);
    font-size: .9rem;
}
.payment-method input:checked + .payment-method__inner {
    border-color: var(--sky);
    background: var(--sky-pale);
}

.purchase-form__legal {
    margin-top: var(--s-3);
    font-size: .82rem;
    color: var(--grey-500);
}

/* Resumen sidebar */
.purchase-summary__card {
    position: sticky;
    top: 100px;
    background: var(--paper);
    border: 1px solid var(--grey-100);
    border-radius: var(--r-3);
    padding: var(--s-5);
}
.purchase-summary__eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--grey-500);
    margin-bottom: var(--s-3);
}
.purchase-summary__property {
    border-radius: var(--r-2);
    overflow: hidden;
    margin-bottom: var(--s-4);
    aspect-ratio: 4 / 3;
    background: var(--grey-100);
}
.purchase-summary__property img { width: 100%; height: 100%; object-fit: cover; }
.purchase-summary__card h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: var(--s-1);
}
.purchase-summary__list {
    margin: var(--s-5) 0;
    display: grid;
    gap: var(--s-3);
    border-top: 1px solid var(--grey-100);
    padding-top: var(--s-4);
}
.purchase-summary__list > div { display: flex; justify-content: space-between; font-size: .9rem; }
.purchase-summary__list dt { color: var(--grey-500); }
.purchase-summary__list dd { color: var(--ink); margin: 0; font-weight: 500; }

.purchase-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--s-4);
    border-top: 1px solid var(--grey-100);
}
.purchase-summary__total span { font-size: .85rem; color: var(--grey-500); text-transform: uppercase; letter-spacing: .12em; }
.purchase-summary__total strong {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.04em;
}

/* ════════════════════════════════════════════════════════════════════
   Página de orden / confirmación
   ════════════════════════════════════════════════════════════════════ */
.order-page { padding: calc(var(--s-9) + 76px) 0 var(--s-9); }

.order-status {
    text-align: center;
    padding: var(--s-7);
    border-radius: var(--r-3);
    margin-bottom: var(--s-7);
}
.order-status--approved { background: rgb(44 122 77 / .08); border: 1px solid rgb(44 122 77 / .2); }
.order-status--pending  { background: rgb(184 148 95 / .08); border: 1px solid rgb(184 148 95 / .2); }
.order-status--rejected { background: rgb(184 80 66 / .08); border: 1px solid rgb(184 80 66 / .2); }

.order-status__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--paper);
}
.order-status--approved .order-status__icon { background: var(--green); }
.order-status--pending  .order-status__icon { background: var(--gold); }
.order-status--rejected .order-status__icon { background: var(--red); }
.order-status__eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    color: var(--grey-500);
    margin-bottom: var(--s-2);
}
.order-status h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: var(--s-3); }
.order-status p { color: var(--grey-700); }

.order-card {
    background: var(--paper-2);
    border-radius: var(--r-3);
    padding: var(--s-6);
}
.order-card__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
    margin: 0;
}
.order-card__list > div { padding: var(--s-2) 0; }
.order-card__list dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
    color: var(--grey-500);
    margin-bottom: var(--s-1);
}
.order-card__list dd {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}
.order-card__list dd strong {
    font-family: var(--f-display);
    font-size: 1.15rem;
    color: var(--ink);
    letter-spacing: -.01em;
}

.order-tickets { margin-top: var(--s-7); }
.order-tickets h2 { font-size: 1.5rem; margin-bottom: var(--s-2); }

.ticket-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--s-2);
}
.ticket-number {
    background: var(--ink);
    color: var(--sky-pale);
    border-radius: var(--r-2);
    padding: var(--s-4) var(--s-3);
    text-align: center;
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .08em;
    font-feature-settings: 'tnum';
    transition: transform .25s var(--ease-out), background .25s var(--ease-out);
}
.ticket-number:hover {
    transform: translateY(-2px) scale(1.02);
    background: var(--sky-deep);
    color: var(--paper);
}

/* ════════════════════════════════════════════════════════════════════
   Error pages
   ════════════════════════════════════════════════════════════════════ */
.error-page {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: calc(var(--s-9) + 76px) 0 var(--s-9);
}
.error__code {
    font-family: var(--f-display);
    font-size: clamp(5rem, 12vw, 9rem);
    color: var(--accent);
    line-height: 1;
    letter-spacing: -.05em;
    font-weight: 800;
    margin-bottom: var(--s-3);
}
.error-page h1 { margin-bottom: var(--s-3); }
.error-page p { color: var(--grey-700); margin-bottom: var(--s-5); max-width: 50ch; margin-left: auto; margin-right: auto; }
.error__debug {
    margin-top: var(--s-7);
    text-align: left;
    background: var(--paper-2);
    padding: var(--s-5);
    border-radius: var(--r-2);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .82rem;
    color: var(--grey-700);
}
.error__debug summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.error__debug pre { white-space: pre-wrap; word-break: break-word; margin-top: var(--s-3); }

/* ════════════════════════════════════════════════════════════════════
   HERO TAKEOVER · Actividad protagonista del home
   ════════════════════════════════════════════════════════════════════ */
.hero--activity {
    min-height: 100vh;
    align-items: center;
    padding: var(--s-9) 0 var(--s-10);
}
.hero--activity .hero__bg {
    opacity: 1;            /* el gradient se aplica inline para garantizar legibilidad */
    background-size: cover;
    background-position: center;
    animation: heroZoomSlow 24s var(--ease-out) infinite alternate;
}
.hero--activity .hero__bg::after { content: none; }   /* el gradient ya va inline */
@keyframes heroZoomSlow {
    from { transform: scale(1.02); }
    to   { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
    .hero--activity .hero__bg { animation: none; }
}

.hero-act {
    position: relative;
    z-index: 1;
    color: var(--paper);
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding: var(--s-6) 0;
}

.hero-act__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    align-self: flex-start;
    padding: 6px 14px 6px 10px;
    background: rgb(0 0 0 / .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 999px;
    color: var(--paper);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hero-act__badge .icon { color: var(--accent); }

.hero-act__title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -.035em;
    margin: 0;
    color: var(--paper);
    text-shadow: 0 4px 30px rgb(0 0 0 / .4);
}

.hero-act__sub {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgb(255 255 247 / .85);
    margin: 0;
    line-height: 1.5;
    max-width: 60ch;
}
.hero-act__sub strong { color: var(--paper); }

/* Precio del boleto vs valor real */
.hero-act__price {
    display: flex;
    gap: var(--s-5);
    align-items: end;
    flex-wrap: wrap;
    margin-top: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid rgb(255 255 255 / .14);
}
.hero-act__price-figure {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.hero-act__price-eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgb(255 255 247 / .65);
    font-weight: 600;
    margin-bottom: var(--s-2);
}
.hero-act__price-num {
    font-family: var(--f-display);
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.04em;
    text-shadow: 0 4px 30px rgb(0 0 0 / .35);
    line-height: .9;
}
.hero-act__price-foot {
    font-size: .9rem;
    color: rgb(255 255 247 / .75);
    margin-top: var(--s-2);
    font-weight: 500;
}
.hero-act__price-vs {
    display: flex;
    flex-direction: column;
    color: rgb(255 255 247 / .7);
    font-size: .85rem;
    padding-bottom: 8px;
}
.hero-act__price-vs strong {
    color: var(--paper);
    font-size: 1.5rem;
    font-family: var(--f-display);
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-color: rgb(255 255 255 / .35);
    margin: 4px 0;
    letter-spacing: -.02em;
}

/* Métricas: barra + countdown */
.hero-act__metrics {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-5);
    align-items: start;
    margin-top: var(--s-3);
}
@media (max-width: 720px) {
    .hero-act__metrics { grid-template-columns: 1fr; }
}

.hero-act__progress { min-width: 0; }
.hero-act__progress .raffle-progress__bar {
    height: 14px;
    background: rgb(255 255 255 / .14);
    backdrop-filter: blur(4px);
}
.hero-act__progress .raffle-progress__bar span {
    background: linear-gradient(90deg, var(--accent) 0%, #ff8a3d 100%);
    box-shadow: 0 0 24px rgb(255 121 31 / .5);
}
.hero-act__progress-meta {
    color: rgb(255 255 247 / .7);
    font-size: .85rem;
}
.hero-act__progress-meta strong {
    color: var(--paper);
    font-size: 1.05rem;
}

/* Countdown */
.hero-act__countdown {
    display: flex;
    gap: var(--s-2);
    font-feature-settings: 'tnum';
}
.countdown__unit {
    background: rgb(0 0 0 / .4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.countdown__unit strong {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--paper);
    line-height: 1;
    letter-spacing: -.02em;
}
.countdown__unit span {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgb(255 255 247 / .55);
    margin-top: 4px;
    font-weight: 600;
}

/* Acciones */
.hero-act__actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-4);
}
.btn--xl {
    padding: var(--s-5) var(--s-7);
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgb(255 121 31 / .35);
}
.btn--xl:hover { box-shadow: 0 12px 40px rgb(255 121 31 / .45); }

.hero-act__foot {
    color: rgb(255 255 247 / .55);
    font-size: .8rem;
    margin-top: var(--s-3);
    line-height: 1.5;
}
.hero-act__foot strong { color: var(--paper); }

/* Botón ghost en hero takeover ya tiene .btn--ghost-light */

/* Toggle "Destacar en home" en el admin */
.admin-toggle {
    display: inline-block;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    letter-spacing: .02em;
    transition: all .15s ease;
}
.admin-toggle--on {
    background: rgb(0 102 255 / .12);
    color: var(--accent, #0066FF);
    border-color: rgb(0 102 255 / .35);
}
.admin-toggle--on:hover {
    background: rgb(0 102 255 / .18);
}
.admin-toggle--off {
    color: var(--grey-700, #4a5057);
    border-color: var(--grey-200, #ddd);
}
.admin-toggle--off:hover {
    border-color: var(--accent, #0066FF);
    color: var(--accent, #0066FF);
}

/* ── Pago con tarjeta (Paymentez/NUVEI) ── */
.payment-method--disabled { opacity: .55; cursor: not-allowed; }
.payment-method--disabled .payment-method__inner { cursor: not-allowed; }

.card-fields {
    margin-top: var(--s-4, 1rem);
    padding: var(--s-4, 1rem);
    border: 1px solid var(--c-sky-light, #B8DDF7);
    border-radius: 12px;
    background: var(--c-cream, #F2F7FB);
}
.card-fields[hidden] { display: none; }
.card-fields__secure {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0;
    font-size: .8rem;
    color: var(--c-sky-dark, #1976C4);
}
.card-fields__error {
    margin: .6rem 0 0;
    padding: .5rem .75rem;
    border-radius: 8px;
    background: rgba(242, 107, 31, .12);
    color: var(--c-orange, #F26B1F);
    font-size: .85rem;
}
.btn.is-busy { opacity: .7; pointer-events: none; position: relative; }
.btn.is-busy span { opacity: .6; }

/* ── Cuentas bancarias en la página de orden (transferencia) ── */
.order-banks { margin-top: var(--s-7, 2rem); }
.order-banks__steps {
    margin: 0 0 var(--s-5, 1.5rem);
    padding-left: 1.2rem;
    color: var(--grey-700, #374151);
    line-height: 1.7;
}
.order-banks__steps li { margin-bottom: .35rem; }
.order-banks__choice {
    margin: 0 0 var(--s-3, .75rem);
    font-weight: 700;
    color: var(--c-black, #0E1116);
}
.bank-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-4, 1rem);
    align-items: start;
}
.bank-card {
    border: 1px solid var(--c-sky-light, #B8DDF7);
    border-radius: 12px;
    padding: var(--s-4, 1rem) var(--s-5, 1.25rem);
    background: #fff;
    box-shadow: 0 2px 10px rgb(14 17 22 / .05);
}
.bank-card__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--c-sky-light, #B8DDF7);
}
.bank-card__badge {
    display: inline-block;
    background: var(--c-sky, #2D9CDB);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 999px;
}
.bank-card__name {
    margin: 0;
    font-weight: 700;
    color: var(--c-sky-dark, #1976C4);
    font-size: 1.1rem;
}
.bank-card__list { margin: 0; display: grid; gap: .5rem; }
.bank-card__list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: .92rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed rgb(184 221 247 / .6);
}
.bank-card__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bank-card__list dt { color: var(--grey-500, #6b7280); margin: 0; white-space: nowrap; }
.bank-card__list dd { margin: 0; text-align: right; color: var(--c-black, #0E1116); word-break: break-word; font-weight: 600; }