/* ==========================================================================
   TENANT — hoja del sitio público (tenant.mx)
   Parte de los tokens de /marca/tenant-marca.css, que se enlaza ANTES que esta.
   Aquí vive lo común a la portada, la presentación y las propuestas:
   base, firma, cabecera, botones, etiquetas, iconos, estados, acento diagonal
   y pie. Lo propio de cada página va en su <style>.

   Criterios del manual de identidad (v1.0) que gobiernan esta hoja:
   · Inter en todo: 400 párrafos, 500 etiquetas, 600 subtítulos, 700 titulares.
   · Titular 32–48 px, sección 24–28 px, lectura 16 px, etiquetas 14–16 px,
     notas 12–14 px. Interlineado 1.3–1.5. Lectura alineada a la izquierda.
   · Retícula de 8 px. Esquinas de 8 y 16 px; sin píldoras.
   · ~70 % superficies claras, ~20 % marino, ~10 % turquesa.
   · Turquesa solo en acentos, bordes, fondos y elementos grandes; nunca como
     texto pequeño sobre blanco. Botón de marca: turquesa con texto marino.
   ========================================================================== */

:root {
  --ancho: 1200px;
  --margen: 40px;
  --cabecera: 72px;
  --tn-texto-claro: #C5CEDA;          /* texto secundario sobre marino */
  --tn-linea-clara: rgba(255, 255, 255, .18);
  --tn-critico-suave: #FBEAE8;
  --tn-atencion-suave: #FBF1E0;
  --tn-correcto-suave: #E6F2EC;
  --tn-neutro-suave: #EEF1F4;
}
@media (max-width: 900px) { :root { --margen: 24px; } }
@media (max-width: 480px) { :root { --margen: 16px; --cabecera: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* tenant-marca.css da margen a h1, h2 y p; aquí cada bloque pone el suyo. */
h1, h2, h3, h4, p { margin: 0; }
p { max-width: none; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--tn-blanco); color: var(--tn-marino); font: var(--tn-lectura); }
h3 { font: 600 18px/1.3 var(--tn-fuente); letter-spacing: -.005em; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; }
b, strong { font-weight: 600; }
p b, p strong, li b, dd b { color: var(--tn-marino); }
.tn-banda--marino b, .tn-banda--marino strong { color: inherit; }
sup { font-size: .6em; }
section[id] { scroll-margin-top: calc(var(--cabecera) + 24px); }
:focus-visible { outline: 3px solid var(--tn-turquesa); outline-offset: 2px; border-radius: 4px; }

/* ---------- Firma ----------
   Arte fijo: siempre <img> del SVG, nunca texto. El viewBox del archivo ya
   incluye el área de protección de H/4 por lado, así que la caja de la imagen
   es la zona que nada debe invadir. Ancho visible mínimo 150 px: la caja mide
   184 px y los trazos ocupan el 92 %, o sea ~170 px visibles. En pantallas
   angostas <picture> cambia la firma por el símbolo T, en caja de 48 px para que
   la T visible mida ~33 px (mínimo del manual: 32 px). */
.tn-marca { display: inline-flex; align-items: center; flex: none; line-height: 0; text-decoration: none; border-radius: var(--tn-radio); }
.tn-marca .tn-firma { display: block; width: 184px; min-width: 0; height: auto; }

/* ---------- Cabecera ---------- */
.tn-cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tn-linea);
}
.tn-cabecera-int {
  max-width: calc(var(--ancho) + var(--margen) * 2); margin: 0 auto;
  min-height: var(--cabecera); padding: 8px var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.tn-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tn-nav-enlace {
  font: var(--tn-etiqueta); color: var(--tn-marino); text-decoration: none;
  padding: 8px 12px; border-radius: var(--tn-radio); white-space: nowrap;
  transition: background .2s ease;
}
.tn-nav-enlace:hover { background: var(--tn-nube); }
.tn-nav .tn-boton { margin-left: 12px; padding: 10px 20px; }

/* Pantallas angostas: la firma cede al símbolo T y el botón de cotizar se va
   de la barra (está en el hero y en el cierre). Quedan las cuatro entradas. */
@media (max-width: 719px) {
  .tn-cabecera .tn-firma { width: 48px; height: 48px; }
}
@media (max-width: 640px) {
  .tn-nav .tn-boton { display: none; }
  .tn-nav { gap: 0; }
  .tn-nav-enlace { font-size: 14px; padding: 8px 7px; }
}
@media (max-width: 380px) {
  .tn-nav-enlace { padding: 8px 4px; }
}

/* ---------- Botones y enlaces ---------- */
.tn-boton { justify-content: center; line-height: 1.3; transition: filter .2s ease, transform .2s ease, background .2s ease; }
.tn-boton svg { flex: none; }
.tn-boton:hover { transform: translateY(-1px); }
.tn-boton--linea:hover { background: var(--tn-nube); filter: none; }
.tn-boton--clara { background: transparent; color: var(--tn-blanco); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .42); }
.tn-boton--clara:hover { background: rgba(255, 255, 255, .1); filter: none; }
.tn-boton em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--tn-texto); }

/* Enlace de texto: marino con subrayado turquesa. El color de marca va en la
   raya, que es un acento, y no en la letra. */
.tn-enlace {
  font: var(--tn-etiqueta); color: var(--tn-marino);
  text-decoration: underline; text-decoration-color: var(--tn-turquesa);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.tn-enlace:hover { text-decoration-color: var(--tn-marino); }

/* ---------- Etiqueta de apoyo (sustituye al rótulo en mayúsculas) ----------
   Medium, sin versalitas ni espaciado. La raya fina turquesa es la «línea de
   conexión» del manual. */
.tn-etq { display: flex; align-items: center; gap: 12px; font: var(--tn-etiqueta); color: var(--tn-texto); }
.tn-etq::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--tn-turquesa); }

/* ---------- Secciones ----------
   La sección es de lado a lado (para poder ser banda) y su contenido se ciñe
   al ancho con el relleno lateral: no hace falta envoltorio. */
.tn-sec { padding-block: 72px; padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
.tn-sec--nube { background: var(--tn-nube); }
.tn-sec > h2, .tn-sec-cab h2 { max-width: 26ch; text-wrap: balance; }
.tn-sec-cab p { margin-top: 16px; max-width: 68ch; text-wrap: pretty; }
@media (max-width: 900px) { .tn-sec { padding-block: 56px; } }

/* ---------- Iconos: un solo trazo y un solo tamaño aparente ---------- */
.tn-ico, svg.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tn-ico circle, .tn-ico rect, .tn-ico path, .tn-ico line, .tn-ico polyline,
svg.ico circle, svg.ico rect, svg.ico path, svg.ico line, svg.ico polyline { fill: none; }
.tn-ico { display: block; width: 24px; height: 24px; color: var(--tn-marino); }
/* Icono sobre pastilla turquesa suave: el color de marca entra como fondo. */
.tn-ico-caja {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--tn-radio); background: var(--tn-turquesa-suave); color: var(--tn-marino);
}
.tn-ico-caja .tn-ico { width: 22px; height: 22px; }

/* Flecha «señal → respuesta» del Centro de Operaciones */
.noc-arrow path, .tn-noc-arrow path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Estados operativos ----------
   Colores funcionales del manual. El color nunca va solo: cada estado lleva
   su texto. */
.tn-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: var(--tn-radio);
  font: 500 13px/1.3 var(--tn-fuente); white-space: nowrap;
}
.tn-chip--critico  { color: var(--tn-critico);  background: var(--tn-critico-suave); }
.tn-chip--atencion { color: var(--tn-atencion); background: var(--tn-atencion-suave); }
.tn-chip--correcto { color: var(--tn-correcto); background: var(--tn-correcto-suave); }
.tn-chip--neutro   { color: var(--tn-texto);    background: var(--tn-neutro-suave); }

/* ---------- Acento diagonal ----------
   La diagonal del símbolo T (ángulo recto arriba a la derecha) como recurso
   ocasional: una esquina por pieza, nunca repetida. */
.tn-diagonal { position: relative; overflow: hidden; }
.tn-diagonal::after {
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background: var(--tn-turquesa); clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}

/* Realce dentro de un titular: solo sobre marino, donde el turquesa sí lee. */
.tn-banda--marino .tn-realce { color: var(--tn-turquesa); }

/* ---------- Hero de la portada ---------- */
.tn-hero {
  padding-block: 72px 64px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px; align-items: center;
}
.tn-hero h1 { margin-top: 16px; text-wrap: balance; }
.tn-hero-sub { margin-top: 16px; font: 400 clamp(20px, 2.2vw, 24px)/1.3 var(--tn-fuente); color: var(--tn-marino); letter-spacing: -.01em; max-width: 30ch; }
.tn-hero-desc { margin-top: 16px; max-width: 58ch; text-wrap: pretty; }
.tn-hero-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.tn-hero-mas { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }

.tn-art {
  background: var(--tn-nube); border: 1px solid var(--tn-linea);
  border-radius: var(--tn-radio-grande); padding: 32px 24px 16px; color: var(--tn-marino);
}
.tn-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.tn-art .tn-nota { display: block; margin-top: 16px; text-align: left; }

/* ---------- Banda de datos ---------- */
.tn-datos { padding-block: 0 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tn-dato { border-top: 2px solid var(--tn-turquesa); padding-top: 16px; }
.tn-dato .n { display: block; font: 700 clamp(32px, 4vw, 40px)/1.1 var(--tn-fuente); letter-spacing: -.02em; }
.tn-dato .l { display: block; margin-top: 8px; font: var(--tn-etiqueta); color: var(--tn-texto); }

/* ---------- Módulos ---------- */
.tn-mod-grid {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--tn-linea); border: 1px solid var(--tn-linea);
  border-radius: var(--tn-radio-grande); overflow: hidden;
}
.tn-mod { background: var(--tn-blanco); padding: 24px; transition: background .2s ease; }
.tn-mod:hover { background: var(--tn-nube); }
.tn-mod h3 { margin-top: 16px; }
.tn-mod p { margin-top: 8px; font-size: 15px; line-height: 1.45; }

/* ---------- Razones ---------- */
.tn-porque-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.tn-porque { border-top: 2px solid var(--tn-turquesa); padding-top: 16px; }
.tn-porque p { margin-top: 8px; font-size: 15px; line-height: 1.45; }

/* ---------- Pie ----------
   Cierra con la firma de marca del manual: TENANT · Tu inmueble bajo control. · tenant.mx */
.tn-pie { border-top: 1px solid var(--tn-linea); padding-block: 40px 48px; padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
.tn-pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; }
.tn-pie-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tn-pie-nav a { font: var(--tn-etiqueta); color: var(--tn-marino); text-decoration: none; }
.tn-pie-nav a:hover { text-decoration: underline; text-decoration-color: var(--tn-turquesa); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tn-firma-marca { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tn-linea); font: var(--tn-etiqueta); color: var(--tn-marino); }
.tn-firma-marca a { text-decoration: none; }
.tn-pie .tn-nota { display: block; margin-top: 8px; }
.tn-pie .tn-nota a { color: inherit; }

@media (max-width: 1000px) {
  .tn-hero { grid-template-columns: 1fr; gap: 40px; padding-block: 48px; }
  .tn-hero .tn-art { order: 2; max-width: 560px; }
  .tn-mod-grid { grid-template-columns: repeat(2, 1fr); }
  .tn-porque-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tn-datos { grid-template-columns: 1fr; padding-block: 0 56px; }
  .tn-mod-grid, .tn-porque-grid { grid-template-columns: 1fr; }
  .tn-hero-acc .tn-boton { width: 100%; }
  .tn-pie-fila { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tn-boton, .tn-boton:hover { transition: none; transform: none; }
}