/* ============================================================
   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); }
/* Opacidad entera, no 88 %: al 88 % este rotulo mide 3,73:1 sobre el fondo de
   marca y el texto normal de 14px pide 4,5. Entero da 5,11. Medido 2026-08-07. */
.stat-tile--accent .lbl { color: var(--brand-contrast); }
.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); }
.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(--ink); }
.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(--cream); }
.btn-ink:hover { background: var(--ink-dim); }
[data-theme="dark"] .btn-ink { background: var(--cream); color: var(--ink); }
[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(28, 20, 16, .74) 0%, rgba(28, 20, 16, .34) 45%, rgba(28, 20, 16, .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(--ink); }

/* ============ 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); }
.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(--cream);
  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); }
.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; }
/* El cuerpo de la cifra decide si la banda cabe, no solo como se ve.
   A 4,4vw la palabra `Agrupada` mide unos 307 px a 1440. La rejilla nace con
   `min-width: auto`, asi que cada columna reserva el ancho de su palabra mas
   larga; cuatro de ese tamano piden mas que la caja, la rejilla crece por
   encima de su hueco y la cuarta tarjeta se corta contra el borde redondeado.
   Bajar a 3,1vw devuelve unos 216 px a esa palabra y las cuatro entran.
   Si algun dia sube otra vez, el sintoma sera la ultima tarjeta cortada. */
.stats-premium .kpi { font: 600 clamp(30px, 3.1vw, 52px)/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: var(--cream); max-width: 22ch; }
.stats-premium .eyebrow { font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
@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(--cream);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: var(--s-5);
}
[data-theme="dark"] .card-testimonial--premium { background: var(--panel); }
.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(--cream);
}
[data-theme="dark"] .form-premium { background: var(--panel); }
.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(--ink); }
.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(--cream);
  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); }
.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(--ink); }
.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: var(--cream); 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 de tinta calida 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(28, 20, 16, .78) 0%, rgba(28, 20, 16, .42) 45%, rgba(28, 20, 16, .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); }
/* La duracion se apoya sobre la portada, que puede ser clara u oscura segun la
   foto. Sin fondo propio el texto desaparecia encima de las zonas claras: en
   estas portadas la cabecera es color crema y el "7:00" no se leia.
   Se le da su propio fondo oscuro, que garantiza el contraste pase lo que pase
   por debajo, y un desenfoque suave para que no parezca un parche pegado. */
.card-video-t .dur {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(28, 20, 16, .78);
  color: var(--cream);
  font: 600 12.5px/1.2 var(--font-body);
  letter-spacing: .01em;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ============ 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: 0; 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: #fff; 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;
}
.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); }

/* ============ 60 · pagina de error (404) ============
   La sirve `404.php` del tema, que se dibuja sola porque en este sitio la
   cabecera y el pie viven dentro del contenido de cada pagina y una direccion
   inexistente no tiene contenido. Usa los mismos tokens que el resto, asi que
   se voltea igual en claro y en oscuro sin reglas aparte. */
.lon-404 {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: clamp(48px, 9vw, 120px) 20px;
  background: var(--bg);
}
.lon-404__caja { width: 100%; max-width: 640px; }
.lon-404__marca {
  display: inline-block; margin-bottom: clamp(28px, 5vw, 44px);
  color: var(--brand); text-decoration: none;
  font: 700 13px/1 var(--font-body); letter-spacing: .18em;
}
.lon-404__marca:hover { color: var(--text); }
.lon-404__codigo {
  margin: 0 0 6px;
  font: 600 13px/1 var(--font-body); letter-spacing: .16em;
  color: var(--text-soft);
}
.lon-404__titulo {
  margin: 0 0 14px;
  font: 600 clamp(30px, 5.4vw, 46px)/1.1 var(--font-display);
  letter-spacing: -0.02em; color: var(--text);
}
.lon-404__entrada {
  margin: 0 0 clamp(30px, 5vw, 42px);
  font: 400 17px/1.6 var(--font-body); color: var(--text-muted); max-width: 52ch;
}
.lon-404__etiqueta {
  display: block; margin-bottom: 8px;
  font: 600 11px/1 var(--font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft);
}
/* La caja y el boton en una fila que se parte en movil, donde un boton al lado
   de un campo deja los dos demasiado estrechos para el dedo. */
.lon-404__fila { display: flex; gap: 10px; flex-wrap: wrap; }
.lon-404__fila .input { flex: 1 1 240px; min-width: 0; }
.lon-404__fila .btn { flex: 0 0 auto; }
.lon-404__donde {
  margin: clamp(32px, 5vw, 44px) 0 12px;
  font: 600 11px/1 var(--font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft);
}
.lon-404__enlaces { list-style: none; margin: 0; padding: 0; display: grid; }
.lon-404__enlaces li { border-top: 1px solid var(--line); }
.lon-404__enlaces li:last-child { border-bottom: 1px solid var(--line); }
/* 48px de alto: por debajo de 44 el dedo falla, y esta es justo la pagina en la
   que alguien ya viene contrariado. */
.lon-404__enlaces a {
  display: flex; align-items: center; min-height: 48px;
  color: var(--text); text-decoration: none;
  font: 400 16px/1.4 var(--font-body);
}
.lon-404__enlaces a:hover { color: var(--brand); }
.lon-404__pie {
  margin: clamp(34px, 5vw, 46px) 0 0;
  font: 400 13.5px/1.6 var(--font-body); color: var(--text-muted); max-width: 52ch;
}
.lon-404__pie a { color: var(--brand); text-underline-offset: 3px; }