/* ============================================================
   SITIO v2 (4 oct 2026): el chat con personas, el pie nuevo, la seccion
   "por que reservar con nosotros" y los acabados de lujo.

   Carlos dicto: la barra de disponibilidad ya no es de WhatsApp (el sitio
   pasa a ser un buscador general); tiene que haber un espacio de chat con
   su cara y la de Merika; el pie se vuelve distinto a todo; y todo debe
   verse de lujo en el turquesa de la marca.
   Turquesa = var(--brand). Nada de negro mezclado con turquesa en degradados.
   ============================================================ */

/* ---------- EL CHAT CON PERSONAS ---------- */
.chat-btn{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:12px;border:0;cursor:pointer;
  background:#fff;color:var(--tinta);border-radius:999px;padding:8px 22px 8px 8px;font:inherit;
  box-shadow:0 0 0 1.5px var(--brand),0 18px 40px -12px rgba(11,12,13,.45);transition:transform .25s,box-shadow .25s}
.chat-btn:hover{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--brand),0 24px 46px -12px rgba(16,178,194,.55)}
.chat-caras{display:flex;flex:none}
.chat-caras img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 0 0 1.5px var(--brand);background:#222}
.chat-caras img + img{margin-left:-14px}
.chat-txt{display:flex;flex-direction:column;text-align:left;line-height:1.25}
.chat-txt > b{font-size:14px;font-weight:600;letter-spacing:.01em}
.chat-txt > b span{display:inline;font-size:inherit;color:inherit}
.chat-txt > span{font-size:11.5px;color:var(--gris);display:flex;align-items:center;gap:6px}
.chat-txt > span span{display:inline;font-size:inherit;color:inherit}
.chat-txt > span::before{content:"";width:8px;height:8px;border-radius:50%;background:#1fbf75;box-shadow:0 0 0 3px rgba(31,191,117,.22)}
.chat-btn.abierto{display:none}

.chat-panel{position:fixed;right:22px;bottom:22px;z-index:75;width:min(396px,calc(100vw - 28px));max-height:min(660px,calc(100vh - 44px));overflow:auto;
  background:var(--marfil);border-radius:26px;box-shadow:0 0 0 1.5px var(--brand),0 40px 90px -22px rgba(0,0,0,.55);
  transform:translateY(16px) scale(.97);opacity:0;visibility:hidden;transition:transform .28s,opacity .28s,visibility .28s}
.chat-panel.on{transform:none;opacity:1;visibility:visible}
.chat-cab{background:var(--brand);color:#fff;padding:22px 24px 20px;border-radius:26px 26px 0 0;position:relative}
.chat-cab .chat-caras img{width:54px;height:54px;border-color:var(--brand);box-shadow:0 0 0 2px #fff}
.chat-cab h3{margin:14px 0 4px;font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.chat-cab p{margin:0;font-size:13px;font-weight:400;opacity:.96;line-height:1.5}
.chat-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.chat-x:hover{background:rgba(255,255,255,.36)}
.chat-cuerpo{padding:20px 24px 24px}
.chat-cuerpo > p{font-size:13px;color:var(--gris);margin:0 0 12px}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chat-chips button{border:1px solid rgba(11,12,13,.2);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--tinta);transition:.2s}
.chat-chips button:hover{border-color:var(--brand)}
.chat-chips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chat-cuerpo textarea{width:100%;font:inherit;font-size:14px;color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:16px;padding:12px 14px;resize:vertical;min-height:84px}
.chat-cuerpo textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.chat-env{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;border:0;cursor:pointer;background:var(--brand);color:#fff;
  border-radius:999px;padding:14px 20px;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:filter .2s,transform .2s;box-shadow:0 14px 28px -14px rgba(16,178,194,.8)}
.chat-env:hover{filter:brightness(1.06);transform:translateY(-1px)}
.chat-env svg{width:18px;height:18px}
.chat-o{display:flex;align-items:center;gap:12px;margin:20px 0 12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);font-weight:600}
.chat-o::before,.chat-o::after{content:"";flex:1;height:1px;background:var(--linea)}
.chat-pers{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linea);border-radius:18px;background:#fff;margin-bottom:8px}
.chat-pers img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.chat-pers div{flex:1;min-width:0;line-height:1.25}
.chat-pers b{display:block;font-size:13.5px;font-weight:600}
.chat-pers i{display:block;font-style:normal;font-size:11.5px;color:var(--gris)}
.chat-pers a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(16,178,194,.5);color:var(--brand-d);transition:.2s;flex:none}
.chat-pers a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.chat-pers a svg{width:17px;height:17px}
@media (max-width:560px){
  .chat-btn{right:14px;bottom:14px;padding:6px 18px 6px 6px}
  .chat-txt span{display:none}
  .chat-panel{right:14px;bottom:14px}
}

/* ---------- EL PIE NUEVO ---------- */
.pie-sitio.v2{padding:72px 0 24px}
.pie-sitio.v2 .pie-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr);gap:46px}
.pie-sitio.v2 h4{font-size:22px;letter-spacing:-.01em;text-transform:none;font-weight:600;line-height:1.2;margin:0 0 12px}
.pie-sitio.v2 h4 b{font-weight:600;color:var(--brand)}
.pie-conecta{margin-top:22px}
.pie-conecta .pie-rotulo{margin-bottom:12px !important}
.pie-pers{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border:1px solid rgba(255,255,255,.16);border-radius:18px;margin-bottom:10px;background:rgba(255,255,255,.03)}
.pie-pers img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--brand)}
.pie-pers div{flex:1;min-width:0;line-height:1.3}
.pie-pers b{display:block;color:#fff;font-size:13.5px;font-weight:600}
.pie-pers span{display:block;font-size:12px;color:rgba(255,255,255,.62)}
.pie-pers a{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border-radius:999px;padding:9px 16px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;flex:none;transition:filter .2s}
.pie-pers a:hover{filter:brightness(1.1)}
.pie-pers a svg{width:15px;height:15px}
.pie-guia{background:rgba(255,255,255,.045);border:1px solid rgba(16,178,194,.38);border-radius:22px;padding:28px 26px}
.pie-guia .pie-rotulo{margin-bottom:8px !important}
.pie-guia form{display:grid;gap:10px;margin-top:6px}
.pie-guia input{width:100%;font:inherit;font-size:13.5px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px}
.pie-guia input::placeholder{color:rgba(255,255,255,.42)}
.pie-guia input:focus{outline:none;border-color:var(--brand)}
.pie-guia .boton{width:100%;justify-content:center}
.pie-guia .fino{font-size:11.5px !important;color:rgba(255,255,255,.5) !important;margin:8px 0 0 !important}
.pie-guia .gracias{display:none}
.pie-guia.listo form{display:none}
.pie-guia.listo .gracias{display:block}
.pie-guia .gracias b{display:block;color:#fff;font-size:17px;margin-bottom:6px}
.pie-manos{text-align:left}
.pie-sitio.v2 .pie-redes{margin-top:0}
@media (max-width:900px){.pie-sitio.v2 .pie-grid{grid-template-columns:1fr}}

/* ---------- POR QUE RESERVAR CON NOSOTROS (portada) ---------- */
.porque{background:var(--marfil);padding:92px 0 84px;position:relative}
.porque-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.porque .kick{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brand-d);margin:0 0 16px}
.porque h2{font-weight:300;font-size:clamp(32px,3.6vw,52px);line-height:1.06;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
.porque h2 b{font-weight:600}
.porque .p{font-size:16.5px;font-weight:300;color:var(--gris);line-height:1.7;margin:0 0 26px;max-width:520px}
.porque .firma{display:flex;align-items:center;gap:14px;margin-top:6px}
.porque .firma .chat-caras img{width:52px;height:52px}
.porque .firma span{font-size:13.5px;color:var(--gris);line-height:1.4}
.porque .firma b{display:block;color:var(--tinta);font-weight:600}
.razones{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.razon{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:26px 24px 24px;box-shadow:0 20px 40px -32px rgba(11,12,13,.5);transition:transform .25s,box-shadow .25s,border-color .25s}
.razon:hover{transform:translateY(-4px);border-color:rgba(16,178,194,.55);box-shadow:0 28px 50px -30px rgba(16,178,194,.5)}
.razon .ico{width:50px;height:50px;border-radius:16px;background:rgba(16,178,194,.1);display:grid;place-items:center;margin-bottom:16px}
.razon .ico svg{width:24px;height:24px;color:var(--brand-d)}
.razon b{display:block;font-size:16px;font-weight:600;margin-bottom:6px;line-height:1.25}
.razon span{display:block;font-size:13.5px;color:var(--gris);line-height:1.6}
@media (max-width:960px){.porque-in{grid-template-columns:1fr;gap:40px}.porque{padding:68px 0 60px}}
@media (max-width:560px){.razones{grid-template-columns:1fr}}

/* ---------- BOTON DE DISPONIBILIDAD DE LUJO (portada) ---------- */
.reserva .btn-disp{position:relative;overflow:hidden;background:var(--brand);box-shadow:0 18px 34px -16px rgba(16,178,194,.85),inset 0 1px 0 rgba(255,255,255,.35);transition:filter .25s,transform .25s,box-shadow .25s}
.reserva .btn-disp::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.reserva .btn-disp:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 24px 40px -16px rgba(16,178,194,.95),inset 0 1px 0 rgba(255,255,255,.4)}
.reserva .btn-disp:hover::after{transform:translateX(120%)}
.reserva .btn-disp svg{width:19px;height:19px}
.reserva-nota{display:flex;align-items:center;justify-content:center;gap:8px 30px;flex-wrap:wrap;max-width:900px;margin:18px 0 0 !important;font-size:13.5px !important;font-weight:500;color:rgba(255,255,255,.95) !important}
.reserva-nota .gar{display:inline-flex;align-items:center;gap:8px}
.reserva-nota .gar svg{width:16px;height:16px;flex:none;color:#10b2c2}

/* ---------- LA CABECERA: textos mas largos que antes ---------- */
.cab-menu .m-t{letter-spacing:.14em}

/* ============================================================
   BLANCO, NEGRO Y TURQUESA REAL (4 oct 2026)
   Carlos: "el fondo del sitio web blanco, no crema, y que trabajemos con negro y
   turquesa real de nuestra marca encima de blanco". Se quitaron los cremas, el
   verde esmeralda de propietarios, el zafiro de socios y la terracota de huespedes:
   las tres puertas son turquesa de la marca (#10b2c2); para LEER texto sobre blanco
   se usa el turquesa oscuro de la marca (--brand-d), y el negro es el oficial.
   ============================================================ */
:root{--c-dueno:#10b2c2;--c-socio:#10b2c2;--c-cliente:#10b2c2}
body{background:#fff}
.dn{--c:var(--brand-d);--c-claro:rgba(16,178,194,.10);--c-medio:rgba(16,178,194,.20)}
.dn-btn-pri{background:var(--brand);color:#fff}
.dn-btn-linea{color:var(--tinta);border-color:rgba(11,12,13,.3)}
.dn-btn-linea:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.dn-subnav a.on{background:var(--brand);color:#fff}
.dn-hero::after{background:linear-gradient(180deg,rgba(4,14,18,.58) 0%,rgba(4,14,18,.26) 38%,rgba(4,14,18,.84) 100%)}
.dn-hero{background:#0b0c0d}.dn-hero-bg{background-color:#0b0c0d}
.dn-card:hover{box-shadow:0 22px 40px -28px rgba(16,178,194,.55)}
.dn-form-sec{background:var(--tinta)}

/* ---------- LA PRIMERA PANTALLA DE PROPIETARIOS, AL MAS ALTO NIVEL ---------- */
.dn-hero-lujo .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
.dn-hero-lujo .dh-izq{max-width:980px}
.dn-hero-lujo .dn-kick{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:0;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;padding:9px 20px;margin-bottom:24px;box-shadow:0 16px 34px -14px rgba(16,178,194,.95);backdrop-filter:none}
.dn-hero-lujo h1{font-size:clamp(38px,5.1vw,78px);line-height:1.02;letter-spacing:-.035em;margin-bottom:22px;max-width:980px}
.dn-hero-lujo h1 b{font-weight:600;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:.032em;text-underline-offset:.16em;text-decoration-skip-ink:none}
.dn-hero-lujo .sub{font-size:clamp(17px,1.7vw,22px);font-weight:300;max-width:560px;margin-bottom:38px;color:rgba(255,255,255,.92)}
.dn-btn-lujo{position:relative;overflow:hidden;background:var(--brand);color:#fff;border-radius:14px;padding:19px 30px;font-size:13px;
  box-shadow:0 24px 44px -16px rgba(16,178,194,.95),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .25s,filter .25s,box-shadow .25s}
.dn-btn-lujo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.dn-btn-lujo:hover{transform:translateY(-3px);filter:brightness(1.05);box-shadow:0 30px 50px -16px rgba(16,178,194,1),inset 0 1px 0 rgba(255,255,255,.45)}
.dn-btn-lujo:hover::after{transform:translateX(120%)}
.dn-btn-lujo svg{width:18px;height:18px;transition:transform .25s}
.dn-btn-lujo:hover svg{transform:translateX(4px)}
.dn-hero-lujo .dn-btn-vidrio{border-radius:14px;padding:19px 30px;font-size:13px;border-color:rgba(255,255,255,.7)}
.dn-hero-lujo .dn-btn-vidrio:hover{background:#fff;color:var(--tinta)}
.dh-equipo{display:flex;gap:16px;align-items:center;width:min(380px,100%);background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.38);
  border-radius:24px;padding:16px 20px 16px 16px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.dh-equipo .chat-caras img{width:56px;height:56px;border-color:rgba(255,255,255,.9);box-shadow:0 0 0 2px var(--brand)}
.dh-equipo b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:#fff}
.dh-equipo span{display:block;font-size:12.5px;color:rgba(255,255,255,.82);margin-top:3px;line-height:1.4}
.dh-equipo a{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:#10b2c2;text-decoration:none}
.dh-equipo a:hover{color:#fff}
@media (max-width:960px){.dn-hero-lujo .wrap{grid-template-columns:1fr;gap:30px}.dh-equipo{width:100%}}

/* ---------- EL EQUIPO: SOLO CARLOS Y MERIKA ---------- */
.dn-equipo.dos{grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:56px}
.dn-equipo-nota{text-align:center;max-width:640px;margin:36px auto 0;font-size:15.5px;color:var(--gris);line-height:1.7}
@media (max-width:560px){.dn-equipo.dos{gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* La tarjeta del equipo va abajo a la derecha de la foto y el titular usa todo el ancho */
.dn-hero-lujo{min-height:min(84vh,740px)}
.dn-hero-lujo .wrap{display:block;position:relative}
.dn-hero-lujo .dh-izq{max-width:1040px}
.dn-hero-lujo h1{max-width:1040px}
@media (min-width:1100px){.dh-equipo{position:absolute;right:24px;bottom:64px}}
@media (max-width:1099px){.dh-equipo{margin-top:34px}}
/* Correccion: la tarjeta del equipo pasa a una pastilla de vidrio DEBAJO de los botones (arriba a la derecha chocaba con el chat flotante) */
@media (min-width:1100px){.dh-equipo{position:static;right:auto;bottom:auto}}
.dh-equipo{display:inline-flex;width:auto;max-width:560px;margin-top:38px;border-radius:999px;padding:10px 26px 10px 10px}
.dh-equipo b{font-size:14px;font-weight:600}
.dh-equipo span{font-size:12.5px;margin-top:1px}
.dh-equipo a{margin-top:4px}
@media (max-width:600px){.dh-equipo{border-radius:26px;display:flex;max-width:none}}
.dn-hero::after{background:linear-gradient(90deg,rgba(4,14,18,.68) 0%,rgba(4,14,18,.3) 52%,rgba(4,14,18,.08) 100%),linear-gradient(180deg,rgba(4,14,18,.3) 0%,rgba(4,14,18,0) 34%,rgba(4,14,18,.78) 100%)}
.so-hero{background:#fff !important}

/* Sin rayas (4 oct 2026): fuera las lineas dobles de la cabecera y las divisiones del menu */
.cab-raya{display:none !important}
.cab-menu li + li{border-left:0 !important}

/* ============================================================
   PIE CLARO (4 oct 2026): en la linea del portal. Sin negro, sin rayas, sin bordes.
   ============================================================ */
.pie-sitio,.pie-sitio.v2{background:#f4f8f9;color:#4a5558;padding:90px 0 30px}
.pie-sitio h4,.pie-sitio.v2 h4{color:var(--tinta)}
.pie-sitio.v2 h4 b{color:var(--res,#10b2c2)}
.pie-sitio p{color:#4a5558}
.pie-rotulo{color:var(--brand-d) !important}
.pie-pers{background:#fff;border:0;border-radius:22px;box-shadow:0 12px 30px -22px rgba(11,12,13,.35)}
.pie-pers b{color:var(--tinta)}
.pie-pers span{color:#6a7478}
.pie-pers img{box-shadow:none}
.pie-pers a{background:var(--res,#10b2c2);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;padding:10px 18px}
.pie-guia,.pie-duenos{background:#fff;border:0;border-radius:28px;box-shadow:0 20px 44px -28px rgba(11,12,13,.35)}
.pie-guia input,.pie-form textarea{background:#f4f8f9;border:0;border-radius:999px;color:var(--tinta);padding:14px 20px}
.pie-form textarea{border-radius:22px}
.pie-guia input::placeholder,.pie-form textarea::placeholder{color:#8a9498}
.pie-guia input:focus,.pie-form textarea:focus{outline:2px solid var(--res,#10b2c2);outline-offset:0}
.pie-guia .fino{color:#7a8488 !important}
.pie-guia .gracias b{color:var(--tinta)}
.pie-sitio .boton,.pie-guia .boton{border-radius:999px;background:var(--res,#10b2c2);border-color:var(--res,#10b2c2);color:#fff;text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:600;padding:15px 24px}
.pie-linea{background:#fff;color:var(--tinta);border-color:transparent}
.pie-redes a{border:0;background:#fff;color:var(--brand-d);box-shadow:0 10px 24px -16px rgba(11,12,13,.4)}
.pie-abajo,.pie-firma{border-top:0}
.pie-abajo{margin-top:56px}
.pie-marca{color:#6a7478}
.pie-firma{color:#8a9498}
.pie-firma b{color:var(--tinta)}

/* LA "g" DE SYNE (5 oct 2026): Carlos: "mira la G, se le corta el rabito de abajo, la razon ni idea".
   Medido en la fuente: la g de Syne baja 202 de 1000 unidades y su espacio permitido es de 275 y 495, asi que NO la corta el CSS ni el navegador:
   su cola es corta y abierta POR DISENO y, a tamaño de titulo, parece cortada. Se presta solo esa letra (U+0067) de Poppins, que es la letra
   del resto del sitio. Mismo nombre de familia ("Syne"): toda la pagina que usa Syne la toma sin cambiar nada mas. Va despues de la hoja de
   Google Fonts a proposito: con el mismo peso, gana la que se declara ultima para esa letra. Comparado lado a lado (Syne tal cual, Syne con g
   de Poppins, todo Poppins): es la que deja el mismo aspecto con la g completa. */
@font-face{font-family:"Syne";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format("woff2");unicode-range:U+0067}
@font-face{font-family:"Syne";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format("woff2");unicode-range:U+0067}

/* Boton "Check availability" de la portada (5 oct 2026): color plano exacto de la marca y sin brillo hacia afuera, igual que el de reservar de la ficha. El
   destello que ya tenia (::after) vive adentro (overflow hidden) y se queda. */
.reserva .btn-disp,.reserva .btn-disp:hover{background:#10b2c2;box-shadow:none;filter:none}

/* MENU DEL TELEFONO ALINEADO (5 oct 2026): "Owners" y "Partners" salian mas arriba y "Book" mas abajo. Causa: `.cab-menu li:first-child > a` (padding 12px 4px) es mas fuerte
   que `.cab-menu > li > a` (padding 4px 26px de sitio.css:354), asi que el primer enlace tenia 8 px mas de relleno arriba y abajo. Los tres iguales. */
@media (max-width:760px){
  .cab-menu{justify-content:space-around}
  .cab-menu > li > a,.cab-menu li:first-child > a{padding:12px 6px}
}

/* Pie (5 oct 2026): "solamente las redes sociales y el pie de pagina". Al quitar "Conecta con manos expertas" las redes quedaron solas en una columna; ahora van en
   su propia fila, centradas, debajo de los dos cuadros. */
.pie-sitio.v2 .pie-manos{grid-column:1/-1;display:flex;justify-content:center;padding-top:6px}
.pie-sitio.v2 .pie-manos .pie-redes{justify-content:center}
/* Dos columnas (5 oct 2026): el cuadro de "nos adaptamos" y el de la guia; las redes van debajo, centradas. La media query de 900 px de arriba las apila en el telefono. */
@media (min-width:901px){.pie-sitio.v2 .pie-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:1060px;margin-left:auto;margin-right:auto}}

/* ACCEDER, DE LUJO (5 oct 2026)

   Carlos: "en ese signing... vamos a darle un poco de lujo, a llevarlo a un mas alto nivel. Hay otro icono, otra llave mas pro".
   La llave es el SIMBOLO OFICIAL de la marca (logo-symbol.png: la llave con la palmera en el cuerpo), no un dibujo generico; sobre la foto se vuelve blanca
   con un filtro. El menu abre con una cabecera NEGRA de marca (#0b0c0d) con el simbolo en su turquesa, tarjetas con icono en tinte de marca que se llena de
   #10b2c2 al pasar, flecha que entra, y entrada escalonada. Nada de resplandor ni sombra turquesa: solo la sombra neutra del panel. Colores: unicamente el
   turquesa #10b2c2 y el negro #0b0c0d de la marca. */
.acceder-btn{height:46px;padding:0 20px 0 16px;gap:12px;font-weight:500;letter-spacing:.2em;color:#0b0c0d;border:1px solid #10b2c2;background:transparent}
.acceder-btn:hover{background:#10b2c2;border-color:#10b2c2;color:#fff}
.acc-llave{height:24px;width:auto;display:block;flex:none;transition:filter .25s}
.acceder-btn:hover .acc-llave{filter:brightness(0) invert(1)}
.cab.sobre .acceder-btn{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cab.sobre .acc-llave{filter:brightness(0) invert(1)}
.cab.sobre .acceder-btn:hover{background:#fff;color:#0b0c0d;border-color:#fff}
.cab.sobre .acceder-btn:hover .acc-llave{filter:none}
.acceder-btn .flecha{color:currentColor;opacity:.7}

.acceder-menu{width:372px;padding:0;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 34px 70px -30px rgba(11,12,13,.5),0 0 0 1px rgba(11,12,13,.06)}
.acceder-menu > .acc-cab{display:flex;align-items:center;gap:16px;width:auto;padding:20px 24px;background:rgba(16,178,194,.05);color:#0b0c0d;border-radius:0;cursor:default;box-shadow:0 1px 0 rgba(11,12,13,.07)}
.acceder-menu > .acc-cab:hover{background:rgba(16,178,194,.05)}
.acc-cab img{height:46px;width:auto;flex:none}
.acc-cab b{display:block;font-size:15px;font-weight:600;letter-spacing:.04em;color:#fff}
.acc-cab i{display:block;font-style:normal;font-size:11.5px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:#10b2c2;margin-top:4px}
.acceder-menu > [role="menuitem"]{align-items:center;gap:16px;padding:17px 22px;border-radius:0;position:relative;transition:background .2s}
.acceder-menu > [role="menuitem"]:hover,.acceder-menu > [role="menuitem"]:focus-visible{background:rgba(16,178,194,.07)}
.acceder-menu .pastilla{width:46px;height:46px;border-radius:15px;background:rgba(16,178,194,.1);color:#10b2c2;transition:background .2s,color .2s}
.acceder-menu > [role="menuitem"]:hover .pastilla,.acceder-menu > [role="menuitem"]:focus-visible .pastilla{background:#10b2c2;color:#fff}
.acceder-menu b{font-size:14.5px;font-weight:600;color:#0b0c0d}
.acceder-menu i{font-size:12.5px;color:#5d676c}
.acc-ir{margin-left:auto;flex:none;display:grid;place-items:center;width:30px;height:30px;color:#10b2c2;opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .2s}
.acc-ir svg{width:18px;height:18px}
.acceder-menu > [role="menuitem"]:hover .acc-ir,.acceder-menu > [role="menuitem"]:focus-visible .acc-ir{opacity:1;transform:none}
.acceder-menu.on > [role="menuitem"]{animation:accEntra .4s cubic-bezier(.2,.7,.2,1) both}
.acceder-menu.on > [role="menuitem"]:nth-of-type(1){animation-delay:.05s}
.acceder-menu.on > [role="menuitem"]:nth-of-type(2){animation-delay:.11s}
.acceder-menu.on > [role="menuitem"]:nth-of-type(3){animation-delay:.17s}
@keyframes accEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acceder-menu.on > [role="menuitem"]{animation:none}.acc-ir{transition:none}}
/* En el telefono el menu se ancla a la PANTALLA (14 px a cada lado), no al boton: asi queda centrado (5 oct 2026) */
@media (max-width:560px){.acceder-menu{position:fixed;left:14px;right:14px;top:78px;width:auto}}
.acceder-menu .acc-cab b{color:#fff;font-size:16px;letter-spacing:.05em}
.acceder-menu .acc-cab i{color:#10b2c2;font-size:11px;letter-spacing:.18em;margin-top:5px}

/* La cabecera del menu de Acceder lleva SOLO el simbolo (5 oct 2026): "no tiene que poner Pro Properties ahi, con el simbolo es suficiente". */
.acceder-menu > .acc-cab{justify-content:center;padding:18px 24px 16px}
.acc-cab img{height:46px}
/* Iconos del menu de Acceder: casa con cerradura (dueno), apreton de manos (socio), calendario con visto (reservar). Un poco mas grandes. */
.acceder-menu .pastilla svg{width:24px;height:24px}


/* ---- 8 oct 2026 (Carlos): "Agregar fecha" en lugar de dd/mm/aaaa ---- */
label.f-vacia{position:relative}
label.f-vacia input[type="date"]::-webkit-datetime-edit{color:transparent}
label.f-vacia input[type="date"]::-webkit-datetime-edit-fields-wrapper{color:transparent}
label.f-vacia input[type="date"]{color:transparent}
label.f-vacia::after{content:attr(data-ph);position:absolute;left:14px;bottom:12px;pointer-events:none;font:inherit;font-size:15px;font-weight:400;color:#6a7478;line-height:1.2}

/* ---- 8 oct 2026 (Carlos): "Comunidad: Casa Linda" y "Conoce la comunidad" en una linea, debajo de la foto ---- */
.com-fila{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 8px}
.com-fila .vc-lugar,.com-fila .vs-lugar{display:inline-flex;flex-direction:row;align-items:baseline;gap:6px;margin:0;text-align:left;font-size:13px;font-weight:500;color:#0b0c0d;letter-spacing:0;text-transform:none}
.com-fila .vc-com,.com-fila .vs-com{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0b0c0d}
.com-mas{display:inline-flex;align-items:center;gap:6px;font:600 12px Poppins,sans-serif;color:#0a8c99;cursor:pointer;text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(16,178,194,.4);padding-bottom:1px;transition:color .2s,border-color .2s}
.com-mas i{font-style:normal;display:inline-block;animation:comFlecha .9s ease-in-out infinite}
.com-mas:hover,.com-mas:focus-visible{color:#10b2c2;border-color:#10b2c2;outline:none}
@keyframes comFlecha{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.com-mas i{animation:none}}
.vd-com-linea{margin:14px 0 4px}
.vd-com-linea .com-fila{margin:0}
.vd-com-linea .vs-lugar{font-size:14.5px}
.cab-menu a{white-space:nowrap}

/* ---- 8 oct 2026 (Carlos): "Invertir en una villa como estas" FUERA de la caja de reservar: en la portada, arriba del catalogo y justo bajo la foto de cada ficha. Para el que mira y piensa "me gustaria tener una villa asi": un clic y va al sitio de venta. ---- */
.inv-fila{display:flex;justify-content:center;margin:6px auto 0}
.inv-banda{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;max-width:100%;padding:11px 22px;border-radius:999px;text-decoration:none;font:400 13.5px Poppins,sans-serif;color:#2c3236;background:rgba(16,178,194,.08);border:1px solid rgba(16,178,194,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:background .2s,border-color .2s}
.inv-banda svg{flex:none;width:18px;height:18px;color:#10b2c2}
.inv-banda .ib-t{font-weight:300}
.inv-banda b{font-weight:600;color:#0b0c0d;border-bottom:1px solid rgba(16,178,194,.55);padding-bottom:1px}
.inv-banda i{font-style:normal;color:#10b2c2;display:inline-block;animation:comFlecha .9s ease-in-out infinite}
.inv-banda:hover{background:rgba(16,178,194,.16);border-color:#10b2c2}
.inv-cat{margin:4px auto 16px;width:max-content}
.vd-com-linea .inv-banda{margin:10px 0 0;width:max-content;max-width:100%}
@media (prefers-reduced-motion:reduce){.inv-banda i{animation:none}}
@media (max-width:640px){.inv-banda{border-radius:22px;padding:11px 16px;font-size:13px}.inv-cat{width:auto}}
/* en las tarjetas la linea de la comunidad cabe en un solo renglon: el lugar se acorta con "..." y el enlace no se parte */
.vc .com-fila,.vs-tarj .com-fila{flex-wrap:nowrap;gap:8px}
.vc .com-fila .vc-lugar,.vs-tarj .com-fila .vs-lugar{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:12.5px}
.vc .com-mas,.vs-tarj .com-mas{flex:none;font-size:11.5px}

/* ---- 8 oct 2026 (Carlos): botones de cotizar, reservar y lista de precios con la letra de la frase sensorial (Figtree), DERECHA y en negrita ---- */
.sv-lista,.ch-acciones a,.a-res,.a-pre,.a-sh,#dcEnviar{font-family:"Figtree",Poppins,sans-serif;font-style:normal;font-weight:600}

/* ---- 8 oct 2026 (Carlos): "Request a quote / Book / Price list, etcetera" cambian de letra: la de los titulares ("simple listing", Poppins en negrita) pero
   MAS PEGADA: las letras mas juntas entre si, derecha (no cursiva). Reemplaza al Figtree de arriba en estos botones. ---- */
.sv-lista,.sv-lista *,.ch-acciones a,.ch-acciones a *,.a-res,.a-res *,.a-pre,.a-pre *,.a-sh,.a-sh *,#dcEnviar,#dcEnviar *,
.dc-fe-btn,.dc-fe-btn span,.vd-reservar,.vd-reservar *,.bk-ahora,.vs-ir,.vs-ir *,.vd-gal-book a,.btn-disp span,.btn-pill > span{
  font-family:"Poppins",Arial,sans-serif !important;font-style:normal !important;font-weight:600 !important;letter-spacing:-.028em !important;word-spacing:.04em;text-transform:none !important}

/* ---- 8 oct 2026 (Carlos): el cuadro de "cuentanos que buscas" del pie no se notaba (gris clarito sin borde): ahora se ve que es para escribir, con borde turquesa fino,
   fondo blanco y una sombra suave; y debajo del titulo, dos frases de ejemplo que se tocan y lo llenan. ---- */
.pie-form textarea{background:#fff !important;border:1.5px solid rgba(16,178,194,.7) !important;border-radius:22px;padding:16px 20px;min-height:116px;box-shadow:0 14px 30px -22px rgba(16,178,194,.7),inset 0 1px 0 rgba(255,255,255,.9);transition:border-color .2s,box-shadow .2s}
.pie-form textarea::placeholder{color:#7d8a8f}
.pie-form textarea:hover{border-color:#10b2c2 !important}
.pie-form textarea:focus{outline:none !important;border-color:#10b2c2 !important;box-shadow:0 0 0 4px rgba(16,178,194,.16),0 14px 30px -22px rgba(16,178,194,.8)}
.pie-ejem{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 14px}
.pie-ejem > span{flex:1 1 100%;font-size:12.5px;color:#6a7478;margin:0 0 2px}
.pie-ejem button{border:1px solid rgba(16,178,194,.55);background:#f0fafb;color:#0b0c0d;border-radius:999px;padding:8px 16px;font:500 13px Poppins,Arial,sans-serif;letter-spacing:-.01em;cursor:pointer;text-align:left;transition:background .2s,border-color .2s}
.pie-ejem button:hover{background:#dff5f7;border-color:#10b2c2}
.pie-ejem button span{font:inherit}
.pie-guia input{background:#fff !important;border:1.5px solid rgba(16,178,194,.45) !important;transition:border-color .2s,box-shadow .2s}
.pie-guia input:hover{border-color:#10b2c2 !important}
.pie-guia input:focus{outline:none !important;border-color:#10b2c2 !important;box-shadow:0 0 0 4px rgba(16,178,194,.16)}

/* ---- 8 oct 2026 (Carlos): pie de pagina de cierre. Abajo, una sola franja: a la izquierda el logo con "© 2026 Pro Properties DR, S.R.L. ... Todos los derechos reservados" y a la derecha "Sitio desarrollado por Peralta Pro Studio". ---- */
.pie-abajo{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pie-abajo .pie-firma{margin:0;text-align:right;font-size:12.5px}
.resal-m{color:#10b2c2;font-weight:600}
@media (max-width:700px){.pie-abajo{flex-direction:column;align-items:flex-start;gap:14px}.pie-abajo .pie-firma{text-align:left}}

/* ---- 8 oct 2026 (Carlos): el RNC ya no va pegado al (c); abajo del logo van los datos de la empresa en lineas y, al final, los derechos reservados ---- */
.pie-marca{align-items:flex-start}
.pie-datos{display:flex;flex-direction:column;gap:2px;line-height:1.5}
.pie-datos > b{font-weight:600;color:#0b0c0d}
.pie-datos a{color:inherit;text-decoration:none}
.pie-datos a:hover{color:#10b2c2}
.pie-marca .pie-res{display:block;margin-top:8px}

/* ---- 8 oct 2026 (Carlos): el cierre del pie va a lo largo y corto: sin logo ni datos de contacto, una sola frase centrada que en el telefono baja a dos renglones sin verse rara ---- */
.pie-abajo{display:block;margin-top:44px;padding-top:0;text-align:center}
.pie-fin{margin:0 auto;max-width:900px;font-size:12.5px;line-height:1.7;color:#6a7478}
.pie-fin b{font-weight:600;color:#0b0c0d}

/* ---- 8 oct 2026 (Carlos): el boton "Enviar por WhatsApp" del chat no lleva brillo hacia abajo ("se ve regueroso"): plano, sin sombra ---- */
.chat-env,.chat-env:hover,.pie-sitio .boton,.pie-sitio .boton:hover,.pie-guia .boton,.pie-guia .boton:hover{box-shadow:none !important;filter:none}

/* ---- 8 oct 2026 (Carlos): "en el telefono no deja cambiar el idioma". El selector ES / EN estaba escondido en telefono (`.idioma{display:none}`). Ahora se ve, chiquito y a un lado de "Acceder". ---- */
@media (max-width:760px){
  .cab-der{display:flex;align-items:center;gap:6px}
  .idioma{display:flex !important;gap:0}
  .idioma button{font-size:11.5px;letter-spacing:.08em;padding:8px 6px;min-width:30px}
}

/* ---- 8 oct 2026 (Carlos, captura en Descargas): "una flechita que se ve muy gorda". Las flechas de los botones redondos (Ver todas nuestras propiedades, Conoce como trabajamos, Pedir cotizacion, Lista de precios) llevaban circulo grande (44 a 48 px) y trazo grueso (2.2). Ahora: circulo de 38 px, flecha de 15 px y trazo fino de 1.6; y en telefono el texto deja de pasar por debajo del circulo. ---- */
html body .btn-pill i,html body .vs-pie .btn-pill i{width:38px;height:38px}
html body .btn-pill svg,html body .vs-pie .btn-pill svg,html body .dc-fe-btn i svg,html body .sv-lista i svg{width:15px;height:15px;stroke-width:1.6}
html body .btn-pill{gap:14px;padding:6px 6px 6px 26px;max-width:100%;font-size:15px}
html body .vs-pie .btn-pill{padding:6px 6px 6px 28px;font-size:15.5px;gap:16px}
html body .btn-pill > span{min-width:0;white-space:normal;text-align:left;line-height:1.25}
html body .btn-pill i{flex:none}
html body .dc-fe-btn i{width:34px;height:34px}
html body .sv-lista i{width:30px;height:30px}

/* ---- 8 oct 2026 (Carlos: "lupea los botones y todos los detalles"): revision automatica a 400 px en 10 paginas. Lo que salio y se arreglo: ----
   1) "Conoce mas / Learn more" medía 19 px de alto: casi imposible de tocar con el dedo. Se agranda el area que se toca (sin mover el texto).
   2) "Preguntar / Ask" de las tarjetas de servicios medía 29 px: minimo 36 px.
   3) "Compartir" de la ficha traia un brillo turquesa hacia afuera: plano.
   4) "Send on WhatsApp" de socios seguia en Montserrat mayuscula espaciada: ahora la letra de los titulares, mas pegada, como los demas. */
html body .com-mas{position:relative}
html body .com-mas::after{content:"";position:absolute;left:-8px;right:-8px;top:-10px;bottom:-10px}
html body .sv-lista.sv-wa{min-height:36px}
html body .vd-comp,html body .vd-comp:hover{box-shadow:none !important}
html body .sa-btn,html body .sa-btn span{font-family:"Poppins",Arial,sans-serif !important;font-weight:600 !important;font-size:15px !important;letter-spacing:-.028em !important;text-transform:none !important}

/* ---- 8 oct 2026 (Carlos, captura del telefono): el menu de arriba en español se cortaba ("OBRA" en vez de OBRAS). En telefono las 5 opciones deben caber enteras: letras un poco mas juntas y menos relleno a los lados. ---- */
@media (max-width:760px){
  html body .cab-menu .m-t{font-size:10.5px;letter-spacing:.05em}
  html body .cab-menu > li > a,html body .cab-menu li:first-child > a{padding:12px 2px}
  html body .cab-menu{overflow:visible}
}
html body .sv-rej .sv-sobre .sv-btns .sv-lista.sv-wa{min-height:36px}
/* ---- 8 oct 2026 (Carlos): el menu "Obras" pasa a "Mantenimiento" / "Maintenance". En español es una palabra larga: en telefono las 5 opciones deben seguir cabiendo en una fila. ---- */
@media (max-width:760px){
  html body .cab-menu .m-t{font-size:10px;letter-spacing:.02em}
  html body .cab-menu > li > a,html body .cab-menu li:first-child > a{padding:12px 1px}
}
@media (max-width:760px){
  html body .cab .cab-menu .m-t{font-size:10px;letter-spacing:.02em}
  html body .cab .cab-menu > li > a,html body .cab .cab-menu li:first-child > a{padding:12px 1px}
}
@media (max-width:760px){ html body .cab .cab-menu{justify-content:space-between;width:100%} }