/* ⚠ COPIA AUTOMÁTICA · NO EDITAR ESTE ARCHIVO ⚠
   El original vive en `website/design-system/components.css` y se reparte con
   `_scripts/sync-design-system.py`. Cualquier cambio hecho aquí se pierde en la
   siguiente sincronización. Para cambiar un color, un radio o una tipografía en
   TODOS los productos a la vez, se edita el original y se ejecuta el programa. */

/* ============================================================
   LON Design System · components.css
   19 componentes. Consumen SOLO tokens semánticos de tokens.css.
   Reglas duras: cero border decorativo >=2px (hairline 1px sí,
   outline de foco 2px sí, inputs 1px sí), hover float en todo
   clickable, sombras cálidas, dark mode por tokens.
   ============================================================ */

/* ---------- Interacción base: hover float ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .tag-pill[href], .nav-pills a, .navbar-frame nav a,
  .card-property, .info-chip, .faq-item button, .theme-toggle,
  .footer a, .stat-tile[href] {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .btn:hover, .nav-pills a:hover, .navbar-frame nav a:hover,
  .card-property:hover, .info-chip:hover, .theme-toggle:hover,
  .footer a:hover, .tag-pill[href]:hover {
    transform: translateY(-2px);
  }
}

/* ============ 1 · btn ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px/1 var(--font-body);
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 0; cursor: pointer; text-decoration: none;
  color: var(--text); background: var(--panel);
}
.btn:hover { box-shadow: var(--sh-2); }
.btn-primary { background: var(--brand-fill); color: var(--brand-contrast); }
.btn-primary:hover { background: var(--brand-fill-strong); }
.btn-secondary { background: var(--panel); color: var(--text); box-shadow: var(--sh-1); }
.btn-secondary:hover { background: var(--line); }
.btn-ghost { background: transparent; padding-inline: 8px; text-decoration: underline; text-underline-offset: 4px; }
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  flex-shrink: 0; /* dentro de un flex apretado (info-chip movil) el circulo no se achata */
  background: var(--brand-fill); color: var(--brand-contrast); border: 0; cursor: pointer;
}
.btn-circle:hover { background: var(--brand-fill-strong); box-shadow: var(--sh-2); }
.btn-circle--lg { width: 56px; height: 56px; }
.btn-circle--soft { background: var(--panel); color: var(--text); }
.btn-circle--soft:hover { background: var(--line); }
.btn svg, .btn-circle svg { width: 18px; height: 18px; }

/* ============ 2 · tag-pill ============ */
.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); background: var(--panel);
  padding: 9px 14px; border-radius: var(--r-pill); text-decoration: none;
}
.tag-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
.tag-pill .dot--sf { background: var(--accent-sf); }
.tag-pill .dot--nido { background: var(--accent-nido); }
.tag-pill--onmedia { background: var(--glass); backdrop-filter: blur(12px); color: var(--text); }
.tag-pill--brand { background: var(--brand-fill); color: var(--brand-contrast); }

/* ============ 3 · chip-icon ============ */
.chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand-contrast) 18%, transparent);
  color: currentColor;
}
.chip-icon svg { width: 18px; height: 18px; }

/* ============ 4 · avatar ============ */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--bg);
}
.avatar-row { display: flex; justify-content: center; padding-left: 12px; }
.avatar-row .avatar { margin-left: -12px; }
.avatar--initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text-muted);
  font: 600 13px/1 var(--font-body);
}

/* ============ 5 · input / select ============ */
.field { display: grid; gap: 6px; }
.field > label { font: 600 12px/1 var(--font-body); color: var(--text-muted); letter-spacing: .04em; }
.input, .select {
  font: 400 15px/1.3 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
}
.input::placeholder { color: var(--text-soft); }

/* ============ 6 · divider ============ */
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ============ 7 · theme-toggle ============ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel); color: var(--text); border: 0; cursor: pointer;
}
.theme-toggle:hover { box-shadow: var(--sh-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

/* ============ 8 · nav-pills (glass, condiciones de accesibilidad) ============ */
.nav-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-pills a {
  display: inline-flex; align-items: center;
  font: 500 14px/1 var(--font-body); color: var(--text); text-decoration: none;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav-pills a { background: color-mix(in srgb, var(--bg) 92%, transparent); }
}
.nav-pills a:hover, .nav-pills a[aria-current="page"] { background: var(--surface); box-shadow: var(--sh-1); }

/* ============ 9 · navbar-frame (cabecero ref 09) ============ */
.navbar-frame {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: var(--surface); border-radius: var(--r-frame);
  box-shadow: var(--sh-1);
  padding: 14px 22px; margin-top: var(--s-3);
  flex-wrap: wrap;
}
.navbar-frame nav { display: flex; gap: 4px; flex-wrap: wrap; }
.navbar-frame nav a {
  font: 500 14px/1 var(--font-body); color: var(--text); text-decoration: none;
  padding: 11px 16px; border-radius: var(--r-pill);
}
.navbar-frame nav a:hover, .navbar-frame nav a[aria-current="page"] { background: var(--panel); }
.navbar-frame .brand-mark { display: inline-flex; color: var(--brand); }
.navbar-frame .brand-mark svg { height: 26px; width: auto; }
.navbar-frame .nav-actions { display: flex; align-items: center; gap: 10px; }

/* ============ 10 · section-head ============ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.section-head h2 {
  font: 600 clamp(28px, 3.5vw, 44px)/1.08 var(--font-display);
  margin: 0; letter-spacing: -0.01em; text-wrap: balance;
}

/* ============ 11 · stat-tile ============ */
.stat-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-tile {
  background: var(--surface); border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-4); box-shadow: var(--sh-1);
  display: grid; gap: 6px; align-content: start; position: relative;
}
.stat-tile .num {
  font: 600 clamp(40px, 4.5vw, 64px)/1 var(--font-display);
  letter-spacing: -0.015em;
}
.stat-tile .lbl { font: 400 14px/1.5 var(--font-body); color: var(--text-muted); }
.stat-tile--accent { background: var(--brand-fill); }
.stat-tile--accent .num { color: var(--brand-contrast); }
.stat-tile--accent .lbl { color: color-mix(in srgb, var(--brand-contrast) 88%, transparent); }
.stat-tile--accent .chip-icon { position: absolute; top: 16px; right: 16px; color: var(--brand-contrast); }

/* ============ 12 · search-band ============ */
.search-band {
  display: flex; gap: var(--s-3); align-items: end; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-1); padding: var(--s-4);
}
.search-band .field { flex: 1 1 220px; }
.search-band .btn { flex: 0 0 auto; }

/* ============ 13 · card-property ============ */
.property-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.card-property {
  display: grid; gap: 14px; align-content: start;
  background: var(--surface); border-radius: var(--r-lg);
  padding: 14px 14px 20px; box-shadow: var(--sh-1);
  text-decoration: none; color: inherit; position: relative;
}
.card-property:hover { box-shadow: var(--sh-2); }
.card-property .media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.card-property .media img { width: 100%; height: 100%; object-fit: cover; }
.card-property .media .tag-pill { position: absolute; top: 12px; left: 12px; }
.card-property .media .render-note { position: absolute; bottom: 12px; right: 12px; }
.card-property h3 { font: 600 22px/1.2 var(--font-display); margin: 0; padding-inline: 8px; }
.card-property .meta { font: 400 14px/1.5 var(--font-body); color: var(--text-muted); padding-inline: 8px; margin: 0; }
.card-property .card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 8px; margin-top: 4px;
}
.card-property .price { font: 600 16px/1.2 var(--font-body); }
.card-property--featured { grid-row: span 1; }
@media (min-width: 980px) {
  .property-grid--home { grid-template-columns: 1.25fr 1fr; }
}
.render-note {
  display: inline-flex; font: 600 10px/1 var(--font-body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--cream);
  background: rgba(28, 20, 16, .55); backdrop-filter: blur(6px);
  padding: 7px 10px; border-radius: var(--r-pill);
}
/* Variante para FOTO REAL: granate glassmorph + letras blancas; el RENDER se queda
   en el negro glass de arriba (CEO 2026-07-13) */
.render-note--real { background: rgba(110, 26, 42, .62); color: #FFFFFF; }


/* ============ 14 · info-chip ============ */
.info-chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--r-pill);
  box-shadow: var(--sh-2); padding: 8px 10px 8px 8px;
  text-decoration: none; color: inherit;
}
.info-chip .thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.info-chip .txt { display: grid; line-height: 1.25; }
.info-chip .txt strong { font: 600 14px/1.3 var(--font-body); }
.info-chip .txt span { font: 400 12px/1.3 var(--font-body); color: var(--text-muted); }

/* ============ 15 · testimonial ============ */
.testimonial { text-align: center; max-width: 760px; margin-inline: auto; display: grid; gap: var(--s-4); }
.testimonial blockquote {
  font: 400 clamp(20px, 2.4vw, 28px)/1.45 var(--font-display);
  margin: 0; text-wrap: balance;
}
.testimonial .who { font: 600 14px/1.4 var(--font-body); color: var(--text-muted); }
.testimonial .controls { display: flex; gap: 8px; justify-content: center; }

/* ============ 16 · faq-item ============ */
.faq-list { display: grid; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; }
.faq-item button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 18px/1.35 var(--font-body); color: var(--text);
  padding: 22px 4px;
}
.faq-item button .faq-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text);
}
.faq-item button[aria-expanded="true"] .faq-ico { background: var(--brand-fill); color: var(--brand-contrast); }
.faq-item button[aria-expanded="true"] .faq-ico svg { transform: rotate(45deg); }
.faq-item .faq-panel { padding: 0 4px 22px; color: var(--text-muted); max-width: 70ch; }
.faq-item .faq-panel[hidden] { display: none; }

/* ============ 17 · hero-mask (organismo firma, ley del 25 %) ============ */
.hero-mask {
  position: relative; overflow: hidden;
  /* Esquina inferior izquierda RECTA: ahí vive la muesca del dock y su
     curva cóncava hace la transición; el radio grande la recortaría. */
  border-radius: var(--r-mask) var(--r-mask) var(--r-mask) 0;
  min-height: clamp(380px, 58vh, 560px);
}
.hero-mask > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Video de fondo en loop (home; el mismo de la web oficial, CEO 2026-07-13). Va SOBRE el img
   (que queda de fallback/poster hasta que el video pinta) y bajo el scrim y el contenido. */
.hero-mask > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Claim sobre el hero de la home, zona inferior DERECHA, tamano h2 (CEO 2026-07-13) */
.hero-claim {
  /* AL LADO de la ficha del dock, misma linea inferior, alineado a la izquierda
     (posicion cerrada por el CEO 2026-07-13); tamano = h2 canonico (.section-head h2) */
  position: absolute; left: clamp(430px, 36vw, 520px); bottom: clamp(22px, 3vw, 36px);
  font: 600 clamp(28px, 3.5vw, 44px)/1.08 var(--font-display); letter-spacing: -0.01em;
  color: var(--cream); text-align: left; max-width: 18ch; z-index: 2;
  text-shadow: 0 2px 18px rgba(28, 20, 16, .6), 0 1px 4px rgba(28, 20, 16, .5);
}
@media (max-width: 920px) {
  /* en movil no hay hueco al lado: el claim va SOBRE la ficha, a la izquierda */
  .hero-claim { left: 20px; bottom: 108px; max-width: 12ch; }
}
.hero-mask .render-note { position: absolute; top: 28px; right: clamp(48px, 7vw, 96px); }
/* La muesca pinta SIEMPRE el color del fondo sobre el que se apoya la
   máscara: --dock-bg lo define el contenedor (página = crema; demos sobre
   pergamino = pergamino). Nunca asumir crema. */
.hero-dock {
  position: absolute; left: 0; bottom: 0;
  background: var(--dock-bg, var(--bg));
  padding: 16px 28px 0 0;
  border-top-right-radius: 36px;
}
/* Movil: la ficha ocupa como maximo el 70% de la columna (deroga el 50% del
   2026-07-11) y el chip pierde el avatar (.thumb): solo texto + icono flecha,
   que el avatar comprimido se veia mal. Tipografia REDUCIDA para que el texto
   quepa limpio en su espacio: titulo max 2 lineas, nota max 2 lineas
   (correcciones CEO 2026-07-13) */
@media (max-width: 920px) {
  .hero-dock { max-width: 70%; padding-right: 18px; }
  .hero-dock .info-chip { align-items: center; padding-left: 14px; gap: 10px; }
  .hero-dock .info-chip .txt span { white-space: normal; font-size: 11.5px; }
  .hero-dock .info-chip .txt strong { font-size: 13px; line-height: 1.25; }
  .hero-dock .info-chip .thumb { display: none; }
}
.hero-dock::before,
.hero-dock::after {
  content: ""; position: absolute; width: 36px; height: 36px;
  background: radial-gradient(circle at 100% 0, transparent 36px, var(--dock-bg, var(--bg)) 36.5px);
}
.hero-dock::before { left: 0; top: -36px; }
.hero-dock::after { right: -36px; bottom: 0; }
/* Variante: muesca en la esquina inferior DERECHA (ficha a la derecha) */
.hero-dock--right {
  left: auto; right: 0;
  padding: 16px 0 0 28px;
  border-top-right-radius: 0; border-top-left-radius: 36px;
}
.hero-dock--right::before,
.hero-dock--right::after {
  background: radial-gradient(circle at 0 0, transparent 36px, var(--dock-bg, var(--bg)) 36.5px);
}
.hero-dock--right::before { left: auto; right: 0; top: -36px; }
.hero-dock--right::after { right: auto; left: -36px; bottom: 0; }
/* Radios uniformes de 36px (iguales a la curva de la muesca), orden CEO */
.hero-mask--dock-right { border-radius: 36px 36px 0 36px; }
.hero-mask--uniform { border-radius: 36px 36px 36px 0; }

/* ============ 18 · cta-band ============ */
.cta-band {
  background: var(--brand-fill); color: var(--brand-contrast);
  border-radius: var(--r-hero);
  padding: clamp(40px, 6vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.cta-band h2 {
  font: 600 clamp(30px, 4.5vw, 56px)/1.05 var(--font-display);
  text-transform: uppercase; letter-spacing: -0.005em;
  margin: 0; max-width: 14ch;
}
.cta-band .btn { background: var(--cream); color: var(--on-veil-light); }
.cta-band .btn:hover { background: var(--white); }

/* ============ 19 · footer ============ */
.footer { background: var(--panel); margin-top: var(--s-8); }
.footer-inner { display: grid; gap: var(--s-5); padding-block: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer .brand-mark { color: var(--brand); }
.footer .brand-mark svg { height: 34px; width: auto; }
.footer h4 { font: 600 13px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { font: 400 13px/1.4 var(--font-body); color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer .legal {
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
  font: 400 12px/1.5 var(--font-body); color: var(--text-soft);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
}

/* ============ Tipografía display de página ============ */
.display-hero {
  /* Brandbook: titulares SIEMPRE en mayúsculas, peso medium/semibold */
  font: 600 clamp(44px, 7.5vw, 108px)/0.98 var(--font-display);
  text-transform: uppercase; letter-spacing: -0.005em;
  margin: 0; text-wrap: balance;
}
/* Variante oficial para cabeceros Marco v1 (antes reduccion inline ad hoc, promovida a catalogo 2026-07-11) */
.display-hero--page { font-size: clamp(36px, 5.5vw, 82px); }

.lead { font: 400 17px/1.6 var(--font-body); color: var(--text-muted); max-width: 46ch; }
.prose-xl {
  font: 400 clamp(20px, 2.2vw, 26px)/1.5 var(--font-display);
  letter-spacing: -0.005em;
}
.prose-xl em { font-style: italic; color: var(--brand-strong); }
[data-theme="dark"] .prose-xl em { color: var(--brand); }

/* ============ Utilidades de sección ============ */
.section { padding-block: var(--s-6); }
@media (min-width: 900px) { .section { padding-block: var(--s-8); } }

/* ============================================================
   AMPLIACIÓN MOODBOARD COMPLETO (refs 06, 12, 14)
   ============================================================ */

/* ============ 20 · nav-minimal (ref 06 NestHub) ============ */
.nav-minimal {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 18px 4px; flex-wrap: wrap;
}
.nav-minimal .brand-mark { display: inline-flex; color: var(--brand); }
.nav-minimal .brand-mark svg { height: 22px; width: auto; }
.nav-minimal .links {
  display: flex; gap: 2px; background: var(--panel);
  border-radius: var(--r-pill); padding: 4px;
}
.nav-minimal .links a {
  font: 500 13.5px/1 var(--font-body); color: var(--text-muted); text-decoration: none;
  padding: 10px 16px; border-radius: var(--r-pill);
}
.nav-minimal .links a:hover, .nav-minimal .links a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-dim); }
[data-theme="dark"] .btn-ink { background: var(--cream); color: var(--on-veil-light); }
[data-theme="dark"] .btn-ink:hover { background: var(--white); }

/* ============ 21 · hero-split + media-organic (ref 06) ============ */
.hero-split {
  display: grid; gap: var(--s-5); align-items: center;
  grid-template-columns: 1fr; padding-block: var(--s-5);
}
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.05fr 1fr; gap: var(--s-7); } }
.hero-split .display-soft {
  font: 600 clamp(34px, 4.2vw, 60px)/1.06 var(--font-display);
  letter-spacing: -0.01em; margin: 0 0 18px; text-wrap: balance;
}
.media-organic { position: relative; overflow: hidden; }
.media-organic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
/* Asimetría orgánica con la ley del 25 %: tres esquinas grandes, una cápsula */
.media-organic { border-radius: clamp(48px, 8vw, 110px) var(--r-hero) clamp(48px, 8vw, 110px) clamp(72px, 14vw, 190px); }

/* ============ 22 · search-card (ref 14 Aurevia) ============ */
.search-card {
  display: grid; gap: 14px;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: var(--s-4);
  max-width: 360px; width: 100%;
}
.search-card h3 { font: 600 18px/1.3 var(--font-display); margin: 0; }
.search-card .btn { justify-content: center; }

/* ============ 23 · hero-panel (ref 14): foto dentro de panel redondeado ============ */
.hero-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-frame);
  min-height: clamp(420px, 62vh, 600px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-4);
}
.hero-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-panel > * { position: relative; }
.hero-panel .panel-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.hero-panel .panel-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.hero-panel .panel-title {
  font: 600 clamp(30px, 3.8vw, 54px)/1.08 var(--font-display);
  color: var(--cream); margin: 0; max-width: 15ch;
  text-shadow: 0 2px 24px rgba(28, 20, 16, .45);
}
.hero-panel .panel-sub { font: 400 15px/1.55 var(--font-body); color: var(--cream); max-width: 44ch; opacity: .92; }
.hero-panel .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28, 20, 16, .55) 0%, rgba(28, 20, 16, .05) 45%);
}

/* ============ 24 · hero-canvas (ref 12 EquityFlow): declaración centrada ============ */
.hero-canvas { text-align: center; display: grid; gap: var(--s-4); justify-items: center; padding-block: var(--s-6) var(--s-5); }
.hero-canvas .display-centered {
  font: 600 clamp(34px, 4.6vw, 68px)/1.08 var(--font-display);
  letter-spacing: -0.01em; margin: 0; max-width: 20ch; text-wrap: balance;
}
.hero-canvas .lead { text-align: center; margin-inline: auto; }
.hero-canvas .cta-pair { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============ 25 · media-band + overlay-caption + scroll-cue (ref 12) ============ */
.media-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-hero);
  min-height: clamp(320px, 52vh, 520px);
}
.media-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-band .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top right, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .08) 75%);
}
.overlay-caption {
  position: absolute; left: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 40px);
  display: grid; gap: 8px; max-width: 520px; color: var(--cream);
}
.overlay-caption strong { font: 600 clamp(20px, 2.2vw, 28px)/1.25 var(--font-display); }
.overlay-caption span { font: 400 14px/1.6 var(--font-body); opacity: .92; }
.scroll-cue {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 40px);
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cream); font: 600 13px/1 var(--font-body); text-decoration: none;
}
.scroll-cue .btn-circle { background: color-mix(in srgb, var(--cream) 22%, transparent); backdrop-filter: blur(8px); color: var(--cream); }
.scroll-cue:hover .btn-circle { background: color-mix(in srgb, var(--cream) 34%, transparent); }

/* ============ 26 · card-location (ref 06) ============ */
.location-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card-location { display: grid; gap: 0; text-decoration: none; color: inherit; }
.card-location .media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.card-location .media img { width: 100%; height: 100%; object-fit: cover; }
.card-location .media .tag-pill { position: absolute; top: 12px; right: 12px; }
.card-location .place {
  display: flex; align-items: center; gap: 8px;
  font: 600 16px/1.3 var(--font-body);
  padding: 16px 4px 14px; border-bottom: 1px solid var(--line);
}
.card-location .place svg { width: 16px; height: 16px; color: var(--brand); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .card-location { transition: transform .18s ease; }
  .card-location:hover { transform: translateY(-2px); }
}

/* ============ 27 · card-listing + spec-chip (refs 06 y 14) ============ */
.card-listing {
  display: grid; gap: 16px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 14px;
}
@media (min-width: 760px) { .card-listing { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.card-listing .media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.card-listing .media img { width: 100%; height: 100%; object-fit: cover; }
.card-listing .body { display: grid; gap: 12px; padding: 6px 8px 6px 4px; align-content: center; }
.card-listing h3 { font: 600 22px/1.2 var(--font-display); margin: 0; }
.card-listing .price { font: 600 17px/1.3 var(--font-body); color: var(--brand-strong); }
[data-theme="dark"] .card-listing .price { color: var(--brand); }
.spec-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.spec-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px/1 var(--font-body); color: var(--text-muted);
  background: var(--panel); border-radius: var(--r-pill); padding: 8px 12px;
}
.spec-chip svg { width: 14px; height: 14px; }

/* ============ 28 · card-testimonial (ref 14) ============ */
.testimonial-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-testimonial {
  display: grid; gap: 14px; align-content: start;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--s-4);
}
.card-testimonial .head { display: flex; align-items: center; gap: 12px; }
.card-testimonial .head .who { display: grid; }
.card-testimonial .head strong { font: 600 14.5px/1.3 var(--font-body); }
.card-testimonial .head span { font: 400 12.5px/1.3 var(--font-body); color: var(--text-soft); }
.card-testimonial p { font: 400 15px/1.6 var(--font-body); color: var(--text-muted); margin: 0; }

/* ============ 29 · faq numerada (ref 14, variante) ============ */
.faq-item--num button { gap: var(--s-3); justify-content: flex-start; }
.faq-item--num .faq-num {
  flex: 0 0 auto; font: 600 13px/1 var(--font-body); color: var(--text-soft);
  min-width: 34px; letter-spacing: .04em;
}
.faq-item--num button .faq-ico { margin-left: auto; }

/* ============ 31 · header-marco v2 (compacto, titular dentro de la imagen) ============ */
.header-marco-v2 { display: grid; gap: 14px; }
.header-marco-v2 .navbar-frame { margin-top: 0; }
.hero-mask .scrim-top {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(28, 20, 16, .58) 0%, rgba(28, 20, 16, 0) 60%);
}
.hero-mask .hero-title {
  position: absolute;
  left: clamp(24px, 5vw, 72px); top: clamp(24px, 5vw, 60px);
  font: 600 clamp(32px, 5vw, 76px)/1.02 var(--font-display);
  text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--cream); margin: 0; max-width: 17ch; text-wrap: balance;
}

/* ============ 30 · photo-mosaic (ref 06) ============ */
.photo-mosaic { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.photo-mosaic .cell { border-radius: var(--r-md); overflow: hidden; }
.photo-mosaic .cell img { width: 100%; height: 100%; object-fit: cover; }
.photo-mosaic .cell--tall { grid-row: span 2; border-radius: var(--r-lg); }
@media (max-width: 700px) { .photo-mosaic { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   SECCIONES (organismos de página completos)
   ============================================================ */

/* ============ 32 · section-stats (ref 15): tiles suaves + acento ============ */
.stats-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stat-tile--soft {
  position: relative;
  background: var(--panel); box-shadow: none;
  border-radius: var(--r-xl); padding: var(--s-4);
  min-height: 230px; align-content: end;
}
.stat-tile--soft .chip-icon {
  position: absolute; top: 18px; right: 18px;
  width: 52px; height: 52px;
  background: var(--surface); color: var(--text);
  box-shadow: var(--sh-1);
}
.stat-tile--soft .num { font-size: clamp(44px, 5vw, 72px); }
/* Acentos: el texto grande pasa AA; texto pequeño en crema al máximo cuerpo */
.stat-tile--flame { background: var(--accent-flame); }
.stat-tile--coral { background: var(--accent-coral); }
.stat-tile--flame .num, .stat-tile--coral .num { color: var(--cream); }
.stat-tile--flame .lbl, .stat-tile--coral .lbl { color: color-mix(in srgb, var(--cream) 92%, transparent); font-size: 15px; font-weight: 500; }
.stat-tile--flame .chip-icon, .stat-tile--coral .chip-icon { background: var(--cream); color: var(--on-veil-light); }

/* ============ 33 · section-discover (ref 15) ============ */
.discover-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5);
  padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.discover-head h2 { font: 600 clamp(30px, 3.6vw, 48px)/1.05 var(--font-display); margin: 0; }
.discover-head p { font: 400 13.5px/1.6 var(--font-body); color: var(--text-muted); max-width: 42ch; margin: 0; }
.discover-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); align-items: start; }
.card-mini { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.card-mini .media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1 / 1.05; }
.card-mini .media img { width: 100%; height: 100%; object-fit: cover; }
.card-mini .name { font: 600 15px/1.35 var(--font-body); }
.card-mini--featured .media { aspect-ratio: 3 / 4; }
.card-mini--featured .name { font-size: 17px; }
.card-mini--featured .media .btn-circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); color: var(--text); width: 56px; height: 56px;
}
.card-mini--featured:hover .media .btn-circle { background: var(--brand-fill); color: var(--brand-contrast); }
@media (prefers-reduced-motion: no-preference) {
  .card-mini { transition: transform .18s ease; }
  .card-mini:hover { transform: translateY(-2px); }
}
.discover-foot {
  display: flex; gap: 8px; align-items: center; margin-top: var(--s-4);
  font: 400 12.5px/1.4 var(--font-body); color: var(--text-soft);
}
.discover-foot svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .discover-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ 34 · section-about-centered (ref 14) ============ */
/* Columnas reales (no absolutos): las imágenes laterales viven en su
   propia columna y NUNCA pueden solaparse con lo de arriba o abajo. */
.about-centered {
  display: grid; align-items: center; gap: var(--s-5);
  grid-template-columns: minmax(130px, .38fr) 2fr minmax(130px, .38fr);
  padding-block: var(--s-5);
}
.about-centered .about-body { text-align: center; }
.about-centered h2 {
  font: 600 clamp(30px, 3.8vw, 52px)/1.12 var(--font-display);
  margin: 0 auto 16px; max-width: 21ch; text-wrap: balance;
}
.about-centered .about-body p { font: 400 15px/1.65 var(--font-body); color: var(--text-muted); max-width: 52ch; margin: 0 auto; }
.about-float { display: grid; gap: 14px; }
.about-float img { border-radius: var(--r-lg); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; box-shadow: var(--sh-1); }
.about-float--left img:first-child { transform: translateX(-16px); opacity: .9; }
.about-float--right img:last-child { transform: translateX(16px); opacity: .9; }
@media (max-width: 980px) {
  .about-centered { grid-template-columns: 1fr; }
  .about-float { display: none; }
}

/* ============ 35 · section-featured-grid (ref 06): cards + celda de cifra ============ */
.featured-head { text-align: center; margin-bottom: var(--s-5); }
.featured-head h2 { font: 600 clamp(28px, 3.4vw, 44px)/1.1 var(--font-display); margin: 0 0 10px; }
.featured-head p { font: 400 14px/1.6 var(--font-body); color: var(--text-muted); max-width: 52ch; margin-inline: auto; }
.featured-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.card-sale {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 12px; display: grid; gap: 12px; align-content: start;
  text-decoration: none; color: inherit;
}
.card-sale .media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.card-sale .media img { width: 100%; height: 100%; object-fit: cover; }
.card-sale .media .tag-pill { position: absolute; top: 10px; right: 10px; }
.card-sale h3 { font: 600 18px/1.25 var(--font-display); margin: 0; padding-inline: 6px; }
.card-sale .meta {
  display: flex; gap: 12px; flex-wrap: wrap; padding-inline: 6px; margin: 0;
  font: 400 12.5px/1.5 var(--font-body); color: var(--text-muted);
}
.card-sale .meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-sale .meta svg { width: 13px; height: 13px; }
.card-sale .foot { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 4px; }
.card-sale .price { font: 600 15.5px/1.2 var(--font-body); }
.card-sale .btn { padding: 10px 18px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .card-sale { transition: transform .18s ease, box-shadow .18s ease; }
  .card-sale:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
}
@media (max-width: 980px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .featured-grid { grid-template-columns: 1fr; } }

/* ============ 36 · section-connect (ref 06): mosaico escalonado + redes ============ */
.connect-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  margin-bottom: var(--s-6); flex-wrap: wrap;
}
.connect-head h2 { font: 600 clamp(28px, 3.4vw, 46px)/1.1 var(--font-display); margin: 0; max-width: 16ch; }
.social-block { display: grid; gap: 10px; justify-items: end; }
.social-block span { font: 600 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.social-row { display: flex; gap: 8px; }
.social-row .btn-circle { width: 40px; height: 40px; }
.mosaic-stagger { display: grid; gap: 14px; grid-template-columns: repeat(7, 1fr); align-items: center; }
.mosaic-stagger .cell { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 4; }
.mosaic-stagger .cell img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-stagger .cell--hero { aspect-ratio: 9 / 13; border-radius: var(--r-lg); }
.mosaic-stagger .cell:nth-child(odd):not(.cell--hero) { transform: translateY(22px); }
.mosaic-stagger .cell:nth-child(even):not(.cell--hero) { transform: translateY(-18px); }
@media (max-width: 900px) {
  .mosaic-stagger { grid-template-columns: repeat(3, 1fr); }
  .mosaic-stagger .cell:nth-child(n+7) { display: none; }
}

/* ============ 36b · connect-arc (Conecta V2, réplica de la ref 06) ============ */
/* 5 columnas: sencilla centrada · doble (la 2ª se corta abajo) · HERO a
   toda altura · doble (cortada) · sencilla baja. El corte inferior lo da
   la altura fija del contenedor con overflow hidden, como en la ref. */
.connect-arc {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: .85fr 1fr 1.5fr 1fr .85fr;
  height: clamp(380px, 38vw, 520px);
  overflow: hidden;
}
.connect-arc .col { display: grid; gap: 20px; align-content: start; min-height: 0; }
.connect-arc .col img {
  width: 100%; object-fit: cover; display: block;
  border-radius: var(--r-lg);
}
.connect-arc .col--a { align-self: center; height: auto; }
.connect-arc .col--a img { aspect-ratio: 4 / 3.4; }
.connect-arc .col--b { padding-top: 5%; }
.connect-arc .col--b img { aspect-ratio: 3 / 3.9; }
.connect-arc .col--hero { display: block; height: 100%; }
.connect-arc .col--hero img { height: 100%; border-radius: var(--r-xl); }
.connect-arc .col--d { padding-top: 13%; }
.connect-arc .col--d img { aspect-ratio: 3 / 3.7; }
.connect-arc .col--e { align-self: center; height: auto; transform: translateY(14%); }
.connect-arc .col--e img { aspect-ratio: 3 / 3.9; }
@media (max-width: 900px) {
  .connect-arc { grid-template-columns: 1fr 1.4fr 1fr; height: clamp(320px, 70vw, 420px); }
  .connect-arc .col--a, .connect-arc .col--e { display: none; }
}

/* ============ 38 · section-blog ============ */
.blog-grid { display: grid; gap: 24px; grid-template-columns: 1.55fr 1fr; align-items: stretch; }
.post-feature {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  min-height: 440px; display: flex; align-items: flex-end;
  text-decoration: none; color: var(--cream);
}
.post-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-feature .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 20, 16, .82) 0%, rgba(28, 20, 16, .38) 48%, rgba(28, 20, 16, .06) 78%); }
.post-feature .body { position: relative; display: grid; gap: 12px; padding: clamp(20px, 3vw, 36px); }
.post-feature h3 { font: 600 clamp(24px, 2.6vw, 38px)/1.12 var(--font-display); margin: 0; max-width: 22ch; text-wrap: balance; }
.post-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font: 500 11.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.post-list { display: grid; gap: 16px; align-content: stretch; }
.post-row {
  display: grid; grid-template-columns: 104px 1fr auto; gap: 16px; align-items: center;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 12px; text-decoration: none; color: inherit;
}
.post-row img { width: 104px; height: 92px; object-fit: cover; border-radius: var(--r-md); }
.post-row .txt { display: grid; gap: 7px; }
.post-row h4 { font: 600 16px/1.3 var(--font-display); margin: 0; }
.post-row .post-meta { color: var(--text-soft); }
.post-row .btn-circle { width: 38px; height: 38px; }
@media (prefers-reduced-motion: no-preference) {
  .post-feature, .post-row { transition: transform .18s ease, box-shadow .18s ease; }
  .post-feature:hover, .post-row:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ============ 38b · filter-tabs (tabs estaticas que filtran un grid; blog, CEO 2026-07-13:
   las secciones por categoria hacian demasiado scroll) ============ */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-tabs button {
  border: 0; cursor: pointer;
  font: 600 12.5px/1 var(--font-body); letter-spacing: .04em;
  padding: 11px 16px; border-radius: var(--r-pill);
  background: var(--panel); color: var(--text); box-shadow: var(--sh-1);
}
.filter-tabs button:hover { background: var(--line); }
/* El raton encima NO pisa el estado de elegido: la pestana elegida lleva letra clara,
   y con el fondo claro del hover se quedaba en 1,27. Al pasar el raton por la elegida
   se oscurece su propio relleno, que es lo que se espera de un boton ya encendido. */
.filter-tabs button.is-active:hover { background: var(--brand-strong); color: var(--brand-contrast); }
.filter-tabs button.is-active { background: var(--brand-fill); color: var(--brand-contrast); }

/* ============ 38c · card-post + post-grid (card VERTICAL de post: categorias en
   pills SOBRE la imagen, fecha + lectura en su propia linea, titulo, nota y boton
   "Leer mas"; sustituye a las filas por seccion en el indice del blog. CEO 2026-07-13) */
.post-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-post {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
  color: inherit; text-decoration: none; padding-bottom: var(--s-4);
}
.card-post .media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-post .media img { width: 100%; height: 100%; object-fit: cover; }
.card-post .media .tags { position: absolute; top: 12px; left: 12px; }
/* GAP DE ETIQUETAS UNICO para todas las tarjetas del blog (cards y destacado):
   una sola regla para que no pueda divergir (consistencia, CEO 2026-07-13) */
.card-post .media .tags, .post-feature .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.card-post .post-meta, .card-post h4, .card-post .mini-note { margin: 0; padding-inline: var(--s-4); }
.card-post h4 { font: 600 16.5px/1.35 var(--font-display); }
.card-post .post-meta { color: var(--text-soft); }
.card-post .mini-note { color: var(--text-muted); }
.card-post .cta {
  margin: 6px var(--s-4) 0; margin-top: auto; align-self: flex-start;
  padding: 11px 18px; font-size: 13.5px;
}
@media (prefers-reduced-motion: no-preference) {
  .card-post { transition: transform .18s ease, box-shadow .18s ease; }
  .card-post:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
}

/* ============ 39 · stats-premium (Cifras V2, banda editorial oscura) ============ */
.stats-premium {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-hero);
  padding: clamp(28px, 4.5vw, 56px);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
[data-theme="dark"] .stats-premium { background: var(--panel); color: var(--text); }
.stats-premium .cell {
  display: grid; gap: 10px; align-content: start;
  padding: 10px 28px;
  border-left: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
}
.stats-premium .cell:first-child { border-left: 0; padding-left: 6px; }
.stats-premium .kpi { font: 600 clamp(40px, 4.4vw, 76px)/1 var(--font-display); letter-spacing: -0.015em; }
.stats-premium .kpi--accent { color: var(--accent-coral); }
.stats-premium .lbl { font: 400 13.5px/1.55 var(--font-body); color: color-mix(in srgb, var(--cream) 76%, transparent); max-width: 22ch; }
.stats-premium .eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 55%, transparent); }
@media (max-width: 860px) {
  .stats-premium { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .stats-premium .cell { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); padding: 20px 6px 0; }
  .stats-premium .cell:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}

/* ============ 40 · card-testimonial--premium ============ */
.card-testimonial--premium {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: var(--s-5);
}
[data-theme="dark"] .card-testimonial--premium { background: var(--panel); color: var(--text); }
.card-testimonial--premium .chip-icon { background: var(--accent-coral); color: var(--cream); margin-bottom: 6px; }
.card-testimonial--premium p { font: 300 19px/1.6 var(--font-body); color: color-mix(in srgb, var(--cream) 94%, transparent); }
.card-testimonial--premium .head { border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); padding-top: 16px; margin-top: 4px; }
.card-testimonial--premium .head strong { color: var(--cream); }
.card-testimonial--premium .head span { color: color-mix(in srgb, var(--cream) 62%, transparent); }
.card-testimonial--premium .avatar--initials { background: color-mix(in srgb, var(--cream) 14%, transparent); color: var(--cream); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cream) 25%, transparent); }

/* ============ 41 · card-listing-v2 (ficha showcase con panel de cristal) ============ */
.card-listing-v2 {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl);
  aspect-ratio: 16 / 8.5;
  text-decoration: none; color: inherit;
}
.card-listing-v2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-listing-v2 .tag-pill { position: absolute; top: 16px; left: 16px; }
.card-listing-v2 .render-note { position: absolute; top: 16px; right: 16px; }
.card-listing-v2 .glass-panel {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@supports not (backdrop-filter: blur(1px)) {
  .card-listing-v2 .glass-panel { background: color-mix(in srgb, var(--bg) 94%, transparent); }
}
.card-listing-v2 .glass-panel .info { display: grid; gap: 8px; }
.card-listing-v2 h3 { font: 600 20px/1.2 var(--font-display); margin: 0; }
.card-listing-v2 .glass-panel .right { display: flex; align-items: center; gap: 14px; }
.card-listing-v2 .price { font: 600 16px/1.2 var(--font-body); }
@media (prefers-reduced-motion: no-preference) {
  .card-listing-v2 { transition: transform .18s ease, box-shadow .18s ease; }
  .card-listing-v2:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
}
@media (max-width: 720px) { .card-listing-v2 { aspect-ratio: 4 / 3.4; } }

/* ============ 42 · section-form (V1 clara) ============ */
.form-section { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1.15fr; align-items: start; }
.form-side { display: grid; gap: 16px; align-content: start; }
.form-side h2 { font: 600 clamp(28px, 3.4vw, 44px)/1.1 var(--font-display); margin: 0; }
.form-side p { font: 400 15px/1.65 var(--font-body); color: var(--text-muted); max-width: 44ch; margin: 0; }
.contact-line { display: flex; gap: 12px; align-items: center; font: 500 14.5px/1.4 var(--font-body); }
.contact-line .chip-icon { background: var(--panel); color: var(--text); width: 42px; height: 42px; }
.form-card {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-1);
  padding: var(--s-4); display: grid; gap: 14px;
}
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.textarea {
  font: 400 15px/1.5 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  min-height: 110px; resize: vertical;
}
.form-hint { font: 400 12.5px/1.5 var(--font-body); color: var(--text-soft); }
@media (max-width: 860px) { .form-section, .form-row { grid-template-columns: 1fr; } }

/* ============ 43 · section-form premium (split sobre foto + panel tinta) ============ */
.form-premium {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--r-hero); overflow: hidden;
  background: var(--ink); color: var(--on-ink);
}
[data-theme="dark"] .form-premium { background: var(--panel); color: var(--text); }
.form-premium .media { position: relative; min-height: 380px; }
.form-premium .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.form-premium .media .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 20, 16, .55), rgba(28, 20, 16, 0) 55%); }
.form-premium .panel { padding: clamp(28px, 4vw, 56px); display: grid; gap: 16px; align-content: center; }
.form-premium h2 { font: 600 clamp(26px, 3vw, 40px)/1.12 var(--font-display); margin: 0; color: var(--cream); }
.form-premium .sub { font: 400 14.5px/1.6 var(--font-body); color: color-mix(in srgb, var(--cream) 78%, transparent); margin: 0; }
.form-premium .field > label { color: color-mix(in srgb, var(--cream) 80%, transparent); }
.form-premium .input, .form-premium .select, .form-premium .textarea {
  background: color-mix(in srgb, var(--cream) 9%, transparent);
  border-color: color-mix(in srgb, var(--cream) 26%, transparent);
  color: var(--cream);
}
.form-premium .input::placeholder, .form-premium .textarea::placeholder { color: color-mix(in srgb, var(--cream) 45%, transparent); }
.form-premium .btn-primary { background: var(--cream); color: var(--on-veil-light); }
.form-premium .btn-primary:hover { background: var(--white); }
.form-premium .form-hint { color: color-mix(in srgb, var(--cream) 55%, transparent); }
@media (max-width: 860px) { .form-premium { grid-template-columns: 1fr; } .form-premium .media { min-height: 240px; } }

/* ============ 44 · footers V2 y V3 ============ */
.footer-dark {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-hero); padding: clamp(28px, 4.5vw, 56px);
  display: grid; gap: var(--s-5);
}
[data-theme="dark"] .footer-dark { background: var(--panel); color: var(--text); }
.footer-dark .top {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-4); border-bottom: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
}
.footer-dark .top h2 { font: 600 clamp(26px, 3.2vw, 44px)/1.08 var(--font-display); margin: 0; max-width: 16ch; }
.footer-dark .top .btn { background: var(--cream); color: var(--on-veil-light); }
.footer-dark .cols { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-dark .brand-mark { color: var(--cream); }
.footer-dark .brand-mark svg { height: 30px; width: auto; }
.footer-dark h4 { font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 55%, transparent); margin: 0 0 14px; }
.footer-dark ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-dark a { font: 400 13.5px/1.4 var(--font-body); color: color-mix(in srgb, var(--cream) 78%, transparent); text-decoration: none; }
.footer-dark a:hover { color: var(--cream); }
.footer-dark .bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-top: var(--s-4); border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  font: 400 12px/1.5 var(--font-body); color: color-mix(in srgb, var(--cream) 55%, transparent);
}
.footer-dark .social-row .btn-circle { background: color-mix(in srgb, var(--cream) 12%, transparent); color: var(--cream); }
.footer-dark .social-row .btn-circle:hover { background: color-mix(in srgb, var(--cream) 24%, transparent); }

.footer-statement {
  background: var(--panel); border-radius: var(--r-hero);
  padding: clamp(32px, 5vw, 64px);
  display: grid; gap: 22px; justify-items: center; text-align: center;
}
.footer-statement .wordmark {
  font: 600 clamp(34px, 6.5vw, 96px)/0.95 var(--font-display);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--brand); margin: 0;
}
/* Wordmark como SVG de contornos (letras reales de Space Grotesk en path),
   para que cada letra se construya por su trazo como el isologo */
.footer-statement .wordmark-svg {
  display: block; width: min(100%, 960px); height: auto;
  color: var(--brand); margin-inline: auto;
}
.footer-statement nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.footer-statement nav a {
  font: 500 14px/1 var(--font-body); color: var(--text); text-decoration: none;
  padding: 10px 16px; border-radius: var(--r-pill);
}
.footer-statement nav a:hover { background: var(--surface); }
.footer-statement .legal-line {
  width: 100%; display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 18px;
  font: 400 12px/1.5 var(--font-body); color: var(--text-soft);
}

/* ============ 47 · js-tilt: tarjetas con float por GSAP ============ */
/* El transform pasa a manos de GSAP: la transición CSS se limita a sombra y
   color para que el seguimiento del ratón sea fluido, sin tirones. */
.js-tilt { transition: box-shadow .18s ease, background-color .18s ease; will-change: transform; }

/* ============ 46 · to-top (botón flotante volver arriba) ============ */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand-fill); color: var(--brand-contrast);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-3);
}
.to-top:hover { background: var(--brand-fill-strong); }
.to-top[hidden] { display: none; }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .to-top { transition: transform .18s ease, background-color .18s ease; }
  .to-top:hover { transform: translateY(-3px); }
}

/* ============ 45 · avatares V2 (anillo) y V3 (chip con nombre) ============ */
.avatar--ring {
  width: 56px; height: 56px; padding: 3px;
  background: conic-gradient(from 210deg, var(--accent-flame), var(--accent-coral), var(--sand), var(--accent-flame));
  border-radius: 50%; box-shadow: var(--sh-1); display: inline-grid;
}
.avatar--ring .core {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--surface); color: var(--text);
  font: 600 15px/1 var(--font-body);
  box-shadow: inset 0 0 0 2px var(--bg);
}
.avatar--ring img.core { object-fit: cover; }
.avatar-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--sh-1);
  padding: 6px 16px 6px 7px;
}
.avatar-chip .avatar { width: 36px; height: 36px; box-shadow: none; }
.avatar-chip .who { display: grid; line-height: 1.2; }
.avatar-chip .who strong { font: 600 13.5px/1.25 var(--font-body); }
.avatar-chip .who span { font: 400 11.5px/1.25 var(--font-body); color: var(--text-soft); }
.avatar-chip .check {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ok); color: var(--cream); margin-left: 2px;
}
.avatar-chip .check svg { width: 12px; height: 12px; }

/* ============ 37 · cta-band--premium (cierre sobre fotografía) ============ */
.cta-band--premium {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-hero);
  min-height: clamp(380px, 52vh, 520px);
  display: grid; place-items: center; text-align: center;
  padding: clamp(40px, 6vw, 88px);
}
.cta-band--premium > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band--premium .scrim {
  position: absolute; inset: 0;
  /* Overlay negro desde la esquina inferior izquierda (orden CEO 2026-07-08):
     los textos del CTA se leen siempre, pese la foto que pese */
  background: linear-gradient(to top right, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .14) 78%);
}
.cta-band--premium .inner {
  position: relative; display: grid; gap: 18px; justify-items: center; max-width: 720px;
}
.cta-band--premium .inner .tag-pill { background: color-mix(in srgb, var(--cream) 16%, transparent); backdrop-filter: blur(10px); color: var(--cream); }
.cta-band--premium h2 {
  font: 600 clamp(32px, 4.6vw, 64px)/1.04 var(--font-display);
  text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--cream); margin: 0; text-wrap: balance;
}
.cta-band--premium .sub { font: 400 15.5px/1.6 var(--font-body); color: color-mix(in srgb, var(--cream) 90%, transparent); max-width: 48ch; margin: 0; }
.cta-band--premium .cta-pair { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.cta-band--premium .btn-outline {
  background: transparent; color: var(--cream);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 55%, transparent);
}
.cta-band--premium .btn-outline:hover { background: color-mix(in srgb, var(--cream) 14%, transparent); }
.cta-band--premium .foot-line {
  position: absolute; left: clamp(24px, 4vw, 48px); right: clamp(24px, 4vw, 48px); bottom: 22px;
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--cream) 28%, transparent);
  font: 500 12px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
}

/* ============ 48 · t-carousel (carrusel de testimonios) ============ */
.t-carousel { position: relative; }
.t-carousel .track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(420px, 82vw);
  gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 4px 8px;
}
.t-carousel .track::-webkit-scrollbar { display: none; }
.t-carousel .track > * { scroll-snap-align: start; height: 100%; }
.t-carousel .track .card-testimonial--premium { grid-auto-columns: auto; max-width: none; }
.t-carousel .t-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.t-carousel .t-nav .btn-circle {
  width: 44px; height: 44px; border: 0; cursor: pointer;
  background: var(--surface); color: var(--text); box-shadow: var(--sh-1);
}
.t-carousel .t-nav .btn-circle:hover { background: var(--brand-fill); color: var(--brand-contrast); }
.t-carousel .t-nav .btn-circle:disabled { opacity: .35; cursor: default; }
.t-carousel .t-nav .btn-circle:disabled:hover { background: var(--surface); color: var(--text); }

/* ============ 49 · card-video-t (videotestimonio) ============ */
.video-t-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card-video-t {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); aspect-ratio: 4 / 5;
  color: var(--cream); text-decoration: none;
}
.card-video-t > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-video-t .shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28, 20, 16, .74), rgba(28, 20, 16, .06) 55%);
}
.card-video-t .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  color: var(--ink); display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .18s ease;
}
.card-video-t:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.card-video-t .play svg { width: 22px; height: 22px; margin-left: 3px; }
.card-video-t .who { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 2px; }
.card-video-t .who strong { font: 600 16px/1.3 var(--font-display); }
.card-video-t .who span { font: 400 13px/1.4 var(--font-body); color: color-mix(in srgb, var(--cream) 82%, transparent); }
.card-video-t .dur { position: absolute; top: 14px; right: 14px; }

/* ============ 50 · wa-widget (flotante de WhatsApp premium: verde WhatsApp,
   radios y botón del sistema LON) ============ */
.wa-widget { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; justify-items: end; gap: 14px; }
.wa-fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(18, 140, 126, .35), var(--sh-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 140, 126, .4), var(--sh-3); }
.wa-fab:focus-visible { outline: 2px solid #075E54; outline-offset: 3px; }
.wa-fab svg { width: 30px; height: 30px; }
.wa-pop {
  width: min(350px, calc(100vw - 40px));
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-3); background: var(--panel);
}
.wa-head { display: flex; align-items: center; gap: 12px; background: #075E54; color: #FAF7F4; padding: 14px 16px; }
.wa-head strong { font: 600 17px/1.2 var(--font-display); flex: 1; letter-spacing: .01em; }
.wa-ava {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--lon-red); display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #FAF7F4 25%, transparent);
}
.wa-ava svg { width: 26px; height: auto; color: #FAF7F4; }
.wa-ava .wa-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #25D366; border: 2px solid #075E54; }
.wa-close { border: 1px solid color-mix(in srgb, #FAF7F4 34%, transparent); background: transparent; color: #FAF7F4; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.wa-close:hover { background: color-mix(in srgb, #FAF7F4 14%, transparent); }
.wa-close svg { width: 15px; height: 15px; }
.wa-body { padding: 18px 16px 4px; }
.wa-msg {
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md); padding: 14px 16px 10px;
  box-shadow: var(--sh-1);
  display: grid; gap: 4px; max-width: 92%;
}
.wa-msg strong { font: 600 14px/1.3 var(--font-body); }
.wa-msg p { margin: 0; font: 400 15px/1.55 var(--font-body); }
.wa-msg .wa-time { justify-self: end; font: 400 12px/1 var(--font-body); color: var(--text-soft); }
.wa-foot { padding: 14px 16px 16px; }
.wa-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  font: 600 15px/1 var(--font-body);
  padding: 14px 26px; border-radius: var(--r-pill);
  background: #25D366; color: #141414; text-decoration: none;
  box-shadow: var(--sh-1);
  transition: background .15s ease, box-shadow .15s ease;
}
.wa-cta:hover { background: #1FBF5C; box-shadow: var(--sh-2); }
.wa-cta svg { width: 19px; height: 19px; }
/* Convivencia con el boton de volver arriba y la barra CTA movil */
.to-top { bottom: 94px; }
@media (max-width: 920px) {
  body.has-sticky-cta .wa-widget { bottom: 84px; }
  body.has-sticky-cta .to-top { bottom: 158px; }
}


/* ============ 52 · calc-financiacion (calculadora oficial con el brand LON:
   radios y botones del sistema, tipografía heredada, rojo LON en el panel) ============ */
.calc-lon { display: grid; gap: var(--s-3); }
.calc-lon .brandbar { height: 5px; background: linear-gradient(90deg, var(--lon-red), var(--sand)); border-radius: var(--r-pill); }
.calc-lon .bar { display: flex; justify-content: flex-end; gap: 8px; }
.calc-lon .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.calc-lon .seg button { border: 0; background: transparent; padding: 9px 14px; font: 600 12px/1 var(--font-body); color: var(--text-muted); cursor: pointer; }
.calc-lon .seg button.on { background: var(--brand-fill); color: var(--brand-contrast); }
.calc-lon .grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 760px) { .calc-lon .grid { grid-template-columns: 1fr; } }
.calc-lon .inputs { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 34px); box-shadow: var(--sh-1); }
.calc-lon .inputs h3 { font: 600 clamp(22px, 2.4vw, 28px)/1.15 var(--font-display); margin: 0 0 6px; }
.calc-lon .inputs .sub { font: 400 14px/1.6 var(--font-body); color: var(--text-muted); margin: 0 0 14px; }
.calc-lon label, .calc-lon .seglabel {
  display: block; font: 600 12px/1 var(--font-body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-soft); margin: 18px 0 8px;
}
.calc-lon select {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: 500 15px/1.3 var(--font-body); background: var(--panel); color: var(--text); cursor: pointer;
}
.calc-lon select:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.calc-lon .plazos { display: flex; gap: 9px; flex-wrap: wrap; }
.calc-lon .plazos button {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill);
  padding: 13px 22px; font: 600 14px/1 var(--font-body); color: var(--text); cursor: pointer;
  transition: box-shadow .12s ease;
}
.calc-lon .plazos button:hover { box-shadow: var(--sh-1); }
.calc-lon .plazos button.on { background: var(--brand-fill); color: var(--brand-contrast); border-color: var(--brand-fill); }
.calc-lon input[type=range] { width: 100%; accent-color: var(--brand-fill); height: 26px; }
.calc-lon .rangeends { display: flex; justify-content: space-between; font: 600 12px/1 var(--font-body); color: var(--text-soft); }
.calc-lon .addons { margin-top: 16px; display: grid; gap: 10px; }
.calc-lon .chk { display: flex; align-items: center; gap: 9px; }
.calc-lon .chk input { width: 18px; height: 18px; accent-color: var(--brand-fill); }
.calc-lon .chk label { margin: 0; font: 500 14px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.calc-lon .result {
  background: linear-gradient(160deg, var(--lon-red-earth), var(--lon-red-deep) 55%, var(--lon-red));
  color: #FAF7F4; border-radius: var(--r-hero);
  padding: clamp(24px, 3.2vw, 40px); box-shadow: var(--sh-2);
  display: grid; gap: 14px; align-content: start;
}
.calc-lon .result .eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #FAF7F4 78%, transparent); }
.calc-lon .result .proj { font: 600 clamp(19px, 2vw, 24px)/1.15 var(--font-display); text-transform: uppercase; margin: 0; }
.calc-lon .cuotaCard {
  background: color-mix(in srgb, #FAF7F4 12%, transparent);
  border: 1px solid color-mix(in srgb, #FAF7F4 18%, transparent);
  border-radius: var(--r-lg); padding: 18px; text-align: center; display: grid; gap: 4px;
}
.calc-lon .cuotaCard .lbl { font: 600 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, #FAF7F4 80%, transparent); }
.calc-lon .cuotaCard .val { font: 600 clamp(32px, 3.4vw, 44px)/1.05 var(--font-display); }
.calc-lon .cuotaCard .sub { font: 400 13px/1.4 var(--font-body); color: color-mix(in srgb, #FAF7F4 80%, transparent); }
.calc-lon .rows { font: 400 14px/1.5 var(--font-body); display: grid; margin: 0; }
.calc-lon .rows .row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, #FAF7F4 16%, transparent); }
.calc-lon .rows .row:last-of-type { border-bottom: 0; }
.calc-lon .rows .row .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.calc-lon .rows .row.add .k, .calc-lon .rows .row.add .v { color: color-mix(in srgb, #FAF7F4 80%, transparent); }
.calc-lon .rows .row.tot { padding-top: 12px; font-size: 15.5px; }
.calc-lon .rows .row.tot .k, .calc-lon .rows .row.tot .v { font-weight: 700; }
.calc-lon .ctaCalc {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--font-body); padding: 14px 26px; border-radius: var(--r-pill);
  background: var(--cream); color: var(--lon-red-deep); text-decoration: none;
  justify-self: start; box-shadow: var(--sh-1); transition: box-shadow .15s ease;
}
.calc-lon .ctaCalc:hover { box-shadow: var(--sh-2); }
.calc-lon .ctaCalc svg { width: 18px; height: 18px; }
.calc-lon .disclaimer { font: 400 12.5px/1.6 var(--font-body); color: var(--text-muted); background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sh-1); }

/* ============ 53 · icon-set (iconografía oficial: Lucide, trazo 2px redondo) ============ */
.icon-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
.icon-tile {
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1);
  padding: 16px 10px 13px; display: grid; gap: 8px; justify-items: center; text-align: center;
}
.icon-tile svg { width: 26px; height: 26px; color: var(--brand); }
.icon-tile span { font: 500 11.5px/1.35 var(--font-body); color: var(--text-muted); }

/* ============ 54 · lang-switch (selector de idioma ES/EN, tokens de nav-minimal .links) ============ */
.lang-switch {
  display: flex; gap: 2px; background: var(--panel);
  border-radius: var(--r-pill); padding: 4px; flex: 0 0 auto;
}
.lang-switch a {
  font: 600 12.5px/1 var(--font-body); color: var(--text-muted); text-decoration: none;
  padding: 8px 13px; border-radius: var(--r-pill); letter-spacing: .02em;
}
/* El selector de idioma tenia forma SOLO al pasar el raton o al estar
   elegido: en reposo, «EN» era texto suelto. El filete fino lo dibuja como
   boton desde el principio, sin gritar. */
.lang-switch a { border: 1px solid var(--line); }  /* era var(--rule), que no existe */
.lang-switch a:hover, .lang-switch a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.lang-switch a.is-active { cursor: default; }
.lang-switch--mobile { display: none; }
@media (max-width: 920px) {
  .lang-switch--desktop { display: none; }
  .lang-switch--mobile { display: flex; margin: 6px 10px 2px; }
}
.icon-tile code { font-size: 10px; color: var(--text-soft); }

/* ============================================================
   Enlace de salto al contenido: RETIRADO POR ORDEN DEL CEO
   (2026-08-31). Cita: «quítalo, que más nunca salga, en ningún
   sitio».

   Qué era: el atajo que aparece al tabular desde el teclado para
   saltarse el menú e ir directo al contenido.

   Por qué se vio: las piezas del laboratorio cargan la hoja de
   tokens del KIT de tableros, no la del cliente, y ahí no existía
   la regla que lo mandaba fuera de pantalla. Sin esa regla, el
   enlace se pintaba como texto normal en la esquina superior
   izquierda de cada pieza.

   Se ha quitado del marcado de las 52 páginas del laboratorio y
   del generador que lo escribía. Esta regla es el cinturón: si
   una plantilla o un generador lo vuelve a colar, no se verá.

   Consecuencia asumida: el sitio deja de ofrecer el atajo de
   teclado del criterio 2.4.1 de la norma de accesibilidad.
   Decisión del CEO, tomada con el aviso delante.
   ============================================================ */
.skip-link, .skip-link:focus { display: none !important; }