de la pagina. */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0}
/* ⛔ LA MIGA DE PAN SE ELIMINO DEL HTML EL 4 SEP 2026 y estas reglas se quedan
por si vuelve. Historia, porque explica la decision:
- El 1 sep decia lo mismo que el titular palabra por palabra ("HOME /
PROPERTIES FOR SALE" y debajo "Properties for sale"). Se arreglo dejando
que la miga dijera DONDE estas y el titular QUE estas viendo.
- El 4 sep Carlos la quito entera: *"ese 'Property' de arriba es relleno...
quita tambien el 'Home', porque por lo general todo el mundo le da al
logo"*.
👉 Y el argumento que la remata es de fecha: **el logo de la cabecera no
llevaba a la portada hasta el 3 sep 2026** (iba a `#top`). Mientras eso
estuvo roto, "Inicio" era la unica salida de esta pagina y la miga se
ganaba el sitio. Arreglado el logo, se quedo sin trabajo.
⚠️ Es una leccion de mantenimiento: **al arreglar un fallo hay que mirar
que muletas se pusieron mientras tanto**, o se quedan para siempre. */
.res-crumb{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8579;margin-bottom:12px}
.res-crumb a{color:#8a8579;text-decoration:none;transition:color .2s}
.res-crumb a:hover{color:var(--turq,#10b2c2)}
.res-crumb span{margin:0 6px}
/* El titular en dos tintas, como el resto del sitio: la segunda mitad en
turquesa. Es lo que convierte un rotulo de listado en un titular de verdad. */
.res-h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.9rem);font-weight:700;margin:0 0 22px;color:#0b0c0d;letter-spacing:-.02em;line-height:1.12}
.res-h1 .hl{color:var(--turq,#10b2c2)}
/* ✨ LA BARRA DE FILTROS, TRATAMIENTO DE ALTA GAMA (1 sep 2026).
Carlos: *"ahi no hay ningun lujo, no hay nada atractivo; cuando un comprador
entre tiene que decir 'coño, aqui vale la pena buscar'"*. Y tenia razon:
eran seis desplegables del navegador, en crudo, con su flechita gris de
sistema. Eso se ve a formulario de tramite, no a inmobiliaria de lujo.
👉 LO QUE DA EL AIRE CARO AQUI SON CINCO COSAS, y quitando una se cae:
1. **Fuera la flechita del sistema.** `appearance:none` y una flecha
dibujada por nosotros, en turquesa. Es el detalle que mas delata a un
formulario sin trabajar, y el que menos cuesta.
2. **Los campos sin caja, con filete solo abajo.** Una rejilla de seis
cajas con borde se lee como una hoja de calculo. Con el filete inferior
se lee como una ficha impresa. Es el mismo gesto del buscador del hero.
3. **AIRE.** Mas espacio entre campos y mas alto de campo. El aire es lo
mas barato y lo mas caro a la vez.
4. **Las etiquetas en negro de marca, no en gris.** Es la misma correccion
que Carlos mando hacer en los rotulos de los socios: *"esa letra tan
muerta se ve con poco prestigio"*. El gris era la mitad del problema.
5. **El panel flotando**, con sombra larga y suave y esquina de 18px, sobre
el crema de la seccion. Un panel que flota se lee como una pieza; uno
con borde duro, como un recuadro.
⛔ Ni oro ni rayitas: el oro a este tamano se lava (ver `.tp-rotulo`). */
/* 🔁 EL PANEL YA NO ABRE LA PAGINA: CUELGA DE "AFINAR" (4 sep 2026).
Medido antes del cambio: 168 px de mandos (126 el panel + 42 la barra) y la
primera villa empezando en el pixel 343 de una ventana de 639, o sea media
fila de casas en la primera pantalla.
🚨 `[hidden]{display:none}` OBLIGATORIO: este bloque es `display:flex` y el
`hidden` del navegador lo pisa cualquier `display` declarado despues. Sexta
vez en el sitio. */
.res-filters[hidden]{display:none}
.res-filters{display:flex;flex-wrap:wrap;gap:26px 22px;align-items:flex-end;
background:#fff;border:1px solid rgba(11,12,13,.06);border-radius:18px;
padding:26px 28px;margin-bottom:22px;
box-shadow:0 26px 60px -34px rgba(11,12,13,.34), 0 2px 8px -4px rgba(11,12,13,.06)}
.rf{display:flex;flex-direction:column;gap:9px;min-width:150px;flex:1 1 150px}
.rf label{font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink,#0b0c0d);font-weight:600}
/* La flecha es un SVG en `background`, no un caracter: un caracter cambia de
forma en cada sistema y en Windows sale cuadrado. */
.rf select{appearance:none;-webkit-appearance:none;
padding:11px 34px 11px 2px;border:none;border-bottom:1.6px solid rgba(11,12,13,.16);
border-radius:0;background:transparent;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310b2c2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 6px center;
font-family:inherit;font-size:.98rem;font-weight:500;color:var(--ink,#0b0c0d);
cursor:pointer;transition:border-color .2s}
.rf select:hover{border-bottom-color:rgba(16,178,194,.55)}
.rf select:focus{outline:none;border-bottom-color:var(--turq,#10b2c2);box-shadow:none}
/* Un campo con valor puesto se marca solo: asi de un vistazo se ve por donde
esta filtrando sin tener que leer los seis. */
.rf select[data-vacio="0"]{border-bottom-color:var(--turq,#10b2c2);font-weight:600}
/* ⛔ `.rf-togs`, `.res-togs` y `.rtog` (los chips Financiamiento / Comunidad
cerrada / Cerca del mar / Lujo) SE QUITARON DEL HTML el 4 sep 2026: Carlos
los llamo relleno. Las reglas se quedan aqui porque las etiquetas siguen
vivas en `propiedades.js` y filtrando por URL; si algun dia se devuelven los
chips a la pagina, el estilo esta. */
/* 🔘 "LIMPIAR": DE BOTON TURQUESA MACIZO A TEXTO DISCRETO (4 sep 2026).
Era el elemento con mas peso visual de todo el panel de busqueda, o sea que
**lo que mas cantaba en la zona de buscar era la accion de borrar lo
buscado**. Un boton primario es para la accion que quieres que hagan.
⚠️ Y ADEMAS SOLO SE VE CUANDO HAY ALGO QUE LIMPIAR (lo enciende
`marcarFiltrosPuestos()`). En reposo el panel son solo los campos.
🚨 `[hidden]{display:none}` obligatorio: `hidden` lo pisa cualquier
`display` declarado despues, y este es `inline-flex`. Quinta vez en el
sitio. */
.rf-clear{flex:0 0 auto;align-self:flex-end;margin-bottom:11px;
display:inline-flex;align-items:center;gap:6px;
background:none;border:0;padding:0;cursor:pointer;
font-family:inherit;font-size:.82rem;font-weight:600;
color:var(--turq-dark,#0b7c87);
border-bottom:1.6px solid transparent;transition:border-color .2s}
.rf-clear[hidden]{display:none}
.rf-clear:hover{border-bottom-color:var(--turq,#10b2c2)}
/* ⚠️ ESTA SECCION SE COMIO A `.res-top` el 4 sep 2026: ahora contiene el ,
la fila de mandos, el panel de filtros y la parrilla. Por eso el relleno de
arriba sube un poco: ya no hay una banda blanca encima que separe de la
cabecera turquesa. */
.res-body{padding:26px 0 70px;min-height:52vh}
.res-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.res-count{font-size:.95rem;color:#5d6462;font-weight:500}
.res-tools{display:flex;gap:12px;align-items:center}
.res-tools select{padding:10px 12px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;font-family:inherit;font-size:.88rem;cursor:pointer}
.res-view{display:flex;border:1px solid rgba(0,0,0,.14);border-radius:10px;overflow:hidden}
.res-view button{width:40px;height:40px;display:grid;place-items:center;background:#fff;border:0;cursor:pointer;color:#8a8579;transition:.16s}
.res-view button+button{border-left:1px solid rgba(0,0,0,.12)}
.res-view button.active{background:var(--turq,#10b2c2);color:#fff}
.res-view .ico svg{width:17px;height:17px}
/* 🔎 "AFINAR": EL BOTON QUE ABRE EL PANEL DE FILTROS (4 sep 2026).
Comparte medidas con `.favbtn` y con `.res-view` para que la fila de mandos
se lea como una fila y no como tres piezas de sitios distintos.
⚠️ Va PRIMERO de los cuatro y es el unico que cambia la lista entera; los
otros tres solo cambian como se ve. Ese es el orden de la fila.
💡 Encendido se pone en turquesa de marca, igual que la vista activa: en
esta barra el turquesa ya significa "esto es lo que esta puesto". */
.res-afinar{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;
border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;
font-family:inherit;font-size:.88rem;font-weight:600;color:#4a5250;
cursor:pointer;transition:.18s}
.res-afinar:hover{border-color:var(--turq,#10b2c2);color:var(--turq,#10b2c2)}
.res-afinar.on{background:var(--turq,#10b2c2);border-color:var(--turq,#10b2c2);color:#fff}
.res-afinar .ico svg{width:16px;height:16px}
/* La flecha gira al abrir: dice que el panel cuelga de aqui. */
.res-afinar .chev svg{width:13px;height:13px;transition:transform .22s}
.res-afinar.on .chev svg{transform:rotate(180deg)}
/* 🔢 El contador de filtros puestos. Es lo unico que, con el panel cerrado,
avisa de que la lista viene recortada. */
.res-afinar-n{display:inline-grid;place-items:center;min-width:19px;height:19px;
padding:0 5px;border-radius:999px;
background:var(--turq,#10b2c2);color:#fff;
font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.res-afinar-n[hidden]{display:none}
/* Con el boton encendido el fondo ya es turquesa, asi que la pastilla se
invierte: mantenerla en turquesa la haria desaparecer contra el relleno. */
.res-afinar.on .res-afinar-n{background:#fff;color:var(--turq,#10b2c2)}
.favbtn{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;font-family:inherit;font-size:.88rem;color:#4a5250;cursor:pointer;transition:.18s}
.favbtn:hover{border-color:#e0556a;color:#e0556a}
.favbtn.on{background:#e0556a;border-color:#e0556a;color:#fff}
.favbtn .ico svg{width:16px;height:16px}
/* --- Tarjeta: favorito, galeria y botones --- */
.card .ph{position:relative}
.card .fav{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:#7b8280;transition:.18s;z-index:3;box-shadow:0 3px 12px rgba(0,0,0,.16)}
.card .fav svg{width:19px;height:19px}
.card .fav:hover{background:#fff;color:#e0556a;transform:scale(1.08)}
.card .fav.on{color:#fff;background:#e0556a}
.card .fav.on svg{fill:currentColor}
.card .cg-prev,.card .cg-next{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0b0c0d;font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:.2s;z-index:3;box-shadow:0 3px 12px rgba(0,0,0,.18)}
.card .cg-prev{left:10px}.card .cg-next{right:10px}
.card:hover .cg-prev,.card:hover .cg-next{opacity:1}
.card .cg-prev:hover,.card .cg-next:hover{background:#fff}
/* 📷 LAS PASTILLAS DE FOTOS Y VIDEO, ARRIBA DE LA TARJETA (9 sep 2026)
Carlos: *"antes de que tú entres, arriba te dice Video, cuántas
fotos"*. Es lo que hace RealtorDR y funciona: el contador es la
prueba de que la villa está fotografiada de verdad.
⚠️ `right:58px` NO ES UN NÚMERO A OJO: es el corazón (38 px de ancho
+ 12 px de margen derecho) más 8 px de aire. Si el favorito cambia de
tamaño, este número cambia con él.
El aspecto sale del mismo negro translúcido de `.card-nfotos`, que es
el contador que ya existe en la parrilla de comunidad. ⛔ Ellos las
ponen en ROJO: aquí el rojo está reservado para la oportunidad y el
financiamiento del dueño, y gastarlo en un contador de fotos le quita
fuerza al sello que sí decide una compra. */
.card-conta{position:absolute;top:12px;right:58px;z-index:3;display:flex;gap:6px}
.cpill{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;
border-radius:999px;background:rgba(11,12,13,.72);color:#fff;
font-size:.75rem;font-weight:600;line-height:1;backdrop-filter:blur(3px)}
.cpill .ico{width:14px;height:14px}
.cpill .ico svg{width:14px;height:14px}
.card-yield{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:5px 11px;border-radius:999px;background:rgba(16,178,194,.12);color:var(--ink,#0b0c0d);font-size:.79rem;font-weight:600}
.card-yield .ico svg{width:13px;height:13px}
/* 💰 LA LINEA DEL RENDIMIENTO AL MES. Turquesa mas fuerte que la de la
tarifa por noche, porque es el dato que decide: "produce US$4,000 al
mes" convierte una casa de US$459,000 en un negocio con cifra.
⛔ Ningun competidor puede poner esta linea: los tres venden villas
que no administran. */
.card-yield-mes{background:rgba(16,178,194,.16)}
.card-yield-mes b{font-weight:800;color:var(--turq-dark,#0b7c87)}
.dcard .card-yield{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
padding:5px 11px;border-radius:999px;background:rgba(16,178,194,.12);
color:var(--ink,#0b0c0d);font-size:.78rem;font-weight:600;line-height:1.3}
.dcard .card-yield .ico{width:14px;height:14px;flex:none}
.dcard .card-yield .ico svg{width:14px;height:14px}
/* ⛔ AQUI VIVIA UNA SEGUNDA DECLARACION DE `.card-cta`, y estaba MATANDO
a la buena. Decia `margin-top:14px` sin `flex`, y al estar DESPUES
ganaba: los dos botones del pie de la tarjeta se quedaban sin repartirse
el ancho y la fila del precio no se podia partir bien.
👉 Es el mismo fallo que ya apareció en este archivo con el pie de
página (una regla declarada dos veces, y gana la última) y con
`.fc-desglose`. **Un `@media` no gana por ser `@media`, y una regla no
gana por ser la que acabas de escribir: gana la última que se lee.**
La declaración buena vive arriba, junto a `.btn-preg` y `.btn-ver`. */
.btn-ghost{background:#fff;border:1px solid rgba(0,0,0,.16);color:#0b0c0d;border-radius:10px;display:inline-flex;align-items:center;text-decoration:none;transition:.18s}
.btn-ghost:hover{border-color:var(--turq,#10b2c2);color:var(--turq,#10b2c2)}
/* --- Vista de lista --- */
.cards.lista{grid-template-columns:1fr;gap:18px}
.cards.lista .card{display:grid;grid-template-columns:340px 1fr;align-items:stretch}
.cards.lista .card .ph{height:100%;min-height:236px}
.cards.lista .card .ph img{height:100%;object-fit:cover}
.cards.lista .card-body{display:flex;flex-direction:column;justify-content:center;padding:24px 28px}
.cards.lista .card-cta{max-width:340px}
@media(max-width:760px){.cards.lista .card{grid-template-columns:1fr}.cards.lista .card .ph{min-height:210px}}
/* --- Vacio y paginacion --- */
.res-empty{text-align:center;padding:70px 20px;max-width:520px;margin:0 auto}
.res-empty .ico svg{width:46px;height:46px;color:#c9c3b6}
.res-empty h3{font-family:var(--display);font-size:1.5rem;font-weight:700;margin:16px 0 10px;color:#0b0c0d}
.res-empty p{color:#6b7270;line-height:1.65;margin-bottom:22px}
.res-pager{display:flex;justify-content:center;gap:8px;margin-top:44px;flex-wrap:wrap}
.res-pager button{min-width:42px;height:42px;padding:0 12px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;font-family:inherit;font-size:.92rem;color:#4a5250;cursor:pointer;transition:.16s}
.res-pager button:hover{border-color:var(--turq,#10b2c2);color:var(--turq,#10b2c2)}
.res-pager button.active{background:var(--turq,#10b2c2);border-color:var(--turq,#10b2c2);color:#fff;font-weight:600}
/* =====================================================================
CÓMO SE COMPRA, PASO A PASO (4 sep 2026)
📐 EL FORMATO ES LA MITAD DEL ARGUMENTO. La página del socio son 3.267
palabras y ocho pasos en prosa; nadie que esté evaluando un país lee eso en
el teléfono. Aquí son CINCO tarjetas con el número grande al margen, y en
cada una la línea del dinero destacada.
👉 La jerarquía dentro de cada paso es deliberada: **qué pasa** en negro,
**dónde está tu dinero** en turquesa y peso 600, y el detalle técnico en
gris pequeño. El ojo baja por la columna del dinero sin leer el resto, que
es como se lee de verdad esta página.
===================================================================== */
.cp-hero{padding:52px 0 10px;text-align:center}
.cp-hero h1{max-width:16ch;margin:0 auto;text-wrap:balance}
.cp-sub{max-width:52ch;margin:16px auto 0;color:#5a625f;line-height:1.7;text-wrap:balance}
.cp-pasos-sec{padding:34px 0 84px}
/* --- LOS TRES NÚMEROS DEL HERO ---
Número grande en negro de marca y la etiqueta debajo en versalitas muy
espaciadas y pequeñas. Es el contraste que usan las casas de subastas: la
cifra manda y el rótulo se aparta.
⛔ Sin filetes verticales entre las tres. Se probaron: en una fila de tres
datos las líneas se leen como una tabla, y una tabla no es un titular. El
aire separa igual y no mete una raya que no dice nada. */
.cp-cifras{display:flex;justify-content:center;gap:54px;flex-wrap:wrap;
margin:30px auto 0}
.cp-cifra{text-align:center}
.cp-cifra b{display:block;font-family:var(--display);
font-size:2rem;font-weight:700;line-height:1;color:var(--ink,#0b0c0d);
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cp-cifra span{display:block;margin-top:9px;
font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:#8a8579}
/* --- LOS CINCO PASOS, SOBRE UN RAÍL ---
🔁 SEGUNDA VERSIÓN. La primera dejaba los números sueltos al margen y aquí
estaba escrito que un raíl vertical "se leería como una rayita decorativa".
👉 Y era verdad de una raya suelta al lado de unas tarjetas. Deja de serlo
cuando **los números se sientan encima**: entonces no es una raya, es el
hilo del que cuelgan los cinco momentos, y cinco tarjetas apiladas pasan a
leerse como un recorrido. Eso es lo que Carlos pidió como "potencia".
⚠️ El raíl termina en el último número y no sigue hasta abajo: una línea que
continúa después del final promete un sexto paso que no existe. */
.cp-pasos{list-style:none;margin:0 auto;padding:0 0 0 58px;max-width:760px;
position:relative;display:flex;flex-direction:column;gap:14px}
.cp-pasos::before{content:"";position:absolute;left:19px;top:26px;bottom:26px;
width:1.6px;background:linear-gradient(180deg,
rgba(16,178,194,.42) 0%, rgba(16,178,194,.42) 88%, rgba(16,178,194,0) 100%)}
/* ✨ EL PAPEL DE LA TARJETA. Tres capas y las tres hacen falta:
un degradado casi imperceptible que le da cuerpo, el filo de luz blanco
arriba (`inset`) que es lo que hace que un borde parezca material y no
dibujo, y la sombra larga y baja que la despega del crema.
💡 El filo es el mismo gesto que ya vive en los botones del hero de
comunidad y en el cristal del buscador de la portada. */
.cp-paso{display:flex;gap:20px;align-items:flex-start;position:relative;
background:linear-gradient(160deg,#ffffff 0%,#fdfcfa 100%);
border:1px solid rgba(11,12,13,.07);border-radius:18px;
padding:24px 26px;
box-shadow:0 18px 44px -34px rgba(11,26,36,.55),
inset 0 1px 0 rgba(255,255,255,.9)}
/* 🔢 EL NÚMERO, SENTADO EN EL RAÍL. Disco blanco con filete turquesa de
1,6 px: el mismo grosor mínimo de toda la casa, porque con devicePixelRatio
1,25 un `1px` se pinta a 0,8 y el turquesa llega lavado.
⚠️ Va POSICIONADO, no dentro del flujo de la tarjeta, para que caiga sobre
el raíl aunque la tarjeta crezca de alto. */
.cp-n{position:absolute;left:-58px;top:22px;
width:39px;height:39px;flex:none;
display:grid;place-items:center;border-radius:50%;
background:#fff;border:1.6px solid var(--turq,#10b2c2);
font-family:var(--display);font-size:.82rem;font-weight:700;
color:var(--turq-dark,#0b7c87);letter-spacing:.01em;
font-variant-numeric:tabular-nums;
box-shadow:0 6px 16px -8px rgba(16,178,194,.6)}
.cp-txt{flex:1;min-width:0}
.cp-txt h2{font-family:var(--display);font-size:1.12rem;font-weight:700;
color:#0b0c0d;margin:0 0 8px;line-height:1.3}
.cp-txt p{margin:0 0 8px;color:#4a5250;line-height:1.62;font-size:.95rem}
.cp-txt p:last-child{margin-bottom:0}
.cp-txt b{font-weight:700;color:#0b0c0d}
/* 💰 LA LÍNEA DEL DINERO. Es la que contesta la pregunta que el visitante
tiene de verdad, así que es la única con color y peso propio.
⚠️ El turquesa de marca sobre blanco da 2,57 de contraste, por debajo del
4,5 recomendado, y aquí es una frase entera y no una palabra suelta. Por
eso va en turquesa OSCURO (4,95): la regla de no oscurecer el turquesa es
para titulares y resaltes cortos, y lo que manda en un renglón que hay que
leer es que se pueda leer. */
/* ✨ Y LLEVA UN FILETE TURQUESA A LA IZQUIERDA, como una cita destacada. No es
adorno: **es la línea que contesta la pregunta de verdad**, y el filete la
saca del párrafo para que el ojo la encuentre bajando en diagonal, que es
como se lee esta página. Cinco filetes alineados en cinco tarjetas hacen
además una segunda columna que guía la lectura. */
.cp-dinero{color:var(--turq-dark,#0b7c87)!important;font-weight:600;
border-left:1.6px solid var(--turq,#10b2c2);padding-left:13px;
margin-left:1px}
.cp-dinero b{color:var(--turq-dark,#0b7c87)}
/* El detalle técnico, más pequeño y en gris: está para el que quiere saber
más, no para el que baja en diagonal. */
.cp-nota{font-size:.87rem!important;color:#6b7270!important;line-height:1.6!important}
.cp-nota a{color:var(--turq-dark,#0b7c87);text-decoration:none;
border-bottom:1.6px solid transparent;transition:border-color .2s}
.cp-nota a:hover{border-bottom-color:var(--turq,#10b2c2)}
/* --- Los tres hechos de "lo que conviene saber" --- */
.cp-saber{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
max-width:760px;margin:34px auto 0}
/* Mismo papel que las tarjetas de los pasos: degradado leve y filo de luz.
Si dos familias de tarjetas conviven en la misma pantalla y una tiene
material y la otra no, la segunda se ve barata al lado. */
.cp-dato{background:linear-gradient(160deg,#ffffff 0%,#fdfcfa 100%);
border:1px solid rgba(11,12,13,.07);border-radius:16px;padding:22px 20px;
box-shadow:0 14px 34px -30px rgba(11,26,36,.5),
inset 0 1px 0 rgba(255,255,255,.9)}
/* Iconos de TRAZO y sin disco de color detrás: la regla de la casa. */
.cp-dato .ico svg{width:24px;height:24px;color:var(--turq,#10b2c2)}
.cp-dato h3{font-family:var(--display);font-size:.95rem;font-weight:700;
color:#0b0c0d;margin:12px 0 7px;line-height:1.3}
.cp-dato p{margin:0;font-size:.86rem;line-height:1.58;color:#5a625f}
/* --- El puente a la calculadora --- */
/* Reusa `.rc-txt` del bloque de cierre para no inventar otro juego de
tipografías.
🚨 PERO NO LLEVA BORDE TURQUESA NI ANIMACIÓN, y ese es el punto. Se montó
primero igual que `.cierre` y en pantalla **los dos bloques del final se
leían como el mismo bloque repetido**: mismo blanco, mismo filete turquesa,
mismo alto, uno encima del otro.
👉 Son dos cosas distintas y tienen que pesar distinto: **esto es navegación
dentro del sitio** (te lleva a otra página nuestra) y el de abajo **es la
conversión** (abre la conversación). El turquesa y el movimiento se los
queda uno solo, o dejan de significar.
Es la misma regla que ya decidió los tres botones del hero de comunidad: si
dos piezas pesan igual, la que convierte deja de destacar. */
.cp-calc{display:flex;align-items:center;gap:20px;max-width:760px;
margin:34px auto 0;padding:20px 24px;
background:#fff;border:1px solid rgba(11,12,13,.07);border-radius:18px;
box-shadow:0 18px 44px -38px rgba(11,26,36,.5)}
.cp-calc .ico svg{width:26px;height:26px;color:var(--turq,#10b2c2);flex:none}
/* Botón secundario: contorno, no relleno. El relleno turquesa es del cierre. */
.cp-calc .btn{height:44px;padding:0 20px;font-size:.85rem;white-space:nowrap;flex:none;
background:#fff;color:var(--turq-dark,#0b7c87);
border:1.6px solid var(--turq,#10b2c2);box-shadow:none}
.cp-calc .btn:hover{background:var(--turq,#10b2c2);color:#fff}
.cp-pasos-sec .cierre{max-width:760px;margin-top:18px}
/* Las fuentes, en letra pequeña. Es lo que separa esto de un folleto. */
.cp-fuentes{max-width:760px;margin:30px auto 0;font-size:.76rem;line-height:1.65;
color:#8a8579;text-align:center}
@media(max-width:760px){
.cp-hero{padding:34px 0 6px}
.cp-saber{grid-template-columns:1fr;gap:12px}
.cp-calc{flex-direction:column;text-align:center;gap:14px;padding:24px 20px}
.cp-calc .btn{width:100%}
/* 🐛 LAS TRES CIFRAS PASAN A REJILLA DE 3, NO A FLEX CON `wrap`. Con flex,
un rótulo largo tiraba el tercer dato a una segunda fila y quedaba 2+1: un
titular de tres cifras partido así se ve roto, no apretado.
⚠️ `minmax(0,1fr)` y no `1fr`: en una rejilla, `1fr` no baja del ancho de
su contenido, así que el rótulo más largo volvería a mandar. Es el mismo
detalle que hizo funcionar los tres botones del hero de comunidad. */
.cp-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;margin-top:24px}
.cp-cifra b{font-size:1.5rem}
/* ⚠️ `letter-spacing` MUY BAJO Y `hyphens` AQUI. Las versalitas espaciadas
son lo que hace caro el rótulo en escritorio, pero en una columna de 100 px
ese mismo espaciado es lo que lo saca de la celda. El lujo cede al ancho. */
.cp-cifra span{font-size:.6rem;letter-spacing:.08em;
overflow-wrap:anywhere;hyphens:auto}
/* 📱 EL RAÍL SE ESTRECHA, NO DESAPARECE. Con 375 px de pantalla, 58 px de
margen izquierdo dejarían la tarjeta en 283 y el texto en cuatro palabras
por renglón. A 40 px sigue habiendo recorrido y la tarjeta respira. */
.cp-pasos{padding-left:40px}
.cp-pasos::before{left:15px}
.cp-n{left:-40px;top:20px;width:31px;height:31px;font-size:.72rem}
.cp-paso{padding:20px 18px;gap:14px}
}
/* =====================================================================
FINANCIAR TU COMPRA (4 sep 2026)
Hereda el papel de las tarjetas de `.cp-paso`: degradado leve, filo de luz
arriba y sombra larga. Si dos páginas del mismo apartado usan cartulinas
distintas, se nota al pasar de una a otra.
===================================================================== */
.fn-hero{padding:52px 0 10px;text-align:center}
.fn-hero h1{max-width:15ch;margin:0 auto;text-wrap:balance}
.fn-sub{max-width:54ch;margin:16px auto 0;color:#5a625f;line-height:1.7;text-wrap:balance}
.fn-body{padding:26px 0 84px}
.fn-body > .wrap > *{max-width:820px;margin-left:auto;margin-right:auto}
.fn-h2{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--ink,#0b0c0d);
margin:52px 0 6px;text-align:center;line-height:1.25}
.fn-lead{margin:0 auto 22px;max-width:52ch;text-align:center;
color:#6b7270;font-size:.9rem;line-height:1.6;text-wrap:balance}
/* --- Los cuatro mínimos. Cifra grande arriba, qué es debajo. Es la misma
jerarquía de las tres cifras de "Cómo se compra": el número manda. --- */
.fn-mins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fn-min{background:linear-gradient(160deg,#fff 0%,#fdfcfa 100%);
border:1px solid rgba(11,12,13,.07);border-radius:16px;padding:20px 16px;text-align:center;
box-shadow:0 14px 34px -30px rgba(11,26,36,.5),inset 0 1px 0 rgba(255,255,255,.9)}
.fn-min .ico svg{width:21px;height:21px;color:var(--turq,#10b2c2)}
/* La cifra sube de 1.28 a 1.6rem: en un bloque que se llama "¿Calificas?" lo
que tiene que gritar es el número, no el rótulo de debajo. */
.fn-min b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:700;
color:var(--ink,#0b0c0d);margin:10px 0 6px;line-height:1.05;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fn-min span{display:block;font-size:.76rem;line-height:1.45;color:#6b7270}
/* La aclaración de quién publica los mínimos. Va debajo de las cuatro cifras
y en pequeño: es una precisión, no un titular. Pero sin ella la página deja
a Banco Popular como si no pidiera nada, que es justo lo que Carlos cazó. */
.fn-pie-min{max-width:62ch;margin:16px auto 0;text-align:center;
font-size:.79rem;line-height:1.6;color:#8a8579}
/* =====================================================================
LOS DOS BANCOS: FICHA TÉCNICA SOBRE PANTALLA (4 sep 2026)
Elegida por Carlos entre cuatro montadas juntas en `_lujo-financiar.html`.
Es el mismo degradado, el mismo reflejo de un píxel arriba y la misma
sombra que la pantalla del total de la calculadora: **un elemento oscuro
dentro de una página clara, que es lo que él aprobó, no una sección oscura,
que es lo que tumbó dos veces.**
⛔ NO se usa `.fn-banco` ya: eran dos tarjetas y no dejaban comparar.
===================================================================== */
.fn-bancos{--cian:var(--turq,#10b2c2);
border-radius:22px;overflow:hidden;position:relative;
background:linear-gradient(150deg,#16293a 0%,#0e1a24 60%,#0a1219 100%);
box-shadow:0 30px 64px -28px rgba(11,26,36,.9),inset 0 1px 0 rgba(255,255,255,.10)}
.fn-bancos::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;z-index:2;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.fn-cab{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:18px;
padding:26px 30px 22px;align-items:end}
/* 🎨 LA PLAQUITA BLANCA ES LO QUE HACE POSIBLE EL COLOR DEL BANCO.
Medido: sobre el fondo de la pantalla el rojo de Scotiabank da 3,91 de
contraste y **el azul marino de Popular da 1,42, o sea que desaparece**.
Sobre blanco los dos se leen. Es la misma trampa del barrido celeste sobre
el botón turquesa: un color solo existe contra el fondo que tiene detrás.
⛔ Y no se aclara el azul de Popular para que quepa en el oscuro: aclarar
el color de otra marca es exactamente lo que esta casa prohíbe con el
turquesa propio. */
.fn-placa{background:#fff;border-radius:12px;padding:14px 16px 12px;
border-bottom:3px solid transparent;display:grid;place-items:center;min-height:58px}
.fn-placa img{max-height:26px;max-width:100%;width:auto;object-fit:contain;display:block}
.fn-col .fn-prog{margin:10px 0 0;text-align:center;
font-size:.74rem;font-weight:600;color:rgba(255,255,255,.6);line-height:1.4}
/* 🐛 SE LLAMA `.fn-tfila` Y NO `.fn-fila` POR UN CHOQUE QUE SE VIO EN PANTALLA:
`.fn-fila` ya existía para las filas de dos campos del formulario de abajo,
con `grid-template-columns:repeat(2,...)`. La tabla heredaba dos columnas,
los tres elementos de cada fila se desbordaban y **los números salían
escalonados en diagonal**.
👉 Antes de bautizar una clase, buscarla en la hoja. */
.fn-tfila{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:18px;align-items:center;
padding:16px 30px;border-top:1px solid rgba(255,255,255,.10)}
.fn-tfila:nth-of-type(even){background:rgba(255,255,255,.03)}
.fn-rot-f{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.52)}
.fn-val{display:block;text-align:center;font-family:var(--display);
font-size:1.62rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
/* El subrótulo en cian, que es el color de dato de esta pantalla. */
.fn-val small{display:block;margin-top:5px;font-size:.72rem;font-weight:500;
letter-spacing:0;color:var(--cian)}
/* Cuando el valor es una frase y no una cifra, baja de cuerpo: a 1,62rem una
frase de cinco palabras rompe la fila. */
.fn-val-txt{font-size:.92rem;font-weight:600;line-height:1.45;color:rgba(255,255,255,.92)}
.fn-tpie{align-items:start;padding-bottom:26px}
.fn-tpie p{margin:0 0 7px;font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.6)}
.fn-tpie p:last-child{margin-bottom:0}
/* 🏦 LAS TARJETAS DE BANCO SON EL ANCLA DE CREDIBILIDAD DE LA PÁGINA, así que
pesan más que las demás: más relleno, esquina más grande y sombra más
profunda. Eran las más ligeras de la pantalla siendo lo que más sostiene el
argumento, que es al revés de como debe estar.
⛔ SIN COLOR DE MARCA DEL BANCO en el borde ni en las cifras, aunque daría
peso al instante: teñir nuestra tarjeta con el rojo de Scotiabank o el azul
de Popular se lee como co-marca, y nosotros no somos su agente. El logo es
suyo y ya dice lo que tiene que decir; el resto de la tarjeta es nuestra. */
.fn-banco{background:linear-gradient(160deg,#fff 0%,#fdfcfa 100%);
border:1px solid rgba(11,12,13,.09);border-radius:22px;padding:32px 30px;
box-shadow:0 26px 60px -34px rgba(11,26,36,.6),inset 0 1px 0 rgba(255,255,255,.9)}
/* ⚠️ El logo con TOPE DE ALTO y `object-fit:contain`: son de dos marcas con
proporciones muy distintas (el de Popular es ancho y bajo). Igualando el
ancho, uno se aplasta. Es la misma regla del bloque de socios. */
.fn-logo{max-height:32px;max-width:172px;width:auto;object-fit:contain;display:block}
.fn-prog{margin:16px 0 18px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:#6b7270}
.fn-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
padding:18px 0;border-top:1px solid rgba(11,12,13,.10);border-bottom:1px solid rgba(11,12,13,.10)}
.fn-cifras b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;
color:var(--ink,#0b0c0d);line-height:1.05;letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.fn-cifras span{display:block;margin-top:4px;font-size:.66rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:#8a8579}
.fn-tasas{margin:14px 0 0;font-size:.86rem;font-weight:600;color:var(--turq-dark,#0b7c87);line-height:1.5}
.fn-nota{margin:8px 0 0;font-size:.82rem;color:#6b7270;line-height:1.55}
/* --- Lo que conviene saber. Icono al margen, filete turquesa a la izquierda,
igual que la línea del dinero de "Cómo se compra": marca que ahí hay algo
que no te esperabas. --- */
.fn-avisos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fn-avisos li{display:flex;gap:14px;align-items:flex-start;
background:#fff;border:1px solid rgba(11,12,13,.07);border-left:1.6px solid var(--turq,#10b2c2);
border-radius:14px;padding:16px 20px}
.fn-avisos .ico svg{width:20px;height:20px;color:var(--turq,#10b2c2);flex:none}
.fn-avisos p{margin:0;font-size:.92rem;line-height:1.6;color:#4a5250}
.fn-avisos b{color:var(--ink,#0b0c0d);font-weight:700}
/* --- Los dos pasos --- */
.fn-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fn-pasos li{display:flex;gap:16px;align-items:flex-start;
background:linear-gradient(160deg,#fff 0%,#fdfcfa 100%);
border:1px solid rgba(11,12,13,.07);border-radius:18px;padding:22px 24px;
box-shadow:0 18px 44px -34px rgba(11,26,36,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.fn-pn{flex:none;font-family:var(--display);font-size:.82rem;font-weight:700;
color:var(--turq-dark,#0b7c87);width:36px;height:36px;display:grid;place-items:center;
border-radius:50%;background:#fff;border:1.6px solid var(--turq,#10b2c2);
font-variant-numeric:tabular-nums;box-shadow:0 6px 16px -8px rgba(16,178,194,.6)}
.fn-pasos h3{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink,#0b0c0d);margin:5px 0 7px}
.fn-pasos p{margin:0;font-size:.89rem;line-height:1.6;color:#5a625f}
/* --- El selector de documentos --- */
.fn-elige{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:18px}
.fn-rot{margin:0 0 9px;font-size:.68rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:#8a8579}
.fn-ops{display:flex;gap:8px;flex-wrap:wrap}
/* ⚠️ Botones de contorno, no rellenos: el relleno turquesa está reservado al
botón que envía. Aquí el turquesa solo aparece en el que está elegido, que
es el mismo gesto que ya usan los campos del buscador con algo puesto. */
.fn-op{padding:10px 16px;border:1.6px solid rgba(11,12,13,.14);border-radius:10px;
background:#fff;font-family:inherit;font-size:.86rem;font-weight:600;color:#4a5250;
cursor:pointer;transition:.18s}
.fn-op:hover{border-color:var(--turq,#10b2c2);color:var(--turq-dark,#0b7c87)}
.fn-op.on{background:var(--turq,#10b2c2);border-color:var(--turq,#10b2c2);color:#fff}
.fn-docs{background:linear-gradient(160deg,#fff 0%,#fdfcfa 100%);
border:1px solid rgba(11,12,13,.07);border-radius:18px;padding:24px 26px;
box-shadow:0 18px 44px -34px rgba(11,26,36,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.fn-docs-vacio{margin:0;text-align:center;color:#8a8579;font-size:.88rem}
.fn-docs-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* El palomito va dibujado con el borde, no con un carácter: un ✓ de texto
cambia de forma en cada sistema y en Windows sale cuadrado. */
.fn-docs-lista li{position:relative;padding-left:26px;font-size:.92rem;line-height:1.55;color:#4a5250}
.fn-docs-lista li::before{content:"";position:absolute;left:2px;top:5px;
width:11px;height:6px;border-left:1.6px solid var(--turq,#10b2c2);
border-bottom:1.6px solid var(--turq,#10b2c2);transform:rotate(-45deg)}
.fn-docs-pie{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(11,12,13,.08);
font-size:.86rem;font-weight:600;color:var(--turq-dark,#0b7c87)}
.fn-docs-reglas{list-style:none;margin:12px 0 0;padding:0;
font-size:.8rem;line-height:1.6;color:#8a8579}
.fn-docs-reglas li{margin-bottom:4px}
.fn-docs-reglas b{color:#5a625f}
/* =====================================================================
EL EMBUDO (rehecho el 4 sep 2026, Carlos: "dale peso y buen diseño donde
se entra la info, lo más alta gama")
🔁 LOS CAMPOS HABLAN EL IDIOMA DEL PANEL DE BÚSQUEDA, no uno nuevo. Allí ya
está escrito qué es lo que da el aire caro y son cinco cosas: fuera la
flecha del sistema, campos SIN CAJA con filete solo abajo, aire, etiquetas
en negro de marca y no en gris, y el panel flotando.
👉 Este formulario tenía diez cajas con borde, que es lo que allí se
describe como "una hoja de cálculo". Ahora son diez filetes. **El sitio ya
había decidido cómo se ve un campo caro; esta página no se había enterado.**
===================================================================== */
/* ⚠️ SIN RELLENO PROPIO Y CON `overflow:hidden`: la cabecera oscura tiene que
llegar hasta el borde del panel. Con relleno en el contenedor quedaría una
franja blanca alrededor y se leería como un recuadro pegado encima, no como
la cabecera de la pieza. */
.fn-aplica{margin-top:52px;background:linear-gradient(160deg,#fff 0%,#fdfcfa 100%);
border:1.6px solid var(--turq,#10b2c2);border-radius:24px;padding:0;overflow:hidden;
box-shadow:0 30px 64px -34px rgba(10,30,28,.6)}
/* 🖤 LA CABECERA: la misma materia que la ficha de los bancos y que la
pantalla del efectivo. Tres usos del mismo material en la página hacen que
se lea como un sistema; uno solo se habría leído como un capricho. */
.fn-aplica-cab{--cian:var(--turq,#10b2c2);position:relative;
background:linear-gradient(150deg,#16293a 0%,#0e1a24 60%,#0a1219 100%);
padding:30px 34px 26px;text-align:center}
/* El reflejo de un píxel arriba: es lo que separa "pantalla" de "caja negra". */
.fn-aplica-cab::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.fn-aplica-cab h2{font-family:var(--display);font-size:1.5rem;font-weight:700;
color:#fff;margin:0 0 8px;line-height:1.2;letter-spacing:-.01em}
.fn-aplica-cab p{margin:0 auto;max-width:52ch;
font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.68);text-wrap:balance}
.fn-aplica-cuerpo{padding:30px 34px 30px}
/* --- El rótulo de cada mitad, con su disco --- */
.fn-grupo-tit{display:flex;align-items:center;gap:12px;
margin:30px 0 18px;padding-top:20px;border-top:1px solid rgba(11,12,13,.08);
font-family:var(--display);font-size:.72rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--ink,#0b0c0d)}
.fn-grupo-tit:first-of-type{margin-top:22px;padding-top:0;border-top:0}
/* Mismo disco que los pasos: blanco, filete turquesa de 1,6 px. */
.fn-gn{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
background:#fff;border:1.6px solid var(--turq,#10b2c2);
font-size:.68rem;color:var(--turq-dark,#0b7c87);letter-spacing:.01em;
font-variant-numeric:tabular-nums;box-shadow:0 6px 16px -8px rgba(16,178,194,.6)}
/* 🔙 LOS CAMPOS VUELVEN A SER CAJAS. Se probó el lenguaje del panel de
búsqueda (sin caja, filete solo abajo) y Carlos lo tumbó en el momento:
*"se ve fea, locura, como estaba incluso estaba mejor"*.
👉 Y tiene razón, aunque la idea de heredar el lenguaje del buscador era
buena: **allí son CINCO campos en una fila y aquí son DIEZ apilados**. Cinco
filetes en horizontal se leen como una ficha impresa; diez filetes en
vertical se leen como renglones sueltos, y el formulario pierde el cuerpo
justo donde el visitante tiene que sentir que está rellenando algo serio.
⚠️ LECCIÓN: un lenguaje visual no se hereda por ser de la misma casa. Se
hereda si el problema es el mismo, y aquí la cantidad y la dirección de los
campos lo cambian todo. */
.fn-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fn-campo{display:block;margin-bottom:14px}
.fn-campo > span{display:block;margin-bottom:6px;font-size:.78rem;font-weight:600;
letter-spacing:.02em;color:#5a625f}
.fn-campo input,.fn-campo select,.fn-campo textarea{
width:100%;padding:11px 13px;border:1px solid rgba(11,12,13,.16);border-radius:10px;
background:#fff;font-family:inherit;font-size:.94rem;color:var(--ink,#0b0c0d);
transition:border-color .18s}
.fn-campo input:focus,.fn-campo select:focus,.fn-campo textarea:focus{
outline:none;border-color:var(--turq,#10b2c2)}
.fn-campo textarea{resize:vertical}
/* ===================================================================
💰 EL RENGLÓN DEL EFECTIVO ES LA PANTALLA. Lo único oscuro de la página.
🔁 ES EXACTAMENTE `.cc-display-top`, la pantalla del total de la
calculadora de cierre: mismo degradado, mismo cian, mismo reflejo de un
píxel en el borde de arriba, misma sombra.
👉 Carlos pidió "más peso de realidad, quizá colores, que se vea pesado y
de alta gama". **El peso no se consigue añadiendo adornos, se consigue
dándole a la pieza que importa el tratamiento de la pieza que importa.** En
toda esta página hay un solo número que el visitante se va a llevar en la
cabeza, y es cuánto necesita en efectivo: ese es el que se lleva la
pantalla.
⛔ Y el color no es nuevo. La regla de la casa prohíbe fondos oscuros de
SECCIÓN, no un elemento del tamaño de una pantalla dentro de un panel
claro: eso ya lo aprobó él en la calculadora. Reusar ese gesto mantiene las
dos páginas hablando igual; inventar otro oscuro sería empezar la colección
de oros de nuevo.
⚠️ `tabular-nums` para que la cifra no baile de ancho mientras se teclea.
=================================================================== */
.fn-cuanto{--cian:var(--turq,#10b2c2);
margin:0 0 16px;padding:22px 24px 20px;border-radius:16px;
position:relative;overflow:hidden;
background:linear-gradient(150deg,#16293a 0%,#0e1a24 60%,#0a1219 100%);
box-shadow:0 16px 34px -20px rgba(11,26,36,.85),
inset 0 1px 0 rgba(255,255,255,.10)}
.fn-cuanto[hidden]{display:none}
/* El reflejo del borde superior: un píxel de luz es lo que separa "pantalla"
de "caja negra". */
.fn-cuanto::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.fn-cuanto b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:700;
color:#fff;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* El detalle en cian, que sobre el oscuro se lee y sobre blanco no se leería.
Es el mismo cian de la pantalla de la calculadora. */
.fn-cuanto span{display:block;margin-top:9px;font-size:.86rem;line-height:1.6;
color:rgba(255,255,255,.72)}
.fn-cuanto span b{display:inline;font-size:inherit;color:var(--cian)}
/* El rótulo de encima de la cifra, en versalitas muy espaciadas: es lo que
hace que una pantalla parezca un instrumento y no un recuadro con un
número. Mismo gesto que `.cc-etiqueta`. */
.fn-cuanto-rot{display:block;margin-bottom:8px;
font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,255,255,.55)}
/* ✨ EL BOTÓN LLAMA AL CLIC, igual que el del bloque de cierre: barrido crema
y halo turquesa que late. Reusa `cta-brillo` y `cierre-latido`, que ya
existen; no hay keyframes nuevas.
⚠️ El halo es TURQUESA y no crema por la misma razón medida de allí: aquí
el fondo es claro y un halo crema sobre claro no se ve. */
.fn-aplica .btn{width:100%;margin-top:14px;height:52px;
position:relative;overflow:hidden;isolation:isolate;
animation:cierre-latido 4.2s ease-in-out infinite}
.fn-aplica .btn::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;width:55%;
pointer-events:none;z-index:0;transform:skewX(-22deg);
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,248,229,.34) 38%,
rgba(255,248,229,.85) 50%,
rgba(255,248,229,.34) 62%,
rgba(255,255,255,0) 100%);
animation:cta-brillo 4.2s cubic-bezier(.5,0,.35,1) infinite}
.fn-aplica .btn > *{position:relative;z-index:1}
/* Mientras envía, el botón se queda quieto: un botón deshabilitado que sigue
latiendo dice "púlsame" cuando ya no se puede pulsar. */
.fn-aplica .btn:disabled{animation:none;opacity:.75;cursor:default}
.fn-aplica .btn:disabled::after{display:none}
@media(prefers-reduced-motion:reduce){
.fn-aplica .btn,.fn-aplica .btn::after{animation:none}
.fn-aplica .btn::after{display:none}
}
.fn-aviso{margin:14px 0 0;font-size:.86rem;color:#a8432f;line-height:1.55}
.fn-aviso[hidden]{display:none}
.fn-aviso a{color:#a8432f;font-weight:700}
.fn-privacidad{margin:14px 0 0;font-size:.76rem;line-height:1.55;color:#8a8579;text-align:center}
.fn-gracias{text-align:center;padding:16px 0 8px}
.fn-gracias[hidden]{display:none}
.fn-gracias .ico svg{width:36px;height:36px;color:var(--turq,#10b2c2)}
.fn-gracias h3{font-family:var(--display);font-size:1.2rem;font-weight:700;margin:12px 0 8px;color:var(--ink,#0b0c0d)}
.fn-gracias p{margin:0;color:#5a625f;line-height:1.6}
.fn-fuentes{margin:30px auto 0;font-size:.76rem;line-height:1.65;color:#8a8579;text-align:center}
/* Las tres cifras del hero, con un poco más de aire porque debajo llevan su
propia línea de atribución. */
.fn-cifras-hero{margin-top:28px}
.fn-cifras-pie{margin:14px auto 0;font-size:.76rem;color:#8a8579;text-align:center}
@media(max-width:760px){
.fn-hero{padding:34px 0 6px}
/* Los cuatro mínimos pasan a dos por fila: en una sola columna ocupan
media pantalla y dejan de leerse como un bloque de cifras. */
.fn-mins{grid-template-columns:repeat(2,minmax(0,1fr))}
.fn-pasos,.fn-elige{grid-template-columns:1fr}
/* 📱 LA FICHA NO SE APILA EN UNA COLUMNA: si cada dato se pone debajo del
otro deja de ser un comparador y vuelve a ser lo que era, dos listas
seguidas. Se quita la columna del rótulo, que pasa encima de la fila, y
los dos bancos se quedan lado a lado, que es lo único que importa aquí. */
.fn-cab,.fn-tfila{grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px}
.fn-cab{padding-top:20px}
/* 🐛 LA CELDA VACÍA DE LA CABECERA HAY QUE QUITARLA EN EL TELÉFONO. En
escritorio ocupa la columna del rótulo y sostiene la rejilla de tres. Con
dos columnas, esa celda vacía empuja: Scotiabank se quedaba arriba solo y
**Popular caía a una segunda fila, uno debajo del otro**, que es
exactamente dejar de comparar. */
.fn-cab > span:empty{display:none}
.fn-rot-f{grid-column:1 / -1;text-align:center;font-size:.64rem;letter-spacing:.1em}
.fn-val{font-size:1.3rem}
.fn-val-txt{font-size:.82rem}
.fn-tpie p{font-size:.72rem}
/* Las filas del formulario sí se apilan: ahí no hay nada que comparar. */
.fn-fila{grid-template-columns:1fr}
.fn-aplica-cab{padding:24px 20px 20px}
.fn-aplica-cab h2{font-size:1.25rem}
.fn-aplica-cuerpo{padding:24px 20px 26px}
.fn-grupo-tit{margin:24px 0 14px;padding-top:16px}
.fn-docs{padding:20px 18px}
.fn-h2{margin-top:40px}
}
/* =====================================================================
`.cierre` — LA PIEZA DE CIERRE DE TODO EL SITIO (4 sep 2026)
Pequena, fina, con el borde girando. Vive en el listado de propiedades,
en el de proyectos y al final de cada comunidad.
🔁 **SE LLAMA `.cierre` Y NO `.res-cierre` PORQUE NO ES DE UNA PAGINA.**
Nacio en el listado y Carlos, en el mismo mensaje, pidio lo mismo en
Proyectos y en Comunidades: *"al final, aparentemente, vamos a tener que
hacer lo mismo"*. 👉 **En cuanto una pieza va a repetirse en tres sitios,
el nombre deja de llevar el prefijo de la pagina donde nacio**, o acaban
existiendo tres copias con tres nombres y se corrige una sola.
🚨 EL FALLO QUE ARREGLA, Y LLEVABA AHI DESDE SIEMPRE: esta pagina NO
TENIA NI UN PUNTO DE CONTACTO MIENTRAS FUNCIONABA. El unico boton de
"Dinos que buscas" vivia dentro de `.res-empty`, o sea que **solo
aparecia cuando la busqueda no devolvia nada**. Con las 51 en pantalla,
el visitante bajaba tarjeta por tarjeta y lo siguiente que encontraba
era el pie de pagina.
👉 Salio de una pregunta de Carlos: si "Propiedades" en el menu no
distraia al comprador. **Mirar propiedades no es la fuga; mirar 51 sin
tener por donde levantar la mano, si.**
🔁 SEGUNDA VUELTA, Y CARLOS TUMBO LAS DOS PIEZAS DE LA PRIMERA:
1. ⛔ **FUERA EL TILE QUE IBA DENTRO DE LA PARRILLA.** Media lo mismo que
una propiedad y ocupaba una casilla de la rejilla. *"Del mismo tamano
de una propiedad... eso no va ahi"*. Y tenia razon: en una parrilla,
**todo lo que mide como una tarjeta se lee como una tarjeta**, asi que
el visitante que barre fotos se encuentra con una que no es una casa.
Su contenido (que administramos las villas) **no se perdio: bajo aqui**,
que es donde el mismo dijo que iba.
2. ⛔ **EL CIERRE ERA UNA BANDA GRANDE CON LA CIFRA DEL CATALOGO EN
GRANDE** ("51 propiedades, de US$117,000 a US$1,200,000"). Carlos:
*"esa ficha tan grande se ve como que pone el sitio web Amazon"*.
👉 **Y el diagnostico es exacto: una cifra de inventario en grande es
presumir de tamano, y eso es lo que hace un catalogo, no un asesor.**
Lo que el pidio es lo contrario: *"algo pequeno pero bien delicado que
de la sensacion de que somos capaces de ayudarte"*.
📌 La cuenta no se pierde: ya sale encima de la parrilla ("51
propiedades"), que es su sitio.
✨ **EL BORDE QUE GIRA ES EL DE `.filo`, NO UNO NUEVO.** Carlos lo pidio
("animado con los bordes") y ese gesto **ya existe y ya lo aprobo el**: es
el del panel de la filosofia de vender.html. Mismo conico, mismo turquesa,
mismos 7 s, misma tecnica (cuadrado grande girando detras + `::after` que
lo tapa dejando 1,6 px de filete).
⚠️ **REUSAR EL GESTO, NO INVENTAR OTRO.** Si algun dia se cambia el ritmo o
el color, hay que mirar los dos sitios.
⛔ Sin fondo oscuro, que Carlos tumbo dos veces ("arropa mucho"). El
relleno es BLANCO y no crema: el cuerpo de la pagina ya es crema y en
crema el panel desapareceria.
===================================================================== */
.cierre{position:relative;overflow:hidden;isolation:isolate;
max-width:720px;margin:40px auto 0;border-radius:18px;
padding:20px 24px;display:flex;align-items:center;gap:20px;
box-shadow:0 18px 44px -34px rgba(10,30,28,.6)}
/* 🚨 `hidden` NO BASTA POR SI SOLO en este sitio: vale `display:none` pero lo
pisa cualquier `display` declarado despues, y aqui hay un `display:flex`.
Es la cuarta vez que hace falta escribir esta linea (ya paso con .rs-grid
y con .chero-b). */
.cierre[hidden]{display:none}
/* ⚠️ 170% y no el 165% de `.filo`: aquel panel es alto y este es una barra
ancha y baja, asi que el cuadrado tiene que cubrirle la diagonal o el borde
se quedaria sin color por las esquinas. */
.cierre::before{content:"";position:absolute;top:50%;left:50%;
width:170%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;
background:conic-gradient(from 0deg,
rgba(16,178,194,.26) 0deg,rgba(16,178,194,.26) 188deg,
rgba(16,178,194,.62) 258deg,#3ed2e2 308deg,#b6f0f7 330deg,
rgba(16,178,194,.62) 348deg,rgba(16,178,194,.26) 360deg);
animation:filo-gira 7s linear infinite}
/* El relleno blanco, que deja el filete asomando por los cuatro lados.
⚠️ 1,6 px es el minimo de la casa: con devicePixelRatio 1,25 un `1px` se
pinta a 0,8 y el turquesa llega lavado. El radio interior es el de fuera
menos ese grosor, o la esquina se ve doble. */
.cierre::after{content:"";position:absolute;inset:1.6px;border-radius:16.4px;
z-index:1;pointer-events:none;background:#fff}
.cierre > *{position:relative;z-index:2}
/* Icono de TRAZO y sin disco de color detras: los macizos "con el crema y el
turquesa se ven de juguete", y meterlos en una pastilla es media vuelta
hacia lo macizo. */
.cierre .ico svg{width:26px;height:26px;color:var(--turq,#10b2c2);flex:none}
.rc-txt{flex:1;min-width:0}
.rc-txt h3{font-family:var(--display);font-size:.98rem;font-weight:700;
color:#0b0c0d;margin:0 0 5px;line-height:1.3}
.rc-txt p{font-size:.86rem;line-height:1.55;color:#5a625f;margin:0}
/* El boton es pequeno a proposito: este bloque acompana, no manda. El que
manda en esta pagina son las 51 tarjetas. */
.cierre .btn{height:44px;padding:0 20px;font-size:.85rem;white-space:nowrap;flex:none}
/* ✨ EL BOTON LLAMA AL CLIC: BARRIDO CREMA + HALO QUE LATE (4 sep 2026)
Carlos, viendo el bloque ya montado: *"tenemos que ponerlo animado... asi
como moviendose: clicame, clicame, clicame"*.
👉 EL MOVIMIENTO VA EN EL BOTON, NO EN LA CAJA. El borde de la caja ya gira
y ese gesto dice "mirame"; el que tiene que decir "clicame" es lo unico que
se puede pulsar. Animar los dos con la misma intencion seria que compitieran.
⚠️ REUSA `cta-brillo`, LAS MISMAS KEYFRAMES DE LOS BOTONES GRANDES. Es el
cuarto sitio donde vive ese barrido; si algun dia cambia el ritmo, hay que
mirar los cuatro.
⛔ Lo que NO se pudo reusar es `.btn-brilla` entera: trae `margin-top:30px`
y una sombra pensada para un CTA de 70 px, y aqui vive dentro de una fila
flex de 44. **Antes de reusar una clase hay que mirar que mas arrastra.**
🚨 Y EL HALO NO PUEDE SER CREMA AQUI, QUE ES EL DETALLE QUE IMPORTA. En los
botones grandes el halo es crema porque late sobre una FOTO OSCURA. Este
bloque tiene el fondo BLANCO: un halo crema sobre blanco no se ve, y
habriamos puesto una animacion invisible convencidos de que estaba puesta.
Es exactamente el fallo que ya paso al reves con el barrido celeste sobre
el boton turquesa. 👉 **Un color de resplandor se elige contra el fondo que
tiene detras, no copiando el del sitio de donde viene.**
✅ El halo va en TURQUESA. Es el codigo oficial con opacidad, y aqui si vale:
la regla prohibe la opacidad en superficies y trazos, no en sombras y halos,
que por definicion son resplandor.
💡 Sin `scale`: la sombra de reposo y la del pico son iguales salvo el halo,
asi solo late el resplandor y el boton no se mueve de sitio ni descuadra la
fila. Misma decision que en `.chero-cta`. */
.cierre .btn{position:relative;overflow:hidden;isolation:isolate;
animation:cierre-latido 4.2s ease-in-out infinite}
.cierre .btn::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;width:55%;
pointer-events:none;z-index:0;transform:skewX(-22deg);
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,248,229,.34) 38%,
rgba(255,248,229,.85) 50%,
rgba(255,248,229,.34) 62%,
rgba(255,255,255,0) 100%);
animation:cta-brillo 4.2s cubic-bezier(.5,0,.35,1) infinite}
/* el icono y el texto, por encima del barrido */
.cierre .btn > *{position:relative;z-index:1}
@keyframes cierre-latido{
0%,100%{box-shadow:0 10px 22px -12px rgba(11,26,36,.45),0 0 0 0 rgba(16,178,194,.55)}
50% {box-shadow:0 10px 22px -12px rgba(11,26,36,.45),0 0 0 11px rgba(16,178,194,0)}
}
/* Quien pide menos movimiento se queda con el bloque quieto: se para el
barrido, el latido Y el borde que gira. */
@media(prefers-reduced-motion:reduce){
.cierre .btn,.cierre .btn::after,.cierre::before{animation:none}
.cierre .btn::after{display:none}
}
@media(max-width:700px){
/* ⚠️ En el telefono se apila y se centra. Con la barra horizontal el texto
quedaba en una columna de 150 px y el boton en otra: dos columnas
estrechas es peor que una fila de tres. */
.cierre{flex-direction:column;text-align:center;gap:14px;
margin-top:32px;padding:26px 20px}
.cierre .btn{width:100%}
}
@media(max-width:640px){
/* ⚠️ EL MISMO HUECO VIVIA AQUI CON OTRO NUMERO (104px). Al arreglar el de
escritorio se quedo intacto y en el telefono seguia el vacio, que es
donde mas duele porque la pantalla es la mitad.
👉 Cuando se corrige un espacio, buscar SIEMPRE si hay una version del
mismo espacio dentro de una media query. */
.res-top{padding:26px 0 20px}
.res-filters{padding:20px 18px;gap:20px 16px}
.rf{flex:1 1 100%;min-width:0}
.res-bar{flex-direction:column;align-items:flex-start}
}
/* =================== FICHA DE PROPIEDAD =================== */
:root{
--ink:#0b0c0d;--ink-soft:#4a4b4c;--turq:#10b2c2;--turq-dark:#0b7c87;
--gold:#10b2c2;--gold-light:#10b2c2;--gold-deep:#10b2c2;
--cream:#f6f2ea;--cream-2:#fbf9f4;--white:#fff;--line:rgba(11,12,13,.09);
--shadow:0 26px 70px -30px rgba(11,12,13,.34);--shadow-sm:0 12px 30px -18px rgba(11,12,13,.42);
--display:'Poppins',system-ui,sans-serif;--maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--cream-2);line-height:1.65;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.display{font-family:var(--display)}
.ico{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.ico svg{width:100%;height:100%;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:500;font-size:.86rem;cursor:pointer;border:none;font-family:inherit;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--turq);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--turq-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1px solid rgba(11,12,13,.28);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold));color:var(--ink)}
.btn-gold:hover{transform:translateY(-2px)}
/* ⚠️ EL VERDE RELLENO SE QUEDA, Y ES DELIBERADO (26 ago 2026).
Se planteo vaciarlo a crema con el icono verde, como en las fichas del
equipo, y al mirarlo de cerca era un error: este boton NO es una opcion
secundaria. Es el UNICO boton relleno del panel de contacto de cada villa
("Contactar al agente" / "Enviar por WhatsApp"), rodeado de tres botones
con borde. Vaciarlo dejaba la accion principal sin peso en 13 paginas.
👉 LA REGLA DEL VERDE, para no volver a dudar:
· SE LLENA cuando el boton es la accion principal y no hay ningun
turquesa relleno a su lado.
· SE RETIRA AL SIMBOLO cuando comparte espacio con turquesa, como en
.via-wa de las fichas del equipo, donde el boton es crema con filo
turquesa y lo unico verde es la marca de WhatsApp.
El texto iba en #08351a, un verde oscuro que no esta en ninguna paleta,
ni en la nuestra ni en la de WhatsApp. Pasa al negro de marca, que ademas
contrasta mejor sobre el verde. */
.btn-wa{background:#25d366;color:var(--ink)}
.btn-wa:hover{background:#1fb959;transform:translateY(-2px)}
.btn-out{background:#fff;border:1px solid var(--line);color:var(--ink)}
/* ===================================================================
EL BOTON DEL AGENTE: TURQUESA DE MARCA (7 sep 2026)
-------------------------------------------------------------------
Carlos: *"vamos a poner el color de la marca turquesa"*, mirando el
Send Message de RealtorDR, que va en SU rojo de marca y no en verde.
👉 Y tiene logica: ese boton no es "escribir por WhatsApp", es EL
boton de la ficha. En el color de la marca se lee como la accion de
la casa; en verde de WhatsApp se lee como el logo de otra empresa
plantado en medio de nuestra tarjeta.
⚠️ ESTO DEROGA EN PARTE LA REGLA DEL VERDE que estaba escrita en el
CLAUDE.md ("se rellena cuando el boton es la accion principal y no
hay turquesa al lado, en villas"). Manda la decision de Carlos.
El verde SIGUE VIVO en las pantallas de gracias y en los embudos,
que es otro contexto: ahi el visitante ya envio y lo que se le
ofrece es literalmente abrir WhatsApp.
⛔ El icono de WhatsApp se queda dentro del boton: dice POR DONDE
sale el mensaje, que es informacion util. Lo que cambia es el fondo.
=================================================================== */
.btn-agente{background:var(--turq);color:#fff}
.btn-agente:hover{background:var(--turq-dark);transform:translateY(-2px)}
.btn-out:hover{border-color:var(--turq);color:var(--turq-dark)}
/* header */
.topbar{background:var(--ink)}
.topbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;gap:16px}
.topbar-socials{display:flex;gap:6px;align-items:center}
.topbar-socials a{width:30px;height:30px;display:grid;place-items:center;color:var(--turq);transition:.2s}
.topbar-socials a:hover{color:var(--gold)}
.topbar-socials .ico{width:16px;height:16px}
.topbar-tag{text-align:center;font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:500;white-space:nowrap}
.topbar-place{justify-self:end;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
header{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.brand{flex:none}.brand img{height:54px;width:auto;max-width:none}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:.94rem;color:var(--ink-soft);transition:color .2s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--gold);transition:width .25s}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.72rem;font-weight:600}
.lang button{background:none;border:none;padding:7px 13px;cursor:pointer;color:var(--ink-soft);font-family:inherit;font-weight:600;transition:.2s}
.lang button.active{background:var(--ink);color:#fff}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.menu-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px}
/* ============ LA BANDA DE ARRIBA, EN TURQUESA DE MARCA ============
Idea de Carlos (28 ago 2026), sacada de realtordr: su cabecera es una banda
ROJA maciza de lado a lado. Lo primero que ve el visitante es la marca, no
una barra blanca neutra.
⚠️ EL COLOR ES EL TURQUESA DE MARCA, #10b2c2, SIN OSCURECER NI UN PUNTO.
Carlos lo dejo dicho asi de claro. Se probo antes con --turq-dark y lo
tumbo: "con ese oscuro no queda bien en lo absoluto".
LA TINTA VA EN BLANCO, que son los dos colores de la marca juntos.
Carlos lo decidio asi despues de ver las tres versiones montadas:
1. turquesa oscuro + blanco -> "con ese oscuro no queda bien"
2. turquesa de marca + negro -> "en absoluto no pega"
3. turquesa de marca + blanco -> ESTA
⛔ NO REPROPONER LAS DOS PRIMERAS.
⚠️ LO QUE HAY QUE SABER, MEDIDO, para no llevarse un susto despues:
turquesa #10b2c2 + blanco = 2.57 (el minimo recomendado es 4.5)
turquesa #10b2c2 + negro = 7.62
rojo de realtordr #d0191d + blanco = 5.47
O sea: a ellos el blanco les sirve porque su rojo es un color OSCURO; el
turquesa de marca es claro y brillante. El menu se lee, pero mas flojo que
el resto del sitio, y quien peor lo tiene es un visitante mayor o alguien
mirando el telefono al sol. Es una decision consciente de Carlos, no un
descuido: manda respetar la marca exacta.
👉 SI ALGUIEN QUIERE MEJORARLO SIN TOCAR NINGUNO DE LOS DOS COLORES, la
palanca es el PESO de la letra, no el color: subir el menu de 400 a 500 o
600 se lee bastante mejor aunque la cifra no cambie.
Todo lo de aqui abajo es consecuencia de eso, no gusto. */
header{background:var(--turq);backdrop-filter:none;border-bottom:none;
box-shadow:0 12px 34px -24px rgba(11,12,13,.55)}
/* ⚠️ EL LOGO PRINCIPAL NO SIRVE SOBRE ESTA BANDA, y hay que saber por que:
esta hecho de DOS tintas, negro #050607 y turquesa #10B2C2, que es
exactamente el color de la banda. Encima de ella, LA LLAVE Y LA PALABRA
"PRO" DESAPARECEN y solo queda "PROPERTIES". Se vio mirandolo en la
herramienta interna `_logos-sobre-turquesa.html`, que enseña los cuatro
archivos de logo sobre este mismo fondo.
✅ `logo-white.png` es todo blanco de una sola tinta, asi que sobre la banda
se ve ENTERO: llave, "PRO PROPERTIES" y el lema. Y es archivo del
disenador, no un apano nuestro.
⛔ Los otros dos no valen aqui: `logo-secundario.png` es blanco + turquesa
(pierde la llave igual) y `logo-symbol.png` es todo turquesa (invisible).
📌 No hay ningun archivo de logo todo NEGRO. Carlos lo busco y no aparece.
`_hacer-logo-negro.ps1` fabrica uno recoloreando, y se probo, pero esa
version quedo descartada.
El cambio se hace por CSS y no tocando el `src` de las 21 paginas, para que
la prueba se deshaga borrando este bloque. Si Carlos lo da por bueno,
conviene cambiar el `src` de verdad. */
/* 📏 SE USA LA VERSION RECORTADA, Y ESTE ES EL PUNTO QUE MAS CAMBIA EL LOGO.
Carlos: "el building dreams and memories no se destaca bien... creo que
esta muy pequeno". El sintoma era cierto; la causa no era la resolucion.
El archivo mide 2400x900 y el dibujo solo va de la fila 158 a la 780: casi
un TERCIO del archivo es aire transparente. Como el CSS le fija la altura a
la imagen entera, ese aire se comia un tercio del alto disponible.
`_recortar-logos.ps1` recorta a la caja de contenido (2259x623), asi que a
la misma altura CSS el dibujo se ve 1,44x mas grande, gratis.
👉 El aire no se pierde: pasa a ser cosa del CSS, donde se puede ajustar.
En el archivo era altura muerta.
Medido sobre "Building Dreams & Memories" (122 px en el archivo):
archivo sin recortar, 54 px de alto -> 7,3 px ilegible
recortado, 54 px de alto -> 10,6 px
recortado, 58 px de alto -> 11,4 px <- lo que hay ahora
⚠️ El techo lo pone la cabecera, que mide 78 px: a mas de 60 px el logo se
queda sin aire arriba y abajo. Para pasar de ahi hay que subir la cabecera,
y eso es una decision aparte, sobre todo por el movil. */
/* Ya NO hay `content:url(...)` aqui. Mientras se probaba, el logo se
sustituia desde esta hoja, que es un parche: la pagina pedia un archivo y
el CSS pintaba otro. Aprobado el diseno, `_logo-en-cabecera.ps1` escribio
`logo-white-trim.png` en el `src` de las 21 paginas Y DE LAS 2 PLANTILLAS.
Las plantillas son la parte que se olvida: sin ellas, los generadores de
fichas y comunidades volverian a escribir el logo viejo semanas despues.
Aqui solo queda la altura. */
.brand img{height:58px}
/* 🚨 EN EL TELEFONO EL LOGO GRANDE ROMPIA EL MENU, y esto paso de verdad al
agrandarlo: recortado y a 58 px, el logo mide 210 px de ancho. En una
pantalla de 390 px, con el ES/EN (86 px) y la hamburguesa al lado, LA
HAMBURGUESA SE SALIA 22 px Y NO SE PODIA TOCAR. Sin scroll lateral que lo
delatara, asi que a simple vista la banda se veia bien.
😨 Se caza mirando el telefono, no el escritorio. Que es donde reserva la
mayoria de la gente.
👉 A 48 px el logo ocupa 174 px y todo cabe con margen.
⚠️ EL PRECIO, Y HAY QUE SABERLO: el lema baja a ~9,4 px en telefono. En 390
px de ancho no caben a la vez un logo con lema legible, el ES/EN y el menu.
Si algun dia se quiere el lema grande tambien en movil, la unica salida es
sacar el ES/EN de la banda y meterlo dentro del cajon del menu: eso libera
100 px de golpe. Es una decision de Carlos, no se hace por cuenta propia. */
@media(max-width:1000px){
.brand img{height:48px}
}
/* El menu, en blanco. No en blanco puro: a .92 se lee igual y deja sitio para
que el hover suba a #fff y se note que algo pasa. */
.nav-links a,.nav-links button.navlink{color:rgba(255,255,255,.92)}
.nav-links a:hover,.nav-links button.navlink:hover{color:#fff}
.nav-links .chev{opacity:.9}
/* ⚠️ El filete del hover era oro (#10b2c2) y sobre el turquesa casi no se ve:
son dos colores de luminosidad parecida. Pasa a blanco. */
.nav-links a::after,.nav-links button.navlink::after{background:#fff}
/* 🚨 DOS PANELES DONDE EL BLANCO NO VALE, y este fallo YA OCURRIO DE VERDAD:
el desplegable de "Republica Dominicana" y el cajon del menu en movil son
los dos un panel BLANCO, y los dos viven dentro de `.nav-links`. La regla
de arriba les llegaba y les ponia el texto en blanco: menu invisible sobre
panel blanco, y el visitante sin saber que hay algo ahi.
😨 No se veia mirando la banda, que es lo que estabamos revisando. Salio
midiendo el color calculado del panel con getComputedStyle.
👉 REGLA DE ESTE BLOQUE: cualquier cosa del menu que NO se pinte encima de
la banda tiene que conservar su color oscuro. Si algun dia se anade otro
panel colgando del menu, acordarse de esto. */
.nav-links .dropdown a{color:var(--ink)}
.nav-links.open a,.nav-links.open button.navlink{color:var(--ink-soft)}
.nav-links.open a:hover,.nav-links.open button.navlink:hover{color:var(--ink)}
.nav-links.open a::after,.nav-links.open button.navlink::after{background:var(--gold)}
.lang{border-color:rgba(255,255,255,.45)}
.lang button{color:rgba(255,255,255,.85)}
/* El activo era una pastilla NEGRA. Sobre blanco funcionaba; sobre la banda
mete un tercer color sin motivo. Se invierte: pastilla blanca, letra del
turquesa de la banda. */
.lang button.active{background:#fff;color:var(--turq)}
/* 🚨 EL BOTON ERA TURQUESA RELLENO Y SOBRE LA BANDA DESAPARECIA.
Es el unico fallo que rompia algo de verdad, no de estetica: era el boton
principal de todas las paginas y se volvia invisible. Pasa a BLANCO relleno
con letra turquesa, que ademas lo deja como lo mas fuerte de la banda.
⚠️ LA LETRA VA EN EL TURQUESA DE MARCA, --turq, POR DECISION DE CARLOS
(28 ago 2026): "pon el azul turquesa nuestro, el de la marca". Lo cazo el
solo mirando ("lo veo mas oscuro"), porque antes estaba en --turq-dark.
👉 Lo que hay que saber, medido, para no volver a moverlo sin motivo:
turquesa de marca #10b2c2 sobre blanco = 2.57
turquesa oscuro #0b7c87 sobre blanco = 4.94 (el minimo son 4.5)
O sea que se lee mas flojo que el resto del sitio. Es la misma decision
consciente que en la banda: manda la marca exacta. Carlos lo eligio con la
cifra delante, no por descuido.
👉 COMPENSACION QUE SI SE PUEDE HACER SIN TOCAR EL COLOR: la letra sube de
peso 500 a 700 SOLO en este boton. La cifra de contraste no cambia, pero un
trazo mas grueso se lee bastante mejor a igualdad de color. Es la unica
palanca que queda cuando el color esta fijado.
El icono de WhatsApp se queda solo en el simbolo, en su verde: la regla de
la casa dice que no se rellena cuando comparte espacio con turquesa. */
.nav-right .btn-primary{background:#fff;color:var(--turq);font-weight:700}
.nav-right .btn-primary:hover{background:#fff;color:var(--ink)}
.nav-right .btn-primary .ico{color:#25d366}
.menu-toggle span{background:#fff}
/* 📌 SE PROBO PONER EL TELEFONO EN LA BANDA y se quito el mismo dia (28 ago
2026): fue un malentendido mio, Carlos no lo habia pedido. Si algun dia se
quiere de verdad, lo que hay que saber es que MEDIDO NO CABE EN EL MOVIL:
con el numero anadido, a 390 px la hamburguesa se salia 17 px de la
pantalla. Habria que esconderlo por debajo de 1000 px. */
/* ⛔ LA MIGA DE PAN SE QUITO DE LAS FICHAS (3 sep 2026).
Carlos: *"eso de Home, Properties, etc. encima de cada propiedad no es
necesario; eso lo que hace ahi es relleno"*. Y ademas REPETIA: su tercer
nivel escribia el titulo entero de la villa, y tres centimetros mas abajo
estaba el mismo titulo en grande. Lo unico propio eran dos enlaces, y para
volver ya estan el logo y el menu.
Estas reglas se quedan porque `.crumb` puede volver a hacer falta en otra
pagina; hoy no las usa nadie. */
.crumb{padding:22px 0 6px;font-size:.82rem;color:var(--ink-soft)}
.crumb a:hover{color:var(--turq)}
.crumb span{color:var(--gold)}
/* layout */
/* 🚨 ARRIBA VA PEGADO, Y ES LO QUE PIDIO CARLOS: *"que no quede banda arriba,
que no quede abierto, que se vea casi pegado de arriba"*.
Al quitar la miga se liberaron unos 70 px en el movil (el titulo largo la
partia en dos lineas), asi que aqui basta con un respiro corto. 10 px es
aire, no hueco: pegar la foto del todo a la banda turquesa la haria parecer
parte de la cabecera. */
.listing{display:grid;grid-template-columns:1fr 380px;gap:38px;padding:10px 0 70px;align-items:start}
.main{min-width:0}
.side{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
/* ===================================================================
HABLAR CON UN AGENTE, EN EL TELEFONO (9 sep 2026)
-------------------------------------------------------------------
⛔ NO EXISTE EN ESCRITORIO. Ahí la tarjeta del agente ya está fija a
la derecha y esto sería un botón que lleva a donde ya estás mirando.
Va justo debajo de los recuadros con iconos: el visitante acaba de
leer habitaciones, baños y metros, y ese es el punto donde decide si
quiere preguntar. Ni antes (no sabe todavía qué es) ni al final
(para entonces ya se fue).
🟢 El de WhatsApp lleva el verde de la casa (`.btn-wa`) y el otro va
en turquesa: dos caminos distintos, y se ve cuál es cuál sin leer. */
/* ===================================================================
CONTACTAR AL AGENTE, EN MEDIO DE LA FICHA (9 sep 2026)
-------------------------------------------------------------------
🔁 Nació el mismo día como arreglo de móvil y Carlos lo quiso también
en la computadora: *"antes de property description tú puedes poner ahí
Contact agents, en el medio, centrado"*.
👉 Y funciona mejor de lo que parecía: la columna de la derecha se lee
como "publicidad del sitio" y el ojo la salta por costumbre. Un botón
en medio del contenido, justo donde el visitante acaba de leer los
metros y antes de meterse en la descripción, lo pilla en el momento en
que se está preguntando algo.
⛔ EN ESCRITORIO NO OCUPA TODO EL ANCHO. Dos botones de 460 px cada uno
a media ficha se leen como una barra de publicidad; centrados y del
tamaño de su texto se leen como una oferta de ayuda. Carlos ya lo dijo
de la versión de móvil: *"se ven muy anchos, cuadrados y muy grandes,
como que no pegan"*.
=================================================================== */
.agente-movil{display:flex;justify-content:center;flex-wrap:wrap;
gap:10px;margin:24px 0 4px}
.am-abrir{background:var(--ink,#0b0c0d);color:#fff;border:0;border-radius:12px;
min-height:46px;padding:0 22px;font-weight:600;font-size:.88rem;
justify-content:center;gap:9px;display:inline-flex;align-items:center;
cursor:pointer;transition:background .18s}
.am-abrir:hover{background:var(--turq-dark,#0b7c87)}
.am-abrir.on{background:var(--turq-dark,#0b7c87)}
.am-wa{min-height:46px;padding:0 22px;border-radius:12px;justify-content:center;
gap:9px;display:inline-flex;align-items:center;font-weight:600;font-size:.88rem;
text-decoration:none;background:var(--turq,#10b2c2);color:#fff;
transition:background .18s}
.am-wa:hover{background:var(--turq-dark,#0b7c87)}
.am-abrir .ico,.am-wa .ico{width:17px;height:17px}
.am-abrir .ico svg,.am-wa .ico svg{width:17px;height:17px}
/* ⚠️ El hueco ocupa la fila entera y tiene tope de ancho: la tarjeta del
agente está pensada para una columna de 380 px, y estirada a los 900
de la ficha los campos quedan como una hoja de cálculo. */
/* ⛔ NO ES UN SEGUNDO BOTON, ES UN ENLACE. Y la diferencia es el punto:
Carlos pidió *"un solo botón, el que manda directo de WhatsApp"*, y dos
botones que quieren decir lo mismo no dan a elegir, hacen dudar.
👉 Pero la salida por correo no se puede perder: en un comprador
canadiense o americano de sesenta años, **la mitad no usa WhatsApp a
diario**. Sin ella ese visitante no tiene forma de escribir desde aquí.
✅ Como enlace de texto no compite por el clic (no tiene fondo, ni
borde, ni peso), pero sigue estando para el que lo necesita. Ocupa la
fila entera y va centrado debajo del botón. */
.am-correo{flex-basis:100%;background:none;border:0;padding:6px 0 0;
font-family:inherit;font-size:.83rem;color:var(--ink-soft);cursor:pointer;
text-decoration:underline;text-underline-offset:3px;
text-decoration-color:rgba(11,12,13,.25);transition:color .18s}
.am-correo:hover{color:var(--turq-dark,#0b7c87);text-decoration-color:currentColor}
.am-slot{flex-basis:100%;margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto}
.am-slot[hidden]{display:none}
.am-slot .agent{position:static}
/* 🚨 MIENTRAS EL FORMULARIO ESTA ABIERTO EN ESCRITORIO, LA COLUMNA DE LA
DERECHA SE ESCONDE. Esa columna SOLO contiene la tarjeta del agente:
con la tarjeta movida al centro quedaría una franja vacía de 380 px al
lado de la ficha, que se ve peor que el problema que se venía a
resolver. Al cerrar, todo vuelve a su sitio. */
.listing.agente-abierto{grid-template-columns:1fr}
.listing.agente-abierto .side{display:none}
/* gallery */
.gallery{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.gal-main{position:relative;height:460px;background:#000;cursor:zoom-in}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-badges{position:absolute;top:18px;left:18px;display:flex;gap:7px;z-index:2}
.badge{font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:#fff;backdrop-filter:blur(4px)}
.badge.sale{background:rgba(16,178,194,.92)}.badge.excl{background:rgba(11,12,13,.9)}.badge.hot{background:rgba(178,60,38,.96)}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;display:grid;place-items:center;color:var(--ink);z-index:3;transition:.2s}
.gal-nav.prev{left:18px}.gal-nav.next{right:18px}
.gal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.gal-nav .ico{width:22px;height:22px}
.gal-count{position:absolute;bottom:16px;right:16px;background:rgba(11,12,13,.72);color:#fff;padding:7px 14px;border-radius:999px;font-size:.78rem;z-index:3}
.gal-thumbs{display:flex;gap:9px;padding:12px;overflow-x:auto}
.gal-thumbs img{width:104px;height:72px;object-fit:cover;border-radius:9px;cursor:pointer;opacity:.5;transition:.2s;flex:none;border:2px solid transparent}
.gal-thumbs img:hover{opacity:.85}.gal-thumbs img.active{opacity:1;border-color:var(--turq)}
/* card blocks */
.block{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;margin-top:26px}
.block h2{font-family:var(--display);font-size:1.55rem;font-weight:700;margin-bottom:18px}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:26px}
.head-row .title h1{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;line-height:1.1}
.head-row .loc{color:var(--ink-soft);display:flex;align-items:center;gap:7px;margin-top:8px}
.head-row .loc .ico{width:16px;height:16px;color:var(--gold)}
/* 💰 EL PRECIO DE LA FICHA: LOS DOS DEL MISMO TAMAÑO, LADO A LADO.
🔁 REHECHO EL 9 sep 2026. El anterior tachado iba a 1rem DEBAJO del
precio de hoy, o sea la mitad de tamaño y en segunda fila.
Carlos: *"el precio real lo vamos a poner como 385, pero lo vamos a
poner del mismo tamaño que el 350: que se vea uno a la derecha y uno
a la izquierda, y el 385 tachado, pero con el mismo tamaño de los
números"*.
🎯 Y tiene razón de sobra: la rebaja de US$35,000 era la mejor noticia
de esa villa y estaba escrita en letra chica. **La letra chica no se
lee.** Igual de grande, se ve de lejos; lo que separa al viejo del
nuevo es el gris y la raya, no el tamaño.
ORDEN: primero el viejo y después el de hoy, que se lee "de 385 a
350". Es como lo cuenta Carlos y como lo entiende cualquiera.
⛔ El tachado SOLO cuando el dueño bajó el precio de ESTA villa.
Contra otra propiedad sería un descuento inventado: es lo que se
cuidó en la 861.
⚠️ `[hidden]` necesita su propia regla porque aquí se declara un
`display`, y un `display` declarado gana siempre a `[hidden]`. */
.price-tag{display:flex;align-items:baseline;justify-content:flex-end;
gap:12px;flex-wrap:wrap;text-align:right}
.price-tag .now{font-size:2.1rem;font-weight:700;color:var(--ink,#0b0c0d);line-height:1;letter-spacing:-.02em;order:2}
.price-tag .was{color:var(--ink-soft);text-decoration:line-through;font-size:1rem;opacity:.7}
.overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px;margin-top:24px}
.overview .q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:12px}
.overview .q .ico{width:23px;height:23px;color:var(--turq);flex:none}
.overview .q b{font-size:.98rem;font-weight:600}
.overview .q b.yes{color:var(--ink,#0b0c0d)}
.overview .q small{display:block;font-weight:400;font-size:.7rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.desc p{color:var(--ink-soft);margin-bottom:12px}
/* 🔴 EL RECUADRO DEL FINANCIAMIENTO DEL DUEÑO LLEVA EL ROJO DE LA MARCA
EN EL ICONO Y EL TITULAR (9 sep 2026). Regla de Carlos del 8 sep:
*"para todo lo que es owner financing y hot deal tenemos que ponerle en
rojo"*.
⚠️ EL ROJO VA EN EL ACENTO, NO EN EL FONDO. Un recuadro rojo entero, a
media ficha y del ancho de la columna, se lee como una advertencia:
justo lo contrario de lo que dice dentro. En el icono y el titular, el
código de color se cumple y el bloque sigue invitando.
⛔ Y el icono NO va en `--gold`: el oro se retiró de la marca el 3 sep
2026 y esa variable solo sigue existiendo como red de seguridad. */
.fin-box{background:linear-gradient(135deg,rgba(207,46,34,.09),rgba(207,46,34,.045));border:1px solid rgba(207,46,34,.26);border-radius:16px;padding:24px;display:flex;gap:16px;align-items:flex-start;margin-top:24px}
.fin-box .ico{width:34px;height:34px;color:var(--rojo-hot,#cf2e22);flex:none}
.fin-box h3{font-size:1.05rem;margin-bottom:4px;color:var(--rojo-hot,#cf2e22)}
.fin-box p{font-size:.92rem;color:var(--ink-soft)}
.fin-box p b{color:var(--ink,#0b0c0d);font-weight:600}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.features div{display:flex;align-items:center;gap:10px;font-size:.92rem}
.features .ico{width:18px;height:18px;color:var(--turq)}
.mapbox{border-radius:16px;overflow:hidden;border:1px solid var(--line);height:340px}
.mapbox iframe{width:100%;height:100%;border:0}
/* calculator */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc-mode{display:flex;gap:8px;margin-bottom:20px}
.calc-mode button{flex:1;padding:11px;border:1px solid var(--line);background:#fff;border-radius:11px;font-family:inherit;font-size:.82rem;font-weight:500;cursor:pointer;transition:.2s;color:var(--ink-soft)}
.calc-mode button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.calc-field label{font-size:.76rem;color:var(--ink-soft);display:block;margin-bottom:6px}
.calc-field input,.calc-field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-family:inherit;font-size:.92rem;color:var(--ink);outline:none}
.calc-field input:focus{border-color:var(--turq)}
.calc-out{grid-column:1/-1;background:var(--ink);color:#fff;border-radius:16px;padding:24px;text-align:center;margin-top:6px}
.calc-out .big{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--gold);line-height:1}
.calc-out small{opacity:.8;letter-spacing:.04em}
.calc-out .row{display:flex;justify-content:space-around;margin-top:16px;flex-wrap:wrap;gap:10px;font-size:.86rem}
.calc-out .row b{display:block;color:#fff;font-size:1rem}
.calc-out .row span{opacity:.7;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
/* sidebar */
.agent{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-sm)}
.agent-top{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.agent-av{width:78px;height:78px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--turq),var(--gold));display:grid;place-items:center;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 2px var(--turq);cursor:pointer;transition:box-shadow .3s}
.agent-av img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.agent-av:hover{box-shadow:0 0 0 3px var(--turq)}
.agent-av:hover img{transform:scale(1.09)}
.agent-top h3{font-family:var(--display);font-size:1.25rem;font-weight:700}
.agent-top small{color:var(--ink-soft);font-size:.82rem}
.agent-top a{color:var(--turq,#10b2c2);font-size:.8rem;font-weight:600;transition:color .2s,letter-spacing .25s;display:inline-block}
.agent-top a:hover{color:var(--turq);letter-spacing:.015em}
.field{margin-bottom:12px}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-family:inherit;font-size:.9rem;outline:none;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--turq)}
.field textarea{resize:vertical;min-height:74px}
.agent-actions{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.agent-actions .btn{width:100%}
.contact-mini{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-soft)}
.contact-mini li{list-style:none;display:flex;gap:9px;align-items:center;margin-bottom:9px}
.contact-mini .ico{width:15px;height:15px;color:var(--gold);flex:none}
.facts{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow-sm)}
.facts h3{font-family:var(--display);font-size:1.2rem;font-weight:700;margin-bottom:14px}
.facts .f{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.facts .f:last-child{border-bottom:none}
.facts .f span{color:var(--ink-soft)}
.facts .f b{font-weight:600;text-align:right}
.facts .yes{color:var(--ink,#0b0c0d)}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(10,14,13,.94);display:none;align-items:center;justify-content:center;flex-direction:column}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px}
.lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-close .ico{width:22px;height:22px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-nav.prev{left:24px}.lb-nav.next{right:24px}.lb-nav .ico{width:26px;height:26px}
.lb-count{color:#fff;margin-top:16px;opacity:.8;font-size:.9rem}
/* bio modal */
.biomodal{position:fixed;inset:0;z-index:420;background:rgba(15,22,21,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.biomodal.open{display:flex}
.bio-box{background:#fff;border-radius:22px;max-width:940px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);position:relative}
.bio-close{position:absolute;top:16px;right:16px;z-index:6;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:.2s}
.bio-close:hover{transform:rotate(90deg)}.bio-close .ico{width:20px;height:20px}
.bio-header{display:flex;gap:26px;align-items:flex-start;padding:38px 40px 30px;border-bottom:1px solid var(--line);position:relative}
.bio-av{width:118px;height:118px;border-radius:50%;flex:none;overflow:hidden;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 3px var(--turq)}
.bio-av img{width:100%;height:100%;object-fit:cover}
.bio-hinfo{flex:1;min-width:0}
.bio-hinfo h3{font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1.05}
.bio-count{display:inline-block;color:var(--ink,#0b0c0d);font-weight:600;font-size:.85rem;margin:6px 0 18px}
.bio-count:hover{color:var(--turq)}
.bio-contacts{display:flex;flex-wrap:wrap;gap:22px 34px}
.bio-contacts .bc{display:flex;gap:11px;align-items:flex-start}
.bio-contacts .ico{width:17px;height:17px;color:var(--turq);flex:none;margin-top:2px}
.bio-contacts small{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);opacity:.6;margin-bottom:1px}
.bio-contacts a,.bio-contacts .bc span{font-size:.9rem;color:var(--ink)}
.bio-contacts a:hover{color:var(--turq-dark)}
.bio-socials{position:absolute;top:38px;right:70px;display:flex;gap:10px}
.bio-socials a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(16,178,194,.4);display:grid;place-items:center;color:var(--turq);transition:.2s}
.bio-socials a svg{width:15px;height:15px}
.bio-socials a:hover{background:var(--turq);color:#fff}
.bio-cols{display:grid;grid-template-columns:1.1fr .9fr}
.bio-about{padding:34px 40px}
.bio-about h4,.bio-form h4{font-family:var(--display);font-size:1.5rem;font-weight:700;margin-bottom:16px;color:var(--ink)}
.bio-about p{color:var(--ink-soft);font-size:.96rem}
.bio-form{padding:34px 40px;background:linear-gradient(165deg,rgba(16,178,194,.1),rgba(16,178,194,.02));border-left:1px solid var(--line)}
.bio-field{margin-bottom:12px}
.bio-field input,.bio-field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:11px;font-family:inherit;font-size:.92rem;outline:none;transition:border-color .2s;background:#fff}
.bio-field input:focus,.bio-field textarea:focus{border-color:var(--turq)}
.bio-field textarea{resize:vertical;min-height:96px}
@media(max-width:820px){.bio-header{flex-direction:column;align-items:center;text-align:center;padding-top:50px}.bio-socials{top:16px;right:16px}.bio-contacts{justify-content:center}.bio-cols{grid-template-columns:1fr}.bio-form{border-left:none;border-top:1px solid var(--line)}}
/* footer */
/* ===================== EL PIE DE PAGINA (8 sep 2026) =====================
🚨 ESTAS REGLAS ESTABAN ESCRITAS DOS VECES EN ESTA HOJA, con valores
distintos (una en la zona de formularios y otra aqui). Ganaba la segunda
por ir despues, asi que la primera llevaba meses sin pintar nada y
cualquiera que la editara no veria ningun cambio en pantalla. Se borro la
de arriba y quedo esta.
👉 REGLA: dos bloques con los mismos selectores no son "un respaldo": son
una trampa. El que edita el que pierde no ve nada y no entiende por que.
📐 TRES COLUMNAS: marca (ancha, con logo, frase y YouTube), contacto y
comunidades. **Eran cinco y se bajo a tres el mismo dia**, al medir que
once de los enlaces repetian el menu de arriba. El porque esta escrito
en `_pie.html`.
⚠️ `minmax(0,1fr)` en las dos de la derecha: sin eso, "Sosúa Ocean
Village" empuja su columna y descuadra la fila entera. Es el mismo
detalle que hizo falta en los botones del hero de comunidad.
========================================================================= */
footer{background:var(--ink);color:rgba(255,255,255,.76);padding:64px 0 24px;font-weight:300}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:42px}
.foot-brand img{height:52px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:.9rem;max-width:34ch;margin-bottom:22px}
footer h4{color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
footer li{list-style:none;margin-bottom:11px;font-size:.9rem}
footer a{transition:color .2s}
footer a:hover{color:var(--gold)}
.foot-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px}
.foot-contact .ico{width:16px;height:16px;color:var(--gold);flex:none;margin-top:2px}
/* El circulo de la red social. Con UNA sola cuenta se queda igual de
grande: encogerlo por estar solo lo haria parecer un descuido. */
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(16,178,194,.45);display:grid;place-items:center;color:var(--turq);transition:.2s}
.socials a svg{width:17px;height:17px}
.socials a:hover{background:var(--turq);border-color:var(--turq);color:#fff;transform:translateY(-2px)}
.wa-float{position:fixed;bottom:24px;right:24px;z-index:200;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(37,211,102,.6);transition:transform .2s}
.wa-float svg{width:31px;height:31px}.wa-float:hover{transform:scale(1.08)}
@media(max-width:980px){
.topbar{display:none}.nav-links{display:none}.menu-toggle{display:flex}
.listing{grid-template-columns:1fr}
.side{position:static}
}
@media(max-width:600px){.gal-main{height:300px}.calc-grid{grid-template-columns:1fr}}
/* =================== PAGINA DE COMUNIDAD =================== */
/* background-position alto (28%): en las aereas el mar y el horizonte van
arriba, y centrado se perdian al recortar. */
.chero{position:relative;min-height:64vh;display:flex;align-items:flex-end;background-size:cover;background-position:center 28%;padding:150px 0 56px;color:#fff}
/* Velo mucho mas suave arriba: la aerea tiene que verse verde y viva.
Solo se oscurece abajo, que es donde va el texto. */
/* Doble velo: uno vertical que oscurece hacia abajo y otro lateral desde la
izquierda, que es donde va el texto. Asi la foto se ve viva a la derecha
y el titulo se lee limpio a la izquierda. */
.chero-veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,22,24,.10) 0%,rgba(10,22,24,.18) 30%,rgba(10,22,24,.55) 64%,rgba(10,22,24,.90) 100%),
linear-gradient(90deg,rgba(10,22,24,.55) 0%,rgba(10,22,24,.18) 45%,rgba(10,22,24,0) 75%)}
.chero h1{text-shadow:0 3px 26px rgba(10,22,24,.85),0 1px 4px rgba(10,22,24,.6)}
.chero .cloc{text-shadow:0 2px 14px rgba(10,22,24,.9)}
/* `width:100%` es OBLIGATORIO: `.chero` es flex, y sin el, el `.wrap` se
encoge al ancho de su hijo mas ancho. En un telefono ese hijo es el h1 o
el boton, que son mas anchos que la pantalla, y la pagina entera se
desplazaba de lado (375 px de pantalla contra 436 de contenido).
Con el ancho fijado, `text-align:center` centra el boton EXACTAMENTE
bajo el nombre de la comunidad (Carlos, 19 ago 2026). */
.chero .wrap{position:relative;z-index:2;width:100%;text-align:center}
.crumb.light,.crumb.light a{color:rgba(255,255,255,.82)}
.crumb.light a:hover{color:var(--gold,#10b2c2)}
.ckicker{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#10b2c2);margin:16px 0 10px;font-weight:600}
.chero h1{font-family:var(--display);font-size:clamp(2.1rem,5vw,3.6rem);font-weight:700;line-height:1.08;margin:0 0 14px;color:#fff}
.cloc{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:1rem;margin-bottom:22px}
.cloc .ico svg{width:17px;height:17px}
/* ⛔ EL "DESDE" YA NO VIVE SOBRE LA FOTO. Estas tres reglas son de cuando
estaba dentro del hero, en cristal esmerilado. Ahora va sobre el crema del
cuerpo, justo antes de las propiedades, que es donde el visitante ya sabe
qué comunidad está mirando y se pregunta cuánto cuesta entrar.
Se dejan por si alguna página vieja las usa; el estilo bueno es `.cdesde`
redefinido más abajo, en el bloque del cuerpo de comunidad. */
/* ===================================================================
LOS TRES BOTONES DEL HERO DE COMUNIDAD (4 sep 2026)
Carlos, estudiando drproperties.ca: el visitante que entra a una
comunidad viene con UNA de tres intenciones (ver lo que hay listo, ver
lo que se construye, o preguntar), y hasta hoy solo tenía la tercera.
👉 LOS DOS PRIMEROS SON ATAJOS, NO NAVEGACIÓN, y por eso van en blanco
translúcido y no en turquesa: el turquesa está reservado al que saca al
visitante de la página. Si los tres pesaran igual, el que de verdad
convierte dejaría de destacar.
=================================================================== */
/* El "qué es esto" pasa de frase suelta a RÓTULO en versalitas espaciadas.
Carlos, 4 sep 2026, sobre todo el hero: *"algo de lujo, bien bonito"*.
Una línea de texto normal debajo de un titular de 58 px se lee como un pie
de foto; las versalitas espaciadas se leen como una firma. Es el mismo
gesto que ya usan los rótulos de los socios en Vender. */
.chero-tipo{color:rgba(255,255,255,.86);font-size:.72rem;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;
margin:0 0 26px;text-shadow:0 2px 14px rgba(10,22,24,.75)}
/* ===================================================================
🚨 LOS TRES BOTONES, REHECHOS ENTEROS (4 sep 2026)
Carlos: *"esos tres botones son tres porquerías. A cada uno deberíamos
ponerle un color para que se vean de alta gama, quizá no del mismo
tamaño, porque en realidad todos tienen que ser más pequeños, pero algo
de lujo, bien bonito... que no tape tanto las fotos"*.
👉 Y tenía razón en la causa, no solo en el efecto: eran **tres cajas
translúcidas iguales de 69 px** sobre la foto. Ocupaban 98 px de alto y
más de la mitad del ancho del hero, o sea que la aérea que acabábamos de
arreglar quedaba tapada por tres rectángulos grises. **Un botón
translúcido no es elegante: es un botón sin decidir.**
🔁 SEIS VERSIONES HICIERON FALTA. Las cinco descartadas enseñan, y por eso
quedan apuntadas:
1. **Macizos blanco / negro / turquesa** → *"esos colores, yo sé que son
los de la marca, pero por eso no pega ahí"*. La paleta de marca es de
alto contraste y en una fila sobre foto se lee dura, no cara.
2. **Los tres en cristal con borde turquesa** → volvió a pedir color:
tres botones idénticos obligan a leerlos para saber cuál es cuál.
3. **Un relleno y dos transparentes** → jerarquía clara, fila
descompensada.
4. **Terracota / arena / turquesa** → *"no me convencen en absoluto"*.
5. Y otras dos que ni llegaron a montarse en el sitio.
🚨 EL PROBLEMA NO ERA EL DISEÑO, ERA EL MÉTODO. Cada vuelta consistía en
describirle una idea, montarla, que la viera y que la tumbara. Media hora
por vuelta, cinco veces.
✅ Se montó `_botones-comunidad.html`: **las seis opciones sobre la foto y
el velo de verdad, en una página**. Eligió en un minuto. Es lo mismo que
ya había funcionado con los logos sobre la banda turquesa, con los
diecisiete rótulos de los socios y con las 40 portadas de `_portadas.html`.
👉 **REGLA: cuando una decisión visual va por la tercera vuelta, se deja de
describir y se montan las opciones juntas sobre el fondo real.**
LO QUE GANÓ Y POR QUÉ:
1. **UNA SOLA PIEZA SEGMENTADA**, no tres botones. Las otras cinco eran
tres cosas flotando sobre la aérea; esta es **un control**, como el de
un panel caro. Y así desaparece solo lo que Carlos llevaba señalando
desde el principio sin encontrarle nombre: **dejan de competir tres
pesos, porque ya no son tres objetos.**
2. **DE 69 A 46 px de alto.** Se recuperan más de 20 px de foto por botón.
La comunidad se ve, que es lo que la vende.
3. **DENTRO DE LA PIEZA, EL TURQUESA MARCA EL QUE SACA DE LA PÁGINA.** Los
dos atajos van en cristal oscuro; el tercero, en turquesa de marca. La
jerarquía se lee sin salir del mismo objeto.
4. **VERSALITAS ESPACIADAS.** Es el idioma de las casas de subastas. En un
botón de 46 px, la caja baja se lee como una app; las versalitas, como
una placa.
⛔ NO se les pone oro ni colores de fuera de la marca. El terracota y el
arena que se habían probado ya no se usan (sus variables siguen declaradas
más abajo, sin uso, por si vuelven).
=================================================================== */
.chero-btns{display:flex;justify-content:center}
/* ===================================================================
🚨 SÉPTIMA VUELTA, Y AQUÍ ESTABA EL PROBLEMA DESDE EL PRINCIPIO.
Carlos, sobre la barra segmentada: *"no me cuadra, no se ve profesional...
necesito que lo pongas del mismo tamaño, así, pero un poco separado"*.
👉 **"DEL MISMO TAMAÑO" ERA LO QUE FALTABA EN LAS SEIS VERSIONES
ANTERIORES, y ninguna lo tenía.** En todas, cada botón medía lo que medía
su texto: 127 px "Obra nueva", 101 "Reventas", 168 "Conocer más". Tres
rectángulos de tres anchos distintos, uno al lado del otro. **Eso es lo
que él llevaba seis rondas viendo como "poco profesional" sin encontrarle
el nombre**, y por eso ningún cambio de color lo arreglaba: el problema
nunca fue el color, era la MEDIDA.
💡 Y por eso la barra pegada tampoco valió: resolvía que fueran una pieza,
pero por dentro los tres seguían siendo de anchos distintos.
✅ Rejilla de tres columnas iguales (`1fr 1fr 1fr`) con 12 px de aire. Los
tres miden exactamente lo mismo aunque su texto no.
⚠️ `minmax(0,1fr)` y no `1fr` a secas: en una rejilla, `1fr` no baja del
ancho de su contenido, así que el botón del texto más largo empujaría a
los otros dos y volverían los anchos desiguales. Con `minmax(0,...)` las
tres columnas son iguales de verdad.
⚠️ `max-width:600px` para que en pantalla ancha no se estiren hasta
parecer tres barras. Medido: 3 × 192 px, que es proporción de botón.
=================================================================== */
.chero-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;width:100%;max-width:600px;margin:0 auto}
/* Si una comunidad no tiene obra nueva, quedan dos y siguen siendo iguales
entre sí. La rejilla se recalcula sola con los que haya. */
.chero-seg:has(> [hidden]){grid-template-columns:repeat(2,minmax(0,1fr));
max-width:400px}
.chero-b,.chero-cta{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;height:48px;padding:0 10px;
border-radius:9px;border:1.6px solid transparent;
/* 🔤 NEGRITA DE VERDAD. Carlos: *"las letras tienen que ser en negrita"*.
Peso 700 (el máximo que carga Poppins en este sitio) y el tracking baja
de .11em a .06em: **un espaciado grande adelgaza ópticamente la palabra**
porque separa los trazos, así que a la vez que se pedía más negrita el
tracking la estaba deshaciendo. Menos aire entre letras y el texto se ve
más sólido sin cambiar de peso. */
font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
white-space:nowrap;
box-shadow:0 8px 24px rgba(8,18,20,.34);
transition:background .22s ease,border-color .22s ease,transform .22s ease}
.chero-b:hover,.chero-cta:hover{transform:translateY(-2px)}
/* ===================================================================
⛔ TERRACOTA Y ARENA: DECLARADOS PERO YA NO SE USAN (4 sep 2026)
Fueron la quinta versión de los botones y Carlos los tumbó: *"los botones
que pusimos a la comunidad arriba no me convencen en absoluto"*. Al pasar
a la pieza segmentada, la barra va en cristal oscuro y turquesa, así que
estos dos códigos se quedan sin uso.
💡 SE DEJAN DECLARADOS, y no es por pereza: el razonamiento y las medidas
de contraste costaron y pueden volver a hacer falta el día que se quiera
un acento cálido en otra parte del sitio. **Un color con su porqué escrito
vale más que uno que hay que volver a elegir.**
⚠️ Pero NO se heredan a nada por descuido: si se usan otra vez, se decide
entonces. Así empezaron los seis oros inventados que aún están pendientes.
=================================================================== */
/* ===================================================================
🎨 LOS TRES COLORES (4 sep 2026) — QUINTA VUELTA, DESCARTADA
Carlos: *"¿qué crees si le ponemos tres colores a los botones, tres
colores que peguen, aunque no sean de la marca?"*, y luego *"ponle los
colores que tú recomiendas"*.
⚠️ ESTO NO CONTRADICE HABER QUITADO EL `#5fe0ec` UNA HORA ANTES, y la
diferencia importa: **aquel se coló disfrazado de turquesa de marca**
(mismo tono, otro código), que es el error que este proyecto persigue
desde el `#17a2b3`. Estos tres son colores DISTINTOS, declarados a
propósito, con nombre y con su porqué. Un color nuevo y honesto no
ensucia la marca; uno parecido sí.
LOS DOS NUEVOS Y POR QUÉ ESTOS:
· TERRACOTA `#a8432f` — el barro de las tejas dominicanas, que está
literalmente en todas las fotos de las villas. Es el complementario del
turquesa (lados opuestos de la rueda), así que la fila entera se
equilibra sola.
· ARENA `#b9a878` — la arena y la piedra caliza de la costa. Hace de
puente entre el terracota y el turquesa para que no choquen.
📏 MEDIDOS CONTRA SU TEXTO, no elegidos a ojo:
terracota + blanco ....... 5,9:1 ✓ (supera el 4,5 de WCAG)
arena + negro de marca ... 8,4:1 ✓
turquesa + blanco ........ 2,57:1 (el de siempre, ya asumido)
👉 O sea que **los dos colores nuevos se leen mejor que el de marca**. No
se dice como crítica: se dice porque significa que el terracota y el arena
pueden llevar texto pequeño y el turquesa no.
⛔ NO SON LOS CÓDIGOS DEL SOCIO, Y ES DELIBERADO. Colleen y Vicky usan
`#b94a3c` y `#c2b48a` en esta misma pantalla. Se cruzan inventario con
nosotros, así que **un cliente puede ver los dos sitios el mismo día**:
copiar sus códigos exactos se vería como una calcada. Los nuestros son de
la misma familia (que es lo que Carlos quería) pero más profundos y con
mejor contraste. **Se toma la idea, no el código.**
🔒 Y NO ENTRAN EN EL RESTO DEL SITIO. Viven solo en estos dos botones,
como variables con su nombre. Si algún día se quieren usar en otra parte,
se decide entonces; heredarlos por descuido es como empezaron los seis
oros inventados que aún están pendientes de limpiar.
=================================================================== */
:root{
--terracota:#a8432f; /* teja dominicana. Solo el botón de obra nueva. */
--arena:#b9a878; /* arena y piedra caliza. Solo el botón de reventas. */
}
/* LOS DOS ATAJOS — cristal oscuro dentro de la pieza.
Van IGUALES entre sí porque hacen lo mismo (bajar dentro de la página).
Diferenciarlos por color sería inventar una jerarquía que no existe: la
única real es atajo / salida, y esa la marca el turquesa del tercero.
⚠️ El fondo oscuro no es adorno: estos segmentos se apoyan sobre aéreas
donde hay mar y cielo, y sin suelo propio el texto blanco desaparece
encima de una nube. Es la misma regla del buscador de la portada. */
.chero-b{background:rgba(11,25,28,.55);backdrop-filter:blur(10px);color:#fff;
border-color:rgba(255,255,255,.55)}
.chero-b:hover{background:rgba(11,25,28,.78);border-color:#fff}
/* 3. CONOCER MÁS — el turquesa, que en esta casa es el color de lo que se
toca para salir de la página. Sigue siendo el único de los tres que lleva
a otro sitio.
⚠️ SE LE ANULA EL DISCO DEL ICONO. `.btn-primary` monta el símbolo dentro
de un círculo de 40 px, y eso es lo que hacía que este botón midiera 69.
En 44 px no cabe: el icono va suelto, a 16 px. */
/* ===================================================================
EL CTA: MISMO CRISTAL QUE LOS OTROS DOS, PERO ES EL QUE SE MUEVE
Carlos, 4 sep 2026: *"ya que pusimos los dos botones algo transparentes,
tenemos que ponerlo a este igual, pero que sí esté animado, moviéndose
como está, con el mismo crema que sale por los bordes... y que estén a
compás, o sea, que tenga la misma distancia"*.
👉 Los tres iguales de forma y **la jerarquía la hace el MOVIMIENTO**, no
el relleno ni el color. Es más fino que un botón macizo al lado de dos
transparentes, y sigue siendo obvio cuál hay que pulsar: en toda esta
página no se mueve nada más.
🐛 Y AQUÍ ESTABA EL DESCUADRE QUE ÉL VIO: `cta-latido` lleva
`transform:scale(1.035)`, así que este botón **crecía a 46 px mientras los
otros dos median 44** y, al escalar desde el centro, su borde inferior
bajaba ~1 px por debajo de la línea de los otros. Medido, no supuesto.
✅ Animación propia (`chero-cta-latido`) SIN scale: late solo el halo
crema. El gesto se conserva entero y la fila deja de bailar.
⚠️ El halo va CREMA y no turquesa, y es una regla vieja de la casa: un
brillo turquesa encima de un borde turquesa es el mismo tono y no se ve.
El crema es el contrario de la marca, y por eso destaca.
=================================================================== */
/* 🚨 LAS DOS CAUSAS EXACTAS DEL DESCUADRE QUE VIO CARLOS, MEDIDAS:
1. **`margin-top:30px`**, que le llega de la regla compartida
`.chero-cta,.btn-brilla` de más abajo (línea ~2019). Ese margen tiene
sentido cuando el botón va SOLO debajo de un párrafo, que es como nació;
dentro de una fila de tres lo hunde 30 px. Medido: los otros dos
arrancaban en 372 y este en 387.
2. **`animation:cta-latido`**, que lleva `transform:scale(1.035)`, así que
además crecía a 45 px mientras los otros median 44.
⚠️ Las dos van con `!important` porque la regla compartida está DESPUÉS en
el archivo y con la misma especificidad: sin él, gana la de abajo. Es el
caso legítimo del `!important`, no un parche por pereza. */
/* 🚨 Y LA LETRA TAMBIÉN HAY QUE FORZARLA. Medido: este botón salía a
**15,84 px / peso 600 / sin tracking** mientras los otros dos iban a
**11,76 px / peso 700 / 1,29 px de tracking**, porque `.btn` y
`.btn-primary` los declaran después. En una fila de tres, uno con la letra
un tercio más grande no se lee como "el importante": se lee como un
descuido.
⚠️ Es EL MISMO FALLO que Carlos cazó el 1 sep entre Comprar y Vender
(*"tiene que ser el mismo tipo, el mismo peso y el mismo tamaño"*). Segunda
vez: cuando un botón hereda de `.btn` y además tiene su propia clase, hay
que comprobar en pantalla cuál de las dos gana. */
.chero-cta{background:var(--turq,#10b2c2)!important;
color:#fff;border-color:rgba(255,255,255,.34);padding:0 10px;
margin-top:0!important;
font-size:.78rem!important;font-weight:700!important;
letter-spacing:.06em!important;
/* ✅ Vuelve el latido: ya no hay `overflow:hidden` que recorte el halo,
porque los tres botones son piezas sueltas otra vez. Es el gesto que
Carlos pidió para que se vea cuál hay que pulsar, y sigue siendo lo
único que se mueve en toda la página. */
animation:chero-cta-latido 2.8s ease-in-out infinite!important}
.chero-cta:hover{background:var(--turq-dark,#0b7c87)!important;border-color:#fff}
/* ⚠️ El halo va CREMA y no turquesa: un brillo turquesa encima de un botón
turquesa es el mismo tono y no se ve. El crema es el contrario de la marca
y por eso destaca. Son los valores exactos de `.btn-brilla`.
💡 Las sombras del reposo y del pico son iguales salvo el halo, así solo
late el resplandor y el botón no se mueve de sitio ni desalinea la fila. */
@keyframes chero-cta-latido{
0%,100%{box-shadow:0 8px 24px rgba(8,18,20,.34),0 0 0 0 rgba(255,248,229,.55)}
50% {box-shadow:0 8px 24px rgba(8,18,20,.34),0 0 0 12px rgba(255,248,229,0)}
}
/* ⚠️ Hay que forzar el ANCHO Y EL ALTO, no solo el fondo. El disco de
`.btn-primary .ico` trae `width:40px;height:40px` declarados: quitandole el
color se volvia invisible pero **seguia ocupando 41 px dentro de un boton
de 44**, o sea que el icono se comia el botón por dentro y el texto se
quedaba pegado al borde. Un elemento transparente sigue ocupando sitio. */
.chero-cta .ico{width:17px!important;height:17px!important;min-width:0!important;
background:none!important;box-shadow:none!important;
border:0!important;padding:0!important;border-radius:0!important;flex:none}
.chero-cta .ico svg{width:17px;height:17px}
/* `hidden` vale display:none, pero .chero-b declara display:flex después,
y una declaración posterior gana. Sin esta línea, un botón marcado como
oculto se seguiría viendo. Ya pasó con `.rs-grid[hidden]`. */
.chero-b[hidden]{display:none}
/* 📱 En teléfono los tres se apilan a lo ancho, uno por línea. Se probó
dejarlos en fila y "Conocer más acerca de esta comunidad" en versalitas
no cabe en 375 px. Con el texto ya corto ("Conocer más") sí cabrían los
tres seguidos, pero quedan de 100 px cada uno: ilegibles y difíciles de
acertar con el dedo. */
@media(max-width:640px){
/* En el teléfono los tres se apilan y SIGUEN midiendo lo mismo, que es lo
que Carlos pidió. Una columna de tres botones idénticos se lee ordenada;
tres de anchos distintos, no.
⚠️ En 375 px los tres en fila darían 105 px cada uno: ilegibles y
difíciles de acertar con el dedo. */
.chero-seg,.chero-seg:has(> [hidden]){grid-template-columns:1fr;gap:9px;max-width:none}
.chero-b,.chero-cta{height:46px;padding:0 14px!important;
font-size:.72rem;letter-spacing:.05em}
}
/* El ancla a la que bajan los botones: sin alto y sin nada dentro. El
`scroll-margin-top` es lo que evita que la cabecera fija de 78 px tape
el título al que se acaba de llegar y parezca que el botón no hizo nada. */
.canchor{display:block;height:0;scroll-margin-top:96px}
/* El "desde", ya en el cuerpo. Una sola línea, sin caja ni adorno: es un
dato, y el peso lo lleva la cifra.
⚠️ 34 px de aire por debajo, medidos. Con 6 quedaba pegado a la cápsula de
"Qué tiene la comunidad" y las dos cosas se leían como una sola: la cifra
parecía el precio de las amenidades. Son dos datos distintos y necesitan
verse separados. */
.cdesde{display:block;margin:0 0 34px;color:var(--ink-soft,#4a4b4c);
font-size:1rem}
.cdesde b{color:var(--ink,#0b0c0d);font-size:1.42rem;font-weight:700;
letter-spacing:-.02em}
/* Misma trampa que `.chero-b[hidden]` y que `.rs-grid[hidden]`: `hidden` vale
display:none, pero es regla del navegador y la pisa cualquier `display`
declarado despues. Sin esta linea, la comunidad sin ningun precio publicado
ensenaria un "Desde" vacio. */
.cdesde[hidden]{display:none}
.cbody{padding:62px 0 80px}
.cblock{margin-bottom:62px}
/* ⚠️ `.eqv h2` ENTRA AQUI Y NO ES OPCIONAL (Carlos, 28 ago 2026: "está
cambiando el tipo de letra, esas letras son muy diferentes; hay que usar
el mismo tipo para congruencia").
Y no era impresion suya: medido, el titular de los socios salia en PESO
700 y el del equipo en 600. Mismo Poppins y mismo cuerpo, pero uno mas
fino, y a 36 px eso se ve.
El motivo: el de los socios vive dentro de un `.cblock`, que es quien da
el peso 700 a todos los titulares de estas paginas. El bloque del equipo
es un `.eqv` suelto, asi que se quedaba con el `font-weight:600` que
traen h1-h4 por defecto en la linea 39.
👉 La solucion NO es parchearle el peso al `.eqv`: es meterlo en la misma
base que los demas, para que herede familia, peso y color de un solo
sitio. Asi, si algun dia cambia la tipografia del sitio, cambian todos a
la vez y no queda uno descolgado. */
.cblock h2,.cmain h2,.eqv > h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#0b0c0d;margin:0 0 12px}
.csub{color:#6b7270;margin:0 0 22px;max-width:70ch;line-height:1.6}
/* ===================================================================
EL TEXTO DE LA COMUNIDAD: RENGLONES PAREJOS Y LO IMPORTANTE EN NEGRITA
Carlos, 4 sep 2026: *"que las letras vacías, o sea, reguerosas, no sean
todas del mismo largo. Tienen que estar todas del mismo largo y en
negritas, con lo interesante resaltado"*.
👉 Es la misma decisión que ya tomó para las biografías del equipo (24 y 25
ago: *"que la letra esté del mismo largo, que no se vea regiba"*), así que
aquí no se discute: `text-align:justify` con `hyphens:auto`.
⚠️ EL COSTE ESTÁ ASUMIDO Y ESTÁ DOCUMENTADO: justificar parte palabras
("experien-cia") y abre huecos entre palabras. Lo pidió él dos veces. ⛔ No
proponerlo como mejora.
⚠️ `max-width` en ch es lo que hace que la justificación no reviente: en un
renglón muy largo los huecos se vuelven ríos blancos. 68ch es el ancho de
lectura cómodo y el que aguanta bien el justificado.
=================================================================== */
/* ⚠️ El texto normal en peso 400 y gris medio. NO es un detalle suelto: la
negrita del resalte solo se ve si lo de alrededor NO es negrita. Con el
párrafo en 500 y en negro, el `` en 700 casi no se distinguía, que es
justo lo que Carlos reclamó. **Un resalte se construye con la diferencia,
no con el peso absoluto.** */
.ctext p{color:#4a5250;font-weight:400;line-height:1.85;font-size:1.02rem;
text-align:justify;hyphens:auto;-webkit-hyphens:auto;max-width:76ch;margin:0 auto}
/* ===================================================================
🔵 EL RESALTE: TURQUESA DE MARCA PURO Y NEGRITA DE VERDAD
Carlos, 4 sep 2026, dos correcciones seguidas:
*"yo hablé de negrita: cuando hablo, digo negrita"* y
*"estás usando un turquesa que no es de la marca... los resaltes en el
turquesa de la marca, ten mucho cuidado con el turquesa"*.
⛔ ESTUVO EN `--turq-dark` (#0b7c87) Y ÉL LO CAZÓ. Ese código **no es de
marca**: es un turquesa oscurecido que nos inventamos para contraste. Se
había puesto razonando que el de marca no contrasta lo suficiente, o sea
**se cambió el color de la marca por comodidad técnica**, que es
exactamente lo que este proyecto lleva meses persiguiendo (el `#17a2b3`
que se coló durante meses, los seis oros inventados que siguen
pendientes).
✅ AHORA: `var(--turq)` puro, el oficial, sin una gota de opacidad.
✅ Y LA NEGRITA SE VE: peso 700 contra el 400 del texto de alrededor. La
diferencia de tres pasos de peso es lo que hace que el resalte se lea como
resalte; con 600 contra 400 casi no se distingue, que era la queja.
⚠️ LO QUE HAY QUE SABER, MEDIDO Y DICHO A CARLOS: el turquesa de marca
sobre este crema da **2,57 de contraste**, por debajo del 4,5 recomendado.
Se lee, pero flojo. **Es la misma decisión que él ya tomó para la banda de
la cabecera** (blanco sobre turquesa, también 2,57): prioriza la marca
exacta sobre la recomendación. Aquí además el resalte es una palabra
suelta dentro de un párrafo que sí tiene contraste de sobra, así que el
riesgo real es menor que en la cabecera.
👉 Si algún día se quiere mejorar sin tocar el color, la palanca es el
PESO, no el tono. Nunca oscurecer el turquesa.
=================================================================== */
.ctext b{font-weight:700;color:var(--turq,#10b2c2)}
/* 🚨 EN TELÉFONO NO SE JUSTIFICA, Y ESTO NO CONTRADICE LO QUE PIDIÓ CARLOS.
Medido en 375 px: la columna queda en 283 px, o sea unas seis palabras por
renglón, y ahí el justificado **abre ríos blancos** de tres y cuatro
espacios ("Residencial Hispaniola was"). Se ve peor que el borde
irregular que se quería evitar.
👉 El justificado necesita renglones largos para repartir el sobrante entre
muchos huecos. Con pocos huecos, cada uno se lleva un pedazo enorme.
✅ Donde él lo miró (el portátil) sigue justificado. En el teléfono se
alinea a la izquierda, que es lo que hace cualquier libro digital. */
@media(max-width:640px){
.ctext p{text-align:left;hyphens:none;-webkit-hyphens:none}
}
.csplit{display:grid;grid-template-columns:1fr 340px;gap:44px;margin-bottom:62px;align-items:start}
/* ---- CABECERA DE COMUNIDAD ----
El marco dorado con el logo del socio se quito el 19 ago 2026: en la
cabecera va la aerea sola, el nombre y el boton. Lo unico que se mueve
en toda la pagina es ese boton, y por eso se mira.
Tres cosas a la vez, todas suaves:
1) un brillo dorado que lo cruza cada 4,2 s (el "cliqueame"),
2) un halo que respira, para que no se apague entre brillo y brillo,
3) un empujoncito de escala en el mismo compas.
Al pasar el raton se para todo: ya lo encontro, no hay que insistir. */
/* max-width + white-space:normal: `.btn` lleva `nowrap`, y en un telefono
"Conocer más acerca de esta comunidad" en una sola linea medía mas que
la pantalla y la sacaba de sitio. Aqui se deja partir en dos lineas. */
.chero-cta,.btn-brilla{position:relative;overflow:hidden;isolation:isolate;
margin-top:30px;max-width:100%;white-space:normal;text-align:center;
box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
animation:cta-latido 4.2s ease-in-out infinite}
/* el brillo: una banda diagonal que barre el boton de izquierda a derecha */
.chero-cta::after,.btn-brilla::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;width:55%;
pointer-events:none;z-index:0;transform:skewX(-22deg);
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,248,229,.34) 38%,
rgba(255,248,229,.85) 50%,
rgba(255,248,229,.34) 62%,
rgba(255,255,255,0) 100%);
animation:cta-brillo 4.2s cubic-bezier(.5,0,.35,1) infinite}
/* el icono y el texto van por encima del brillo */
.chero-cta>*,.btn-brilla>*{position:relative;z-index:1}
/* ---- EL DISCO DEL ICONO, IGUAL QUE EN COMPRAR (1 sep 2026) ----
Carlos comparó las dos páginas: *"mira el tamaño y el formato de los
iconos, son diferentes; ponles el mismo para que la página tenga
sincronía"*. Y era verdad, eran dos sistemas distintos:
Comprar → disco de 40 px, velo blanco al 18%, icono de trazo de 21 px
Vender → una flecha pelada de 18 px, sin disco
👉 SE UNIFICA HACIA COMPRAR, y no al revés, por tres razones:
1. Es el patrón MAYORITARIO: nueve botones en Comprar contra tres aquí.
2. Comprar es la puerta de entrada del sitio; el estilo se fija ahí.
3. El disco se ve CONSTRUIDO; una flecha suelta se ve escrita.
⚠️ La flecha `chevR` no solo era más pequeña: NO DECÍA NADA. Solo repetía
lo que un botón ya dice por ser botón. Los de Comprar nombran cada opción
(sol, gráfica, avión), así que aquí el icono también tiene que nombrar la
cosa: `home`, la propiedad.
🔍 SE PROBARON CINCO EN PANTALLA, uno debajo de otro y con el botón real
(el método de siempre: mirarlos, no imaginarlos). Solo uno sobrevive:
`sign` el letrero de venta → a 21 px SE LEE COMO UNA "F". El asta queda
vacía debajo del banderín y el ojo la lee como letra, no como
letrero. Era el más exacto de significado y aun así se cayó.
`store` → toldo de tienda, no una casa.
`llave` → lupa. Ya lo era en las fichas y lo sigue siendo aquí.
`list` → menú de interfaz, no inmobiliaria.
`home` ✅ una casa de trazo, imposible de confundir.
⚠️ Y la lección que se repite: **un icono no vale por lo que significa,
vale por lo que se lee a su tamaño real.**
El padding izquierdo baja de 24 a 14 px porque el disco ya trae su propio
aire; con los 24 el texto quedaba descolgado a la derecha.
🚨 EL PADDING VA CON `:has(> .ico)` Y NO A SECAS. `.btn-brilla` también
está en el botón "Enviar" de `empezar.html` y `empezar-compra.html`, que
NO lleva icono: sin el `:has` ese botón se quedaba con 14 px a la
izquierda y 24 a la derecha, o sea el texto descentrado dentro de la
píldora. Antes de tocar una clase hay que ver en qué otros sitios vive.
---- Y LA FORMA TAMBIÉN: RECTÁNGULO DE 14 px, NO PÍLDORA (1 sep 2026) ----
Se contaron los radios de las dos páginas y el sitio ya había elegido:
esquina suave (9 · 11 · 14 · 16 · 18 · 22 px) → decenas de elementos
píldora (999 px) → el conmutador ES/EN, el botón de la cabecera y estos
O sea que la píldora era la excepción, no el idioma de la casa.
👉 Tres motivos, por orden de peso:
1. La píldora es la forma de un control PEQUEÑO (un chip, una etiqueta, el
ES/EN). A 50 px funcionaba; a 69 px y con un disco dentro se hincha y
se lee blanda.
2. **Dos curvas totales compitiendo**: un círculo dentro de una cápsula.
En un rectángulo de 14 px el disco es lo único redondo y por eso
resalta, que es justo lo que tiene que hacer.
3. Lo caro va recto. Las casas de subastas y las inmobiliarias de lujo
usan rectángulo o esquina mínima en el botón grande; la cápsula gorda
es lenguaje de app.
⚠️ NO ES UNA MEZCLA NUEVA: `comprar.html` YA tenía el botón de cabecera en
píldora y los tres grandes en 14 px, y esa es la página que Carlos toma
como referencia. La jerarquía es control pequeño = píldora, CTA grande =
rectángulo. Vender solo se pone al día. */
/* ---- Y LA LETRA, QUE ERA LO QUE FALTABA (1 sep 2026) ----
Carlos: *"el tamaño de letra de 'I want to list my property' y el de 'A
place to retire' tiene que ser el mismo tipo, el mismo peso y el mismo
tamaño"*. Medido, no eran lo mismo:
Comprar `.hero-op` → 15.84 px · peso 600 · sin espaciado
Vender `.btn` → 13.76 px · peso 500 · +0.01em de espaciado
Dos puntos más chica y un peso más floja. Y eso importa más de lo que
parece: **el visitante que llega desde Comprar lee el botón de Vender como
una acción MENOR**, porque en esta casa el tamaño es jerarquía. Comprar y
Vender son la misma decisión vista desde los dos lados, así que los dos
botones tienen que pesar igual.
👉 Se copian los tres valores exactos de `.hero-op`. `letter-spacing:normal`
también: el +0.01em venía de `.btn`, que está pensado para botones chicos. */
.btn-brilla:has(> .ico){padding:14px 24px 14px 14px;gap:12px;border-radius:14px;
font-size:.99rem;font-weight:600;letter-spacing:normal}
.btn-brilla > .ico{display:grid;place-items:center;flex:0 0 auto;
width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.btn-brilla > .ico svg{width:21px;height:21px}
/* animation:none, no `paused`: pausada la animacion seguiria mandando sobre
el transform y se comeria el translateY(-2px) del hover del boton. */
.chero-cta:hover,.chero-cta:focus-visible,.btn-brilla:hover,.btn-brilla:focus-visible{animation:none}
.chero-cta:hover::after,.chero-cta:focus-visible::after,.btn-brilla:hover::after,.btn-brilla:focus-visible::after{animation:none}
@keyframes cta-brillo{
0% {left:-70%}
55% {left:115%}
100% {left:115%} /* se queda fuera el resto del ciclo: un brillo por vuelta */
}
@keyframes cta-latido{
0%,100%{transform:scale(1);
box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 0 rgba(255,248,229,.62)}
50% {transform:scale(1.035);
box-shadow:0 22px 46px -18px rgba(0,0,0,.75),0 0 0 12px rgba(255,248,229,0)}
}
/* Quien pide menos movimiento se queda con el boton quieto. */
@media(prefers-reduced-motion:reduce){
.chero-cta,.chero-cta::after,.btn-brilla,.btn-brilla::after{animation:none}
.chero-cta::after,.btn-brilla::after{display:none}
}
/* ---- LA HISTORIA DE LA COMUNIDAD (19 ago 2026) ----
Crema clarito y borde fino, la misma caja que el plegable de abajo:
una NOTA, no un panel. Probamos verde profundo y Carlos lo rechazó
("ese verde no me agrada", "esa franja está muy grandota").
Lo que manda aquí es la ALTURA: las villas tienen que verse casi sin
bajar. Por eso van un título y dos párrafos en dos columnas, y nada
más — ni cifras, ni filetes, ni rayitas al lado del texto ("parecen
de IA", dijo). Si se le añade algo, esto deja de funcionar. */
.chist{position:relative;margin-bottom:34px;padding:30px 34px 32px;
border:1px solid rgba(11,12,13,.10);border-radius:14px;
background:linear-gradient(150deg,#fdfbf5 0%,#faf5e9 100%)}
.chist-tit{font-family:var(--display);font-weight:700;color:var(--ink,#0b0c0d);
font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.18;letter-spacing:-.01em;
margin:0 0 16px}
/* Dos columnas: los mismos dos párrafos ocupan la mitad de alto, que es
justo lo que se pedía. En pantalla estrecha se apilan solos. */
.chist-txt{columns:2;column-gap:44px}
/* ⚠️ MISMO TRATO QUE `.ctext` (4 sep 2026): renglones parejos y la letra en
negro de marca, no en gris. Este panel es la versión "con historia propia"
de la misma caja; si uno va justificado y en negro y el otro no, Casa Linda
y las demás comunidades se leen como dos sitios distintos.
💡 Aquí el justificado funciona incluso mejor: al ir en DOS COLUMNAS, el
borde derecho recto es lo que hace que las dos columnas se vean como un
bloque y no como dos textos pegados. */
.chist-txt p{color:#4a5250;font-weight:400;line-height:1.72;font-size:.96rem;margin:0 0 12px;
break-inside:avoid;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.chist-txt p:last-child{margin-bottom:0}
/* Turquesa de marca puro, igual que `.ctext b`. Ver la nota larga de allí. */
.chist-txt b{font-weight:700;color:var(--turq,#10b2c2)}
/* Y en teléfono, izquierda: una columna de 283 px justificada abre ríos
blancos. Misma razón y misma medida que en `.ctext`. */
@media(max-width:640px){
.chist-txt p{text-align:left;hyphens:none;-webkit-hyphens:none}
}
@media(max-width:820px){
.chist{padding:24px 22px 26px;margin-bottom:28px}
.chist-txt{columns:1}
.chist-txt p{font-size:.93rem}
}
/* ---- "Sobre la comunidad" plegable ----
Ya solo es el RESPALDO de las comunidades que aun no tienen su historia
escrita (Sosúa Ocean Village, Hispaniola...). Casa Linda usa .chist. */
/* ⚠️ LA CAJA SE LIMITA AL ANCHO DE LECTURA (4 sep 2026). Ocupaba los 1.210 px
del `.wrap` mientras el texto de dentro mide unos 700, así que quedaban
500 px de caja vacía a la derecha y el bloque se veía desequilibrado.
👉 En diseño editorial una columna de texto MÁS ESTRECHA que el resto de la
página no es un fallo: es lo que hace que se lea, y de paso se ve más
cuidada que una caja ancha medio vacía. Las secciones de abajo siguen a
ancho completo porque llevan rejillas, no párrafos. */
/* 📏 CENTRADA Y MÁS ANCHA (4 sep 2026). Carlos: *"¿qué tal si ponemos
centrado en el medio el texto de About the Community, que se vea más, que
coja más el centro?"*.
Iba pegada al borde izquierdo con 500 px de página vacía a su derecha, así
que la primera cosa que se lee de la comunidad parecía una nota al margen.
⚠️ `margin:0 auto` la centra; el TEXTO de dentro sigue justificado, no
centrado: un párrafo de seis líneas centrado no se lee, se mira. */
.cmas{max-width:880px;margin-left:auto;margin-right:auto;border:1px solid rgba(11,12,13,.10);border-radius:14px;background:var(--cream-2,#fbf9f4);margin-bottom:44px;overflow:hidden}
.cmas-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
background:none;border:0;cursor:pointer;padding:20px 26px;font-family:inherit;
font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-align:left;
transition:background .2s}
.cmas-btn:hover{background:rgba(16,178,194,.07)}
/* el signo + hecho con dos barras: gira a − al abrir */
.cmas-signo{position:relative;flex:none;width:22px;height:22px;border-radius:50%;
border:1.5px solid var(--gold);transition:transform .3s}
.cmas-signo::before,.cmas-signo::after{content:'';position:absolute;top:50%;left:50%;
background:var(--gold);transform:translate(-50%,-50%);transition:opacity .3s}
.cmas-signo::before{width:10px;height:1.5px}
.cmas-signo::after{width:1.5px;height:10px}
.cmas-btn[aria-expanded="true"] .cmas-signo{transform:rotate(180deg)}
.cmas-btn[aria-expanded="true"] .cmas-signo::after{opacity:0}
/* el plegado: grid-template-rows 0fr -> 1fr anima sin saber el alto */
.cmas-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.cmas.abierto .cmas-cuerpo{grid-template-rows:1fr}
.cmas-cuerpo > .cmas-dentro{overflow:hidden;min-height:0}
.cmas-dentro{padding:0 26px;max-width:78ch;transition:padding .38s ease}
.cmas.abierto .cmas-dentro{padding:4px 26px 28px}
@media(prefers-reduced-motion:reduce){.cmas-cuerpo,.cmas-dentro,.cmas-signo{transition:none}}
@media(max-width:900px){ .cmas-btn{padding:17px 18px;font-size:.76rem} .cmas-dentro,.cmas.abierto .cmas-dentro{padding-left:18px;padding-right:18px} }
.cbox{background:#fbf9f6;border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:26px}
.cbox h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8579;margin:0 0 16px;font-weight:700}
.cinc{list-style:none;padding:0;margin:0 0 20px}
.cinc li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.06);color:#3a423f;font-size:.95rem}
.cinc li:last-child{border-bottom:0}
.cinc .ico{color:var(--turq,#10b2c2);flex:none}
.cinc .ico svg{width:16px;height:16px}
.cobra{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08)}
.cobra .ico{color:var(--gold,#10b2c2)}
.cobra small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8579}
.cobra b{font-size:1rem;color:#0b0c0d}
/* --- Tablas --- */
.tablewrap{overflow-x:auto;border:1px solid rgba(0,0,0,.09);border-radius:14px;background:#fff}
table.modelos{width:100%;border-collapse:collapse;min-width:720px;font-size:.94rem}
table.modelos th{text-align:left;padding:14px 16px;background:#fbf9f6;color:#8a8579;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;border-bottom:1px solid rgba(0,0,0,.09);white-space:nowrap}
table.modelos td{padding:15px 16px;border-bottom:1px solid rgba(0,0,0,.06);color:#3a423f;vertical-align:middle}
table.modelos tbody tr:last-child td{border-bottom:0}
table.modelos tbody tr:hover{background:#fcfbf9}
table.modelos tr.dest{background:rgba(16,178,194,.07)}
table.modelos tr.dest:hover{background:rgba(16,178,194,.11)}
table.modelos td b{color:#0b0c0d;font-weight:600}
.mnota{display:inline-block;margin-left:8px;font-size:.7rem;padding:3px 8px;border-radius:999px;background:rgba(16,178,194,.12);color:var(--ink,#0b0c0d);font-weight:600;white-space:nowrap}
.pcol{white-space:nowrap}
.pcol b{font-size:1.02rem}
.mwa{display:inline-block;margin-left:12px;font-size:.78rem;padding:6px 13px;border-radius:999px;background:var(--turq,#10b2c2);color:#fff;text-decoration:none;font-weight:600;transition:.16s}
.mwa:hover{background:var(--turq-dark)}
/* --- Bloque oscuro de renta --- */
.cblock-dark{background:#0b0c0d;border-radius:20px;padding:42px 38px;color:#fff}
.cblock-dark h2{color:#fff;margin:0 0 8px}
.cyield-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}
.cyield-head > .ico{color:var(--gold,#10b2c2);flex:none}
.cyield-head > .ico svg{width:34px;height:34px}
.cyield-head p{color:rgba(255,255,255,.76);line-height:1.7;margin:0;max-width:68ch}
.cblock-dark .tablewrap{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.cblock-dark table.modelos th{background:rgba(255,255,255,.06);color:rgba(255,255,255,.62);border-bottom-color:rgba(255,255,255,.12)}
.cblock-dark table.modelos td{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.09)}
.cblock-dark table.modelos td b{color:#fff}
.cblock-dark table.modelos tbody tr:hover{background:rgba(255,255,255,.05)}
.cblock-dark .pcol b{color:var(--gold,#10b2c2)}
.cnota{color:rgba(255,255,255,.55);font-size:.85rem;line-height:1.65;margin:18px 0 24px;max-width:70ch}
/* ===================================================================
LA CABECERA DE SECCIÓN: PLACA + TITULAR + LÍNEA (4 sep 2026)
Carlos, mirando la página: *"letras muertas, vacías, sin ningún lujo, sin
ningún detalle, sin ningún color, sin ningún resalte"*.
👉 Y era literal: cada sección era **un `` negro y nada más**. En una
página que es toda crema y negro, sin una sola pieza de color, el ojo no
tiene dónde agarrarse y todo pesa igual.
La placa hace tres cosas a la vez: mete el color de marca, marca dónde
empieza cada sección, y **se corresponde con el botón del hero que baja
hasta ella**, así que el visitante ata una cosa con la otra sin pensarlo.
⚠️ Es LA MISMA pieza en las cuatro secciones. Cuatro adornos distintos son
ruido; una pieza repetida es un sistema.
=================================================================== */
.cvhead{margin-bottom:30px}
/* ===================================================================
🚨 EL TÍTULO DE SECCIÓN **ES** LA PIEZA DE LUJO. TERCERA VUELTA.
Carlos, 4 sep 2026: *"el new construction y el resale tienen que ser algo
lujoso: un botón lujoso, algo chulo"*.
⛔ Y DE PASO CAYERON LOS TITULARES INVENTADOS, que él tumbó uno por uno:
· "Lo que ya está pagado" → *"eso no pega ahí, tiene que ser como
community amenities"*. Y además era FALSO: el HOA se paga aparte.
· "Desde el plano, a tu gusto" → *"no entiendo mucho eso"*.
· "La ves hoy y entras" → *"la gente ya sabe que cuando hablamos de
resale es una casa lista para mudarse. Eso es lógico. No podemos
buscar relleno"*.
👉 LA LECCIÓN, Y ES LA MÁS DURA DE ESTE PROYECTO: **por perseguir lo
sensorial se acabó escribiendo relleno.** Las tres frases sonaban bien y
ninguna añadía un dato. Carlos lo dijo exacto: *"a veces, por ser
sensorial, buscamos relleno y lo que se ve es ridículo"*.
✅ La sección se llama por lo que es (Reventas, Nueva construcción,
Amenidades, Ubicación) y **el lujo lo pone el diseño, no el texto.**
🔁 LA CÁPSULA ES LA MISMA `.tp-rotulo` DE VENDER, y eso no es pereza: es
la única pieza "de lujo" que Carlos ya aprobó, después de tumbar
diecisiete variantes en tres rondas. Cápsula blanca, borde turquesa de
1,6 px, filete interior al 42% y versalitas muy espaciadas en negro de
marca. Si el sitio ya tiene un sello aprobado, no se inventa otro.
⚠️ Aquí es un `` de verdad, no un adorno: es el título de la sección
y pesa en Google. El aspecto cambia, la semántica no.
=================================================================== */
/* 🔁 CUARTA VUELTA, Y LA CÁPSULA SE CAYÓ. Carlos, 4 sep 2026: *"lo de
Location, ese botón no me convence... lo de From US 265, lo de Community
Amenities y lo de New Construction, esos botones no me convencen"*.
👉 Y al ir a mirar cómo lo hacen Colleen y Vicky (que es lo que él mandó),
la respuesta estaba ahí: **sus títulos de sección NO llevan caja.** Son
texto grande, en su tipografía de display y en su color de acento, y ya.
El lujo lo ponen **la tipografía y el color**, no un recuadro.
⚠️ Y tiene lógica: una cápsula es la forma de un BOTÓN. Poner el título de
una sección dentro de la forma de un botón le dice al visitante que se
puede pulsar, y no se puede. Cuatro títulos con forma de botón en una
página es cuatro promesas falsas.
✅ Se queda lo bueno de la idea: **centrado**, que es lo que él pidió para
que "coja más el centro". */
.cvtitulo{display:block;text-align:center;
margin:0 auto 14px!important;
font-family:var(--display)!important;
font-size:clamp(1.5rem,2.8vw,2.05rem)!important;font-weight:700!important;
letter-spacing:-.015em;color:var(--ink,#0b0c0d)!important;line-height:1.15}
.cvhead{text-align:center}
.cvhead .csub{margin:0 auto;max-width:62ch}
/* Si una comunidad no tiene nada que decir debajo del título, la línea se
esconde en vez de quedarse vacía ocupando su margen. */
.cvhead .csub:empty{display:none}
/* ===================================================================
AMENIDADES: DE LISTA GRIS A FICHAS (4 sep 2026)
Antes: fondo casi blanco, borde de 1 px al 6%, letra gris y el icono
suelto. Sobre el crema de la página esas cajas **no se veían**, así que
parecía una lista de texto con símbolos delante. Justo lo que Carlos
describió como "letras muertas".
Lo que se cambió y por qué cada cosa:
- **Fondo blanco puro** contra el crema: ahora la ficha tiene borde propio
sin necesidad de subir el borde.
- **El icono va dentro de un disco turquesa suave.** Un símbolo suelto a
20 px se lee como una viñeta; dentro de un disco se lee como un dato con
su etiqueta.
- **La letra sube a negro de marca**, que es la misma corrección que ya se
hizo en los rótulos de los socios: *"esa letra tan muerta se ve con poco
prestigio"*.
- **Lo importante va en negrita dentro de cada línea** ("24 horas", "15
minutos", el nombre del restaurante). Es lo que pidió Carlos: *"con lo
interesante resaltado"*. Va en el propio texto, en comunidades.js.
- **Hover que levanta**: no promete un clic (no son enlaces) pero da vida a
una rejilla que si no es un muro quieto. Es de las pocas cosas que se
mueven en esta página, y no compite con nada porque el CTA está lejos.
=================================================================== */
/* Cuatro columnas como la referencia. Con `minmax(240px)` caben 4 en 1.240 px
y bajan solas a 3, 2 y 1 según la pantalla. */
.camen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
/* ===================================================================
SOBRE LA ZONA, DENTRO DE LA FICHA (9 sep 2026)
-------------------------------------------------------------------
El texto va un punto más grande que el cuerpo normal de la ficha: es
un resumen, no un párrafo más, y tiene que leerse de corrido.
Los `` que trae de `comunidades.js` marcan los HECHOS (los metros,
los años, el hospital), nunca los adjetivos: así se puede leer en
diagonal y siguen quedando los datos.
La rejilla de amenidades reusa `.camen` / `.camen-grid`, que son las
de la página de comunidad. ⛔ Nada de estilos nuevos para lo que ya
tiene estilo: el que llega desde la comunidad reconoce la pieza. */
/* 📐 JUSTIFICADO, COMO TODO EL TEXTO LARGO DEL SITIO. Regla de Carlos, y
la repitió el 9 sep 2026: *"donde haya texto, que las letras sean todas
del mismo largo... soy estricto con eso y no me gusta el desorden"*.
Es el mismo tratamiento que `#fDesc` y que `.ctext p` de la página de
comunidad: bandera derecha recta y partición de palabras.
⚠️ En móvil se quita: con 34 caracteres por línea, justificar abre
huecos blancos enormes entre palabras y se lee peor, no mejor. Misma
excepción que en `#fDesc`. */
.zona-txt{font-size:1.02rem;line-height:1.72;color:var(--ink-soft);margin-bottom:22px;
text-align:justify;hyphens:auto;-webkit-hyphens:auto}
@media(max-width:760px){ .zona-txt{text-align:left;hyphens:manual} }
.zona-txt b{color:var(--ink,#0b0c0d);font-weight:600}
/* 📍 LA FILA DE DISTANCIAS (9 sep 2026)
Tres datos en línea, cada uno con su icono, el número grande y el
destino en letra normal. Es lo que publica drproperties.ca en su
bloque "Neighborhood" y es de lo mejor que tienen.
🎯 El NÚMERO va en negrita y el destino no, para que la fila se lea en
diagonal: "20 min · 5 min · 10 min" cuenta la ubicación entera de un
vistazo, y quien quiera el detalle lo tiene al lado.
🚶 Las que se hacen andando llevan turquesa y dicen "A pie" en vez de
un número. Poner "0 min" sería absurdo, y además **andar a la playa no
es una distancia corta, es otra categoría**: es lo que distingue a
Hispaniola de todas las demás comunidades de la costa.
⚠️ `[hidden]` con su regla propia: este bloque declara un `display` y
un `display` declarado gana siempre a `[hidden]`. */
.zona-dist{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.zdist{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
border-radius:12px;background:var(--cream,#f6f2ea);
font-size:.86rem;color:var(--ink-soft)}
.zdist .ico{width:16px;height:16px;color:var(--ink,#0b0c0d);flex:none}
.zdist .ico svg{width:16px;height:16px}
.zdist b{font-family:var(--display);font-weight:700;color:var(--ink,#0b0c0d);white-space:nowrap}
.zdist-pie{background:rgba(16,178,194,.10)}
.zdist-pie b,.zdist-pie .ico{color:var(--turq-dark,#0b7c87)}
.zona-dist[hidden]{display:none}
.zona-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;
font-weight:600;font-size:.92rem;color:var(--turq-dark,#0b7c87);text-decoration:none;
border-bottom:1.6px solid transparent;transition:border-color .18s}
.zona-link:hover{border-bottom-color:var(--turq,#10b2c2)}
/* ⚠️ `[hidden]` con su regla propia: `#zonaAmen` es `.camen-grid`, que
declara un `display`, y un `display` declarado gana a `[hidden]`. */
#zonaAmen[hidden]{display:none}
.camen{display:block;padding:26px 24px 24px;
background:#fff;border:1px solid rgba(11,12,13,.09);border-radius:18px;
box-shadow:0 2px 10px rgba(11,12,13,.04);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* 🚨 EL BORDE DEL HOVER, EN TURQUESA PURO. Estuvo en `rgba(16,178,194,.42)`
y Carlos lo cazó: *"en Community Amenities metiste un turquesa que no es
de la marca"*. Y es literal: **el código oficial al 42% no es el color
oficial, es otro turquesa más claro.** Es la regla que él mismo escribió
el 28 ago para los rótulos de los socios, palabra por palabra.
👉 Para suavizarlo se baja el GROSOR, nunca el color. */
.camen:hover{transform:translateY(-3px);border-color:var(--turq,#10b2c2);
box-shadow:0 14px 32px rgba(11,12,13,.10)}
/* La fila de arriba: el icono a la izquierda y el número a la derecha.
⚠️ El número va a la DERECHA y no delante del título: puesto delante
compite con la palabra y se lee como parte de ella ("01 Seguridad"). En la
esquina ordena la rejilla sin meterse en la lectura. */
.camen-top{display:flex;align-items:center;justify-content:space-between;
margin-bottom:16px}
/* ⛔ SE QUITÓ EL DISCO DE FONDO. Llevaba `rgba(16,178,194,.10)`, que es otra
vez el código oficial con opacidad. Y al ir a arreglarlo se vio que el
disco sobraba: **la regla de la casa es iconos de TRAZO** (Carlos tumbó
los macizos: "con el crema y el turquesa se ven de juguete"), y meterlos
dentro de una pastilla de color es media vuelta hacia lo macizo.
✅ Icono suelto, en turquesa de marca puro, un punto más grande para que
no pierda presencia al quitarle el disco. */
.camen .ico{flex:none;display:inline-flex;align-items:center;
color:var(--turq,#10b2c2)}
.camen .ico svg{width:26px;height:26px}
/* 🚨 EL NÚMERO TAMBIÉN IBA CON OPACIDAD (`.45`). Mismo error, misma cura:
turquesa puro y, para que no grite, **se le baja el peso, no el color**.
400 contra el 700 del título deja el número claramente en segundo plano
siendo el color exacto de la marca. */
.camen-n{font-family:var(--display);font-size:1.42rem;font-weight:400;
line-height:1;color:var(--turq,#10b2c2);letter-spacing:-.02em}
.camen h3{font-family:var(--display);font-size:1.02rem;font-weight:700;
line-height:1.28;color:var(--ink,#0b0c0d);margin:0 0 8px;letter-spacing:-.01em}
.camen p{font-size:.9rem;line-height:1.55;color:#5d6462;margin:0}
@media(max-width:640px){
.camen{padding:20px 18px 18px}
.camen-top{margin-bottom:12px}
}
.ccta{text-align:center;padding:54px 30px;background:#fbf9f6;border:1px solid rgba(0,0,0,.07);border-radius:20px}
.ccta h2{margin-bottom:12px}
.ccta p{color:#5d6462;line-height:1.75;max-width:58ch;margin:0 auto 26px}
@media(max-width:900px){ .csplit{grid-template-columns:1fr} }
@media(max-width:640px){
.chero{min-height:56vh;padding:120px 0 40px}
.cblock-dark{padding:30px 20px}
.cyield-head{flex-direction:column;gap:12px}
/* tabla legible en celular */
table.modelos{min-width:0;font-size:.9rem}
table.modelos thead{display:none}
table.modelos tr{display:block;border-bottom:1px solid rgba(0,0,0,.09);padding:12px 4px}
table.modelos td{display:flex;justify-content:space-between;gap:16px;border:0;padding:7px 12px}
table.modelos td::before{content:attr(data-l);color:#8a8579;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.cblock-dark table.modelos tr{border-bottom-color:rgba(255,255,255,.12)}
.cblock-dark table.modelos td::before{color:rgba(255,255,255,.5)}
}
/* =============== TARJETAS DE MODELO =============== */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:26px}
.mcard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.22s;box-shadow:0 4px 18px rgba(20,30,30,.05)}
.mcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,30,30,.13)}
.mcard-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eee}
.mcard-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.mcard:hover .mcard-ph img{transform:scale(1.05)}
.mcard-real{position:absolute;top:14px;left:14px;background:rgba(21,32,31,.82);backdrop-filter:blur(6px);color:#fff;font-size:.72rem;letter-spacing:.06em;padding:6px 12px;border-radius:999px;font-weight:600}
.mcard-gal{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);border:0;color:#0b0c0d;font-family:inherit;font-size:.82rem;font-weight:600;padding:9px 15px;border-radius:999px;cursor:pointer;transition:.18s;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.mcard-gal:hover{background:#fff;transform:scale(1.04)}
.mcard-gal .ico svg{width:15px;height:15px}
.mcard-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.mcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.mcard-top h3{font-family:var(--display);font-size:1.42rem;font-weight:700;color:#0b0c0d;margin:0}
.mcard-precio{font-size:1.18rem;font-weight:700;color:var(--turq,#10b2c2);white-space:nowrap}
.mcard-med{font-size:.83rem;color:#8a8579;letter-spacing:.03em;margin-bottom:14px}
.mcard-d{color:#4a5250;line-height:1.75;font-size:.96rem;margin:0 0 16px;flex:1}
.mcard-renta{display:flex;align-items:flex-start;gap:10px;background:rgba(16,178,194,.1);border-left:3px solid var(--gold,#10b2c2);padding:12px 15px;border-radius:0 10px 10px 0;font-size:.88rem;color:#6b5423;line-height:1.55;margin-bottom:18px}
.mcard-renta b{color:#4a3a12}
.mcard-renta .ico{color:var(--gold,#10b2c2);flex:none;margin-top:1px}
.mcard-renta .ico svg{width:16px;height:16px}
.mcard-wa{justify-content:center;width:100%}
@media(max-width:640px){ .mgrid{grid-template-columns:1fr;gap:20px} .mcard-body{padding:18px 18px 20px} }
/* =============== GALERIA =============== */
.galmodal{position:fixed;inset:0;z-index:9999;background:rgba(8,15,15,.97);display:none;flex-direction:column;padding:18px}
.galmodal.open{display:flex}
.gal-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;transition:.16s;z-index:3}
.gal-x:hover{background:rgba(255,255,255,.24)}
.gal-head{display:flex;align-items:baseline;gap:14px;color:#fff;padding:6px 60px 14px 8px;flex-wrap:wrap}
.gal-head b{font-family:var(--display);font-size:1.25rem;font-weight:700}
.gal-head span{color:rgba(255,255,255,.55);font-size:.9rem}
.gal-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.gal-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer;transition:.16s;z-index:2}
.gal-arrow:hover{background:rgba(255,255,255,.3)}
.gal-arrow.prev{left:10px}.gal-arrow.next{right:10px}
.gal-tiras{display:flex;gap:8px;overflow-x:auto;padding:14px 4px 4px;flex:none}
.gal-tiras img{height:74px;border-radius:7px;cursor:pointer;opacity:.45;transition:.16s;flex:none}
.gal-tiras img:hover{opacity:.85}
.gal-tiras img.on{opacity:1;outline:2px solid var(--turq,#10b2c2)}
@media(max-width:640px){ .gal-tiras img{height:54px} .gal-arrow{width:42px;height:42px} }
/* ===================================================================
PORTADA - misma estructura que el sitio modelo
Hero compacto (518px) + panel de busqueda blanco + Oferta de la Semana
=================================================================== */
.rhero{position:relative;min-height:518px;display:flex;align-items:center;background:url('villas/hero-beach.jpg') center/cover no-repeat;padding:96px 0 44px;margin-top:0}
/* 🚨 EL VELO ES UN DEGRADADO, NO UN GRIS PLANO (1 sep 2026), Y SIN ESTO
CUALQUIER FOTO SE PIERDE.
Estaba en `rgba(38,52,54,.62)` uniforme, y a ese nivel la foto no se ve: se
probo una aerea de playa con villas y en pantalla era una mancha gris, no
se distinguia ni que fuera una playa. Daba igual la foto que se pusiera.
👉 Ahora va de menos a mas, y cada tramo tiene su motivo:
· 30% ARRIBA -> es la unica franja donde se ve el paisaje de verdad,
porque abajo lo tapa el panel blanco del buscador.
· 48% EN MEDIO -> justo detras del titular blanco. Es lo que hace que la
letra se lea sin apagar la foto entera.
· 62% ABAJO -> se mantiene el valor original donde ya no importa: ahi
esta el panel encima.
⚠️ El tono baja de 38,52,54 a 20,32,34: un gris mas neutro y mas oscuro
ensucia menos el verde y el turquesa de la foto. */
.rhero-veil{position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(20,32,34,.30) 0%,
rgba(20,32,34,.48) 45%,
rgba(20,32,34,.62) 100%)}
.rhero .wrap{position:relative;z-index:2;text-align:center}
/* ⚠️ ESTE TOPE ESTUVO EN 44 px UN RATO Y VOLVIO A 56 (1 sep 2026), y la
historia importa: se bajo la letra para que "Republica Dominicana" cupiera
DENTRO de la primera frase del titular. Cabia, pero el titular se volvio
largo y dejo de enganchar. **La solucion no era la letra, era la
ESTRUCTURA**: el pais se movio a la segunda linea y entonces las dos lineas
son cortas y la letra puede ser grande otra vez.
👉 Antes de encoger la tipografia para que quepa un texto, probar a partir
el texto de otra manera.
⛔ NO SUBIR de 56 sin medir en los dos idiomas: el ingles ("It's in the
Dominican Republic") es el que primero se rompe (a 64 px se va a tres). */
/* ⚠️ `text-wrap:balance` NO ES ADORNO AQUI, ARREGLA UN HUERFANO.
Con el titular en tres lineas, el navegador partia "…República Dominicana
ya / existe." y dejaba **la palabra "existe." sola en su linea**, que se ve
como un error de maquetacion. `balance` reparte las dos lineas de la
primera frase por igual.
📌 Solo funciona en textos CORTOS (tres o cuatro lineas). Aqui son dos por
frase, asi que entra justo en lo que sabe hacer. */
/* 🚨 EL TITULAR VA GRANDE. SE MIDIO EL DE REALTORDR Y SE COPIA LA ESCALA:
62 px, peso 700, interlineado 1.0, y DOS LINEAS de 996 y 750 px.
👉 LO QUE HACEN ELLOS Y YO HABIA HECHO AL REVES: ellos NO achican la letra
para que el texto quepa en una linea. Dejan que el texto ENVUELVA a lo
grande. El resultado es un titular que domina la pantalla y que ademas
sale solo con la forma buena: la primera linea larga y la segunda mas
corta.
⛔ SE INTENTO LO CONTRARIO (forzar la primera linea de una sola tirada) y
obligo a bajar la letra hasta 38 px. Carlos: *"lo que hiciste fue una
porqueria, yo no te dije que pusieras eso tan chiquito"*. Tenia razon: al
proteger la linea se perdio el titular.
⚠️ El tope de 3.875rem son 62 px, el numero exacto de ellos. El `4.4vw` es
lo que lo baja en pantallas estrechas para que no se rompa por abajo: el
ingles es mas largo que el español y es el que marca el limite. */
.rhero h1{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2.1rem,4.4vw,3.875rem);line-height:1.06;color:#fff;margin:0 0 30px;text-shadow:0 2px 22px rgba(0,0,0,.32);letter-spacing:-.02em}
/* 📐 LA SEGUNDA LINEA ES DEL MISMO TAMANO QUE LA PRIMERA, solo cambia el
color. Estuvo al 72% un rato y Carlos lo tumbo: *"yo no te dije que
pusieras eso tan chiquito, asi no cuadra"*.
Lo que el pidio ("arriba mas larga, abajo mas corta") lo dan las PALABRAS,
no el tamano de la letra: la segunda frase es mas corta y ya. Es
exactamente como funciona el titular de realtordr. */
.rhero h1 .hl{display:block;color:var(--turq,#10b2c2)}
.rhero h1 em{font-style:normal;color:var(--turq,#10b2c2)}
/* ============================================================================
EL BUSCADOR DEL HERO, REHECHO DESDE CERO (1 sep 2026)
----------------------------------------------------------------------------
Se midieron los dos referentes reales del lujo inmobiliario, Sotheby's y
Christie's, y los dos hacen lo mismo: UNA linea, cero selects, esquinas
CUADRADAS y un filete de oro. El formulario de seis campos es el patron de
los portales de volumen, no del lujo.
👉 La idea de fondo: **seis desplegables le dicen al visitante "trabaja tu";
una linea le dice "escribe lo que quieras, yo me encargo".**
⛔ Nada de esquinas redondeadas aqui: `border-radius:0` es deliberado y es
la mitad del caracter. En cuanto se redondea, vuelve a parecer una app.
============================================================================ */
/* 🪟 EL PANEL VA CASI TRANSPARENTE, SOBRE LA FOTO (Carlos, 1 sep 2026):
*"sí, transparente, pero el mismo formato que teníamos antes"*.
Estuvo blanco macizo (275 px de ladrillo encima de la playa) y estuvo
tambien como una sola linea blanca con filete de oro copiando a Christie's.
Lo primero tapaba la foto; lo segundo era copiar el estilo SIN copiar el
contexto: **el sitio de ellos no tiene foto detras del buscador, el nuestro
si.** Un panel claro sobre una foto siempre sera un parche.
👉 Ahora el panel no existe como caja: es un velo blanco al 10% con
desenfoque y un filete blanco fino. La playa se ve entera a traves.
⚠️ EL TEXTO PASA A BLANCO y lleva sombra: sobre una foto con zonas claras
(la arena) el blanco puro sin sombra se pierde. Sin la sombra esto no se
lee, y no es opcional. */
/* 🪟 SIN CAJA. EL BUSCADOR SE DIBUJA CON LAS ORILLAS DE LO ESCRITO
(Carlos, 1 sep 2026): *"el mismo estilo del de realtordr como lo teniamos,
pero transparente, incluso mas transparente que ahora, que se destaque el
buscador por las orillas de lo escrito"*.
👉 Lo que pide es que la pieza la definan LOS FILETES DE CADA CAMPO, no un
panel. Y es la decision buena: **un panel es una caja que tapa la foto; un
filete es una linea que la deja pasar entera.**
Recorrido completo de este bloque, para no repetirlo:
1. blanco macizo (275 px) -> "tapa la pantalla"
2. cristal al 76% -> seguia siendo un ladrillo claro
3. una sola linea tipo Christie's -> se copio el estilo sin el contexto
4. cristal al 10% con borde -> mejor, pero seguia habiendo caja
5. sin caja ninguna -> demasiado suelto, sin pieza
6. CAJA CON LAS CUATRO ESQUINAS REDONDAS, AL 7% <- aqui
👉 EL PUNTO DE EQUILIBRIO, y merece la pena entenderlo: **la forma de la
caja es la de realtordr (rectangulo de esquinas redondas) y eso esta bien;
lo que estaba mal era el RELLENO.** Con el fondo al 7% la pieza existe (se
sabe donde empieza y donde acaba) y la foto sigue pasando entera.
Carlos: *"los 4 esquineros redondos, no asi cuadrados, similar al de
realtor"*.
⚠️ El desenfoque MUY suave se queda aunque no haya fondo: no es estetica,
es lo que separa la letra blanca de las hojas y la espuma de la foto. Sin
el, sobre la arena clara los valores se pierden.
⛔ Y por eso mismo las sombras de texto de los campos NO son opcionales. */
/* ✨ EL BORDE TURQUESA QUE GIRA (Carlos, 1 sep 2026: *"mas transparente y en
los bordes ponle animacion del color de la marca"*).
⚠️ NO ES UN GESTO NUEVO: es EXACTAMENTE el mismo del panel de la filosofia
de vender.html (`.filo`) y el del aro de la foto de Carlos. Un degradado
conico girando, recortado por `overflow:hidden`, con un relleno por encima
que deja asomar solo 1,6 px de filete.
👉 Reusar el gesto en vez de inventar otro es lo que hace que un sitio
parezca de una sola mano. Si algun dia se cambia la velocidad o el color de
uno, hay que mirar los tres.
🚨 LA DIFERENCIA CON `.filo`: alli el relleno es crema opaco; aqui tiene que
ser CASI TRANSPARENTE, porque debajo hay una foto. Por eso el `::after`
lleva un blanco al 4% con desenfoque en vez de un color solido. */
/* 🚨 SE INTENTO PRIMERO CON EL SANDWICH DE `.filo` (un cuadrado conico
girando detras + un relleno encima que solo deja asomar el filete) Y AQUI
NO SIRVE. Alli funciona porque el relleno es crema OPACO; aqui el relleno
tiene que ser casi transparente para que se vea la foto, asi que el
degradado entero se veia por debajo y el panel quedaba con un manchon
turquesa en el medio.
✅ La solucion es un BORDE DE VERDAD con dos fondos: el interior en
`padding-box` (casi transparente) y el degradado en `border-box`, que solo
pinta el grosor del borde. El giro se hace animando un angulo declarado con
`@property`, que es la unica forma de animar un `conic-gradient`.
📌 Si un navegador viejo no entiende `@property`, el angulo no cambia y el
borde se queda quieto en turquesa: se degrada solo, sin romperse. */
/* ✨ EL HALO QUE LATE EN EL BORDE, EN TURQUESA Y FINO.
Carlos lo señalo con un ejemplo del propio sitio: *"como lo que aparece en
los bordes crema de 'A place to retire', ese tipo de borde que sube de un
punto, pero del color de la marca y mas fino"*. Es el gesto de
`hero-op-latido` en comprar.html: un aro que sale del borde y se desvanece.
⚠️ REUSAR EL GESTO, NO INVENTAR OTRO. Es el tercer sitio donde vive (los
botones grandes, los tres de comprar y ahora el buscador): si algun dia se
cambia el ritmo o el color, hay que mirar los tres.
⛔ ANTES DE ESTO SE PROBARON DOS COSAS Y LAS DOS ESTABAN MAL ENTENDIDAS:
1. Un cuadrado conico girando detras del panel: **ilumina el panel
entero**, no el borde. Carlos: *"lo que montaste fue una iluminacion
atras del buscador"*.
2. Un borde con degradado recortado con `mask`: tecnicamente correcto,
pero seguia siendo un borde de COLOR FIJO que gira, no lo que el pedia.
👉 Lo que pedia no era un degradado en el borde: era **movimiento saliendo
del borde**. Son dos cosas distintas y se parecen al describirlas.
El aro llega a 7 px y se apaga. En los botones llega a 10-12; aqui es mas
fino a proposito porque el panel es mucho mas grande y el mismo grosor
relativo cantaria. */
.rsearch{position:relative;
max-width:1040px;margin:0 auto;text-align:left;
border:1px solid rgba(255,255,255,.30);border-radius:16px;
padding:22px 26px 18px;
background:rgba(255,255,255,.05);
-webkit-backdrop-filter:blur(10px) saturate(115%);
backdrop-filter:blur(10px) saturate(115%);
animation:rs-halo 4.6s ease-out infinite}
/* 🫀 DOS PULSOS Y UNA PAUSA, no un latido continuo.
Carlos: *"que no dé vuelta hacia la derecha, sino que aparezca como 'busca,
busca, busca aquí'"*. Un solo aro cada cuatro segundos se lee como que la
pieza respira; **dos aros seguidos y luego silencio se leen como una
llamada**, que es lo que el pidio. Es la diferencia entre estar vivo y
estar diciendo algo.
El resto del ciclo (del 40% al 100%) va apagado a proposito: sin ese
silencio los dos pulsos no se distinguen de un parpadeo continuo, y una
portada que parpadea sin parar cansa a los diez segundos. */
@keyframes rs-halo{
0% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 0 rgba(16,178,194,.55)}
17% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 7px rgba(16,178,194,0)}
18% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 0 rgba(16,178,194,.55)}
35% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 7px rgba(16,178,194,0)}
36%,100%{box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 0 rgba(16,178,194,0)}
}
@media(prefers-reduced-motion:reduce){ .rsearch{animation:none} }
/* 🪟 LA CAJA VA CASI TRANSPARENTE, SOBRE LA FOTO (Carlos, 1 sep 2026):
*"¿qué tal si lo ponemos como los de Casa Linda 13, que quede casi
transparente y se vea profesional?"*.
Estuvo blanca maciza con filete de oro (copiando la medida de Christie's) y
el resultado era un ladrillo claro plantado sobre la playa: **el sitio de
ellos no tiene foto detras del buscador, el nuestro si.** Copiar el estilo
sin copiar el contexto no funciona.
👉 Ahora la caja usa el mismo tratamiento que los atajos de debajo: velo
blanco al 12%, desenfoque y un filete blanco fino. La playa se ve entera a
traves y las dos piezas se leen como una familia.
⚠️ El texto pasa a BLANCO y necesita la sombra: sobre una foto con zonas
claras (la arena) el blanco puro sin sombra se pierde. */
/* 🚨 `z-index:40` EN LA CAJA, Y NO ES DECORATIVO. Los atajos de debajo llevan
`backdrop-filter`, y esa propiedad CREA UN CONTEXTO DE APILADO propio: como
van despues en el HTML, se pintaban ENCIMA del desplegable de sugerencias y
se veia el texto de un atajo atravesando el panel blanco.
👉 Cuando algo se pinta encima de lo que no debe, buscar quien tiene
`backdrop-filter`, `transform`, `filter` o `opacity`: los cuatro crean
contexto de apilado y rompen el orden que uno espera. */
.rs-box{position:relative;z-index:40;display:flex;align-items:center;gap:14px;
background:rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(14px) saturate(120%);
backdrop-filter:blur(14px) saturate(120%);
border:1px solid rgba(255,255,255,.55);border-radius:0;
padding:0 0 0 22px;height:62px;
box-shadow:0 20px 50px -28px rgba(10,25,28,.6)}
.rs-lupa{width:19px;height:19px;flex:none;color:rgba(255,255,255,.85)}
.rs-box input{flex:1;min-width:0;height:100%;border:0;outline:none;background:none;
font-family:inherit;font-size:1.02rem;font-weight:400;color:#fff;
text-shadow:0 1px 10px rgba(0,0,0,.35)}
.rs-box input::placeholder{color:rgba(255,255,255,.78);font-weight:300}
/* El boton tampoco es un bloque de color: es el mismo cristal, separado solo
por un filete. Al pasar el raton se llena de blanco y el icono se oscurece,
que es el unico momento en que la pieza pesa. */
.rs-ir{flex:none;width:62px;height:100%;cursor:pointer;
border:0;border-left:1px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.14);color:#fff;
display:grid;place-items:center;transition:background .2s,color .2s}
.rs-ir:hover{background:#fff;color:var(--ink,#0b0c0d)}
.rs-ir .ico{width:20px;height:20px}
/* Al escribir, el cristal se aclara un punto: la pieza responde sin moverse. */
.rs-box:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.8)}
/* Las sugerencias: mismo ancho, mismo filete, cuadradas. Cada una con SU
numero, que es lo unico de este bloque que la competencia no puede copiar
sin tener inventario detras. */
/* ⚠️ LAS SUGERENCIAS SI VAN BLANCAS Y SOLIDAS, aunque la caja sea de cristal.
No es incoherencia: aqui hay que LEER una lista de nombres y numeros, y
sobre una foto con palmeras y olas eso no se lee. El cristal vale para un
campo vacio; para datos, no.
Se separa 6px de la caja para que se vea que es un panel aparte y no una
prolongacion del cristal. */
.rs-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
background:#fff;border:1px solid rgba(11,12,13,.10);
max-height:330px;overflow-y:auto;
box-shadow:0 30px 70px -28px rgba(10,25,28,.55)}
.rs-sug[hidden]{display:none}
.rs-sug-grupo{padding:13px 22px 6px;font-family:var(--display);
font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:#8a8579}
.rs-sug button{display:flex;align-items:center;gap:12px;width:100%;
padding:12px 22px;border:0;background:none;cursor:pointer;text-align:left;
font-family:inherit;font-size:1rem;color:var(--ink,#0b0c0d);transition:background .14s}
.rs-sug button:hover,.rs-sug button.sel{background:rgba(16,178,194,.09)}
.rs-sug button .ico{width:17px;height:17px;flex:none;color:var(--turq,#10b2c2)}
.rs-sug button em{margin-left:auto;font-style:normal;font-size:.85rem;color:#8a8579;white-space:nowrap}
.rs-sug .rs-sug-nada{padding:18px 22px;color:#8a8579;font-size:.95rem}
/* ---- LOS CAMPOS: CADA UNO EN SU CAJA, CON EL FILETE DE LA MARCA ----
Idea de Carlos (1 sep 2026): *"si a cada letra que esta ahi le ponemos un
bordecito que la destaque con el turquesa de la marca, que se vea que eso
esta ahi"*. Antes cada campo era texto sobre una rayita blanca, y sobre una
foto con arena clara y mar turquesa esas rayitas se perdian a ratos.
Lo que gana la caja: el campo se ve ANTES de leerlo. Sobre una foto, un
filete suelto es un accidente del paisaje; un marco cerrado es un control.
Y el color deja de ser blanco generico y pasa a ser el de la casa. */
/* CUATRO COLUMNAS desde el 7 sep 2026: Donde · Tipo · Habitaciones · Presupuesto.
Habitaciones subio de "Mas filtros" porque es lo que el visitante ya trae
decidido al entrar (ver la nota en index.html). */
.rs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 16px;margin-bottom:14px}
/* La fila de abajo se queda en DOS, que es lo que hay ahi: Construccion y
Financiamiento. Con cuatro columnas quedarian dos huecos vacios a la
derecha y se leeria como que faltan campos. */
.rs-grid.rs-extra{grid-template-columns:repeat(2,1fr)}
.rs-grid[hidden]{display:none} /* `display:grid` pisa al `hidden` del navegador */
/* ⛔ FUERA LA RAYA LARGA QUE SEPARABA LAS DOS FILAS (Carlos la cazo mirando:
*"debajo le pones otra raya larga"*). Con las cajas cada campo ya se delimita
solo, asi que ese filete de lado a lado solo anadia una linea mas a una zona
que ya tenia seis. La separacion la hace el aire, no una raya. */
.rs-extra{margin-top:2px}
/* 🚨 EL FILETE VA A 1.6px, NO A 1px. Con `devicePixelRatio` 1,25 (Windows al
125%, la pantalla de Carlos) Chrome recorta el grosor al pixel de pantalla
entero HACIA ABAJO: 1px se pinta a 0,8 y el turquesa llega al ojo lavado.
1,6px cae en 2 fisicos exactos. Es la misma regla del rotulo de los socios. */
/* ⚠️ Y LA CAJA LLEVA FONDO OSCURO TRANSLUCIDO POR NECESIDAD, no por gusto: el
panel se apoya sobre el mar, que en la foto ES TURQUESA. Un filete turquesa
sobre agua turquesa desaparece. El fondo oscuro le da su propio suelo al
borde y de paso la letra blanca se lee en cualquier parte de la foto. */
.rs-f{display:flex;flex-direction:column;gap:3px;
border:1.6px solid rgba(255,255,255,.45);border-radius:10px;
padding:9px 14px 7px;background:rgba(11,25,28,.26);
transition:border-color .2s,background .2s}
.rs-f:hover{background:rgba(11,25,28,.34);border-color:rgba(255,255,255,.7)}
.rs-f:focus-within{border-color:#fff;background:rgba(11,25,28,.38)}
/* 🎯 EL TURQUESA NO DECORA: DICE POR DONDE ESTAS FILTRANDO.
Con los seis marcos en turquesa a la vez son 4.437 px de trazo del color de
marca en la misma pantalla en la que el titular ya lleva "En Republica
Dominicana." en ese mismo turquesa. El color deja de senalar y pasa a ser el
fondo. Aqui el marco vacio va en blanco tenue (que es lo que hace falta para
que se vea que el campo esta ahi, que era la peticion) y **el turquesa se
enciende solo en el campo que tiene algo elegido**.
Es el mismo gesto que ya vive en la barra de filtros de propiedades.html
(`data-vacio="0"`), asi que las dos pantallas hablan igual.
⚠️ La marca la pone `pintarBuscador()` en `data-puesto`. Se intento primero
con `:has(select option:not([value=""]):checked)`, que hace match de verdad,
y NO SIRVE: Chrome no reevalua el estilo cuando la seleccion cambia por
`select.value`, asi que el borde se quedaba blanco con el campo ya elegido.
Esta comprobado en pantalla; no reproponerlo. */
.rs-f[data-puesto="1"]{
border-color:var(--turq,#10b2c2);background:rgba(11,25,28,.34)}
.rs-f[data-puesto="1"] label{color:#fff}
.rs-f label{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.82);
letter-spacing:.14em;text-transform:uppercase;
text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* ⚠️ LAS OPCIONES DEL DESPLEGABLE ABIERTO LAS PINTA EL SISTEMA, no el CSS de
la pagina: por eso `option` lleva su propio color oscuro sobre blanco. Si se
deja heredar el blanco, al abrirlo se ve blanco sobre blanco. */
/* ⛔ EL `select` YA NO LLEVA FILETE ABAJO: lo dibuja la caja. Dos lineas por
campo (marco + subrayado) es el formulario que se estaba quitando. */
.rs-f select{appearance:none;-webkit-appearance:none;border:0;
background:transparent;
padding:2px 24px 2px 0;font-family:inherit;font-size:1.02rem;
color:#fff;cursor:pointer;text-shadow:0 1px 10px rgba(0,0,0,.4);
background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
background-position:calc(100% - 11px) 60%,calc(100% - 6px) 60%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.rs-f select option{color:var(--ink,#0b0c0d);background:#fff;text-shadow:none}
.rs-f select:focus{outline:none}
.rs-acc{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* "Mas filtros" va al extremo contrario del boton: el que quiere afinar mira a
la izquierda, el que ya sabe va derecho al boton. Juntos, el texto le
robaria clics al principal. */
.rs-mas{display:inline-flex;align-items:center;gap:8px;padding:8px 4px;
border:0;background:none;cursor:pointer;font-family:inherit;
font-size:.88rem;font-weight:600;color:rgba(255,255,255,.9);
text-shadow:0 1px 8px rgba(0,0,0,.4);transition:color .18s}
.rs-mas:hover{color:#fff}
.rs-mas .ico{width:15px;height:15px;transition:transform .25s}
.rs-mas[aria-expanded="true"] .ico{transform:rotate(180deg)}
/* El boton es lo UNICO solido de todo el bloque. Sobre tanto cristal, un solo
elemento macizo concentra toda la atencion sin tener que gritar. */
/* ⚠️ ESQUINAS DE 10px, NI CUADRADAS NI PILDORA (Carlos, 1 sep 2026: *"con los
bordes un poco mas redondos"*). Estuvieron a 0 copiando a Christie's, y en
un buscador SIN CAJA el unico elemento solido con esquinas vivas se lee
duro. Con 10 px acompana a las tarjetas del resto del sitio, que van entre
11 y 14, sin llegar a la pildora, que ya es lenguaje de app. */
.rs-go{padding:13px 32px;border:0;border-radius:10px;
background:#fff;color:var(--ink,#0b0c0d);
font-family:inherit;font-weight:600;font-size:.96rem;cursor:pointer;
transition:background .2s,color .2s}
.rs-go:hover{background:var(--turq,#10b2c2);color:#fff}
.rs-atajos{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.rs-atajo{display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.10);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-size:.86rem;font-weight:500;text-decoration:none;
transition:background .18s,border-color .18s}
.rs-atajo:hover{background:rgba(255,255,255,.22);border-color:#fff}
.rs-atajo em{font-style:normal;opacity:.72;font-size:.8rem}
.rs-todo{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
color:rgba(255,255,255,.9);font-size:.92rem;font-weight:500;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:.18s}
.rs-todo:hover{color:#fff;border-bottom-color:#fff}
.rs-todo .ico{width:15px;height:15px}
@media(max-width:820px){
/* En telefono los tres campos van uno debajo de otro: en fila se quedan a
100 px cada uno y "Cualquier precio" no cabe. */
.rs-grid{grid-template-columns:1fr;gap:14px}
.rsearch{padding:20px 18px 18px}
}
@media(max-width:640px){
/* 🚨 EL PIE SE APILA. En una sola fila el boton se quedaba con 160 px y
"Ver 13 propiedades" se partia en DOS LINEAS dentro del boton, que es el
detalle que mas delata un sitio sin acabar.
Apilado, el boton ocupa todo el ancho: cabe la frase entera y ademas es
mas facil de tocar con el pulgar, que en un telefono es lo que manda. */
.rs-acc{flex-direction:column;align-items:stretch;gap:12px}
.rs-go{width:100%;padding:15px 20px;white-space:nowrap}
.rs-mas{justify-content:center;padding:6px 4px}
.rs-atajos{gap:7px}
.rs-atajo{padding:7px 13px;font-size:.8rem}
}
/* ===================================================================
LA OPORTUNIDAD / HOT DEAL
🚨 REHECHA EL 1 SEP 2026. Antes era un panel ARENA con acento DORADO y
dos columnas: a la izquierda texto (entradilla + comparativa + cuatro
razones + dos botones) y a la derecha una tarjeta de 405 px.
Carlos: *"al fondo le vamos a quitar el crema y vamos a poner nuestro
turquesa, pero mas suave, casi transparente... que esa franja tan grandota
simplemente sea la villa, que la villa sea lo que destaque mas que todo"*.
Los dos cambios y por que funcionan:
1. 🔵 EL FONDO PASA DE ARENA A TURQUESA CASI TRANSPARENTE. La arena era el
unico sitio de la portada con ese color, o sea un acento que no se repetia
en ninguna otra parte del sitio. El turquesa al 6% es de la casa y ademas
**deja de competir con la foto**: la arena es calida y saturada y le
robaba color a la villa.
⚠️ 6% NO ES UN NUMERO CUALQUIERA: las dos secciones que siguen (.cats y
.res) son crema (#f6f2ea). Por debajo del 5% el panel se funde con ellas y
deja de leerse como pieza aparte. Si se toca, comprobarlo contra el crema.
2. 🖼️ DE DOS COLUMNAS A DOS FILAS. El texto va arriba y corto; la foto va
ABAJO Y A TODO EL ANCHO. En dos columnas la foto nunca pasaba de 405 px
con media pantalla de texto al lado, asi que lo que mandaba era el texto.
Ahora la foto ocupa el ancho entero del panel y manda ella.
⛔ Y con el fondo se fue TODO EL ORO de este bloque (rotulo, punto, filete,
brillo difuso, etiqueta sobre la foto). El oro sigue vivo en el resto del
sitio; aqui sobraba porque el argumento ya lo llevan los numeros.
=================================================================== */
.hotd-wrap{padding:64px 0;background:var(--white)}
/* 🔁 VUELVE A DOS COLUMNAS (Carlos, 1 sep 2026): *"la vamos a poner a mano
derecha, la villa como estaba... a la izquierda le vamos a poner la
descripcion"*. Se probo a una sola columna con la foto a todo el ancho y el
problema era de medida, no de gusto: la foto salia a 1133 x 638 px, o sea
**una pantalla entera ella sola**, asi que el titular con los dos precios y
la villa no se veian nunca a la vez. Y el argumento de este bloque es
comparar los dos precios: partido en dos scrolls deja de ser un argumento.
En dos columnas los dos se ven de un golpe. */
.hotd{
display:grid;grid-template-columns:1fr 430px;align-items:center;
border-radius:var(--radius);overflow:hidden;
background:rgba(16,178,194,.06);
border:1.6px solid rgba(16,178,194,.30);
box-shadow:var(--shadow);position:relative;
}
.hotd-cab{padding:40px 20px 40px 42px;color:var(--ink)}
/* --- 🔴 EL ROTULO: ROJO Y CON EL BORDE LATIENDO ---
Carlos: *"el hot deal lo vamos a poner en rojo y con animaciones en los
bordes"*.
⚠️ EL ROJO NO ES DE MARCA Y ESO ES JUSTO POR LO QUE FUNCIONA: es el unico
rojo de todo el sitio, asi que no compite con nada, y "hot deal" es el
lenguaje de alerta que el rojo ya sabe hablar. Estuvo en oro (se lavaba
contra el crema) y en turquesa (se fundia con el panel turquesa de detras,
que es el problema que lo tumbo).
⚠️ EL FILETE VA A 1.6px por la regla de la casa: con `devicePixelRatio` 1,25
un `1px` se pinta a 0,8 y el rojo llega descolorido.
🫀 El latido son DOS PULSOS Y UNA PAUSA, el mismo gesto del buscador del
hero, para que el sitio tenga un solo idioma de movimiento. Un aro continuo
se vuelve papel pintado a los diez segundos; con la pausa vuelve a llamar. */
.hotd-eyebrow{
display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
padding:7px 15px 7px 12px;border-radius:999px;
background:#fff;border:1.6px solid var(--rojo-hot,#cf2e22);
color:var(--rojo-hot,#cf2e22);font-size:.74rem;font-weight:700;
text-transform:uppercase;letter-spacing:.14em;
animation:hotdAro 4.6s ease-out infinite;
}
@keyframes hotdAro{
0% {box-shadow:0 0 0 0 rgba(207,46,34,.55)}
17% {box-shadow:0 0 0 8px rgba(207,46,34,0)}
18% {box-shadow:0 0 0 0 rgba(207,46,34,.55)}
35% {box-shadow:0 0 0 8px rgba(207,46,34,0)}
36%,100%{box-shadow:0 0 0 0 rgba(207,46,34,0)}
}
.hotd-dot{width:8px;height:8px;border-radius:50%;background:var(--rojo-hot,#cf2e22);flex:none;box-shadow:0 0 0 0 rgba(207,46,34,.7);animation:hotdPulse 2.2s infinite}
@keyframes hotdPulse{
0%{box-shadow:0 0 0 0 rgba(207,46,34,.55)}
70%{box-shadow:0 0 0 7px rgba(207,46,34,0)}
100%{box-shadow:0 0 0 0 rgba(207,46,34,0)}
}
@media(prefers-reduced-motion:reduce){.hotd-dot,.hotd-eyebrow{animation:none}}
.hotd-cab h2{
font-family:var(--display);font-weight:700;
font-size:clamp(1.7rem,2.7vw,2.2rem);color:var(--ink);margin:0 0 12px;
letter-spacing:-.015em;line-height:1.12;text-wrap:balance;
}
/* La entradilla lleva los dos precios y nada mas: es lo que Carlos llamo
"una pequena descripcion". */
.hotd-sub{color:var(--ink-soft);line-height:1.65;font-size:1rem;margin:0 0 22px;
max-width:52ch;font-weight:300}
.hotd-sub b{color:var(--ink);font-weight:600}
/* Los datos y el precio, debajo de la descripcion. El filete de arriba los
separa del texto sin meter una caja mas.
⛔ EL PRECIO NO VA EMPUJADO A LA DERECHA CON `margin-left:auto`. Se probo y
quedaba colgado solo en el extremo, a media pantalla de los datos que
explican que es lo que cuesta eso. En columna, los datos y su precio se leen
como una sola cosa, que es lo que son. */
.hotd-datos{display:flex;flex-direction:column;align-items:flex-start;gap:13px;
padding-top:20px;border-top:1px solid rgba(16,178,194,.28)}
/* --- LOS DATOS DE LA VILLA (columna izquierda) --- */
.hotd-specs{display:flex;flex-wrap:wrap;gap:9px 18px}
.hotd-specs span{display:inline-flex;align-items:center;gap:7px;
color:#3c4746;font-size:.92rem}
.hotd-specs span .ico svg{width:16px;height:16px;color:var(--turq,#10b2c2)}
/* Turquesa oscuro: es el color de TODOS los precios del sitio
(.card-price, .modal-price). Coherencia, no decision nueva. */
.hotd-precio{font-family:var(--display);font-weight:700;
font-size:1.68rem;letter-spacing:-.02em;color:var(--ink,#0b0c0d)}
/* --- LA VILLA, A LA DERECHA, CON GALERIA --- */
.hotd-card{
display:flex;flex-direction:column;position:relative;
margin:26px 26px 26px 0;border-radius:14px;overflow:hidden;background:#fff;
box-shadow:0 22px 46px -26px rgba(11,12,13,.55);
}
/* La foto grande es un enlace a la ficha. Proporcion 4:3 y `cover`: la columna
es estrecha y con la proporcion real (16:9) la villa salia en una tira baja. */
.hotd-ph{display:block;overflow:hidden;background:#e8e8e6}
.hotd-ph img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
transition:transform .6s ease}
.hotd-ph:hover img{transform:scale(1.04)}
/* 🖼️ LAS MINIATURAS SE PASAN DE LADO, NO SE APILAN.
Con 10 fotos, una rejilla ocuparia mas alto que la foto grande. En tira con
scroll horizontal caben las que sean y el bloque no crece nunca.
⚠️ `scroll-snap` para que al arrastrar cada foto quede encajada, y la barra
de scroll se deja fina y visible A PROPOSITO: sin ella nadie sabe que hay
mas fotos a la derecha. Un carrusel sin pista de que continua no se usa. */
.hotd-strip{display:flex;gap:6px;padding:8px 10px 4px;overflow-x:auto;
scroll-snap-type:x mandatory;scrollbar-width:thin}
.hotd-strip::-webkit-scrollbar{height:5px}
.hotd-strip::-webkit-scrollbar-thumb{background:rgba(16,178,194,.45);border-radius:3px}
.hotd-mini{flex:none;width:62px;aspect-ratio:4/3;border-radius:7px;cursor:pointer;
background-size:cover;background-position:center;background-color:#e8e8e6;
border:1.6px solid transparent;padding:0;scroll-snap-align:start;
transition:border-color .18s,opacity .18s;opacity:.72}
.hotd-mini:hover{opacity:1}
/* La que se esta viendo lleva el filete de marca: es la unica forma de saber
en cual estas cuando hay diez iguales. */
.hotd-mini.es{opacity:1;border-color:var(--turq,#10b2c2)}
.hotd-vertodo{display:flex;align-items:center;justify-content:center;gap:8px;
margin:6px 14px 14px;padding:11px 16px;border-radius:10px;
background:var(--turq,#10b2c2);color:#fff;text-decoration:none;
font-size:.94rem;font-weight:600;transition:background .2s}
.hotd-vertodo:hover{background:var(--turq-dark,#0b7c87)}
.hotd-vertodo .ico svg{width:14px;height:14px}
@media(max-width:1000px){
/* Una columna: primero la descripcion, despues la villa. */
.hotd{grid-template-columns:1fr}
.hotd-cab{padding:32px 26px 26px}
.hotd-card{margin:0 26px 26px}
.hotd-ph img{aspect-ratio:16/9}
}
@media(max-width:900px){
.rs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.rhero{min-height:0;padding:88px 0 34px}
.rs-grid{grid-template-columns:1fr;gap:15px}
.rsearch{padding:20px 18px 18px}
.rs-acc{justify-content:stretch}
.rs-adv,.rs-go{flex:1;justify-content:center;text-align:center}
.hotd-wrap{padding:44px 0}
.hotd-cab{padding:26px 18px 22px}
.hotd-card{margin:0 14px 14px}
/* 📱 EL PRECIO PIERDE EL `margin-left:auto` Y SE PONE DEBAJO: en 390 px, los
cuatro datos ("3 habitaciones · 3.5 banos · Casa Linda · Totalmente
amueblada") ya ocupan dos renglones, y con el precio empujando a la derecha
quedaba colgado solo en una tercera linea. */
.hotd-datos{flex-direction:column;align-items:flex-start;gap:12px}
.hotd-precio{margin-left:0;font-size:1.4rem}
}
/* ===================================================================
FICHAS DE CATEGORIA - patron del sitio modelo, acabado de lujo
Titulo centrado + boton con borde debajo, ambos al centro.
=================================================================== */
/* 🚨 CUADRADO DE 285 px. CINCO MEDIDAS PROBADAS, EN ESTE ORDEN, Y EL CAMINO
EXPLICA EL NUMERO FINAL:
218 × 340 (vertical, 5 col) .. *"la vaina muy chiquita; en realtordr las
fotos están más grandes, más lujoso"*.
381 × 381 (cuadrado, 3 col) .. *"lo puse muy grande, que no ocupe tanto
espacio"*.
381 × 286 (4:3, 3 col) ....... la medida de realtordr. Aún grande.
381 × 238 (16:10, 3 col) ..... *"para los lados todavía está muy largo"*.
285 × 285 (cuadrado, 4 col) .. ✅ *"encuádralo, que tenga lo mismo de
largo y lo mismo de alto"*.
👉 LA LECCION: se estuvo bajando el ALTO cuando lo que sobraba era el ANCHO.
Achatar una tarjeta ancha la hace parecer más larga, no más pequeña. Lo que
Carlos pedía era **reducir la pieza entera y volver al cuadrado**, y eso se
hace con una columna más, no con la proporción.
⚠️ Con 5 elementos quedan 4 arriba y 1 abajo. Se asume: la alternativa era
3+2 con tarjetas de 381, que ya se descartó por grandes.
⚠️ `aspect-ratio` en vez de `height` fija: el alto lo manda el ancho de la
columna y el cuadrado se respeta en cualquier pantalla. */
/* 🔲 Esquina de 14 px, la misma que `.comtile` y que los botones grandes.
Ver el porqué completo en el comentario de `.comtile`. Las dos comparten
la rejilla de la portada: si se toca una, se toca la otra. */
.cattile{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;
box-shadow:0 10px 34px rgba(16,28,30,.13);transition:transform .5s cubic-bezier(.2,.6,.2,1),box-shadow .5s}
.cattile:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(16,28,30,.24)}
.cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.cattile:hover img{transform:scale(1.07)}
/* velo: mas oscuro abajo para que el texto siempre se lea */
.cattile::after{content:"";position:absolute;inset:0;z-index:1;transition:background .5s;
background:linear-gradient(180deg,rgba(14,24,26,.16) 0%,rgba(14,24,26,.30) 45%,rgba(14,24,26,.66) 100%)}
.cattile:hover::after{background:linear-gradient(180deg,rgba(14,24,26,.34) 0%,rgba(14,24,26,.46) 45%,rgba(14,24,26,.74) 100%)}
/* 🔵 FILETE INTERIOR EN TURQUESA DE MARCA, YA NO EN ORO (Carlos, 2 sep 2026:
*"quita el amarillo de oro y ponlo similar a como lo pusimos en Community"*).
⚠️ El oro que había ni siquiera era el oficial: `rgba(212,175,110)`, uno de
los oros inventados que quedaban pendientes. Mismo caso que en `.comtile`.
🚨 1.6px por la regla de la casa: con dpr 1,25 un `1px` se pinta a 0,8. */
.cattile::before{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;
border:1.6px solid rgba(16,178,194,0);transition:border-color .5s,inset .5s}
.cattile:hover::before{border-color:var(--turq,#10b2c2)}
/* 📐 EL NOMBRE ARRIBA Y EL BOTON EN EL MEDIO (Carlos, 2 sep 2026: *"pon el
nombre de la comunidad arriba y el View Community en el medio"*).
👉 Antes los dos vivían abajo, apilados sobre la parte más oscura del velo.
Separados, cada uno ocupa su tercio y **la foto se ve en medio en vez de
quedar tapada por un bloque de texto de 100 px**. Es justo lo que hace que
estas fichas se lean como una portada y no como un pie de foto. */
/* Con la tarjeta a ~390 px la letra puede crecer: a 1.32rem se veía perdida
dentro de tanta foto. `clamp` para que en el móvil no se desborde. */
.cattile .tile-label{position:absolute;left:0;right:0;top:22px;z-index:3;
text-align:center;color:#fff;font-family:var(--display);
font-size:clamp(1.3rem,1.9vw,1.62rem);font-weight:700;letter-spacing:.005em;line-height:1.18;
padding:0 18px;text-shadow:0 2px 18px rgba(0,0,0,.5);
transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.cattile:hover .tile-label{transform:translateY(-4px)}
/* 🚨 AL 62% Y NO AL 50%: con el nombre arriba y la tarjeta ya cuadrada, en el
centro exacto el botón se monta encima de los nombres de dos líneas. Medido
en pantalla. El centro óptico de una tarjeta con texto arriba no es el
centro geométrico. */
.cattile .tile-view{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);z-index:3;
display:inline-flex;align-items:center;gap:8px;
padding:12px 30px;border:1.6px solid rgba(255,255,255,.72);border-radius:2px;
background:transparent;color:#fff;
font-family:'Poppins',sans-serif;font-size:.75rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
opacity:1;transition:background .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.2,.6,.2,1)}
.cattile:hover .tile-view{transform:translate(-50%,-50%) scale(1.04)}
/* Al pasar el ratón se llena de turquesa de marca con la letra en blanco, igual
que el botón de las tarjetas de comunidad. Las dos rejillas hablan igual. */
.cattile .tile-view:hover,.cattile:hover .tile-view{background:var(--turq,#10b2c2);border-color:var(--turq,#10b2c2);color:#fff}
.cattile .tile-view .ico{display:none} /* el modelo no lleva icono: solo la palabra */
/* 🚨 AQUI NO PUEDE HABER `height`, Y ES EL FALLO QUE CARLOS CAZÓ EN EL TELÉFONO
(3 sep 2026): *"está muy para la izquierda, no coge el tamaño"*.
Estas dos líneas decían `height:290px` y `height:250px`, de cuando las
tarjetas eran verticales de altura fija. El 2 sep pasaron a ser CUADRADAS
con `aspect-ratio:1`, y nadie quitó los `height`.
👉 CON `aspect-ratio` Y `height` A LA VEZ, MANDA LA ALTURA: el navegador
calcula el ancho a partir de ella. O sea que la tarjeta se quedaba en
250 px de ancho **dentro de una rejilla de 323**, pegada a la izquierda y
dejando 73 px de hueco muerto a la derecha. Medido en la vista de teléfono.
⚠️ Un `height` y un `aspect-ratio` juntos no dan error ni avisan: uno gana
en silencio. Al cambiar la forma de una tarjeta hay que ir a buscar los
`height` que quedaron en las media queries.
⛔ Fuera también los `bottom` (96, 88, 38 px): el nombre vive ahora en
`top:22px` y el botón en `top:60%`, así que no hacían nada. Eran ruido que
escondía el `height` de al lado.
✅ Se queda solo lo que sí es de móvil: bajar el cuerpo de la letra. */
@media(max-width:900px){ .cattile .tile-label{font-size:1.5rem} }
@media(max-width:600px){ .cattile .tile-label{font-size:1.38rem} .cattile .tile-view{padding:10px 26px} }
/* =================== PAGINA DE CONTACTO (19 ago 2026) ===================
Cabecera sin foto a proposito: aqui no se viene a mirar, se viene a
escribir. Cuanto antes se vea el formulario, mejor. */
.pghero{background:linear-gradient(150deg,#fdfbf5 0%,#faf5e9 100%);
border-bottom:1px solid rgba(11,12,13,.08);
padding:150px 0 46px}
.pghero h1{font-family:var(--display);font-weight:700;color:var(--ink,#0b0c0d);
font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px}
.pghero p{color:#5b6462;font-size:1.03rem;line-height:1.65;max-width:56ch;margin:0}
/* El formulario manda: 1fr contra 340px, y en el orden de lectura va
primero. Los datos directos al lado, para quien prefiera llamar. */
.cont-grid{display:grid;grid-template-columns:1fr 340px;gap:38px;
align-items:start;margin-bottom:62px}
.cont-form{border:1px solid rgba(11,12,13,.09);box-shadow:0 24px 60px -34px rgba(10,30,28,.35)}
/* correo y telefono comparten fila en pantalla grande */
.cont-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cont-botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.cont-nota{margin:16px 0 0;font-size:.78rem;color:#8a938f;line-height:1.5}
.cont-aviso{margin:4px 0 0;font-size:.86rem;font-weight:500;color:#0b7c5f}
.cont-aviso.mal{color:#b23c26}
/* ---- tarjeta de datos directos ---- */
.cont-info{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.cont-card{display:flex;align-items:center;gap:14px;padding:18px 20px;
background:linear-gradient(150deg,#fdfbf5,#faf5e9);
border:1px solid rgba(16,178,194,.4);border-radius:16px}
.cont-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
border:3px solid #fff;box-shadow:0 8px 20px -8px rgba(10,30,28,.5)}
.cont-card b{display:block;font-size:.98rem;color:var(--ink,#0b0c0d);line-height:1.25}
.cont-card small{display:block;margin-top:3px;font-size:.68rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.cont-lista{list-style:none;margin:0;padding:0;
border:1px solid rgba(11,12,13,.09);border-radius:16px;background:#fff;overflow:hidden}
.cont-lista li{display:flex;align-items:flex-start;gap:13px;padding:15px 20px}
.cont-lista li + li{border-top:1px solid rgba(11,12,13,.07)}
.cont-lista .ico{flex:none;width:19px;height:19px;color:var(--turq);margin-top:2px}
.cont-lista small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:#96a09d;margin-bottom:3px}
.cont-lista a{color:var(--ink,#0b0c0d);font-weight:500;text-decoration:none}
.cont-lista a:hover{color:var(--turq)}
.cont-lista span:not(.ico){color:#4f5856;font-size:.92rem;line-height:1.45}
.cont-idiomas{display:flex;align-items:center;gap:10px;padding:14px 18px;
border-radius:14px;background:rgba(16,178,194,.08);
font-size:.86rem;color:#3f4a48}
.cont-idiomas .ico{flex:none;width:18px;height:18px;color:var(--turq)}
@media(max-width:900px){
.cont-grid{grid-template-columns:1fr;gap:26px}
/* En telefono los datos directos van DEBAJO del formulario y sin pegarse
arriba: `sticky` en movil tapa contenido al deslizar. */
.cont-info{position:static}
.pghero{padding:120px 0 34px}
}
@media(max-width:560px){
.cont-dos{grid-template-columns:1fr;gap:0}
.cont-form{padding:24px 20px}
.cont-botones .btn{flex:1 1 100%;justify-content:center}
}
/* ============ EQUIPO Y VENDER (19 ago 2026) ============
Comparten rejilla y tarjetas a proposito: un solo CSS que mantener.
Las tarjetas son de HECHOS del negocio, no de promesas: nada de
"los mejores" ni "líderes del mercado", que a un comprador
extranjero desconfiado eso le suena a folleto. */
/* ---- la ficha de la persona ---- */
.eq-ficha{display:grid;grid-template-columns:300px 1fr;gap:44px;
align-items:start;margin-bottom:62px}
.eq-foto img{width:100%;height:auto;border-radius:20px;display:block;
box-shadow:0 26px 60px -30px rgba(10,30,28,.6)}
.eq-texto h2{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.3rem);
font-weight:700;color:var(--ink,#0b0c0d);margin:0 0 6px;line-height:1.1}
.eq-cargo{display:block;margin-bottom:20px;font-size:.72rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eq-texto p{color:#4f5856;line-height:1.8;font-size:1rem;margin:0 0 16px;max-width:62ch}
.eq-datos{list-style:none;margin:26px 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
border:1px solid rgba(11,12,13,.09);border-radius:16px;overflow:hidden;background:rgba(11,12,13,.09)}
.eq-datos li{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;background:#fff}
.eq-datos .ico{flex:none;width:19px;height:19px;color:var(--turq);margin-top:2px}
.eq-datos small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:#96a09d;margin-bottom:3px}
.eq-datos a{color:var(--ink,#0b0c0d);font-weight:500;text-decoration:none}
.eq-datos a:hover{color:var(--turq)}
.eq-datos span:not(.ico){color:#4f5856;font-size:.92rem}
.eq-botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* Bloque con el titular centrado (Carlos, 20 ago 2026). Las tarjetas
siguen alineadas a la izquierda: centrar párrafos largos los hace
difíciles de leer, solo se centra la cabecera. */
.cblock-centro > h2,.cblock-centro > .csub{text-align:center;
margin-left:auto;margin-right:auto}
/* SIN max-width y con `vw` alta: el titular se estira A LO LARGO y cae en
UNA sola línea (Carlos, 20 ago 2026). Con 22ch se partía en tres y se
veía como una columna estrecha en medio de la página.
⚠️ Si se alarga el texto, volver a medir que siga cabiendo en una línea. */
/* Al acortar el titular puede ir MUCHO más grande, que es de donde sale
la sensación de lujo: menos palabras, más tamaño, más aire. */
.cblock-centro > h2{max-width:none;white-space:nowrap;
font-size:clamp(1.5rem,4.35vw,3.5rem);line-height:1.12;letter-spacing:-.025em}
/* ---- variante para titulares de línea LARGA ----
El tamaño de arriba está calculado para frases cortas tipo "Somos tu
aliado estratégico". Con una línea de unos 43 caracteres, a 4.35vw el
texto mide MAS que su propia caja (medido: 1197 px de texto en una caja
de 1188) y, como lleva `nowrap`, no se encoge: se sale por el lado.
⚠️ Y no basta con bajar el tope en rem, porque el problema no aparece
solo en pantalla ancha: el `vw` crece más rápido que la caja, así que
por debajo de ~1290 px de ventana se sale igual. Hay que bajar LOS DOS,
el `vw` y el tope.
Con 3.2vw la frase larga ocupa ~992 px dentro de los 1188 y queda aire
por los dos lados a cualquier ancho.
👉 Va en su propia clase, NO en la regla de arriba: vender.html usa el
mismo `.cblock-centro` con titulares cortos y allí el tamaño grande es
justo lo que Carlos aprobó. */
.cblock-centro > h2.h2-linealarga{font-size:clamp(1.4rem,3.2vw,2.9rem)}
.cblock-centro > .csub{max-width:52ch;margin-bottom:40px;font-size:1.02rem}
/* ⚠️ ESTA LÍNEA ESTUVO FINA (peso 300, gris suave) Y CARLOS LA CAMBIÓ: la
quiere "en negrita, bien reluciente y llamativa". Deja de ser una nota
al pie del titular y pasa a ser la segunda frase que se lee.
Sube de 16 a 22px, de peso 300 a 600 y de gris a tinta. */
.csub-lujo{font-size:clamp(1.05rem,1.6vw,1.38rem);font-weight:600;
letter-spacing:-.005em;line-height:1.5;color:var(--ink,#0b0c0d);margin-top:18px}
/* ---- párrafo justificado de "quiénes somos" (solo comprar.html) ----
Carlos, 24 ago 2026: "que la letra esté del mismo largo todo, que sea un
párrafo del mismo largo todo, con lo importante resaltado".
`justify` cuadra el bloque por los dos lados y `text-align-last:center`
deja la última línea centrada. Sin eso, la última línea queda suelta a la
izquierda y rompe la simetría de toda la sección, que va centrada.
⚠️ `hyphens:auto` NO ES OPCIONAL AQUI. Justificado y sin partir palabras,
el navegador estira los espacios para cuadrar y aparecen "ríos" blancos
atravesando el párrafo: es lo contrario del acabado caro que se busca.
⚠️ Sube de 52ch a 58ch por lo mismo: cuanto más estrecha la columna,
menos palabras por línea y peores los ríos al justificar.
Va en su propia clase y no en `.csub-lujo` porque esa la comparten
vender.html y el bloque de testimonios, donde el texto es corto y
justificar no aporta nada. */
.cblock-centro > .csub.csub-parrafo{max-width:66ch;
text-align:justify;text-align-last:center;hyphens:auto;line-height:1.72}
/* ---- LA PLACA ----
Carlos, 24 ago 2026: "que no se vea ahí tan vacío, como letras simples".
El texto estaba bien pero flotaba en medio del crema, sin nada que lo
sostuviera, y por eso se leía barato.
👉 NO se inventa un estilo nuevo: es exactamente el acabado de las fichas
`.eq-card` (crema en degradado, filo turquesa de un píxel y un segundo
filo por dentro a 5 px). Ese doble filo es el truco de las cosas caras:
imita el bisel de un marco y cuesta un `::before`.
⛔ NADA DE RAYITAS DECORATIVAS a los lados del texto. Carlos las tiene
fichadas como tic de IA y las manda quitar siempre. El lujo aquí lo dan
el aire y el filo, no un adorno.
⚠️ El ancho sube de 58ch a 66ch porque el `box-sizing` es border-box y el
relleno se come la columna: sin subirlo, el texto queda más estrecho que
antes y aparecen ríos al justificar. */
.csub-placa{position:relative;border-radius:20px;padding:38px 46px 36px;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 22px 50px -36px rgba(10,30,28,.55);margin-top:30px}
.csub-placa::before{content:"";position:absolute;inset:5px;border-radius:15px;
pointer-events:none;border:1px solid rgba(16,178,194,.15)}
/* ---- EL SUBRAYADO DE LAS PRUEBAS ----
La idea del subrayado es de Carlos y aquí resuelve algo real: el párrafo
entero ya va en peso 600, así que la negrita sola casi no se despegaba.
⚠️ NO se usa `text-decoration:underline`. El navegador lo pinta pegado a
la letra y atravesando las colas de la "y", la "j" y la "g": se ve
barato y es lo primero que delata un sitio hecho a la carrera.
👉 Se pinta un degradado de 2 px colocado al 92% de la altura de la
línea. Queda separado de la letra, no toca ninguna cola y se puede dar
el color y el grosor exactos.
`box-decoration-break:clone` es obligatorio: sin él, cuando una de estas
frases se parte entre dos líneas (y se parten, el párrafo va justificado
y con guiones), el trazo solo aparece en el primer trozo.
El turquesa va al 55% y no lleno: aquí compite con el titular, y a plena
fuerza le robaría protagonismo. Y por eso la negrita baja de 800 a 700,
porque ahora el que marca es el trazo, no el peso. */
.csub-parrafo b{font-weight:700;color:var(--ink,#0b0c0d);
background:linear-gradient(rgba(16,178,194,.55),rgba(16,178,194,.55))
0 92%/100% 2px no-repeat;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:640px){
/* En móvil la columna es estrecha y justificar solo produce ríos.
Se vuelve a centrado, que a ese ancho se ve mejor. */
.cblock-centro > .csub.csub-parrafo{text-align:center;hyphens:manual}
/* La placa se estrecha, si no el texto queda en un canal de nada. */
.csub-placa{padding:26px 20px 24px;border-radius:16px}
}
/* ⚠️ TODA EN NEGRO. Llevó turquesa en un trozo y se quitó (Carlos, 20 ago
2026): en esa pantalla ya hay dos titulares a dos colores y una cuarta
frase con color dejaba el turquesa sin fuerza. Si todo destaca, nada
destaca. El color se reserva para los TITULARES. */
.csub-lujo .hl{color:inherit;font-weight:inherit}
/* El titular arranca justo debajo de la franja crema, sin el hueco de
62px que trae `.cbody` por defecto. Solo en las páginas cuya cabecera
es la centrada, o sea Vender. */
.pghero-centro + .cbody{padding-top:40px}
/* En pantalla estrecha el `nowrap` no cabe de ninguna manera: se deja
fluir en varias líneas, que ahí es lo correcto. */
@media(max-width:820px){
.cblock-centro > h2{white-space:normal;font-size:clamp(1.45rem,4.6vw,2rem)}
}
/* ---- las tarjetas de "por qué" / "lo que hacemos" ---- */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
/* CENTRADAS (Carlos, 20 ago 2026: "que estén centradas todas del mismo
largo, no desorganizadas"). `align-items:center` alinea el icono y el
rótulo, y `justify-content` no hace falta porque las cinco tarjetas de
la fila ya se estiran igual. */
/* ⛔ Estas tarjetas llevaron primero un NÚMERO GIGANTE en la esquina y
después un rótulo "PASO 1". Carlos quitó los dos: *"ese paso 1 ya no
atrae, olvidemos los pasos, dejemos solo el icono"*. NO reponerlos.
El lujo aquí viene del BORDE DOBLE dorado (el mismo gesto que el resto
del sitio) sobre blanco, con la sombra justa para que la tarjeta
flote un poco sin parecer un botón. */
/* ⛔ Estas tarjetas eran BLANCAS con filete dorado y Carlos las tumbó
(20 ago 2026): "están muy pobres, se ven muertas ahí y dañan el sitio;
llévalas al mismo nivel que 'Primero la confianza'". Ahora comparten
material con `.filo`: el MISMO crema y el turquesa de marca en vez del
dorado. La sección entera se lee como una sola pieza. */
.eq-card{position:relative;border-radius:18px;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 20px 46px -32px rgba(10,30,28,.55);
padding:30px 26px 28px;text-align:center;
display:flex;flex-direction:column;align-items:center;
transition:transform .25s,box-shadow .25s,border-color .25s}
/* el filete interior: el detalle que lo hace ver caro */
.eq-card::before{content:"";position:absolute;inset:5px;border-radius:13px;
pointer-events:none;border:1px solid rgba(16,178,194,.15)}
.eq-card > *{position:relative;z-index:1}
.eq-card:hover{transform:translateY(-4px);border-color:rgba(16,178,194,.62);
box-shadow:0 26px 54px -28px rgba(10,30,28,.45)}
/* ⭐ EL DISCO VA MACIZO EN TURQUESA, con el icono en crema recortado.
Antes era un turquesa al 9% y el icono se perdía: eso era lo que hacía
que la tarjeta pareciera muerta. Un disco de color por tarjeta le da
ancla a la fila entera. */
.eq-card > .ico{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
background:var(--turq);color:#fffdf8;
box-shadow:0 12px 22px -12px rgba(16,178,194,.5);margin-bottom:20px;
transition:transform .25s}
.eq-card:hover > .ico{transform:translateY(-1px) scale(1.04)}
.eq-card > .ico svg{width:31px;height:31px}
/* El título EN UNA SOLA LÍNEA y más grande (Carlos, 20 ago 2026). Sin
`max-width`, con `nowrap` y una `vw` que lo escala junto con la tarjeta,
que también crece con la ventana. ⚠️ Si se alarga un título, hay que
medir que siga entrando; el más largo hoy es el del paso 3. */
/* Los cinco títulos van en TURQUESA a propósito: el turquesa suelto en una
frase parece un subrayador; repetido en los cinco es el sistema de color
del sitio. No compite con el titular de la sección porque ese mide 56px
y estos 18: se leen como familia, no como pelea. */
.eq-card h3{font-size:clamp(.98rem,1.24vw,1.16rem);font-weight:700;
color:var(--turq);margin:0 0 12px;line-height:1.3;
max-width:none;white-space:nowrap;letter-spacing:-.015em}
/* JUSTIFICADO (Carlos: "que el mismo largo de abajo sea el mismo largo de
arriba, que no estén dislocadas"). Todas las líneas llegan a los dos
bordes y la última se centra, que en una tarjeta centrada es lo que
cierra bien. `hyphens` evita los huecos grandes entre palabras, que es
lo que afea un justificado en columna estrecha. */
/* Tinta casi negra y peso 500, NO negrita: el gris claro se leía como letra
pequeña de contrato y por eso parecía texto de relleno. Cinco líneas en
negrita de verdad se leerían peor y parecerían un aviso. */
.eq-card p{margin:0;color:var(--ink,#0b0c0d);font-size:.945rem;line-height:1.7;
font-weight:500;text-align:justify;text-align-last:center;hyphens:auto}
/* ---- segunda llamada al embudo, debajo de las seis fichas ----
Sin caja ni fondo a propósito: es un respiro, no otra sección. Lo único
que se ve es la frase y el botón, que ya se mueve solo (`.btn-brilla`). */
.cta-medio{margin-top:44px;text-align:center}
.cta-cierre{margin-top:56px}
/* Las vías directas del cierre necesitan más aire que dentro de una ficha:
allí van pegadas a dos botones pequeños, aquí cuelgan de un botón grande y
con 18px se leían como parte de él. Y `padding-bottom` porque debajo empieza
el pie negro de golpe: sin ese respiro las pastillas quedan cortadas contra
el borde. */
.cta-cierre .cta-directo{margin-top:30px;padding-bottom:6px}
/* ---- titular de los socios ----
Va CENTRADO y del mismo tamaño que el de la filosofía a propósito:
empieza con "Y lo hacemos junto a...", o sea que es la continuación de
aquella frase y tiene que pesar igual, no menos.
`text-wrap:balance` reparte las dos líneas por igual; sin él la segunda
quedaba con tres palabras sueltas y parecía un error. */
/* ⚠️ EL TITULAR DEL EQUIPO COMPARTE ESTA REGLA A PROPOSITO (Carlos, 28 ago
2026: "del mismo largo y del mismo tamaño de letra que el de las
instituciones, con dos colores, para que se vea un titulo real").
Van juntos en el mismo selector y NO copiados en dos sitios: si alguien
toca el tamaño de uno, el otro le sigue solo. Son las dos ultimas
secciones de la pagina y desnivelarlas se nota al instante. */
.tp-bloque > h2,
.eqv > h2{max-width:40ch;margin:0 auto 32px;text-align:center;
text-wrap:balance;font-size:clamp(1.3rem,2.85vw,2.25rem);
line-height:1.2;letter-spacing:-.022em}
/* ---- LA FILOSOFÍA ----
⚠️ NO lleva el estilo de las tarjetas (blanco con filete dorado) A
PROPÓSITO. Carlos, 20 ago 2026: "ese estilo ya se lo pusiste a las
fichas, aquí no cuadra; que quien lo lea tenga que detenerse a leer".
Es el ÚNICO bloque oscuro de toda la página, y esa es toda la idea:
rompe el ritmo de la pantalla y el ojo se para solo. Sobre negro, el
turquesa de "confianza" y el filete dorado se leen como una joyería. */
/* ⛔ Este bloque fue NEGRO y Carlos lo tumbó (20 ago 2026): "ese fondo
negro no le pega, arropa mucho y quita la buena visibilidad". Va en
CREMA, casi el mismo de la página, solo un punto más claro para que
levante. **No volver a proponer fondo oscuro aquí.**
Lo que lo mantiene vivo es el BORDE, no el fondo. */
.filo{position:relative;overflow:hidden;isolation:isolate;
max-width:920px;margin:0 auto;border-radius:22px;
box-shadow:0 26px 60px -40px rgba(10,30,28,.55);
padding:58px 54px 56px;text-align:center}
/* El borde que da vueltas, en TURQUESA de marca. Es un cuadrado más grande
que la caja, con un degradado cónico, girando; `overflow:hidden` lo
recorta a la forma del panel y `::after` lo tapa dejando solo 1,6 px de
filete. Es el mismo gesto del aro de la foto de Carlos, aplicado a un
rectángulo. Frase gancho = tiene que respirar. */
.filo::before{content:"";position:absolute;top:50%;left:50%;
width:165%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;
background:conic-gradient(from 0deg,
rgba(16,178,194,.26) 0deg,rgba(16,178,194,.26) 188deg,
rgba(16,178,194,.62) 258deg,#3ed2e2 308deg,#b6f0f7 330deg,
rgba(16,178,194,.62) 348deg,rgba(16,178,194,.26) 360deg);
animation:filo-gira 7s linear infinite}
@keyframes filo-gira{to{rotate:1turn}}
/* El relleno crema, que deja el filete asomando por los cuatro lados. */
.filo::after{content:"";position:absolute;inset:1.6px;border-radius:20.4px;
z-index:1;pointer-events:none;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%)}
.filo > *{position:relative;z-index:2}
.filo h2{max-width:none;margin:0 0 26px;color:var(--ink,#0b0c0d);white-space:nowrap;
font-size:clamp(1.3rem,2.85vw,2.2rem);line-height:1.15;letter-spacing:-.025em}
/* ⚠️ `text-wrap:balance` añadido el 1 sep 2026: Carlos vio que los renglones
salían "uno de un largo y otro de otro" y pidió que quedaran parejos. El
navegador reparte las palabras para igualarlos en vez de llenar cada línea
hasta el borde.
📌 Ojo: solo actúa en párrafos cortos. Estos dos están en el límite; si
alguien los alarga, dejará de funcionar y volverán los renglones desiguales.
🔁 La misma regla está en `.masq-filo p` de comprar.html. Van juntas. */
.filo p{margin:0 auto;max-width:56ch;color:var(--ink,#0b0c0d);font-weight:500;
font-size:clamp(1rem,1.42vw,1.12rem);line-height:1.8;text-wrap:balance}
.filo p + p{margin-top:20px}
/* Lo resaltado va en NEGRO más fuerte, no en turquesa: aquí el turquesa es
solo de "confianza" y del borde. Dos cosas destacando a la vez se anulan. */
.filo b{color:var(--ink,#0b0c0d);font-weight:700}
/* "Que la letra se le mueva algo" (Carlos): sube y aparece al entrar en
pantalla, escalonado. Se dispara con la clase `.visto`, que pone
`paginas.js` con un IntersectionObserver. Sin JS el bloque se ve igual,
porque `.filo` sin `.visto` solo afecta a `.fu`. */
.filo .fu{opacity:0;transform:translateY(15px);
transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.filo.visto .fu{opacity:1;transform:none}
.filo.visto .fu:nth-child(2){transition-delay:.15s}
.filo.visto .fu:nth-child(3){transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
.filo::before{animation:none}
.filo .fu{opacity:1;transform:none;transition:none}
}
@media(max-width:820px){
.filo{padding:38px 24px 36px;border-radius:18px}
.filo h2{white-space:normal;font-size:clamp(1.28rem,5vw,1.8rem)}
}
/* ---- la puerta directa, debajo de los tres botones ----
Deliberadamente DISCRETA: enlace subrayado fino, no botón. Si compitiera
en peso con los tres de arriba se llevaría a los indecisos por el camino
que no deja ni motivo ni presupuesto. Tiene que ser visible para el que
ya venía decidido a escribir, e invisible para el que todavía está
eligiendo. De ahí el gris y el tamaño pequeño: se lee, no se grita. */
/* =====================================================================
"MÁS QUE AGENTES INMOBILIARIOS" · solo comprar.html
---------------------------------------------------------------
Dos columnas: antes de firmar / después de firmar. La estructura es el
argumento, así que el diseño solo tiene que dejarla leer.
👉 AQUI LOS ICONOS VAN DESNUDOS, SIN EL DISCO TURQUESA. No es olvido:
los discos rellenos ya los llevan los botones gancho y las fichas de
vender.html. Ocho discos macizos aquí convertirían la sección en una
pared de círculos, y ademas competirian con los botones del embudo que
viene justo debajo. Un icono limpio a línea se lee como una lista
editorial, que es lo que esto es.
===================================================================== */
/* ---- el equipo dentro de vender.html ----
Va suelto, NO dentro de `.cblock-centro`, y es a proposito: esa clase le
pone `white-space:nowrap` a sus h2 y este titular se saldria de la
pantalla. Reutiliza `.masq-h2`, que ya viene centrado y con `text-wrap:
balance`, y `.eq-fotos` para las tres tarjetas, asi que hereda gratis el
alto igualado, el brillo escalonado de los botones y el apilado en movil.
El margen de arriba es amplio porque encima queda el panel de la
filosofia, que lleva su propio borde girando: pegarlos ensuciaria los
dos. */
/* ⚠️ EL MARGEN DE ARRIBA ES GRANDE A PROPOSITO (Carlos, 28 ago 2026: "está
muy pegado a las fichas de las biografías y a los partners").
Encima queda la fila de logos de bancos y bufetes, que es visualmente
ligera —logos sueltos sobre crema— y sin un hueco de verdad las caras se
le montaban encima y parecian parte de la misma fila. 104 px lo separa
en dos secciones distintas sin necesidad de una linea ni un fondo. */
.eqv{margin-top:104px}
.eqv .eq-fotos{margin-top:46px}
@media(max-width:860px){ .eqv{margin-top:70px} }
.masq{margin-top:78px}
/* ⚠️ EL BLOQUE DE INSTITUCIONES QUE VA DESPUES NECESITA SU AIRE (1 sep 2026).
En vender.html el `.tp-bloque` viene detras del panel `.filo`, que trae su
propio margen; en comprar.html viene detras de `.masq`, que no lo tiene, y
el titular "Y lo hacemos junto a las instituciones..." quedaba PEGADO a la
ultima ficha de la columna. Se veia como si formara parte de ella. */
.masq + .tp-bloque{margin-top:78px}
/* ⚠️ `max-width` sube a 26ch desde que el titular es "Comprar es un día /
Vivir con la villa son años": con 22ch la segunda linea se partia en tres.
El margen inferior sube a 34 porque ya no hay subtitulo debajo que separe
del contenido. */
/* ---- La filosofía, debajo del titular ----
🚨 COPIA EXACTA DEL TRATAMIENTO DE `.filo p` EN vender.html, Y NO ES
OPCIONAL. Carlos lo cazó el 1 sep 2026: "en la de Vender tú la pusiste en
negrita; siempre analiza todo, porque debe haber coherencia".
Aquí estaba en gris #4a4b4c y peso 400, y allí va en NEGRO y peso 500. Son
los dos párrafos de filosofía del sitio y tienen que pesar lo mismo: si uno
se lee como nota al pie y el otro como declaración, la marca suena a dos
voces distintas.
👉 Los valores están calcados a mano y no heredados a propósito: `.filo`
vive dentro de un panel con borde y aquí no hay panel, así que compartir la
regla obligaría a arrastrar el panel entero.
🔁 SI SE TOCA `.filo p` EN vender.html, TOCAR TAMBIÉN ESTA.
⚠️ `text-wrap:balance` es lo que iguala el largo de los renglones, que es
lo otro que pidió Carlos ("quiero que estén todas del mismo largo"). Solo
funciona con párrafos cortos: por eso el texto de aquí se redujo a una sola
frase. En un párrafo de cinco líneas el navegador deja de balancear.
⚠️ `max-width` en ch y no en px: lo que hace legible un párrafo centrado es
el número de caracteres por línea, no su ancho en píxeles. */
.masq-filo{max-width:56ch;margin:0 auto 44px;text-align:center}
.masq-filo p{margin:0 0 14px;color:var(--ink,#0b0c0d);font-weight:500;
font-size:clamp(1rem,1.42vw,1.12rem);line-height:1.8;text-wrap:balance}
.masq-filo p:last-child{margin-bottom:0}
/* Lo resaltado sube a 700, igual que `.filo b` en Vender. Y en negro, no en
turquesa: dos cosas destacando a la vez se anulan. */
.masq-filo strong{color:var(--ink,#0b0c0d);font-weight:700}
/* ⚠️ `max-width` en 34ch: con 26 la primera frase ("Estamos desde tu primera
pregunta", 33 caracteres) se partia en dos y el titular salia en TRES
lineas en vez de dos. La gracia de un titular a dos colores es que cada
color ocupe su propia linea; en tres se deshace.
🔁 Si se cambia el texto del titular, contar los caracteres de la frase mas
larga y dejar este numero un par de puntos por encima. */
.masq-h2{text-align:center;max-width:34ch;margin:0 auto 20px;text-wrap:balance;
font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.025em}
/* 🚨 ESTO NO ES DECORATIVO: hace que la segunda mitad caiga SIEMPRE en su
propia linea sin depender del
. En este proyecto ya paso que al
esconder un
en movil las dos mitades quedaban pegadas y sin espacio
entre ellas ("día.Vivir"), porque el salto de linea ERA la separacion. */
.masq-h2 .hl{display:block}
/* ⛔ `.masq-sub` ya no se usa: el subtitulo se quito el 31 ago 2026 porque
hablaba de la competencia. La regla se deja por si vuelve a hacer falta en
otro bloque, pero NO se repone aqui solo por llenar el hueco. */
.masq-sub{text-align:center;max-width:46ch;margin:0 auto;
font-size:clamp(1rem,1.5vw,1.24rem);font-weight:600;line-height:1.5;
color:var(--ink)}
/* ⚠️ EL BLOQUE VA ESTRECHADO Y CENTRADO, NO A TODO EL ANCHO DEL WRAP
(Carlos, 26 ago 2026: "las dos columnas están muy a la izquierda; que
estén a la misma distancia de margen a derecha e izquierda").
El problema no era que estuvieran descentradas —el grid ocupaba el wrap
entero, o sea 1200 px— sino que OCUPABAN DEMASIADO. A ese ancho el texto
llega hasta el filo de la pantalla y desaparece la sensacion de margen,
mientras el titular de encima sí esta acotado a 22ch. El ojo compara las
dos cosas y lee el bloque de abajo como "corrido hacia fuera".
Con 1000 px y `margin auto` quedan unos 100 px de aire a cada lado y las
columnas caen debajo del titular en vez de escaparse por los lados. */
.masq-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 60px;
max-width:1000px;margin:52px auto 0}
/* El rótulo de cada columna copia el tratamiento del cargo de las fichas
(mayúsculas pequeñas en turquesa) para que se lea como parte del mismo
sistema y no como un titular más. */
/* ---- El titular de las dos columnas ----
⚠️ MAS PEQUEÑO QUE `.masq-h2` A PROPOSITO, y esa jerarquia es lo que hace
que el bloque funcione: encima hay un titular grande y un párrafo de
filosofía. Tres piezas al mismo tamaño se pelean entre ellas; escalonadas
(grande → texto → medio → columnas) la página se lee de corrido.
👉 `.hl` en `display:block` por lo mismo que en `.masq-h2`: la segunda
mitad cae siempre en su línea sin depender del
. */
.masq-h3{text-align:center;max-width:30ch;margin:0 auto 34px;text-wrap:balance;
font-family:var(--display);font-weight:700;
font-size:clamp(1.18rem,2.05vw,1.6rem);line-height:1.25;letter-spacing:-.018em;
color:var(--ink,#0b0c0d)}
.masq-h3 .hl{display:block}
/* ⛔ `.masq-rotulo` YA NO SE USA EN comprar.html. Eran "LO QUE SABEMOS" y
"CÓMO TRABAJAMOS" y Carlos los tumbó el 1 sep 2026 ("no pega, tiene que ser
una frase completa"): dos palabras en mayusculitas son una etiqueta de
categoría, el mismo fallo que "Bufetes"/"Bancos" en vender.html. Los
sustituye el `.masq-h3` de arriba, que además presenta las dos columnas a
la vez. La regla se deja por si hace falta en otro sitio. */
.masq-rotulo{margin:0 0 22px;color:var(--turq);font-weight:600;
font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.masq-item{display:flex;gap:15px;margin-bottom:26px}
.masq-item:last-child{margin-bottom:0}
/* `margin-top` alinea el icono con la primera línea del título, no con el
borde del bloque: sin eso queda flotando un par de píxeles alto. */
.masq-item > .ico{flex:0 0 auto;width:26px;height:26px;color:var(--turq);margin-top:2px}
.masq-item > .ico svg{width:26px;height:26px}
/* ⚠️ PESO 600, NO 700, DESDE QUE CADA PUNTO ES UNA FRASE ENTERA (31 ago
2026). Antes eran titulos de cuatro o cinco palabras y el 700 les daba
presencia; una frase completa en 700 se lee como un grito y ademas
emborrona, porque no hay parrafo gris debajo que la contraste.
El `margin-bottom` cae a 0 por lo mismo: ya no hay nada debajo. */
.masq-item h3{margin:0;font-size:1.02rem;font-weight:600;
color:var(--ink);letter-spacing:-.008em;line-height:1.45}
.masq-item p{margin:0;color:#4a4b4c;font-size:.93rem;line-height:1.6}
/* La fila de banderas. Van pequeñas (20x13) porque son un apoyo de lectura,
no un adorno: tienen que reconocerse de un vistazo sin robarle el sitio
al icono turquesa de la izquierda, que es el que ordena la columna. */
.masq-idiomas,
.eq-idiomas{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px}
.masq-idiomas > span,
.eq-idiomas > span{display:inline-flex;align-items:center;gap:7px;
font-size:.86rem;font-weight:600;color:var(--ink)}
/* ---- LAS BANDERAS, ENCIMA DE LA FOTO DE CADA PERSONA ----
Carlos, 28 ago 2026: "dentro de la foto, arriba a la mano derecha,
montada encima, como lo tienen los Perdomo".
⛔ ANTES ESTABAN EN UNA FILA COMUN BAJO EL TITULAR y se quitaron. Alli
decian "el equipo habla estos idiomas", que no le sirve a nadie: el
visitante no quiere saber que idiomas hay en la casa, quiere saber si
LA PERSONA A LA QUE VA A ESCRIBIR habla el suyo. Pegadas a la cara, la
respuesta llega antes de leer una sola palabra.
⛔ ESTUVIERON ENCIMA DE LA FOTO, arriba a la derecha, al estilo de C21
Perdomo, y se bajaron (Carlos, 28 ago 2026: "por el tipo de fondo no se
ve bien"). Y acerto: en un retrato de estudio la unica zona con color
fuerte tiene que ser la cara. Tres banderas encima del fondo oscuro se
convertian en el segundo foco de la tarjeta y le robaban la mirada al
que de verdad importa. Ademas obligaban a una pastilla blanca detras,
que parecia una calcomania.
Abajo, en el crema, no compiten con nada y siguen leyendose de un
vistazo, que era todo lo que se les pedia.
📍 VAN DEBAJO DEL CARGO, no en la linea del nombre: "Carlos Daniel
Bierd" mas tres banderas se pasa de los ~250 px que mide la tarjeta y se
partiria en unas personas si y en otras no. Asi el bloque de identidad
queda limpio: cara → nombre → cargo → idiomas → biografia.
🏳️ SON IMAGENES, NO ICONOS DEL SISTEMA. Las banderas dibujadas a mano en
iconos.js se descartaron: la de España quedaba sin el escudo (era la
version civil, y Carlos lo cazo) y la Union Jack a 22 px pedia un
recorte que ensuciaba el codigo. Ahora salen de assets/banderas/, que
son las mismas de flagcdn que usa Century 21 pero DESCARGADAS: mismo
detalle y sin depender de un servidor ajeno.
⚠️ Llevan `width`/`height` en el HTML ademas de en el CSS. Sin eso, la
tarjeta da un salto al cargar las imagenes, justo debajo del cargo.
El filo gris fino es imprescindible: la de Francia y la de Inglaterra
tienen blanco en el borde y sin el se derriten sobre el crema. */
.eq-banderas{display:flex;justify-content:center;align-items:center;
gap:7px;line-height:0;margin:0 0 14px}
/* ⚠️ EL SELECTOR VA CON `.eq-banderas` DELANTE Y ES OBLIGATORIO. La regla
`.eq-persona img{width:100%;height:245px;object-fit:cover}` es la del
retrato, y a igualdad de peso gana a un `.bandera` suelto: las banderas
salieron a 370x245 px, del tamaño de la foto. Con el padre delante, este
selector pesa mas y manda. NO simplificarlo. */
.eq-banderas .bandera{display:block;width:22px;height:15px;border-radius:2px;
object-fit:cover;
box-shadow:0 0 0 1px rgba(11,12,13,.16), 0 1px 2px -1px rgba(11,12,13,.4)}
/* ⚠️ EL HUECO VA CUADRADO (21x21) AUNQUE LA BANDERA SEA APAISADA. El helper
SVG() de iconos.js fija `viewBox="0 0 24 24"` para todos los iconos del
sitio, asi que si aqui se pone 21x13 el navegador aplasta el dibujo. La
bandera esta dibujada entre y=5 e y=19, o sea centrada en el cuadro, de
modo que en una caja cuadrada queda a la altura correcta sola. */
.masq-idiomas .ico,
.eq-idiomas .ico{display:inline-flex;flex:0 0 auto;width:21px;height:21px}
.masq-idiomas .ico svg,
.eq-idiomas .ico svg{width:21px;height:21px}
@media(max-width:860px){
/* Una sola columna. Y el rótulo de la segunda se separa más, porque al
apilarse "Después de que firmes" pierde su papel de encabezado y se
confundiría con un punto más de la lista de arriba. */
.masq-grid{grid-template-columns:1fr;gap:0}
.masq-col + .masq-col{margin-top:40px}
.masq{margin-top:56px}
}
/* ---- "Contáctame directamente", dentro de la ficha de la persona ----
Vive dentro de .eq-persona, que es una columna estrecha (~250 px), así que
todo aquí está medido para ese ancho. El padding lateral copia el de
.eq-linea para que el rótulo quede alineado con la biografía de encima. */
.cta-directo{margin:18px 0 4px;padding:0 18px;text-align:center;font-size:.9rem}
/* El rótulo. Va con el mismo tratamiento que el cargo de arriba (mayúsculas,
espaciado abierto, turquesa) para que se lea como parte de la ficha y no
como un anuncio pegado encima. Pequeño a propósito: quien manda aquí son
los dos botones, esto solo dice para qué son. */
.cta-directo-rotulo{margin:0 0 10px;color:var(--turq);font-weight:600;
font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
/* Las dos vías, SIEMPRE VISIBLES. Estuvieron detrás de un desplegable y era
un error: la animación que tenía que llamar la atención solo aparecía
después del clic, o sea para quien ya había decidido.
Los
` negro y nada más**. En una
página que es toda crema y negro, sin una sola pieza de color, el ojo no
tiene dónde agarrarse y todo pesa igual.
La placa hace tres cosas a la vez: mete el color de marca, marca dónde
empieza cada sección, y **se corresponde con el botón del hero que baja
hasta ella**, así que el visitante ata una cosa con la otra sin pensarlo.
⚠️ Es LA MISMA pieza en las cuatro secciones. Cuatro adornos distintos son
ruido; una pieza repetida es un sistema.
=================================================================== */
.cvhead{margin-bottom:30px}
/* ===================================================================
🚨 EL TÍTULO DE SECCIÓN **ES** LA PIEZA DE LUJO. TERCERA VUELTA.
Carlos, 4 sep 2026: *"el new construction y el resale tienen que ser algo
lujoso: un botón lujoso, algo chulo"*.
⛔ Y DE PASO CAYERON LOS TITULARES INVENTADOS, que él tumbó uno por uno:
· "Lo que ya está pagado" → *"eso no pega ahí, tiene que ser como
community amenities"*. Y además era FALSO: el HOA se paga aparte.
· "Desde el plano, a tu gusto" → *"no entiendo mucho eso"*.
· "La ves hoy y entras" → *"la gente ya sabe que cuando hablamos de
resale es una casa lista para mudarse. Eso es lógico. No podemos
buscar relleno"*.
👉 LA LECCIÓN, Y ES LA MÁS DURA DE ESTE PROYECTO: **por perseguir lo
sensorial se acabó escribiendo relleno.** Las tres frases sonaban bien y
ninguna añadía un dato. Carlos lo dijo exacto: *"a veces, por ser
sensorial, buscamos relleno y lo que se ve es ridículo"*.
✅ La sección se llama por lo que es (Reventas, Nueva construcción,
Amenidades, Ubicación) y **el lujo lo pone el diseño, no el texto.**
🔁 LA CÁPSULA ES LA MISMA `.tp-rotulo` DE VENDER, y eso no es pereza: es
la única pieza "de lujo" que Carlos ya aprobó, después de tumbar
diecisiete variantes en tres rondas. Cápsula blanca, borde turquesa de
1,6 px, filete interior al 42% y versalitas muy espaciadas en negro de
marca. Si el sitio ya tiene un sello aprobado, no se inventa otro.
⚠️ Aquí es un `` de verdad, no un adorno: es el título de la sección
y pesa en Google. El aspecto cambia, la semántica no.
=================================================================== */
/* 🔁 CUARTA VUELTA, Y LA CÁPSULA SE CAYÓ. Carlos, 4 sep 2026: *"lo de
Location, ese botón no me convence... lo de From US 265, lo de Community
Amenities y lo de New Construction, esos botones no me convencen"*.
👉 Y al ir a mirar cómo lo hacen Colleen y Vicky (que es lo que él mandó),
la respuesta estaba ahí: **sus títulos de sección NO llevan caja.** Son
texto grande, en su tipografía de display y en su color de acento, y ya.
El lujo lo ponen **la tipografía y el color**, no un recuadro.
⚠️ Y tiene lógica: una cápsula es la forma de un BOTÓN. Poner el título de
una sección dentro de la forma de un botón le dice al visitante que se
puede pulsar, y no se puede. Cuatro títulos con forma de botón en una
página es cuatro promesas falsas.
✅ Se queda lo bueno de la idea: **centrado**, que es lo que él pidió para
que "coja más el centro". */
.cvtitulo{display:block;text-align:center;
margin:0 auto 14px!important;
font-family:var(--display)!important;
font-size:clamp(1.5rem,2.8vw,2.05rem)!important;font-weight:700!important;
letter-spacing:-.015em;color:var(--ink,#0b0c0d)!important;line-height:1.15}
.cvhead{text-align:center}
.cvhead .csub{margin:0 auto;max-width:62ch}
/* Si una comunidad no tiene nada que decir debajo del título, la línea se
esconde en vez de quedarse vacía ocupando su margen. */
.cvhead .csub:empty{display:none}
/* ===================================================================
AMENIDADES: DE LISTA GRIS A FICHAS (4 sep 2026)
Antes: fondo casi blanco, borde de 1 px al 6%, letra gris y el icono
suelto. Sobre el crema de la página esas cajas **no se veían**, así que
parecía una lista de texto con símbolos delante. Justo lo que Carlos
describió como "letras muertas".
Lo que se cambió y por qué cada cosa:
- **Fondo blanco puro** contra el crema: ahora la ficha tiene borde propio
sin necesidad de subir el borde.
- **El icono va dentro de un disco turquesa suave.** Un símbolo suelto a
20 px se lee como una viñeta; dentro de un disco se lee como un dato con
su etiqueta.
- **La letra sube a negro de marca**, que es la misma corrección que ya se
hizo en los rótulos de los socios: *"esa letra tan muerta se ve con poco
prestigio"*.
- **Lo importante va en negrita dentro de cada línea** ("24 horas", "15
minutos", el nombre del restaurante). Es lo que pidió Carlos: *"con lo
interesante resaltado"*. Va en el propio texto, en comunidades.js.
- **Hover que levanta**: no promete un clic (no son enlaces) pero da vida a
una rejilla que si no es un muro quieto. Es de las pocas cosas que se
mueven en esta página, y no compite con nada porque el CTA está lejos.
=================================================================== */
/* Cuatro columnas como la referencia. Con `minmax(240px)` caben 4 en 1.240 px
y bajan solas a 3, 2 y 1 según la pantalla. */
.camen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
/* ===================================================================
SOBRE LA ZONA, DENTRO DE LA FICHA (9 sep 2026)
-------------------------------------------------------------------
El texto va un punto más grande que el cuerpo normal de la ficha: es
un resumen, no un párrafo más, y tiene que leerse de corrido.
Los `` que trae de `comunidades.js` marcan los HECHOS (los metros,
los años, el hospital), nunca los adjetivos: así se puede leer en
diagonal y siguen quedando los datos.
La rejilla de amenidades reusa `.camen` / `.camen-grid`, que son las
de la página de comunidad. ⛔ Nada de estilos nuevos para lo que ya
tiene estilo: el que llega desde la comunidad reconoce la pieza. */
/* 📐 JUSTIFICADO, COMO TODO EL TEXTO LARGO DEL SITIO. Regla de Carlos, y
la repitió el 9 sep 2026: *"donde haya texto, que las letras sean todas
del mismo largo... soy estricto con eso y no me gusta el desorden"*.
Es el mismo tratamiento que `#fDesc` y que `.ctext p` de la página de
comunidad: bandera derecha recta y partición de palabras.
⚠️ En móvil se quita: con 34 caracteres por línea, justificar abre
huecos blancos enormes entre palabras y se lee peor, no mejor. Misma
excepción que en `#fDesc`. */
.zona-txt{font-size:1.02rem;line-height:1.72;color:var(--ink-soft);margin-bottom:22px;
text-align:justify;hyphens:auto;-webkit-hyphens:auto}
@media(max-width:760px){ .zona-txt{text-align:left;hyphens:manual} }
.zona-txt b{color:var(--ink,#0b0c0d);font-weight:600}
/* 📍 LA FILA DE DISTANCIAS (9 sep 2026)
Tres datos en línea, cada uno con su icono, el número grande y el
destino en letra normal. Es lo que publica drproperties.ca en su
bloque "Neighborhood" y es de lo mejor que tienen.
🎯 El NÚMERO va en negrita y el destino no, para que la fila se lea en
diagonal: "20 min · 5 min · 10 min" cuenta la ubicación entera de un
vistazo, y quien quiera el detalle lo tiene al lado.
🚶 Las que se hacen andando llevan turquesa y dicen "A pie" en vez de
un número. Poner "0 min" sería absurdo, y además **andar a la playa no
es una distancia corta, es otra categoría**: es lo que distingue a
Hispaniola de todas las demás comunidades de la costa.
⚠️ `[hidden]` con su regla propia: este bloque declara un `display` y
un `display` declarado gana siempre a `[hidden]`. */
.zona-dist{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.zdist{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
border-radius:12px;background:var(--cream,#f6f2ea);
font-size:.86rem;color:var(--ink-soft)}
.zdist .ico{width:16px;height:16px;color:var(--ink,#0b0c0d);flex:none}
.zdist .ico svg{width:16px;height:16px}
.zdist b{font-family:var(--display);font-weight:700;color:var(--ink,#0b0c0d);white-space:nowrap}
.zdist-pie{background:rgba(16,178,194,.10)}
.zdist-pie b,.zdist-pie .ico{color:var(--turq-dark,#0b7c87)}
.zona-dist[hidden]{display:none}
.zona-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;
font-weight:600;font-size:.92rem;color:var(--turq-dark,#0b7c87);text-decoration:none;
border-bottom:1.6px solid transparent;transition:border-color .18s}
.zona-link:hover{border-bottom-color:var(--turq,#10b2c2)}
/* ⚠️ `[hidden]` con su regla propia: `#zonaAmen` es `.camen-grid`, que
declara un `display`, y un `display` declarado gana a `[hidden]`. */
#zonaAmen[hidden]{display:none}
.camen{display:block;padding:26px 24px 24px;
background:#fff;border:1px solid rgba(11,12,13,.09);border-radius:18px;
box-shadow:0 2px 10px rgba(11,12,13,.04);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* 🚨 EL BORDE DEL HOVER, EN TURQUESA PURO. Estuvo en `rgba(16,178,194,.42)`
y Carlos lo cazó: *"en Community Amenities metiste un turquesa que no es
de la marca"*. Y es literal: **el código oficial al 42% no es el color
oficial, es otro turquesa más claro.** Es la regla que él mismo escribió
el 28 ago para los rótulos de los socios, palabra por palabra.
👉 Para suavizarlo se baja el GROSOR, nunca el color. */
.camen:hover{transform:translateY(-3px);border-color:var(--turq,#10b2c2);
box-shadow:0 14px 32px rgba(11,12,13,.10)}
/* La fila de arriba: el icono a la izquierda y el número a la derecha.
⚠️ El número va a la DERECHA y no delante del título: puesto delante
compite con la palabra y se lee como parte de ella ("01 Seguridad"). En la
esquina ordena la rejilla sin meterse en la lectura. */
.camen-top{display:flex;align-items:center;justify-content:space-between;
margin-bottom:16px}
/* ⛔ SE QUITÓ EL DISCO DE FONDO. Llevaba `rgba(16,178,194,.10)`, que es otra
vez el código oficial con opacidad. Y al ir a arreglarlo se vio que el
disco sobraba: **la regla de la casa es iconos de TRAZO** (Carlos tumbó
los macizos: "con el crema y el turquesa se ven de juguete"), y meterlos
dentro de una pastilla de color es media vuelta hacia lo macizo.
✅ Icono suelto, en turquesa de marca puro, un punto más grande para que
no pierda presencia al quitarle el disco. */
.camen .ico{flex:none;display:inline-flex;align-items:center;
color:var(--turq,#10b2c2)}
.camen .ico svg{width:26px;height:26px}
/* 🚨 EL NÚMERO TAMBIÉN IBA CON OPACIDAD (`.45`). Mismo error, misma cura:
turquesa puro y, para que no grite, **se le baja el peso, no el color**.
400 contra el 700 del título deja el número claramente en segundo plano
siendo el color exacto de la marca. */
.camen-n{font-family:var(--display);font-size:1.42rem;font-weight:400;
line-height:1;color:var(--turq,#10b2c2);letter-spacing:-.02em}
.camen h3{font-family:var(--display);font-size:1.02rem;font-weight:700;
line-height:1.28;color:var(--ink,#0b0c0d);margin:0 0 8px;letter-spacing:-.01em}
.camen p{font-size:.9rem;line-height:1.55;color:#5d6462;margin:0}
@media(max-width:640px){
.camen{padding:20px 18px 18px}
.camen-top{margin-bottom:12px}
}
.ccta{text-align:center;padding:54px 30px;background:#fbf9f6;border:1px solid rgba(0,0,0,.07);border-radius:20px}
.ccta h2{margin-bottom:12px}
.ccta p{color:#5d6462;line-height:1.75;max-width:58ch;margin:0 auto 26px}
@media(max-width:900px){ .csplit{grid-template-columns:1fr} }
@media(max-width:640px){
.chero{min-height:56vh;padding:120px 0 40px}
.cblock-dark{padding:30px 20px}
.cyield-head{flex-direction:column;gap:12px}
/* tabla legible en celular */
table.modelos{min-width:0;font-size:.9rem}
table.modelos thead{display:none}
table.modelos tr{display:block;border-bottom:1px solid rgba(0,0,0,.09);padding:12px 4px}
table.modelos td{display:flex;justify-content:space-between;gap:16px;border:0;padding:7px 12px}
table.modelos td::before{content:attr(data-l);color:#8a8579;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.cblock-dark table.modelos tr{border-bottom-color:rgba(255,255,255,.12)}
.cblock-dark table.modelos td::before{color:rgba(255,255,255,.5)}
}
/* =============== TARJETAS DE MODELO =============== */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:26px}
.mcard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.22s;box-shadow:0 4px 18px rgba(20,30,30,.05)}
.mcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,30,30,.13)}
.mcard-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eee}
.mcard-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.mcard:hover .mcard-ph img{transform:scale(1.05)}
.mcard-real{position:absolute;top:14px;left:14px;background:rgba(21,32,31,.82);backdrop-filter:blur(6px);color:#fff;font-size:.72rem;letter-spacing:.06em;padding:6px 12px;border-radius:999px;font-weight:600}
.mcard-gal{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);border:0;color:#0b0c0d;font-family:inherit;font-size:.82rem;font-weight:600;padding:9px 15px;border-radius:999px;cursor:pointer;transition:.18s;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.mcard-gal:hover{background:#fff;transform:scale(1.04)}
.mcard-gal .ico svg{width:15px;height:15px}
.mcard-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.mcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.mcard-top h3{font-family:var(--display);font-size:1.42rem;font-weight:700;color:#0b0c0d;margin:0}
.mcard-precio{font-size:1.18rem;font-weight:700;color:var(--turq,#10b2c2);white-space:nowrap}
.mcard-med{font-size:.83rem;color:#8a8579;letter-spacing:.03em;margin-bottom:14px}
.mcard-d{color:#4a5250;line-height:1.75;font-size:.96rem;margin:0 0 16px;flex:1}
.mcard-renta{display:flex;align-items:flex-start;gap:10px;background:rgba(16,178,194,.1);border-left:3px solid var(--gold,#10b2c2);padding:12px 15px;border-radius:0 10px 10px 0;font-size:.88rem;color:#6b5423;line-height:1.55;margin-bottom:18px}
.mcard-renta b{color:#4a3a12}
.mcard-renta .ico{color:var(--gold,#10b2c2);flex:none;margin-top:1px}
.mcard-renta .ico svg{width:16px;height:16px}
.mcard-wa{justify-content:center;width:100%}
@media(max-width:640px){ .mgrid{grid-template-columns:1fr;gap:20px} .mcard-body{padding:18px 18px 20px} }
/* =============== GALERIA =============== */
.galmodal{position:fixed;inset:0;z-index:9999;background:rgba(8,15,15,.97);display:none;flex-direction:column;padding:18px}
.galmodal.open{display:flex}
.gal-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;transition:.16s;z-index:3}
.gal-x:hover{background:rgba(255,255,255,.24)}
.gal-head{display:flex;align-items:baseline;gap:14px;color:#fff;padding:6px 60px 14px 8px;flex-wrap:wrap}
.gal-head b{font-family:var(--display);font-size:1.25rem;font-weight:700}
.gal-head span{color:rgba(255,255,255,.55);font-size:.9rem}
.gal-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.gal-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer;transition:.16s;z-index:2}
.gal-arrow:hover{background:rgba(255,255,255,.3)}
.gal-arrow.prev{left:10px}.gal-arrow.next{right:10px}
.gal-tiras{display:flex;gap:8px;overflow-x:auto;padding:14px 4px 4px;flex:none}
.gal-tiras img{height:74px;border-radius:7px;cursor:pointer;opacity:.45;transition:.16s;flex:none}
.gal-tiras img:hover{opacity:.85}
.gal-tiras img.on{opacity:1;outline:2px solid var(--turq,#10b2c2)}
@media(max-width:640px){ .gal-tiras img{height:54px} .gal-arrow{width:42px;height:42px} }
/* ===================================================================
PORTADA - misma estructura que el sitio modelo
Hero compacto (518px) + panel de busqueda blanco + Oferta de la Semana
=================================================================== */
.rhero{position:relative;min-height:518px;display:flex;align-items:center;background:url('villas/hero-beach.jpg') center/cover no-repeat;padding:96px 0 44px;margin-top:0}
/* 🚨 EL VELO ES UN DEGRADADO, NO UN GRIS PLANO (1 sep 2026), Y SIN ESTO
CUALQUIER FOTO SE PIERDE.
Estaba en `rgba(38,52,54,.62)` uniforme, y a ese nivel la foto no se ve: se
probo una aerea de playa con villas y en pantalla era una mancha gris, no
se distinguia ni que fuera una playa. Daba igual la foto que se pusiera.
👉 Ahora va de menos a mas, y cada tramo tiene su motivo:
· 30% ARRIBA -> es la unica franja donde se ve el paisaje de verdad,
porque abajo lo tapa el panel blanco del buscador.
· 48% EN MEDIO -> justo detras del titular blanco. Es lo que hace que la
letra se lea sin apagar la foto entera.
· 62% ABAJO -> se mantiene el valor original donde ya no importa: ahi
esta el panel encima.
⚠️ El tono baja de 38,52,54 a 20,32,34: un gris mas neutro y mas oscuro
ensucia menos el verde y el turquesa de la foto. */
.rhero-veil{position:absolute;inset:0;
background:linear-gradient(180deg,
rgba(20,32,34,.30) 0%,
rgba(20,32,34,.48) 45%,
rgba(20,32,34,.62) 100%)}
.rhero .wrap{position:relative;z-index:2;text-align:center}
/* ⚠️ ESTE TOPE ESTUVO EN 44 px UN RATO Y VOLVIO A 56 (1 sep 2026), y la
historia importa: se bajo la letra para que "Republica Dominicana" cupiera
DENTRO de la primera frase del titular. Cabia, pero el titular se volvio
largo y dejo de enganchar. **La solucion no era la letra, era la
ESTRUCTURA**: el pais se movio a la segunda linea y entonces las dos lineas
son cortas y la letra puede ser grande otra vez.
👉 Antes de encoger la tipografia para que quepa un texto, probar a partir
el texto de otra manera.
⛔ NO SUBIR de 56 sin medir en los dos idiomas: el ingles ("It's in the
Dominican Republic") es el que primero se rompe (a 64 px se va a tres). */
/* ⚠️ `text-wrap:balance` NO ES ADORNO AQUI, ARREGLA UN HUERFANO.
Con el titular en tres lineas, el navegador partia "…República Dominicana
ya / existe." y dejaba **la palabra "existe." sola en su linea**, que se ve
como un error de maquetacion. `balance` reparte las dos lineas de la
primera frase por igual.
📌 Solo funciona en textos CORTOS (tres o cuatro lineas). Aqui son dos por
frase, asi que entra justo en lo que sabe hacer. */
/* 🚨 EL TITULAR VA GRANDE. SE MIDIO EL DE REALTORDR Y SE COPIA LA ESCALA:
62 px, peso 700, interlineado 1.0, y DOS LINEAS de 996 y 750 px.
👉 LO QUE HACEN ELLOS Y YO HABIA HECHO AL REVES: ellos NO achican la letra
para que el texto quepa en una linea. Dejan que el texto ENVUELVA a lo
grande. El resultado es un titular que domina la pantalla y que ademas
sale solo con la forma buena: la primera linea larga y la segunda mas
corta.
⛔ SE INTENTO LO CONTRARIO (forzar la primera linea de una sola tirada) y
obligo a bajar la letra hasta 38 px. Carlos: *"lo que hiciste fue una
porqueria, yo no te dije que pusieras eso tan chiquito"*. Tenia razon: al
proteger la linea se perdio el titular.
⚠️ El tope de 3.875rem son 62 px, el numero exacto de ellos. El `4.4vw` es
lo que lo baja en pantallas estrechas para que no se rompa por abajo: el
ingles es mas largo que el español y es el que marca el limite. */
.rhero h1{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(2.1rem,4.4vw,3.875rem);line-height:1.06;color:#fff;margin:0 0 30px;text-shadow:0 2px 22px rgba(0,0,0,.32);letter-spacing:-.02em}
/* 📐 LA SEGUNDA LINEA ES DEL MISMO TAMANO QUE LA PRIMERA, solo cambia el
color. Estuvo al 72% un rato y Carlos lo tumbo: *"yo no te dije que
pusieras eso tan chiquito, asi no cuadra"*.
Lo que el pidio ("arriba mas larga, abajo mas corta") lo dan las PALABRAS,
no el tamano de la letra: la segunda frase es mas corta y ya. Es
exactamente como funciona el titular de realtordr. */
.rhero h1 .hl{display:block;color:var(--turq,#10b2c2)}
.rhero h1 em{font-style:normal;color:var(--turq,#10b2c2)}
/* ============================================================================
EL BUSCADOR DEL HERO, REHECHO DESDE CERO (1 sep 2026)
----------------------------------------------------------------------------
Se midieron los dos referentes reales del lujo inmobiliario, Sotheby's y
Christie's, y los dos hacen lo mismo: UNA linea, cero selects, esquinas
CUADRADAS y un filete de oro. El formulario de seis campos es el patron de
los portales de volumen, no del lujo.
👉 La idea de fondo: **seis desplegables le dicen al visitante "trabaja tu";
una linea le dice "escribe lo que quieras, yo me encargo".**
⛔ Nada de esquinas redondeadas aqui: `border-radius:0` es deliberado y es
la mitad del caracter. En cuanto se redondea, vuelve a parecer una app.
============================================================================ */
/* 🪟 EL PANEL VA CASI TRANSPARENTE, SOBRE LA FOTO (Carlos, 1 sep 2026):
*"sí, transparente, pero el mismo formato que teníamos antes"*.
Estuvo blanco macizo (275 px de ladrillo encima de la playa) y estuvo
tambien como una sola linea blanca con filete de oro copiando a Christie's.
Lo primero tapaba la foto; lo segundo era copiar el estilo SIN copiar el
contexto: **el sitio de ellos no tiene foto detras del buscador, el nuestro
si.** Un panel claro sobre una foto siempre sera un parche.
👉 Ahora el panel no existe como caja: es un velo blanco al 10% con
desenfoque y un filete blanco fino. La playa se ve entera a traves.
⚠️ EL TEXTO PASA A BLANCO y lleva sombra: sobre una foto con zonas claras
(la arena) el blanco puro sin sombra se pierde. Sin la sombra esto no se
lee, y no es opcional. */
/* 🪟 SIN CAJA. EL BUSCADOR SE DIBUJA CON LAS ORILLAS DE LO ESCRITO
(Carlos, 1 sep 2026): *"el mismo estilo del de realtordr como lo teniamos,
pero transparente, incluso mas transparente que ahora, que se destaque el
buscador por las orillas de lo escrito"*.
👉 Lo que pide es que la pieza la definan LOS FILETES DE CADA CAMPO, no un
panel. Y es la decision buena: **un panel es una caja que tapa la foto; un
filete es una linea que la deja pasar entera.**
Recorrido completo de este bloque, para no repetirlo:
1. blanco macizo (275 px) -> "tapa la pantalla"
2. cristal al 76% -> seguia siendo un ladrillo claro
3. una sola linea tipo Christie's -> se copio el estilo sin el contexto
4. cristal al 10% con borde -> mejor, pero seguia habiendo caja
5. sin caja ninguna -> demasiado suelto, sin pieza
6. CAJA CON LAS CUATRO ESQUINAS REDONDAS, AL 7% <- aqui
👉 EL PUNTO DE EQUILIBRIO, y merece la pena entenderlo: **la forma de la
caja es la de realtordr (rectangulo de esquinas redondas) y eso esta bien;
lo que estaba mal era el RELLENO.** Con el fondo al 7% la pieza existe (se
sabe donde empieza y donde acaba) y la foto sigue pasando entera.
Carlos: *"los 4 esquineros redondos, no asi cuadrados, similar al de
realtor"*.
⚠️ El desenfoque MUY suave se queda aunque no haya fondo: no es estetica,
es lo que separa la letra blanca de las hojas y la espuma de la foto. Sin
el, sobre la arena clara los valores se pierden.
⛔ Y por eso mismo las sombras de texto de los campos NO son opcionales. */
/* ✨ EL BORDE TURQUESA QUE GIRA (Carlos, 1 sep 2026: *"mas transparente y en
los bordes ponle animacion del color de la marca"*).
⚠️ NO ES UN GESTO NUEVO: es EXACTAMENTE el mismo del panel de la filosofia
de vender.html (`.filo`) y el del aro de la foto de Carlos. Un degradado
conico girando, recortado por `overflow:hidden`, con un relleno por encima
que deja asomar solo 1,6 px de filete.
👉 Reusar el gesto en vez de inventar otro es lo que hace que un sitio
parezca de una sola mano. Si algun dia se cambia la velocidad o el color de
uno, hay que mirar los tres.
🚨 LA DIFERENCIA CON `.filo`: alli el relleno es crema opaco; aqui tiene que
ser CASI TRANSPARENTE, porque debajo hay una foto. Por eso el `::after`
lleva un blanco al 4% con desenfoque en vez de un color solido. */
/* 🚨 SE INTENTO PRIMERO CON EL SANDWICH DE `.filo` (un cuadrado conico
girando detras + un relleno encima que solo deja asomar el filete) Y AQUI
NO SIRVE. Alli funciona porque el relleno es crema OPACO; aqui el relleno
tiene que ser casi transparente para que se vea la foto, asi que el
degradado entero se veia por debajo y el panel quedaba con un manchon
turquesa en el medio.
✅ La solucion es un BORDE DE VERDAD con dos fondos: el interior en
`padding-box` (casi transparente) y el degradado en `border-box`, que solo
pinta el grosor del borde. El giro se hace animando un angulo declarado con
`@property`, que es la unica forma de animar un `conic-gradient`.
📌 Si un navegador viejo no entiende `@property`, el angulo no cambia y el
borde se queda quieto en turquesa: se degrada solo, sin romperse. */
/* ✨ EL HALO QUE LATE EN EL BORDE, EN TURQUESA Y FINO.
Carlos lo señalo con un ejemplo del propio sitio: *"como lo que aparece en
los bordes crema de 'A place to retire', ese tipo de borde que sube de un
punto, pero del color de la marca y mas fino"*. Es el gesto de
`hero-op-latido` en comprar.html: un aro que sale del borde y se desvanece.
⚠️ REUSAR EL GESTO, NO INVENTAR OTRO. Es el tercer sitio donde vive (los
botones grandes, los tres de comprar y ahora el buscador): si algun dia se
cambia el ritmo o el color, hay que mirar los tres.
⛔ ANTES DE ESTO SE PROBARON DOS COSAS Y LAS DOS ESTABAN MAL ENTENDIDAS:
1. Un cuadrado conico girando detras del panel: **ilumina el panel
entero**, no el borde. Carlos: *"lo que montaste fue una iluminacion
atras del buscador"*.
2. Un borde con degradado recortado con `mask`: tecnicamente correcto,
pero seguia siendo un borde de COLOR FIJO que gira, no lo que el pedia.
👉 Lo que pedia no era un degradado en el borde: era **movimiento saliendo
del borde**. Son dos cosas distintas y se parecen al describirlas.
El aro llega a 7 px y se apaga. En los botones llega a 10-12; aqui es mas
fino a proposito porque el panel es mucho mas grande y el mismo grosor
relativo cantaria. */
.rsearch{position:relative;
max-width:1040px;margin:0 auto;text-align:left;
border:1px solid rgba(255,255,255,.30);border-radius:16px;
padding:22px 26px 18px;
background:rgba(255,255,255,.05);
-webkit-backdrop-filter:blur(10px) saturate(115%);
backdrop-filter:blur(10px) saturate(115%);
animation:rs-halo 4.6s ease-out infinite}
/* 🫀 DOS PULSOS Y UNA PAUSA, no un latido continuo.
Carlos: *"que no dé vuelta hacia la derecha, sino que aparezca como 'busca,
busca, busca aquí'"*. Un solo aro cada cuatro segundos se lee como que la
pieza respira; **dos aros seguidos y luego silencio se leen como una
llamada**, que es lo que el pidio. Es la diferencia entre estar vivo y
estar diciendo algo.
El resto del ciclo (del 40% al 100%) va apagado a proposito: sin ese
silencio los dos pulsos no se distinguen de un parpadeo continuo, y una
portada que parpadea sin parar cansa a los diez segundos. */
@keyframes rs-halo{
0% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 0 rgba(16,178,194,.55)}
17% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 7px rgba(16,178,194,0)}
18% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 0 rgba(16,178,194,.55)}
35% {box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 7px rgba(16,178,194,0)}
36%,100%{box-shadow:0 22px 55px -32px rgba(10,25,28,.55), 0 0 0 0 rgba(16,178,194,0)}
}
@media(prefers-reduced-motion:reduce){ .rsearch{animation:none} }
/* 🪟 LA CAJA VA CASI TRANSPARENTE, SOBRE LA FOTO (Carlos, 1 sep 2026):
*"¿qué tal si lo ponemos como los de Casa Linda 13, que quede casi
transparente y se vea profesional?"*.
Estuvo blanca maciza con filete de oro (copiando la medida de Christie's) y
el resultado era un ladrillo claro plantado sobre la playa: **el sitio de
ellos no tiene foto detras del buscador, el nuestro si.** Copiar el estilo
sin copiar el contexto no funciona.
👉 Ahora la caja usa el mismo tratamiento que los atajos de debajo: velo
blanco al 12%, desenfoque y un filete blanco fino. La playa se ve entera a
traves y las dos piezas se leen como una familia.
⚠️ El texto pasa a BLANCO y necesita la sombra: sobre una foto con zonas
claras (la arena) el blanco puro sin sombra se pierde. */
/* 🚨 `z-index:40` EN LA CAJA, Y NO ES DECORATIVO. Los atajos de debajo llevan
`backdrop-filter`, y esa propiedad CREA UN CONTEXTO DE APILADO propio: como
van despues en el HTML, se pintaban ENCIMA del desplegable de sugerencias y
se veia el texto de un atajo atravesando el panel blanco.
👉 Cuando algo se pinta encima de lo que no debe, buscar quien tiene
`backdrop-filter`, `transform`, `filter` o `opacity`: los cuatro crean
contexto de apilado y rompen el orden que uno espera. */
.rs-box{position:relative;z-index:40;display:flex;align-items:center;gap:14px;
background:rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(14px) saturate(120%);
backdrop-filter:blur(14px) saturate(120%);
border:1px solid rgba(255,255,255,.55);border-radius:0;
padding:0 0 0 22px;height:62px;
box-shadow:0 20px 50px -28px rgba(10,25,28,.6)}
.rs-lupa{width:19px;height:19px;flex:none;color:rgba(255,255,255,.85)}
.rs-box input{flex:1;min-width:0;height:100%;border:0;outline:none;background:none;
font-family:inherit;font-size:1.02rem;font-weight:400;color:#fff;
text-shadow:0 1px 10px rgba(0,0,0,.35)}
.rs-box input::placeholder{color:rgba(255,255,255,.78);font-weight:300}
/* El boton tampoco es un bloque de color: es el mismo cristal, separado solo
por un filete. Al pasar el raton se llena de blanco y el icono se oscurece,
que es el unico momento en que la pieza pesa. */
.rs-ir{flex:none;width:62px;height:100%;cursor:pointer;
border:0;border-left:1px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.14);color:#fff;
display:grid;place-items:center;transition:background .2s,color .2s}
.rs-ir:hover{background:#fff;color:var(--ink,#0b0c0d)}
.rs-ir .ico{width:20px;height:20px}
/* Al escribir, el cristal se aclara un punto: la pieza responde sin moverse. */
.rs-box:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.8)}
/* Las sugerencias: mismo ancho, mismo filete, cuadradas. Cada una con SU
numero, que es lo unico de este bloque que la competencia no puede copiar
sin tener inventario detras. */
/* ⚠️ LAS SUGERENCIAS SI VAN BLANCAS Y SOLIDAS, aunque la caja sea de cristal.
No es incoherencia: aqui hay que LEER una lista de nombres y numeros, y
sobre una foto con palmeras y olas eso no se lee. El cristal vale para un
campo vacio; para datos, no.
Se separa 6px de la caja para que se vea que es un panel aparte y no una
prolongacion del cristal. */
.rs-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
background:#fff;border:1px solid rgba(11,12,13,.10);
max-height:330px;overflow-y:auto;
box-shadow:0 30px 70px -28px rgba(10,25,28,.55)}
.rs-sug[hidden]{display:none}
.rs-sug-grupo{padding:13px 22px 6px;font-family:var(--display);
font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:#8a8579}
.rs-sug button{display:flex;align-items:center;gap:12px;width:100%;
padding:12px 22px;border:0;background:none;cursor:pointer;text-align:left;
font-family:inherit;font-size:1rem;color:var(--ink,#0b0c0d);transition:background .14s}
.rs-sug button:hover,.rs-sug button.sel{background:rgba(16,178,194,.09)}
.rs-sug button .ico{width:17px;height:17px;flex:none;color:var(--turq,#10b2c2)}
.rs-sug button em{margin-left:auto;font-style:normal;font-size:.85rem;color:#8a8579;white-space:nowrap}
.rs-sug .rs-sug-nada{padding:18px 22px;color:#8a8579;font-size:.95rem}
/* ---- LOS CAMPOS: CADA UNO EN SU CAJA, CON EL FILETE DE LA MARCA ----
Idea de Carlos (1 sep 2026): *"si a cada letra que esta ahi le ponemos un
bordecito que la destaque con el turquesa de la marca, que se vea que eso
esta ahi"*. Antes cada campo era texto sobre una rayita blanca, y sobre una
foto con arena clara y mar turquesa esas rayitas se perdian a ratos.
Lo que gana la caja: el campo se ve ANTES de leerlo. Sobre una foto, un
filete suelto es un accidente del paisaje; un marco cerrado es un control.
Y el color deja de ser blanco generico y pasa a ser el de la casa. */
/* CUATRO COLUMNAS desde el 7 sep 2026: Donde · Tipo · Habitaciones · Presupuesto.
Habitaciones subio de "Mas filtros" porque es lo que el visitante ya trae
decidido al entrar (ver la nota en index.html). */
.rs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 16px;margin-bottom:14px}
/* La fila de abajo se queda en DOS, que es lo que hay ahi: Construccion y
Financiamiento. Con cuatro columnas quedarian dos huecos vacios a la
derecha y se leeria como que faltan campos. */
.rs-grid.rs-extra{grid-template-columns:repeat(2,1fr)}
.rs-grid[hidden]{display:none} /* `display:grid` pisa al `hidden` del navegador */
/* ⛔ FUERA LA RAYA LARGA QUE SEPARABA LAS DOS FILAS (Carlos la cazo mirando:
*"debajo le pones otra raya larga"*). Con las cajas cada campo ya se delimita
solo, asi que ese filete de lado a lado solo anadia una linea mas a una zona
que ya tenia seis. La separacion la hace el aire, no una raya. */
.rs-extra{margin-top:2px}
/* 🚨 EL FILETE VA A 1.6px, NO A 1px. Con `devicePixelRatio` 1,25 (Windows al
125%, la pantalla de Carlos) Chrome recorta el grosor al pixel de pantalla
entero HACIA ABAJO: 1px se pinta a 0,8 y el turquesa llega al ojo lavado.
1,6px cae en 2 fisicos exactos. Es la misma regla del rotulo de los socios. */
/* ⚠️ Y LA CAJA LLEVA FONDO OSCURO TRANSLUCIDO POR NECESIDAD, no por gusto: el
panel se apoya sobre el mar, que en la foto ES TURQUESA. Un filete turquesa
sobre agua turquesa desaparece. El fondo oscuro le da su propio suelo al
borde y de paso la letra blanca se lee en cualquier parte de la foto. */
.rs-f{display:flex;flex-direction:column;gap:3px;
border:1.6px solid rgba(255,255,255,.45);border-radius:10px;
padding:9px 14px 7px;background:rgba(11,25,28,.26);
transition:border-color .2s,background .2s}
.rs-f:hover{background:rgba(11,25,28,.34);border-color:rgba(255,255,255,.7)}
.rs-f:focus-within{border-color:#fff;background:rgba(11,25,28,.38)}
/* 🎯 EL TURQUESA NO DECORA: DICE POR DONDE ESTAS FILTRANDO.
Con los seis marcos en turquesa a la vez son 4.437 px de trazo del color de
marca en la misma pantalla en la que el titular ya lleva "En Republica
Dominicana." en ese mismo turquesa. El color deja de senalar y pasa a ser el
fondo. Aqui el marco vacio va en blanco tenue (que es lo que hace falta para
que se vea que el campo esta ahi, que era la peticion) y **el turquesa se
enciende solo en el campo que tiene algo elegido**.
Es el mismo gesto que ya vive en la barra de filtros de propiedades.html
(`data-vacio="0"`), asi que las dos pantallas hablan igual.
⚠️ La marca la pone `pintarBuscador()` en `data-puesto`. Se intento primero
con `:has(select option:not([value=""]):checked)`, que hace match de verdad,
y NO SIRVE: Chrome no reevalua el estilo cuando la seleccion cambia por
`select.value`, asi que el borde se quedaba blanco con el campo ya elegido.
Esta comprobado en pantalla; no reproponerlo. */
.rs-f[data-puesto="1"]{
border-color:var(--turq,#10b2c2);background:rgba(11,25,28,.34)}
.rs-f[data-puesto="1"] label{color:#fff}
.rs-f label{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.82);
letter-spacing:.14em;text-transform:uppercase;
text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* ⚠️ LAS OPCIONES DEL DESPLEGABLE ABIERTO LAS PINTA EL SISTEMA, no el CSS de
la pagina: por eso `option` lleva su propio color oscuro sobre blanco. Si se
deja heredar el blanco, al abrirlo se ve blanco sobre blanco. */
/* ⛔ EL `select` YA NO LLEVA FILETE ABAJO: lo dibuja la caja. Dos lineas por
campo (marco + subrayado) es el formulario que se estaba quitando. */
.rs-f select{appearance:none;-webkit-appearance:none;border:0;
background:transparent;
padding:2px 24px 2px 0;font-family:inherit;font-size:1.02rem;
color:#fff;cursor:pointer;text-shadow:0 1px 10px rgba(0,0,0,.4);
background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
background-position:calc(100% - 11px) 60%,calc(100% - 6px) 60%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.rs-f select option{color:var(--ink,#0b0c0d);background:#fff;text-shadow:none}
.rs-f select:focus{outline:none}
.rs-acc{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* "Mas filtros" va al extremo contrario del boton: el que quiere afinar mira a
la izquierda, el que ya sabe va derecho al boton. Juntos, el texto le
robaria clics al principal. */
.rs-mas{display:inline-flex;align-items:center;gap:8px;padding:8px 4px;
border:0;background:none;cursor:pointer;font-family:inherit;
font-size:.88rem;font-weight:600;color:rgba(255,255,255,.9);
text-shadow:0 1px 8px rgba(0,0,0,.4);transition:color .18s}
.rs-mas:hover{color:#fff}
.rs-mas .ico{width:15px;height:15px;transition:transform .25s}
.rs-mas[aria-expanded="true"] .ico{transform:rotate(180deg)}
/* El boton es lo UNICO solido de todo el bloque. Sobre tanto cristal, un solo
elemento macizo concentra toda la atencion sin tener que gritar. */
/* ⚠️ ESQUINAS DE 10px, NI CUADRADAS NI PILDORA (Carlos, 1 sep 2026: *"con los
bordes un poco mas redondos"*). Estuvieron a 0 copiando a Christie's, y en
un buscador SIN CAJA el unico elemento solido con esquinas vivas se lee
duro. Con 10 px acompana a las tarjetas del resto del sitio, que van entre
11 y 14, sin llegar a la pildora, que ya es lenguaje de app. */
.rs-go{padding:13px 32px;border:0;border-radius:10px;
background:#fff;color:var(--ink,#0b0c0d);
font-family:inherit;font-weight:600;font-size:.96rem;cursor:pointer;
transition:background .2s,color .2s}
.rs-go:hover{background:var(--turq,#10b2c2);color:#fff}
.rs-atajos{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.rs-atajo{display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.5);
background:rgba(255,255,255,.10);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-size:.86rem;font-weight:500;text-decoration:none;
transition:background .18s,border-color .18s}
.rs-atajo:hover{background:rgba(255,255,255,.22);border-color:#fff}
.rs-atajo em{font-style:normal;opacity:.72;font-size:.8rem}
.rs-todo{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
color:rgba(255,255,255,.9);font-size:.92rem;font-weight:500;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:.18s}
.rs-todo:hover{color:#fff;border-bottom-color:#fff}
.rs-todo .ico{width:15px;height:15px}
@media(max-width:820px){
/* En telefono los tres campos van uno debajo de otro: en fila se quedan a
100 px cada uno y "Cualquier precio" no cabe. */
.rs-grid{grid-template-columns:1fr;gap:14px}
.rsearch{padding:20px 18px 18px}
}
@media(max-width:640px){
/* 🚨 EL PIE SE APILA. En una sola fila el boton se quedaba con 160 px y
"Ver 13 propiedades" se partia en DOS LINEAS dentro del boton, que es el
detalle que mas delata un sitio sin acabar.
Apilado, el boton ocupa todo el ancho: cabe la frase entera y ademas es
mas facil de tocar con el pulgar, que en un telefono es lo que manda. */
.rs-acc{flex-direction:column;align-items:stretch;gap:12px}
.rs-go{width:100%;padding:15px 20px;white-space:nowrap}
.rs-mas{justify-content:center;padding:6px 4px}
.rs-atajos{gap:7px}
.rs-atajo{padding:7px 13px;font-size:.8rem}
}
/* ===================================================================
LA OPORTUNIDAD / HOT DEAL
🚨 REHECHA EL 1 SEP 2026. Antes era un panel ARENA con acento DORADO y
dos columnas: a la izquierda texto (entradilla + comparativa + cuatro
razones + dos botones) y a la derecha una tarjeta de 405 px.
Carlos: *"al fondo le vamos a quitar el crema y vamos a poner nuestro
turquesa, pero mas suave, casi transparente... que esa franja tan grandota
simplemente sea la villa, que la villa sea lo que destaque mas que todo"*.
Los dos cambios y por que funcionan:
1. 🔵 EL FONDO PASA DE ARENA A TURQUESA CASI TRANSPARENTE. La arena era el
unico sitio de la portada con ese color, o sea un acento que no se repetia
en ninguna otra parte del sitio. El turquesa al 6% es de la casa y ademas
**deja de competir con la foto**: la arena es calida y saturada y le
robaba color a la villa.
⚠️ 6% NO ES UN NUMERO CUALQUIERA: las dos secciones que siguen (.cats y
.res) son crema (#f6f2ea). Por debajo del 5% el panel se funde con ellas y
deja de leerse como pieza aparte. Si se toca, comprobarlo contra el crema.
2. 🖼️ DE DOS COLUMNAS A DOS FILAS. El texto va arriba y corto; la foto va
ABAJO Y A TODO EL ANCHO. En dos columnas la foto nunca pasaba de 405 px
con media pantalla de texto al lado, asi que lo que mandaba era el texto.
Ahora la foto ocupa el ancho entero del panel y manda ella.
⛔ Y con el fondo se fue TODO EL ORO de este bloque (rotulo, punto, filete,
brillo difuso, etiqueta sobre la foto). El oro sigue vivo en el resto del
sitio; aqui sobraba porque el argumento ya lo llevan los numeros.
=================================================================== */
.hotd-wrap{padding:64px 0;background:var(--white)}
/* 🔁 VUELVE A DOS COLUMNAS (Carlos, 1 sep 2026): *"la vamos a poner a mano
derecha, la villa como estaba... a la izquierda le vamos a poner la
descripcion"*. Se probo a una sola columna con la foto a todo el ancho y el
problema era de medida, no de gusto: la foto salia a 1133 x 638 px, o sea
**una pantalla entera ella sola**, asi que el titular con los dos precios y
la villa no se veian nunca a la vez. Y el argumento de este bloque es
comparar los dos precios: partido en dos scrolls deja de ser un argumento.
En dos columnas los dos se ven de un golpe. */
.hotd{
display:grid;grid-template-columns:1fr 430px;align-items:center;
border-radius:var(--radius);overflow:hidden;
background:rgba(16,178,194,.06);
border:1.6px solid rgba(16,178,194,.30);
box-shadow:var(--shadow);position:relative;
}
.hotd-cab{padding:40px 20px 40px 42px;color:var(--ink)}
/* --- 🔴 EL ROTULO: ROJO Y CON EL BORDE LATIENDO ---
Carlos: *"el hot deal lo vamos a poner en rojo y con animaciones en los
bordes"*.
⚠️ EL ROJO NO ES DE MARCA Y ESO ES JUSTO POR LO QUE FUNCIONA: es el unico
rojo de todo el sitio, asi que no compite con nada, y "hot deal" es el
lenguaje de alerta que el rojo ya sabe hablar. Estuvo en oro (se lavaba
contra el crema) y en turquesa (se fundia con el panel turquesa de detras,
que es el problema que lo tumbo).
⚠️ EL FILETE VA A 1.6px por la regla de la casa: con `devicePixelRatio` 1,25
un `1px` se pinta a 0,8 y el rojo llega descolorido.
🫀 El latido son DOS PULSOS Y UNA PAUSA, el mismo gesto del buscador del
hero, para que el sitio tenga un solo idioma de movimiento. Un aro continuo
se vuelve papel pintado a los diez segundos; con la pausa vuelve a llamar. */
.hotd-eyebrow{
display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
padding:7px 15px 7px 12px;border-radius:999px;
background:#fff;border:1.6px solid var(--rojo-hot,#cf2e22);
color:var(--rojo-hot,#cf2e22);font-size:.74rem;font-weight:700;
text-transform:uppercase;letter-spacing:.14em;
animation:hotdAro 4.6s ease-out infinite;
}
@keyframes hotdAro{
0% {box-shadow:0 0 0 0 rgba(207,46,34,.55)}
17% {box-shadow:0 0 0 8px rgba(207,46,34,0)}
18% {box-shadow:0 0 0 0 rgba(207,46,34,.55)}
35% {box-shadow:0 0 0 8px rgba(207,46,34,0)}
36%,100%{box-shadow:0 0 0 0 rgba(207,46,34,0)}
}
.hotd-dot{width:8px;height:8px;border-radius:50%;background:var(--rojo-hot,#cf2e22);flex:none;box-shadow:0 0 0 0 rgba(207,46,34,.7);animation:hotdPulse 2.2s infinite}
@keyframes hotdPulse{
0%{box-shadow:0 0 0 0 rgba(207,46,34,.55)}
70%{box-shadow:0 0 0 7px rgba(207,46,34,0)}
100%{box-shadow:0 0 0 0 rgba(207,46,34,0)}
}
@media(prefers-reduced-motion:reduce){.hotd-dot,.hotd-eyebrow{animation:none}}
.hotd-cab h2{
font-family:var(--display);font-weight:700;
font-size:clamp(1.7rem,2.7vw,2.2rem);color:var(--ink);margin:0 0 12px;
letter-spacing:-.015em;line-height:1.12;text-wrap:balance;
}
/* La entradilla lleva los dos precios y nada mas: es lo que Carlos llamo
"una pequena descripcion". */
.hotd-sub{color:var(--ink-soft);line-height:1.65;font-size:1rem;margin:0 0 22px;
max-width:52ch;font-weight:300}
.hotd-sub b{color:var(--ink);font-weight:600}
/* Los datos y el precio, debajo de la descripcion. El filete de arriba los
separa del texto sin meter una caja mas.
⛔ EL PRECIO NO VA EMPUJADO A LA DERECHA CON `margin-left:auto`. Se probo y
quedaba colgado solo en el extremo, a media pantalla de los datos que
explican que es lo que cuesta eso. En columna, los datos y su precio se leen
como una sola cosa, que es lo que son. */
.hotd-datos{display:flex;flex-direction:column;align-items:flex-start;gap:13px;
padding-top:20px;border-top:1px solid rgba(16,178,194,.28)}
/* --- LOS DATOS DE LA VILLA (columna izquierda) --- */
.hotd-specs{display:flex;flex-wrap:wrap;gap:9px 18px}
.hotd-specs span{display:inline-flex;align-items:center;gap:7px;
color:#3c4746;font-size:.92rem}
.hotd-specs span .ico svg{width:16px;height:16px;color:var(--turq,#10b2c2)}
/* Turquesa oscuro: es el color de TODOS los precios del sitio
(.card-price, .modal-price). Coherencia, no decision nueva. */
.hotd-precio{font-family:var(--display);font-weight:700;
font-size:1.68rem;letter-spacing:-.02em;color:var(--ink,#0b0c0d)}
/* --- LA VILLA, A LA DERECHA, CON GALERIA --- */
.hotd-card{
display:flex;flex-direction:column;position:relative;
margin:26px 26px 26px 0;border-radius:14px;overflow:hidden;background:#fff;
box-shadow:0 22px 46px -26px rgba(11,12,13,.55);
}
/* La foto grande es un enlace a la ficha. Proporcion 4:3 y `cover`: la columna
es estrecha y con la proporcion real (16:9) la villa salia en una tira baja. */
.hotd-ph{display:block;overflow:hidden;background:#e8e8e6}
.hotd-ph img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;
transition:transform .6s ease}
.hotd-ph:hover img{transform:scale(1.04)}
/* 🖼️ LAS MINIATURAS SE PASAN DE LADO, NO SE APILAN.
Con 10 fotos, una rejilla ocuparia mas alto que la foto grande. En tira con
scroll horizontal caben las que sean y el bloque no crece nunca.
⚠️ `scroll-snap` para que al arrastrar cada foto quede encajada, y la barra
de scroll se deja fina y visible A PROPOSITO: sin ella nadie sabe que hay
mas fotos a la derecha. Un carrusel sin pista de que continua no se usa. */
.hotd-strip{display:flex;gap:6px;padding:8px 10px 4px;overflow-x:auto;
scroll-snap-type:x mandatory;scrollbar-width:thin}
.hotd-strip::-webkit-scrollbar{height:5px}
.hotd-strip::-webkit-scrollbar-thumb{background:rgba(16,178,194,.45);border-radius:3px}
.hotd-mini{flex:none;width:62px;aspect-ratio:4/3;border-radius:7px;cursor:pointer;
background-size:cover;background-position:center;background-color:#e8e8e6;
border:1.6px solid transparent;padding:0;scroll-snap-align:start;
transition:border-color .18s,opacity .18s;opacity:.72}
.hotd-mini:hover{opacity:1}
/* La que se esta viendo lleva el filete de marca: es la unica forma de saber
en cual estas cuando hay diez iguales. */
.hotd-mini.es{opacity:1;border-color:var(--turq,#10b2c2)}
.hotd-vertodo{display:flex;align-items:center;justify-content:center;gap:8px;
margin:6px 14px 14px;padding:11px 16px;border-radius:10px;
background:var(--turq,#10b2c2);color:#fff;text-decoration:none;
font-size:.94rem;font-weight:600;transition:background .2s}
.hotd-vertodo:hover{background:var(--turq-dark,#0b7c87)}
.hotd-vertodo .ico svg{width:14px;height:14px}
@media(max-width:1000px){
/* Una columna: primero la descripcion, despues la villa. */
.hotd{grid-template-columns:1fr}
.hotd-cab{padding:32px 26px 26px}
.hotd-card{margin:0 26px 26px}
.hotd-ph img{aspect-ratio:16/9}
}
@media(max-width:900px){
.rs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.rhero{min-height:0;padding:88px 0 34px}
.rs-grid{grid-template-columns:1fr;gap:15px}
.rsearch{padding:20px 18px 18px}
.rs-acc{justify-content:stretch}
.rs-adv,.rs-go{flex:1;justify-content:center;text-align:center}
.hotd-wrap{padding:44px 0}
.hotd-cab{padding:26px 18px 22px}
.hotd-card{margin:0 14px 14px}
/* 📱 EL PRECIO PIERDE EL `margin-left:auto` Y SE PONE DEBAJO: en 390 px, los
cuatro datos ("3 habitaciones · 3.5 banos · Casa Linda · Totalmente
amueblada") ya ocupan dos renglones, y con el precio empujando a la derecha
quedaba colgado solo en una tercera linea. */
.hotd-datos{flex-direction:column;align-items:flex-start;gap:12px}
.hotd-precio{margin-left:0;font-size:1.4rem}
}
/* ===================================================================
FICHAS DE CATEGORIA - patron del sitio modelo, acabado de lujo
Titulo centrado + boton con borde debajo, ambos al centro.
=================================================================== */
/* 🚨 CUADRADO DE 285 px. CINCO MEDIDAS PROBADAS, EN ESTE ORDEN, Y EL CAMINO
EXPLICA EL NUMERO FINAL:
218 × 340 (vertical, 5 col) .. *"la vaina muy chiquita; en realtordr las
fotos están más grandes, más lujoso"*.
381 × 381 (cuadrado, 3 col) .. *"lo puse muy grande, que no ocupe tanto
espacio"*.
381 × 286 (4:3, 3 col) ....... la medida de realtordr. Aún grande.
381 × 238 (16:10, 3 col) ..... *"para los lados todavía está muy largo"*.
285 × 285 (cuadrado, 4 col) .. ✅ *"encuádralo, que tenga lo mismo de
largo y lo mismo de alto"*.
👉 LA LECCION: se estuvo bajando el ALTO cuando lo que sobraba era el ANCHO.
Achatar una tarjeta ancha la hace parecer más larga, no más pequeña. Lo que
Carlos pedía era **reducir la pieza entera y volver al cuadrado**, y eso se
hace con una columna más, no con la proporción.
⚠️ Con 5 elementos quedan 4 arriba y 1 abajo. Se asume: la alternativa era
3+2 con tarjetas de 381, que ya se descartó por grandes.
⚠️ `aspect-ratio` en vez de `height` fija: el alto lo manda el ancho de la
columna y el cuadrado se respeta en cualquier pantalla. */
/* 🔲 Esquina de 14 px, la misma que `.comtile` y que los botones grandes.
Ver el porqué completo en el comentario de `.comtile`. Las dos comparten
la rejilla de la portada: si se toca una, se toca la otra. */
.cattile{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;
box-shadow:0 10px 34px rgba(16,28,30,.13);transition:transform .5s cubic-bezier(.2,.6,.2,1),box-shadow .5s}
.cattile:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(16,28,30,.24)}
.cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.cattile:hover img{transform:scale(1.07)}
/* velo: mas oscuro abajo para que el texto siempre se lea */
.cattile::after{content:"";position:absolute;inset:0;z-index:1;transition:background .5s;
background:linear-gradient(180deg,rgba(14,24,26,.16) 0%,rgba(14,24,26,.30) 45%,rgba(14,24,26,.66) 100%)}
.cattile:hover::after{background:linear-gradient(180deg,rgba(14,24,26,.34) 0%,rgba(14,24,26,.46) 45%,rgba(14,24,26,.74) 100%)}
/* 🔵 FILETE INTERIOR EN TURQUESA DE MARCA, YA NO EN ORO (Carlos, 2 sep 2026:
*"quita el amarillo de oro y ponlo similar a como lo pusimos en Community"*).
⚠️ El oro que había ni siquiera era el oficial: `rgba(212,175,110)`, uno de
los oros inventados que quedaban pendientes. Mismo caso que en `.comtile`.
🚨 1.6px por la regla de la casa: con dpr 1,25 un `1px` se pinta a 0,8. */
.cattile::before{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;
border:1.6px solid rgba(16,178,194,0);transition:border-color .5s,inset .5s}
.cattile:hover::before{border-color:var(--turq,#10b2c2)}
/* 📐 EL NOMBRE ARRIBA Y EL BOTON EN EL MEDIO (Carlos, 2 sep 2026: *"pon el
nombre de la comunidad arriba y el View Community en el medio"*).
👉 Antes los dos vivían abajo, apilados sobre la parte más oscura del velo.
Separados, cada uno ocupa su tercio y **la foto se ve en medio en vez de
quedar tapada por un bloque de texto de 100 px**. Es justo lo que hace que
estas fichas se lean como una portada y no como un pie de foto. */
/* Con la tarjeta a ~390 px la letra puede crecer: a 1.32rem se veía perdida
dentro de tanta foto. `clamp` para que en el móvil no se desborde. */
.cattile .tile-label{position:absolute;left:0;right:0;top:22px;z-index:3;
text-align:center;color:#fff;font-family:var(--display);
font-size:clamp(1.3rem,1.9vw,1.62rem);font-weight:700;letter-spacing:.005em;line-height:1.18;
padding:0 18px;text-shadow:0 2px 18px rgba(0,0,0,.5);
transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.cattile:hover .tile-label{transform:translateY(-4px)}
/* 🚨 AL 62% Y NO AL 50%: con el nombre arriba y la tarjeta ya cuadrada, en el
centro exacto el botón se monta encima de los nombres de dos líneas. Medido
en pantalla. El centro óptico de una tarjeta con texto arriba no es el
centro geométrico. */
.cattile .tile-view{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);z-index:3;
display:inline-flex;align-items:center;gap:8px;
padding:12px 30px;border:1.6px solid rgba(255,255,255,.72);border-radius:2px;
background:transparent;color:#fff;
font-family:'Poppins',sans-serif;font-size:.75rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
opacity:1;transition:background .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.2,.6,.2,1)}
.cattile:hover .tile-view{transform:translate(-50%,-50%) scale(1.04)}
/* Al pasar el ratón se llena de turquesa de marca con la letra en blanco, igual
que el botón de las tarjetas de comunidad. Las dos rejillas hablan igual. */
.cattile .tile-view:hover,.cattile:hover .tile-view{background:var(--turq,#10b2c2);border-color:var(--turq,#10b2c2);color:#fff}
.cattile .tile-view .ico{display:none} /* el modelo no lleva icono: solo la palabra */
/* 🚨 AQUI NO PUEDE HABER `height`, Y ES EL FALLO QUE CARLOS CAZÓ EN EL TELÉFONO
(3 sep 2026): *"está muy para la izquierda, no coge el tamaño"*.
Estas dos líneas decían `height:290px` y `height:250px`, de cuando las
tarjetas eran verticales de altura fija. El 2 sep pasaron a ser CUADRADAS
con `aspect-ratio:1`, y nadie quitó los `height`.
👉 CON `aspect-ratio` Y `height` A LA VEZ, MANDA LA ALTURA: el navegador
calcula el ancho a partir de ella. O sea que la tarjeta se quedaba en
250 px de ancho **dentro de una rejilla de 323**, pegada a la izquierda y
dejando 73 px de hueco muerto a la derecha. Medido en la vista de teléfono.
⚠️ Un `height` y un `aspect-ratio` juntos no dan error ni avisan: uno gana
en silencio. Al cambiar la forma de una tarjeta hay que ir a buscar los
`height` que quedaron en las media queries.
⛔ Fuera también los `bottom` (96, 88, 38 px): el nombre vive ahora en
`top:22px` y el botón en `top:60%`, así que no hacían nada. Eran ruido que
escondía el `height` de al lado.
✅ Se queda solo lo que sí es de móvil: bajar el cuerpo de la letra. */
@media(max-width:900px){ .cattile .tile-label{font-size:1.5rem} }
@media(max-width:600px){ .cattile .tile-label{font-size:1.38rem} .cattile .tile-view{padding:10px 26px} }
/* =================== PAGINA DE CONTACTO (19 ago 2026) ===================
Cabecera sin foto a proposito: aqui no se viene a mirar, se viene a
escribir. Cuanto antes se vea el formulario, mejor. */
.pghero{background:linear-gradient(150deg,#fdfbf5 0%,#faf5e9 100%);
border-bottom:1px solid rgba(11,12,13,.08);
padding:150px 0 46px}
.pghero h1{font-family:var(--display);font-weight:700;color:var(--ink,#0b0c0d);
font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 12px}
.pghero p{color:#5b6462;font-size:1.03rem;line-height:1.65;max-width:56ch;margin:0}
/* El formulario manda: 1fr contra 340px, y en el orden de lectura va
primero. Los datos directos al lado, para quien prefiera llamar. */
.cont-grid{display:grid;grid-template-columns:1fr 340px;gap:38px;
align-items:start;margin-bottom:62px}
.cont-form{border:1px solid rgba(11,12,13,.09);box-shadow:0 24px 60px -34px rgba(10,30,28,.35)}
/* correo y telefono comparten fila en pantalla grande */
.cont-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cont-botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.cont-nota{margin:16px 0 0;font-size:.78rem;color:#8a938f;line-height:1.5}
.cont-aviso{margin:4px 0 0;font-size:.86rem;font-weight:500;color:#0b7c5f}
.cont-aviso.mal{color:#b23c26}
/* ---- tarjeta de datos directos ---- */
.cont-info{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.cont-card{display:flex;align-items:center;gap:14px;padding:18px 20px;
background:linear-gradient(150deg,#fdfbf5,#faf5e9);
border:1px solid rgba(16,178,194,.4);border-radius:16px}
.cont-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
border:3px solid #fff;box-shadow:0 8px 20px -8px rgba(10,30,28,.5)}
.cont-card b{display:block;font-size:.98rem;color:var(--ink,#0b0c0d);line-height:1.25}
.cont-card small{display:block;margin-top:3px;font-size:.68rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.cont-lista{list-style:none;margin:0;padding:0;
border:1px solid rgba(11,12,13,.09);border-radius:16px;background:#fff;overflow:hidden}
.cont-lista li{display:flex;align-items:flex-start;gap:13px;padding:15px 20px}
.cont-lista li + li{border-top:1px solid rgba(11,12,13,.07)}
.cont-lista .ico{flex:none;width:19px;height:19px;color:var(--turq);margin-top:2px}
.cont-lista small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:#96a09d;margin-bottom:3px}
.cont-lista a{color:var(--ink,#0b0c0d);font-weight:500;text-decoration:none}
.cont-lista a:hover{color:var(--turq)}
.cont-lista span:not(.ico){color:#4f5856;font-size:.92rem;line-height:1.45}
.cont-idiomas{display:flex;align-items:center;gap:10px;padding:14px 18px;
border-radius:14px;background:rgba(16,178,194,.08);
font-size:.86rem;color:#3f4a48}
.cont-idiomas .ico{flex:none;width:18px;height:18px;color:var(--turq)}
@media(max-width:900px){
.cont-grid{grid-template-columns:1fr;gap:26px}
/* En telefono los datos directos van DEBAJO del formulario y sin pegarse
arriba: `sticky` en movil tapa contenido al deslizar. */
.cont-info{position:static}
.pghero{padding:120px 0 34px}
}
@media(max-width:560px){
.cont-dos{grid-template-columns:1fr;gap:0}
.cont-form{padding:24px 20px}
.cont-botones .btn{flex:1 1 100%;justify-content:center}
}
/* ============ EQUIPO Y VENDER (19 ago 2026) ============
Comparten rejilla y tarjetas a proposito: un solo CSS que mantener.
Las tarjetas son de HECHOS del negocio, no de promesas: nada de
"los mejores" ni "líderes del mercado", que a un comprador
extranjero desconfiado eso le suena a folleto. */
/* ---- la ficha de la persona ---- */
.eq-ficha{display:grid;grid-template-columns:300px 1fr;gap:44px;
align-items:start;margin-bottom:62px}
.eq-foto img{width:100%;height:auto;border-radius:20px;display:block;
box-shadow:0 26px 60px -30px rgba(10,30,28,.6)}
.eq-texto h2{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.3rem);
font-weight:700;color:var(--ink,#0b0c0d);margin:0 0 6px;line-height:1.1}
.eq-cargo{display:block;margin-bottom:20px;font-size:.72rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.eq-texto p{color:#4f5856;line-height:1.8;font-size:1rem;margin:0 0 16px;max-width:62ch}
.eq-datos{list-style:none;margin:26px 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
border:1px solid rgba(11,12,13,.09);border-radius:16px;overflow:hidden;background:rgba(11,12,13,.09)}
.eq-datos li{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;background:#fff}
.eq-datos .ico{flex:none;width:19px;height:19px;color:var(--turq);margin-top:2px}
.eq-datos small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:#96a09d;margin-bottom:3px}
.eq-datos a{color:var(--ink,#0b0c0d);font-weight:500;text-decoration:none}
.eq-datos a:hover{color:var(--turq)}
.eq-datos span:not(.ico){color:#4f5856;font-size:.92rem}
.eq-botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* Bloque con el titular centrado (Carlos, 20 ago 2026). Las tarjetas
siguen alineadas a la izquierda: centrar párrafos largos los hace
difíciles de leer, solo se centra la cabecera. */
.cblock-centro > h2,.cblock-centro > .csub{text-align:center;
margin-left:auto;margin-right:auto}
/* SIN max-width y con `vw` alta: el titular se estira A LO LARGO y cae en
UNA sola línea (Carlos, 20 ago 2026). Con 22ch se partía en tres y se
veía como una columna estrecha en medio de la página.
⚠️ Si se alarga el texto, volver a medir que siga cabiendo en una línea. */
/* Al acortar el titular puede ir MUCHO más grande, que es de donde sale
la sensación de lujo: menos palabras, más tamaño, más aire. */
.cblock-centro > h2{max-width:none;white-space:nowrap;
font-size:clamp(1.5rem,4.35vw,3.5rem);line-height:1.12;letter-spacing:-.025em}
/* ---- variante para titulares de línea LARGA ----
El tamaño de arriba está calculado para frases cortas tipo "Somos tu
aliado estratégico". Con una línea de unos 43 caracteres, a 4.35vw el
texto mide MAS que su propia caja (medido: 1197 px de texto en una caja
de 1188) y, como lleva `nowrap`, no se encoge: se sale por el lado.
⚠️ Y no basta con bajar el tope en rem, porque el problema no aparece
solo en pantalla ancha: el `vw` crece más rápido que la caja, así que
por debajo de ~1290 px de ventana se sale igual. Hay que bajar LOS DOS,
el `vw` y el tope.
Con 3.2vw la frase larga ocupa ~992 px dentro de los 1188 y queda aire
por los dos lados a cualquier ancho.
👉 Va en su propia clase, NO en la regla de arriba: vender.html usa el
mismo `.cblock-centro` con titulares cortos y allí el tamaño grande es
justo lo que Carlos aprobó. */
.cblock-centro > h2.h2-linealarga{font-size:clamp(1.4rem,3.2vw,2.9rem)}
.cblock-centro > .csub{max-width:52ch;margin-bottom:40px;font-size:1.02rem}
/* ⚠️ ESTA LÍNEA ESTUVO FINA (peso 300, gris suave) Y CARLOS LA CAMBIÓ: la
quiere "en negrita, bien reluciente y llamativa". Deja de ser una nota
al pie del titular y pasa a ser la segunda frase que se lee.
Sube de 16 a 22px, de peso 300 a 600 y de gris a tinta. */
.csub-lujo{font-size:clamp(1.05rem,1.6vw,1.38rem);font-weight:600;
letter-spacing:-.005em;line-height:1.5;color:var(--ink,#0b0c0d);margin-top:18px}
/* ---- párrafo justificado de "quiénes somos" (solo comprar.html) ----
Carlos, 24 ago 2026: "que la letra esté del mismo largo todo, que sea un
párrafo del mismo largo todo, con lo importante resaltado".
`justify` cuadra el bloque por los dos lados y `text-align-last:center`
deja la última línea centrada. Sin eso, la última línea queda suelta a la
izquierda y rompe la simetría de toda la sección, que va centrada.
⚠️ `hyphens:auto` NO ES OPCIONAL AQUI. Justificado y sin partir palabras,
el navegador estira los espacios para cuadrar y aparecen "ríos" blancos
atravesando el párrafo: es lo contrario del acabado caro que se busca.
⚠️ Sube de 52ch a 58ch por lo mismo: cuanto más estrecha la columna,
menos palabras por línea y peores los ríos al justificar.
Va en su propia clase y no en `.csub-lujo` porque esa la comparten
vender.html y el bloque de testimonios, donde el texto es corto y
justificar no aporta nada. */
.cblock-centro > .csub.csub-parrafo{max-width:66ch;
text-align:justify;text-align-last:center;hyphens:auto;line-height:1.72}
/* ---- LA PLACA ----
Carlos, 24 ago 2026: "que no se vea ahí tan vacío, como letras simples".
El texto estaba bien pero flotaba en medio del crema, sin nada que lo
sostuviera, y por eso se leía barato.
👉 NO se inventa un estilo nuevo: es exactamente el acabado de las fichas
`.eq-card` (crema en degradado, filo turquesa de un píxel y un segundo
filo por dentro a 5 px). Ese doble filo es el truco de las cosas caras:
imita el bisel de un marco y cuesta un `::before`.
⛔ NADA DE RAYITAS DECORATIVAS a los lados del texto. Carlos las tiene
fichadas como tic de IA y las manda quitar siempre. El lujo aquí lo dan
el aire y el filo, no un adorno.
⚠️ El ancho sube de 58ch a 66ch porque el `box-sizing` es border-box y el
relleno se come la columna: sin subirlo, el texto queda más estrecho que
antes y aparecen ríos al justificar. */
.csub-placa{position:relative;border-radius:20px;padding:38px 46px 36px;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 22px 50px -36px rgba(10,30,28,.55);margin-top:30px}
.csub-placa::before{content:"";position:absolute;inset:5px;border-radius:15px;
pointer-events:none;border:1px solid rgba(16,178,194,.15)}
/* ---- EL SUBRAYADO DE LAS PRUEBAS ----
La idea del subrayado es de Carlos y aquí resuelve algo real: el párrafo
entero ya va en peso 600, así que la negrita sola casi no se despegaba.
⚠️ NO se usa `text-decoration:underline`. El navegador lo pinta pegado a
la letra y atravesando las colas de la "y", la "j" y la "g": se ve
barato y es lo primero que delata un sitio hecho a la carrera.
👉 Se pinta un degradado de 2 px colocado al 92% de la altura de la
línea. Queda separado de la letra, no toca ninguna cola y se puede dar
el color y el grosor exactos.
`box-decoration-break:clone` es obligatorio: sin él, cuando una de estas
frases se parte entre dos líneas (y se parten, el párrafo va justificado
y con guiones), el trazo solo aparece en el primer trozo.
El turquesa va al 55% y no lleno: aquí compite con el titular, y a plena
fuerza le robaría protagonismo. Y por eso la negrita baja de 800 a 700,
porque ahora el que marca es el trazo, no el peso. */
.csub-parrafo b{font-weight:700;color:var(--ink,#0b0c0d);
background:linear-gradient(rgba(16,178,194,.55),rgba(16,178,194,.55))
0 92%/100% 2px no-repeat;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:640px){
/* En móvil la columna es estrecha y justificar solo produce ríos.
Se vuelve a centrado, que a ese ancho se ve mejor. */
.cblock-centro > .csub.csub-parrafo{text-align:center;hyphens:manual}
/* La placa se estrecha, si no el texto queda en un canal de nada. */
.csub-placa{padding:26px 20px 24px;border-radius:16px}
}
/* ⚠️ TODA EN NEGRO. Llevó turquesa en un trozo y se quitó (Carlos, 20 ago
2026): en esa pantalla ya hay dos titulares a dos colores y una cuarta
frase con color dejaba el turquesa sin fuerza. Si todo destaca, nada
destaca. El color se reserva para los TITULARES. */
.csub-lujo .hl{color:inherit;font-weight:inherit}
/* El titular arranca justo debajo de la franja crema, sin el hueco de
62px que trae `.cbody` por defecto. Solo en las páginas cuya cabecera
es la centrada, o sea Vender. */
.pghero-centro + .cbody{padding-top:40px}
/* En pantalla estrecha el `nowrap` no cabe de ninguna manera: se deja
fluir en varias líneas, que ahí es lo correcto. */
@media(max-width:820px){
.cblock-centro > h2{white-space:normal;font-size:clamp(1.45rem,4.6vw,2rem)}
}
/* ---- las tarjetas de "por qué" / "lo que hacemos" ---- */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
/* CENTRADAS (Carlos, 20 ago 2026: "que estén centradas todas del mismo
largo, no desorganizadas"). `align-items:center` alinea el icono y el
rótulo, y `justify-content` no hace falta porque las cinco tarjetas de
la fila ya se estiran igual. */
/* ⛔ Estas tarjetas llevaron primero un NÚMERO GIGANTE en la esquina y
después un rótulo "PASO 1". Carlos quitó los dos: *"ese paso 1 ya no
atrae, olvidemos los pasos, dejemos solo el icono"*. NO reponerlos.
El lujo aquí viene del BORDE DOBLE dorado (el mismo gesto que el resto
del sitio) sobre blanco, con la sombra justa para que la tarjeta
flote un poco sin parecer un botón. */
/* ⛔ Estas tarjetas eran BLANCAS con filete dorado y Carlos las tumbó
(20 ago 2026): "están muy pobres, se ven muertas ahí y dañan el sitio;
llévalas al mismo nivel que 'Primero la confianza'". Ahora comparten
material con `.filo`: el MISMO crema y el turquesa de marca en vez del
dorado. La sección entera se lee como una sola pieza. */
.eq-card{position:relative;border-radius:18px;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 20px 46px -32px rgba(10,30,28,.55);
padding:30px 26px 28px;text-align:center;
display:flex;flex-direction:column;align-items:center;
transition:transform .25s,box-shadow .25s,border-color .25s}
/* el filete interior: el detalle que lo hace ver caro */
.eq-card::before{content:"";position:absolute;inset:5px;border-radius:13px;
pointer-events:none;border:1px solid rgba(16,178,194,.15)}
.eq-card > *{position:relative;z-index:1}
.eq-card:hover{transform:translateY(-4px);border-color:rgba(16,178,194,.62);
box-shadow:0 26px 54px -28px rgba(10,30,28,.45)}
/* ⭐ EL DISCO VA MACIZO EN TURQUESA, con el icono en crema recortado.
Antes era un turquesa al 9% y el icono se perdía: eso era lo que hacía
que la tarjeta pareciera muerta. Un disco de color por tarjeta le da
ancla a la fila entera. */
.eq-card > .ico{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
background:var(--turq);color:#fffdf8;
box-shadow:0 12px 22px -12px rgba(16,178,194,.5);margin-bottom:20px;
transition:transform .25s}
.eq-card:hover > .ico{transform:translateY(-1px) scale(1.04)}
.eq-card > .ico svg{width:31px;height:31px}
/* El título EN UNA SOLA LÍNEA y más grande (Carlos, 20 ago 2026). Sin
`max-width`, con `nowrap` y una `vw` que lo escala junto con la tarjeta,
que también crece con la ventana. ⚠️ Si se alarga un título, hay que
medir que siga entrando; el más largo hoy es el del paso 3. */
/* Los cinco títulos van en TURQUESA a propósito: el turquesa suelto en una
frase parece un subrayador; repetido en los cinco es el sistema de color
del sitio. No compite con el titular de la sección porque ese mide 56px
y estos 18: se leen como familia, no como pelea. */
.eq-card h3{font-size:clamp(.98rem,1.24vw,1.16rem);font-weight:700;
color:var(--turq);margin:0 0 12px;line-height:1.3;
max-width:none;white-space:nowrap;letter-spacing:-.015em}
/* JUSTIFICADO (Carlos: "que el mismo largo de abajo sea el mismo largo de
arriba, que no estén dislocadas"). Todas las líneas llegan a los dos
bordes y la última se centra, que en una tarjeta centrada es lo que
cierra bien. `hyphens` evita los huecos grandes entre palabras, que es
lo que afea un justificado en columna estrecha. */
/* Tinta casi negra y peso 500, NO negrita: el gris claro se leía como letra
pequeña de contrato y por eso parecía texto de relleno. Cinco líneas en
negrita de verdad se leerían peor y parecerían un aviso. */
.eq-card p{margin:0;color:var(--ink,#0b0c0d);font-size:.945rem;line-height:1.7;
font-weight:500;text-align:justify;text-align-last:center;hyphens:auto}
/* ---- segunda llamada al embudo, debajo de las seis fichas ----
Sin caja ni fondo a propósito: es un respiro, no otra sección. Lo único
que se ve es la frase y el botón, que ya se mueve solo (`.btn-brilla`). */
.cta-medio{margin-top:44px;text-align:center}
.cta-cierre{margin-top:56px}
/* Las vías directas del cierre necesitan más aire que dentro de una ficha:
allí van pegadas a dos botones pequeños, aquí cuelgan de un botón grande y
con 18px se leían como parte de él. Y `padding-bottom` porque debajo empieza
el pie negro de golpe: sin ese respiro las pastillas quedan cortadas contra
el borde. */
.cta-cierre .cta-directo{margin-top:30px;padding-bottom:6px}
/* ---- titular de los socios ----
Va CENTRADO y del mismo tamaño que el de la filosofía a propósito:
empieza con "Y lo hacemos junto a...", o sea que es la continuación de
aquella frase y tiene que pesar igual, no menos.
`text-wrap:balance` reparte las dos líneas por igual; sin él la segunda
quedaba con tres palabras sueltas y parecía un error. */
/* ⚠️ EL TITULAR DEL EQUIPO COMPARTE ESTA REGLA A PROPOSITO (Carlos, 28 ago
2026: "del mismo largo y del mismo tamaño de letra que el de las
instituciones, con dos colores, para que se vea un titulo real").
Van juntos en el mismo selector y NO copiados en dos sitios: si alguien
toca el tamaño de uno, el otro le sigue solo. Son las dos ultimas
secciones de la pagina y desnivelarlas se nota al instante. */
.tp-bloque > h2,
.eqv > h2{max-width:40ch;margin:0 auto 32px;text-align:center;
text-wrap:balance;font-size:clamp(1.3rem,2.85vw,2.25rem);
line-height:1.2;letter-spacing:-.022em}
/* ---- LA FILOSOFÍA ----
⚠️ NO lleva el estilo de las tarjetas (blanco con filete dorado) A
PROPÓSITO. Carlos, 20 ago 2026: "ese estilo ya se lo pusiste a las
fichas, aquí no cuadra; que quien lo lea tenga que detenerse a leer".
Es el ÚNICO bloque oscuro de toda la página, y esa es toda la idea:
rompe el ritmo de la pantalla y el ojo se para solo. Sobre negro, el
turquesa de "confianza" y el filete dorado se leen como una joyería. */
/* ⛔ Este bloque fue NEGRO y Carlos lo tumbó (20 ago 2026): "ese fondo
negro no le pega, arropa mucho y quita la buena visibilidad". Va en
CREMA, casi el mismo de la página, solo un punto más claro para que
levante. **No volver a proponer fondo oscuro aquí.**
Lo que lo mantiene vivo es el BORDE, no el fondo. */
.filo{position:relative;overflow:hidden;isolation:isolate;
max-width:920px;margin:0 auto;border-radius:22px;
box-shadow:0 26px 60px -40px rgba(10,30,28,.55);
padding:58px 54px 56px;text-align:center}
/* El borde que da vueltas, en TURQUESA de marca. Es un cuadrado más grande
que la caja, con un degradado cónico, girando; `overflow:hidden` lo
recorta a la forma del panel y `::after` lo tapa dejando solo 1,6 px de
filete. Es el mismo gesto del aro de la foto de Carlos, aplicado a un
rectángulo. Frase gancho = tiene que respirar. */
.filo::before{content:"";position:absolute;top:50%;left:50%;
width:165%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;
background:conic-gradient(from 0deg,
rgba(16,178,194,.26) 0deg,rgba(16,178,194,.26) 188deg,
rgba(16,178,194,.62) 258deg,#3ed2e2 308deg,#b6f0f7 330deg,
rgba(16,178,194,.62) 348deg,rgba(16,178,194,.26) 360deg);
animation:filo-gira 7s linear infinite}
@keyframes filo-gira{to{rotate:1turn}}
/* El relleno crema, que deja el filete asomando por los cuatro lados. */
.filo::after{content:"";position:absolute;inset:1.6px;border-radius:20.4px;
z-index:1;pointer-events:none;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%)}
.filo > *{position:relative;z-index:2}
.filo h2{max-width:none;margin:0 0 26px;color:var(--ink,#0b0c0d);white-space:nowrap;
font-size:clamp(1.3rem,2.85vw,2.2rem);line-height:1.15;letter-spacing:-.025em}
/* ⚠️ `text-wrap:balance` añadido el 1 sep 2026: Carlos vio que los renglones
salían "uno de un largo y otro de otro" y pidió que quedaran parejos. El
navegador reparte las palabras para igualarlos en vez de llenar cada línea
hasta el borde.
📌 Ojo: solo actúa en párrafos cortos. Estos dos están en el límite; si
alguien los alarga, dejará de funcionar y volverán los renglones desiguales.
🔁 La misma regla está en `.masq-filo p` de comprar.html. Van juntas. */
.filo p{margin:0 auto;max-width:56ch;color:var(--ink,#0b0c0d);font-weight:500;
font-size:clamp(1rem,1.42vw,1.12rem);line-height:1.8;text-wrap:balance}
.filo p + p{margin-top:20px}
/* Lo resaltado va en NEGRO más fuerte, no en turquesa: aquí el turquesa es
solo de "confianza" y del borde. Dos cosas destacando a la vez se anulan. */
.filo b{color:var(--ink,#0b0c0d);font-weight:700}
/* "Que la letra se le mueva algo" (Carlos): sube y aparece al entrar en
pantalla, escalonado. Se dispara con la clase `.visto`, que pone
`paginas.js` con un IntersectionObserver. Sin JS el bloque se ve igual,
porque `.filo` sin `.visto` solo afecta a `.fu`. */
.filo .fu{opacity:0;transform:translateY(15px);
transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.filo.visto .fu{opacity:1;transform:none}
.filo.visto .fu:nth-child(2){transition-delay:.15s}
.filo.visto .fu:nth-child(3){transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
.filo::before{animation:none}
.filo .fu{opacity:1;transform:none;transition:none}
}
@media(max-width:820px){
.filo{padding:38px 24px 36px;border-radius:18px}
.filo h2{white-space:normal;font-size:clamp(1.28rem,5vw,1.8rem)}
}
/* ---- la puerta directa, debajo de los tres botones ----
Deliberadamente DISCRETA: enlace subrayado fino, no botón. Si compitiera
en peso con los tres de arriba se llevaría a los indecisos por el camino
que no deja ni motivo ni presupuesto. Tiene que ser visible para el que
ya venía decidido a escribir, e invisible para el que todavía está
eligiendo. De ahí el gris y el tamaño pequeño: se lee, no se grita. */
/* =====================================================================
"MÁS QUE AGENTES INMOBILIARIOS" · solo comprar.html
---------------------------------------------------------------
Dos columnas: antes de firmar / después de firmar. La estructura es el
argumento, así que el diseño solo tiene que dejarla leer.
👉 AQUI LOS ICONOS VAN DESNUDOS, SIN EL DISCO TURQUESA. No es olvido:
los discos rellenos ya los llevan los botones gancho y las fichas de
vender.html. Ocho discos macizos aquí convertirían la sección en una
pared de círculos, y ademas competirian con los botones del embudo que
viene justo debajo. Un icono limpio a línea se lee como una lista
editorial, que es lo que esto es.
===================================================================== */
/* ---- el equipo dentro de vender.html ----
Va suelto, NO dentro de `.cblock-centro`, y es a proposito: esa clase le
pone `white-space:nowrap` a sus h2 y este titular se saldria de la
pantalla. Reutiliza `.masq-h2`, que ya viene centrado y con `text-wrap:
balance`, y `.eq-fotos` para las tres tarjetas, asi que hereda gratis el
alto igualado, el brillo escalonado de los botones y el apilado en movil.
El margen de arriba es amplio porque encima queda el panel de la
filosofia, que lleva su propio borde girando: pegarlos ensuciaria los
dos. */
/* ⚠️ EL MARGEN DE ARRIBA ES GRANDE A PROPOSITO (Carlos, 28 ago 2026: "está
muy pegado a las fichas de las biografías y a los partners").
Encima queda la fila de logos de bancos y bufetes, que es visualmente
ligera —logos sueltos sobre crema— y sin un hueco de verdad las caras se
le montaban encima y parecian parte de la misma fila. 104 px lo separa
en dos secciones distintas sin necesidad de una linea ni un fondo. */
.eqv{margin-top:104px}
.eqv .eq-fotos{margin-top:46px}
@media(max-width:860px){ .eqv{margin-top:70px} }
.masq{margin-top:78px}
/* ⚠️ EL BLOQUE DE INSTITUCIONES QUE VA DESPUES NECESITA SU AIRE (1 sep 2026).
En vender.html el `.tp-bloque` viene detras del panel `.filo`, que trae su
propio margen; en comprar.html viene detras de `.masq`, que no lo tiene, y
el titular "Y lo hacemos junto a las instituciones..." quedaba PEGADO a la
ultima ficha de la columna. Se veia como si formara parte de ella. */
.masq + .tp-bloque{margin-top:78px}
/* ⚠️ `max-width` sube a 26ch desde que el titular es "Comprar es un día /
Vivir con la villa son años": con 22ch la segunda linea se partia en tres.
El margen inferior sube a 34 porque ya no hay subtitulo debajo que separe
del contenido. */
/* ---- La filosofía, debajo del titular ----
🚨 COPIA EXACTA DEL TRATAMIENTO DE `.filo p` EN vender.html, Y NO ES
OPCIONAL. Carlos lo cazó el 1 sep 2026: "en la de Vender tú la pusiste en
negrita; siempre analiza todo, porque debe haber coherencia".
Aquí estaba en gris #4a4b4c y peso 400, y allí va en NEGRO y peso 500. Son
los dos párrafos de filosofía del sitio y tienen que pesar lo mismo: si uno
se lee como nota al pie y el otro como declaración, la marca suena a dos
voces distintas.
👉 Los valores están calcados a mano y no heredados a propósito: `.filo`
vive dentro de un panel con borde y aquí no hay panel, así que compartir la
regla obligaría a arrastrar el panel entero.
🔁 SI SE TOCA `.filo p` EN vender.html, TOCAR TAMBIÉN ESTA.
⚠️ `text-wrap:balance` es lo que iguala el largo de los renglones, que es
lo otro que pidió Carlos ("quiero que estén todas del mismo largo"). Solo
funciona con párrafos cortos: por eso el texto de aquí se redujo a una sola
frase. En un párrafo de cinco líneas el navegador deja de balancear.
⚠️ `max-width` en ch y no en px: lo que hace legible un párrafo centrado es
el número de caracteres por línea, no su ancho en píxeles. */
.masq-filo{max-width:56ch;margin:0 auto 44px;text-align:center}
.masq-filo p{margin:0 0 14px;color:var(--ink,#0b0c0d);font-weight:500;
font-size:clamp(1rem,1.42vw,1.12rem);line-height:1.8;text-wrap:balance}
.masq-filo p:last-child{margin-bottom:0}
/* Lo resaltado sube a 700, igual que `.filo b` en Vender. Y en negro, no en
turquesa: dos cosas destacando a la vez se anulan. */
.masq-filo strong{color:var(--ink,#0b0c0d);font-weight:700}
/* ⚠️ `max-width` en 34ch: con 26 la primera frase ("Estamos desde tu primera
pregunta", 33 caracteres) se partia en dos y el titular salia en TRES
lineas en vez de dos. La gracia de un titular a dos colores es que cada
color ocupe su propia linea; en tres se deshace.
🔁 Si se cambia el texto del titular, contar los caracteres de la frase mas
larga y dejar este numero un par de puntos por encima. */
.masq-h2{text-align:center;max-width:34ch;margin:0 auto 20px;text-wrap:balance;
font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.15;letter-spacing:-.025em}
/* 🚨 ESTO NO ES DECORATIVO: hace que la segunda mitad caiga SIEMPRE en su
propia linea sin depender del
. En este proyecto ya paso que al
esconder un
en movil las dos mitades quedaban pegadas y sin espacio
entre ellas ("día.Vivir"), porque el salto de linea ERA la separacion. */
.masq-h2 .hl{display:block}
/* ⛔ `.masq-sub` ya no se usa: el subtitulo se quito el 31 ago 2026 porque
hablaba de la competencia. La regla se deja por si vuelve a hacer falta en
otro bloque, pero NO se repone aqui solo por llenar el hueco. */
.masq-sub{text-align:center;max-width:46ch;margin:0 auto;
font-size:clamp(1rem,1.5vw,1.24rem);font-weight:600;line-height:1.5;
color:var(--ink)}
/* ⚠️ EL BLOQUE VA ESTRECHADO Y CENTRADO, NO A TODO EL ANCHO DEL WRAP
(Carlos, 26 ago 2026: "las dos columnas están muy a la izquierda; que
estén a la misma distancia de margen a derecha e izquierda").
El problema no era que estuvieran descentradas —el grid ocupaba el wrap
entero, o sea 1200 px— sino que OCUPABAN DEMASIADO. A ese ancho el texto
llega hasta el filo de la pantalla y desaparece la sensacion de margen,
mientras el titular de encima sí esta acotado a 22ch. El ojo compara las
dos cosas y lee el bloque de abajo como "corrido hacia fuera".
Con 1000 px y `margin auto` quedan unos 100 px de aire a cada lado y las
columnas caen debajo del titular en vez de escaparse por los lados. */
.masq-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 60px;
max-width:1000px;margin:52px auto 0}
/* El rótulo de cada columna copia el tratamiento del cargo de las fichas
(mayúsculas pequeñas en turquesa) para que se lea como parte del mismo
sistema y no como un titular más. */
/* ---- El titular de las dos columnas ----
⚠️ MAS PEQUEÑO QUE `.masq-h2` A PROPOSITO, y esa jerarquia es lo que hace
que el bloque funcione: encima hay un titular grande y un párrafo de
filosofía. Tres piezas al mismo tamaño se pelean entre ellas; escalonadas
(grande → texto → medio → columnas) la página se lee de corrido.
👉 `.hl` en `display:block` por lo mismo que en `.masq-h2`: la segunda
mitad cae siempre en su línea sin depender del
. */
.masq-h3{text-align:center;max-width:30ch;margin:0 auto 34px;text-wrap:balance;
font-family:var(--display);font-weight:700;
font-size:clamp(1.18rem,2.05vw,1.6rem);line-height:1.25;letter-spacing:-.018em;
color:var(--ink,#0b0c0d)}
.masq-h3 .hl{display:block}
/* ⛔ `.masq-rotulo` YA NO SE USA EN comprar.html. Eran "LO QUE SABEMOS" y
"CÓMO TRABAJAMOS" y Carlos los tumbó el 1 sep 2026 ("no pega, tiene que ser
una frase completa"): dos palabras en mayusculitas son una etiqueta de
categoría, el mismo fallo que "Bufetes"/"Bancos" en vender.html. Los
sustituye el `.masq-h3` de arriba, que además presenta las dos columnas a
la vez. La regla se deja por si hace falta en otro sitio. */
.masq-rotulo{margin:0 0 22px;color:var(--turq);font-weight:600;
font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.masq-item{display:flex;gap:15px;margin-bottom:26px}
.masq-item:last-child{margin-bottom:0}
/* `margin-top` alinea el icono con la primera línea del título, no con el
borde del bloque: sin eso queda flotando un par de píxeles alto. */
.masq-item > .ico{flex:0 0 auto;width:26px;height:26px;color:var(--turq);margin-top:2px}
.masq-item > .ico svg{width:26px;height:26px}
/* ⚠️ PESO 600, NO 700, DESDE QUE CADA PUNTO ES UNA FRASE ENTERA (31 ago
2026). Antes eran titulos de cuatro o cinco palabras y el 700 les daba
presencia; una frase completa en 700 se lee como un grito y ademas
emborrona, porque no hay parrafo gris debajo que la contraste.
El `margin-bottom` cae a 0 por lo mismo: ya no hay nada debajo. */
.masq-item h3{margin:0;font-size:1.02rem;font-weight:600;
color:var(--ink);letter-spacing:-.008em;line-height:1.45}
.masq-item p{margin:0;color:#4a4b4c;font-size:.93rem;line-height:1.6}
/* La fila de banderas. Van pequeñas (20x13) porque son un apoyo de lectura,
no un adorno: tienen que reconocerse de un vistazo sin robarle el sitio
al icono turquesa de la izquierda, que es el que ordena la columna. */
.masq-idiomas,
.eq-idiomas{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px}
.masq-idiomas > span,
.eq-idiomas > span{display:inline-flex;align-items:center;gap:7px;
font-size:.86rem;font-weight:600;color:var(--ink)}
/* ---- LAS BANDERAS, ENCIMA DE LA FOTO DE CADA PERSONA ----
Carlos, 28 ago 2026: "dentro de la foto, arriba a la mano derecha,
montada encima, como lo tienen los Perdomo".
⛔ ANTES ESTABAN EN UNA FILA COMUN BAJO EL TITULAR y se quitaron. Alli
decian "el equipo habla estos idiomas", que no le sirve a nadie: el
visitante no quiere saber que idiomas hay en la casa, quiere saber si
LA PERSONA A LA QUE VA A ESCRIBIR habla el suyo. Pegadas a la cara, la
respuesta llega antes de leer una sola palabra.
⛔ ESTUVIERON ENCIMA DE LA FOTO, arriba a la derecha, al estilo de C21
Perdomo, y se bajaron (Carlos, 28 ago 2026: "por el tipo de fondo no se
ve bien"). Y acerto: en un retrato de estudio la unica zona con color
fuerte tiene que ser la cara. Tres banderas encima del fondo oscuro se
convertian en el segundo foco de la tarjeta y le robaban la mirada al
que de verdad importa. Ademas obligaban a una pastilla blanca detras,
que parecia una calcomania.
Abajo, en el crema, no compiten con nada y siguen leyendose de un
vistazo, que era todo lo que se les pedia.
📍 VAN DEBAJO DEL CARGO, no en la linea del nombre: "Carlos Daniel
Bierd" mas tres banderas se pasa de los ~250 px que mide la tarjeta y se
partiria en unas personas si y en otras no. Asi el bloque de identidad
queda limpio: cara → nombre → cargo → idiomas → biografia.
🏳️ SON IMAGENES, NO ICONOS DEL SISTEMA. Las banderas dibujadas a mano en
iconos.js se descartaron: la de España quedaba sin el escudo (era la
version civil, y Carlos lo cazo) y la Union Jack a 22 px pedia un
recorte que ensuciaba el codigo. Ahora salen de assets/banderas/, que
son las mismas de flagcdn que usa Century 21 pero DESCARGADAS: mismo
detalle y sin depender de un servidor ajeno.
⚠️ Llevan `width`/`height` en el HTML ademas de en el CSS. Sin eso, la
tarjeta da un salto al cargar las imagenes, justo debajo del cargo.
El filo gris fino es imprescindible: la de Francia y la de Inglaterra
tienen blanco en el borde y sin el se derriten sobre el crema. */
.eq-banderas{display:flex;justify-content:center;align-items:center;
gap:7px;line-height:0;margin:0 0 14px}
/* ⚠️ EL SELECTOR VA CON `.eq-banderas` DELANTE Y ES OBLIGATORIO. La regla
`.eq-persona img{width:100%;height:245px;object-fit:cover}` es la del
retrato, y a igualdad de peso gana a un `.bandera` suelto: las banderas
salieron a 370x245 px, del tamaño de la foto. Con el padre delante, este
selector pesa mas y manda. NO simplificarlo. */
.eq-banderas .bandera{display:block;width:22px;height:15px;border-radius:2px;
object-fit:cover;
box-shadow:0 0 0 1px rgba(11,12,13,.16), 0 1px 2px -1px rgba(11,12,13,.4)}
/* ⚠️ EL HUECO VA CUADRADO (21x21) AUNQUE LA BANDERA SEA APAISADA. El helper
SVG() de iconos.js fija `viewBox="0 0 24 24"` para todos los iconos del
sitio, asi que si aqui se pone 21x13 el navegador aplasta el dibujo. La
bandera esta dibujada entre y=5 e y=19, o sea centrada en el cuadro, de
modo que en una caja cuadrada queda a la altura correcta sola. */
.masq-idiomas .ico,
.eq-idiomas .ico{display:inline-flex;flex:0 0 auto;width:21px;height:21px}
.masq-idiomas .ico svg,
.eq-idiomas .ico svg{width:21px;height:21px}
@media(max-width:860px){
/* Una sola columna. Y el rótulo de la segunda se separa más, porque al
apilarse "Después de que firmes" pierde su papel de encabezado y se
confundiría con un punto más de la lista de arriba. */
.masq-grid{grid-template-columns:1fr;gap:0}
.masq-col + .masq-col{margin-top:40px}
.masq{margin-top:56px}
}
/* ---- "Contáctame directamente", dentro de la ficha de la persona ----
Vive dentro de .eq-persona, que es una columna estrecha (~250 px), así que
todo aquí está medido para ese ancho. El padding lateral copia el de
.eq-linea para que el rótulo quede alineado con la biografía de encima. */
.cta-directo{margin:18px 0 4px;padding:0 18px;text-align:center;font-size:.9rem}
/* El rótulo. Va con el mismo tratamiento que el cargo de arriba (mayúsculas,
espaciado abierto, turquesa) para que se lea como parte de la ficha y no
como un anuncio pegado encima. Pequeño a propósito: quien manda aquí son
los dos botones, esto solo dice para qué son. */
.cta-directo-rotulo{margin:0 0 10px;color:var(--turq);font-weight:600;
font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
/* Las dos vías, SIEMPRE VISIBLES. Estuvieron detrás de un desplegable y era
un error: la animación que tenía que llamar la atención solo aparecía
después del clic, o sea para quien ya había decidido.
Los
. En este proyecto ya paso que al esconder un
en movil las dos mitades quedaban pegadas y sin espacio entre ellas ("día.Vivir"), porque el salto de linea ERA la separacion. */ .masq-h2 .hl{display:block} /* ⛔ `.masq-sub` ya no se usa: el subtitulo se quito el 31 ago 2026 porque hablaba de la competencia. La regla se deja por si vuelve a hacer falta en otro bloque, pero NO se repone aqui solo por llenar el hueco. */ .masq-sub{text-align:center;max-width:46ch;margin:0 auto; font-size:clamp(1rem,1.5vw,1.24rem);font-weight:600;line-height:1.5; color:var(--ink)} /* ⚠️ EL BLOQUE VA ESTRECHADO Y CENTRADO, NO A TODO EL ANCHO DEL WRAP (Carlos, 26 ago 2026: "las dos columnas están muy a la izquierda; que estén a la misma distancia de margen a derecha e izquierda"). El problema no era que estuvieran descentradas —el grid ocupaba el wrap entero, o sea 1200 px— sino que OCUPABAN DEMASIADO. A ese ancho el texto llega hasta el filo de la pantalla y desaparece la sensacion de margen, mientras el titular de encima sí esta acotado a 22ch. El ojo compara las dos cosas y lee el bloque de abajo como "corrido hacia fuera". Con 1000 px y `margin auto` quedan unos 100 px de aire a cada lado y las columnas caen debajo del titular en vez de escaparse por los lados. */ .masq-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 60px; max-width:1000px;margin:52px auto 0} /* El rótulo de cada columna copia el tratamiento del cargo de las fichas (mayúsculas pequeñas en turquesa) para que se lea como parte del mismo sistema y no como un titular más. */ /* ---- El titular de las dos columnas ---- ⚠️ MAS PEQUEÑO QUE `.masq-h2` A PROPOSITO, y esa jerarquia es lo que hace que el bloque funcione: encima hay un titular grande y un párrafo de filosofía. Tres piezas al mismo tamaño se pelean entre ellas; escalonadas (grande → texto → medio → columnas) la página se lee de corrido. 👉 `.hl` en `display:block` por lo mismo que en `.masq-h2`: la segunda mitad cae siempre en su línea sin depender del
. */ .masq-h3{text-align:center;max-width:30ch;margin:0 auto 34px;text-wrap:balance; font-family:var(--display);font-weight:700; font-size:clamp(1.18rem,2.05vw,1.6rem);line-height:1.25;letter-spacing:-.018em; color:var(--ink,#0b0c0d)} .masq-h3 .hl{display:block} /* ⛔ `.masq-rotulo` YA NO SE USA EN comprar.html. Eran "LO QUE SABEMOS" y "CÓMO TRABAJAMOS" y Carlos los tumbó el 1 sep 2026 ("no pega, tiene que ser una frase completa"): dos palabras en mayusculitas son una etiqueta de categoría, el mismo fallo que "Bufetes"/"Bancos" en vender.html. Los sustituye el `.masq-h3` de arriba, que además presenta las dos columnas a la vez. La regla se deja por si hace falta en otro sitio. */ .masq-rotulo{margin:0 0 22px;color:var(--turq);font-weight:600; font-size:.8rem;letter-spacing:.06em;text-transform:uppercase} .masq-item{display:flex;gap:15px;margin-bottom:26px} .masq-item:last-child{margin-bottom:0} /* `margin-top` alinea el icono con la primera línea del título, no con el borde del bloque: sin eso queda flotando un par de píxeles alto. */ .masq-item > .ico{flex:0 0 auto;width:26px;height:26px;color:var(--turq);margin-top:2px} .masq-item > .ico svg{width:26px;height:26px} /* ⚠️ PESO 600, NO 700, DESDE QUE CADA PUNTO ES UNA FRASE ENTERA (31 ago 2026). Antes eran titulos de cuatro o cinco palabras y el 700 les daba presencia; una frase completa en 700 se lee como un grito y ademas emborrona, porque no hay parrafo gris debajo que la contraste. El `margin-bottom` cae a 0 por lo mismo: ya no hay nada debajo. */ .masq-item h3{margin:0;font-size:1.02rem;font-weight:600; color:var(--ink);letter-spacing:-.008em;line-height:1.45} .masq-item p{margin:0;color:#4a4b4c;font-size:.93rem;line-height:1.6} /* La fila de banderas. Van pequeñas (20x13) porque son un apoyo de lectura, no un adorno: tienen que reconocerse de un vistazo sin robarle el sitio al icono turquesa de la izquierda, que es el que ordena la columna. */ .masq-idiomas, .eq-idiomas{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px} .masq-idiomas > span, .eq-idiomas > span{display:inline-flex;align-items:center;gap:7px; font-size:.86rem;font-weight:600;color:var(--ink)} /* ---- LAS BANDERAS, ENCIMA DE LA FOTO DE CADA PERSONA ---- Carlos, 28 ago 2026: "dentro de la foto, arriba a la mano derecha, montada encima, como lo tienen los Perdomo". ⛔ ANTES ESTABAN EN UNA FILA COMUN BAJO EL TITULAR y se quitaron. Alli decian "el equipo habla estos idiomas", que no le sirve a nadie: el visitante no quiere saber que idiomas hay en la casa, quiere saber si LA PERSONA A LA QUE VA A ESCRIBIR habla el suyo. Pegadas a la cara, la respuesta llega antes de leer una sola palabra. ⛔ ESTUVIERON ENCIMA DE LA FOTO, arriba a la derecha, al estilo de C21 Perdomo, y se bajaron (Carlos, 28 ago 2026: "por el tipo de fondo no se ve bien"). Y acerto: en un retrato de estudio la unica zona con color fuerte tiene que ser la cara. Tres banderas encima del fondo oscuro se convertian en el segundo foco de la tarjeta y le robaban la mirada al que de verdad importa. Ademas obligaban a una pastilla blanca detras, que parecia una calcomania. Abajo, en el crema, no compiten con nada y siguen leyendose de un vistazo, que era todo lo que se les pedia. 📍 VAN DEBAJO DEL CARGO, no en la linea del nombre: "Carlos Daniel Bierd" mas tres banderas se pasa de los ~250 px que mide la tarjeta y se partiria en unas personas si y en otras no. Asi el bloque de identidad queda limpio: cara → nombre → cargo → idiomas → biografia. 🏳️ SON IMAGENES, NO ICONOS DEL SISTEMA. Las banderas dibujadas a mano en iconos.js se descartaron: la de España quedaba sin el escudo (era la version civil, y Carlos lo cazo) y la Union Jack a 22 px pedia un recorte que ensuciaba el codigo. Ahora salen de assets/banderas/, que son las mismas de flagcdn que usa Century 21 pero DESCARGADAS: mismo detalle y sin depender de un servidor ajeno. ⚠️ Llevan `width`/`height` en el HTML ademas de en el CSS. Sin eso, la tarjeta da un salto al cargar las imagenes, justo debajo del cargo. El filo gris fino es imprescindible: la de Francia y la de Inglaterra tienen blanco en el borde y sin el se derriten sobre el crema. */ .eq-banderas{display:flex;justify-content:center;align-items:center; gap:7px;line-height:0;margin:0 0 14px} /* ⚠️ EL SELECTOR VA CON `.eq-banderas` DELANTE Y ES OBLIGATORIO. La regla `.eq-persona img{width:100%;height:245px;object-fit:cover}` es la del retrato, y a igualdad de peso gana a un `.bandera` suelto: las banderas salieron a 370x245 px, del tamaño de la foto. Con el padre delante, este selector pesa mas y manda. NO simplificarlo. */ .eq-banderas .bandera{display:block;width:22px;height:15px;border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(11,12,13,.16), 0 1px 2px -1px rgba(11,12,13,.4)} /* ⚠️ EL HUECO VA CUADRADO (21x21) AUNQUE LA BANDERA SEA APAISADA. El helper SVG() de iconos.js fija `viewBox="0 0 24 24"` para todos los iconos del sitio, asi que si aqui se pone 21x13 el navegador aplasta el dibujo. La bandera esta dibujada entre y=5 e y=19, o sea centrada en el cuadro, de modo que en una caja cuadrada queda a la altura correcta sola. */ .masq-idiomas .ico, .eq-idiomas .ico{display:inline-flex;flex:0 0 auto;width:21px;height:21px} .masq-idiomas .ico svg, .eq-idiomas .ico svg{width:21px;height:21px} @media(max-width:860px){ /* Una sola columna. Y el rótulo de la segunda se separa más, porque al apilarse "Después de que firmes" pierde su papel de encabezado y se confundiría con un punto más de la lista de arriba. */ .masq-grid{grid-template-columns:1fr;gap:0} .masq-col + .masq-col{margin-top:40px} .masq{margin-top:56px} } /* ---- "Contáctame directamente", dentro de la ficha de la persona ---- Vive dentro de .eq-persona, que es una columna estrecha (~250 px), así que todo aquí está medido para ese ancho. El padding lateral copia el de .eq-linea para que el rótulo quede alineado con la biografía de encima. */ .cta-directo{margin:18px 0 4px;padding:0 18px;text-align:center;font-size:.9rem} /* El rótulo. Va con el mismo tratamiento que el cargo de arriba (mayúsculas, espaciado abierto, turquesa) para que se lea como parte de la ficha y no como un anuncio pegado encima. Pequeño a propósito: quien manda aquí son los dos botones, esto solo dice para qué son. */ .cta-directo-rotulo{margin:0 0 10px;color:var(--turq);font-weight:600; font-size:.78rem;letter-spacing:.05em;text-transform:uppercase} /* Las dos vías, SIEMPRE VISIBLES. Estuvieron detrás de un desplegable y era un error: la animación que tenía que llamar la atención solo aparecía después del clic, o sea para quien ya había decidido. Los
vienen de la traducción (el viaja dentro del data-es/data-en),
así que hay que quitarles el margen del navegador. */
.cta-directo-vias{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}
.cta-directo-vias > p{margin:0}
.via{position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;gap:7px;
padding:9px 13px;border-radius:11px;text-decoration:none;
font-weight:600;font-size:.86rem;color:var(--ink,#0b0c0d);
background:linear-gradient(150deg,#fffdf8,#fbf7ec);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 10px 22px -18px rgba(10,30,28,.55);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.via:hover{transform:translateY(-2px);border-color:rgba(16,178,194,.6);
box-shadow:0 14px 26px -16px rgba(10,30,28,.6)}
.via > *{position:relative;z-index:1}
.via .ico{display:inline-flex}
.via .ico svg{width:17px;height:17px}
/* ---- ICONOS A COLOR (Carlos, 25 ago 2026: "que se vea que está") ----
WhatsApp va en su verde oficial (#25D366) porque ese verde ES la marca: el
ojo lo reconoce antes de leer la palabra, y eso es medio segundo ganado.
El correo NO tiene un color propio (Gmail, Outlook y Apple Mail usan cada
uno el suyo), así que va en el turquesa nuestro. Además equilibra: un
botón presta color ajeno, el otro pone el de la casa. */
.via-wa .ico{color:#25D366}
.via-mail .ico{color:var(--turq)}
/* El teléfono va en turquesa por lo mismo que el correo: marcar un número no
es de ninguna marca, así que el color lo pone la casa. */
.via-tel .ico{color:var(--turq)}
/* ---- Y QUE SE MUEVAN ----
El mismo destello de los botones gancho, escalonado a la mitad del ciclo
para que pase primero por WhatsApp y después por Email, nunca a la vez. */
.via::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;
width:55%;pointer-events:none;z-index:0;transform:skewX(-22deg);
background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(16,178,194,.10) 38%,
rgba(200,244,250,.6) 50%,rgba(16,178,194,.10) 62%,rgba(255,255,255,0) 100%);
animation:cta-brillo 3.6s cubic-bezier(.5,0,.35,1) infinite;
animation-delay:var(--brillo,0s)}
/* ⚠️ SEIS BOTONES, SEIS TURNOS. Con las tres fichas puestas hay dos botones
por ficha, y sin repartirlos los tres WhatsApp destellaban a la vez: eso
no es un detalle de lujo, es una fila de luces parpadeando.
El ciclo dura 3,6 s y hay 6 botones, así que van de 0,6 en 0,6 s y el
brillo cruza la fila entera como una ola: primero los tres WhatsApp de
izquierda a derecha, después los tres Email. Nunca dos a la vez.
`--ficha` lo pone cada tarjeta y `--brillo` lo remata cada botón, para no
tener que escribir las seis combinaciones a mano. */
.eq-persona:nth-child(1){--ficha:0s}
.eq-persona:nth-child(2){--ficha:.6s}
.eq-persona:nth-child(3){--ficha:1.2s}
.cta-directo-vias > p:nth-child(1) .via::after{--brillo:var(--ficha,0s)}
.cta-directo-vias > p:nth-child(2) .via::after{--brillo:calc(var(--ficha,0s) + 1.8s)}
/* La tercera vía (el teléfono) solo existe en el cierre de vender.html. Sigue
el mismo reparto: 1.8s entre una y otra, así que nunca destellan dos a la
vez ni en las fichas del equipo ni aquí abajo. */
.cta-directo-vias > p:nth-child(3) .via::after{--brillo:calc(var(--ficha,0s) + 3.6s)}
.via:hover::after{animation:none}
@media(prefers-reduced-motion:reduce){.via::after{animation:none}}
.cta-medio-txt{margin:0 0 18px;font-size:clamp(1.02rem,1.5vw,1.28rem);
font-weight:600;color:var(--ink,#0b0c0d);letter-spacing:-.005em}
/* ---- el botón de la cabecera de página ---- */
.pghero-cta{margin-top:26px}
/* ---- cabecera CENTRADA, de extremo a extremo, dos líneas ----
Carlos: "centrado, que coja de extremo a extremo, máximo dos líneas,
que no quede un espacio vacío ahí". La `vw` alta del clamp es lo que
hace que el titular crezca hasta llenar el ancho en vez de dejar medio
renglón en blanco a la derecha. */
/* ⚠️ Aquí la sección EMPIEZA debajo de la cabecera, no por detrás, así que
este padding se SUMA a los ~78px del header. Se fue bajando 150 → 112 → 62
→ 24, porque Carlos lo pidió más arriba tres veces. **24 es el suelo**: por
debajo, el titular se le pega a la cabecera y se ve apretado. */
.pghero-centro{text-align:center;padding-top:24px;padding-bottom:38px}
/* SIN max-width: con él el titular se partía en 4 líneas y dejaba medio
ancho vacío. Es el
quien decide el corte, y la `vw` alta hace que
cada línea crezca hasta rozar los bordes del wrap. */
.pghero-centro h1{font-size:clamp(1.9rem,5.15vw,4.05rem);line-height:1.12;
max-width:none;letter-spacing:-.02em}
.pghero-centro p{margin-left:auto;margin-right:auto;max-width:62ch}
/* la parte que promete algo, en el color de la marca */
.hl{color:var(--turq)}
/* La promesa bajo el titular: más grande y en NEGRO DE VERDAD, no en el
gris de párrafo, porque no es texto de apoyo sino LO QUE SE OFRECE.
⚠️ El selector lleva `.pghero` delante A PROPÓSITO: `.pghero p` ya fija
un gris y con más peso que `.pghero-frase` a secas, así que la frase
salía gris por mucho que se le pusiera el color aquí. Costó verlo.
Es el mismo negro que `.csub-lujo`, para que las dos frases fuertes de
la página se vean iguales. */
.pghero .pghero-frase{font-size:clamp(1.02rem,1.55vw,1.32rem);line-height:1.6;
color:var(--ink,#0b0c0d);font-weight:500;max-width:52ch;margin-top:18px}
.pghero-frase .hl{font-weight:600}
/* ---- TESTIMONIOS (comprar.html) ----
Mismo material que el resto: crema, filete turquesa, doble filete
interior. Lo propio es la comilla y el pie con la foto y LA VILLA, que
es lo que hace el testimonio verificable. */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.tst{position:relative;margin:0;padding:30px 26px 24px;border-radius:18px;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 20px 46px -32px rgba(10,30,28,.55);
display:flex;flex-direction:column;text-align:left}
.tst::before{content:"";position:absolute;inset:5px;border-radius:13px;
pointer-events:none;border:1px solid rgba(16,178,194,.15)}
.tst > *{position:relative;z-index:1}
/* La comilla, en turquesa y grande: marca que esto lo dice otro, no
nosotros. Va detrás del texto, no encima. */
.tst blockquote{margin:0 0 20px;color:var(--ink,#0b0c0d);font-weight:500;
font-size:.98rem;line-height:1.7;flex:1 1 auto}
.tst blockquote::before{content:"\201C";display:block;margin-bottom:2px;
font-family:Georgia,'Times New Roman',serif;font-size:2.6rem;line-height:.7;
color:var(--turq);opacity:.5}
.tst figcaption{display:flex;align-items:center;gap:12px;
border-top:1px solid rgba(16,178,194,.18);padding-top:16px}
/* Disco con la inicial: sirve cuando no hay foto, que va a ser lo normal
con dueños extranjeros. Si luego hay foto, se sustituye por un
con estas mismas medidas y no hay que tocar nada más. */
.tst-ini{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
border-radius:50%;background:var(--turq);
color:#fffdf8;font-weight:700;font-size:1.05rem}
/* La foto, cuando el dueño la manda. Mismas medidas que el disco de la
inicial, así que las fichas con foto y sin foto se alinean igual. */
.tst-foto{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
object-fit:cover;object-position:50% 30%;background:#2a2e30;
border:2px solid rgba(16,178,194,.45)}
.tst-quien{display:flex;flex-direction:column;line-height:1.35}
.tst-quien b{color:var(--ink,#0b0c0d);font-size:.95rem;font-weight:700}
/* La villa, en turquesa: es EL dato que hace creíble todo lo de arriba. */
.tst-quien em{font-style:normal;color:var(--turq);font-size:.83rem;font-weight:600}
/* Con dos testimonios, dos columnas centradas: tres huecos con uno vacío
se nota y da sensación de que falta algo. */
.tst-grid-2{grid-template-columns:repeat(2,1fr);max-width:840px;
margin-left:auto;margin-right:auto}
@media(max-width:860px){
.tst-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
}
/* ---- LA FOTO DE GRUPO (comprar.html) ----
Va donde realtordr pone la suya: dentro del bloque de "por qué con
nosotros", antes de las fichas de ventajas. Ancha y con el mismo filete
turquesa que todo lo demás. */
.eq-grupo{margin:30px auto 34px;max-width:900px;border-radius:20px;
overflow:hidden;border:1px solid rgba(16,178,194,.3);
box-shadow:0 24px 54px -34px rgba(10,30,28,.6)}
/* ⚠️ El original es VERTICAL (1400x1750). Suelto ocupaba 1125px de alto y
se comía la pantalla entera. Se recorta a una banda con `cover`, y el
`object-position` sube el encuadre para que se vean las tres caras y no
las piernas. Si se cambia la foto, hay que reajustar ese porcentaje. */
.eq-grupo img{display:block;width:100%;height:440px;object-fit:cover;
object-position:50% 8%}
@media(max-width:860px){.eq-grupo img{height:300px}}
/* Cuatro fichas van en 2x2, no en una fila de cuatro: a 1240px cada una
quedaría en 290px y el texto de dos líneas se iría a tres. */
.eq-grid-4{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:860px){.eq-grid-4{grid-template-columns:1fr}}
/* ---- EL EQUIPO (comprar.html) ----
Mismo material que las tarjetas de vender.html: crema, filete turquesa y
doble filete interior. Lo único propio es la foto.
📸 Las fotos son de cuerpo entero, así que se recortan por CSS con
`object-position:top` para que se vea la CARA y no las rodillas. Se puede
afinar aquí sin volver a tocar los archivos. */
.eq-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
/* Cuando las fotos van PEGADAS al titular, sin párrafo en medio (comprar.html
desde el 25 ago 2026), esos 34 px son los que dejaba el párrafo y ahora el
titular casi toca las caras. El `+` solo entra en ese caso: si algún día
vuelve un texto en medio, la regla se apaga sola y no hay que tocar nada. */
.cblock-centro > h2 + .eq-fotos{margin-top:58px}
/* 🚨 COLUMNA FLEX, Y NO ES DECORACION: ES LO QUE ALINEA LOS CONTACTOS.
(1 sep 2026.) La rejilla ya igualaba el ALTO de las tres fichas, pero no lo
de dentro: la biografia que ocupa una linea mas empujaba su bloque de
WhatsApp y Email 25 px por debajo de los otros dos. Se midio en las dos
paginas y en las dos fallaba, con distinta persona cada vez (Edwin en
comprar, Merika en vender), porque depende de cuanto ocupe cada texto.
👉 Con la columna flex y el `margin-top:auto` del `.cta-directo`, los tres
contactos se pegan al fondo y quedan en la misma linea SIEMPRE, escriba
quien escriba y en el idioma que sea.
⚠️ No se arregla con un `min-height` en la biografia: eso lo cuadra hoy y
se rompe el dia que alguien cambie una palabra o se mire en ingles. */
.eq-persona{position:relative;border-radius:18px;overflow:hidden;
display:flex;flex-direction:column;
background:linear-gradient(150deg,#fffdf8 0%,#fbf7ec 100%);
border:1px solid rgba(16,178,194,.3);
box-shadow:0 20px 46px -32px rgba(10,30,28,.55);
text-align:center;padding-bottom:26px;
transition:transform .25s,box-shadow .25s,border-color .25s}
.eq-persona:hover{transform:translateY(-4px);border-color:rgba(16,178,194,.62);
box-shadow:0 26px 54px -28px rgba(10,30,28,.45)}
/* La línea que presenta a las tres personas, dentro del mismo bloque de
las razones: la pregunta era "¿somos los correctos?", las fichas la
responden y las caras la cierran. */
.eq-lead{margin:44px auto 26px;text-align:center}
/* 📸 Las fotos son de medio cuerpo con fondo oscuro de estudio. El encuadre
fino lo hace `object-position`, así se afina sin volver a tocar los
archivos. El fondo oscuro se pone también en el contenedor para que no
se vea un salto claro mientras la imagen carga. */
/* 📐 DE LA BARRIGA PARA ARRIBA (Carlos, 24 ago 2026). Los originales son
de tres cuartos de cuerpo y antes se veian hasta las caderas, con lo que
la cara quedaba pequeña. Con la ventana mas corta (300px) y anclada
arriba del todo, se ve de la cintura para arriba y la cara manda.
Si se cambia una foto, se afina aqui y no hay que tocar los archivos. */
.eq-persona img{display:block;width:100%;height:245px;object-fit:cover;
object-position:50% 0%;background:#2a2e30}
.eq-persona h3{margin:20px 0 4px;font-size:clamp(1.02rem,1.3vw,1.2rem);
font-weight:700;color:var(--ink,#0b0c0d);letter-spacing:-.015em;max-width:none}
.eq-cargo{margin:0 0 12px;color:var(--turq);font-weight:600;
font-size:.86rem;letter-spacing:.02em;text-transform:uppercase}
/* Carlos, 25 ago 2026: "que la letra esté del mismo largo, que no se vea
regiba". Justificado con la última línea centrada, igual que las fichas de
vender.html: la orilla derecha deja de ser un serrucho y las tres fichas se
leen como tres bloques del mismo peso.
⚠️ `hyphens:auto` es obligatorio a este ancho. La columna es estrecha (30ch)
y sin partir palabras el navegador estira los espacios para cuadrar: salen
ríos blancos y queda peor que sin justificar. */
.eq-linea{margin:0 auto;max-width:30ch;padding:0 18px;
color:var(--ink,#0b0c0d);font-weight:500;font-size:.93rem;line-height:1.65;
text-align:justify;text-align-last:center;hyphens:auto}
/* La otra mitad del arreglo de alineacion: el contacto se empuja al fondo de
la ficha, asi que la biografia mas larga se come el hueco de arriba y los
tres bloques de WhatsApp y Email arrancan a la misma altura.
Ver el comentario de `.eq-persona`. */
.eq-persona > .cta-directo{margin-top:auto;padding-top:18px}
@media(max-width:860px){
.eq-fotos{grid-template-columns:1fr;gap:18px;max-width:420px;margin-left:auto;margin-right:auto}
/* ⚠️ 250 Y NO 300 (Carlos, 28 ago 2026): "me veo demasiado el cuerpo y esa
pose no es la mas bonita, que se vea nada mas de los codos para arriba".
Tenia razon y el motivo es de aqui: al pasar a una columna la tarjeta se
ensancha, y con la ventana en 300 px se veia el 71% de la foto, o sea
hasta el cinturon, con los brazos rectos y las manos en los bolsillos.
En escritorio la ventana es mas corta y corta por el pecho, asi que el
problema SOLO SE VE EN EL TELEFONO.
Con 250 px se ve hasta la fila 590 de 994: justo por los codos.
📐 La cuenta, por si hay que reafinar: la foto se escala por el ancho de
la tarjeta (322 px en un telefono de 390), asi que
fila visible = alto de la ventana / (ancho tarjeta / 760).
⚠️ Las tres fotos comparten esta regla y estan encuadradas parecido, asi
que hay que mirar a Merika y a Edwin despues de tocarla: a ellos el corte
les cae cerca de los brazos cruzados y de las manos entrelazadas. */
.eq-persona img{height:250px}
}
/* ---- LAS TRES PREGUNTAS GANCHO DE comprar.html ----
No son adorno: cada una es la entrada al embudo con esa respuesta ya
contestada. Por eso van como botones y no como texto del titular, que
es lo que hace realtordr.
Mismo material que las tarjetas de vender.html: crema, filete turquesa
y el icono en disco macizo. Así la página no estrena lenguaje. */
.hero-ops{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:30px}
/* 🎨 TURQUESA RELLENO, NO CREMA (Carlos, 1 sep 2026), y el motivo es de
coherencia entre paginas: "en vender esta 'Empecemos hoy' con ese look por
fuera y en un boton azul; en buy tenemos que poner ese mismo boton, para
que haya sincronia".
👉 EL MOVIMIENTO YA LO TENIAN. Estos tres llevan exactamente el mismo
destello que `.btn-brilla` de vender.html, solo que escalonado (uno cada
1,4 s). Lo que fallaba no era la animacion, era el COLOR: en crema se leen
como tarjetas y en vender se lee como boton, asi que al comparar las dos
paginas no parecian la misma casa.
⚠️ Se probo primero en el navegador por miedo a que tres botones turquesa
seguidos pesaran demasiado. No pesan: al ser planos y anchos se leen como
una fila de opciones, no como tres gritos. */
.hero-op{display:flex;align-items:center;gap:13px;text-decoration:none;
padding:15px 22px 15px 16px;border-radius:14px;
background:var(--turq);
border:1px solid var(--turq);
box-shadow:0 14px 34px -22px rgba(10,30,28,.6);
color:#fff;font-weight:600;font-size:.99rem;
transition:transform .22s,box-shadow .22s,background .22s}
.hero-op:hover{transform:translateY(-3px);background:var(--turq-dark);
border-color:var(--turq-dark);
box-shadow:0 20px 42px -22px rgba(10,30,28,.5)}
.hero-op span{color:#fff}
/* ⚠️ EL DISCO VA EN EL TURQUESA DE LA MARCA, PLANO, Y NO SE TOCA.
Llevó un degradado de #10b2c2 a #12879a y Carlos lo tumbó (26 ago 2026:
"se ve casi oscuro y muy cargado, quiero exactamente el color de la marca
suave, sin nada de oscuro"). Y el dato le daba la razón: la marca es
#10b2c2, y ese #12879a del final del degradado es un verde azulado oscuro
que no está en la paleta. Al caer el disco hacia él, la mitad de abajo de
cada icono se salía del color de la casa.
La sombra bajó de rgba(16,178,194,.85) a rgba(16,178,194,.5): también era
del tono oscuro y a .85 pintaba un cerco casi negro bajo cada disco, que
es la otra mitad de lo "cargado".
👉 Mismo cambio en .eq-card > .ico y en .tst-ini, que usaban el mismo
degradado: si el disco fuera de un turquesa en Comprar y de otro en
Vender, se notaría al pasar de una página a la otra. */
/* 🚨 EL DISCO CAMBIO CON EL FONDO (1 sep 2026). Era `background:var(--turq)`,
que sobre el crema de antes se veia perfecto y sobre el turquesa nuevo
DESAPARECERIA: turquesa sobre turquesa. Ahora es un velo blanco
translucido, que deja ver el icono sin meter un cuarto color en el boton.
⚠️ Fuera tambien la sombra: era un halo turquesa pensado para destacar
sobre fondo claro; sobre turquesa solo ensucia.
⚠️ EL SELECTOR TIENE QUE SER `> .ico`, CON EL HIJO DIRECTO. Se escribio
primero como `.hero-op .ico` y no gano: esta regla va despues en el archivo
y con la misma especificidad, asi que el disco seguia saliendo turquesa. */
.hero-op > .ico{display:grid;place-items:center;flex:0 0 auto;
width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.18);color:#fff;
box-shadow:none}
.hero-op > .ico svg{width:21px;height:21px}
/* ---- los tres botones, con brillo escalonado ----
Mismo destello que `.btn-brilla`, pero repartido en el tiempo: brilla
uno cada 1,4 s sobre un ciclo de 4,2 s, así que siempre hay movimiento
pero nunca tres a la vez, que sería ruido.
⚠️ VA EN LOS TRES GRUPOS, INCLUIDO EL DE LA CABECERA (1 sep 2026). Antes
la cabecera iba quieta a propósito ("allí el titular ya manda la atención"),
y Carlos lo cazó mirando. Cambió porque cambió otra cosa: desde que los
tres botones son turquesa rellenos se leen como botones, y **un botón
quieto al lado de otros que brillan parece desactivado**. Cuando cambia el
aspecto de un elemento hay que revisar las animaciones que lo acompañan.
⚠️ EL DESTELLO VA EN CREMA Y ORO, NO EN TURQUESA CLARO (1 sep 2026).
Antes el barrido era celeste (`rgba(200,244,250,.55)`) para no salirse de
la paleta del botón. Carlos lo comparó con vender.html y lo rechazó: "el
color de nuestra marca está bien, pero lo que se mueve, lo que lo hace
clicéame, ponlo igual; por los alrededores se mueve algo crema".
Y tenía razón por una razón física: un brillo celeste sobre un fondo
turquesa es el MISMO tono, así que casi no se ve. El crema es el color
opuesto de la marca y por eso destaca. Son los mismos valores exactos de
`.btn-brilla`, no una versión parecida: es el mismo gesto en las dos
páginas, que es justo lo que él estaba pidiendo.
El halo que late alrededor es la otra mitad de ese gesto (`cta-latido` en
vender). Aquí lleva keyframes propios porque la sombra de reposo de
`.hero-op` no es la de `.btn-brilla`: si se reutilizara el de vender, los
tres botones saltarían a una sombra más pesada que no es la suya.
👉 VA ESCALONADO IGUAL QUE EL BARRIDO: los tres latiendo a la vez es una
pantalla temblando. Uno cada 1,4 s se lee como una fila viva. */
.hero-ops-brilla .hero-op{position:relative;overflow:hidden;isolation:isolate;
animation:hero-op-latido 4.2s ease-in-out infinite}
.hero-ops-brilla .hero-op::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;
width:55%;pointer-events:none;z-index:0;transform:skewX(-22deg);
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,248,229,.34) 38%,
rgba(255,248,229,.85) 50%,
rgba(255,248,229,.34) 62%,
rgba(255,255,255,0) 100%);
animation:cta-brillo 4.2s cubic-bezier(.5,0,.35,1) infinite}
.hero-ops-brilla .hero-op:nth-child(2),
.hero-ops-brilla .hero-op:nth-child(2)::after{animation-delay:1.4s}
.hero-ops-brilla .hero-op:nth-child(3),
.hero-ops-brilla .hero-op:nth-child(3)::after{animation-delay:2.8s}
.hero-ops-brilla .hero-op > *{position:relative;z-index:1}
/* Al pasar el ratón se para: ya lo encontró, no hay que insistir.
`animation:none` y no `paused`: pausada seguiría mandando sobre el
transform y se comería el translateY(-3px) del hover. */
.hero-ops-brilla .hero-op:hover,
.hero-ops-brilla .hero-op:focus-visible{animation:none}
.hero-ops-brilla .hero-op:hover::after,
.hero-ops-brilla .hero-op:focus-visible::after{animation:none}
@keyframes hero-op-latido{
0%,100%{transform:scale(1);
box-shadow:0 14px 34px -22px rgba(10,30,28,.6),0 0 0 0 rgba(255,248,229,.62)}
50% {transform:scale(1.022);
box-shadow:0 18px 40px -22px rgba(10,30,28,.55),0 0 0 10px rgba(255,248,229,0)}
}
@media(prefers-reduced-motion:reduce){
.hero-ops-brilla .hero-op,
.hero-ops-brilla .hero-op::after{animation:none}
.hero-ops-brilla .hero-op::after{display:none}
}
/* ⛔ Aqui vivia `.hero-ops-alt`, la salida discreta "o mira las propiedades
primero". Carlos la quito (22 ago 2026): en el momento de decidir, una
salida comoda es permiso para aplazar. Ver el comentario en
`_cuerpo-comprar.html`. */
@media(max-width:820px){
/* En telefono van APILADOS Y A TODO LO ANCHO: en fila se parten en dos
y media y queda desordenado. Apilados se tocan con el pulgar. */
.hero-ops{flex-direction:column;gap:11px;margin-top:24px}
.hero-op{width:100%;justify-content:flex-start;padding:13px 18px 13px 14px;font-size:.95rem}
.hero-op > .ico{width:36px;height:36px}
.hero-op > .ico svg{width:19px;height:19px}
}
/* ---- CABECERA DE TRES PREGUNTAS (comprar.html) ----
Es la misma pieza que la de vender.html (Carlos, 21 ago 2026: "el frente
arriba en el mismo estilo que creamos selling"), pero es la puerta de
entrada del sitio, así que respira más y el titular baja un punto: son
TRES preguntas más la respuesta, o sea el doble de texto que en Vender,
y con la `vw` de allí se comía la pantalla. */
.pghero-preguntas{padding-top:52px;padding-bottom:56px}
.pghero-preguntas h1{font-size:clamp(1.62rem,3.62vw,2.86rem);line-height:1.2;
letter-spacing:-.018em;max-width:24ch;margin-left:auto;margin-right:auto}
/* El
separa las preguntas de la respuesta. La respuesta va en su
propia línea SIEMPRE: es el hecho que nos diferencia, no puede quedar
pegada al final de la última pregunta. */
.pghero-preguntas h1 .hl{display:inline-block;margin-top:.28em}
.pghero-preguntas .pghero-frase{max-width:60ch;font-size:clamp(1rem,1.42vw,1.16rem)}
.pghero-preguntas .pghero-cta{margin-top:30px}
@media(max-width:820px){
.pghero-preguntas{padding-top:34px;padding-bottom:38px}
.pghero-preguntas h1{font-size:clamp(1.44rem,5.6vw,2rem);max-width:17ch}
}
@media(max-width:640px){
.pghero-centro h1{max-width:none}
/* ⚠️ AQUÍ HABÍA UN `br{display:none}` Y ERA UN FALLO (visto 21 ago 2026).
Entre las dos mitades del titular no hay ningún espacio en el HTML:
el salto de línea ES la separación. Al esconderlo en teléfono, las dos
frases se pegaban — "this coast?Most say", "property?Because" — y el
navegador las trataba como una sola palabra al partir el renglón.
La segunda mitad arranca ahora siempre en su propia línea, que es lo
mismo que hace el
en escritorio. */
.pghero-centro h1 .hl{display:block}
}
/* ---- la comparación de dos columnas ----
La de la izquierda apagada y en gris, la nuestra en blanco con filete
dorado. No hace falta gritar: el contraste visual ya lo dice. */
.vd-comparar{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vd-col{border-radius:16px;padding:26px 24px}
.vd-col ul{list-style:none;margin:0;padding:0}
.vd-col li{position:relative;padding:11px 0 11px 30px;font-size:.94rem;line-height:1.55}
.vd-col li + li{border-top:1px solid rgba(11,12,13,.07)}
.vd-tag{display:inline-block;margin-bottom:12px;font-size:.68rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase}
.vd-otros{background:#f2f2f0;border:1px solid rgba(11,12,13,.08)}
.vd-otros .vd-tag{color:#8a938f}
.vd-otros li{color:#7c8582}
/* aspa gris */
.vd-otros li::before{content:"";position:absolute;left:2px;top:17px;width:13px;height:13px;
background:
linear-gradient(45deg,transparent 44%,#b3bbb8 44%,#b3bbb8 56%,transparent 56%),
linear-gradient(-45deg,transparent 44%,#b3bbb8 44%,#b3bbb8 56%,transparent 56%)}
.vd-nosotros{background:#fff;border:1px solid rgba(16,178,194,.5);
box-shadow:0 20px 46px -26px rgba(10,30,28,.35)}
.vd-nosotros .vd-tag{color:var(--gold)}
.vd-nosotros li{color:#3f4a48;font-weight:500}
/* palomita turquesa dibujada con bordes: sin icono que cargar */
.vd-nosotros li::before{content:"";position:absolute;left:3px;top:15px;
width:6px;height:11px;border:solid var(--turq);border-width:0 2px 2px 0;
transform:rotate(43deg)}
@media(max-width:760px){
.vd-comparar{grid-template-columns:1fr}
/* En telefono la nuestra va PRIMERA: si hay que deslizar, que lo primero
que se lea sea lo bueno, no lo de los otros. */
.vd-nosotros{order:-1}
}
/* ---- CON QUIÉN TRABAJAMOS (bancos y bufetes) ----
Carlos lo pidió "de manera lujosa, no como ellos": realtordr pone una
fila de logos sueltos en gris. Aquí cada marca va en su propia tarjeta
con filete dorado interior, fondo crema y una etiqueta de qué hace.
Lo que da el aire caro es el aire: mucho espacio alrededor del logo. */
/* ⚠️ CAJONES IGUALES, Y ESTO CAMBIA UNA DECISION ANTERIOR DE CARLOS.
El 19 ago 2026 pidio que "las tarjetas se ajustaran al tamano del logo, no
cajones iguales", y era un `flex` donde cada una media lo que medía su
logo. El 28 ago 2026 lo cambio al verlo EN EL TELEFONO: "una linea mas
larga, otra mas corta... tenemos que darle congruencia para que queden
todos alineados y del mismo tamano".
👉 Y las dos cosas son ciertas segun donde mires, que es lo interesante:
en el escritorio los seis caben en UNA fila y los anchos distintos se leen
como variedad. En el telefono se envuelven de dos en dos, y entonces cada
fila mide distinto y parece descuadrado. Manda el telefono, que es por
donde entra casi todo el mundo.
Fondo BLANCO puro, no crema, para que los logos se vean como en su web. */
/* ⚠️ `grid-auto-rows:1fr` es lo que iguala los ALTOS, y hace falta: sin el,
la fila donde cae Gratereaux (que lleva emblema Y nombre debajo) sale mas
alta que las demas y vuelve el efecto escalonado que Carlos queria quitar. */
/* ---- LOS DOS GRUPOS: BUFETES Y BANCOS ----
En el ordenador van uno al lado del otro, asi que en pantalla se sigue
viendo una sola linea de seis, pero con una separacion mayor en el medio y
su rotulo encima. En el telefono se apilan.
⚠️ La separacion entre los dos grupos (46px) tiene que ser CLARAMENTE mayor
que el hueco entre tarjetas (14px). Si se parecen, la division no se lee y
el agrupamiento no sirve de nada. */
.tp-grupos{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
/* ---- LOS ROTULOS DE GRUPO, CON MARCO ----
❌ Estuvieron en mayusculitas grises sueltas y Carlos las tumbo (28 ago
2026): "esa letra tan muerta, se ve con poco prestigio... no le pone por lo
menos un borde, no le pone por lo menos un lujo".
⚠️ Y aclaro algo importante: NO queria cambiar las palabras. "Bancos" y
"Firmas de abogados" se quedan. Lo pobre era el TRATAMIENTO.
Lo que da el aire caro aqui son cuatro cosas juntas, y quitando una se cae:
· CAPSULA CON BORDE. Es lo que pidio literalmente. Sin marco, dos
palabras sueltas encima de unos logos se leen como el rotulo de un
inventario, no como una seccion.
· EL BORDE DE COLOR. 🚨 ESTE PUNTO CADUCO: nacio en oro y desde el 1 sep
2026 VA EN TURQUESA DE MARCA. El motivo esta explicado entero mas abajo,
en el bloque de `.tp-rotulo`. Lo que sigue valiendo del punto original
es la idea: el marco tiene que ser de UN color con intencion, no un gris
de interfaz.
⚠️ Y sigue en pie la regla general del oro: NUNCA en un boton ni en un
titular. Aqui simplemente dejo de usarse tambien.
· FONDO BLANCO, el mismo de las tarjetas de logos. Asi el rotulo y lo que
cuelga debajo se leen como una sola pieza.
· VERSALITAS MUY ESPACIADAS Y EN NEGRO DE MARCA, no en gris. El gris era
la mitad de "la letra muerta" que decia Carlos.
⛔ Sin rayitas a los lados: eso sigue prohibido. El marco no es una rayita,
es una caja cerrada. */
.tp-grupo{text-align:center}
/* 🚨 EL GROSOR MINIMO DE UN FILETE DE COLOR EN ESTE SITIO ES 1,6 px.
Esto NO es preferencia, es una medida, y aplica a todo el sitio aunque se
descubriera aqui. El rotulo declaraba `1px solid` y el navegador reportaba
**0,8 px**. No era el zoom: la pagina estaba al 100%. Era el `dpr`.
👉 La pantalla va a `devicePixelRatio` 1,25 (Windows al 125%, lo normal en
un portatil), y **Chrome recorta el grosor de los bordes al pixel FISICO
entero, hacia abajo**: 1 px x 1,25 = 1,25 fisicos, los pinta con 1, y eso
son 0,8 px de CSS. Un filete asi de fino pierde saturacion al repartirse
entre columnas de pixeles, y un color medio llega al ojo lavado.
✅ Con dpr 1,25 el valor que cae limpio es **1,6 px → 2 fisicos exactos**.
⛔ 1 px y 1,2 px SE ADELGAZAN SOLOS. No usarlos para un borde que tenga que
leerse como color.
💡 Comprobarlo es una linea: `getComputedStyle(el).borderTopWidth`. Si
devuelve menos de lo declarado, es esto.
---- HISTORIA DE ESTE ROTULO, PARA NO REPETIR LOS PASOS ----
Nacio con borde de oro al 55%, paso a oro pleno (28 ago), luego a oro
metalico con degradado y 1,6 px (1 sep) y al final a TURQUESA (1 sep, ver
el bloque de abajo). Del intento metalico se conserva lo que sirve:
· **Mas aire dentro** (30 px de costado, .28em entre letras). El aire es
lo mas barato y lo mas caro a la vez; un rotulo apretado se lee como
etiqueta de inventario. Esto se quedo.
· **La sombra tiene que ser del color del borde.** La original era gris
verdosa `rgba(10,30,28,.5)`, o sea la sombra de otro color, y ensuciaba
el marco. Ahora es turquesa, antes fue dorada. Si cambia el borde,
cambia la sombra.
🔍 Diecisiete variantes probadas en pantalla, en tres rondas, sobre el fondo
real de la seccion. Cayeron, y NO se vuelven a proponer:
· **letra en oro y letra en turquesa** → el texto pierde fuerza, que es
justo lo que Carlos mando arreglar la primera vez. LA LETRA SE QUEDA EN
NEGRO DE MARCA, punto.
· **sello de fondo crema** → parece una insignia de rebaja.
· **degradado metalico en turquesa** → el turquesa no lee como metal, solo
se ve sucio. El truco del degradado solo funciona con el oro.
· **borde de 2,2 px** → grueso y ordinario.
· **quitar el filete interior** → se queda vacio. */
/* 🔵 Y AL FINAL EL ORO SE FUE: EL RÓTULO ES TURQUESA (1 sep 2026, misma tarde).
Carlos, después de ver el oro metálico: *"no me convence ese color oro…
ponle turquesa por los bordes, blanco en el fondo, y el turquesa finito"*.
Y llevaba razón, aunque el diagnóstico anterior tambien era cierto:
arreglado el grosor, el oro se veia mejor PERO SEGUIA SIENDO EL COLOR MAS
FLOJO DE LA PALETA sobre crema. El oro y el crema son vecinos; el turquesa
es lo contrario del crema y por eso se ve sin esforzarse.
👉 Lo que se GANA: el rótulo deja de introducir un acento que no aparece en
ninguna otra parte de esa sección y pasa a ser de la casa. Los logos de
abajo son de otras marcas, con sus rojos y sus azules; el marco turquesa
dice quién los está presentando.
⚠️ Lo que se PIERDE, y hay que saberlo: el oro era el guiño de prestigio, y
este bloque vive de prestigio prestado. Se acepta porque un oro que no se
ve no presta nada.
⛔ El oro NO desaparece del sitio: sigue siendo el color de detalle en el
resto. Lo que se cayó es su uso en ESTE rótulo. */
.tp-rotulo{display:inline-flex;align-items:center;
margin:0 0 16px;padding:10px 30px;border-radius:999px;
background:#fff;border:1.6px solid var(--turq);
box-shadow:0 8px 20px -14px rgba(16,178,194,.6);
font-family:var(--display);
font-size:.71rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink,#0b0c0d)}
/* El filete interior, el mismo gesto que el globo del agente: dos lineas muy
finas en vez de una gruesa. Es de imprenta clasica y es lo que separa una
pastilla de web de un sello. */
/* ⚠️ EL BORDE VA EN `var(--gold)` PLENO, NO EN UN Oro CON TRANSPARENCIA.
Estuvo en `rgba(16,178,194,.55)`, que es el MISMO codigo pero al 55%, y el
resultado no es oro: es oro desvaido sobre blanco. Carlos lo pidio directo
(28 ago 2026): "ponle el oro que tenemos, ese uno".
👉 La leccion, que vale para todo el sitio: usar el codigo oficial con
opacidad NO es usar el color oficial. Sobre blanco, un oro al 55% se ve
como otro oro mas claro, que es justo lo que la regla del manual quiere
evitar. Si hace falta suavizarlo, se suaviza el GROSOR, no el color.
El filete interior si lleva algo de transparencia a proposito: tiene que
leerse como una segunda linea mas fina, no como dos bordes iguales. */
/* ⚠️ Cambio doble el 1 sep 2026: pasa a TURQUESA con el borde de fuera, y sube
de inset 3 a 4 px. Al engordar el borde exterior a 1,6 px, el filete de
dentro se quedaba tan pegado que parecia un error de pintado en vez de una
segunda linea. Los dos filetes se miran entre si: si se toca uno hay que
revisar el otro.
Va al 42% y no pleno a proposito: tiene que leerse como una linea MAS FINA
que la de fuera, no como dos bordes iguales. */
.tp-rotulo::before{content:"";position:absolute;inset:4px;border-radius:999px;
border:1px solid rgba(16,178,194,.42);pointer-events:none}
.tp-rotulo{position:relative;isolation:isolate}
.tp-fila{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
gap:14px;align-items:stretch}
.tp-card{position:relative;isolation:isolate;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
padding:16px 14px;border-radius:14px;min-height:112px}
/* ⚠️ 112px Y NO 82px, y el motivo importa: los dos grupos son DOS rejillas
distintas, asi que `grid-auto-rows:1fr` iguala dentro de cada una pero NO
entre ellas. Los bufetes salian a 112 (Gratereaux lleva emblema grande y
nombre debajo) y los bancos a 82, y con los grupos uno al lado del otro ese
desnivel se ve al instante. El `min-height` es lo que los cose.
🔁 Si algun dia se cambia el emblema de Gratereaux, medir de nuevo el alto
del grupo de bufetes y traerlo aqui. */
/* ⛔⛔ AQUI VIVIA UN BRILLO QUE CRUZABA LAS SEIS TARJETAS EN OLA, Y SE QUITO
ENTERO (1 sep 2026). NO SE REPONE. Lo cazo Carlos mirando: *"el movimiento
de firmas legales y bancos le quita la atractividad al embudo… ya con el
borde turquesa ese diseno es suficiente, es mejor dejarlo estatico"*.
👉 LA RAZON DE FONDO, QUE VALE PARA TODO EL SITIO: **el movimiento es un
presupuesto, no un adorno.** En esta pagina lo que tiene que moverse es el
boton del embudo, porque es lo unico que hay que pulsar. Seis tarjetas
moviendose al lado de un boton que se mueve no suman: compiten, y ganan las
seis por mayoria. Los logos son PRUEBA, no destino; una prueba no pide
atencion, la sostiene.
⚠️ Y ojo con la trampa que llevo a esto, porque es facil repetirla: el
brillo nacio como sustituto de un borde dorado giratorio que Carlos habia
rechazado (19 ago: "no me gusta como quedo ese color oro"). O sea que se
sustituyo un efecto por otro efecto en vez de preguntarse si hacia falta
alguno. **Cuando se cae un adorno, lo primero que hay que probar es no
poner nada.** Aqui, dos semanas despues, no hacia falta nada.
⛔ Tampoco vuelve el borde dorado giratorio. Los dos estan descartados.
Y con el brillo se fue tambien el `:hover` que levantaba la tarjeta:
**`.tp-card` es un `