/* ============================
   Porthia — principal
   ============================ */

body > *{
    color: var(--text-primary);
    font-weight: 400;
    margin-top: -24px;
}

html{
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root{
    /* Tipografía */
    --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Radio / layout */
    --radius-lg: 20px;
    --radius-xl: 28px;
    --container-max: 1200px;

    /* Colores base (LIGHT) */
    --bg-primary: #ffffff;
    --bg-secondary: #faf5f5;
    --surface: #ffffff;
    --text-primary: #111;
    --text-secondary: rgba(17,17,17,.65);
    --border-color: rgba(17,17,17,.10);

    /* Detalles “editorial” */
    --shadow-soft: 0 4px 20px rgba(0,0,0,.06);
    --shadow-med: 0 12px 40px rgba(0,0,0,.10);
    --shadow-strong: 0 30px 90px rgba(0,0,0,.18);

    /* Links */
    --link: rgba(17,17,17,.75);
    --link-hover: rgba(17,17,17,1);
}
.pub-badge {
    background-color: #fc7474;
    color: white;
    text-align: left;
    border-radius: 5px;
    padding:7px 7px 7px 7px;
}

a{ color: var(--link); }
a:hover{ color: var(--link-hover); }
img{ max-width: 100%; display:block; }
.container{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Tema DARK */
html[data-theme="dark"]{
    --bg-primary: #000;      /* fondo negro profundo */
    --bg-secondary: #1a1a1a;    /* secciones */
    --surface: #151515;
    --text-primary: rgba(255,255,255,.95);
    /*--text-ter: #555;*/
    --text-secondary: rgba(255,255,255,.65);
    --border-color: rgba(255,255,255,.10);
    --shadow-soft: 0 6px 24px rgba(0,0,0,.35);
    --shadow-med: 0 14px 48px rgba(0,0,0,.45);
    --shadow-strong: 0 40px 110px rgba(0,0,0,.55);
    --link: rgba(255,255,255,.78);
    --link-hover: rgba(255,255,255,.95);
}

/* Inputs consistentes */
input, button{
    font-family: inherit;
}

:root{
    --hero-bg: var(--bg-primary);
    --hero-text: var(--text-primary);
    --input-bg: #fff;
}
html[data-theme="dark"]{
    --input-bg: #333;
}
.hero-section{padding:0;overflow:hidden;background-color:var(--bg-secondary)}.hero-container{max-width:1200px;margin:0 auto;padding:0 2rem}.hero-content{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}.hero-title{font-size:3rem;line-height:1.1;font-weight:500;color:var(--hero-text);max-width:500px;letter-spacing:-0.03em;padding:3rem 0}.hero-text-wrapper{position:relative;z-index:2}.search-wrapper{margin-bottom:4rem}.search-label{font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--hero-text)}.search-bar{position:relative;max-width:450px;margin-bottom:1rem}.search-bar input{width:100%;padding:1rem 3rem 1rem 1.5rem;border-radius:100px;border:none;background-color:var(--input-bg);font-family:inherit;font-size:.95rem;color:var(--text-primary);outline:none;box-shadow:0 4px 6px -1px #0000001a}.search-icon{position:absolute;right:1.5rem;top:50%;cursor:pointer;transform:translateY(-50%);color:var(--text-secondary);font-size:42px;}.city-links{display:flex;gap:1rem;flex-wrap:wrap}.city-link-btn{font-size:.8rem;color:var(--text-secondary);text-decoration:underline;background:none;border:none;padding:0;cursor:pointer;transition:color .2s}.city-link-btn:hover{color:var(--hero-text)}.stats-grid{display:flex;gap:3rem;}.stat-item{display:flex;flex-direction:column}.stat-number{font-size:3.5rem;font-weight:400;line-height:1;color:var(--hero-text)}.stat-label{font-size:.6rem;font-weight:700;margin-top:.5rem;letter-spacing:.1em;color:var(--hero-text);max-width:100px;text-transform:uppercase}.image-slider{position:relative;height:700px;width:100%;overflow:hidden;z-index:1}.slider-container{position:relative;height:100%;width:100%}.slider-track{display:flex;height:100%;width:100%;transition:transform .6s cubic-bezier(.25,1,.5,1)}.slider-item{flex:0 0 100%;height:100%;position:relative}.slider-track.no-transition{transition: none !important;}.model-img{width:100%;height:100%;object-fit:cover}.slider-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 1rem;pointer-events:none;z-index:10}.nav-btn{pointer-events:auto;background:transparent;border:none;cursor:pointer;color:#fffc;font-size:3rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.nav-btn:hover{color:#fff;transform:scale(1.1)}.model-info-card{position:absolute;inset:0;text-decoration:none;background:linear-gradient(to bottom,#0000 60%,#000000b3);color:#fff!important;}.model-badge{/*position:absolute;*/display: inline-block; top:2rem;right:2rem;background-color:#000;color:#ffd700;padding:0.1rem 0.1rem;border-radius:8px;font-size:.6rem;font-weight:500;backdrop-filter:blur(4px); margin-bottom: 0; width: 70px; text-align: center; vertical-align: middle; border:1px solid rgba(255, 215, 0, .65);}.info-content{position:absolute;bottom:3rem;left:2rem}.model-name{font-size:1.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3)}.model-location{font-size:0.9rem;margin:.25rem 0 0;font-weight:400;opacity:.9; color: #ffffff!important;}@media(max-width:1024px){.hero-section{padding-bottom:0}.hero-container{padding:0}.hero-content{display:flex;flex-direction:column;gap:0;padding-top:0}.hero-text-wrapper{display:contents}.hero-title{order:1;padding:1.5rem 1.5rem .5rem;font-size:2rem;margin-bottom:0;text-align:left;width:100%}.image-slider{order:2;height:500px;width:100%;border-radius:0}.model-badge{top:1.5rem;right:1.5rem; vertical-align: bottom}.info-content{bottom:3rem;left:1.5rem}.nav-btn{font-size:2.5rem}.search-stats-container{order:3;width:100%;padding:2rem;background:var(--bg-secondary);border-top-left-radius:2rem;border-top-right-radius:2rem;margin-top:-2rem;position:relative;z-index:2}.search-wrapper{margin-bottom:2.5rem}.search-bar{max-width:100%}.stats-grid{justify-content:center;gap:3rem}.stat-number{font-size:2.5rem}}@media(max-width:480px){.image-slider{height:450px}.hero-title{font-size:1.55rem; margin-bottom: 1.2rem}.search-stats-container{padding-bottom:3rem}}.testimonials-section{padding:2rem 0;background-color:var(--bg-secondary);overflow:hidden}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.header-row{text-align:center;margin-bottom:2rem;position:relative}.section-title{font-size:1.8rem;font-weight:500;color:var(--text-primary);letter-spacing:-.02em}.section-subtitle{color:var(--text-primary);font-size:1rem;line-height:1.4;opacity:.8}.view-all-link{position:inherit;display:inline-block;right:0;top:.5rem;font-size:.85rem;color:var(--text-secondary);text-decoration:underline}.carousel-wrapper{position:relative}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;opacity:0;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.nav-btn:hover{background:var(--text-primary);color:var(--bg-primary)}.nav-btn.prev{left:-24px}.nav-btn.next{right:-24px}.carousel-wrapper:hover .nav-btn{opacity:1}.carousel-wrapper:hover .nav-btn.prev{left:-12px}.carousel-wrapper:hover .nav-btn.next{right:-12px}.carousel-container{overflow-x:auto;padding:1rem 0 2.5rem;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}.carousel-container:active{cursor:grabbing}.carousel-container::-webkit-scrollbar{display:none}.testimonials-track{display:flex;gap:1.5rem;width:max-content}.testimonial-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:1.8rem;width:320px;flex-shrink:0;scroll-snap-align:center;position:relative;/*box-shadow:0 4px 20px #000000*/;transition:transform .3s ease}[data-theme=dark] .testimonial-card{background:#1a1a1a;border-color:#333}.card-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #eee;padding-bottom:1.2rem;margin-bottom:1.2rem}[data-theme=dark] .card-header{border-color:#333}.model-name{font-size:1.5rem;font-weight:700;line-height:0.7!important;margin:0 0 .4rem;color:#ffffff}.category-tag{font-size:.85rem;color:#999}.star-rating{display:flex;align-items:center;gap:.4rem;color:#999;font-size:.9rem}.reviewer-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}.score-badge{background:#000;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}[data-theme=dark] .score-badge{background:#fff;color:#000}.reviewer-info{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--text-primary);flex:1;justify-content:flex-end}.reviewer-info i{font-size:1rem}.review-text{font-size:.9rem;color:#666;line-height:1.6;margin:0}[data-theme=dark] .review-text{color:#aaa}.card-link-overlay{position:absolute;inset:0;z-index:1}.indicators{display:flex;justify-content:center;gap:.5rem;margin-top:2rem;margin-bottom:6rem}.dot{width:6px;height:6px;border-radius:50%;background-color:#ccc;cursor:pointer;transition:all .3s ease}.dot.active{background-color:#666}.verification-footer{text-align:center;padding-top:2.5rem;border-top:0.1px solid #ffffff!important;max-width:800px;margin:0 auto}[data-theme=dark] .verification-footer{border-color:#222}.verify-header{margin-bottom:2.5rem}.verify-main-icon{width:48px;height:auto;color:var(--text-primary);flex-shrink:0}.verify-title{font-size:1.8rem;font-weight:500;color:var(--text-primary);margin:0;letter-spacing:-.02em}.verify-subtitle{font-size:1.1rem;color:var(--text-secondary); text-align: center}.verify-list{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem;max-width:400px;margin:0 auto;margin-bottom:2rem;text-align:left}.verify-item{display:flex;align-items:center;gap:1rem;font-size:1rem;color:var(--text-secondary);}.verify-item i{font-size:1.4rem;color:var(--text-primary)}@media(max-width:768px){.header-row{margin-bottom:2.5rem}.section-title{font-size:1.8rem}.verify-title{font-size:1.3rem}.section-subtitle br{display:none}.view-all-link{position:relative;display:inline-block;margin-top:1rem;top:0;text-align:right}.nav-btn{display:none}}.title-wrapper{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:.5rem}.faq-section{padding:2rem 0;background-color:var(--bg-primary)}.section-header{text-align:center;/*margin-bottom:3rem*/}.section-title{font-size:2.5rem;font-weight:700;color:var(--text-primary)}.faq-container{display:flex;flex-direction:column;border-top:1px solid var(--border-color)}.faq-item{border-bottom:1px solid var(--border-color);cursor:pointer}summary{list-style:none;padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-weight:600;color:var(--text-primary);font-size:1.1rem;transition:color .2s ease}summary::-webkit-details-marker{display:none}.faq-item:hover summary{color:var(--color-primary)}.question{line-height:1.4}.chevron{transition:transform .3s ease;font-size:1.2rem;flex-shrink:0}.faq-item[open] .chevron{transform:rotate(180deg)}.answer{padding-bottom:1.5rem;color:var(--text-secondary);line-height:1.6;font-size:1rem;animation:slideDown .3s ease-out}.view-all-container{text-align:center !important;margin-top:3rem; padding-bottom: 3rem}.view-all-link{color:var(--text-secondary);text-decoration:underline;font-size:.9rem;font-weight:500;transition:color .2s ease}.view-all-link:hover{color:var(--text-primary)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.section-title{font-size:2rem}summary{font-size:1rem;padding:1.25rem 0}.faq-section{padding:2rem 0}}.catalog-section{padding:2rem 0;background-color:var(--bg-primary);margin-top:-4rem;border-radius:2rem 2rem 0 0;position:relative;z-index:1}.section-header{text-align:center;margin-bottom:4rem}.section-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem; margin-top: 1rem}.tiers-wrapper{display:flex;flex-direction:column;gap:4rem}.tier-section{display:flex;flex-direction:column;gap:1.5rem}.model-badge{vertical-align: baseline}.tier-title{font-size:1.8rem;font-weight:700;color:var(--text-primary);padding-left:1rem;border-left:4px solid var(--text-primary);line-height:1.2}.dynamic-grid{display:grid;column-gap:1rem;row-gap:0.7rem; width:100%; padding-bottom: .8rem}.grid-porthia .model-card{width:100%;max-width:none;}.grid-porthia{grid-template-columns:repeat(3,1fr)}.grid-vip{grid-template-columns:repeat(4,1fr)}.grid-premium{grid-template-columns:repeat(5,1fr)}.grid-masajistas{grid-template-columns:repeat(6,1fr)}@media(max-width:1200px){.model-badge{vertical-align: baseline}.grid-vip{grid-template-columns:repeat(3,1fr)}.grid-premium{grid-template-columns:repeat(4,1fr)}.grid-masajistas{grid-template-columns:repeat(5,1fr)}}@media(max-width:992px){.grid-porthia{grid-template-columns:repeat(2,1fr)}.grid-vip{grid-template-columns:repeat(3,1fr)}.grid-premium{grid-template-columns:repeat(4,1fr)}.grid-masajistas{grid-template-columns:repeat(5,1fr)}}@media(max-width:768px){.grid-porthia{grid-template-columns:repeat(2,1fr)}.grid-vip{grid-template-columns:repeat(3,1fr)}.grid-premium{grid-template-columns:repeat(4,1fr)}.grid-masajistas{grid-template-columns:repeat(5,1fr)}}@media(max-width:480px){.grid-porthia{grid-template-columns: repeat(2,1fr)}.grid-vip{grid-template-columns:repeat(2,1fr)}.grid-premium{grid-template-columns:repeat(2,1fr)}.grid-masajistas{grid-template-columns:repeat(2,1fr)}}.model-card{margin-bottom: 1rem!important;position:relative;display:block;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;background:#f0f0f0;transform:translateZ(0);transition:all .3s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 15px #0000001a}.tall-card{aspect-ratio:9/13.5}.card-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.model-card:hover{box-shadow:0 12px 30px #0006}.model-card:hover .card-img{transform:scale(1.05)}.card-gradient-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000 0% 40%,#0009 75%,#000000e6);z-index:1;pointer-events:none}.card-badges{position:absolute;z-index:2;display:flex}.top-left{top:1rem;left:1rem}.top-right{top:1rem;right:1rem}.card-tag{font-size:.7rem;font-weight:600;padding:.35rem .8rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}.dark-tag{background:#0009;backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.15)}.fav-icon{font-size:1.4rem;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.card-info{text-align:left;position:absolute;bottom:0;left:0;width:100%;padding:0.8rem;z-index:2; color: #fff}.card-info h3{margin-top: -5px; margin-bottom:-2px; font-size:1.2rem;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.5);letter-spacing:-.01em}.loc-text{font-size:.9rem;opacity:.9;margin:0 0 0;font-weight:400;text-transform:capitalize;display: inline-flex;justify-content: center; align-items: center}.price-text{display:flow;font-weight:700;font-size:0.85rem;margin-top: 0;color: #ffffff!important;}@media(max-width:768px){.grid-porthia .model-card{max-width:100%}.card-info{padding:0.8rem}.card-info h3{font-size:1rem}}@media(max-width:1024px){.catalog-section{margin-top:0!important;/*padding-top:4rem;*/background:var(--bg-primary);border-radius:0}.section-header{margin-top:1rem}}
/* secciones con separación editorial */

.hero-section,
.testimonials-section,
.catalog-section,
.faq-section{
}

@media(max-width:5024px) {
    .model-badge {
    }
}

/* suaviza sombras / border en dark */
html[data-theme="dark"] .testimonial-card {
    /* box-shadow: 0 10px 36px rgba(0,0,0,.45);* descartado por ahora*/
}

/* Footer */

.footerGrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
}

.siteFooter {
    background-color: #000;
    border-top: 1px solid var(--border-color);
    padding: 3.5rem 0 2rem;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
    margin-top: 5rem;
}

html[data-theme="dark"] .siteFooter {
    background: #000;
}

.footerBrand {
    letter-spacing: .25em;
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-primary);
}

.footerTitle {
    font-weight: 700;
    margin-bottom: .75rem;
    color: #fff;
}

.footerText {
    margin: .95rem 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 420px;
}

.footerLink {
    display: block;
    color: #888;
    text-decoration: none;
    padding: .35rem 0;
}

.footerLink:hover {
    color: #888;
    text-decoration: underline;
}

.footerBottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #333333FF;
    display: flex;
    gap: .75rem;
    align-items: center;
    font-size: .9rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    color: #fff;
}

.footerBottomRRSS {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: .9rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.footerDot {
    opacity: .6;
}

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

    .footerBottom {
        flex-wrap: wrap;
    }
}
/* ============================
Modelos Destacadas
============================ */

.featuredSection {
    padding: 3.25rem 0 1.5rem;
    background: var(--bg-primary);
}

.featuredHeader {
    text-align: center;
    margin-bottom: 2.25rem;
}

.featuredTitle {
    margin: 0;
    font-size: clamp(2.5rem, 2.2vw, 2.6rem);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-weight: 700;
    padding: 6rem 0 0;
}

.featuredSubtitle {
    margin: .55rem 0 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.featuredKicker {
    align-items: center;
    gap: .75rem;
    margin: 2.25rem 0 1rem;
}

.featuredKickerBar {
    width: 3px;
    height: 22px;
    background: var(--text-primary);
    opacity: .9;
    border-radius: 999px;
}

.featuredKickerTitle {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-left: 1rem;
    border-left: 4px solid var(--text-primary);
    line-height: 1.2;
    margin-top: -30px;
}

.featuredGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.featuredCard {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    box-shadow: var(--shadow-med);
    transform: translateZ(0);
    transition: transform .35s ease, box-shadow .35s ease;
}

.featuredCard {
    background: var(--surface);
}

html[data-theme="dark"] .featuredCard {
    background: #0f0f0f;
}

.featuredCard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
}

.featuredMedia {
    position: relative;
    height: 520px;
}

.featuredImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.001);
    transition: transform .6s ease;
}

.featuredCard:hover .featuredImg {
    transform: scale(1.04);
}

.featuredOverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, .55) 75%,
    rgba(0, 0, 0, .80) 100%
    );
}

.featuredTop {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.featuredTag {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    color: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
}

.featuredFav {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .18);
}

.featuredBottom {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
}

.featuredName {
    color: rgba(255, 255, 255, .95);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.featuredMeta {
    margin-top: .35rem;
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
}

.featuredPrice {
    margin-top: .65rem;
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 10px;
    font-weight: 800;
    font-size: .85rem;
    color: rgba(255, 255, 255, .92);
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 900px) {
    .featuredGrid {
        grid-template-columns: 1fr;
    }

    .featuredMedia {
        height: 460px;
    }
}

.disclaimerf {
    margin-top: 1rem;
    font-weight: 800;
    opacity: .9;
    color: var(--footer-text);
    font-size: 14px;
}

/* ============================
Theme wave (circular reveal) -> Efecto para cambio de tema
============================ */

.theme-wave {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* debajo del search overlay (2147483647) */
    pointer-events: none;
    will-change: clip-path;
    clip-path: circle(0px at 50% 50%);
}

@media (prefers-reduced-motion: reduce) {
    .theme-wave {
        display: none !important;
    }
}

.search-icont {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    font-size: 32px
}

.shieldp {
    display: inline-flex;
    margin-top: 1rem;
    width: 120px;
    max-width: 120px;

}

.heart-img {
    position: absolute;
    width: 35px;
    top: 1rem !important;
    right: 1.2rem !important;
    text-decoration: none;

}

.heart-imgd {
    width: 35px;
}

.vid-alert {
    position: absolute !important;
    width: 35px;
    z-index: 10;
    top: 1.5rem;
    right: 0.2rem;
}

.heart-imgdg {
    position: absolute !important;
    width: 15px;
    z-index: 10 !important;
    top: 0.4rem;
    right: 0.34rem;

}

.star-imgdg {
    position: absolute !important;
    width: 21px;
    z-index: 10 !important;
    top: 1.5rem;
    right: 0.24rem;
}

.vid-alertdg {
    position: absolute !important;
    width: 22px;
    z-index: 10 !important;
    top: 2.65rem;
    right: 0.2rem;
}

.text-heart-imgdg {
    position: absolute !important;
    width: 30px;
    text-align: center;
    z-index: 10 !important;
    top: 1.47rem;
    right: -0.01rem;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 1px #555;
}

.text-star-imgdg {
    position: absolute !important;
    width: 30px;
    text-align: center;
    z-index: 10 !important;
    top: 2.70rem;
    right: -0.03rem;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 1px #555;
}

.text-vid-alertdg {
    position: absolute !important;
    width: 30px;
    text-align: center;
    z-index: 10 !important;
    top: 3.9rem;
    right: -0.03rem;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 1px #555;
}

.star-imgdgM {
    position: absolute !important;
    width: 40px;
    z-index: 10 !important;
    top: 0.2rem;
    right: 0.2rem;

}

.text-star-imgdgM {
    position: absolute !important;
    width: 30px;
    text-align: center;
    z-index: 10 !important;
    top: 0.93rem;
    right: 0.50rem;
    font-size: 12px;
    font-weight: 800;
    color: #555;

}

/* ============================
AgeGate (18+) — bloqueo total + cache 1h
============================ */

.agegate {
    position: fixed;
    inset: 0;
    z-index: 9999999999; /* por encima de todo */
    display: grid;
    place-items: center;
}

.agegate[hidden] {
    display: none;
}

.agegate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Dialog centrado */

.agegate__dialog {
    position: relative;
    width: min(520px, calc(100vw - 32px));
    z-index: 2;
}

/* Card “perfume luxury” */

.agegate__card {
    border-radius: 24px;
    padding: 28px 26px 22px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .55);
    text-align: center;
}

/* Si estás en dark, se ve más glass */

html[data-theme="dark"] .agegate__card {
    background: rgba(20, 20, 20, .62);
    border-color: rgba(255, 255, 255, .10);
}

.agegate__icon {
    color: var(--text-primary);
    opacity: .95;
    margin-bottom: 10px;
    display: inline-block;
}

.agegate__title {
    margin: 6px 0 8px;
    font-size: 28px;
    letter-spacing: -0.02em;
    font-weight: 900;
}

.agegate__text {
    margin: 0 auto 18px;
    max-width: 42ch;
    color: var(--text-secondary);
    line-height: 1.55;
}

.agegate__actions {
    display: grid;
    gap: 12px;
    margin: 18px 0 14px;
}

.agegate__btn {
    width: 100%;
    border-radius: 999px;
    padding: 14px 16px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}

.agegate__btn--primary {
    background: #fff;
    color: #111;
}

html[data-theme="dark"] .agegate__btn--primary {
    background: #fff;
    color: #111;
}

.agegate__btn--ghost {
    background: #000;
    color: #fff;
    border-color: #fff;
}

.agegate__legal {
    margin: 10px 0 0;
    font-size: 13px;
    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
}

.agegate__legal a {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Animación entrada premium */

.agegate.is-open .agegate__dialog {
    animation: agegatePop 520ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes agegatePop {
    from {
        transform: translateY(10px) scale(.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* BLOQUEO TOTAL */




/* Animación luxury al reordenar cards */

[data-rotator] [data-card] {
    will-change: transform, opacity;
}

[data-rotator].is-shuffling [data-card] {
    opacity: 0;
    transform: translateY(10px);
}

[data-rotator] [data-card].card-in {
    animation: cardIn 2000ms cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.image-slider {
    position: relative;
}

/* importante: el contenedor donde está el track suele tener overflow hidden */

.slider-container {
    position: relative;
}

.slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    z-index: 999;
    pointer-events: none;
}

.slider-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    position: relative;
}

.slider-btn:hover {
    transform: scale(1.06);
}


/* ============ SEARCH OVERLAY ============ */

.searchOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none !important;
    isolation: isolate;
}

.searchOverlay.is-open {
    display: block !important;
}

.searchOverlay__backdrop {
    position: absolute !important;
    inset: 0 !important;
    border: 0 !important;
    background: rgba(0, 0, 0, .55) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    cursor: pointer;
}

.searchOverlay__panel {
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 88px 16px 24px !important;
    gap: 22px !important;
    pointer-events: none; /* solo la barra y cards reciben click */
}

/* barra */

.searchOverlay__bar {
    pointer-events: auto;
    width: min(980px, calc(100% - 16px)) !important;
    height: 56px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 14px !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .45) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #111 !important;
}

html[data-theme="dark"] .searchOverlay__bar {
    background: rgba(20, 20, 20, .78) !important;
    color: rgba(255, 255, 255, .95) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
}

.searchOverlay__icon {
    opacity: .75;
    font-size: 18px;
}

.searchOverlay__input {
    flex: 1 !important;
    height: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 15px !important;
}

.searchOverlay__clear {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(0, 0, 0, .08) !important;
    color: inherit !important;
    cursor: pointer !important;
}

html[data-theme="dark"] .searchOverlay__clear {
    background: rgba(255, 255, 255, .10) !important;
}

/* resultados */

.searchOverlay__results {
    pointer-events: auto;
    width: min(1100px, calc(100% - 16px)) !important;
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding: 6px 2px 18px !important;
    scrollbar-width: none !important;
}

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

/* cards (no rompe .model-card) */

.searchOverlay__card {
    flex: 0 0 270px !important;
    height: 380px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    text-decoration: none !important;
    color: #fff !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35) !important;
}

.searchOverlay__card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.searchOverlay__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .85) 100%);
}

.searchOverlay__meta {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.searchOverlay__title {
    font-weight: 800;
    font-size: 16px;
}

.searchOverlay__sub {
    opacity: .85;
    font-size: 13px;
}

.search-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 0 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Animación del contenido (panel) */

.search-overlay-inner {
    width: min(1100px, 92%);
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: auto !important;
    text-align: end;
}

.search-overlay.is-open .search-overlay-inner {
    transform: translateY(0);
    opacity: 1;
}

.search-overlay-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 20, 20, .85);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 18px 22px;
    border-radius: 999px;
}

.search-overlay-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff !important;
    font-size: 14px;

}

.search-results-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

.search-clear-btn {
    font-size: 12px;
    color: #ffffff;
    background-color: #777;
    padding: 10px;
    border-radius: 20px;
    margin-right: 15px;
}

.search-overlay {
    pointer-events: auto !important;
}

.search-overlay-inner {
    pointer-events: auto !important;
    text-align: end;
}

/* Barra */

.search-overlay-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 20, 20, .65);
    border: 1px solid rgba(255, 255, 255, .10);
    padding: 10px 0 10px 15px;
    border-radius: 999px;
}

.search-overlay-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff !important;
    font-size: 14px;
}

/* Carousel horizontal */

.search-results-carousel {
    margin-top: 22px;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 0 0 0 18px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.search-results-carousel::-webkit-scrollbar {
    display: none;
}

.searchOverlay__card {
    flex: 0 0 280px;
    height: 390px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .40);
    scroll-snap-align: start;
}

.searchOverlay__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.searchOverlay__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .85) 100%);
}

.searchOverlay__meta {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.searchOverlay__title {
    font-weight: 800;
    font-size: 16px;
}

.searchOverlay__sub {
    opacity: .85;
    font-size: 13px;
}

.search-close-btn {
    padding: 10px;
    width: 37px;
    border-radius: 20px;
    background-color: #ffffff;
    margin-bottom: 10px;
}


.search-carousel::-webkit-scrollbar {
    display: none;
}

.search-carousel-card {
    flex: 0 0 150px;
    scroll-snap-align: start;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: #fff;
    background: var(--surface);
    transition: .35s ease;
}

html[data-theme="dark"] .search-carousel-card {
    background: #111;
}

.search-carousel-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.search-carousel-card:hover {
    transform: scale(1.04);
}

.search-carousel-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
    color: #fff;
}

.search-carousel-title {
    font-weight: 800;
    font-size: 16px;
}

.search-carousel-sub {
    font-size: 13px;
    opacity: .75;
}

.input-small::placeholder {
    font-size: 12px;
}

/* =========================
FIX: resultados bajo el input (sin mover la barra)
========================= */

/* layout en columna: barra arriba, resultados debajo */

.search-overlay-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    top: auto !important;
    gap: 12px !important;
    text-align: left !important;
}

/* La barra NO se achica ni se mueve */

.search-overlay-bar {
    flex: 0 0 auto !important;
}

/* El contenedor de resultados queda debajo y ocupa el resto */

[data-search-results] {
    flex: 1 1 auto !important;
    margin-top: 0 !important;
    max-height: calc(100vh - 170px); /* ajusta si se requiere más alto/bajo */
    overflow: hidden !important; /* el scroll lo maneja el carousel */
}

/* Quitar cualquier margen extra arriba del carousel */

.search-carousel {
    margin-top: 0 !important;
}

/* ===== THEME FIX: Search overlay ===== */

.search-overlay {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-theme="dark"] .search-overlay {
    background: rgba(0, 0, 0, .9);
}

html[data-theme="light"] .search-overlay {
    background: rgba(0, 0, 0, .9);
}

.search-overlay-bar {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(17, 17, 17, .10);
}

html[data-theme="dark"] .search-overlay-bar {
    background: rgba(20, 20, 20, .65);
    border: 1px solid rgba(255, 255, 255, .10);
}

.search-overlay-bar input {
    color: #111 !important;
}

html[data-theme="dark"] .search-overlay-bar input {
    color: #fff !important;
}

html, body {
    transition: background-color .25s ease, color .25s ease;

}

.search-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.search-carousel > div {
    flex: 0 0 175px;
    scroll-snap-align: start;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: #fff;
    background: var(--surface);
    transition: .35s ease;
    height: 254px;
}

.search-carousel .model-card {
    flex: 0 0 175px;
    scroll-snap-align: start;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: #fff;
    background: var(--surface);
    transition: .35s ease;
}

/* ===== Pages (internas) ===== */

.page-shell {
    padding: 0 0;
    background: var(--bg-primary);
}

.page-hero {
    padding: 2.2rem 0 1.6rem;
}

.page-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1.2rem;
    align-items: start;
}

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

.page-card {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 18px 18px;
}

.page-article .page-text {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 14px;
}

.page-h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
}

.page-muted {
    color: var(--text-secondary);
    margin: 0 0 14px;
    line-height: 1.6;
}

.page-actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Forms */

.form-luxe {
    display: grid;
    gap: 12px;
}

.form-row {
    display: grid;
    gap: 8px;
}

.form-label {
    font-size: 12px;
    font-weight: 800;
    opacity: .9;
}

.form-input {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-primary);
    padding: 12px 12px;
    outline: none;
}

html[data-theme="dark"] .form-input {
    background: rgba(20, 20, 20, .75);
    border-color: rgba(255, 255, 255, .10);
}

.btn-primary {
    border: 0;
    border-radius: 999px;
    padding: 12px 16px;
    font-weight: 900;
    background: #fff;
    color: #111;
    cursor: pointer;
}

html[data-theme="light"] .btn-primary {
    background: #111;
    color: #fff;
}

.page-legal-note {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
}

/* Lists */

.list-check {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.list-steps {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Login */

.login-wrap {
    display: flex;
    justify-content: center;
}

.login-card {
    width: min(520px, 100%);
}

.login-links {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.login-links a {
    text-decoration: underline;
}

/* ===== CONTACTO ===== */

.contactPage {
    min-height: calc(100vh - 120px);
    background: var(--bg-primary);
    padding: 10px 0 40px;
}

.contactWrap {
    max-width: 1200px;
}

.contactHero {
    text-align: center;
    margin: 40px 0 45px;
}

.contactTitle {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.contactSubtitle {
    margin: 14px auto 0;
    max-width: 820px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.contactCards {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 28px;
    margin: 0 auto;
    align-items: stretch;
}

.contactCard {
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 26px;
    padding: 20px 20px;
    text-align: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
    transition: transform 600ms var(--ease-luxe), box-shadow 600ms var(--ease-luxe);
}

html[data-theme="light"] .contactCard {
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(17, 17, 17, .10);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .12);
}

.contactCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 110px rgba(0, 0, 0, .55);
}

.contactIcon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .22);
}

html[data-theme="light"] .contactIcon {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(17, 17, 17, .10);
}

.contactIcon i {
    font-size: 28px;
}

.contactLabel {
    font-size: 14px;
    font-weight: 800;
    margin-top: 4px;
}

.contactValue {
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.contactFooter {
    margin: 54px auto 0;
    text-align: center;
    max-width: 980px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.contactFooter p {
    margin: 12px 0;
}

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

    .contactCard {
        padding: 34px 22px;
    }

    .contactFooter {
        font-size: 18px;
    }
}

/* Privacidad */

.legalWrap {
    background: var(--bg-primary);
    padding: 2.5rem 0 5rem;
}

.legalContainer {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.legalTitle {
    text-align: center;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: clamp(2.2rem, 3.2vw, 3.4rem);
    margin: 0 0 .5rem;
    color: var(--text-primary);
}

.legalUpdated {
    text-align: center;
    margin: 0 0 2.2rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    opacity: .9;
}

.legalDivider {
    border: 0;
    height: 1px;
    background: color-mix(in srgb, var(--border-color) 70%, transparent);
    margin: 2.5rem 0 3rem;
}

.legalSection {
    margin: 0 0 2.5rem;
}

.legalH2 {
    margin: 0 0 .9rem;
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.legalP {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 16px;
}

.legalList {
    margin: .85rem 0 0 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

.legalList li {
    margin: .5rem 0;
}

/* PUBLICAR — estilos locales (no afectan otras vistas) */

.publishPage {
    padding: 50px 0 130px;
    background: var(--bg-primary);
}

.publishWrap {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
}

.publishTitle {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.publishSub {
    margin: 0 0 42px;
    color: var(--text-secondary);
    font-size: 16px;
}

.steps {
    display: grid;
    gap: 30px;
    text-align: left;
    max-width: 760px;
    margin: 0 auto 56px;
}

.stepRow {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 18px;
    align-items: start;
}

.stepNum {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, .1);
    letter-spacing: -0.06em;
    margin-top: -6px;
}

html[data-theme="light"] .stepNum {
    color: rgba(17, 17, 17, .10);
}

.stepH {
    font-size: 1rem;
    font-weight: 900;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.stepP {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}

.ctaCard {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 26px;
    padding: 34px 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
    text-align: center;
}

html[data-theme="light"] .ctaCard {
    background: rgba(17, 17, 17, .04);
    border-color: rgba(17, 17, 17, .10);
}

.ctaTitle {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0 0 18px;
}

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

.ctaBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff !important;
}

.ctaBtn i {
    font-size: 14px;
}

.ctaBtn--wa {
    background: #22c55e;
}

.ctaBtn--tg {
    background: #0ea5e9;
}

.ctaBtn:hover {
    transform: translateY(-1px);
}


/* =========================
       LOGIN
========================= */

.auth-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 60px;
    background: var(--bg-primary);
}

.auth-card-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 1px;
    border-radius: 28px;
    background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--text-primary) 14%, transparent),
            color-mix(in srgb, var(--text-primary) 5%, transparent)
    );
}

.auth-card {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-radius: 24px;
    padding: 20px 32px 32px;
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
}

.auth-logo {
    text-align: center;
    margin-bottom: 15px;
    justify-items: center!important;
    display: grid;
}

.auth-logo img {
    width: 70px;
}

.auth-title {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 5px 0;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 16px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-form label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
}

.auth-form input {
    height: 52px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--text-primary);
    padding: 0 16px;
    outline: none;
}

.password-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.password-row a {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: underline;
}

/* se invierte según tema */

.btn-primary {
    margin-top: 10px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 800;
    font-size: 18px;
    cursor: pointer;
}

/* Línea de divición */

.divider {
    margin: 20px 0;
    text-align: center;
    position: relative;
    font-size: 13px;
    color: var(--text-secondary);
}

.divider span {
    padding: 0 10px;
    background: var(--bg-primary);
}

.divider::before,
.divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--border-color);
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.social-login {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px;
}

.btn-social {
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.gmark {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-right: 8px;
    font-weight: 900;
}

.register-text {
    margin-top: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.register-text a {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* Botón secundario / volver */

.btn-ghost {
    margin-top: 10px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth-help {
    margin-top: 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}


/* ---------- PÁGINA MODELOS  ---------- */

.modelos-page {
    padding-top: 70px;
    background-color: var(--bg-primary);
}

/* Carousel */

.modelos-carousel {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 20px;
    margin-top: 30px;

}

/* Grid columnas */

.grid-porthiaM {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-vipM {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid-premiumM {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.grid-masajistasM {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

/* MOBILE */
@media (max-width: 768px) {
    .grid-porthiaM,
    .grid-vipM,
    .grid-premiumM,
    .grid-masajistasM {
        grid-template-columns: repeat(2, 1fr);
    }
}

.modelos-title {
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 20px 0 0 0;
}

.modelos-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 16px;
    display: block;
}

/* ---- filtros modelos ---- */

.modelos-filters {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}

.filter-pill {
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(255, 255, 255, .04);
    color: var(--text-primary);
    padding: 8px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    cursor: pointer;
    transition: .2s ease;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

.filter-pill.is-active {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

@media (max-width: 768px){

    .filter-pill {
        padding: 9px 12px;
        font-size: 9px;
    }
}

.model-destacadas {
    display: flex;
    gap: 1rem;
    overflow-x: auto !important;
    padding: 10px 0 40px;
    scrollbar-width: none;
    justify-content: left;
}

.model-destacadas .model-card {
    scroll-snap-align: start;
    position: relative;
    color: rgb(255, 255, 255);
    flex: 0 0 175px;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    background: var(--surface);
    transition: 0.35s;
}

.verticalnew {
    writing-mode: vertical-rl;
    position: absolute !important;
    width: 30px;
    text-align: center;
    z-index: 10 !important;
    top: 1.47rem;
    right: -0.01rem;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 1px #555;
}


/* ======  Flechas Carousel ====== */

.carousel-shell {
    position: relative;
}

.featured-carousel-track {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 20px;
    transition: transform .4s ease;
    will-change: transform;
}

.featured-carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-arrow {
    position: absolute;
    top: 40%;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    vertical-align: middle;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    z-index: 10;
}

.carousel-arrow.is-left {
    left: 12px;
    z-index: 9 !important;
}

.carousel-arrow.is-right {
    right: 12px;
    z-index: 9 !important;
}

.carousel-arrow.is-disabled {
    pointer-events: none;
}

/* ============================
TESTIMONIOS (Carousel + Flechas)
============================ */

.testimonials-section {
    padding: 1rem 0 2rem 0;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.header-row {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 40px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.section-subtitle {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.4;
    opacity: .8;
}

.carousel-shell {
    position: relative;
}

/* Track horizontal */

.testimonials-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0 2.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    cursor: grab;
}

.testimonials-carousel-track:active {
    cursor: grabbing;
}

.testimonials-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Card */

.testimonial-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 1.8rem;
    width: 270px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transition: transform .3s ease;
    position: relative;
}

html[data-theme="dark"] .testimonial-card {
    background: #000;
    border-color: #333;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    height: 90px;
}

html[data-theme="dark"] .card-header {
    border-color: #333;
}

.tcard-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 .35rem;
    color: var(--text-primary);
}

.category-tag {
    font-size: .85rem;
    color: #999;
}

.star-rating {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: gold;
    font-size: .95rem;
    font-weight: 800;
}

.reviewer-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.score-badge {
    background: #000;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: .8rem;
    flex-shrink: 0;
}

html[data-theme="dark"] .score-badge {
    background: #fff;
    color: #000;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-primary);
    flex: 1;
    justify-content: left;
}

.review-text {
    font-size: .8rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

html[data-theme="dark"] .review-text {
    color: #aaa;
}

/* Flechas */

.carousel-arrow {
    position: absolute;
    top: 42%;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background-color: #000;
    color: #fff;
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    z-index: 9999;
}

.carousel-arrow.is-left {
    left: 12px;
    background-color: #000
}

.carousel-arrow.is-right {
    right: 12px;
    background-color: #000
}

.carousel-arrow.is-disabled {
    pointer-events: none;
}

/* Ocultar flecha para Mobile */
@media (max-width: 768px) {
    .carousel-arrow {
        display: none;
    }
}

/* Dots */

.indicators {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
    transition: all .25s ease;
}

.dot.active {
    background: #000;
}

/* ===== FIX FLECHAS CLICK ===== */

.carousel-shell {
    position: relative;
}

/* El track NO tapa los botones */

.testimonials-carousel-track {
    position: relative;
    z-index: 1;
}

/* Flechas siempre arriba */

.carousel-arrow {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

/* Si hay overlays/gradientes dentro de cards, NO captur clicks */

.testimonial-card::before,
.testimonial-card::after,
.card-link-overlay,
.card-gradient-overlay {
    pointer-events: none !important;
}


/* =========================
       CONTACTO
========================= */

.contactSplit {
    display: grid;
    gap: 26px;
    margin-top: 22px;
    justify-content: space-around;
    text-align: center;
}

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

/* Panel base */

.contactPanel {
    border-radius: 28px;
    padding: 22px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .12);
}

html[data-theme="dark"] .contactPanel {
    box-shadow: 0 28px 110px rgba(0, 0, 0, .55);
}

/* Títulos */

.contactPanelTitle {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.contactPanelSub {
    margin: 0 0 18px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 14px;
}

/* FORM */

.contactForm {
    display: block;
}

.formGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 700px) {
    .formGrid {
        grid-template-columns: 1fr;
    }
}

.formRow {
    display: grid;
    gap: 8px;
}

.formLabel {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: .02em;
    justify-self: flex-start;
}

.req {
    opacity: .85;
}

.formInput,
.formTextarea {
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-primary);
    padding: 12px 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

html[data-theme="dark"] .formInput,
html[data-theme="dark"] .formTextarea {
    background: rgba(20, 20, 20, .70);
    border-color: rgba(255, 255, 255, .10);
}

.formInput:focus,
.formTextarea:focus {
    border-color: color-mix(in srgb, var(--text-primary) 35%, var(--border-color));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.formTextarea {
    resize: vertical;
    min-height: 130px;
}

/* CTA */

.formActions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btnPrimary {
    height: 54px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

.btnPrimary:hover {
    transform: translateY(-1px);
    opacity: .95;
}

.btnPrimary:active {
    transform: translateY(0);
}

.formHint {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* WHATSAPP */

.waCard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px;
    border-radius: 22px;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

.waCard::before {
    content: "";
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at 20% 20%,
    color-mix(in srgb, var(--text-primary) 10%, transparent),
    transparent 55%);
    opacity: .9;
    pointer-events: none;
}

.waCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .18);
    border-color: color-mix(in srgb, var(--text-primary) 18%, var(--border-color));
}

html[data-theme="dark"] .waCard:hover {
    box-shadow: 0 34px 120px rgba(0, 0, 0, .65);
}

.waIcon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: rgba(0, 0, 0, .08);
    flex-shrink: 0;
}

html[data-theme="dark"] .waIcon {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}

.waIcon i {
    font-size: 24px;
}

.waMeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.waLabel {
    font-weight: 900;
    letter-spacing: -.01em;
}

.waValue {
    color: var(--text-secondary);
    font-size: 13px;
}

.waNote {
    color: var(--text-secondary);
    font-size: 12px;
    opacity: .85;
}

.waCta {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.waFoot {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.waFoot p {
    margin: 0;
}


/* =========================
        HOME
========================= */

.homeCarousel {
    position: relative;
    margin-top: 14px;
    --card-w: 210px; /* override por sección */
    --gap: 14px;
}

.homeCarousel__viewport {
    overflow: hidden;
    border-radius: 22px;
}

.homeCarousel__track {
    display: flex;
    gap: var(--gap);
    padding: 6px 2px 18px; /* aire inferior */
    will-change: scroll-position;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

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

/* cards dentro del carousel: mantiene la estética, pero fija ancho */

.homeCarousel__track .model-card {
    flex: 0 0 var(--card-w);
    width: var(--card-w);
    scroll-snap-align: start;
}

/* Flechas */

.homeCarousel__arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-size: 28px;
    line-height: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    z-index: 9999;
    pointer-events: auto;
}

html[data-theme="light"] .homeCarousel__arrow {
    border-color: rgba(17, 17, 17, .12);
    background: rgba(255, 255, 255, .88);
    color: #111;
}

.homeCarousel__arrow.is-left {
    left: 10px;
}

.homeCarousel__arrow.is-right {
    right: 10px;
}

.homeCarousel__arrow:hover {
    transform: translateY(-50%) scale(1.06);
}

.homeCarousel__arrow:active {
    transform: translateY(-50%) scale(1.00);
}

/* En mobile: esconder flechas y dejar swipe */
@media (max-width: 768px) {
    .homeCarousel__arrow {
        display: none;
    }

    .homeCarousel__track {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ===== HOME CAROUSEL FIX ===== */

.homeCarousel__track {
    display: flex;
    gap: var(--gap, 16px);
    align-items: stretch;
    will-change: transform;
}

.homeCarousel__track > * {
    flex: 0 0 var(--card-w, 260px);
    margin: 0 !important; /* <- mata márgenes heredados */
}

/* Por si .model-card trae margin-right desde otra parte */

.model-card {
    margin: 0 !important;
}

.homeCarousel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.homeCarousel__arrow {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
}

.homeCarousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

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

.homeCarousel__track {
    display: flex;
    align-items: stretch;
    gap: var(--gap, 16px);
    padding: 6px 2px;
}

.homeCarousel__track > * {
    flex: 0 0 var(--card-w, 260px);
    margin: 0 !important;
    position: relative;
}

.homeCarousel__viewport {
    overflow-x: auto;
}

/* default (desktop) */

.homeCarousel {
    --gap: 16px;
    --per-view: 3;
}

.homeCarousel__track {
    display: flex;
    gap: var(--gap);
}

/* cada item ocupa 1/N del ancho visible */

.homeCarousel__track > * {
    flex: 0 0 calc(
            (100% - (var(--gap) * (var(--per-view) - 1)))
            / var(--per-view)
    );
}

/* Breakpoints */
@media (max-width: 1024px) {
    .homeCarousel {
        --per-view: 2;
    }
}
@media (max-width: 640px) {
    .homeCarousel {
        --per-view: 1;
    }
}


.view-all-containerH {
    text-align: end !important;
    margin-top: -10px;
    padding-bottom: 1rem;
}

.view-all-linkH {
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 400;
    transition: color .2s ease;
}

.view-all-linkH:hover {
    color: var(--text-primary);
}

#porthia {
    scroll-margin-top: 260px; /* ajusta según altura header */

}

#vip {
    scroll-margin-top: 260px; /* ajusta según altura header */
}

#premium {
    scroll-margin-top: 260px; /* ajusta según altura header */
}

#masajistas {
    scroll-margin-top: 260px; /* ajusta según altura header */
}

/* ===== Anchor Reveal Effect ===== */

.anchor-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.anchor-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .9s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}


/* ===== SEARCH CHIPS (filtros activos) ===== */

.search-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 6px 0;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .search-chip {
    border: 1px solid rgba(17, 17, 17, .12);
    background: rgba(255, 255, 255, .80);
    color: #111;
}

.search-chip button {
    all: unset;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    line-height: 1;
    opacity: .85;
}

.search-chip button:hover {
    opacity: 1;
    transform: scale(1.06);
}

.search-chips {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    justify-content: flex-start;
    margin-top: 6px;
}

/* Contenedor del overlay (pantalla completa) */

[data-search-overlay].is-open,
.search-overlay.is-open,
.searchOverlay.is-open {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* Inner como columna */

[data-search-overlay] .search-overlay-inner,
.search-overlay .search-overlay-inner,
.searchOverlay .search-overlay-inner {
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-self: center;
}

/* Barra (input) “fija” arriba */

.search-overlay-bar,
.searchOverlay__bar,
[data-search-overlay-bar] {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Chips debajo del input */

.search-chips {
    flex: 0 0 auto;
}

/* Resultados: ocupan el resto y scrollean */

[data-search-results],
.search-results-grid,
.search-results-carousel,
.search-carousel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* ===== SEARCH OVERLAY (final) ===== */

.search-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 0 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.search-overlay-inner {
    width: min(1100px, 92%);
    height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto !important;
}

.search-overlay-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(20, 20, 20, .65);
    border: 1px solid rgba(255, 255, 255, .10);
    padding: 10px 15px;
    border-radius: 999px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.search-overlay-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff !important;
    font-size: 14px;
}

.search-chips {
    flex: 0 0 auto;
    z-index: 30;
}

[data-search-results] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Light/Dark */

html[data-theme="light"] .search-overlay {
    background: rgba(0, 0, 0, .9);
}

html[data-theme="dark"] .search-overlay {
    background: rgba(0, 0, 0, .9);
}

html[data-theme="light"] .search-overlay-bar {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(17, 17, 17, .10);
}

html[data-theme="light"] .search-overlay-bar input {
    color: #111 !important;
}

.city-link-btnN {
    font-size: .75rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--text-secondary);
    padding: 5px;
    border-radius: 15px;
    cursor: pointer;
    transition: color .2s
}


@media (max-width: 1024px) {
    .stats-grid {
        margin-bottom: 0;
    }
}
@media (min-width: 1024px) {
    .stats-grid {
        margin-bottom: 6rem;
    }
}

/* TERMS MODAL — encima del age gate */

.termsModal {
    position: fixed;
    inset: 0;
    z-index: 999999999999 !important; /* más alto que la modal de edad */
    display: grid;
    place-items: center;
}

.termsModal[hidden] {
    display: none !important;
}

.termsModal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
}


.termsModal__panel {
    position: relative;
    width: min(860px, calc(100vw - 32px));
    max-height: min(78vh, 780px);
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    background: color-mix(in srgb, var(--pf-surface, #fff) 92%, #fff);
    color: var(--pf-text, #111);
}

html[data-theme="dark"] .termsModal__panel {
    background: rgba(15, 16, 18, .92);
    border-color: rgba(255, 255, 255, .12);
    color: #f2f3f5;
}

.termsModal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .15);
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

html[data-theme="dark"] .termsModal__close {
    background: rgba(255, 255, 255, .10);
}

.termsModal__body {
    padding: 60px 22px 18px;
    overflow: auto;
    max-height: min(78vh, 780px);
}

.termsModal__loading {
    opacity: .75;
    font-weight: 800;
}

/* Bloquear scroll cuando hay modales */


.termsModal__panel {
    animation: modalIn .25s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.2);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.termsModal__backdrop {
    backdrop-filter: blur(8px);
}


/* sección oculta por defecto */

[data-section="nuevas"] {
    display: none;
}

/* sección visible */

[data-section="nuevas"].is-active {
    display: block;
    animation: nuevasContainer .5s ease forwards;
}

@keyframes nuevasContainer {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* cards */

[data-section="nuevas"] .model-card {
    opacity: 0;
    transform: translateY(20px) scale(.95);
}

[data-section="nuevas"].is-active .model-card {
    animation: nuevasCard .7s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--stagger, 0ms);
}

@keyframes nuevasCard {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.95);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.promo-cards {
    font-size: 11px;
    text-decoration: line-through;
    color: red;
}

/* =========================
LOADER PORT HIA
========================= */

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9999999999999999!important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .045) 0%, rgba(0, 0, 0, .0) 40%),
    rgba(8, 8, 10, .96);
    backdrop-filter: blur(6px);
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__inner {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-loader__logo {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .12)) drop-shadow(0 0 18px rgba(255, 255, 255, .06));
    animation: loaderBreath 2.2s ease-in-out infinite;
}

.site-loader__glow {
    position: absolute;
    inset: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, 0) 72%);
    filter: blur(8px);
    animation: loaderGlow 2.2s ease-in-out infinite;
}

/* aro sutil */

.site-loader__inner::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    opacity: .7;
    animation: loaderRing 2.8s linear infinite;
}

@keyframes loaderBreath {
    0%, 100% {
        transform: scale(1);
        opacity: .92;
    }
    50% {
        transform: scale(1.045);
        opacity: 1;
    }
}

@keyframes loaderGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .45;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: .75;
    }
}

@keyframes loaderRing {
    0% {
        transform: rotate(0deg);
        opacity: .28;
    }
    50% {
        opacity: .58;
    }
    100% {
        transform: rotate(360deg);
        opacity: .28;
    }
}

/* versión light */

html[data-theme="light"] .site-loader {
    background: radial-gradient(circle at center, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, 0) 40%),
    rgba(245, 245, 247, .96);
}

html[data-theme="light"] .site-loader__logo {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .10)) drop-shadow(0 0 18px rgba(0, 0, 0, .05));
}

html[data-theme="light"] .site-loader__glow {
    background: radial-gradient(circle, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .03) 35%, rgba(0, 0, 0, 0) 72%);
}

html[data-theme="light"] .site-loader__inner::after {
    border-color: rgba(0, 0, 0, .08);
}

/* mobile */
@media (max-width: 640px) {
    .site-loader__inner {
        width: 80px;
        height: 80px;
    }

    .site-loader__logo {
        width: 80px;
        height: 80px;
    }
}


/* =========================================
   FIX PART #1 — Chrome mobile / menú / search
   Se agrega al final para sobreescribir sin
   tocar el resto del proyecto
========================================= */

:root{
    --ui-topbar-h: 69px;
}

/* =========================================
   Scroll lock real (Chrome + Safari mobile)
========================================= */


/* ---------- MENÚ ---------- */
.menuPanel{
    top: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: calc(38px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
}

/* fallback por si el browser no soporta dvh */
@supports not (height: 100dvh){
    .menuPanel{
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* ancho actual, pero estable */
.menuPanel{
    width: min(420px, 100vw) !important;
}

/* backdrop por encima del sitio, debajo del panel */
.backdrop{
    z-index: 90 !important;
}

.menuPanel{
    z-index: 100 !important;
}

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay{
    inset: 0 !important;
    min-height: 100dvh !important;
    padding-top: calc(var(--ui-topbar-h) + 14px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
}

@supports not (min-height: 100dvh){
    .search-overlay{
        min-height: 100vh !important;
    }
}

.search-overlay-inner{
    width: min(1100px, 92%) !important;
    height: calc(100dvh - var(--ui-topbar-h) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

@supports not (height: 100dvh){
    .search-overlay-inner{
        height: calc(100vh - var(--ui-topbar-h) - 32px) !important;
    }
}

/* botón cerrar consistente */
.search-close-btn{
    margin-right: 0 !important;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* barra sticky dentro del overlay */
.search-overlay-bar{
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}

/* resultados SOLO horizontales */
.search-results-carousel,
.search-carousel{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* en mobile ajusta ancho/alto sin romper cards */
@media (max-width: 768px){

    .search-overlay{
        padding-top: calc(var(--ui-topbar-h) + 12px + env(safe-area-inset-top)) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .search-overlay-inner{
        width: calc(100vw - 24px) !important;
        height: calc(100dvh - var(--ui-topbar-h) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }

    .search-overlay-bar{
        padding: 12px 14px !important;
    }

    .search-close-btn{
        width: 48px;
        height: 48px;
    }
}

/* ===== HERO TOUCH SWIPE MOBILE ===== */
.image-slider{
    position: relative;
    overflow: hidden;
}

.slider-container{
    position: relative;
    overflow: hidden;
}

.slider-track{
    display: flex;
    will-change: transform;
    touch-action: pan-y;
}

.slider-item{
    flex: 0 0 100%;
}

/* solo mobile/tablet */
@media (max-width: 1024px){
    .image-slider,
    .slider-container,
    .slider-track,
    .slider-item,
    .model-info-card{
        -webkit-user-select: none;
        user-select: none;
    }

    .slider-track.is-dragging{
        transition: none !important;
        cursor: grabbing;
    }
}


.pf-topReveal__Cards_Disp{
    width: 6px;
    height: 6px;
    min-width: 6px;
    margin-left: 4px;
    border-radius: 999px;
    display: inline-block;
    background: #22c55e;
    box-shadow:
            0 0 0 3px rgba(34,197,94,.16),
            0 0 16px rgba(34,197,94,.30);
    position: relative;
    top: -1px;
    vertical-align: middle;
}

.pf-topReveal__Cards_NoDisp{
    width: 6px;
    height: 6px;
    min-width: 6px;
    margin-left: 4px;
    border-radius: 999px;
    display: inline-block;

    background: #ef4444; /* rojo premium (tailwind red-500) */

    box-shadow:
            0 0 0 3px rgba(239,68,68,.18),
            0 0 14px rgba(239,68,68,.35);

    position: relative;
    top: -1px;
    vertical-align: middle;
}


/* =========================================
   SCROLL LOCK GLOBAL (LIMPIO)
========================================= */

html.is-locked,
body.is-locked{
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.is-locked{
    position: relative !important;
    width: 100% !important;
}

/* =========================================
   SEARCH OVERLAY — CONTROL SCROLL
========================================= */

.search-overlay,
[data-search-overlay],
.searchOverlay{
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
}

.search-overlay-inner{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}