/* PORTADA en la linea del portal de duenos (4 oct 2026): blanco, titulos finos con una palabra turquesa,
tarjetas redondeadas, botones en pildora con circulo turquesa. Sin rayas, sin bordes, sin relleno. */
:root{--res:#10b2c2}
.rv{--d:0s}
html.js-rv .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d),transform .9s cubic-bezier(.2,.7,.2,1) var(--d)}
html.js-rv .rv.in{opacity:1;transform:none}
h1 b,h2 b{font-weight:600;color:var(--res)}
.hp h1 b{color:#fff}
.btn-pill{display:inline-flex;align-items:center;gap:18px;background:#fff;color:var(--tinta);text-decoration:none;border-radius:999px;padding:8px 8px 8px 30px;font-size:15px;font-weight:600;box-shadow:0 14px 30px -18px rgba(11,12,13,.4);transition:transform .25s,box-shadow .25s}
.btn-pill i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--res);color:#fff}
.btn-pill svg{width:18px;height:18px}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(11,12,13,.45)}
/* Primera pantalla */
.hp{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0b0c0d}
/* 8 oct 2026 (Carlos): las fotos de portada que marco en la carpeta de fotos (1.3, 2.0, 2.6...) pasan una tras otra con fundido suave. Cada foto es una capa; la activa se ve y se acerca despacio. */
.hp-fondo{position:absolute;inset:0;background:#0b0c0d url(portada/portada.jpg) center 60%/cover no-repeat}
.hp-f{position:absolute;inset:0;background-position:center 60%;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.8s ease-in-out;transform:scale(1)}
.hp-f.on{opacity:1;transform:scale(1.06);transition:opacity 1.8s ease-in-out,transform 9s ease-out}
@media (prefers-reduced-motion:reduce){.hp-f{transition:opacity 1.8s}.hp-f.on{transform:none}}
.hp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,18,.38) 0%,rgba(4,14,18,.05) 35%,rgba(4,14,18,.7) 100%)}
.hp-in{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:64px}
.hp h1{margin:0 0 14px;font-weight:300;font-size:clamp(44px,6.8vw,104px);line-height:1;letter-spacing:-.035em;text-shadow:0 2px 40px rgba(0,0,0,.28)}
.hp .sub{font-size:clamp(16px,1.5vw,20px);font-weight:300;margin:0 0 36px;max-width:760px;text-wrap:balance}
.reserva{display:grid;grid-template-columns:1fr 1fr .8fr auto;align-items:stretch;background:#fff;border-radius:999px;padding:8px;max-width:900px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.reserva label{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:11px 28px;color:var(--tinta);border-radius:999px;cursor:pointer;min-width:0}
.reserva label:hover{background:#f4f8f9}
.reserva span{font-size:11px;font-weight:600;color:var(--brand-d)}
.reserva input,.reserva select{border:0;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--tinta);padding:0;outline:none;width:100%;min-width:0}
.reserva button{border:0;cursor:pointer;border-radius:999px;padding:0 36px;background:var(--res);color:#fff;font:inherit;font-size:15px;font-weight:600}
.reserva button span{color:#fff;font-size:15px}
.reserva-nota{margin:18px 6px 0}
@media (max-width:820px){.reserva{grid-template-columns:1fr 1fr;border-radius:26px}.reserva label{border-radius:18px;padding:12px 18px}.reserva button{grid-column:1/-1;padding:17px;border-radius:18px}.hp-in{padding-top:170px;padding-bottom:44px}}
/* Villas */
.vs{padding:110px 0 100px;background:#fff}
.vs[hidden]{display:none}
.vs-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px}
.vs h2,.sv h2,.pq h2{font-weight:300;font-size:clamp(32px,4.2vw,60px);line-height:1.06;letter-spacing:-.03em;margin:0;text-wrap:balance}
.vs-ctl{display:flex;gap:10px;flex:none}
.vs-ctl button{width:54px;height:54px;border-radius:50%;border:0;background:rgba(16,178,194,0.09);color:#10b2c2;cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s}
.vs-ctl button:hover{background:var(--res);color:#fff}
.vs-ctl svg{width:20px;height:20px}
.vs-pista{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(24px,calc((100vw - 1200px)/2)) 30px;scrollbar-width:none;scroll-padding-left:max(24px,calc((100vw - 1200px)/2))}
.vs-pista::-webkit-scrollbar{display:none}
.vc{position:relative;display:block;border-radius:28px;overflow:hidden;color:#fff;text-decoration:none;background:#0b0c0d;flex:0 0 clamp(290px,30vw,400px);aspect-ratio:4/5;scroll-snap-align:start}
.vc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.vc:hover img{transform:scale(1.06)}
.vc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,18,.1) 0%,rgba(4,14,18,0) 40%,rgba(4,14,18,.82) 100%)}
.vc-precio{position:absolute;z-index:2;top:16px;left:16px;background:rgba(255,255,255,.95);color:var(--tinta);border-radius:999px;padding:8px 15px;font-size:12px}
.vc-precio b{font-weight:600}
.vc-txt{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:26px}
.vc-lugar{display:block;font-size:12px;font-weight:500;opacity:.9}
.vc h3{margin:8px 0 10px;font-size:19px;font-weight:500;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc-datos{display:block;font-size:12.5px;opacity:.85}
.vs-pie{margin-top:22px}
.vs-pie .btn-pill{box-shadow:0 0 0 1px #e6eaec}
@media (max-width:700px){.vs-ctl{display:none}.vc{flex-basis:80%}.vs{padding:70px 0 60px}.vs-cab{margin-bottom:28px}}
/* Por que con nosotros */
.pq{padding:20px 0 100px}
.tarjeta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#f4f8f9;border-radius:36px;overflow:hidden}
.tarjeta-txt{padding:70px 64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.tarjeta-txt .chat-caras{display:flex;margin-bottom:26px}
.tarjeta-txt .chat-caras img{width:56px;height:56px}
.pq-lista{list-style:none;margin:28px 0 36px;padding:0;display:flex;flex-direction:column;gap:14px}
.pq-lista li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.5;color:#2b3236}
.pq-lista li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--res) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.tarjeta-foto{background:#dfe9ec center/cover no-repeat;min-height:480px}
@media (max-width:900px){.tarjeta{grid-template-columns:1fr}.tarjeta-txt{padding:44px 28px}.tarjeta-foto{min-height:320px;order:-1}.pq{padding-bottom:70px}}
/* A tu medida */
.sv{padding:20px 0 100px}
.sv h2{margin-bottom:40px;max-width:760px}
.sv-rej{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sv-t{background:#f4f8f9;border-radius:26px;padding:34px 32px 36px;transition:background .3s,transform .3s}
.sv-t:hover{background:rgba(16,178,194,0.09);transform:translateY(-3px)}
.sv-t b{display:block;font-size:19px;font-weight:600;margin-bottom:8px}
.sv-t span{display:block;font-size:15px;color:var(--gris);line-height:1.6}
@media (max-width:900px){.sv-rej{grid-template-columns:1fr 1fr}.sv{padding-bottom:70px}}
@media (max-width:560px){.sv-rej{grid-template-columns:1fr}}
/* Las dos puertas */
.pu{padding:0 0 110px}
.pu-dos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pu-c{position:relative;border-radius:32px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end;color:#fff;text-decoration:none;background:#0b0c0d}
.pu-f{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pu-c:hover .pu-f{transform:scale(1.05)}
.pu-f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,18,.7) 0%,rgba(4,14,18,.42) 17%,rgba(4,14,18,.06) 38%,rgba(4,14,18,.1) 46%,rgba(4,14,18,.86) 100%)}
.pu-t{position:relative;padding:40px 40px 38px}
.pu-t h2{font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;max-width:480px;text-wrap:balance}
.pu-t h2 b{color:#fff}
@media (max-width:860px){.pu-dos{grid-template-columns:1fr}.pu-c{min-height:420px}.pu-t{padding:30px 26px}.pu{padding-bottom:70px}}
/* ---- Acabado fino (segunda pasada) ---- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(16,178,194,0.27);color:#0b0c0d}
.hp::after{background:linear-gradient(90deg,rgba(4,14,18,.5) 0%,rgba(4,14,18,0) 62%),linear-gradient(180deg,rgba(4,14,18,.42) 0%,rgba(4,14,18,.04) 32%,rgba(4,14,18,.72) 100%)}
.hp h1{text-wrap:balance}
.reserva{box-shadow:0 40px 80px -36px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.18)}
.reserva button{transition:background .25s,transform .25s,box-shadow .25s;box-shadow:0 14px 28px -14px rgba(16,178,194,.9)}
.reserva button:hover{transform:translateY(-1px);box-shadow:0 20px 32px -14px rgba(16,178,194,.95)}
.vc{box-shadow:0 30px 60px -38px rgba(11,12,13,.65);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.vc:hover{transform:translateY(-6px);box-shadow:0 44px 70px -36px rgba(11,12,13,.7)}
.vc-precio{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,.9)}
.vc-lugar{font-size:12.5px;font-weight:600;color:#10b2c2}
.tarjeta{box-shadow:0 50px 90px -60px rgba(11,12,13,.35)}
.tarjeta-foto{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sv-t{box-shadow:0 20px 44px -34px rgba(11,12,13,.28)}
.pu-c{box-shadow:0 40px 80px -50px rgba(11,12,13,.6)}
.btn-pill{box-shadow:0 16px 34px -20px rgba(11,12,13,.45)}
.btn-pill i{transition:transform .25s}
.btn-pill:hover i{transform:translateX(3px)}
.vs,.pq,.sv,.pu{scroll-margin-top:90px}
/* aparicion escalonada de las seis tarjetas de servicios */
.sv-t:nth-child(3n+2){--d:.07s}
.sv-t:nth-child(3n+3){--d:.14s}
/* el chat flotante, mas discreto sobre fotos */
body[data-pagina="inicio"] .chat-btn{box-shadow:0 22px 44px -22px rgba(11,12,13,.6)}
@media (max-width:820px){.reserva input,.reserva select{font-size:13px}.reserva label{padding:12px 14px}}
/* ---- Tres villas, tarjetas de revista ---- */
.etq{font-size:13px;font-weight:600;color:var(--brand-d);margin:0 0 14px;letter-spacing:.02em}
.vs-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;overflow:visible;padding-bottom:6px}
.vs-tres .vc{flex:none;aspect-ratio:auto;scroll-snap-align:none;background:#fff;color:var(--tinta);border-radius:32px;box-shadow:0 30px 60px -42px rgba(11,12,13,.5);overflow:hidden;display:flex;flex-direction:column}
.vs-tres .vc::after{content:none}
.vs-tres .vc:hover{transform:translateY(-6px);box-shadow:0 50px 80px -44px rgba(11,12,13,.55)}
.vc-foto{position:relative;aspect-ratio:4/3.3;overflow:hidden;border-radius:32px 32px 0 0;background:#e9eef0}
.vs-tres .vc-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vs-tres .vc:hover .vc-foto img{transform:scale(1.07)}
.vc-num{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--tinta)}
.vs-tres .vc-txt{position:static;padding:26px 28px 26px;display:flex;flex-direction:column;flex:1}
.vs-tres .vc-lugar{font-size:13px;font-weight:600;color:var(--brand-d);opacity:1}
.vs-tres .vc h3{margin:8px 0 18px;font-size:22px;font-weight:400;letter-spacing:-.015em;line-height:1.25;-webkit-line-clamp:2;min-height:2.5em}
.vs-tres .vc-datos{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:#4a5558;opacity:1;margin-bottom:22px}
.vs-tres .vc-datos span{display:inline-flex;align-items:center;gap:8px}
.vs-tres .vc-datos svg{width:20px;height:20px;color:var(--res)}
.vc-fila{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.vs-tres .vc-precio{position:static;background:none;backdrop-filter:none;padding:0;font-size:14px;color:#4a5558;border-radius:0}
.vs-tres .vc-precio b{font-size:20px;font-weight:600;color:var(--tinta);letter-spacing:-.01em}
.vc-ir{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(16,178,194,0.09);color:#10b2c2;transition:background .3s,color .3s,transform .3s;flex:none}
.vc-ir svg{width:18px;height:18px}
.vs-tres .vc:hover .vc-ir{background:var(--res);color:#fff;transform:translateX(3px)}
.vs-cab{margin-bottom:40px}
.vs-pie{margin-top:44px;text-align:center}
.vs-pie .btn-pill{box-shadow:0 18px 40px -24px rgba(11,12,13,.5)}
@media (max-width:980px){.vs-tres{grid-template-columns:1fr;max-width:560px}}
.pu{padding:6px 0 100px}
.pq{padding-top:0}
/* ---- Las tres villas del frente, con el titulo de la ficha y mas lujo ---- */
.vs-tres{gap:30px}
.vs-tres .vc{border-radius:34px;box-shadow:0 40px 80px -52px rgba(11,12,13,.6);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.vs-tres .vc:hover{transform:translateY(-8px);box-shadow:0 60px 90px -50px rgba(11,12,13,.65)}
.vc-foto{aspect-ratio:4/3.5;border-radius:34px 34px 0 0}
.vc-foto::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,rgba(4,14,18,0),rgba(4,14,18,.35));pointer-events:none}
.vc-num{left:20px;top:20px;padding:9px 18px;font-size:12.5px;letter-spacing:.01em;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.vs-tres .vc-txt{padding:28px 30px 26px}
.vs-tres .vc-lugar{font-size:12.5px;letter-spacing:.04em;color:#6a7478;font-weight:500;margin-bottom:12px}
.vs-tres .vc h3{min-height:0;margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--tinta);display:block;-webkit-line-clamp:unset}
.vs-tres .vc h3.vc-pal span{white-space:nowrap}
.vs-tres .vc h3.vc-pal .pt{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--tinta);margin:0 .5em;vertical-align:middle;position:relative;top:-.06em}
.vc-frase{margin:10px 0 0;font-family:"Syne",Poppins,sans-serif;font-weight:400;font-size:16px;letter-spacing:-.012em;word-spacing:-.02em;color:#10b2c2;line-height:1.35}
.vs-tres .vc-datos{margin:20px 0 22px;gap:8px 18px;font-size:13.5px}
.vs-tres .vc-datos svg{color:#0b0c0d;width:19px;height:19px}
.vs-tres .vc-precio b{font-size:21px;font-weight:500}
@media (max-width:1180px){.vs-tres .vc h3.vc-pal span{white-space:normal}}
/* ---- Portada: paneles con frase encima de la foto, equipo con fichas y seccion para huespedes (5 oct 2026) ----
Carlos: encima de cada foto una frase en DOS tipos de letra (Poppins fina y Syne en la palabra que resalta, en turquesa); debajo el titulo, una
linea y la flecha. El sello "Reserva directa" se quito: ahora van dos garantias centradas, "Sin cargos de canal" y "Sin tarifas escondidas". */
.pu .wrap > .pu-ancho{margin-top:20px}
.pu-arr{position:absolute;z-index:2;top:32px;left:36px;right:36px;margin:0;font-size:clamp(24px,2.4vw,34px);font-weight:300;line-height:1.14;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.pu-arr b{font-family:Syne,Poppins,sans-serif;font-weight:500;color:var(--res);letter-spacing:-.025em}
.pu-p{margin:0 0 24px;font-size:15.5px;font-weight:300;line-height:1.65;max-width:460px;color:rgba(255,255,255,.93);text-wrap:balance}
.pu-ancho{min-height:400px}
.pu-ancho .pu-t{padding-top:0}
@media (max-width:860px){.pu-arr{top:26px;left:26px;right:26px}.pu-ancho{min-height:360px}}
/* El equipo: dos fichas con foto, cargo, una biografia corta y su WhatsApp */
.eq{padding:0 0 100px;scroll-margin-top:90px}
.eq h2{font-weight:300;font-size:clamp(32px,4.2vw,60px);line-height:1.06;letter-spacing:-.03em;margin:0 0 40px;text-wrap:balance}
.eq-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.eq-c{display:grid;grid-template-columns:210px minmax(0,1fr);background:#f4f8f9;border-radius:32px;overflow:hidden;box-shadow:0 40px 80px -52px rgba(11,12,13,.45)}
.eq-c img{width:100%;height:100%;min-height:270px;object-fit:cover;display:block}
.eq-t{padding:30px 30px 28px;display:flex;flex-direction:column;justify-content:center}
.eq-t h3{margin:0;font-size:24px;font-weight:500;letter-spacing:-.02em}
.eq-t em{font-style:normal;font-family:Syne,Poppins,sans-serif;font-weight:500;font-size:16px;color:var(--res);margin:4px 0 14px}
.eq-t p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:#3b454b}
.eq-wa{align-self:flex-start;font-size:14px;font-weight:600;color:var(--tinta);text-decoration:none;border-bottom:1.5px solid var(--res);padding-bottom:2px}
@media (max-width:980px){.eq-par{grid-template-columns:1fr}}
@media (max-width:560px){.eq-c{grid-template-columns:1fr}.eq-c img{height:300px;min-height:0}.eq{padding-bottom:70px}}
/* Para huespedes: foto y cuatro garantias, y despues el concierge */
.sv .etq{margin-bottom:14px}
.pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;margin:0 0 76px}
.pc-foto{aspect-ratio:4/3.3;border-radius:34px;background:#dfe9ec center/cover no-repeat;box-shadow:0 40px 80px -50px rgba(11,12,13,.5)}
.pc-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}
.pc-lista li{display:flex;gap:18px;align-items:flex-start}
.pc-ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:rgba(16,178,194,.1);color:var(--res)}
.pc-ic svg{width:25px;height:25px}
.pc-lista b{display:block;font-size:18px;font-weight:600;margin-bottom:4px}
.pc-lista li > div > span{display:block;font-size:15px;line-height:1.6;color:var(--gris)}
.sv-sub{font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0 0 8px}
.sv-sub-p{margin:0 0 28px;font-size:16px;color:var(--gris)}
@media (max-width:900px){.pc{grid-template-columns:1fr;gap:28px;margin-bottom:54px}}
/* Lineas parejas (Carlos, 5 oct 2026): las frases se reparten en renglones del mismo largo */
.eq-t p,.pc-lista li > div > span,.sv-sub-p,.sv-t span,.pu-arr,.pu-p{text-wrap:balance}
.eq-par{align-items:stretch}
/* "balance" solo actua hasta 6 renglones; las biografias llevan mas, asi que usan "pretty" (sin palabra huerfana al final) y una foto un poco mas angosta para ganar ancho */
.eq-t p{text-wrap:pretty}
.eq-c{grid-template-columns:190px minmax(0,1fr)}
/* Concierge con fotos (5 oct 2026): cada servicio lleva foto de lo que se hace y una descripcion. Las fotos van en assets/svc-*.jpg; mientras no esten, se ve el degradado turquesa con el icono. */
.pc-foto{position:relative}
.pc-flecha{position:absolute;left:22px;bottom:22px;text-decoration:none}
.sv-sub{scroll-margin-top:100px}
.sv-rej .sv-f{padding:0;overflow:hidden;display:flex;flex-direction:column}
.sv-foto{position:relative;aspect-ratio:4/3;background:var(--img) center/cover no-repeat,linear-gradient(135deg,#0d8f9c,#10b2c2 55%,#7fd6de);display:grid;place-items:center;color:rgba(255,255,255,.9)}
.sv-foto svg{width:54px;height:54px}
.sv-txt{padding:26px 28px 30px}
.sv-f:hover .sv-foto{filter:saturate(1.08)}
/* Titulo del concierge: centrado, en peso fuerte y con la frase resaltada (Carlos, 5 oct 2026) */
.sv-cab{text-align:center;max-width:820px;margin:0 auto 46px;scroll-margin-top:100px}
.sv-cab .sv-sub{font-weight:600;font-size:clamp(30px,4vw,54px);line-height:1.08;letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance}
.sv-cab .sv-sub b{color:var(--res);font-weight:700}
.sv-cab .sv-sub-p{font-size:clamp(15px,1.4vw,18px);font-weight:300;line-height:1.7;margin:0 auto;max-width:640px;text-wrap:balance}
.sv-cab .sv-sub b{display:block}
/* ---- Orden nuevo (5 oct 2026): panel del equipo y fichas van al final, despues de "Para huespedes" ---- */
.pu .wrap > .pu-ancho{margin-top:0}
.pu-eq{padding-top:0}
.eq{padding-top:56px}
.pu-etq{position:absolute;z-index:2;top:30px;left:36px;margin:0;font-family:Syne,Poppins,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(16,178,194,.92);padding:7px 14px;border-radius:999px}
.pu-etq + .pu-arr{top:78px}
@media (max-width:860px){.pu-etq{top:24px;left:26px}.pu-etq + .pu-arr{top:70px}}
/* Biografias en telefono: foto arriba a todo el ancho (rostro visible) y el texto debajo, sin la columna angosta ni el hueco de abajo */
@media (max-width:640px){
.eq-par{gap:20px}
.eq-c{grid-template-columns:1fr !important}
.eq-c img{width:100%;height:340px;min-height:0;object-fit:cover;object-position:50% 18%}
.eq-t{padding:24px 24px 28px;justify-content:flex-start}
.eq-t h3{font-size:23px}
.eq-t p{font-size:15px;line-height:1.65}
}
/* "Conecta con ...": al tocar se abren dos opciones, WhatsApp y correo (5 oct 2026) */
.eq-con{align-self:flex-start;max-width:100%}
.eq-con summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;background:#10b2c2;color:#fff;font-size:14px;font-weight:600}
.eq-con summary::-webkit-details-marker{display:none}
.eq-con summary::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.eq-con[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.eq-con-op{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.eq-con-op a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #d5e4e7;color:#0b0c0d;text-decoration:none;font-size:14px;font-weight:500}
.eq-con-op a:hover{border-color:#10b2c2;color:#0a8c99}
.eq-con-op svg{width:18px;height:18px;color:#10b2c2}
/* "Para huespedes": el rotulo y el titulo van DENTRO de la foto de la villa, en la cabecera (Carlos, 5 oct 2026) */
.pc{grid-template-columns:1fr;gap:34px;margin-bottom:76px}
.pc-foto{aspect-ratio:21/9;min-height:360px;border-radius:34px;overflow:hidden}
.pc-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,18,.72) 0%,rgba(4,14,18,.28) 38%,rgba(4,14,18,.05) 60%,rgba(4,14,18,.1) 100%)}
.pc-foto .pu-etq{top:34px;left:40px;z-index:2}
.pc-tit{position:absolute;z-index:2;top:86px;left:40px;right:40px;margin:0;color:#fff;font-weight:300;font-size:clamp(28px,3.6vw,52px);line-height:1.08;letter-spacing:-.03em;max-width:760px;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.pc-tit b{font-family:Syne,Poppins,sans-serif;font-weight:600;color:#10b2c2}
.pc-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pc-lista li{flex-direction:column;gap:14px}
@media (max-width:980px){.pc-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
.pc-foto{aspect-ratio:auto;min-height:420px}
.pc-foto .pu-etq{top:24px;left:24px}
.pc-tit{top:72px;left:24px;right:24px}
.pc-lista{grid-template-columns:1fr;gap:22px}
.pc-lista li{flex-direction:row}
}
/* Sin Syne en la portada (Carlos, 6 oct 2026: "ese tipo de letra no me gusta"): los rotulos de arriba de las fotos ("Conviértete en nuestro socio", "Para huéspedes")
llevan el mismo estilo que "¿Eres dueño?", todo en Poppins, con la palabra que resalta en negrita y turquesa. */
.pu-arr b,.pc-tit b,.eq-t em{font-family:Poppins,sans-serif !important;font-weight:600}
.eq-t em{font-weight:500}
.pc-arr{top:34px;left:40px;right:40px}
.pc-tit{top:92px}
@media (max-width:640px){.pc-arr{top:24px;left:24px;right:24px}.pc-tit{top:72px}}
.pc-arr{color:#fff}
.eq-con-op a svg[fill="currentColor"]{width:19px;height:19px}
/* La foto del masaje: mas alta y pegada abajo, para que el titulo quede sobre el cielo y no tape a las personas */
.pc-foto{aspect-ratio:16/9;background-position:center bottom !important}
@media (max-width:640px){.pc-foto{aspect-ratio:auto;min-height:460px;background-position:42% bottom !important}}
/* Sobre esta foto el titulo va todo en blanco (el turquesa se perdia sobre el techo de tejas) y un poco mas chico, para no tocar a las personas */
.pc-tit b{color:#fff !important}
.pc-tit{font-size:clamp(26px,3.1vw,44px);text-shadow:0 2px 26px rgba(0,0,0,.55)}
/* "Lo demas lo pides tu." RESALTADO como con marcador: caja turquesa de la marca con letra blanca, que se lee sobre cualquier foto (Carlos, 6 oct 2026) */
.pc-tit b{display:inline;background:#10b2c2;color:#fff !important;font-weight:600;padding:.02em .34em .06em;border-radius:.3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:none}
.pc-tit{line-height:1.32;font-size:clamp(28px,3.4vw,48px)}
.pc-foto{background-position:center center !important}
/* ---- Chef privado: la foto de la chef con su frase DENTRO y la lista de precios (Carlos, 6 oct 2026) ---- */
.sv-chef{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
.sv-chef .sv-foto{aspect-ratio:auto;min-height:380px;background:var(--img) center/cover no-repeat;display:block}
.sv-chef .sv-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,14,0) 45%,rgba(6,12,14,.72) 100%)}
.sv-sobre{position:absolute;z-index:2;left:30px;right:30px;bottom:26px;color:#fff}
.sv-sobre b{display:block;font-weight:600;font-size:clamp(26px,3vw,40px);letter-spacing:-.025em;line-height:1.1;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.sv-sobre span{display:block;margin-top:8px;font-weight:300;font-size:clamp(15px,1.5vw,19px);line-height:1.5;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.sv-chef .sv-txt{display:flex;flex-direction:column;justify-content:center;padding:36px 40px}
.sv-chef .sv-txt p{margin:0 0 24px;font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.75;letter-spacing:.005em;color:#2b3236}
.sv-lista{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 22px;border-radius:999px;background:#0b0c0d;color:#fff;font-size:14.5px;font-weight:600;text-decoration:none;transition:background .25s}
.sv-lista i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#10b2c2}
.sv-lista svg{width:16px;height:16px}
.sv-lista:hover{background:#10b2c2}.sv-lista:hover i{background:#fff;color:#10b2c2}
@media (max-width:860px){.sv-chef{grid-template-columns:1fr}.sv-chef .sv-foto{min-height:300px}.sv-chef .sv-txt{padding:26px 24px 30px}.sv-sobre{left:22px;right:22px;bottom:20px}}
/* idem */
/* la regla de las tarjetas con foto (.sv-rej .sv-f) es mas especifica: la de Chef privado la iguala */
.sv-rej .sv-chef{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-column:1/-1}
.sv-rej .sv-chef .sv-foto{aspect-ratio:auto;min-height:400px;background:var(--img) center/cover no-repeat}
@media (max-width:860px){.sv-rej .sv-chef{grid-template-columns:1fr}.sv-rej .sv-chef .sv-foto{min-height:300px}}
.sv-t .sv-sobre span{color:#fff;font-size:clamp(15.5px,1.5vw,19px)}
.sv-t .sv-sobre b{font-size:clamp(28px,3vw,42px);margin:0}
.sv-t .sv-lista span{display:inline;color:#fff;font-size:14.5px;line-height:1}
/* Masajes: tarjeta ancha como la del chef, con la foto a la derecha (ritmo), y el ultimo cuadro del concierge ocupa la fila entera */
.sv-rej .sv-inv{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.sv-rej .sv-inv .sv-foto{order:2}
.sv-rej .sv-inv .sv-txt{order:1}
/* la ultima tarjeta ya no ocupa toda la fila (6 oct 2026): era lo que hacia el bloque azul gigante */
@media (max-width:860px){.sv-rej .sv-inv{grid-template-columns:1fr}.sv-rej .sv-inv .sv-foto{order:0}.sv-rej .sv-inv .sv-txt{order:1}}
.sv-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sv-lista.sv-wa{background:#10b2c2}
.sv-lista.sv-wa i{background:#fff;color:#10b2c2}
.sv-lista.sv-wa i svg{width:17px;height:17px}
.sv-lista.sv-wa:hover{background:#0d95a3}
/* Chef y Masajes: SOLO lo que va dentro de la foto (Carlos, 6 oct 2026: "no hay que poner mas descripcion que lo que se pone dentro de la foto"). Foto a todo el ancho, la frase y los botones encima. */
.sv-rej .sv-chef{display:block;grid-template-columns:none}
.sv-rej .sv-chef .sv-foto{min-height:clamp(380px,40vw,500px)}
.sv-rej .sv-chef .sv-foto::after{background:linear-gradient(180deg,rgba(6,12,14,0) 35%,rgba(6,12,14,.78) 100%)}
.sv-sobre .sv-btns{margin-top:18px}
.sv-sobre .sv-lista{background:#fff;color:#0b0c0d}
.sv-sobre .sv-lista span{color:#0b0c0d !important}
.sv-sobre .sv-lista:hover{background:#10b2c2}
.sv-sobre .sv-lista:hover span{color:#fff !important}
.sv-sobre .sv-lista.sv-wa{background:#10b2c2}
.sv-sobre .sv-lista.sv-wa span{color:#fff !important}
.sv-sobre .sv-lista.sv-wa:hover{background:#0d95a3}
.sv-sobre{max-width:760px}
/* ---- Tarjetas del concierge: cuadradas, tres por fila (Carlos, 6 oct 2026: "no necesita ser tan grande, tiene que ser cuadrado, tres servicios por linea") ---- */
.sv-rej .sv-chef{display:flex;flex-direction:column;grid-column:auto !important}
.sv-rej .sv-t:last-child{grid-column:auto !important}
.sv-rej .sv-f .sv-foto,.sv-rej .sv-chef .sv-foto{aspect-ratio:1/1;min-height:0}
.sv-rej .sv-chef .sv-foto::after{background:linear-gradient(180deg,rgba(6,12,14,0) 30%,rgba(6,12,14,.82) 100%)}
.sv-sobre{left:22px;right:22px;bottom:20px;max-width:none}
.sv-t .sv-sobre b{font-size:clamp(22px,2.1vw,30px)}
.sv-t .sv-sobre span{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.45}
.sv-sobre .sv-btns{margin-top:14px;gap:8px}
.sv-sobre .sv-lista{padding:4px 4px 4px 16px;gap:10px}
.sv-t .sv-sobre .sv-lista span{font-size:13px;color:inherit}
.sv-sobre .sv-lista i{width:28px;height:28px}
.sv-sobre .sv-lista svg{width:14px;height:14px}
.sv-sobre .sv-lista.sv-wa i svg{width:15px;height:15px}
@media (max-width:900px){.sv-rej .sv-chef{grid-column:auto !important}}
/* mientras las demas tarjetas no tengan foto (y por eso lleven descripcion), las de foto rellenan toda su celda en vez de dejar un hueco abajo; con las nueve ya en foto, todas quedan cuadradas */
.sv-rej .sv-chef .sv-foto{flex:1 1 auto;aspect-ratio:auto;min-height:340px}
.sv-rej .sv-foto[style*="svc-masajes"]{background-position:84% center !important}
/* Con Transporte y Renta de vehiculos separados son 10 tarjetas: la ultima ("Lo que necesites") ocupa la fila entera */
/* la ultima tarjeta ya no se estira a toda la fila (6 oct 2026) */
/* MASAJES: el texto va ARRIBA, sobre el cielo, para no tapar a la terapeuta ni al cliente (Carlos, 6 oct 2026) */
.sv-rej .sv-foto[style*="svc-masajes"] .sv-sobre{top:24px;bottom:auto}
.sv-rej .sv-foto[style*="svc-masajes"]::after{background:linear-gradient(0deg,rgba(6,12,14,0) 45%,rgba(6,12,14,.72) 100%) !important}
.sv-rej .sv-foto[style*="svc-masajes"]{background-position:78% 100% !important}
/* MASAJES (corregido): el texto va ABAJO igual que el del chef, todo sintonizado; la foto se agranda y se ancla abajo para que la terapeuta y el cliente suban y queden sobre el texto, sin taparse */
.sv-rej .sv-foto[style*="svc-masajes"] .sv-sobre{top:auto;bottom:20px}
.sv-rej .sv-foto[style*="svc-masajes"]::after{background:linear-gradient(180deg,rgba(6,12,14,0) 30%,rgba(6,12,14,.82) 100%) !important}
.sv-rej .sv-foto[style*="svc-masajes"]{background-size:auto 132% !important;background-position:82% 100% !important}
/* ---- El logo de WhatsApp de "Consultar": chico, pegado a la orilla, con un aro que da vuelta a su alrededor (Carlos, 6 oct 2026) ---- */
.sv-lista.sv-wa i{position:relative;overflow:visible}
.sv-lista.sv-wa i::before{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
background:conic-gradient(from 0deg,rgba(255,255,255,0) 0 62%,rgba(255,255,255,.95) 100%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
animation:svGiro 2.6s linear infinite}
@keyframes svGiro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sv-lista.sv-wa i::before{animation:none;opacity:0}}
/* WhatsApp "Consultar": la animacion NO da vueltas; es una onda que sale del centro del circulo hacia afuera y se desvanece (Carlos, 6 oct 2026) */
.sv-lista.sv-wa i::before{inset:0;background:none;-webkit-mask:none;mask:none;border:2px solid rgba(255,255,255,.9);box-sizing:border-box;animation:svOnda 2.2s ease-out infinite;opacity:0}
.sv-lista.sv-wa i::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;border:2px solid rgba(255,255,255,.9);box-sizing:border-box;opacity:0;animation:svOnda 2.2s ease-out 1.1s infinite}
@keyframes svOnda{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
@media (prefers-reduced-motion:reduce){.sv-lista.sv-wa i::before,.sv-lista.sv-wa i::after{animation:none;opacity:0}}
/* BARTENDER: la gente y el bartender estan a la derecha de la foto; se encuadra ahi para que el texto de abajo no los tape (Carlos, 6 oct 2026) */
.sv-rej .sv-foto[style*="svc-botellas"]{background-size:auto 128% !important;background-position:90% 8% !important}
.sv-rej .sv-foto[style*="svc-botellas"]{background-size:auto 100% !important;background-position:96% 0 !important}
/* MASAJES con la foto nueva (6 oct 2026): terapeuta y cliente a la derecha; foto a la altura de la tarjeta y anclada a la derecha */
.sv-rej .sv-foto[style*="svc-masajes"]{background-size:auto 100% !important;background-position:92% 0 !important}
.sv-rej .sv-foto[style*="svc-masajes"]{background-position:100% 0 !important}
/* Tres botones dentro de la foto: Ver lista de precios, Reservar (turquesa lleno) y Preguntar (WhatsApp). Si no caben, bajan a otra linea. */
.sv-sobre .sv-btns{flex-wrap:wrap}
.sv-sobre .sv-lista.sv-res{background:#10b2c2;color:#fff}
.sv-sobre .sv-lista.sv-res i{background:#fff;color:#10b2c2}
.sv-sobre .sv-lista.sv-wa{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.sv-sobre .sv-lista.sv-wa i{background:#10b2c2;color:#fff}
/* que los tres botones quepan en una sola linea tambien en espanol */
.sv-rej .sv-chef .sv-sobre{left:16px;right:16px}
.sv-sobre .sv-btns{gap:6px}
.sv-sobre .sv-lista{padding:3px 3px 3px 12px;gap:7px}
.sv-t .sv-sobre .sv-lista span{font-size:12.5px}
.sv-sobre .sv-lista i{width:26px;height:26px}
/* sin flechas en "Lista de precios" y "Reservar": asi los tres botones (con el WhatsApp de Preguntar) caben en una linea */
.sv-sobre .sv-lista:not(.sv-wa){padding:9px 16px}
.sv-sobre .sv-lista:not(.sv-wa) i{display:none}
.sv-sobre .sv-lista.sv-wa{padding:3px 3px 3px 14px}
.sv-sobre .sv-btns{align-items:center}
.sv-sobre .sv-lista{min-height:40px;box-sizing:border-box;align-items:center}
.sv-sobre .sv-lista:not(.sv-wa){padding:0 16px}
.sv-sobre .sv-lista.sv-wa{padding:0 4px 0 14px}
.sv-sobre .sv-lista.sv-wa i{width:30px;height:30px}
/* =====================================================================================================================
BOTONES DE LAS TARJETAS DEL CONCIERGE, version alta gama (Carlos, 6 oct 2026: "no estan lujosos ni esteticos").
Reservar: turquesa plano de la marca, con un aro suave que sale hacia afuera por el borde (nada encima del texto).
Lista de precios: cristal, con filete blanco fino. Preguntar (WhatsApp): solo texto con su icono, SIN animacion.
Letra pequena en mayusculas con espacio, como en un menu de hotel. Esta regla manda sobre las de arriba.
===================================================================================================================== */
.sv-rej .sv-sobre .sv-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px;margin-top:16px}
.sv-rej .sv-sobre .sv-btns .sv-lista{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:42px;padding:0 14px;gap:0;border-radius:999px;border:0;background:none;box-shadow:none;color:#fff;text-decoration:none;font:500 11px Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;box-sizing:border-box;transition:background .25s,box-shadow .25s,transform .25s}
.sv-rej .sv-sobre .sv-btns .sv-lista span{font:inherit;letter-spacing:inherit;color:inherit}
.sv-rej .sv-sobre .sv-btns .sv-lista i{display:none}
/* Reservar */
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res{background:#10b2c2;color:#fff;box-shadow:0 10px 24px -12px rgba(16,178,194,.9)}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid rgba(16,178,194,.85);pointer-events:none;opacity:0;animation:svSuave 3.4s ease-out infinite}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res:hover{background:#0fc1d3;transform:translateY(-1px)}
@keyframes svSuave{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.14,1.35);opacity:0}}
/* Lista de precios: cristal */
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa){background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa):hover{background:rgba(255,255,255,.24)}
/* Preguntar: solo texto, sin animacion */
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa{flex:0 0 100%;justify-content:flex-start;min-height:24px;padding:0 2px;background:none;box-shadow:none;font-weight:400;letter-spacing:.14em;color:rgba(255,255,255,.92)}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa i{display:inline-grid;order:-1;width:16px;height:16px;margin:0 8px 0 0;background:none;box-shadow:none;border-radius:0;color:#fff;place-items:center}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa i svg{width:16px;height:16px}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa i::before,.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa i::after{display:none !important;animation:none !important}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa:hover span{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after{animation:none;opacity:0}}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res{order:1}.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa){order:2}.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa{order:3}
.sv-rej .sv-sobre .sv-btns .sv-lista span{color:#fff !important;font-size:11px !important;letter-spacing:.16em !important;line-height:1}.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa span{font-size:11px !important;color:rgba(255,255,255,.92) !important}
/* =====================================================================================================================
RESERVAR LLEVA UNA FLECHITA BLANCA, EXACTAMENTE EN EL MEDIO, QUE HACE SENAS HACIA ABAJO (Carlos, 6 oct 2026: "en vez de la animacion por los
alrededores, una flechita blanca pequena que te haga senas hacia abajo de que es reserva"). Reemplaza al aro: ya no sale nada por el borde.
Solo en los "Reservar" que bajan al bloque de reservar (tarjetas y paginas); "Reservar y pagar" no la lleva.
===================================================================================================================== */
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res,.ch-acciones .a-res{padding-bottom:11px}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res{min-height:48px}
.ch-acciones .a-res{min-height:56px}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after,.ch-acciones .a-res::after{display:block;content:"";position:absolute;inset:auto;left:50%;bottom:7px;width:10px;height:10px;margin-left:-5px;border:0;border-radius:0;opacity:1;pointer-events:none;background:url("data:image/svg+xml;utf8,") center/10px no-repeat;animation:svSena 1.7s ease-in-out infinite}
.ch-acciones .a-res::after{bottom:9px}
@keyframes svSena{0%,100%{transform:translateY(-1.5px)}50%{transform:translateY(2.5px)}}
@media (prefers-reduced-motion:reduce){.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after,.ch-acciones .a-res::after{animation:none}}
.sv-rej .sv-sobre .sv-btns .sv-lista,.sv-rej .sv-sobre .sv-btns .sv-lista span{text-shadow:none !important}
/* La flecha va ARRIBA de la palabra "Reservar" (no abajo), con el estilo de la flecha de "Conoce nuestro Partner Program" (linea con punta, trazo redondeado), blanca, pequena, apuntando abajo y moviendose hacia abajo. */
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res,.ch-acciones .a-res{padding-top:15px;padding-bottom:0}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after,.ch-acciones .a-res::after{bottom:auto;top:8px;width:13px;height:13px;margin-left:-6.5px;background:url("data:image/svg+xml;utf8,") center/13px no-repeat;animation:svSena 1.6s ease-in-out infinite}
.ch-acciones .a-res::after{top:10px}
@keyframes svSena{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
/* TRANSPORTE: la pareja, el chofer y el frente de la camioneta caben en la tarjeta cuadrada, a la izquierda de la foto */
.sv-rej .sv-foto[style*="svc-transporte"]{background-size:auto 100% !important;background-position:9% 0 !important}
/* ============================================================
BOTONES DE LOS SERVICIOS, MAS FINOS (6 oct 2026)
Carlos: la letra de Reservar y Lista de precios "no tiene el lujo suficiente para algo de alto nivel". Misma Poppins, pero ligera,
en versalitas muy espaciadas, mas bajos y con un filete de luz en el borde. Sin brillo ni animacion.
============================================================ */
.sv-rej .sv-sobre .sv-btns{gap:10px}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-wa){min-height:44px;padding-left:10px;padding-right:10px;border-radius:999px}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-wa) span{font:400 10.5px Poppins,sans-serif !important;letter-spacing:.3em !important;text-transform:uppercase;padding-left:.3em;white-space:nowrap}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res{min-height:50px;background:#10b2c2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res span{font-weight:500 !important}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa){background:rgba(8,13,16,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa span{font:400 10px Poppins,sans-serif !important;letter-spacing:.28em !important}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after{width:11px;height:11px;margin-left:-5.5px;top:9px;opacity:.9}
/* Las tarjetas angostas: que las dos quepan sin partir la palabra */
@media (max-width:1100px){.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-wa) span{letter-spacing:.22em !important;font-size:10px !important}}
/* ============================================================
BOTONES DE LOS SERVICIOS, OPCION D (6 oct 2026)
Carlos escogio: Reservar en blanco con letra oscura y la flechita turquesa; Lista de precios en cristal ("cristal, cristal, cristal"):
translucido, muy desenfocado, con un filete claro y un reflejo arriba. Letra Montserrat, versalitas espaciadas.
============================================================ */
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-wa) span,.ch-acciones .a-res span,.ch-acciones .a-pre span{font-family:Montserrat,Poppins,sans-serif !important;font-size:11px !important;letter-spacing:.26em !important;text-transform:uppercase;font-weight:400 !important}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res{background:#fff;color:#0b0c0d;box-shadow:0 12px 28px -14px rgba(0,0,0,.55);min-height:52px}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res span{color:#0b0c0d !important;font-weight:500 !important}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res:hover{background:#fff;transform:translateY(-1px)}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after,.ch-acciones .a-res::after{background:url("data:image/svg+xml;utf8,") center/13px no-repeat;opacity:1}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa){min-height:52px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px -16px rgba(0,0,0,.5)}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa):hover{background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.14))}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa span{font-family:Montserrat,Poppins,sans-serif !important;font-weight:400 !important}
/* En la pagina del servicio el boton esta sobre fondo blanco y es turquesa: ahi la flecha se queda blanca */
.ch-acciones .a-res::after{background:url("data:image/svg+xml;utf8,") center/13px no-repeat}
/* CRISTAL DE VERDAD (6 oct 2026): Carlos: "se ve empanado, lo quiero cristal transparente". Sin desenfoque y sin velo blanco: solo el filete de luz, se ve la foto limpia detras.
Letra blanca pura sobre el cristal y negra pura sobre el blanco. */
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa){background:rgba(255,255,255,.04) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.9) !important}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa):hover{background:rgba(255,255,255,.14) !important}
.sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-res):not(.sv-wa) span{color:#fff !important;opacity:1;font-weight:500 !important;text-shadow:0 1px 10px rgba(0,0,0,.5) !important}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res span{color:#000 !important;font-weight:600 !important}
/* RESERVAR OTRA VEZ EN EL COLOR DE LA MARCA (6 oct 2026): Carlos: "el boton blanco al color de la marca y la flechita blanca otra vez" */
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res{background:#10b2c2;color:#fff;box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res:hover{background:#0fc1d3}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res span{color:#fff !important;font-weight:500 !important}
.sv-rej .sv-sobre .sv-btns .sv-lista.sv-res::after,.ch-acciones .a-res::after{background:url("data:image/svg+xml;utf8,") center/13px no-repeat}
.sv-rej .sv-foto[style*="decoracion-eduniana"]{background-position:center 35% !important}
/* ============================================================================================================================================
8 oct 2026 (Carlos): portada, "Nuestras propiedades". Frase sensorial arriba del titulo, tres villas del frente sin numero y con "Ver villa
completa", y "Ver todas nuestras propiedades en renta" con la flecha llamando la atencion sin parar.
============================================================================================================================================ */
.etq.etq-sens{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:500 clamp(17px,1.5vw,21px)/1.3 Syne,Poppins,sans-serif;letter-spacing:.005em;text-transform:none;color:#10b2c2}
.etq.etq-sens::before{content:"";flex:none;width:34px;height:2px;border-radius:2px;background:#10b2c2}
@keyframes flechaLlama{0%,100%{transform:translateX(-2px)}50%{transform:translateX(6px)}}
.vc-ver{display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;border-radius:999px;background:#fff;border:1.5px solid #10b2c2;font-size:13.5px;font-weight:600;color:#0b0c0d;letter-spacing:.01em;transition:background .25s,box-shadow .25s}
.vc-ver i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#10b2c2;color:#fff;flex:none}
.vc-ver svg{width:16px;height:16px;animation:flechaLlama 1.1s ease-in-out infinite}
.vs-tres .vc:hover .vc-ver{background:rgba(16,178,194,.08);box-shadow:0 14px 26px -18px rgba(16,178,194,.9)}
.vs-pie .btn-pill{padding:8px 8px 8px 34px;font-size:16px;gap:20px}
.vs-pie .btn-pill i{width:48px;height:48px}
.vs-pie .btn-pill svg{animation:flechaLlama 1.05s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vc-ver svg,.vs-pie .btn-pill svg{animation:none}}
@media (max-width:520px){.vs-tres .vc-fila{flex-wrap:wrap}.vc-ver{margin-left:auto}}
/* ---- 8 oct 2026 (Carlos, revision de la portada): titulo EXACTAMENTE centrado sobre las tres villas y mas arriba; sin brillo hacia afuera al pasar el puntero:
el boton "Ver villa completa" se llena por dentro con el color de la marca y la flecha se mueve ---- */
section.vs#villas{padding-top:34px}
section.vs#villas .vs-cab{justify-content:center;text-align:center;margin-bottom:34px}
section.vs#villas .vs-cab > div{width:100%}
section.vs#villas .vs-cab h2{text-align:center;margin-left:auto;margin-right:auto}
.vs-tres .vc .vc-ver{transition:background .25s,color .25s,border-color .25s;box-shadow:none}
.vs-tres .vc:hover .vc-ver{background:#10b2c2;color:#fff;border-color:#10b2c2;box-shadow:none}
.vs-tres .vc:hover .vc-ver i{background:#fff;color:#10b2c2}
.vs-tres .vc:hover .vc-ver svg{color:#10b2c2}
.vs-tres .vc:hover{box-shadow:0 34px 60px -46px rgba(11,12,13,.5)}
/* ============================================================================================================================================
8 oct 2026 (Carlos): debajo de "Choose where you want to wake up", tres fichas de gama (Luxury, Comfort, Essential) en lugar de tres villas.
============================================================================================================================================ */
.gm{display:flex;flex-direction:column;background:#fff;color:var(--tinta);border-radius:32px;overflow:hidden;text-decoration:none;box-shadow:0 30px 60px -42px rgba(11,12,13,.5);transition:transform .35s,box-shadow .35s}
.gm:hover{transform:translateY(-6px);box-shadow:0 34px 60px -46px rgba(11,12,13,.5)}
.gm-foto{position:relative;aspect-ratio:4/3.1;overflow:hidden;background:#e9eef0}
.gm-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gm:hover .gm-foto img{transform:scale(1.07)}
.gm-n{position:absolute;left:18px;top:18px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--tinta)}
.gm-cuerpo{display:flex;flex-direction:column;flex:1;padding:26px 28px 26px}
.gm-cuerpo h3{margin:0 0 8px;font:500 clamp(26px,2.4vw,32px)/1.1 Syne,Poppins,sans-serif;letter-spacing:-.015em}
.gm-cuerpo p{margin:0 0 22px;font-size:15px;line-height:1.6;color:#4a5558}
.gm .vc-fila{margin-top:auto}
.gm .vc-precio{font-size:14px;color:#4a5558}
.gm .vc-precio b{font-size:20px;font-weight:600;color:var(--tinta)}
.gm .vc-ver{transition:background .25s,color .25s,border-color .25s;box-shadow:none}
.gm:hover .vc-ver{background:#10b2c2;color:#fff;border-color:#10b2c2;box-shadow:none}
.gm:hover .vc-ver i{background:#fff;color:#10b2c2}
.gm:hover .vc-ver svg{color:#10b2c2}
@media (max-width:980px){.gm-foto{aspect-ratio:16/10}}
/* 8 oct 2026 (Carlos): "Community" arriba, en negrita, sobre el nombre de la comunidad (Casa Linda) */
.vc-lugar{display:flex;flex-direction:column;gap:2px}
.vc-lugar .vc-com{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0b0c0d}
/* 8 oct 2026 (Carlos): tarjeta con portada y tres fotos de las mejores debajo */
.vs-tres .vc-foto.vc-4{display:grid;grid-template-rows:minmax(0,1fr) 27%;gap:4px;aspect-ratio:4/4.4;background:#fff}
.vs-tres .vc-foto.vc-4::after{display:none}
.vs-tres .vc-foto.vc-4 > img.vc-g{position:relative;inset:auto;width:100%;height:100%;min-height:0;border-radius:32px 32px 0 0}
.vc-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-height:0}
.vc-mini img{position:static !important;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vc-mini img:first-child{border-radius:0 0 0 0}
.vs-tres .vc:hover .vc-foto.vc-4 > img.vc-g{transform:none}
.vs-tres .vc:hover .vc-mini img{transform:scale(1.05)}
.vc-mini{overflow:hidden}
/* 8 oct 2026 (Carlos): boton de cristal sobre la foto con el numero de la villa ("Villa 1108"); la foto se sigue viendo normal */
.vc-num{position:absolute;z-index:3;top:16px;left:16px;padding:8px 16px;border-radius:999px;font:600 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -14px rgba(4,14,18,.6);text-shadow:0 1px 6px rgba(4,14,18,.35);pointer-events:none}
/* 8 oct 2026 (Carlos): el boton de cristal va en el MEDIO de la foto con "Villa 1108" y "Ver listing completo"; ya no hay "Ver villa completa" abajo */
.vc-num{top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 26px;border-radius:26px;text-align:center;white-space:nowrap;text-transform:none;letter-spacing:0;transition:background .25s,transform .25s}
.vc-num b{font:600 14px Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.vc-num em{font:500 13px Poppins,sans-serif;font-style:normal;letter-spacing:.02em;opacity:.95}
.vs-tres .vc-foto.vc-4 .vc-num{top:calc((100% - 27% - 4px) / 2)}
.vc:hover .vc-num{background:rgba(255,255,255,.3);transform:translate(-50%,-50%) scale(1.04)}
/* 8 oct 2026 (Carlos): "Villa 1108" se queda en el medio, normal (solo el numero); "Ver listing completo" va como boton de cristal en la esquina de abajo a la derecha de la portada, justo encima de las tres fotos */
.vc-num{padding:12px 24px;gap:0}
.vc-num em{display:none}
.vc-lista{position:absolute;z-index:3;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;font:600 12.5px Poppins,sans-serif;letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -14px rgba(4,14,18,.6);text-shadow:0 1px 6px rgba(4,14,18,.35);transition:background .25s}
.vc-lista i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.28)}
.vc-lista svg{width:14px;height:14px}
.vc:hover .vc-lista{background:rgba(255,255,255,.32)}
.vs-tres .vc-foto.vc-4 .vc-lista{bottom:calc(27% + 4px + 16px)}
.vc-lista{background:rgba(4,14,18,.3);border-color:rgba(255,255,255,.5)}
.vc:hover .vc-lista{background:rgba(4,14,18,.45)}
/* 8 oct 2026 (Carlos): abajo de la portada, dos botones finos del tamano de la letra: izquierda "Villa 1108" en cristal; derecha "See full listing" en blanco con turquesa */
.vc-num{top:auto;left:14px;bottom:14px;transform:none;display:inline-flex;flex-direction:row;padding:5px 12px;border-radius:999px;gap:0}
.vc-num b{font:600 10.5px Poppins,sans-serif;letter-spacing:.14em;line-height:1.2}
.vc:hover .vc-num{transform:none;background:rgba(255,255,255,.3)}
.vs-tres .vc-foto.vc-4 .vc-num{top:auto;bottom:calc(27% + 4px + 14px)}
.vc-lista{right:14px;bottom:14px;gap:7px;padding:4px 4px 4px 12px;background:#fff;color:#0a8c99;border:0;font:600 11px Poppins,sans-serif;letter-spacing:.03em;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 20px -10px rgba(4,14,18,.6)}
.vc-lista i{width:18px;height:18px;background:#10b2c2;color:#fff}
.vc-lista svg{width:10px;height:10px}
.vc:hover .vc-lista{background:#fff;box-shadow:0 10px 24px -10px rgba(16,178,194,.9)}
.vs-tres .vc-foto.vc-4 .vc-lista{bottom:calc(27% + 4px + 14px)}
.vc-num{background:rgba(4,14,18,.24);border-color:rgba(255,255,255,.5)}
.vc:hover .vc-num{background:rgba(4,14,18,.38)}
.vc-lista{color:#0b0c0d}
.vc-lista i{background:rgba(16,178,194,.16);color:#10b2c2}
.vc-lista svg{width:11px;height:11px;stroke-width:2.8}
/* 8 oct 2026 (Carlos): la flecha de "See full listing" se mueve, rapida y sin parar, para llamar la atencion (como la de Reservar: "me vea, me vea, me vea") */
@keyframes vcFlecha{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
.vc-lista svg{animation:vcFlecha .75s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.vc-lista svg{animation:none}}
/* 8 oct 2026 (Carlos): "Reservar ahora" y la frase de lo que incluye el precio, en las tarjetas de la portada */
.pr-inc{margin:2px 0 0;font-size:12px;line-height:1.45;color:#5d676c}
.bk-ahora{display:flex;align-items:center;justify-content:center;margin-top:14px;padding:12px 18px;border-radius:999px;background:#10b2c2;color:#fff;font:600 13.5px Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s;box-shadow:0 14px 26px -16px rgba(16,178,194,.95)}
.bk-ahora:hover,.bk-ahora:focus-visible{background:#0e9fae;transform:translateY(-1px);outline:none}
/* 8 oct 2026 (Carlos): "Book now" mas de lujo y SIN brillo que se salga del boton hacia abajo. Turquesa de la marca plano, con aro interior fino, un destello que cruza SOLO por dentro (el boton recorta todo lo que se sale), y un circulo blanco con flecha a la derecha que avanza al pasar el puntero. Sin sombras hacia afuera. */
.bk-ahora{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;margin-top:16px;min-height:50px;padding:0 64px 0 28px;border-radius:999px;background:#10b2c2;color:#fff;font:600 12.5px Poppins,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-align:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.45);transition:background .3s,letter-spacing .3s;-webkit-tap-highlight-color:transparent}
.bk-ahora::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:bkBrillo 4.8s ease-in-out infinite}
.bk-ahora::after{content:"";position:absolute;top:50%;right:6px;width:38px;height:38px;margin-top:-19px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b2c2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .3s}
.bk-ahora:hover,.bk-ahora:focus-visible{background:#0fa6b5;letter-spacing:.24em;transform:none;outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.bk-ahora:hover::after,.bk-ahora:focus-visible::after{transform:translateX(-3px)}
.bk-ahora:active{background:#0e9aa8}
@keyframes bkBrillo{0%,55%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.bk-ahora::before{animation:none;display:none}}
/* 8 oct 2026 (Carlos): fuera el destello que cruzaba ("se ve reguerosa"); ahora se mueve la FLECHITA, sola y sin parar, como diciendo "reservame, reservame": va y viene dentro de su circulo */
.bk-ahora::before{display:none !important;animation:none !important}
.bk-ahora::after{animation:bkFlecha .8s ease-in-out infinite;background-position:calc(50% - 3px) center}
@keyframes bkFlecha{0%,100%{background-position:calc(50% - 3px) center}50%{background-position:calc(50% + 5px) center}}
.bk-ahora:hover::after,.bk-ahora:focus-visible::after{transform:none}
@media (prefers-reduced-motion:reduce){.bk-ahora::after{animation:none;background-position:center}}
/* 8 oct 2026 (Carlos): la flechita va del lado IZQUIERDO, apuntando al "Book now", y se mueve hacia el texto como haciendo senal */
.bk-ahora{padding:0 28px 0 64px}
.bk-ahora::after{right:auto;left:6px}
/* ---- 8 oct 2026 (Carlos): fichas del frente mas finas: el titulo en UNA sola linea (de punta a punta de la ficha) y la frase sensorial tambien en UNA linea, con su propia letra (Instrument Sans italica). El titulo corto lo pone el editor del calendario; mientras sea largo se corta con "...". ---- */
.vs-tres .vc h3,.vs-tres .vc h3.vc-pal{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(19px,1.7vw,23px);line-height:1.25;margin:2px 0 0}
.vs-tres .vc h3.vc-pal span{display:inline;white-space:nowrap}
.vc-frase{display:block;margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Instrument Sans",Poppins,sans-serif;font-style:italic;font-weight:400;font-size:16.5px;letter-spacing:0;word-spacing:0;line-height:1.35;color:#10b2c2}
/* 8 oct 2026 (Carlos): la frase sensorial en la numero 4 (Figtree cursiva), en NEGRITA: mas gordita (peso 600) y con las letras mas pegadas entre si */
.vc-frase{font-family:"Figtree",Poppins,sans-serif;font-style:italic;font-weight:600;letter-spacing:-.025em;word-spacing:-.04em}
/* ============================================================================================================
LA BARRA DE LA PORTADA, ALTA GAMA (8 oct 2026, Carlos: "es la estetica de ahi afuera... el no channel fees, no hidden fees, ponerle mas
estetica, mas alta gama"). Cristal esmerilado, doble filo turquesa fino (como la cabecera del portal), iconos de linea en cada campo,
separadores que se desvanecen, boton plano con flecha que avanza (sin brillo ni destello), entrada con subida suave, y los dos avisos
como dos capsulas de cristal con sellito turquesa. Nada de sombra que se salga de los botones.
============================================================================================================ */
@keyframes barraSube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reserva{background:rgba(255,255,255,.985);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:7px;
box-shadow:0 46px 80px -40px rgba(0,0,0,.7),0 0 0 3px rgba(255,255,255,.17),inset 0 0 0 1px rgba(16,178,194,.38);
animation:barraSube 1s cubic-bezier(.2,.8,.2,1) .4s both}
.reserva label{position:relative;padding:12px 26px 12px 62px;background-color:transparent;transition:background-color .25s}
.reserva label:hover,.reserva label.cl-activo{background-color:#eef9fa}
.reserva label::before{content:"";position:absolute;left:28px;top:50%;width:22px;height:22px;margin-top:-11px;background:center/contain no-repeat;opacity:.95}
.reserva label:nth-of-type(1)::before,.reserva label:nth-of-type(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b2c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.reserva label:nth-of-type(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b2c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.7'/%3E%3Cpath d='M4.5 20c.9-3.9 3.7-6 7.5-6s6.600 2.100 7.500 6'/%3E%3C/svg%3E")}
.reserva label + label{background-image:linear-gradient(transparent,#cfe0e3 30%,#cfe0e3 70%,transparent);background-size:1px 64%;background-repeat:no-repeat;background-position:0 50%;border-radius:0}
.reserva label:nth-of-type(1){border-radius:999px 0 0 999px}
.reserva label:nth-of-type(3){border-radius:0 999px 999px 0}
.reserva > label > span:first-child{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-d)}
.reserva .btn-disp{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:0 34px 0 38px;margin-left:8px}
.reserva .btn-disp span{font-size:14.5px;letter-spacing:.02em}
.reserva .btn-disp::after{content:"";position:static;inset:auto;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transform:none;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.reserva .btn-disp:hover::after{transform:translateX(5px)}
.reserva .btn-disp:hover{transform:none;filter:none}
/* los dos avisos: dos capsulas de cristal, letra pequena con aire entre letras, sellito turquesa */
.reserva-nota{display:flex !important;justify-content:center !important;align-items:center;gap:12px !important;margin:22px 0 0 !important;animation:barraSube 1s cubic-bezier(.2,.8,.2,1) .75s both}
.reserva-nota .gar{display:inline-flex;align-items:center;gap:10px;padding:9px 20px 9px 12px;border-radius:999px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.3)}
.reserva-nota .gar svg{width:19px;height:19px;padding:3.500px;border:1px solid #10b2c2;border-radius:50%;background:rgba(16,178,194,.16);color:#bff3f8;flex:none}
.reserva-nota .gar > span{font-size:11.500px !important;font-weight:500 !important;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.96) !important}
@media (max-width:820px){
.reserva label{padding:12px 12px 12px 46px;border-radius:18px !important}
.reserva label::before{left:14px;width:19px;height:19px;margin-top:-9.500px}
.reserva label + label{background-image:none}
.reserva .btn-disp{margin-left:0;padding:17px}
.reserva-nota{flex-wrap:wrap;gap:8px !important}
.reserva-nota .gar{padding:8px 14px 8px 10px}.reserva-nota .gar > span{font-size:10.500px !important;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){.reserva,.reserva-nota{animation:none}}
/* ---- 8 oct 2026 (Carlos): "Book" y "Price list" de las tarjetas de servicios tenian Montserrat en mayuscula espaciada (!important, mas especifico) y no cambiaban.
Ahora, igual que "simple listing" pero mas pegada: Poppins 600, mayuscula/minuscula normal, letras juntas. ---- */
html body .sv-rej .sv-sobre .sv-btns .sv-lista:not(.sv-wa) span,
html body .sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa span,
html body .sv-rej .sv-sobre .sv-btns .sv-lista,
html body .ch-acciones .a-res span,html body .ch-acciones .a-pre span,html body .ch-acciones a{
font-family:"Poppins",Arial,sans-serif !important;font-size:13.5px !important;font-weight:600 !important;font-style:normal !important;
letter-spacing:-.028em !important;word-spacing:.04em !important;text-transform:none !important}
/* ---- 8 oct 2026 (Carlos): en el telefono la portada perdia la calidad (una foto horizontal de 2048 px estirada a toda la altura de la pantalla se ve borrosa). En telefono: UNA sola foto fija, a su calidad completa, y la portada ya no ocupa toda la pantalla, para que la foto se estire menos. El pase de fotos queda solo para computadora. ---- */
@media (max-width:760px){
.hp{min-height:0}
.hp-fondo{background-position:center 55%}
}
/* Las 3 tarjetas de la portada, iguales a las del catalogo (11 oct 2026, Carlos): sin numero de villa, boton "Ver villa" y la frase en negro. */
.vc-frase{color:#0b0c0d !important;font-style:normal !important;font-weight:500 !important}
/* ============================================================
LAS 3 TARJETAS DE LA PORTADA, ESTILO DEL CATALOGO (11 oct 2026)
Carlos: "las 4 fotos y ese estilo se ve feo". Una foto grande, boton
"Ver villa" en cristal, titulo completo, frase en negro, datos y precio.
============================================================ */
.vs-tres .hc{display:flex;flex-direction:column;background:none;box-shadow:none;border-radius:0;color:#0b0c0d;text-decoration:none;opacity:1}
.vs-tres .hc-foto{position:relative;aspect-ratio:5/4;border-radius:26px;overflow:hidden;background:#e6eef0;box-shadow:0 28px 50px -34px rgba(11,12,13,.55)}
.vs-tres .hc-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.vs-tres .hc:hover .hc-foto img{transform:scale(1.06)}
.vs-tres .hc-ver{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;padding:5px 6px 5px 16px;border-radius:999px;background:rgba(255,255,255,.96);font:600 13px/1 Poppins,sans-serif;color:#0b0c0d;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.vs-tres .hc-ver i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#10b2c2;color:#fff}
.vs-tres .hc-ver svg{width:15px;height:15px}
.vs-tres .hc-txt{padding:16px 4px 0;display:flex;flex-direction:column;flex:1}
.vs-tres .hc-lug{margin:0;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6b777c}
.vs-tres .hc h3{margin:6px 0 4px;font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:#0b0c0d;display:block;overflow:visible;white-space:normal;min-height:0;-webkit-line-clamp:unset}
.vs-tres .hc-frase{margin:0;font-size:15px;color:#0b0c0d;font-weight:400}
.vs-tres .hc-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.vs-tres .hc-datos{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:#4a5558}
.vs-tres .hc-datos span{display:inline-flex;align-items:center;gap:7px}
.vs-tres .hc-datos b{font-weight:600;color:#0b0c0d}
.vs-tres .hc-datos svg{width:18px;height:18px;color:#10b2c2}
.vs-tres .hc-precio{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-align:right}
.vs-tres .hc-precio small{font-size:11.5px;color:#6b777c}
.vs-tres .hc-precio b{font-size:24px;font-weight:600;letter-spacing:-.02em;color:#0b0c0d}
@media (max-width:900px){.vs-tres{grid-template-columns:1fr;gap:34px}}