/* ============================================================
   APPLE — la capa del rediseño, página por página
   (Arturo, 2026-10-24: «rediseñar toda la página con la tipografía de la
   landing y darle el estilo Apple»; empieza por el home como muestra).

   QUÉ ES. Una hoja que va DESPUÉS de typography.css y property-card.css en
   las páginas que ya pasaron al estilo nuevo, y en ninguna otra. Lo que hace:
     · cambia la letra a la de /open-house (SF en Apple, Inter en Windows y
       Android), un solo tipo para todo;
     · quita las mayúsculas y el espaciado de las etiquetas, y la cursiva de
       los titulares;
     · alterna secciones blancas y grises, y deja en negro sólo las que van
       sobre foto (hero, cifras, reclutamiento);
     · botones en píldora y ligas con «›».

   POR QUÉ UNA CAPA Y NO REESCRIBIR. Se pidió una muestra antes de tocar el
   resto: con una hoja aparte, las demás páginas no cambian. Si esta hoja no
   carga, la página vuelve a los colores y la composición de antes, pero NO a
   su letra: Cinzel y Lato ya no se piden, así que cae en Georgia y Helvetica.
   Legible y visiblemente rota, que es lo que se quiere de un fallo (regla 23).
   Cuando todas las páginas la lleven, lo que dice aquí se muda a tokens.css y
   typography.css y esta capa desaparece (ver CLAUDE.md, «Rediseño»).
   La vigila `npm run test:apple`, midiendo el estilo computado.

   LAS MAYÚSCULAS Y EL TRACKING SE QUITAN CON `!important`, A PROPÓSITO.
   Están repartidos en decenas de reglas con especificidades distintas (el
   home, typography.css, property-card.css, los modales); ganarle a cada una
   por especificidad sería una regla por selector y una que se olvida. Aquí la
   decisión es de página entera —en el estilo nuevo no hay etiquetas en
   mayúsculas— y se dice una vez. Lo que sí lleva tracking (los titulares, que
   van más apretados) lo pide con `!important` también, en la lista de abajo.
   ============================================================ */

:root{
  /* La letra de la landing. --serif apunta a la misma: el estilo nuevo es de
     un solo tipo, y así los cientos de `var(--serif)` del sitio cambian sin
     tocarlos uno a uno. */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);

  /* La paleta de la landing, sobre los nombres de siempre (los valores viven
     en tokens.css, bloque «Apple»). */
  --ink:var(--a-tinta);
  --paper-soft:var(--a-gris-fondo);
  --paper-mid:var(--a-gris-medio);
  --gray-1:var(--a-linea);
  --gray-3:var(--a-gris);
  --ink-deep:var(--a-negro);
  --ink-2:var(--a-negro);
  --ink-3:var(--a-tinta);
  --ink-4:var(--a-campo-noche);
}

/* ── LETRA ─────────────────────────────────────────────────────────────── */
/* Un solo tipo para toda la página, y también con `!important`: typography.css
   escribe 'Cinzel' y 'Lato' a mano (no `var(--serif)`) en selectores de
   clase, y property-card.css escribe 'Poppins'; un selector de elemento les
   pierde a todos. Medido en el estilo computado, no leído (test:apple). */
html body,html body *{font-family:var(--sans)!important}
body{font-size:17px;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
body,p,li{font-weight:400}
p,li{line-height:1.47}

/* Ni mayúsculas ni tracking en ninguna etiqueta. */
html body *{text-transform:none!important;letter-spacing:-.01em!important}
/* LA EXCEPCIÓN: el título de la tarjeta. propiedades.html lo pasa a minúsculas
   en JS y property-card.css lo capitaliza; sin el `capitalize` sale todo en
   minúscula, nombres propios incluidos («loma blanca, san pedro»). */
.property-card .property-card-title{text-transform:capitalize!important}

/* La cursiva de los titulares («o renta», «hablan.») era un acento de una
   palabra; en el estilo nuevo el titular se lee entero, igual. */
:is(.h1,.h2,.h3,.hero-title,.why-reveal,.props-title,.kpi-title,.rct-title,.big,.sup-modal-title,.sell-modal-title,.apply-modal-title,.blog-title,.footer-tagline,.tw-slogan,.testi-v2-text) em,
.blog-title,.footer-brand .footer-tagline,.tw-slogan,.testi-v2-text{font-style:normal}

/* ── TITULARES: semibold y apretados, como la landing ─────────────────── */
:is(.hero-title,.why-reveal,.h1,.h2,.h3,.props-title,.kpi-title,.rct-title,.big,.svc-title){
  font-weight:600;letter-spacing:-.03em!important;
}
:is(.sup-title,.blog-card .blog-title,.sup-modal-title,.sell-modal-title,.apply-modal-title,.art-modal-title,.comp-title,.testi-v2 .testi-title){
  font-weight:600;letter-spacing:-.02em!important;
}
.hero-title{font-weight:700;letter-spacing:-.04em!important}
/* LA INTRO PARTE EL TITULAR EN UN <span> POR LETRA (ver index.html, #91), y
   la regla general de arriba alcanza a cada uno: el -.04em del <h1> no
   llegaba a ninguna letra. Aquí heredan el del titular. */
.hero-title *{letter-spacing:inherit!important}
:is(.h1,.h2,.h3,.props-title,.kpi-title,.rct-title,.big) em{font-weight:inherit}

/* Las etiquetas pequeñas sobre los titulares: en minúscula, en gris, a 17. */
:is(.eye,.why-label,.props-eye,.kpi-eye,.rct-eye){
  font-size:17px;font-weight:600;line-height:1.3;
}

/* ── NAV ───────────────────────────────────────────────────────────────── */
.nav-links a{font-size:13px;font-weight:400}
.nav-links a::after{display:none}
.nav-action{font-size:13px;font-weight:400;padding:7px 16px;border-width:1px;border-radius:980px}
#nav.scrolled{background:rgba(251,251,253,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.mob-menu a{font-weight:600;letter-spacing:-.03em!important}
.mob-action{font-size:17px!important;font-weight:400!important;border-radius:980px;padding:12px 32px}

/* ── HERO ──────────────────────────────────────────────────────────────── */
/* Sólo la letra. El tamaño del titular (una línea en todos los anchos) y la
   composición viven en index.html. */
.hero-ai-input{font-size:16px}
.hero-ai-btn{font-size:15px;font-weight:500}

/* La cinta de zonas. */
.ti{font-size:14px;font-weight:500}

/* ── POR QUÉ MONTANA ───────────────────────────────────────────────────── */
/* Sin los degradados de humo hacia negro: arriba y abajo el corte es limpio,
   como en el resto del estilo. */
.why-v2::before,.why-v2::after{display:none}
.why-v2{padding:120px 0 120px}
.why-label{color:var(--gray-3)}
.why-reveal{font-size:clamp(34px,4.6vw,56px);line-height:1.08}
.why-sub{font-size:clamp(19px,1.9vw,21px);line-height:1.38;color:var(--gray-3)}
.why-video-wrap{border-radius:28px;box-shadow:none}

/* ── SERVICIOS: Compra, vende o renta ──────────────────────────────────── */
#svc{background:var(--paper);color:var(--ink);padding-bottom:120px}
#svc .svc-header{padding:120px 56px 56px}
#svc .eye,#svc .eye-r{color:var(--gray-3)}
#svc .h3{color:var(--ink)}
/* El párrafo lleva su color en un `style` en línea (pensado para fondo
   oscuro): sólo `!important` le gana a un atributo `style`. */
#svc .svc-header p{color:var(--gray-3)!important;font-size:19px!important;line-height:1.42!important;max-width:340px!important}
#svc .svc-grid{gap:20px;padding:0 56px;background:none;height:min(80vh,760px)}
#svc .svc-card{border-radius:28px;overflow:hidden;transform:none}
/* Fuera la inclinación 3D, el borde animado y el velo de «Ver opciones»:
   tapaban el texto de la tarjeta justo al apuntarle. Queda el acercamiento
   de la foto. */
#svc .svc-card:hover{transform:none;box-shadow:none}
#svc .svc-card::before,#svc .svc-card::after{display:none}
/* «01 / 02 / 03» numeraba tres cosas que no son una secuencia. */
#svc .svc-num{display:none}
/* La sección es clara, pero el texto de las tarjetas va sobre la foto: el
   titular heredaba la tinta de #svc y quedaba oscuro sobre oscuro. */
#svc .svc-cnt{color:var(--on-ink)}
#svc .svc-title{font-size:clamp(40px,3.6vw,56px);line-height:1.05;margin-bottom:12px}
#svc .svc-card:hover .svc-title{margin-bottom:12px}
#svc .svc-desc{font-size:17px;line-height:1.47;max-width:360px}
#svc .svc-link{font-size:17px;font-weight:400;color:var(--on-ink)}
#svc .svc-link::after{content:'›';font-size:20px;line-height:1}

/* ── SERVICIOS ADICIONALES ─────────────────────────────────────────────── */
.sup-sec{background:var(--paper);border-top:0;padding-bottom:120px;color:var(--ink)}
.sup-header{padding:40px 56px 48px}
.sup-sec .eye,.sup-sec .eye-r{color:var(--gray-3)}
.sup-sec .h3{color:var(--ink)}
.sup-grid{padding:0 56px;gap:20px}
.sup-card{background:var(--paper-soft);border:0;border-radius:28px;padding:40px 32px;-webkit-backdrop-filter:none;backdrop-filter:none}
.sup-card::before{display:none}
/* Al apuntar no cambia el fondo: el texto gris sobre --a-gris-medio queda en
   4.2:1, bajo AA. Lo que responde es la liga. */
.sup-card:hover,.sup-card:focus-within,.sup-card:active{background:var(--paper-soft);border-color:transparent;transform:none;box-shadow:none}
.sup-card:hover .sup-link,.sup-card:focus-within .sup-link{text-decoration:underline}
.sup-ic{color:var(--ink);font-size:28px;margin-bottom:24px}
.sup-title{color:var(--ink);font-size:24px;line-height:1.17;margin-bottom:12px}
.sup-desc{color:var(--gray-3);font-size:17px;line-height:1.47}
.sup-link{color:var(--ink);font-size:17px;font-weight:400}
.sup-link:hover{color:var(--ink);text-decoration:underline}
.sup-link::after{content:'›';font-size:20px;line-height:1}
.sup-card:focus-visible{outline-color:var(--ink)}

/* ── PROPIEDADES ───────────────────────────────────────────────────────── */
.props-sec{background:var(--paper-soft);color:var(--ink);padding:120px 56px 96px}
.props-eye{color:var(--gray-3)}
.props-title{color:var(--ink);font-size:clamp(40px,5vw,64px);line-height:1.05}
.props-title em{color:var(--ink)}
.props-head{margin-bottom:28px}
.props-sub{color:var(--gray-3);font-size:17px;margin:0 0 24px!important}
/* Las pestañas como un control segmentado: una píldora gris con la elegida
   en blanco. La elegida se distingue por el relleno, no por un color. */
/* `.props-sec` es una columna flex: sin `align-self` la píldora se estira a
   todo el ancho. El margen la alinea con el titular, que va centrado a 1400. */
.props-tabs{display:inline-flex;align-self:flex-start;width:auto;max-width:100%;margin:0 0 28px max(0px,calc((100% - 1400px) / 2));gap:2px;padding:3px;border:0;border-radius:980px;background:var(--paper-mid)}
.props-tab{color:var(--ink);font-size:14px;font-weight:500;padding:8px 18px;border:0;border-radius:980px;margin:0}
.props-tab:hover{color:var(--ink)}
.props-tab.active{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.props-tab .pt-ico,.props-tab.active .pt-ico{color:var(--ink)}
.props-tab .pt-dot{background:var(--ink);box-shadow:none}
.props-panel,.props-head,.props-tabs{max-width:1400px}
.props-head,.props-tabs-wrap{margin-left:auto;margin-right:auto}
.pcard-state{color:var(--gray-3)}
.pcard-state.pcard-error{color:var(--error)}
.props-cta-btn{font-size:17px;font-weight:400;color:var(--paper);background:var(--ink);border:0;padding:12px 24px;border-radius:980px}
.props-cta-btn:hover{background:var(--ink);color:var(--paper);transform:none;box-shadow:none;opacity:.85}

/* Las tarjetas: la misma property-card.css de /propiedades, aquí con la letra
   nueva y la esquina de la landing. */
.property-card,.property-card *{font-family:var(--sans)}
.property-card{border-radius:18px}

/* ── CIFRAS ────────────────────────────────────────────────────────────── */
.kpi-eye{color:var(--on-ink-2)}
.kpi-title{font-size:clamp(40px,5.6vw,72px);line-height:1.05}
.kpi-num{font-weight:600;letter-spacing:-.04em!important}
.kpi-rule{display:none}
.kpi-label{font-size:17px;font-weight:400;color:var(--on-ink-2)}

/* ── TESTIMONIOS ───────────────────────────────────────────────────────── */
.testi-v2{background:var(--paper)}
.testi-v2 .testi-title{font-size:clamp(34px,4.4vw,56px);line-height:1.08}
.testi-v2-text{font-size:clamp(21px,2.2vw,28px);line-height:1.32;font-weight:500;color:var(--ink)}
.testi-v2-name{font-size:15px;font-weight:600}
/* La barra entre el nombre y las estrellas iba en --gray-2: 2,5:1 sobre
   blanco (ya lo estaba antes, sobre el gris). Es texto: va en el gris de texto. */
.testi-v2-slash{color:var(--gray-3)}

/* ── RECLUTAMIENTO ─────────────────────────────────────────────────────── */
.rct-title{font-size:clamp(40px,5vw,56px);line-height:1.05}
/* «Montana Realty Co.» va sin cortar (un `style` en línea), y a 40 px no cabe
   en un teléfono: se salía por la derecha y la sección lo recortaba. */
@media(max-width:640px){.rct-title{font-size:30px}}
.rct-sub{font-size:19px}
.rct-cta-primary{font-size:17px;font-weight:400;border-radius:980px;padding:12px 26px;box-shadow:none}

/* ── BLOG ──────────────────────────────────────────────────────────────── */
.blog-sec{background:var(--paper-soft);color:var(--ink);padding:120px 56px 120px}
.blog-sec .eye,.blog-sec .eye-r{color:var(--gray-3)}
.blog-sec .h3{color:var(--ink)}
.blog-sec .cta{color:var(--ink);font-size:17px}
.blog-sec .cta::after{content:'›';width:auto;height:auto;background:none;font-size:20px;line-height:1}
.blog-grid{gap:20px;margin-top:48px}
.blog-card{background:var(--paper);border:0;border-radius:18px;-webkit-backdrop-filter:none;backdrop-filter:none}
.blog-card:hover{border-color:transparent;transform:none;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.blog-card:focus-visible{outline-color:var(--ink)}
.blog-img img{filter:none}
.blog-card:hover .blog-img img{filter:none}
.blog-body{padding:24px 24px 28px}
.blog-cat{font-size:13px;color:var(--gray-3);font-weight:600}
.blog-card .blog-title{font-size:21px;line-height:1.24;color:var(--ink);margin-bottom:10px}
.blog-card:hover .blog-title{color:var(--ink)}
.blog-excerpt{font-size:15px;line-height:1.47;color:var(--gray-3);margin-bottom:18px}
.blog-date{font-size:13px;color:var(--gray-3);font-weight:400}
.blog-read{font-size:15px;color:var(--ink);font-weight:400}
.blog-read:hover{color:var(--ink)}
.blog-read::after{content:'›';font-size:18px;line-height:1}

/* ── CONTACTO ──────────────────────────────────────────────────────────── */
/* Vivía sobre el negro del <body>; ahora lleva su propio fondo blanco, de
   borde a borde (la caja del formulario va centrada dentro). */
.ct{background:var(--paper);color:var(--ink);max-width:none;padding-left:max(56px,calc((100vw - 1388px) / 2));padding-right:max(56px,calc((100vw - 1388px) / 2))}
.ct .eye{color:var(--gray-3)}
.ct .big{color:var(--ink);font-size:clamp(44px,5.6vw,72px);line-height:1.05}
/* Mismo caso que el párrafo de #svc: el color va en un `style` en línea. */
.ct .ctl > p{color:var(--gray-3)!important;font-size:19px!important;line-height:1.42!important;max-width:400px!important}
.ct .cl{font-size:13px;color:var(--gray-3)}
.ct .cv{font-size:17px;color:var(--ink)}
.ct .cta{color:var(--ink);font-size:17px}
.ct .cta::after{content:'›';width:auto;height:auto;background:none;font-size:20px;line-height:1}
.ctr{background:var(--paper-soft);border:0;border-radius:28px;padding:40px}
.fl{font-size:13px;color:var(--gray-3);font-weight:500}
.fi,.fi-select{background-color:var(--paper);border:1px solid var(--gray-1);border-radius:12px;color:var(--ink);font-size:17px}
.fi::placeholder{color:var(--gray-3);font-size:17px}
.fi:hover,.fi-select:hover{border-color:var(--gray-2)}
.fi:focus,.fi-select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.fi.error,.fi[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px var(--error-soft)}
/* La flecha del desplegable venía en blanco para fondo oscuro. */
.fi-select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.fi-select option{background-color:var(--paper);color:var(--ink)}
.bsub{background:var(--ink);color:var(--paper);border:0;border-radius:980px;font-size:17px;font-weight:400;padding:12px}
.bsub:hover{background:var(--ink);color:var(--paper);transform:none;opacity:.85}

/* ── PIE ───────────────────────────────────────────────────────────────── */
/* `.site-footer` es el pie de las demás páginas (la ficha, el buscador…), con
   su propio fondo negro por clase: sin nombrarlo aquí, el fondo seguía negro y
   la letra de abajo, ya oscura, quedaba negro sobre negro (1,25:1). */
footer,.site-footer{background:var(--paper-soft);color:var(--ink)}
.footer-main{border-top:1px solid var(--gray-1)}
.footer-logo{filter:brightness(0);opacity:1}
.footer-brand .footer-tagline{font-size:21px;font-weight:600;color:var(--ink)}
.footer-brand .footer-description{font-size:14px;color:var(--gray-3)}
.fs-icon{border-color:var(--gray-1);color:var(--ink);border-radius:980px}
.fs-icon:hover{border-color:var(--ink);background:var(--paper);color:var(--ink);transform:none}
.footer-col-title{font-size:12px;color:var(--ink);font-weight:600;margin-bottom:14px}
.footer-col a{font-size:12px;color:var(--gray-3);margin-bottom:10px}
.footer-col a:hover{color:var(--ink);text-decoration:underline}
.footer-col a::before{display:none}
.footer-bottom{border-top:1px solid var(--gray-1)}
.footer-copy,.footer-legal a{font-size:12px;color:var(--gray-3);font-weight:400}
/* A 12 px la frase ya no cabe en un renglón a 390 (a 9 px sí cabía, ver
   index.html): va en dos, equilibrados, en vez de dejar «León» solo. */
.footer-copy{text-wrap:balance}
.footer-legal a:hover{color:var(--ink)}

/* ── LA FICHA Y EL BUSCADOR ─────────────────────────────────────────────── */
/* Los titulares de la ficha venían en Cinzel a 400: en la letra nueva eso es
   una línea fina. Van semibold y apretados, como los del home. */
.property-info h1{font-weight:600;letter-spacing:-.03em!important;line-height:1.08}
.property-description-section h2,.property-amenities-section h2,.property-map-section h2,.property-contact-modal-header h2,.property-error h2{font-weight:600;letter-spacing:-.02em!important}
.property-feature-value,.property-agent-name{font-weight:600}
.property-price{letter-spacing:-.03em!important}
.property-eyebrow{font-size:15px;font-weight:600;color:var(--gray-3)}
.property-feature-label{font-size:12px;font-weight:500}
.property-operation{font-size:12px;font-weight:600;border-radius:980px;padding:5px 12px}
.property-price-card{border-radius:18px;box-shadow:none}
.property-features{border-radius:18px}
/* Los separadores de la miga iban en --gray-2 (2,5:1): son texto. */
.property-breadcrumb .bc-sep{color:var(--gray-3)}
/* La nota de las propiedades sin ubicación pública iba en cursiva. */
.property-card .property-card-noloc{font-style:normal}

/* ── VENDER Y AGENDAR VISITA (#147) ────────────────────────────────────── */
/* Las dos páginas de formulario comparten cabecera (.page-*), campos (.fg) y
   el «Recibido» del final; cambia el nombre del botón y de la caja. */
.page-eye{font-size:17px;font-weight:600;color:var(--gray-3);margin-bottom:12px}
.page-title{font-size:clamp(40px,5.6vw,64px);font-weight:600;line-height:1.05;letter-spacing:-.03em!important}
.page-title em{font-style:normal;font-weight:inherit}
/* En Vender el titular comparte renglón con la foto: un punto más chico. */
.cv-hero .page-title{font-size:clamp(38px,4.4vw,56px)}
.page-deck{font-size:21px;line-height:1.38;color:var(--gray-3)}
.page-deck strong{font-weight:600}
:is(.cv-form-title,.cv-est-t,.paso-t,.faq-h,.cv-ok-t,.ok-t){font-weight:600;letter-spacing:-.02em!important}
:is(.cv-form-title,.faq-h) em{font-style:normal;font-weight:inherit}
.cv-form-title{font-size:28px}
.faq-h{font-size:clamp(32px,4vw,48px);letter-spacing:-.03em!important}
.cv-ok-t,.ok-t{font-size:28px}
/* Los pasos de /cuanto-vale (tarjetas con icono, en la página) sí son una
   secuencia: el número se queda, en gris. */
.paso-n{font-size:15px;font-weight:600}
.pasos .paso-t{font-size:21px;margin-bottom:6px}
.paso-d{font-size:17px;line-height:1.47}
/* Las cajas: grises, sin borde, con los campos en blanco (como el contacto del
   home). La de «ya elegiste» conserva su borde negro, que es la señal. */
.cv-form-box,.cv-est,.bloque{background:var(--paper-soft);border-color:transparent;border-radius:28px}
.bloque.hecho{border-color:var(--ink)}
.cv-est-eye{font-size:13px;font-weight:600}
.cv-est-t{font-size:24px;line-height:1.17}
.cv-est-cifra{font-weight:600;letter-spacing:-.03em!important}
.av-wrap .paso-t{font-size:24px}
.fg label{font-size:13px;font-weight:500}
.fg input,.fg select,.fg textarea,.buscador input{background:var(--paper);border-color:var(--gray-1);border-radius:12px;font-size:17px}
.fg input:focus,.fg select:focus,.fg textarea:focus,.buscador input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
/* El placeholder iba en --gray-2: 2,5:1. */
.fg input::placeholder,.fg textarea::placeholder,.buscador input::placeholder{color:var(--gray-3)}
.cv-submit,.enviar,.cv-cta{font-size:17px;font-weight:400;border:0;border-radius:980px;padding:14px 24px}
.cv-cta{padding:12px 26px}
.cv-submit:hover,.enviar:hover,.cv-cta:hover{background:var(--ink);color:var(--paper);opacity:.85}
.cv-ok-wa,.ok-wa{font-size:17px;font-weight:400;color:var(--paper);background:var(--ink);border:0;border-radius:980px;padding:12px 26px}
.cv-ok-wa:hover,.ok-wa:hover{background:var(--ink);color:var(--paper);opacity:.85}
.resultados{background:var(--paper);border-radius:12px}
.res-t,.elegida-t{font-weight:600}
.cambiar{font-size:15px;font-weight:500;border-bottom-width:1px}
.faq-q{font-size:17px;font-weight:600}
.faq-a{font-size:17px;line-height:1.47}
/* La liga del reporte iba en el azul por defecto del navegador. */
.faq-a a{color:var(--ink)}
.salida a{font-weight:600}

/* ── EQUIPO Y NOSOTROS (#148) ──────────────────────────────────────────── */
/* /equipo: su titular comparte clase con el del home (.hero-title, a 700),
   pero aquí es un titular de página como los demás: a 600. El del home va
   dentro de .hero-cnt, nunca hijo directo de .hero. */
.hero > .hero-title{font-weight:600;letter-spacing:-.03em!important}
/* El buscador de agentes, en píldora gris. */
.hero-sub{font-size:21px;line-height:1.38;color:var(--gray-3)}
.search-sec{border-bottom:0;padding:0 24px}
.search-wrap{max-width:560px;height:48px;padding:0 20px;background:var(--paper-soft);border-radius:980px}
.agent-search{font-size:17px}
/* El texto de muestra iba en --gray-2: 2,5:1. */
.agent-search::placeholder{color:var(--gray-3)}
.team-photo img{border-radius:28px}
.reveal-text{font-weight:600;line-height:1.3}
:is(.why-title-normal,.why-title-gray,.agents-title,.proj-title){font-weight:600;letter-spacing:-.03em!important}
/* Las palabras que se encienden al bajar son <span>: heredan el tracking del
   titular, como las letras del hero. */
:is(.why-title-gray,.agents-title,.reveal-text) .word{letter-spacing:inherit!important}
.proj-title em{font-style:normal;font-weight:inherit}
.acc-num{font-size:13px;font-weight:600}
.acc-title{font-size:19px;font-weight:600}
.acc-body p{font-size:17px;line-height:1.47}
/* LA DIRECCIÓN ARRIBA, Y LOS DEMÁS DE TRES EN TRES (Arturo, 2026-10-24):
   Maricela y Federico solos en el primer renglón, más grandes. Una rejilla de
   seis columnas: la dirección ocupa tres cada uno y el resto dos. Quién es
   dirección lo dice su puesto (`data-role` empieza por «Director»), no su
   lugar en el HTML, y `order` los sube aunque alguien reordene las tarjetas. */
.agents-grid{grid-template-columns:repeat(6,1fr);gap:40px 24px}
.agent-card{grid-column:span 2}
.agent-card[data-role^="Director"]{grid-column:span 3;order:-1}
/* A media pantalla, un retrato cuadrado pasaba del alto de la pantalla: la
   foto de la dirección va apaisada (4:3), con la cara arriba. */
.agent-card[data-role^="Director"] .agent-photo{aspect-ratio:4/3}
.agent-photo{border-radius:18px;margin-bottom:18px}
.agent-photo-placeholder{font-weight:500;letter-spacing:-.02em!important}
.agent-name{font-size:21px;font-weight:600;letter-spacing:-.02em!important}
.agent-role{font-size:14px;margin-bottom:12px}
.agent-contact a{font-size:14px}
/* /nosotros: el texto a la izquierda, sin justificar ni partir palabras. */
.nos-body{text-align:left;-webkit-hyphens:manual;hyphens:manual}
.nos-text{font-size:19px;line-height:1.5}
.nos-banner{border-radius:28px}
.proj-img{border-radius:18px}
.proj-name{font-size:19px;font-weight:600}
.proj-loc{font-size:13px}

/* ── LOS PROYECTOS: propiedades/torre-* (#149) ───────────────────────── */
.crumb ol{font-size:13px;color:var(--gray-3)}
.crumb a{color:var(--gray-3)}
.crumb a:hover{color:var(--ink)}
.crumb li[aria-current="page"]{color:var(--ink);font-weight:500}
.crumb li+li::before{color:var(--gray-3)}
.p-hero-img{border-radius:28px;box-shadow:none;background:var(--paper-soft)}
.p-eye{font-size:17px;font-weight:600;color:var(--gray-3);margin-bottom:12px}
.p-title{font-size:clamp(44px,5.2vw,72px);font-weight:600;line-height:1.05;letter-spacing:-.03em!important;color:var(--ink);margin-bottom:12px}
.p-loc{font-size:17px;font-weight:400;color:var(--gray-3);margin-bottom:24px}
.p-desc{font-size:19px;line-height:1.47;font-weight:400;color:var(--ink);max-width:520px}
.p-btn{font-size:17px;font-weight:400;color:var(--paper);background:var(--ink);border:0;padding:12px 26px;gap:8px}
.p-btn:hover{background:var(--ink);color:var(--paper);transform:none;opacity:.85}
.p-otros-tit{font-weight:600;letter-spacing:-.03em!important;color:var(--ink)}
.p-otro img{border-radius:18px;background:var(--paper-soft)}
.p-otro-nom{font-weight:600;color:var(--ink)}
.p-otro-loc{color:var(--gray-3)}

/* ── EL BLOG: /blog y sus artículos (#150) ───────────────────────────────── */
/* El tema (de negro a blanco) se cambió en las hojas de las páginas; aquí, la
   letra. Los acentos en cursiva de los titulares se van, como en el resto. */
.blog-hero .blog-title{font-size:clamp(48px,7vw,96px);font-weight:600;line-height:1;letter-spacing:-.04em!important}
.blog-hero .blog-title em{font-style:normal;font-weight:inherit}
.blog-eye{font-size:17px;font-weight:600}
.blog-sub{font-size:21px;line-height:1.38}
.pill{font-size:14px;font-weight:500;border-radius:980px;padding:8px 18px}
.art{border-radius:18px}
.art-img{border-radius:18px 18px 0 0}
.art-badge{font-size:12px;font-weight:600}
.art-title{font-weight:600;letter-spacing:-.02em!important;line-height:1.25}
.art-desc{font-size:15px;line-height:1.47}
.art-date,.art-read{font-size:13px;font-weight:400}
.art-featured .art-title{letter-spacing:-.03em!important}
/* Los artículos */
:is(.article-h1,.prose h2,.faq-h,.related-h,.cta-h,.author-name){font-weight:600;letter-spacing:-.025em!important}
:is(.article-h1,.prose h2,.faq-h,.related-h,.cta-h) em{font-style:normal;font-weight:inherit}
.article-h1{line-height:1.08}
.article-eye{font-size:13px;font-weight:600;background:var(--paper)}
.article-deck{font-size:21px;line-height:1.38}
.breadcrumb{font-size:13px}
.meta-name{font-size:15px}
.meta-role,.meta-pub,.meta-upd,.meta-read{font-size:13px}
.tldr,.toc,.callout,.author-box{border-radius:18px}
.tldr-label,.toc-label,.cta-eye{font-size:13px;font-weight:600}
.tldr-list li{font-size:17px;line-height:1.47}
.toc-list li{font-size:15px}
/* El cuerpo en tinta, no en gris: es lo que se lee de corrido. */
.prose{font-size:17px;line-height:1.6}
.prose p,.prose ul,.prose ol{color:var(--ink)}
.prose h3{font-size:21px;letter-spacing:-.02em!important}
.prose th{font-size:13px}
.prose blockquote{font-style:normal;font-weight:500}
.author-creds{font-style:normal}
.faq-item summary{font-size:17px;font-weight:600}
.faq-answer{font-size:17px;line-height:1.47}
.rel-card{border-radius:18px}
.rel-cat,.rel-meta{font-size:12px}
.rel-title{font-weight:600;letter-spacing:-.02em!important}
.cta-block{border-radius:28px}
.cta-btn{font-size:17px;font-weight:400;border-radius:980px;padding:12px 26px}

/* ── LEGALES Y 404 (#152) ────────────────────────────────────────────── */
/* La «/» de la miga iba en --gray-2 (2,3:1): es texto. */
.crumb .sep{color:var(--gray-3)}
.page-sub{font-size:15px}
.toc-title{font-size:13px;font-weight:600}
.toc li{font-size:15px}
.legal{font-size:17px;line-height:1.6}
.legal h2,.legal h3{font-weight:600;letter-spacing:-.02em!important}
.legal h2 .num{font-size:13px;letter-spacing:0!important}
.legal-callout{border-radius:0 18px 18px 0}
.legal-update{font-size:13px;font-weight:500;border-radius:980px}
/* La 404: el número, grande y apretado; los botones, en píldora. */
.wrap > h1{font-weight:700;letter-spacing:-.04em!important}
.wrap > h2{font-weight:600;letter-spacing:-.02em!important}
.wrap .eyebrow{font-size:15px}
a.btn{font-size:17px;font-weight:400;border-radius:980px;padding:12px 26px}

/* ── BOTONES Y AVISOS QUE FLOTAN ───────────────────────────────────────── */
:is(.sup-modal-btn,.sell-modal-submit,.apply-modal-submit,.sell-venta-cta,.sell-ok-wa,.art-modal-cta,.btn-hero,.cta-btn){
  font-size:17px;font-weight:400;border-radius:980px;
}
:is(.sell-modal,.apply-modal) .form-group label{font-size:13px;font-weight:500}
.sell-op-pill{font-size:15px;font-weight:500}
.toast{font-size:15px;font-weight:500;border-radius:980px}
.sticky-cta a{font-size:15px;font-weight:500;border-radius:980px}

/* ── MÓVIL ─────────────────────────────────────────────────────────────── */
/* LOS MÁRGENES DE ARRIBA PISAN LOS DEL HOME, también en móvil: `#svc
   .svc-header` o `.ct` aquí ganan a los `@media(max-width:900px)` de
   index.html (más especificidad, o la misma y después). Así que el tramo
   móvil se vuelve a decir aquí, entero, con el corte de 900 del home. */
@media(max-width:900px){
  .why-v2{padding:72px 0}
  #svc{padding-bottom:72px}
  #svc .svc-header{padding:72px 22px 28px}
  #svc .svc-grid{padding:0 22px;height:auto;gap:16px}
  .sup-sec{padding-bottom:72px}
  .sup-header{padding:16px 22px 28px}
  .sup-grid{padding:0 22px;gap:16px}
  .props-sec{padding:72px 22px 64px}
  .blog-sec{padding:72px 22px}
  .blog-grid{margin-top:32px}
  .ct{padding:56px 22px}
  .ctr{padding:24px;border-radius:22px}
  .cv-form-box,.cv-est,.bloque{border-radius:22px}
  .page-deck{font-size:19px}
  /* A 12 px ni la frase ni las tres ligas legales caben en un renglón (a 9 px
     sí): la liga que bajaba se quedaba sola a la izquierda. Todo centrado,
     también en el home, que alineaba la frase a la izquierda. */
  .footer-bottom{text-align:center}
  .team-photo img,.nos-banner{border-radius:22px}
  .nos-text{font-size:17px}
  .footer-legal{justify-content:center;gap:8px 20px}
}
/* El equipo: la rejilla de seis pisa la de una columna de la página en móvil
   (esta hoja va después), así que los tramos se dicen aquí: de dos en dos en
   tableta (la dirección sigue arriba por su `order`), una en teléfono. */
@media(max-width:1000px){.agents-grid{grid-template-columns:repeat(2,1fr)}.agent-card,.agent-card[data-role^="Director"]{grid-column:auto}.agent-card[data-role^="Director"] .agent-photo{aspect-ratio:1/1}}
@media(max-width:600px){.agents-grid{grid-template-columns:1fr}}
/* EL CONTROL SEGMENTADO EN TELÉFONO: TRES PARTES IGUALES A TODO EL ANCHO.
   Con su tamaño de escritorio no caben las tres a 390 y la píldora se
   partiría en dos renglones. Si aun así no cupieran (un teléfono aún más
   estrecho), el `wrap` de la regla del home las baja de renglón en vez de
   cortarlas: la red de seguridad del carril sigue puesta. */
@media(max-width:600px){
  .props-tabs{display:flex;align-self:stretch;margin-left:0;width:100%}
  .props-tab{flex:1 1 0;justify-content:center;padding:7px 4px;font-size:12px;white-space:nowrap}
}