/* ============================================================
   EL SITIO DE PRO PROPERTIES · lo que comparten todas las paginas
   26 sep 2026

   Carlos: "este es nuestro sitio web, donde los clientes van a
   reservar... y disena de manera asquerosamente lujosa la cabeza de
   esa pagina arriba". La cabecera, la linea de puertas, la ventana del
   dueno y el pie viven AQUI y en sitio.js, una sola vez: si cada pagina
   llevara su copia, el dia que cambie un telefono habria siete sitios
   que acordarse.

   SIN PLAYFAIR. Carlos, 25 sep: "esa letra no me gusta". Todo es
   Poppins: el lujo lo dan el aire, el peso ligero en lo grande y el
   espaciado de las mayusculas, no una letra con adornos.
   ============================================================ */
:root{
  --brand:#10b2c2;       /* turquesa oficial del logo */
  --brand-d:#10b2c2;     /* el mismo, oscurecido, solo para leer sobre claro */
  --tinta:#0b0c0d;       /* negro oficial */
  --gris:#5d676c;
  --linea:#e6eaec;
  --oro:#c2974e;         /* solo detalles finos */
  /* CALIDO, NO BLANCO (26 sep 2026). Carlos: "los colores de mi marca,
     blanco y turquesa, en este sitio dan esa sensacion de muerte, de
     santidad". Blanco puro con turquesa es hospital. El fondo es marfil,
     las secciones arena, y el turquesa queda para acentos chicos. */
  /* UN COLOR POR PUBLICO (26 sep 2026). Carlos: "tenemos que usar
     diferentes colores, no importa que no sean los de la marca... no
     chillones, pero vivos". El mismo publico lleva SIEMPRE su color, en
     el menu, en las tarjetas y en su pagina. */
  /* Y de joya, no de aplicacion (segunda vuelta): Carlos, "colores alta
     gama de acuerdo a lo que se trate". El verde de la tierra y el jardin
     para el dueno, el zafiro del mar y la confianza para el socio, la
     terracota del atardecer y los techos de Sosua para el huesped. */
  --c-dueno:#0e7a5a;     /* esmeralda profundo */
  --c-socio:#2b4ea2;     /* zafiro */
  --c-agente:#7b2fbe;    /* morado, el mismo del canal Agent del calendario */
  --c-cliente:#c75b39;   /* terracota */
  --c-mant:#d1650f;      /* naranja de obra: el color del casco y la señal de trabajo, para remodelaciones y mantenimiento (6 oct 2026) */
  /* La letra de los titulos. Cormorant Garamond se probo y Carlos la tumbo
     (26 sep 2026: "absoluta basura de letra"). NO volver a proponer serifas
     finas: ni Playfair ni Cormorant. */
  --serif:Poppins,system-ui,sans-serif;
  --marfil:#ffffff;
  --arena:#f4f7f8;
  --crema:#f4f7f8;
  --crema-2:#f8fafb;
  --alto-cab:0px;        /* lo mide sitio.js */
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--tinta);background:var(--marfil);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:clip}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
@media (max-width:560px){.wrap{padding:0 16px}}

/* ============================================================
   LA CABECERA · VERSION B, "COMO UN RESORT" (26 sep 2026)
   Carlos escogio la B de `_cabeceras.html`: en la portada la barra flota
   transparente sobre la foto, con el logo en blanco, y al bajar se vuelve
   marfil con el logo a color (y asi es siempre en las paginas de adentro).
   Tres cosas que pidio al verla:
     · la raya doble turquesa va ARRIBA, encima del logo, no debajo;
     · entre las palabras NO va el "=" (se leia como signo de igual);
     · "buscarle lujo al propietario, al socio, al cliente": cada palabra
       lleva debajo, chiquito, lo que es. Separadas por un filete fino.
   Sin negro arriba: Acceder es de cristal sobre la foto y con borde
   turquesa sobre el marfil.
   ============================================================ */
.cab{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  box-shadow:0 1px 0 rgba(11,12,13,.06),0 18px 40px -30px rgba(11,12,13,.35);
  transition:background .35s ease,box-shadow .35s ease}
/* La raya doble, arriba del todo, de borde a borde con margen */
.cab-raya{height:5px;margin:6px 0 0;border-top:1px solid var(--brand);border-bottom:1px solid var(--brand);transition:border-color .35s}
.cab-in{display:flex;align-items:center;gap:44px;height:92px;transition:height .35s ease}
.cab-logo{display:block;line-height:0;flex:none;position:relative}
.cab-logo img{height:58px;width:auto;transition:height .35s ease,opacity .3s}
.cab-logo .l-blanco{position:absolute;left:0;top:0;opacity:0}

/* Las tres puertas: la palabra y, debajo, lo que es */
.cab-menu{display:flex;align-items:stretch;margin:0;padding:0;list-style:none}
.cab-menu li + li{border-left:1px solid rgba(11,12,13,.14)}
.cab-menu > li > a{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:4px 30px;transition:color .2s}
.cab-menu li:first-child > a{padding-left:0}
.cab-menu .m-t{font-size:12.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#23282b;position:relative;align-self:flex-start}
.cab-menu .m-d{font-size:11.5px;font-weight:300;letter-spacing:.02em;color:#7a7a74}
.cab-menu .m-t::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--brand);transition:right .3s ease}
.cab-menu a:hover .m-t::after,.cab-menu a.on .m-t::after{right:.28em}

.cab-der{display:flex;align-items:center;gap:18px;margin-left:auto}
.idioma{display:flex;gap:2px}
.idioma button{border:0;background:none;color:#8b8680;font:inherit;font-size:11px;font-weight:500;letter-spacing:.16em;padding:6px 5px;cursor:pointer}
.idioma button.on{color:var(--tinta);box-shadow:inset 0 -1.5px 0 var(--brand)}
.acceder-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:inherit;font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;border-radius:999px;padding:13px 24px;
  background:transparent;color:var(--brand-d);border:1px solid var(--brand);transition:background .25s,color .25s,border-color .25s}
.acceder-btn svg{width:16px;height:16px;flex:none}
.acceder-btn:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

/* ---- SOBRE LA FOTO (solo la portada, arriba del todo) ----
   En la portada la barra es fija SIEMPRE: si pasara de fija a pegajosa al
   bajar, la pagina daria un brinco del alto de la barra. */
body[data-cabecera="foto"] .cab{position:fixed;left:0;right:0}
.cab.sobre{background:linear-gradient(180deg,rgba(6,20,24,.62),rgba(6,20,24,0));
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.cab.sobre .cab-raya{border-color:rgba(16,178,194,.7)}
.cab.sobre .l-color{opacity:0}
.cab.sobre .l-blanco{opacity:1}
.cab.sobre .cab-menu li + li{border-left-color:rgba(255,255,255,.28)}
.cab.sobre .m-t{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.cab.sobre .m-d{color:rgba(255,255,255,.72)}
.cab.sobre .m-t::after{background:#10b2c2}
.cab.sobre .idioma button{color:rgba(255,255,255,.55)}
.cab.sobre .idioma button.on{color:#fff;box-shadow:inset 0 -1.5px 0 #10b2c2}
.cab.sobre .acceder-btn{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cab.sobre .acceder-btn svg{color:#10b2c2}
.cab.sobre .acceder-btn:hover{background:#fff;color:var(--tinta)}

/* Al bajar, la barra se aprieta */
.cab.chica .cab-in{height:70px}
.cab.chica .cab-logo img{height:40px}
.cab.chica .m-d{display:none}

@media (max-width:1100px){
  .cab-in{gap:24px}
  .cab-menu > li > a{padding:4px 18px}
  .cab-menu .m-d{display:none}
}
@media (max-width:760px){
  .cab-raya{margin:6px 0 0}
  .cab-in{height:auto;flex-wrap:wrap;gap:0;padding-top:10px}
  .cab-logo img{height:36px}
  .idioma{display:none}
  .acceder-btn{padding:10px 16px;font-size:11px;letter-spacing:.14em}
  .cab-menu{order:3;width:100%;justify-content:space-between;margin-top:8px;border-top:1px solid rgba(11,12,13,.1)}
  .cab.sobre .cab-menu{border-top-color:rgba(255,255,255,.2)}
  .cab-menu li + li{border-left:0}
  .cab-menu > li > a,.cab-menu li:first-child > a{padding:12px 4px}
  .cab-menu .m-t{font-size:10.5px;letter-spacing:.16em}
  .cab.chica .cab-in{height:auto}
}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;cursor:pointer;
  font:inherit;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:14px 26px;border:1px solid transparent;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.boton svg{width:16px;height:16px;flex:none}
.boton-pri{background:var(--tinta);color:var(--marfil)}
.boton-pri:hover{background:#000;transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(11,12,13,.6)}
.boton-linea{background:transparent;color:var(--tinta);border-color:rgba(11,12,13,.3)}
.boton-linea:hover{border-color:var(--tinta);background:var(--tinta);color:var(--marfil)}
.boton-claro{background:var(--marfil);color:var(--tinta)}
.boton-claro:hover{background:#fff}

/* ============================================================
   LA CABEZA DE CADA PAGINA DE ADENTRO
   ============================================================ */
.pag-cabeza{background:var(--crema);padding:78px 0 64px;position:relative;overflow:hidden}
.pag-cabeza::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(194,151,78,.25)}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brand-d);font-weight:600;margin:0 0 18px}
.kicker::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.6}
.pag-cabeza h1{font-weight:300;font-size:clamp(36px,5.2vw,64px);line-height:1.06;letter-spacing:-.02em;margin:0 0 20px;max-width:900px}
.pag-cabeza h1 b{font-weight:600}
.pag-cabeza p{font-size:clamp(15px,1.5vw,18px);font-weight:300;color:#3d4448;max-width:640px;margin:0}

.seccion{padding:76px 0}
.seccion.crema{background:var(--crema-2)}
.seccion h2{font-weight:300;font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:-.015em;margin:0 0 14px}
.seccion h2 b{font-weight:600}
.seccion .intro{color:var(--gris);max-width:640px;margin:0 0 40px}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.rejilla{grid-template-columns:1fr}}
.pieza{background:#ffffff;border:1px solid var(--linea);border-radius:18px;padding:28px 26px}
.pieza .ico{width:46px;height:46px;border-radius:14px;background:var(--crema);display:grid;place-items:center;margin-bottom:18px}
.pieza .ico svg{width:22px;height:22px;color:var(--brand-d)}
.pieza h3{font-size:17px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.pieza p{font-size:14px;color:var(--gris);margin:0}
.llamado{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  background:var(--tinta);color:#fff;border-radius:22px;padding:38px 40px;margin-top:10px}
.llamado h3{font-weight:300;font-size:clamp(22px,2.4vw,30px);margin:0;letter-spacing:-.01em}
.llamado h3 b{font-weight:600}
.llamado .boton-turq{padding:15px 26px}

/* ============================================================
   LA VENTANA DEL DUENO
   ============================================================ */
.velo{position:fixed;inset:0;z-index:100;background:rgba(8,12,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:18px}
.velo.on{display:flex}
.ventana{width:100%;max-width:440px;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;background:var(--marfil);border-radius:22px;padding:36px 34px 30px;position:relative;
  box-shadow:0 2px 0 var(--brand),0 4px 0 var(--marfil),0 5px 0 var(--brand),0 40px 90px -20px rgba(0,0,0,.45);
  animation:subir .28s ease both}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ventana{animation:none}}
.ventana .cerrar{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--crema);
  cursor:pointer;font-size:20px;line-height:1;color:var(--gris)}
.ventana .cerrar:hover{color:var(--tinta)}
.ventana img.logo{height:40px;display:block;margin-bottom:22px}
.ventana h2{font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.015em;margin:0 0 8px}
.ventana h2 b{font-weight:600}
.ventana > p{font-size:13.5px;color:var(--gris);margin:0 0 20px}
.campo{display:block;margin-bottom:13px}
.campo span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.campo input{width:100%;font:inherit;font-size:15px;padding:13px 15px;border:1px solid #d9d4ca;border-radius:12px;background:#ffffff}
.campo input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent;background:#fff}
.ventana .error{min-height:18px;font-size:13px;font-weight:600;color:#e60000;margin:2px 0 10px}
.ventana .boton{width:100%;padding:15px}
.ventana .nota{font-size:12px;color:var(--gris);margin:16px 0 0;text-align:center}
.ventana .nota a{color:var(--tinta);font-weight:500}
/* LA VENTANA DEL DUENO EN EL TELEFONO (5 oct 2026). Carlos: se cortaba arriba y abajo y los lados parecian la foto de un telefono. Era una tarjeta centrada un poco mas alta que la pantalla. En el telefono ahora es una HOJA que sube desde abajo, a todo el ancho, que nunca pasa de la pantalla (`dvh`) y se desplaza por dentro si hace falta; con menos aire para que quepa sin desplazar. */
@media (max-width:560px){
  .velo{padding:0;align-items:flex-end}
  .ventana{max-width:none;max-height:100vh;max-height:100dvh;border-radius:24px 24px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -2px 0 var(--brand),0 -30px 60px -20px rgba(0,0,0,.4)}
  .ventana img.logo{height:34px;margin-bottom:16px}
  .ventana h2{font-size:26px}
  .ventana > p{margin-bottom:14px}
  .campo{margin-bottom:10px}
  .ventana .error{min-height:16px;margin-bottom:8px}
}


/* ============================================================
   EL PIE: copia de la forma del pie del sitio de VENTA (26 sep 2026).
   Los valores salen de `Web — Realtor DR\assets\styles.css` (footer,
   .foot-grid, .foot-bottom, .foot-firma, .socials): negro, tres
   columnas, rotulos en mayuscula espaciada, abajo la empresa y la firma.
   ============================================================ */
.pie-sitio{background:var(--tinta);color:rgba(255,255,255,.76);padding:64px 0 24px;font-weight:300;font-size:14px;line-height:1.6}
.pie-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:42px}
.pie-sitio h4{color:#fff;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;font-weight:600}
.pie-sitio p{font-size:13.8px;line-height:1.6;margin:0 0 16px;color:rgba(255,255,255,.72)}
.pie-sitio .boton{font-size:11.5px;letter-spacing:.1em;padding:12px 18px;justify-content:flex-start}
.pie-wa{background:var(--brand);color:#fff;border-color:var(--brand)}
.pie-wa:hover{background:var(--brand-d);border-color:var(--brand-d)}
.pie-linea{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.pie-linea:hover{border-color:#fff}
.pie-linea svg{color:var(--brand)}
.pie-vias .pie-linea span{text-transform:none;letter-spacing:.02em;font-size:13px}
.pie-form textarea{width:100%;font:inherit;font-size:13.5px;font-weight:300;color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 14px;resize:vertical;margin-bottom:10px}
.pie-form textarea::placeholder{color:rgba(255,255,255,.4)}
.pie-form textarea:focus{outline:none;border-color:var(--brand)}
.pie-form .boton{width:100%;justify-content:center}
/* La columna del medio, en caja: es la entrada para el dueno, como la guia en el de venta */
.pie-duenos{background:rgba(255,255,255,.045);border:1px solid rgba(16,178,194,.34);border-radius:18px;padding:26px 24px}
.pie-rotulo{font-size:10.5px !important;letter-spacing:.2em;text-transform:uppercase;color:var(--brand) !important;font-weight:600;margin:0 0 6px !important}
.pie-vias{display:flex;flex-direction:column;gap:9px}
.pie-redes{display:flex;gap:12px;margin-top:22px}
.pie-redes a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(16,178,194,.45);display:grid;place-items:center;
  color:var(--brand);transition:.2s}
.pie-redes a svg{width:17px;height:17px}
.pie-redes a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.pie-abajo{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px;display:flex;align-items:center;gap:18px}
.pie-marca{display:flex;align-items:center;gap:18px;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.55}
.pie-marca img{height:44px;width:auto;flex:none}
.pie-res{display:block}
.pie-firma{border-top:1px solid rgba(255,255,255,.08);margin-top:20px;padding-top:16px;text-align:center;
  font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.02em}
.pie-firma b{font-weight:600;color:rgba(255,255,255,.88);letter-spacing:.03em}
@media (max-width:900px){.pie-grid{grid-template-columns:1fr;row-gap:32px}}
@media (max-width:560px){.pie-marca{flex-direction:column;align-items:flex-start;gap:10px}}

/* Dueno o socio, dentro de la ventana */
.quien{display:flex;gap:4px;background:var(--arena);border-radius:999px;padding:4px;margin:0 0 22px}
.quien button{flex:1;border:0;background:none;border-radius:999px;padding:9px 12px;font:inherit;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);cursor:pointer}
.quien button.on{background:var(--c-dueno);color:#fff}
.quien button.on[data-quien="socio"]{background:var(--c-socio)}

/* La barra va de borde a borde, con el logo pegado a la izquierda, como
   la del calendario (26 sep 2026). */
.cab .wrap{max-width:none;padding-left:24px;padding-right:24px}
@media (max-width:560px){.cab .wrap{padding-left:14px;padding-right:14px}}

/* ---- ACCEDER: el unico boton de la barra, y abre tres puertas (26 sep 2026) ---- */
.acceder{position:relative}
.acceder-btn .flecha{width:14px;height:14px;color:rgba(255,255,255,.7);transition:transform .2s}
.acceder-btn[aria-expanded="true"] .flecha{transform:rotate(180deg)}
.acceder-menu{position:absolute;right:0;top:calc(100% + 14px);width:330px;background:var(--marfil);border-radius:18px;padding:8px;
  box-shadow:0 2px 0 var(--brand),0 30px 60px -20px rgba(11,12,13,.45),0 0 0 1px rgba(11,12,13,.06);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s}
.acceder-menu.on{opacity:1;transform:none;pointer-events:auto}
.acceder-menu > *{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--tinta);text-decoration:none;padding:14px 14px;border-radius:12px;transition:background .15s}
.acceder-menu > *:hover{background:var(--arena)}
.acceder-menu .pastilla{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  color:var(--c);background:color-mix(in srgb, var(--c) 12%, #fff)}
.acceder-menu .pastilla svg{width:19px;height:19px}
.acceder-menu > *:hover .pastilla{background:var(--c);color:#fff}
.acceder-menu b{display:block;font-size:14px;font-weight:500}
.acceder-menu i{display:block;font-style:normal;font-size:12px;color:var(--gris);margin-top:2px}
.acceder-menu > * + *{box-shadow:0 -1px 0 var(--linea)}

/* La misma raya doble abajo: todo lo de la barra queda ENTRE las dos rayas,
   de lado a lado de la pantalla (Carlos, 26 sep 2026). */
.cab-raya.abajo{margin:0 0 6px}

/* ============================================================
   EL PANEL QUE BAJA DE CADA PUERTA (26 sep 2026)
   La barra es para vender: al pasar por una puerta baja un panel a todo
   lo ancho, con una foto, lo que gana esa persona y UN boton en el color
   de su publico. El panel es hijo del <li>, asi que pasar del enlace al
   panel no lo cierra; y se cierra con un pequeno retraso para que cruzar
   la raya de abajo no lo apague.
   ============================================================ */
.cab-menu li{position:static}
.cab-menu li > a .m-t::after{background:var(--c)}
.mega{position:absolute;left:0;right:0;top:100%;padding:0 24px 24px;pointer-events:none;
  opacity:0;transform:translateY(-8px);transition:opacity .2s ease .12s,transform .2s ease .12s,visibility 0s linear .32s;visibility:hidden}
.cab-menu li:hover > .mega,.cab-menu li:focus-within > .mega{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .22s ease .05s,transform .22s ease .05s,visibility 0s}
.mega-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:300px;
  background:var(--marfil);border-radius:0 0 22px 22px;overflow:hidden;
  box-shadow:inset 0 3px 0 var(--c),0 40px 80px -30px rgba(6,20,24,.55),0 0 0 1px rgba(11,12,13,.05)}
.mega-foto{background-size:cover;min-height:300px}
.mega-txt{padding:36px 42px 32px}
.mega-kick{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--c)}
.mega h3{margin:0 0 20px;font-weight:300;font-size:30px;line-height:1.12;letter-spacing:-.015em;color:var(--tinta)}
.mega h3 b{font-weight:600}
.mega ul{list-style:none;margin:0 0 26px;padding:0}
.mega li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#3a3f42;padding:7px 0;border:0 !important}
.mega li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--c)}
.mega-acc{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.mega-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--c);color:#fff;text-decoration:none;border-radius:999px;
  padding:14px 26px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:transform .2s,box-shadow .2s,filter .2s}
.mega-cta svg{width:17px;height:17px}
.mega-cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 28px -14px var(--c)}
.mega-ver{white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);text-decoration:none}
.mega-ver:hover{color:var(--c)}
.mega-nota{margin:18px 0 0;font-size:12px;color:var(--gris);max-width:520px}
/* En la tableta y el telefono no hay "pasar el raton": la puerta lleva a su pagina */
@media (max-width:1100px){.mega{display:none}}

/* ---- SEGUNDA VUELTA DE LA BARRA: letra de alta gama y el discurso (26 sep 2026) ----
   Las palabras de la barra y los titulares de los paneles usan --serif.
   Se probo Cormorant Garamond y Carlos la tumbo: vuelve a Poppins (ver --serif).
   Carlos: "podemos ponerle letra alta gama, vamos puliendo". *
.cab-menu .m-t{font-family:var(--serif);font-size:15px;font-weight:500;letter-spacing:.04em;text-transform:none}
.cab-menu .m-d{font-size:11.5px;font-style:italic;font-weight:300;letter-spacing:.02em}
.cab-menu .m-t::after{bottom:-3px}
.cab-menu a:hover .m-t::after,.cab-menu a.on .m-t::after{right:0}
.mega h3{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.mega h3 em{font-style:normal;font-weight:600;color:var(--c)}
.mega-par{margin:0 0 20px;font-size:15px;line-height:1.65;color:#3a3f42;max-width:560px}
.mega li{display:block;padding:9px 0 9px 16px !important;position:relative;font-size:14px;line-height:1.55;color:#4a4f52}
.mega li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.mega li b{color:var(--tinta);font-weight:600}
.mega ul{margin:0 0 24px}
.mega-ver{max-width:320px;white-space:normal;line-height:1.4}
.mega-in{min-height:360px}
.mega-foto{min-height:360px}

/* ---- TERCERA VUELTA: LA BARRA CALLADA (26 sep 2026) ----
   Carlos pregunto "si tuvieras que hacerlo para ti, como lo harias". La
   respuesta: la barra sola no vende; vende la primera pantalla. La barra va
   callada y cara: tres palabras chicas en mayuscula espaciada, sin el
   gancho de abajo. El discurso sigue en el panel al pasar el raton. */
.cab-menu .m-t{font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.cab-menu .m-d{display:none}
.cab-menu > li > a{padding:4px 26px}

/* Destello del simbolo al abrir una pagina (Carlos, 5 oct 2026): sitio-v2.css se inyecta con JS en las paginas que no lo enlazan, y
   hasta que llegaba, la llave del boton Acceder y la del menu salian a su tamano natural (enorme) un instante. Aqui van sus tamanos y el menu
   cerrado oculto de verdad, para que el primer pintado ya sea el definitivo. */
.acc-llave{height:24px;width:auto;display:block;flex:none}
.acc-cab img{height:46px;width:auto}
.acceder-menu:not(.on){visibility:hidden}
.acceder-menu{transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.acceder-menu.on{visibility:visible;transition:opacity .18s,transform .18s,visibility 0s}

/* Solo claro: no dejar que el modo oscuro forzado del navegador cambie los colores de la marca (6 oct 2026) */
:root{color-scheme:only light}
iframe{color-scheme:only light}

/* Cinco puertas en el telefono (6 oct 2026): al sumar Mantenimiento junto a Rental agents la barra se salia del ancho de 390 px.
   En pantallas chicas las cinco palabras caben con letra mas chica y menos espaciado; sin salto de linea. */
@media (max-width:760px){
  .cab-menu{gap:0}
  .cab-menu > li > a,.cab-menu li:first-child > a{padding:12px 2px}
  .cab-menu .m-t{font-size:9.5px;letter-spacing:.05em;white-space:nowrap}
}
/* Por debajo de 400 px (7 oct 2026): una sola fila con scroll horizontal suave, letra minima de 10 px, sin desbordar el documento. */
@media (max-width:400px){
  .cab .cab-menu{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;justify-content:flex-start;max-width:100%}
  .cab .cab-menu::-webkit-scrollbar{display:none}
  .cab .cab-menu > li{flex:0 0 auto}
  .cab .cab-menu > li > a,.cab .cab-menu li:first-child > a{padding:12px 9px}
  .cab .cab-menu .m-t{font-size:10px;letter-spacing:.04em}
}

/* 7 oct 2026: el campo del pie desbordaba 8 px a 320 px */
.pie-form textarea,.pie-guia input{box-sizing:border-box;max-width:100%}
@media (max-width:900px){.pie-sitio.pie-sitio .pie-grid.pie-grid{grid-template-columns:minmax(0,1fr)}}