/*
* Ficha individual de propiedad
* Estilos base migrados desde index-galeria-detail.php.
*/


:root{
    --ink:#0a0e14;
    --muted:#4a5560;
    --soft:#8892a0;
    --line:#e6e9ee;
    --accent:#03779f;
    --accent2:#1ba8d4;
    --accent3:#5fd0ef;
    --deep:#025470;
    --ok:#0f9d6b;
    --gold:#f0b429;
    --shadow:0 30px 70px -30px rgba(3,64,90,.3);
    --max:1240px;
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0}
html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden}
body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:#f7fafb;
    line-height:1.5;
    -webkit-font-smoothing:antialiased}
a{
    text-decoration:none;
    color:inherit}
.wrap{
    width:min(var(--max),calc(100% - 40px));
    max-width:100%;
    margin:0 auto}
.fa-duotone{
    --fa-primary-color:var(--accent);
    --fa-secondary-color:var(--accent3);
    --fa-secondary-opacity:.4}
header{
    position:sticky;
    top:0;
    z-index:50;
    padding:14px 0;
    background:linear-gradient(to bottom,rgba(247,250,251,.96),rgba(247,250,251,.72),transparent)}
.pill{
    display:flex;
    align-items:center;
    gap:16px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    border:1px solid var(--line);
    border-radius:50px;
    padding:8px 8px 8px 20px;
    box-shadow:0 12px 34px -18px rgba(3,64,90,.4)}
.pill img{
    height:56px}
.pill a{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    padding:10px 16px;
    border-radius:999px;
    font-size:.86rem;
    font-weight:800}
.hwrap{
    display:flex;
    justify-content:center}
.pill{
    gap:20px;
    padding:0 10px 0 30px;
    max-width:100%}
.pill img.logo{
    height:60px;
    display:block}
.pill .logolink{
    display:flex;
    align-items:center;
    cursor:pointer}
.pill nav{
    display:flex;
    gap:20px;
    font-size:.9rem;
    font-weight:600;
    color:var(--muted)}
.pill nav a{
    background:none;
    color:var(--muted);
    padding:0;
    border-radius:0;
    font-size:.9rem;
    font-weight:600}
.pill nav a:hover{
    color:var(--accent)}
.pill nav a.on{
    color:var(--ink);
    font-weight:700}
.pill .pay,.pill .portal,.pill .topcta{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:50px;
    font-size:.86rem;
    font-weight:700;
    padding:9px 16px;
    transition:.2s}
.pill .pay{
    background:#fff;
    border:1.5px solid var(--accent);
    color:var(--accent)}
.pill .pay:hover{
    background:var(--accent);
    color:#fff}
.pill .portal{
    background:#fff;
    border:1.5px solid var(--line);
    color:var(--ink)}
.pill .portal:hover{
    border-color:var(--accent3);
    color:var(--accent)}
.pill .topcta{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    padding:9px 18px}
.burger{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    flex-shrink:0}
.burger span{
    width:18px;
    height:2px;
    background:var(--ink);
    border-radius:2px}
.mpanel{
    display:none;
    position:fixed;
    inset:74px 16px auto 16px;
    z-index:60;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 30px 70px -24px rgba(3,64,90,.5);
    padding:14px 18px 18px}
.mpanel.open{
    display:block}
.mpanel a{
    display:block;
    padding:13px 4px;
    font-size:1.05rem;
    font-weight:600;
    border-bottom:1px solid var(--line)}
.mpanel .mcta{
    margin-top:14px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    text-align:center;
    padding:14px;
    border-radius:12px;
    font-weight:700;
    border-bottom:none}
.mpanel .mportal{
    color:var(--accent)}
.pill .logolink{
    background:none;
    color:inherit;
    padding:0;
    border-radius:0}
.hero{
    padding:22px 0 14px}
.crumb{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:12px}
.crumb .back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#f2fafc;
    border:1px solid #d6eef5;
    color:var(--accent);
    padding:8px 14px;
    border-radius:999px;
    font-weight:800;
    font-size:.88rem}
.crumb .code{
    font-family:ui-monospace,monospace;
    background:#eef1f3;
    color:var(--soft);
    padding:5px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700}
.main{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:22px;
    align-items:start;
    padding-bottom:28px}
.main>div,.main>aside{
    min-width:0}
@media(max-width:920px){
    .main{
        grid-template-columns:1fr}
}
.gal{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow)}
.big{
    position:relative;
    height:440px;
    cursor:pointer}
.big img{
    width:100%;
    height:100%;
    object-fit:cover}
.tags{
    position:absolute;
    left:14px;
    top:14px;
    display:flex;
    gap:8px;
    flex-wrap:wrap}
.tag{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(6px);
    font-size:.7rem;
    font-weight:800;
    padding:6px 12px;
    border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tag.op{
    background:rgba(3,119,159,.92);
    color:#fff}
.tag.gold{
    background:linear-gradient(135deg,#f0b429,#e0a800);
    color:#3a2c00}
.tag.featured{
    background:linear-gradient(135deg,#ffe9a6,#f3bd3f);
    color:#624000;
    display:inline-flex;
    align-items:center;
    gap:5px}
.tag.featured i{color:#a86b00}
.tag.promo-pill{
    background:linear-gradient(135deg,#fff2c7,#f6c453);
    color:#704b00;
    display:inline-flex;
    align-items:center;
    gap:5px}
.tag.promo-pill i{color:#c47a00}
.count{
    position:absolute;
    right:14px;
    bottom:14px;
    background:rgba(10,14,20,.78);
    color:#fff;
    padding:7px 13px;
    border-radius:999px;
    font-size:.76rem;
    font-weight:700}
.thumbs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:10px}
.thumbs img{
    width:100%;
    height:84px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    border:2.5px solid transparent;
    opacity:.75;
    transition:.2s}
.thumbs img.on,.thumbs img:hover{
    opacity:1;
    border-color:var(--accent)}
.thumbs .tmore{
    position:relative;
    height:84px;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer}
.thumbs .tmore img{
    height:100%;
    filter:brightness(.4);
    opacity:1;
    border:none;
    border-radius:0}
.thumbs .tmore span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    font-size:.92rem;
    text-align:center;
    line-height:1.2}
.lb{
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(4,20,28,.94);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:26px}
.lb.open{
    display:flex}
.lb .lbimg{
    max-width:92vw;
    max-height:70vh;
    border-radius:14px;
    box-shadow:0 40px 100px rgba(0,0,0,.6);
    object-fit:contain}
.lb button{
    position:absolute;
    border:0;
    color:#fff;
    background:rgba(255,255,255,.12);
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:1.6rem;
    cursor:pointer;
    z-index:2}
.lb .x{
    right:18px;
    top:18px}
.lb .pv{
    left:16px;
    top:50%;
    transform:translateY(-50%)}
.lb .nx{
    right:16px;
    top:50%;
    transform:translateY(-50%)}
.lb .lbc{
    color:#d7eef5;
    font-size:.86rem;
    font-weight:700;
    margin-top:12px}
.lb .strip{
    display:flex;
    gap:8px;
    margin-top:14px;
    max-width:92vw;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
    scrollbar-width:none;
    -ms-overflow-style:none}
.lb .strip::-webkit-scrollbar{
    display:none;
    width:0;
    height:0}
.lb .strip img{
    width:76px;
    height:54px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    opacity:.5;
    border:2px solid transparent;
    flex-shrink:0;
    transition:.2s}
.lb .strip img.on{
    opacity:1;
    border-color:var(--accent3)}
.side{
    position:sticky;
    top:88px;
    display:flex;
    flex-direction:column;
    gap:16px}
@media(max-width:920px){
    .side{
        position:static}
}
.scard{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px 24px;
    box-shadow:var(--shadow);
    min-width:0;
    overflow:hidden}
.scard h1,.scard h2{
    font-size:1.45rem;
    font-weight:900;
    letter-spacing:-.02em;
    line-height:1.12;
    overflow-wrap:anywhere}
.scard h2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loc{
    color:var(--soft);
    margin-top:6px;
    display:flex;
    align-items:flex-start;
    gap:6px;
    font-size:.92rem;
    min-width:0;
    overflow-wrap:anywhere}
.pricebar{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    min-width:0}
.pricebar .v{
    font-family:ui-monospace,monospace;
    font-size:1.85rem;
    font-weight:800;
    color:var(--accent);
    max-width:100%;
    overflow-wrap:anywhere}
.pricebar .v small{
    font-family:'Inter';
    font-size:.85rem;
    color:var(--soft);
    font-weight:600}
.price-promotion{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:8px;
    padding:9px 11px;
    border:1px solid #f4d39c;
    border-radius:10px;
    background:#fff7e8;
    color:#8a4b16;
    font-size:.78rem;
    line-height:1.35}
.price-promotion i{
    color:#e49a22;
    flex:0 0 auto}
.requirements-intro{
    margin-top:-4px;
    color:var(--soft);
    font-size:.88rem}
.requirements-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px}
.requirement-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px;
    border:1px solid #dcebf0;
    border-radius:13px;
    background:linear-gradient(135deg,#f8fcfd,#eef8fb);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.requirement-item:hover{
    transform:translateY(-2px);
    border-color:#8bd3e4;
    box-shadow:0 10px 22px -18px rgba(3,64,90,.65)}
.requirement-icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    background:#e5f4f8;
    color:var(--accent);
    font-size:18px;
    --fa-primary-color:#03779f;
    --fa-secondary-color:#5fd0ef;
    --fa-secondary-opacity:.55}
.requirement-item strong{
    display:block;
    color:var(--deep);
    font-size:.86rem}
.requirement-item p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:.82rem;
    line-height:1.42;
    overflow-wrap:normal;
    word-break:normal}
.requirement-item > div,
.payment-item > div { min-width:0; flex:1; }
.payment-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:14px}
.payment-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px;
    border:1px solid #cdebe0;
    border-radius:13px;
    background:linear-gradient(135deg,#f5fcf8,#edf9f4);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.payment-item:hover{
    transform:translateY(-2px);
    border-color:#8bd9b7;
    box-shadow:0 10px 22px -18px rgba(15,157,107,.7)}
.payment-icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    background:#e1f6eb;
    color:#0f9d6b;
    font-size:18px;
    --fa-primary-color:#0f9d6b;
    --fa-secondary-color:#63d8a1;
    --fa-secondary-opacity:.55}
.payment-item strong{
    display:block;
    color:var(--deep);
    font-size:.86rem}
.payment-item p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:.78rem;
    line-height:1.4}
.payment-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:14px;
    color:var(--accent);
    font-size:.84rem;
    font-weight:800}
.sspecs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
    margin-top:16px}
.msp{
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 6px 13px;
    text-align:center;
    background:#fafdfe}
.sspecs .msp .spec-icon{
    font-size:38px;
    line-height:1;
    display:inline-block;
    --fa-secondary-opacity:.35}
.spec-icon.ic-teal{
    --fa-primary-color:var(--accent);
    --fa-secondary-color:#0ea5e9}
.spec-icon.ic-gold{
    --fa-primary-color:#d97706;
    --fa-secondary-color:#fbbf24}
.spec-icon.ic-green{
    --fa-primary-color:#059669;
    --fa-secondary-color:#34d399}
.spec-icon.ic-blue{
    --fa-primary-color:#1d4ed8;
    --fa-secondary-color:#60a5fa}
.msp b{
    display:block;
    font-size:1.25rem;
    margin-top:9px;
    letter-spacing:-.02em}
.msp span{
    font-size:.7rem;
    color:var(--soft);
    font-weight:700}
.curswitch{
    display:flex;
    gap:3px;
    background:#eef1f3;
    border-radius:10px;
    padding:3px}
.curswitch button{
    border:none;
    background:transparent;
    padding:7px 13px;
    border-radius:7px;
    cursor:pointer;
    font-size:.8rem;
    font-weight:700;
    color:var(--muted);
    transition:.15s;
    font-family:inherit}
.curswitch button.on{
    background:#fff;
    color:var(--accent);
    box-shadow:0 4px 12px -6px rgba(3,64,90,.4)}
.cta{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:16px}
.cta a{
    text-align:center;
    padding:13px 18px;
    border-radius:12px;
    font-size:.94rem;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px}
.cta .visit{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff}
.cta .wsp{
    border:1.5px solid #25d366;
    color:#128c4b;
    background:#f2fcf6}
.urgency{
    display:flex;
    flex-direction:column;
    gap:7px;
    background:linear-gradient(135deg,#fff4e6,#ffe9d1);
    border:1px solid #ffd8a8;
    border-radius:14px;
    padding:14px 16px;
    margin-top:14px}
.urgency .u-hot{
    display:flex;
    align-items:center;
    gap:10px;
    color:#9a3412;
    font-size:.98rem;
    font-weight:900;
    letter-spacing:-.01em}
.urgency .u-hot .pulse{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#e8590c;
    box-shadow:0 0 0 0 rgba(232,89,12,.55);
    animation:pulse 1.8s infinite;
    flex-shrink:0}
.urgency .u-rule{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:#7c2d12;
    font-size:.86rem;
    font-weight:600;
    line-height:1.45}
.urgency .u-rule i{
    color:#e8590c;
    margin-top:2px;
    --fa-secondary-opacity:.4}
@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(232,89,12,.55)}
    70%{
        box-shadow:0 0 0 9px rgba(232,89,12,0)}
    100%{
        box-shadow:0 0 0 0 rgba(232,89,12,0)}
}
.block{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px 26px;
    margin-top:18px;
    box-shadow:var(--shadow)}
.block h2,.block h3{
    font-size:1.15rem;
    font-weight:900;
    letter-spacing:-.02em;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px}
.block h2 .ic,.block h3 .ic{
    width:34px;
    height:34px;
    border-radius:10px;
    background:#f2fafc;
    display:grid;
    place-items:center;
    font-size:.9rem}
.block p,.description-body{
    color:var(--muted);
    font-size:.98rem}
.description-body p{
    margin:0 0 14px}
.description-body p:last-child{
    margin-bottom:0}
.description-body br{
    line-height:1.7}
.description-body ul,.description-body ol{
    margin:0 0 14px 22px}
.description-body li{
    margin:4px 0}
.description-body strong,.description-body b{
    color:var(--ink);
    font-weight:800}
.description-body a{
    color:var(--accent);
    text-decoration:underline}
.checks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px}
.checks .ck{
    display:flex;
    gap:9px;
    align-items:flex-start;
    font-size:.92rem;
    color:var(--muted);
    font-weight:600}
.checks .ck em{
    font-style:normal;
    color:var(--ok);
    font-weight:900}
.feats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px}
.feat{
    display:flex;
    align-items:center;
    gap:13px;
    background:#fafdfe;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px 14px;
    transition:.2s}
.feat:hover{
    border-color:var(--accent3);
    box-shadow:0 12px 28px -20px rgba(3,64,90,.55);
    transform:translateY(-2px);
    background:#fff}
.feat .fi{
    width:44px;
    height:44px;
    border-radius:12px;
    display:grid;
    place-items:center;
    flex-shrink:0}
.feat .fi i{
    font-size:21px;
    --fa-secondary-opacity:.4}
.feat .fi.c-teal{
    background:#e7f3f8}
.feat .fi.c-teal i{
    --fa-primary-color:#03779f;
    --fa-secondary-color:#5fd0ef}
.feat .fi.c-green{
    background:#e6f7ef}
.feat .fi.c-green i{
    --fa-primary-color:#059669;
    --fa-secondary-color:#34d399}
.feat .fi.c-gold{
    background:#fdf3e2}
.feat .fi.c-gold i{
    --fa-primary-color:#d97706;
    --fa-secondary-color:#fbbf24}
.feat .fi.c-blue{
    background:#e8effc}
.feat .fi.c-blue i{
    --fa-primary-color:#1d4ed8;
    --fa-secondary-color:#60a5fa}
.feat span{
    font-size:.9rem;
    font-weight:600;
    color:var(--muted);
    line-height:1.32}
.gc-callout{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:linear-gradient(135deg,#eef7fb,#e7f3f8);
    border:1px solid #cfe8f2;
    border-radius:14px;
    padding:15px 16px;
    margin-bottom:16px}
.gc-callout .gc-ic{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#fff;
    display:grid;
    place-items:center;
    font-size:22px;
    flex-shrink:0;
    box-shadow:0 6px 16px -10px rgba(3,64,90,.5)}
.gc-callout .gc-b{
    flex:1;
    min-width:0}
.gc-callout .gc-lab{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--soft);
    font-weight:800}
.gc-callout .gc-val{
    font-family:ui-monospace,monospace;
    font-weight:800;
    font-size:1.3rem;
    color:var(--deep);
    margin-top:1px}
.gc-callout .gc-val span{
    font-family:'Inter';
    font-size:.72rem;
    color:var(--soft);
    font-weight:600}
.gc-callout .gc-note{
    font-size:.76rem;
    color:var(--muted);
    margin-top:5px;
    line-height:1.45}
.elabel{
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--soft);
    font-weight:800;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:6px}
.ecard{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center}
.ecard .avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:2.2rem;
    flex-shrink:0;
    box-shadow:0 18px 40px -14px rgba(3,64,90,.55);
    overflow:hidden;
    border:4px solid #fff;
    outline:3px solid var(--accent3)}
.ecard .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%}
.ecard .gbadge{
    margin-top:-16px;
    z-index:2;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    font-size:.7rem;
    font-weight:800;
    padding:6px 14px;
    border-radius:999px;
    box-shadow:0 8px 18px -8px rgba(3,64,90,.6);
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-transform:uppercase;
    letter-spacing:.4px}
.ecard .en{
    font-weight:900;
    font-size:1.3rem;
    letter-spacing:-.02em;
    margin-top:12px}
.ecard .ec{
    color:var(--soft);
    font-size:.86rem;
    font-weight:600;
    margin-top:2px}
.ecard .elinks{
    margin-top:12px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center}
.ecard .elinks a{
    font-size:.8rem;
    font-weight:800;
    color:var(--accent);
    background:#f2fafc;
    border:1px solid #d6eef5;
    padding:8px 14px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:7px}
.etrust{
    margin-top:16px;
    background:#f2fafc;
    border:1px solid #d6eef5;
    border-radius:12px;
    padding:12px 15px;
    display:flex;
    gap:9px;
    align-items:flex-start;
    text-align:left}
.etrust i{
    color:var(--accent);
    margin-top:2px}
.etrust p{
    font-size:.84rem;
    color:var(--deep);
    font-weight:600;
    line-height:1.45}
.share{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:16px;
    align-items:center;
    min-width:0}
.share .sh-b{
    min-width:0}
.share .qrbox{
    width:180px;
    height:180px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:7px;
    background:#fff;
    display:grid;
    place-items:center}
.share .qrbox img,.share .qrbox canvas,.share .qrbox svg{
    width:150px!important;
    height:150px!important}
.share .sh-b p{
    font-size:.8rem;
    color:var(--soft);
    margin-bottom:10px}
.share .sh-b .btns{
    display:flex;
    flex-direction:column;
    gap:7px}
.share button,
.share .action-link{
    border:1px solid var(--line);
    background:#fafcfd;
    border-radius:10px;
    padding:9px 13px;
    cursor:pointer;
    font-size:.82rem;
    font-weight:700;
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.2s;
    font-family:inherit}
.share button:hover,
.share .action-link:hover{
    border-color:var(--accent3);
    color:var(--accent)}
.vthumb{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:#0a2530;
    aspect-ratio:16/9;
    border:1px solid var(--line)}
.vthumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.82;
    transition:.3s}
.vthumb:hover img{
    opacity:1;
    transform:scale(1.05)}
.vthumb .play{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center}
.vthumb .play i{
    width:56px;
    height:56px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:var(--accent);
    display:grid;
    place-items:center;
    font-size:1.25rem;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.5)}
.vthumb .vt-cap{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:22px 12px 10px;
    background:linear-gradient(to top,rgba(4,20,28,.85),transparent);
    color:#fff;
    font-size:.82rem;
    font-weight:700}
.vthumb .vt-tag{
    position:absolute;
    top:9px;
    left:9px;
    background:rgba(3,119,159,.92);
    color:#fff;
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:4px 9px;
    border-radius:999px}
.vt-fallback{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:var(--accent3);
    font-size:2rem}
.vplayer{
    position:fixed;
    inset:0;
    z-index:95;
    background:rgba(4,20,28,.94);
    display:none;
    align-items:center;
    justify-content:center;
    padding:26px}
.vplayer.open{
    display:flex}
.vplayer .vstage{
    width:min(960px,94vw)}
.vplayer .frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.6)}
.vplayer .frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:#000}
.vplayer .vtitle{
    color:#eaf6fb;
    font-weight:700;
    font-size:.95rem;
    margin-top:14px;
    text-align:center}
.vplayer .x{
    position:absolute;
    top:20px;
    right:22px;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,.14);
    color:#fff;
    width:46px;
    height:46px;
    border-radius:50%;
    font-size:1.35rem;
    font-weight:900;
    display:grid;
    place-items:center}
.map{
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--line)}
#map{
    height:340px}
.grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px}
.sim-sec{
    padding:10px 0 60px}
.sim-sec h2,.sim-sec h3{
    font-size:1.3rem;
    font-weight:900;
    letter-spacing:-.02em;
    margin-bottom:16px}
.simgrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px}
.simc{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:.25s var(--ease);
    box-shadow:0 8px 24px -18px rgba(3,64,90,.45)}
.simc:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow)}
.simc>img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block}
.simc .sb{
    padding:14px 16px 16px}
.simc .sim-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    min-width:0}
.simc .sb h5{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    font-size:1rem;
    font-weight:800;
    line-height:1.2}
.simc .sim-id{
    flex:0 0 auto;
    padding:4px 7px;
    border:1px solid #d6eef5;
    border-radius:8px;
    background:#f2fafc;
    color:var(--accent);
    font-family:ui-monospace,monospace;
    font-size:.64rem;
    font-weight:900;
    line-height:1.1;
    white-space:nowrap}
.simc .sb .l{
    font-size:.78rem;
    color:var(--soft);
    margin-top:4px;
    min-height:2.1em}
.simc .sim-specs{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    border-top:1px solid var(--line);
    margin-top:11px;
    padding-top:11px}
.simc .sim-spec{
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    font-size:.8rem;
    font-weight:700}
.simc .sim-spec i{
    font-size:1.35rem;
    line-height:1;
    --fa-secondary-opacity:.35}
.simc .sim-spec.teal i{
    --fa-primary-color:#03779f;
    --fa-secondary-color:#5fd0ef}
.simc .sim-spec.green i{
    --fa-primary-color:#059669;
    --fa-secondary-color:#34d399}
.simc .sim-spec.gold i{
    --fa-primary-color:#d97706;
    --fa-secondary-color:#fbbf24}
.simc .sim-spec.blue i{
    --fa-primary-color:#1d4ed8;
    --fa-secondary-color:#60a5fa}
.simc .sim-spec.pets{
    color:#03779f}
.simc .sim-spec.pets i{
    --fa-primary-color:#03779f;
    --fa-secondary-color:#5fd0ef}
.simc .sb .r{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-top:13px}
.simc .sb .pr{
    font-family:ui-monospace,monospace;
    font-weight:800;
    color:var(--accent);
    font-size:.95rem}
.simc .sb .go{
    font-size:.78rem;
    font-weight:800;
    color:var(--accent);
    background:#f2fafc;
    border:1px solid #d6eef5;
    border-radius:10px;
    padding:9px 11px}
footer.ft{
    background:#fff;
    padding:52px 0 26px;
    border-top:3px solid var(--accent)}
footer.ft .grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.1fr;
    gap:36px;
    align-items:start}
footer.ft .ctabox{
    background:linear-gradient(135deg,#f2fafc,#e6f4f9);
    border:1px solid #d6eef5;
    border-radius:16px;
    padding:26px}
footer.ft .ctabox h3{
    font-size:1.2rem;
    font-weight:800;
    letter-spacing:-.02em}
footer.ft .ctabox p{
    font-size:.9rem;
    color:var(--muted);
    margin:8px 0 18px}
footer.ft .ctabox .btnc{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    padding:12px 22px;
    border-radius:12px;
    font-size:.92rem;
    font-weight:700}
footer.ft h6{
    color:var(--ink);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:15px;
    font-weight:800}
footer.ft .lk a{
    display:block;
    margin-bottom:11px;
    font-size:.94rem;
    color:var(--muted)}
footer.ft .lk a:hover,footer.ft .contact-item a:hover{
    color:var(--accent)}
footer.ft .contact-item{
    display:flex;
    gap:11px;
    align-items:center;
    margin-bottom:12px;
    font-size:.94rem;
    color:var(--muted)}
footer.ft .contact-item a{
    color:var(--muted);
    font-weight:600}
footer.ft .contact-item .ic{
    width:34px;
    height:34px;
    border-radius:9px;
    background:#f2fafc;
    color:var(--accent);
    display:grid;
    place-items:center;
    flex-shrink:0;
    font-size:.9rem}
footer.ft .social{
    display:flex;
    gap:9px;
    margin-top:16px}
footer.ft .social a{
    width:36px;
    height:36px;
    border-radius:9px;
    display:grid;
    place-items:center;
    font-size:.82rem;
    background:#f2f6f8;
    color:var(--ink);
    font-weight:700;
    transition:.2s}
footer.ft .social a:hover{
    background:var(--accent);
    color:#fff}
footer.ft .social a.yt:hover{
    background:#f00;
    color:#fff}
footer.ft .legalbar{
    border-top:1px solid var(--line);
    margin-top:34px;
    padding-top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px}
footer.ft .legalbar .brand{
    display:flex;
    align-items:center;
    gap:14px}
footer.ft .legalbar img.logo{
    height:50px;
    width:auto}
footer.ft .legalbar span,footer.ft .legalbar a{
    font-size:.84rem;
    color:var(--soft)}
footer.ft .legalbar a:hover{
    color:var(--accent)}
footer.ft .build-marker{
    margin-top:18px;
    color:#a2adb4;
    font-size:.7rem;
    letter-spacing:.02em;
    text-align:right}
@media(max-width:560px){
    .sspecs,.feats,.checks,.grid2{
        grid-template-columns:1fr}
}
@media(max-width:860px){
    .simgrid{
        grid-template-columns:1fr 1fr}
    footer.ft .grid{
        grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .simgrid,footer.ft .grid{
        grid-template-columns:1fr}
    footer.ft .legalbar img.logo{height:46px}
}
@media(max-width:820px){
    .pill nav,.pill .topcta,.pill .portal,.pill .pay{
        display:none}
    .pill{
        width:100%;
        justify-content:space-between;
        border-radius:16px;
        padding:10px 12px 10px 18px}
    .burger{
        display:flex}
}
@media(max-width:560px){
    .thumbs{
        display:flex;
        flex-wrap:nowrap;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        touch-action:pan-x;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
        cursor:grab}
    .thumbs:active{
        cursor:grabbing}
    .thumbs::-webkit-scrollbar{
        display:none;
        width:0;
        height:0}
    .thumbs img,.thumbs .tmore{
        flex:0 0 84px;
        width:84px}
}
.feat[data-tooltip]{
    position:relative;
    cursor:help;
    z-index:2}
.feat[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 12px);
    transform:translateX(-50%) translateY(4px) scale(.96);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:30;
    min-width:max-content;
    max-width:250px;
    padding:9px 13px;
    background:#fffdf1;
    color:#17232b;
    border:2px solid #17232b;
    border-radius:13px 15px 12px 10px;
    box-shadow:4px 5px 0 rgba(3,64,90,.18),0 8px 18px rgba(3,64,90,.16);
    font-size:.76rem;
    font-weight:800;
    line-height:1.25;
    text-align:center;
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease}
.feat[data-tooltip]::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:calc(100% + 4px);
    width:11px;
    height:11px;
    background:#fffdf1;
    border-right:2px solid #17232b;
    border-bottom:2px solid #17232b;
    transform:translateX(-50%) rotate(45deg) scale(.96);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:31;
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease}
.feat[data-tooltip]:hover::after,.feat[data-tooltip]:focus-within::after{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0) scale(1)}
.feat[data-tooltip]:hover::before,.feat[data-tooltip]:focus-within::before{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) rotate(45deg) scale(1)}
/* Gastos comunes: texto más legible en la ficha individual */
.gc-callout .gc-lab{
    font-size:.95rem;
    text-transform:none;
    letter-spacing:.1px}
.gc-callout .gc-val span{
    font-size:.8rem}
.gc-callout .gc-note{
    font-size:.9rem;
    margin-top:6px;
    line-height:1.5}
.feat[data-tooltip]::after{
    min-width:0;
    width:260px;
    max-width:calc(100vw - 40px);
    white-space:normal;
    font-size:.88rem;
    line-height:1.35}
.simc .sim-ph{
    position:relative}
.simc .sim-ph>img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block}
.simc .sim-op,.simc .sim-type{
    position:absolute;
    color:#fff;
    font-size:.62rem;
    font-weight:800;
    padding:5px 9px;
    border-radius:999px;
    letter-spacing:.2px}
.simc .sim-op{
    left:12px;
    top:12px;
    background:rgba(3,119,159,.92)}
.simc .sim-promo{
    position:absolute;
    top:12px;
    right:12px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border-radius:999px;
    background:linear-gradient(135deg,#fff2c7,#f6c453);
    color:#704b00;
    font-size:.6rem;
    font-weight:900;
    white-space:nowrap}
.simc .sim-type{
    left:12px;
    bottom:12px;
    background:rgba(3,119,159,.9)}
.feat[data-tooltip]::after{
    max-width:290px}
.share .qrbox-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px}
.share .qrbox{
    width:180px;
    height:180px;
    border:0;
    border-radius:18px;
    padding:0;
    background:#fff;
    box-shadow:0 10px 24px -16px rgba(3,64,90,.6);
    position:relative;
    overflow:hidden}
.share .qrbox svg{
    width:180px!important;
    height:180px!important;
    display:block;
    border-radius:18px}
.share .qr-caption{
    font-size:.7rem;
    font-weight:900;
    color:var(--accent);
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    gap:5px}

/* Igualar el área visible del QR de reserva con el QR de la ficha. */
.share #qr-reserva svg {
    width:160px !important;
    height:160px !important;
}

/*
* Ficha individual de propiedad
*
* Este archivo contiene los ajustes de layout y responsive de la ficha.
* Los estilos específicos de componentes se mantienen agrupados por sección
* para que puedan editarse sin buscar reglas dentro del HTML/PHP.
*/

/* Layout principal */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.wrap {
    width: min(var(--max), calc(100% - 40px));
    max-width: 100%;
}

.main {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

@media (min-width: 921px) {
    /* Escritorio: cada columna se desplaza de forma independiente y las
       barras quedan ocultas para conservar una interfaz limpia. */
    .main {
        height: calc(100vh - 104px);
        min-height: 520px;
        align-items: stretch;
    }
    .main > div,
    .main > aside.side {
        position: static;
        min-height: 0;
        height: 100%;
        max-height: none;
        overflow-y: auto;
        overflow-x: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .main > div::-webkit-scrollbar,
    .main > aside.side::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

.main > div,
.main > aside,
.scard,
.block {
    min-width: 0;
}

/* Galería */
.big {
    cursor: pointer;
}

.thumbs {
    min-width: 0;
}

/* Tarjetas e indicadores */
.scard {
    /* El card no debe cortar contenido ni tooltips. */
    overflow: visible;
    height: fit-content;
}

.scard h1,
.scard h2,
.loc,
.description-body,
.block p {
    overflow-wrap: anywhere;
}

.pricebar,
.share {
    min-width: 0;
}

.share {
    grid-template-columns: auto minmax(0, 1fr);
}

.share .sh-b {
    min-width: 0;
}

.sspecs,
.feats,
.checks,
.grid2,
.simgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sspecs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Miniaturas desplazables en pantallas táctiles */
@media (max-width: 560px) {
    .wrap {
        width: calc(100% - 24px);
    }

    /* La galería debe ajustarse al viewport; las miniaturas son el único
       elemento que puede crecer horizontalmente para permitir desplazamiento. */
    .gal,
    .big,
    .thumbs {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

.hero {
    padding-top: 12px;
}

.main {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.big {
    height: auto;
    aspect-ratio: 4 / 3;
}

.thumbs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.thumbs:active {
    cursor: grabbing;
}

.thumbs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.thumbs img,
.thumbs .tmore {
    flex: 0 0 84px;
    width: 84px;
}

.scard,
.block {
    padding-left: 14px;
    padding-right: 14px;
}

.sspecs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.msp {
    padding-left: 4px;
    padding-right: 4px;
}

.share {
    grid-template-columns: 1fr;
    justify-items: center;
}

.share .sh-b {
    width: 100%;
    text-align: center;
}

.share .sh-b .btns {
    align-items: stretch;
}

.simgrid {
    grid-template-columns: minmax(0, 1fr);
}

.simc .sb .r {
    flex-wrap: wrap;
}

.description-body,
.block p,
.gc-callout .gc-b,
.feat span,
.etrust p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.loc {
    font-size: .86rem;
}

}

@media (max-width: 920px) {
    .main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contacto flotante */
footer.ft .contact-item .ic.copyable {
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}

footer.ft .contact-item .ic.copyable:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

footer.ft .contact-item .ic.copyable.copied {
    background: #e4f7ef;
    color: #0f9d6b;
}

.wa-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: wa-pulse 2.8s ease-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.wa-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(3, 119, 159, .45), 0 0 0 6px rgba(3, 119, 159, .16);
}

.wa-fab svg {
    display: block;
    width: 34px;
    height: 34px;
}

@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, .22), 0 0 0 0 rgba(37, 211, 102, .5); }
    70% { box-shadow: 0 6px 20px rgba(0, 0, 0, .22), 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* Etiquetas e indicadores de la ficha */
.elabel {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .01em;
    color: var(--ink);
}

.msp[data-tooltip] {
    position: relative;
    cursor: help;
}

.msp[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 30;
    width: min(290px, calc(100vw - 40px));
    padding: 9px 13px;
    border: 2px solid #17232b;
    border-radius: 13px 15px 12px 10px;
    background: #fffdf1;
    color: #17232b;
    box-shadow: 4px 5px 0 rgba(3, 64, 90, .18), 0 8px 18px rgba(3, 64, 90, .16);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px) scale(.96);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.msp[data-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 31;
    width: 11px;
    height: 11px;
    border-right: 2px solid #17232b;
    border-bottom: 2px solid #17232b;
    background: #fffdf1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) rotate(45deg) scale(.96);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.msp[data-tooltip]:hover::after,
.msp[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.msp[data-tooltip]:hover::before,
.msp[data-tooltip]:focus::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) rotate(45deg) scale(1);
}

/* El cuarto KPI está junto al borde derecho: el globo se abre hacia dentro. */
.sspecs .msp:nth-child(4)[data-tooltip]::after {
    left: 100%;
    transform: translateX(-100%) translateY(4px) scale(.96);
}

.sspecs .msp:nth-child(4)[data-tooltip]::before {
    left: 88%;
}

.sspecs .msp:nth-child(4)[data-tooltip]:hover::after,
.sspecs .msp:nth-child(4)[data-tooltip]:focus::after {
    transform: translateX(-100%) translateY(0) scale(1);
}

/* Los globos deben poder salir de la tarjeta sin ser recortados. */
.scard:has(.msp[data-tooltip]:hover),
.scard:has(.msp[data-tooltip]:focus) {
    overflow: visible;
}

/* En el último KPI el borde derecho del globo coincide con el de la tarjeta. */
.sspecs .msp:nth-child(4)[data-tooltip]::after {
    left: auto;
    right: 0;
}

@media (max-width: 820px) {
    .wa-fab {
        right: 18px;
        bottom: 18px;
        width: 56px;
        height: 56px;
    }

.wa-fab svg {
    width: 31px;
    height: 31px;
}
}
:root {
    --fa-primary-color: var(--accent);
}

/* Variantes de color para iconos que antes tenían estilos inline. */
.gc-icon {
    --fa-primary-color: var(--accent);
    --fa-secondary-color: var(--accent3);
    --fa-secondary-opacity: .4;
}

.play-icon {
    --fa-primary-color: var(--accent);
    --fa-secondary-color: var(--accent);
}

.badge-icon {
    --fa-primary-color: #fff;
    --fa-secondary-color: #fff;
    --fa-secondary-opacity: .55;
}

@media (max-width: 560px) {
    .requirements-grid,
    .payment-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tooltip independiente: evita recortes por overflow y separa título del detalle. */
.detail-tooltip {
    position: fixed;
    z-index: 200;
    width: min(290px, var(--tooltip-max-width, calc(100vw - 24px)));
    max-width: var(--tooltip-max-width, calc(100vw - 24px));
    padding: 9px 13px;
    border: 2px solid #17232b;
    border-radius: 13px 15px 12px 10px;
    background: #fffdf1;
    color: #17232b;
    box-shadow: 4px 5px 0 rgba(3,64,90,.18), 0 8px 18px rgba(3,64,90,.16);
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    pointer-events: none;
    overflow: visible;
}
.detail-tooltip.opens-right::after,
.detail-tooltip.opens-left::after {
    content:"";
    position:absolute;
    bottom:-7px;
    width:11px;
    height:11px;
    background:#fffdf1;
    border-right:2px solid #17232b;
    border-bottom:2px solid #17232b;
    transform:rotate(45deg);
}
.detail-tooltip.opens-right::after,
.detail-tooltip.opens-left::after {
    left:var(--tooltip-arrow-left, 18px);
    right:auto;
}
.detail-tooltip span {
    max-width:100%;
    display:block;
    overflow:visible;
    overflow-wrap:anywhere;
}
.detail-tooltip[hidden] { display: none; }
.detail-tooltip strong { display:block; font-weight:900; text-align:center; }
.detail-tooltip span { display:block; margin-top:4px; font-weight:500; text-align:center; }
[data-tooltip-title] { cursor: help; }
[data-tooltip-title]::before,
[data-tooltip-title]::after { display:none !important; }

/* El portal JS es el único tooltip visible; evita duplicados heredados. */
.msp[data-tooltip]::before,
.msp[data-tooltip]::after,
.feat[data-tooltip]::before,
.feat[data-tooltip]::after { display:none !important; }

/* Orden de lectura móvil: contacto y precio antes del contenido largo. */
@media (max-width: 560px) {
    .main { display:flex; flex-direction:column; gap:14px; }
    .main > div,
    .main > aside { display:contents; }
    .gal { order:1; }
    .side .scard:first-child { order:2; }
    .description { order:3; }
    .unit-features { order:4; }
    .requirements { order:5; }
    .payment-options { order:6; }
    .video-block { order:7; }
    .location-block { order:8; }
    .side .scard:nth-child(2) { order:9; }
    .side .scard:nth-child(3) { order:10; }
    body { padding-bottom:74px; }
}

/* En móvil el documento vuelve a ser el único scroll vertical. */
@media (max-width: 920px) {
    .main,
    .main > div,
    .main > aside.side {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Contacto persistente, visible solo en móvil. */
.mobile-contact-bar { display:none; }
@media (max-width:560px) {
    .mobile-contact-bar {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:80;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.96);
        border-top:1px solid var(--line);
        box-shadow:0 -8px 24px rgba(3,64,90,.13);
    }
    .mobile-contact-bar span { color:var(--accent); font-family:ui-monospace,monospace; font-weight:900; font-size:.88rem; }
.mobile-contact-bar a { display:inline-flex; align-items:center; gap:6px; padding:10px 12px; border-radius:10px; background:#25d366; color:#fff; font-size:.78rem; font-weight:900; white-space:nowrap; }
}

/* Las tres propiedades similares deben conservar el formato compacto. */
.simgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.simc .sb { min-width:0; }
.simc .sb h5 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.simc .sb .l { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 860px) {
    .simgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .simgrid { grid-template-columns:minmax(0,1fr); }
}

/* Refuerzo final responsive: evita que la imagen natural ensanche la galería. */
@media (max-width: 560px) {
    /* En móvil los bloques son hijos directos del flex (los wrappers se
       convierten en display:contents). Deben estirarse a todo el ancho: de lo
       contrario un mapa de Google puede conservar su ancho intrínseco. */
    .main {
        align-items: stretch;
    }

    .main .block,
    .main .location-block,
    .location-block .map,
    .location-block #map {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .location-block #map {
        height: 300px;
    }

    /* La barra fija inferior ya entrega el mismo CTA en móvil. */
    .wa-fab {
        display: none !important;
    }

    .main > .gal,
    .main > .big,
    .main > .thumbs,
    .gal,
    .big,
    .thumbs {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* El eje X debe seguir siendo desplazable aunque otro estilo del mapa o
       de la galería aplique overflow:hidden al contenedor. */
    .thumbs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .thumbs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}