/* ───────────────────────────────────────────────────────────────
   Sitio de Jorge Erosa · asesor certificado, Grupo López Rosa

   Paleta: tomada del sitio de Almaviva (desarrollosalmaviva.com),
   medida con getComputedStyle sobre la página en vivo:
     tinta  #04253D  azul marino de encabezados y pie
     oro    #BC9E64  acento de botones y filetes
     azul   #095B96  enlaces y estados activos
   El crema #F5F3EF sale del papel de los brochures de Almaviva.
   Cada desarrollo pinta su acento con --marca (datos/colores.json,
   con el origen documentado de cada color).
   ─────────────────────────────────────────────────────────────── */

@font-face{font-family:Montserrat;src:url(fonts/Montserrat-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/Montserrat-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/CormorantGaramond-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/CormorantGaramond-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/Cinzel-600.woff2)format("woff2");font-weight:600;font-display:swap}

:root{
  --tinta:#04253D; --tinta-70:#3A5468; --oro:#BC9E64; --oro-claro:#D8C094;
  --azul:#095B96; --papel:#fff; --crema:#F5F3EF; --linea:#E4DFD6;
  --marca:#04253D; --marca-tenue:#EAF0F4;
  --sans:Montserrat,-apple-system,"Segoe UI",sans-serif;
  --serif:Cormorant,Georgia,serif;
  --ancho:1180px; --radio:14px;
  --sombra:0 1px 2px rgba(4,37,61,.05),0 8px 28px rgba(4,37,61,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:var(--papel);
  font-size:16px;line-height:1.65;overflow-x:hidden}
img,video{max-width:100%;display:block}
/* <picture> no genera caja: la <img> se coloca como si fuera hija directa.
   Sin esto, object-fit y las rejillas se aplican al envoltorio y no a la foto. */
picture{display:contents}
/* Con el <picture> en display:contents, el <source> deja de estar oculto por el
   navegador y ocupa una celda vacia en las rejillas. Se apaga a mano. */
picture>source{display:none}
a{color:inherit}
.contenedor{width:min(100% - 40px,var(--ancho));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── tipografía ── */
h1,h2,h3{margin:0;line-height:1.14;font-weight:600;letter-spacing:-.01em}
h1{font-family:var(--serif);font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.02em}
h2{font-family:var(--serif);font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:1.12rem}
p{margin:.7em 0}
.cejilla{display:block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--oro);margin-bottom:.9rem}
.cejilla.oscura{color:var(--azul)}
.plomo{font-size:1.06rem;color:var(--tinta-70);max-width:62ch}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.5rem;border-radius:999px;font-size:.87rem;font-weight:600;
  letter-spacing:.03em;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn.oro{background:var(--oro);color:#231a08;box-shadow:0 6px 20px rgba(188,158,100,.35)}
.btn.oro:hover{background:var(--oro-claro)}
.btn.tinta{background:var(--tinta);color:#fff}
.btn.tinta:hover{background:#063452}
.btn.linea{border-color:currentColor;background:transparent}
.btn.linea:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.btn.claro{background:#fff;color:var(--tinta)}
.btn.hueco-claro{border-color:rgba(255,255,255,.6);color:#fff}
.btn.hueco-claro:hover{background:#fff;color:var(--tinta)}
.btn.ancho{width:100%}
.enlace{font-weight:600;font-size:.87rem;text-decoration:none;color:var(--azul);
  border-bottom:1.5px solid transparent;transition:border-color .2s}
.enlace:hover{border-color:currentColor}

/* ── barra de promociones ── */
.promos{background:var(--tinta);color:#fff;font-size:.79rem;position:relative;z-index:60}
.promos .contenedor{display:flex;align-items:center;gap:1rem;padding:.55rem 0;flex-wrap:wrap}
.promos b{color:var(--oro-claro);font-weight:600}
.promos .cuenta{margin-left:auto;opacity:.75;font-size:.73rem}
.promos-texto{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;text-align:left;
  white-space:normal;min-width:0;max-width:100%}
.promos-texto b{white-space:normal}
.promos-texto:hover{opacity:.85}
/* Barra dorada: la promoción, su sello y la cuenta regresiva en cajitas son lo
   primero que se ve; el dorado se distingue de la foto azul y del menú blanco. */
.promos{background:#BC9E64;color:var(--tinta);border-bottom:1px solid #a88a52}
.promos b{color:var(--tinta);font-weight:700}
.promos-texto span{color:#2c2410}
.promos-sello{font-style:normal;display:inline-flex;align-items:center;gap:.4rem;margin-right:.6rem;
  background:var(--tinta);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;vertical-align:middle}
.promos-sello::before{content:"";width:6px;height:6px;border-radius:50%;background:#F4D58A;
  animation:latido 1.4s ease-in-out infinite}
@keyframes latido{50%{opacity:.25;transform:scale(.7)}}
.promos .cuenta-cajas{display:inline-flex;align-items:center;gap:.3rem;opacity:1;margin-left:auto}
.promos-ver{flex:none;width:auto!important;max-width:none!important}
/* Sin botón: todo el texto abre el panel; la flecha y el subrayado al pasar
   el mouse indican que se puede hacer clic. */
.promos-flecha{font-style:normal;display:inline-block;transition:transform .18s}
.promos-texto:hover .promos-flecha{transform:translateX(3px)}
.promos-texto:hover b{text-decoration:underline;text-underline-offset:3px}
.cuenta-cajas em{white-space:nowrap;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta);margin-right:.35rem}
.cuenta-cajas .caja{display:inline-flex;flex-direction:column;align-items:center;min-width:2.3rem;
  background:var(--tinta);color:#fff;border-radius:6px;padding:.22rem .3rem .18rem;line-height:1}
.cuenta-cajas .caja b{color:#fff;font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.cuenta-cajas .caja i{font-style:normal;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:.15rem}
.promos-ver{background:var(--tinta)!important;color:#fff!important;font-weight:700!important;
  font-size:.74rem!important;padding:.5rem .95rem!important;border-radius:999px!important;white-space:nowrap}
.promos-ver:hover{background:#0a3a5e!important;opacity:1!important}
@media(min-width:821px){
  .promos .contenedor{flex-wrap:nowrap}
  .promos-texto:not(.promos-ver){flex-wrap:nowrap;overflow:hidden;flex:1 1 auto}
  .promos-texto b{white-space:nowrap;flex:none}
  .promos-texto span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .promos-sello{flex:none}
}
@media(max-width:820px){
  .promos .contenedor{gap:.45rem .5rem;padding:.55rem 0}
  .promos-texto:not(.promos-ver){width:100%;font-size:.76rem}
  .promos-sello{font-size:.56rem;padding:.22rem .5rem;margin-right:.35rem}
  .promos .cuenta-cajas{margin-left:0}
  .cuenta-cajas em{font-size:.52rem;margin-right:.2rem}
  .cuenta-cajas .caja{min-width:1.95rem;padding:.18rem .2rem .14rem}
  .cuenta-cajas .caja b{font-size:.8rem}
  .cuenta-cajas .caja i{font-size:.44rem}
  .promos-ver{margin-left:auto;font-size:.68rem!important;padding:.42rem .75rem!important}
}
.promos-cotiza{background:var(--oro);color:#231a08;font-weight:600;font-size:.74rem;text-decoration:none;
  padding:.3rem .95rem;border-radius:999px;white-space:nowrap;transition:background .18s}
.promos-cotiza:hover{background:var(--oro-claro)}
.promos .contenedor>span:first-child+.promos-cotiza,.promos .contenedor>.promos-texto+.promos-cotiza{margin-left:0}

/* ── encabezado ── */
/* El encabezado se queda arriba del todo y se va con el scroll. Perseguir al
   visitante robaba 70 px de pantalla en cada celular. */
/* relative, no static: el encabezado se queda en el flujo (no persigue al
   visitante) pero conserva el z-index. Con static, z-index no aplica y los
   menús desplegables se dibujan DETRÁS de la portada. */
.cabecera{position:relative;z-index:60;background:#fff;
  border-bottom:1px solid var(--linea);width:100%;overflow:visible}
.desplegable{position:relative;z-index:61}
.panel{z-index:62}
.barra{max-width:100%}
.barra{display:flex;align-items:center;gap:1.2rem;min-height:70px;flex-wrap:nowrap}
.menu .btn{padding:.62rem 1.05rem;font-size:.78rem}
/* El logo arranca en el mismo borde que el texto de las secciones. */
.marca{margin-right:auto}
.marca img{height:34px;width:auto;display:block}
/* Inicio: menú transparente sobre la foto de portada, en blanco. La portada
   sube por debajo del menú para que la foto llegue hasta la barra de
   promociones, como en un sitio de desarrollador. */
.marca .logo-noche{display:none}
.cabecera.sobre-foto{background:transparent;border-bottom-color:rgba(255,255,255,.18)}
.sobre-foto .marca .logo-dia{display:none}
.sobre-foto .marca .logo-noche{display:block}
.sobre-foto .hamburguesa{color:#fff}
.cabecera.sobre-foto ~ main .portada{margin-top:-71px;padding-top:71px;min-height:calc(min(92vh,760px) + 71px)}
/* Comunidad: la primera sección ya es azul; el menú va encima de ella, sin
   franja blanca, igual que sobre las fotos de portada. */
.cabecera.sobre-foto ~ main > .seccion.tinta:first-child{margin-top:-71px;padding-top:calc(clamp(3.5rem,7vw,6rem) + 71px)}
/* Franja azul suave detrás del menú: aunque la foto tenga cielo claro arriba,
   las letras blancas siempre se leen. */
.cabecera.sobre-foto ~ main .portada::before{content:"";position:absolute;left:0;right:0;top:0;height:190px;
  z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,30,58,.55),rgba(4,30,58,0))}
@media(min-width:1181px){
  .sobre-foto .menu>a:not(.btn),.sobre-foto .disparador,.sobre-foto .promo-abre{color:#fff}
  .sobre-foto .menu>a:not(.btn):hover,.sobre-foto .disparador:hover,.sobre-foto .promo-abre:hover{color:var(--oro-claro)}
  .sobre-foto .menu a.activa,.sobre-foto .disparador.activa{color:#fff;border-color:var(--oro)}
}
.menu{margin-left:0}
.menu{display:flex;align-items:center;gap:1.05rem;flex-wrap:nowrap}
.menu>a,.disparador{font-size:.79rem;font-weight:600;text-decoration:none;color:var(--tinta);
  letter-spacing:.01em;white-space:nowrap;padding:.3rem 0;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s}
.menu>a:hover,.disparador:hover{color:var(--azul)}
.menu a.activa{border-color:var(--oro);color:var(--azul)}
.desplegable{position:relative}
.desplegable>.disparador::after{content:"";display:inline-block;margin-left:.42rem;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.panel{position:absolute;top:calc(100% + .6rem);left:50%;translate:-50% 0;min-width:250px;
  background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);
  padding:.5rem;opacity:0;visibility:hidden;translate:-50% 8px;transition:.22s ease}
.desplegable:hover .panel,.desplegable:focus-within .panel,
.desplegable.abierto .panel{opacity:1;visibility:visible;translate:-50% 0}
.panel a{display:block;padding:.6rem .8rem;border-radius:8px;font-size:.85rem;
  text-decoration:none;color:var(--tinta);transition:background .15s}
.panel a:hover{background:var(--crema);color:var(--azul)}
.panel a span{display:block;font-size:.72rem;color:var(--tinta-70);font-weight:400}
.hamburguesa{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;
  color:var(--tinta);cursor:pointer;line-height:1}

/* ── portada ── */
.portada{position:relative;min-height:min(92vh,760px);display:flex;align-items:center;
  color:#fff;overflow:hidden;background:var(--tinta)}
/* El video de portada, en todas las pantallas. Es vertical, así que en
   computadora se encuadra hacia arriba: abajo solo hay suelo. */
.fondo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;z-index:0;max-width:none}
@media(max-width:780px){.fondo-video{object-position:center}}
.portada video,.portada .fondo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;max-width:none}
/* La portada de Terraviva es cuadrada y trae su logotipo impreso arriba. En el
   hero se encuadra por debajo del logo: el <h1> ya dice el nombre, y dos veces
   el mismo nombre encimado se lee como un error de montaje. En la tarjeta del
   catálogo, en cambio, el logotipo sí se ve y ahí funciona. */
.portada-cuadrada .fondo{object-position:center 58%}
/* Con el menú encima, se baja un poco más para que el logotipo impreso de la
   foto no quede detrás del menú (computadora) ni del título (celular). */
.cabecera.sobre-foto ~ main .portada-cuadrada .fondo{object-position:center 80%}
@media(max-width:780px){.cabecera.sobre-foto ~ main .portada-cuadrada .fondo{top:-50%;height:150%}}
/* Foto aérea de Telchac: el club de playa queda a la derecha del texto; en
   celular se recorre hacia él para que no quede fuera del encuadre. */
.portada .fondo-telchac{object-position:center 40%}
@media(max-width:780px){.portada .fondo-telchac{object-position:60% center}}
.portada::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(4,37,61,.9) 0%,rgba(4,37,61,.68) 46%,rgba(4,37,61,.28) 100%)}
.portada-viva::after{background:linear-gradient(105deg,rgba(4,37,61,.85) 0%,rgba(4,37,61,.5) 40%,rgba(4,37,61,.08) 72%,rgba(4,37,61,0) 100%)}
.portada-viva .fondo{filter:saturate(1.12) contrast(1.06) brightness(1.06)}
.portada-viva .cejilla,.portada-viva h1,.portada-viva p,.portada-viva .puntos{text-shadow:0 1px 3px rgba(4,20,33,.55),0 4px 18px rgba(4,20,33,.45)}
.portada .contenedor{position:relative;z-index:2;padding:5rem 0}
.portada .cejilla{color:var(--oro-claro)}
.portada p{color:rgba(255,255,255,.9);font-size:1.08rem;max-width:54ch;text-wrap:pretty}
/* Sin esto el titulo parte donde cae y deja "patrimonio" solo en el segundo
   renglon, como si sobrara. Con balance los dos renglones quedan parejos. */
.portada h1{text-wrap:balance}
.acciones{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}
/* Portada del inicio: texto centrado sobre la foto, con una capa azul pareja
   (no degradada) para que la foto se vea completa y el texto se lea igual. */
.portada-centrada::after{background:linear-gradient(180deg,rgba(4,30,58,.62) 0%,rgba(4,30,58,.48) 45%,rgba(4,30,58,.62) 100%)}
.portada-centrada .contenedor{text-align:center;display:flex;flex-direction:column;align-items:center}
.portada-centrada .cejilla{display:inline-flex;align-items:center;gap:1rem;letter-spacing:.32em}
.portada-centrada .cejilla::before,.portada-centrada .cejilla::after{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.7}
.portada-centrada h1{max-width:24ch;margin-left:auto;margin-right:auto}
.portada-centrada p{margin-left:auto;margin-right:auto}
.portada-centrada .acciones,.portada-centrada .puntos{justify-content:center}
.puntos{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2.2rem;font-size:.82rem;
  color:rgba(255,255,255,.85)}
.puntos span::before{content:"✓ ";color:var(--oro-claro);font-weight:700}

/* ── secciones ── */
.seccion{padding:clamp(3.5rem,7vw,6rem) 0}
.seccion.enlazada{padding:clamp(1.2rem,2.5vw,2rem) 0}
.seccion.crema{background:var(--crema)}
.seccion.tinta{background:var(--tinta);color:#fff}
.seccion.tinta .plomo{color:rgba(255,255,255,.78)}
.encabezado-seccion{max-width:64ch;margin-bottom:2.6rem}
.encabezado-seccion.centro{margin-inline:auto;text-align:center}
.fila-titulo{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:2.4rem}

/* ── franja de confianza ── */
.confianza{border-block:1px solid var(--linea);background:var(--crema)}
.confianza .contenedor{padding:1.9rem 0}
.confianza-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.confianza b{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--azul)}
.confianza span{font-size:.79rem;color:var(--tinta-70)}

/* Respaldado por, dentro del mismo recuadro de cifras: una línea que separa
   sin romper la tarjeta en dos secciones distintas. */
.respaldo-inline{margin-top:2.2rem;padding-top:2rem;border-top:1px solid var(--linea);
  width:100%;display:flex;align-items:center;justify-content:center;gap:1.1rem;
  flex-wrap:wrap;text-align:center}

.trust-bar{background:var(--papel);padding:2rem 0;border-bottom:1px solid var(--linea)}
.trust-bar-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;display:flex;
  align-items:center;justify-content:center;gap:1.25rem}
.trust-bar-label{font-size:.85rem;color:var(--tinta-70);letter-spacing:.02em}
.trust-glr-logo{height:48px;width:auto}

.pasos{display:grid;gap:0;margin-top:2.2rem;border-top:1px solid var(--linea)}
.paso{display:grid;grid-template-columns:70px 1fr;gap:1.5rem;align-items:baseline;
  padding-block:1.6rem;border-bottom:1px solid var(--linea)}
.paso-num{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--oro)}
.paso h4{margin:0 0 .3rem;font-size:1.1rem}
.paso p{margin:0;color:var(--tinta-70);font-size:.92rem;max-width:56ch}
@media(min-width:860px){.paso{grid-template-columns:120px 1fr}}

/* ── tarjetas de proyecto ── */
.rejilla-proyectos{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.6rem}
.tarjeta{position:relative;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
/* El enlace cubre la tarjeta entera: se hace clic en la foto, el título o el
   precio. El texto interno queda como pista visual, no como enlace aparte. */
.cubre{position:absolute;inset:0;z-index:2}
.tarjeta:focus-within{border-color:var(--azul);box-shadow:0 0 0 3px rgba(9,91,150,.18)}
.cubre:focus-visible{outline:none}
.tarjeta:hover .enlace{border-color:currentColor}
.tarjeta .enlace{cursor:pointer}
.tarjeta .foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--crema)}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tarjeta:hover .foto img{transform:scale(1.045)}
.sello{position:absolute;top:.85rem;left:.85rem;background:rgba(4,37,61,.88);color:#fff;
  font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:999px;backdrop-filter:blur(4px)}
.sello.oro{background:var(--oro);color:#231a08}
.cuerpo{padding:1.3rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.cuerpo h3{font-size:1.2rem}
.cuerpo .sitio{font-size:.75rem;color:var(--tinta-70);letter-spacing:.04em;text-transform:uppercase}
.cuerpo p{margin:0;font-size:.88rem;color:var(--tinta-70)}
.desde{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--linea);
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.desde small{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-70)}
.desde b{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--azul);display:block}
.etiquetas{display:flex;gap:.4rem;flex-wrap:wrap}
.etiquetas span{font-size:.7rem;background:var(--crema);border:1px solid var(--linea);
  padding:.22rem .6rem;border-radius:999px;color:var(--tinta-70)}

/* Tarjeta de modelo (plano de tipología): el plano se ve completo, no
   recortado como una foto de ambiente. */
.tarjeta.modelo .foto{aspect-ratio:5/4;background:#fff}
.tarjeta.modelo .foto img{object-fit:contain;padding:.9rem}
.tarjeta.modelo .cuerpo{gap:.35rem}
.tarjeta.modelo .btn{margin-top:.5rem}
.modelo-tag{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--oro);margin-bottom:.15rem}
.modelo-precio{margin-top:.3rem;padding-top:.7rem;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:.1rem}
.modelo-precio small{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-70)}
.modelo-precio b{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--azul)}
.modelo-precio span{font-size:.75rem;font-weight:600;color:var(--oro)}

/* ── cotizador ── */
.cotizador{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.6rem;box-shadow:var(--sombra);
  /* La tarjeta es blanca aunque la seccion sea oscura: si hereda el color del
     texto de la seccion, las cifras salen blancas sobre blanco. */
  color:var(--tinta)}
.seccion.tinta .cotizador{border-color:rgba(255,255,255,.16)}
.campos{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* "Hacienda San Eduardo" no cabe en una columna de tercio: el selector de
   desarrollo ocupa el renglon completo y los demas se reparten abajo. */
.campos label:has(select[data-cot="desarrollo"]){grid-column:1/-1}
select{text-overflow:ellipsis}
label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-70);margin-bottom:.35rem}
select,input{width:100%;font:inherit;font-size:.92rem;padding:.72rem .85rem;
  border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta);
  appearance:none;transition:border-color .18s,box-shadow .18s}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2304253D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px;padding-right:2.2rem}
select:focus,input:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(9,91,150,.13)}
.desglose{margin-top:1.4rem;border-top:1px solid var(--linea);padding-top:1.1rem}
.renglon{display:flex;justify-content:space-between;gap:1rem;padding:.52rem 0;
  font-size:.9rem;border-bottom:1px dashed var(--linea)}
.renglon:last-child{border-bottom:0}
.renglon span{color:var(--tinta-70)}
.renglon b{font-weight:600;white-space:nowrap}
.renglon.fuerte{background:var(--crema);margin:.5rem -.7rem;padding:.7rem;border-radius:9px;
  border-bottom:0;font-size:.98rem}
.renglon.fuerte b{font-family:var(--serif);font-size:1.35rem;color:var(--azul)}
.renglon.saldo b{color:#8A4B10}
.nota{font-size:.74rem;color:var(--tinta-70);line-height:1.55;margin-top:1rem;
  padding-top:.9rem;border-top:1px solid var(--linea)}
.aviso-saldo{background:#FDF6EC;border:1px solid #EBD9BC;border-radius:10px;
  padding:.8rem .9rem;font-size:.78rem;color:#6B4A16;margin-top:1rem;line-height:1.55}

/* ── listas y datos ── */
.rejilla-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem}
.dato{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.15rem}
.seccion.tinta .dato{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.dato b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;
  color:var(--marca);line-height:1.1}
.seccion.tinta .dato b{color:var(--oro-claro)}
.dato span{font-size:.76rem;color:var(--tinta-70);letter-spacing:.03em}
.seccion.tinta .dato span{color:rgba(255,255,255,.7)}
.dato.cerca{display:flex;flex-direction:column;gap:.15rem}
.cerca-icono{width:22px;height:22px;color:var(--marca);margin-bottom:.3rem}
.cerca-icono svg{width:100%;height:100%}
.lista-check{columns:2;column-gap:2rem;font-size:.89rem;padding:0;margin:0;list-style:none}
.lista-check li{break-inside:avoid;padding:.4rem 0 .4rem 1.5rem;position:relative;color:var(--tinta-70)}
.lista-check li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;
  border-radius:50%;background:var(--marca)}
.lista-iconos li{display:flex;align-items:flex-start;gap:.55rem;padding-left:0}
.lista-iconos li::before{display:none}
.lista-iconos svg{flex:none;width:18px;height:18px;margin-top:.15em;color:var(--marca)}
.dos-columnas{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}

/* ── galería y plano ── */
/* La rejilla se acomoda a cuántas fotos haya. No todos los desarrollos tienen
   las mismas: forzar siempre el mismo molde deja huecos que parecen error.
   Ojo: los hijos del DOM siguen siendo los <picture> aunque el elemento de
   rejilla sea la <img>, así que :first-child se pregunta sobre picture. */
.galeria{display:grid;gap:.9rem;grid-template-columns:repeat(3,1fr)}
.galeria img{width:100%;height:100%;object-fit:cover;border-radius:12px;aspect-ratio:4/3}
.galeria:has(picture:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.galeria:has(picture:nth-child(5)){grid-template-columns:2fr 1fr 1fr}
.galeria:has(picture:nth-child(5)) picture:first-child img{grid-row:span 2;aspect-ratio:auto}
/* Galería con pie de foto (describe cada imagen): rejilla simple, pareja,
   sin la celda grande de 2 filas — el texto de abajo no combina con ese
   truco. Los hijos aquí sí son <figure>, no <picture> suelto. */
.galeria.con-pie{grid-template-columns:repeat(3,1fr)}
.galeria.con-pie figure{margin:0}
.galeria.con-pie img{aspect-ratio:4/3;height:auto}
.galeria.con-pie figcaption{font-size:.82rem;color:var(--tinta-70);margin-top:.5rem}
.plano{border:1px solid var(--linea);border-radius:var(--radio);overflow:auto;background:var(--crema);
  max-height:78vh}
.plano img{width:100%;min-width:720px}
/* Algunos planos son casi cuadrados y a ancho completo dominan la página. */
.plano-chico{max-width:900px;margin-inline:auto;max-height:none}
/* Lámina que acompaña al master plan: el detalle de clústeres o etapas. */
.plano-extra{margin-top:1.6rem;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:var(--crema);max-width:900px;margin-inline:auto}
.plano-extra img{width:100%;display:block;height:auto}
/* El plano y su lámina se apilan con separación clara, nunca pegados. */
#master-plan .plano{margin-bottom:0}
#master-plan .video{margin-top:1.6rem}
.plano-chico img{min-width:0}
.plano[data-je="plano"]{cursor:grab}
.plano[data-je="plano"].arrastrando{cursor:grabbing;scroll-behavior:auto}
.plano[data-je="plano"] img{-webkit-user-drag:none;user-select:none;max-width:none}
.plano-controles{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;
  margin-top:.7rem}
.plano-controles button{width:auto;font:inherit;font-size:.82rem;font-weight:600;
  padding:.5rem .9rem;border:1px solid var(--linea);border-radius:99px;background:#fff;
  color:var(--tinta);cursor:pointer;transition:background .15s ease}
.plano-controles button:hover{background:var(--crema)}
.plano-ayuda{font-size:.78rem;color:var(--tinta-70)}
/* Zonas del master plan: capa SVG sobre la imagen; cada bloque lleva su zona
   y m², y al darle clic manda al cotizador con ese tipo de lote. */
.plano-lienzo{position:relative;width:100%}
.plano[data-je="plano"] .plano-lienzo{max-width:none}
.plano-lienzo img{width:100%!important;min-width:0!important;display:block}
.plano-zonas{position:absolute;inset:0;width:100%;height:100%}
.plano-zonas a{cursor:pointer}
.plano-zonas polygon{fill:rgba(255,255,255,0);stroke:rgba(4,37,61,0);stroke-width:8;transition:fill .2s,stroke .2s}
.plano-zonas a:hover polygon,.plano-zonas a:focus polygon{fill:rgba(255,255,255,.35);stroke:var(--tinta)}
.plano-zonas text{font-family:var(--sans);font-weight:800;letter-spacing:.06em;fill:var(--tinta);
  text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:7px;pointer-events:none}
.plano-zonas text .m2{font-weight:600;letter-spacing:0}
.plano-zonas .pin-base{fill:var(--tinta);stroke:#fff;stroke-width:7}
.plano-zonas .pin-onda{fill:none;stroke:var(--oro);stroke-width:8;transform-box:fill-box;transform-origin:center;
  animation:pin-onda 2s ease-out infinite}
@keyframes pin-onda{from{transform:scale(1);opacity:.9}to{transform:scale(2.1);opacity:0}}
.plano-zonas .pin-icono{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.plano-zonas .pin:hover .pin-base,.plano-zonas .pin:focus .pin-base{fill:var(--azul)}
.plano-zonas .pin-texto{font-weight:700;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.plano-zonas .pin-onda{animation:none;opacity:0}}
/* Visor de fotos del plano */
.visor{position:fixed;inset:0;z-index:200;background:rgba(4,20,33,.94);display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:3.2rem 1rem 1rem}
.visor.abierto{display:flex}
.visor>img{max-width:min(1200px,100%);max-height:72vh;border-radius:12px;object-fit:contain}
.visor-pie{color:#fff;margin-top:.8rem;text-align:center;font-size:.95rem}
.visor-pie b{display:block;color:var(--oro-claro);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.2rem;font-weight:600}
.visor button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;
  width:48px;height:48px;font-size:1.5rem;cursor:pointer;line-height:1}
.visor button:hover{background:rgba(255,255,255,.25)}
.visor-cerrar{top:.8rem;right:.8rem}
.visor-ant{left:.8rem;top:50%;transform:translateY(-50%)}
.visor-sig{right:.8rem;top:50%;transform:translateY(-50%)}
.visor-miniaturas{display:flex;gap:.5rem;margin-top:.9rem;overflow-x:auto;max-width:100%;padding-bottom:.2rem}
.visor-miniaturas img{width:84px;height:56px;object-fit:cover;border-radius:6px;opacity:.5;cursor:pointer;
  border:2px solid transparent}
.visor-miniaturas img.activa{opacity:1;border-color:var(--oro)}
@media (max-width:720px){.visor-ant,.visor-sig{top:auto;bottom:1rem;transform:none}
  .visor>img{max-height:60vh}}
.zonas-leyenda{margin-top:1rem}
/* Proyecto del club de playa: datos, qué esperar y planos (se abren en el visor). */
.club-proyecto{display:grid;grid-template-columns:3fr 2fr;gap:2.4rem;margin:2.2rem 0 1.8rem}
.club-proyecto h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin:0 0 .6rem;color:var(--tinta)}
.galeria.planos img{aspect-ratio:16/9;object-fit:contain;background:#EFE4D2}
.galeria.planos a{display:block;cursor:zoom-in}
@media (max-width:720px){.club-proyecto{grid-template-columns:1fr;gap:1.4rem}}
.zonas-botones{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.6rem}
.zona-boton{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border:1px solid var(--linea);
  border-radius:12px;background:var(--papel);text-decoration:none;color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.zona-boton:hover{border-color:var(--tinta);box-shadow:var(--sombra)}
.zona-boton i{flex:none;width:18px;height:18px;border-radius:5px}
.zona-platino i{background:#009BE0}.zona-oro i{background:#E4BC00}.zona-rosa i{background:#FF8AB9}
.zona-boton span{display:flex;flex-direction:column;font-size:.78rem;color:var(--tinta-70);line-height:1.35}
.zona-boton b{font-size:.92rem;color:var(--tinta)}
.zona-boton em{margin-left:auto;font-style:normal;font-weight:600;font-size:.8rem;color:var(--azul);white-space:nowrap}
@media (max-width:720px){.zonas-botones{grid-template-columns:1fr}}

/* Panel junto al master plan (qué hay en cada zona del desarrollo). */
.masterplan-fila{display:grid;grid-template-columns:3fr 2fr;gap:1.8rem;align-items:start}
.masterplan-info{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.5rem}
.masterplan-info h3{margin:.35rem 0 .7rem;font-size:1.2rem}
.masterplan-info b{display:block;margin:1.1rem 0 .5rem;font-size:.95rem}
@media(max-width:860px){.masterplan-fila{grid-template-columns:1fr}}

/* ── documentos ── */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.doc{display:flex;gap:.9rem;align-items:flex-start;padding:1.05rem;background:#fff;
  border:1px solid var(--linea);border-radius:12px;text-decoration:none;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.doc:hover{border-color:var(--azul);transform:translateY(-2px);box-shadow:var(--sombra)}
.doc svg{flex:none;width:26px;height:26px;color:var(--azul)}
.doc b{display:block;font-size:.9rem;font-weight:600}
.doc span{font-size:.75rem;color:var(--tinta-70)}
.estructura-legal{display:flex;gap:.7rem;align-items:flex-start;background:#fff;
  border:1px solid var(--linea);border-radius:12px;padding:1rem 1.1rem;margin-top:1rem}
.estructura-legal svg{flex:none;width:24px;height:24px;color:var(--azul)}
.estructura-legal p{margin:0;font-size:.85rem;color:var(--tinta-70);line-height:1.5}
.estructura-legal b{color:var(--tinta)}

/* ── línea de tiempo ── */
.tiempo{list-style:none;margin:0;padding:0;border-left:2px solid var(--linea);padding-left:1.5rem}
.tiempo li{position:relative;padding:.65rem 0}
.tiempo li::before{content:"";position:absolute;left:calc(-1.5rem - 6px);top:1.15rem;
  width:10px;height:10px;border-radius:50%;background:var(--marca);border:2px solid #fff}
.tiempo b{font-family:var(--serif);font-size:1.2rem;color:var(--marca);margin-right:.7rem}
.tiempo span{font-size:.89rem;color:var(--tinta-70)}

/* ── preguntas ── */
.preguntas details{border-bottom:1px solid var(--linea);padding:.3rem 0}
.preguntas summary{cursor:pointer;padding:1rem 2rem 1rem 0;font-weight:600;font-size:.95rem;
  list-style:none;position:relative;transition:color .18s}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary:hover{color:var(--azul)}
.preguntas summary::after{content:"+";position:absolute;right:.3rem;top:.85rem;
  font-size:1.4rem;font-weight:400;color:var(--oro);transition:transform .22s}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas p{margin:0 0 1.1rem;font-size:.9rem;color:var(--tinta-70);max-width:76ch}

/* ── asesor ── */
.asesor{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.asesor .retrato{border-radius:var(--radio);overflow:hidden;background:var(--crema);aspect-ratio:4/5}
.asesor .retrato img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.credenciales{list-style:none;padding:0;margin:1.2rem 0;font-size:.89rem}
.credenciales li{padding:.35rem 0 .35rem 1.6rem;position:relative;color:var(--tinta-70)}
.credenciales li::before{content:"◆";position:absolute;left:0;color:var(--oro);font-size:.7rem;top:.65rem}
.destacado{background:var(--crema);border-left:3px solid var(--oro);border-radius:0 10px 10px 0;
  padding:1.1rem 1.3rem;margin:1.3rem 0}
.destacado strong{display:block;font-size:1.02rem}
.destacado span{font-size:.86rem;color:var(--tinta-70)}
.redes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.red{display:flex;align-items:center;gap:.55rem;padding:.6rem .95rem;border:1px solid var(--linea);
  border-radius:999px;text-decoration:none;font-size:.8rem;font-weight:600;transition:.18s}
.red:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-2px)}
.red svg{width:17px;height:17px}

/* ── contacto ── */
.contacto{background:var(--tinta);color:#fff}
.contacto .dos-columnas{align-items:start}
.contacto .cejilla{color:var(--oro-claro)}
/* Sobre el azul marino, el gris del texto corrido no se lee. Va en blanco. */
.contacto .plomo{color:rgba(255,255,255,.92)}
.contacto p{color:rgba(255,255,255,.88)}
.forma small{color:rgba(255,255,255,.75)}
.forma{display:grid;gap:.85rem;background:rgba(255,255,255,.05);padding:1.6rem;
  border-radius:var(--radio);border:1px solid rgba(255,255,255,.14)}
.forma label{color:rgba(255,255,255,.7)}
.forma small{font-size:.73rem;color:rgba(255,255,255,.6);line-height:1.5}
.forma-radios{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.8rem}
.forma-radios>span{flex:0 0 100%;color:rgba(255,255,255,.7);font-size:.85rem}
.forma-radios label{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.92);
  font-size:.92rem;font-weight:400;text-transform:none;letter-spacing:normal;cursor:pointer}
.forma-radios input[type="radio"]{-webkit-appearance:radio;appearance:radio;width:22px;height:22px;
  padding:0;accent-color:var(--oro);flex:none;margin:0;cursor:pointer}

/* ── flotante whatsapp ── */

/* ── pie ── */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);font-size:.85rem;
  padding:3.2rem 0 1.6rem;border-top:1px solid rgba(255,255,255,.1)}
.pie .contenedor{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.pie img{height:30px;margin-bottom:.9rem}
.pie b{display:block;color:#fff;font-size:.78rem;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:.85rem}
.pie a{display:block;text-decoration:none;padding:.24rem 0;transition:color .18s}
.pie a:hover{color:var(--oro-claro)}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2.4rem;padding-top:1.3rem;
  font-size:.73rem;color:rgba(255,255,255,.55);line-height:1.7}

/* ── blog ── */
.tarjeta .desde .sitio{font-size:.72rem}

/* ── artículo ── */
.articulo .contenedor{max-width:760px}
.articulo h1{margin:.9rem 0 0;text-wrap:balance}
.firma{display:flex;align-items:center;gap:.85rem;margin:1.6rem 0 2rem}
.firma-foto{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.firma b{display:block;font-size:.9rem}
.firma span{font-size:.78rem;color:var(--tinta-70)}
.articulo-portada{width:100%;border-radius:var(--radio);aspect-ratio:16/10;object-fit:cover}
.cuerpo-articulo{margin-top:2.4rem;font-size:1.04rem}
.cuerpo-articulo h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;
  margin:2.4rem 0 .5rem;letter-spacing:-.01em}
.cuerpo-articulo p{margin:0 0 1.1rem;color:var(--tinta-70);max-width:68ch}
.cuerpo-articulo .plomo{font-size:1.14rem;color:var(--tinta);margin-bottom:2rem}
.cuerpo-articulo strong{color:var(--tinta);font-weight:600}
.cuerpo-articulo ul{margin:0 0 1.4rem;padding-left:1.1rem;color:var(--tinta-70)}
.cuerpo-articulo li{margin-bottom:.55rem;padding-left:.3rem}
.cuerpo-articulo li::marker{color:var(--oro)}
.cuerpo-articulo figure{margin:2rem 0}
.cuerpo-articulo figure img{width:100%;border-radius:var(--radio);
  aspect-ratio:16/10;object-fit:cover}
.cuerpo-articulo video{width:100%;border-radius:var(--radio);background:var(--tinta);
  aspect-ratio:16/9}
.cuerpo-articulo figcaption{font-size:.8rem;color:var(--tinta-70);margin-top:.6rem;
  text-align:center}
.sello-articulo{margin-top:3rem;padding:1.7rem;background:var(--crema);
  border-left:3px solid var(--oro);border-radius:0 var(--radio) var(--radio) 0}
.sello-articulo b{display:block;font-size:1.06rem;margin-bottom:.35rem}
.sello-articulo p{margin:0 0 1.1rem;font-size:.92rem;color:var(--tinta-70)}

/* ── comunidad ── */
.retrato-comunidad img{width:100%;border-radius:var(--radio);aspect-ratio:4/5;
  object-fit:cover;object-position:center 20%}
.seccion.tinta .red{border-color:rgba(255,255,255,.28);color:#fff}
.seccion.tinta .red:hover{border-color:var(--oro-claro);color:var(--oro-claro)}

/* ── videos ── */
.videos{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.video{margin:0}
.video video{width:100%;border-radius:var(--radio);background:var(--tinta);
  aspect-ratio:16/9;object-fit:cover}
/* Un video vertical dentro de un marco 16:9 se recorta hasta quedar ilegible.
   Se declara su proporción y se centra en vez de estirarlo. */
.video.vertical{max-width:340px;margin-inline:auto}
.video.vertical video{aspect-ratio:9/16;object-fit:contain;background:#06202f}
.video figcaption{font-size:.82rem;color:var(--tinta-70);margin-top:.55rem}

/* ── ubicación ── */
.mapa-cartel{width:100%;border-radius:var(--radio);border:1px solid var(--linea)}

/* ── tipos de lote (San Eduardo) ── */
.columna-lote{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.5rem;box-shadow:var(--sombra)}
.marca-lote{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;margin-bottom:.8rem;
  background:var(--marca-tenue);color:var(--marca)}
.marca-lote.comercial{background:#FDF1E3;color:#8A4B10}
.columna-lote h3{font-family:var(--serif);font-size:1.5rem;font-weight:600}

/* ── retrato del asesor: circular, con los datos debajo ── */
/* En su propia página el titular de comunidad es h1; conserva el tamaño del h2. */
.seccion.tinta h1{font-family:var(--serif);font-size:clamp(1.85rem,3.6vw,2.9rem);
  font-weight:600;line-height:1.14;letter-spacing:-.01em}
.retrato-columna{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.retrato-columna .retrato{width:min(100%,270px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:var(--crema);border:3px solid var(--oro)}
.retrato-columna .retrato img{object-position:center 18%}
.retrato-datos{text-align:center;display:flex;flex-direction:column;gap:.2rem}
.retrato-datos b{font-family:var(--serif);font-size:1.35rem;font-weight:600}
.retrato-datos span{font-size:.8rem;color:var(--tinta-70);max-width:26ch;margin-inline:auto}
.retrato-datos a{font-size:.88rem;font-weight:600;color:var(--azul);text-decoration:none;
  margin-top:.35rem}
.retrato-datos a:hover{text-decoration:underline}

/* ── redes con el color de cada marca ── */
.red.facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.red.instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF);
  border-color:transparent;color:#fff}
.red.tiktok:hover{background:#010101;border-color:#010101;color:#fff}
.seccion.tinta .red.facebook:hover,.seccion.tinta .red.instagram:hover,
.seccion.tinta .red.tiktok:hover{color:#fff}

/* ── avances de obra: el nombre sobre la imagen, como en Almaviva ── */
.obra-rejilla{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.obra-tarjeta{position:relative;display:block;border-radius:var(--radio);overflow:hidden;
  text-decoration:none;color:#fff;aspect-ratio:4/3;background:var(--tinta);
  transition:transform .25s ease,box-shadow .25s ease}
.obra-tarjeta:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(4,37,61,.22)}
.obra-foto{position:absolute;inset:0}
.obra-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.obra-tarjeta:hover .obra-foto img{transform:scale(1.05)}
.obra-tarjeta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,37,61,.15) 0%,rgba(4,37,61,.55) 55%,rgba(4,37,61,.9) 100%)}
.obra-texto{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.3rem;
  display:flex;flex-direction:column;gap:.3rem}
.obra-lugar{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro-claro)}
.obra-texto b{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.1}
.obra-estado{align-self:flex-start;margin-top:.5rem;font-size:.65rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;
  background:var(--oro);color:#231a08}
.obra-tarjeta.sin-obra .obra-estado{background:rgba(255,255,255,.2);color:#fff}
.obra-tarjeta:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

/* ── panel lateral de promociones ── */
/* Pestaña fija al borde derecho, a media altura. En pantallas angostas se
   esconde para no acabar como una barra abajo: ahí el acceso vive en el menú. */
.promo-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:66;
  background:var(--oro);color:#231a08;border:0;cursor:pointer;font-family:var(--sans);
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:1.2rem .75rem;border-radius:12px 0 0 12px;writing-mode:vertical-rl;
  box-shadow:-3px 0 18px rgba(4,37,61,.25);display:flex;align-items:center;gap:.55rem;
  transition:padding-right .2s ease,background .2s ease}
.promo-tab:hover{padding-right:1.2rem;background:var(--oro-claro)}
.promo-tab small{writing-mode:horizontal-tb;background:#231a08;color:var(--oro-claro);
  font-size:.66rem;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
@media(max-width:820px){.promo-tab{display:none}}

/* Promociones también se abre desde el menú. */
.promo-abre{background:none;border:0;padding:.3rem 0;cursor:pointer;
  font-family:var(--sans);font-size:.79rem;font-weight:600;color:var(--tinta);
  letter-spacing:.01em;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s}
.promo-abre:hover{color:var(--azul)}
.promo-abre::after{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--oro);margin-left:.4rem;vertical-align:middle}
.promo-panel{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(480px,100%);
  background:var(--crema);display:flex;flex-direction:column;
  box-shadow:-8px 0 40px rgba(4,37,61,.28);transform:translateX(100%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.promo-panel[hidden]{display:flex!important}
.promo-panel.abierto{transform:translateX(0)}
.promo-panel header{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--linea);background:var(--tinta);color:#fff}
.promo-panel header b{font-family:var(--serif);font-size:1.25rem;font-weight:600}
.promo-cerrar{background:none;border:0;color:#fff;font-size:1.9rem;line-height:1;
  cursor:pointer;padding:0 .2rem}
.promo-lista{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:1.1rem}
/* flex:none es lo que impide que los cinco flyers se aplasten para caber en
   la altura del panel: sin esto se comprimen y solo se ve la franja de arriba. */
.promo-item{flex:none;background:#fff;border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;display:block;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s}
.promo-item:hover{border-color:var(--oro);box-shadow:0 6px 20px rgba(4,37,61,.14)}
.promo-item-ir{align-self:flex-start;font-size:.8rem;font-weight:600;background:var(--oro);color:#231a08;
  padding:.5rem 1rem;border-radius:999px;margin-top:.5rem;transition:background .18s}
/* Las condiciones del flyer, en texto: la letra chica de una imagen no se lee
   en un celular ni la alcanza un lector de pantalla. */
.promo-cond{list-style:none;margin:.5rem 0 0;padding:.7rem .8rem;background:var(--crema);
  border-radius:9px;display:flex;flex-direction:column;gap:.42rem}
.promo-cond li{display:flex;justify-content:space-between;gap:.7rem;font-size:.76rem;
  line-height:1.4}
.promo-cond b{font-weight:600;white-space:nowrap;color:var(--tinta)}
.promo-cond span{color:var(--tinta-70);text-align:right}
.promo-item:hover .promo-item-ir{background:var(--oro-claro)}
.promo-item-txt{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem}
/* El flyer entero, a su proporción real. Sin recortes: el precio va impreso
   en la parte de abajo de la imagen y es justo lo que hay que ver. */
.promo-item picture{display:contents}
.promo-item img.promo-flyer{width:100%;height:auto;display:block;
  aspect-ratio:auto;object-fit:fill}
.promo-item-cifra{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--oro);line-height:1}
.promo-item-txt b{font-size:.92rem;line-height:1.35}
.promo-item-txt p{margin:0;font-size:.82rem;color:var(--tinta-70)}
.promo-item-aplica{font-size:.72rem;font-weight:600;color:var(--azul);
  padding-top:.5rem;border-top:1px solid var(--linea)}
.promo-panel footer{padding:1rem 1.3rem;border-top:1px solid var(--linea);background:#fff}
.promo-velo{position:fixed;inset:0;z-index:79;background:rgba(4,37,61,.5);
  opacity:0;pointer-events:none;transition:opacity .28s}
.promo-velo.visible{opacity:1;pointer-events:auto}
@media(max-width:560px){
    .promo-panel{width:100%}
}

/* ── flotante de WhatsApp ── */
.flota{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;align-items:center;
  gap:.6rem;text-decoration:none}
.flota-leyenda{background:#fff;color:var(--tinta);font-size:.8rem;font-weight:600;
  padding:.5rem .85rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 14px rgba(4,37,61,.18);border:1px solid var(--linea)}
.flota-circulo{width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;flex:none;
  box-shadow:0 6px 22px rgba(37,211,102,.45);
  animation:latido 4s ease-in-out infinite}
.flota-circulo svg{width:31px;height:31px}
.flota:hover .flota-circulo{animation:none;transform:scale(1.06)}
/* Un latido cada cuatro segundos llama la atención; el parpadeo continuo cansa
   y hace que la gente cierre la pestaña. */
@keyframes latido{
  0%,88%,100%{transform:scale(1);box-shadow:0 6px 22px rgba(37,211,102,.45)}
  92%{transform:scale(1.09);box-shadow:0 6px 22px rgba(37,211,102,.45),0 0 0 12px rgba(37,211,102,.16)}
  96%{transform:scale(1);box-shadow:0 6px 22px rgba(37,211,102,.45),0 0 0 22px rgba(37,211,102,0)}
}

/* ── chat propio (bot con IA, sin widget externo) ──
   El .flota de arriba (ícono de WhatsApp) es el único botón visible; al
   dar clic abre este panel en vez de mandar directo a WhatsApp. Empieza
   oculto (display:none) y app.js le agrega/quita la clase "abierto".
   Diseño calcado del widget original: panel de alto completo acoplado al
   borde derecho (no una ventana flotante), foto de perfil con punto verde
   de "en línea", burbujas blancas con hora, chips debajo de los mensajes. */
.je-chat{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(400px,100%);
  height:100vh;height:100dvh;
  background:#F7F7F8;border-radius:0;box-shadow:-8px 0 40px rgba(4,37,61,.25);
  border-left:1px solid var(--linea);display:none;flex-direction:column;overflow:hidden}
.je-chat.abierto{display:flex}
.je-chat-cab{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;
  background:var(--tinta);color:#fff;flex:none}
.je-chat-avatar{position:relative;width:44px;height:44px;flex:none;border-radius:50%;
  overflow:hidden;border:2px solid var(--oro-claro)}
.je-chat-avatar img{width:100%;height:100%;object-fit:cover}
.je-chat-punto{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;
  background:#3BD671;border:2px solid var(--tinta)}
.je-chat-cab div{flex:1;min-width:0}
.je-chat-cab b{display:block;font-size:.92rem}
.je-chat-cab span{font-size:.72rem;color:rgba(255,255,255,.7)}
.je-chat-cab button{width:auto;background:rgba(255,255,255,.12);border:0;color:#fff;
  font-size:.9rem;border-radius:50%;width:28px;height:28px;flex:none;
  cursor:pointer;line-height:1;opacity:.9}
.je-chat-cab button:hover{opacity:1}
.je-chat-mensajes{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.7rem}
.je-msg{max-width:88%;padding:.7rem .9rem;border-radius:12px;font-size:.85rem;line-height:1.5}
.je-msg-bot{align-self:flex-start;background:#fff;color:var(--tinta);
  box-shadow:0 1px 3px rgba(4,37,61,.1);border-bottom-left-radius:3px}
.je-msg-user{align-self:flex-end;background:var(--azul);color:#fff;
  border-bottom-right-radius:3px}
.je-hora{display:block;margin-top:.35rem;font-size:.68rem;color:var(--tinta-70);font-weight:400}
.je-msg-user .je-hora{color:rgba(255,255,255,.7)}
.je-msg-cargando{align-self:flex-start;background:#fff;color:var(--tinta-70);
  box-shadow:0 1px 3px rgba(4,37,61,.1);
  border-bottom-left-radius:3px;padding:.6rem .85rem;border-radius:12px;font-size:.85rem}
.je-chat-chips{display:flex;gap:.4rem;padding:0 .8rem .8rem;flex-wrap:nowrap;flex:none;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.je-chip{width:auto;font:inherit;font-size:.72rem;font-weight:600;padding:.4rem .7rem;
  border:1px solid var(--linea);border-radius:999px;background:#fff;flex:none;
  color:var(--tinta);cursor:pointer;white-space:nowrap;transition:background .15s}
.je-chip:hover{background:var(--marca-tenue)}
.je-chat-form{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--linea);
  background:#fff;flex:none}
.je-chat-form input{flex:1;font:inherit;font-size:.85rem;padding:.6rem .8rem;
  border:1px solid var(--linea);border-radius:999px;background:#F7F7F8;color:var(--tinta)}
.je-chat-form input:focus{outline:0;border-color:var(--azul)}
.je-chat-form button{width:40px;height:40px;flex:none;border-radius:50%;border:0;
  background:var(--tinta);color:#fff;font-size:1rem;cursor:pointer}
.je-chat-form button:hover{background:#063452}
.je-chat-aviso{font-size:.68rem;color:#8a8478;text-align:center;padding:0 .8rem .55rem;line-height:1.3}

/* ── banda de Zoom ── */
.seccion.zoom{background:var(--tinta);color:#fff;padding-block:clamp(2.5rem,5vw,4rem)}
.zoom-caja{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  flex-wrap:wrap}
.seccion.zoom .plomo{color:rgba(255,255,255,.8)}
.seccion.zoom h2{max-width:22ch}
.zoom-caja .btn svg{width:19px;height:19px}
.zoom-btn svg{width:18px;height:18px}
.zoom-btn{border-color:var(--oro);color:var(--oro)}
.zoom-btn:hover{background:var(--oro);color:#231a08;border-color:var(--oro)}

/* ── promociones con imagen, al estilo de la página de Érika ── */
.promo-rejilla{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.promo-tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);
  transition:transform .22s ease,box-shadow .22s ease}
.promo-tarjeta:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(4,37,61,.14)}
.promo-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--crema)}
.promo-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.promo-tarjeta:hover .promo-foto img{transform:scale(1.05)}
.promo-vence{position:absolute;top:.85rem;right:.85rem;background:rgba(4,37,61,.9);
  color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:999px;backdrop-filter:blur(4px)}
.promo-cuerpo{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.promo-cifra{font-family:var(--serif);font-size:2.6rem;font-weight:600;line-height:.95;
  color:var(--oro);letter-spacing:-.02em}
.promo-cuerpo b{font-size:1rem;font-weight:600;line-height:1.35}
.promo-cuerpo p{margin:0;font-size:.87rem;color:var(--tinta-70);flex:1}
.promo-aplica{font-size:.73rem;font-weight:600;color:var(--azul);
  padding-top:.6rem;border-top:1px solid var(--linea)}
.promo-cuerpo .btn{margin-top:.4rem}
/* El flyer viene en 1080x1350, que es exactamente 4/5: a esa proporción no se
   recorta nada y las cifras del arte se leen enteras. La foto del desarrollo,
   que es apaisada, se queda en 16/10. */
.promo-foto.flyer{aspect-ratio:4/5}
.promo-mas{margin:.2rem 0 .1rem}
.promo-mas summary{cursor:pointer;font-size:.78rem;font-weight:600;color:var(--azul);
  list-style:none;padding:.35rem 0;display:flex;align-items:center;gap:.4rem}
.promo-mas summary::-webkit-details-marker{display:none}
.promo-mas summary::after{content:"▾";font-size:.7rem;transition:transform .2s ease}
.promo-mas[open] summary::after{transform:rotate(180deg)}
.promo-mas .promo-cond{margin-top:.15rem}
.promo-tabla{margin:.6rem 0 0}
.promo-tabla img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--linea)}
.promo-tabla figcaption{font-size:.7rem;color:var(--tinta-70);padding-top:.35rem;text-align:center}
@media(max-width:560px){
  .promo-cond li{flex-direction:column;align-items:flex-start;gap:.1rem}
  .promo-cond b{white-space:normal}
  .promo-cond span{text-align:left}
}
/* Una sola promoción dentro de un enrejado de tres columnas deja dos huecos y
   parece que faltó algo por cargar. Sola, la tarjeta se centra y se queda del
   ancho de una columna: el flyer sigue completo, sin recorte ni estirón. */
.promo-rejilla:has(>.promo-tarjeta:only-child){
  grid-template-columns:minmax(0,min(420px,100%));justify-content:center}

/* ── adaptable ── */
@media(max-width:960px){
  .dos-columnas,.asesor{grid-template-columns:1fr}
  .asesor .retrato{max-width:340px;aspect-ratio:1}
  .retrato-columna{margin-inline:auto}
  .galeria{grid-template-columns:1fr 1fr}
  .galeria,.galeria:has(picture:nth-child(5)){grid-template-columns:1fr 1fr}
  .galeria:has(picture:nth-child(5)) picture:first-child img{grid-row:auto;
    grid-column:span 2;aspect-ratio:16/9}
  .galeria.con-pie{grid-template-columns:1fr 1fr}
  .pie .contenedor{grid-template-columns:1fr 1fr}
  .confianza-datos{grid-template-columns:1fr 1fr}
}
/* El menú se pliega cuando deja de caber, no a un ancho de teléfono. Con
   nueve entradas eso ocurre cerca de los 1000 px: por debajo, la barra
   empujaba el logo fuera de la pantalla y cortaba "Contacto". */
@media(max-width:1180px){
  .hamburguesa{display:block}
  .menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:1rem 20px 2rem;border-bottom:1px solid var(--linea);
    max-height:80vh;overflow-y:auto;display:none;box-shadow:var(--sombra)}
  .menu.abierto{display:flex}
  .menu>a,.disparador,.promo-abre{padding:.85rem 0;border-bottom:1px solid var(--linea);
    text-align:left;width:100%}
  .menu>a.btn{margin-top:1rem;border-bottom:0;text-align:center}
  .panel{position:static;translate:none;opacity:1;visibility:visible;border:0;
    box-shadow:none;padding:0 0 .6rem 1rem;min-width:0}
}
@media(max-width:780px){
  /* En vertical el degradado tiene que bajar, no cruzar: si no, el texto de
     abajo queda sobre la parte clara de la foto y no se lee. */
  .portada::after{background:linear-gradient(180deg,rgba(4,37,61,.86) 0%,
    rgba(4,37,61,.6) 40%,rgba(4,37,61,.88) 100%)}
  .portada-viva::after{background:linear-gradient(180deg,rgba(4,37,61,.6) 0%,
    rgba(4,37,61,.3) 35%,rgba(4,37,61,.82) 100%)}
  .lista-check{columns:1}
  .plano{max-height:60vh}
}
@media(max-width:560px){
    .zoom-caja .btn{width:100%}
  .promos .contenedor{gap:.4rem;font-size:.72rem}
  .promos .promos-texto>span{display:none}
  .promos .cuenta{margin-left:0}
  .confianza-datos{grid-template-columns:1fr}
  .pie .contenedor{grid-template-columns:1fr}
  .galeria,.galeria:has(picture:nth-child(5)){grid-template-columns:1fr}
  .galeria:has(picture:nth-child(5)) picture:first-child img{grid-column:auto}
  .galeria.con-pie{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .flota-circulo{animation:none!important}
}
/* Cuenta regresiva de la promoción, arriba del panel de promociones */
.promo-cuenta{background:var(--tinta);color:#fff;text-align:center;padding:.9rem 1rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.promo-cuenta-tit{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-claro);font-weight:600}
.promo-cuenta-reloj{display:flex;justify-content:center;gap:.5rem;margin:.55rem 0 .45rem}
.promo-cuenta-reloj span{background:rgba(255,255,255,.08);border:1px solid rgba(216,192,148,.35);
  border-radius:10px;min-width:3.4rem;padding:.35rem .3rem}
.promo-cuenta-reloj b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.05;font-variant-numeric:tabular-nums}
.promo-cuenta-reloj small{font-size:.62rem;opacity:.75;text-transform:uppercase;letter-spacing:.08em}
.promo-cuenta-pie{font-size:.72rem;opacity:.8}
.promos .cuenta[data-vence]:not(.cuenta-cajas){font-variant-numeric:tabular-nums;color:var(--tinta);opacity:1;font-weight:600}

/* Página 404 (dirección que no existe) */
.no-encontrada{padding-top:clamp(3rem,8vw,6rem)}
.no-encontrada h1{font-size:clamp(2rem,5vw,3rem);margin:.4rem 0 .8rem}
.no-encontrada .plomo{max-width:60ch}
.no-encontrada .acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 2.4rem}
.no-encontrada-grupo{margin-top:1.4rem}
.no-encontrada-grupo b{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plomo,#5b6670);margin-bottom:.6rem}
.no-encontrada-grupo div{display:flex;flex-wrap:wrap;gap:.5rem}
.no-encontrada-grupo a{text-decoration:none;padding:.5rem 1rem;border:1px solid #e3ddd2;border-radius:999px;background:#fff;color:var(--tinta,#04253D);font-weight:600;font-size:.95rem}
.no-encontrada-grupo a:hover{border-color:var(--oro,#B89A5E)}

/* Celular: que la página no se pueda deslizar de lado. El panel de promociones
   cerrado queda fuera de la pantalla a la derecha y el iPhone dejaba moverse
   hacia él; cerrado se oculta del todo (abre igual, con la misma animación). */
html{overflow-x:hidden}
.promo-panel{visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s linear .28s}
.promo-panel.abierto{visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s}
/* Pantallas muy angostas (iPhone SE): las tarjetas no se salen del borde. */
.rejilla-proyectos{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr))}
.videos{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.promo-rejilla{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
/* El cotizador no se sale del borde en pantallas angostas (Conkal en iPhone SE). */
.dos-columnas > *{min-width:0}
.renglon > *{min-width:0}
.renglon b,.renglon strong{overflow-wrap:anywhere;text-align:right}