/* ═══════════════════════════════════════════════════════════════════════════
   FixrOS — HOME
   Sólo lo que es exclusivo de front-page.php. Todo lo compartido vive en
   components.css / bridge.css / layout.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Maqueta del panel en el hero ──────────────────────────────────── */

.hero-visual { position: relative; perspective: 1800px; }
.dashboard-mockup {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-lg);
  box-shadow: var(--fx-shadow-lg);
  overflow: hidden;
  transform: rotateY(-10deg) rotateX(5deg);
  transition: transform 1.2s var(--fx-ease);
}
.hero-visual:hover .dashboard-mockup { transform: rotateY(-3deg) rotateX(1deg); }
.mockup-header {
  display: flex; align-items: center; gap: var(--fx-space-2);
  padding: var(--fx-space-4);
  background: var(--fx-bg-alt);
  border-bottom: 1px solid var(--fx-border);
}
.mockup-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--fx-neutral-200); }
/* EXCEPCIÓN DOCUMENTADA: los tres puntos son el semáforo de una ventana de
   macOS. Son colores de sistema reconocibles, no paleta de marca, así que van
   literales. Tokenizarlos por luminosidad convirtió el ámbar en un fondo
   claro y dejó de leerse como lo que es. */
.mockup-dots .mockup-dot:nth-child(1) { background: #FF5F57; }
.mockup-dots .mockup-dot:nth-child(2) { background: #FEBC2E; }
.mockup-dots .mockup-dot:nth-child(3) { background: #28C840; }
.mockup-title-bar {
  flex: 1;
  margin-left: var(--fx-space-3);
  padding: var(--fx-space-1) var(--fx-space-3);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-sm);
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-xs);
  color: var(--fx-text-subtle);
}
.mockup-body   { padding: var(--fx-space-6); }
.mockup-stats  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fx-space-3); margin-bottom: var(--fx-space-4); }
.mockup-stat   { padding: var(--fx-space-4); background: var(--fx-bg-alt); border-radius: var(--fx-radius-md); text-align: center; }
.mockup-incidents { display: grid; gap: var(--fx-space-2); }
.mockup-incident-row {
  display: grid; grid-template-columns: .625rem 1fr auto;
  gap: var(--fx-space-3); align-items: center;
  padding: var(--fx-space-3) var(--fx-space-4);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-sm);
  font-size: var(--fx-text-sm);
}
.incident-status  { width: .5rem; height: .5rem; border-radius: 50%; }
.status-done      { background: var(--fx-success); }
.status-progress  { background: var(--fx-brand-600); }
.status-pending   { background: var(--fx-warning); }
.incident-title   { display: block; font-family: var(--fx-font-body); font-weight: var(--fx-weight-semi); letter-spacing: 0; }
.incident-meta    { color: var(--fx-text-subtle); font-size: var(--fx-text-xs); }
.incident-badge   {
  padding: var(--fx-space-1) var(--fx-space-3);
  border-radius: var(--fx-radius-pill);
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-black);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-done     { background: var(--fx-success-bg); color: var(--fx-success); }
.badge-progress { background: var(--fx-brand-50);   color: var(--fx-brand-600); }
.badge-pending  { background: var(--fx-warning-bg); color: var(--fx-warning); }

.hero-float-1, .hero-float-2 {
  position: absolute;
  display: flex; align-items: center; gap: var(--fx-space-3);
  padding: var(--fx-space-3) var(--fx-space-4);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  box-shadow: var(--fx-shadow-md);
  font-size: var(--fx-text-sm);
  font-weight: var(--fx-weight-bold);
  animation: fx-bob 6s ease-in-out infinite;
}
.hero-float-2 { animation-delay: -3s; }
@keyframes fx-bob { 50% { transform: translateY(-.5rem); } }
@media (prefers-reduced-motion: reduce) { .hero-float-1, .hero-float-2 { animation: none; } }
@media (max-width: 62.5rem) { .dashboard-mockup { transform: none; } }

/* ── 2. Problema ──────────────────────────────────────────────────────── */

.problema-grid, .problema-grid--five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fx-space-3);
  margin-top: var(--fx-space-12);
}
.problema-bottom { margin-top: var(--fx-space-8); }
.problema-bottom p {
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-2xl);
  font-weight: var(--fx-weight-bold);
  line-height: var(--fx-leading-snug);
  letter-spacing: var(--fx-tracking-snug);
  color: var(--fx-text);
  margin-inline: auto;
  max-width: 34ch;
}
.problema-bottom b { color: var(--fx-accent); }
@media (max-width: 68.75rem) { .problema-grid, .problema-grid--five { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 37.5rem)  { .problema-grid, .problema-grid--five { grid-template-columns: 1fr; } }

/* ── 3. Plataforma: cabecera centrada + herramientas sustituidas ──────── */

.plataforma-split { display: block; text-align: center; }
.plataforma-split-right .section-desc { margin-inline: auto; max-width: 60ch; }
.plataforma-tools {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fx-space-2);
  margin-top: var(--fx-space-6);
}
.plataforma-tools span { text-decoration: line-through; text-decoration-color: var(--fx-danger); text-decoration-thickness: 2px; }
.plataforma-tools span.one {
  background: var(--fx-brand-600);
  color: var(--fx-white);
  text-decoration: none;
  font-weight: var(--fx-weight-bold);
}

/* ── 4. Pasos 01-04 ───────────────────────────────────────────────────── */

.comofunciona-flow {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--fx-space-16);
}
.comofunciona-flow::before {
  content: "";
  position: absolute;
  inset-inline: 5%;
  top: 1.875rem;
  height: 2px;
  background: linear-gradient(90deg, var(--fx-brand-200), var(--fx-brand-600), var(--fx-brand-200));
}
.flow-step { position: relative; padding-inline: var(--fx-space-6); text-align: center; }
.flow-num {
  position: relative; z-index: var(--fx-z-base);
  width: 3.75rem; height: 3.75rem;
  margin: 0 auto var(--fx-space-6);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fx-surface);
  border: 2px solid var(--fx-brand-600);
  color: var(--fx-brand-600);
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-lg);
  font-weight: var(--fx-weight-black);
  transition: background var(--fx-dur-fast) var(--fx-ease), color var(--fx-dur-fast) var(--fx-ease);
}
.flow-step:hover .flow-num { background: var(--fx-brand-600); color: var(--fx-white); }
.flow-icon { margin-inline: auto; }
@media (max-width: 56.25rem) { .comofunciona-flow { grid-template-columns: 1fr 1fr; row-gap: var(--fx-space-8); } .comofunciona-flow::before { display: none; } }
@media (max-width: 35rem)    { .comofunciona-flow { grid-template-columns: 1fr; } }

/* ── 5. Bento de diferenciales ────────────────────────────────────────── */

.diferenciales-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fx-space-3);
  margin-top: var(--fx-space-12);
}
.diferenciales-grid > .diferencial-card:nth-child(1),
.diferenciales-grid > .diferencial-card:nth-child(6),
.diferenciales-grid > .diferencial-card:nth-child(7),
.diferenciales-grid > .diferencial-card:nth-child(8) { grid-column: span 2; }
.diferencial-card { min-height: 20.625rem; }
@media (max-width: 68.75rem) {
  .diferenciales-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .diferenciales-grid > .diferencial-card { grid-column: span 1 !important; }
}
@media (max-width: 40rem) { .diferenciales-grid { grid-template-columns: 1fr; } .diferencial-card { min-height: 0; } }

/* cabecera del bento: píldora centrada, titular izquierda, texto derecha */
#diferenciales .text-center:has(> .section-title) {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: auto auto;
  row-gap: var(--fx-space-6);
  column-gap: var(--fx-space-12);
  text-align: left;
}
#diferenciales .text-center:has(> .section-title) .eyebrow { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
#diferenciales .text-center:has(> .section-title) .section-title { grid-column: 1; grid-row: 2; }
#diferenciales .text-center:has(> .section-title) .section-desc { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
/* la fila de botones comparte clase pero NO es la cabecera */
#diferenciales .text-center:not(:has(> .section-title)) {
  display: flex; justify-content: center; align-items: center;
  gap: var(--fx-space-3); flex-wrap: wrap;
}
@media (max-width: 56.25rem) {
  #diferenciales .text-center:has(> .section-title) { grid-template-columns: 1fr; }
  #diferenciales .text-center:has(> .section-title) .section-title,
  #diferenciales .text-center:has(> .section-title) .section-desc { grid-column: 1; }
  #diferenciales .text-center:has(> .section-title) .section-desc { grid-row: 3; }
}

/* ── 6. Mosaico de fotos, a sangre ────────────────────────────────────── */

.foto-showcase-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, clamp(14.375rem, 25vw, 23.75rem));
  gap: 4px;
  margin: 0;
  max-width: none;
}
.foto-showcase-grid .foto-item {
  position: relative; overflow: hidden;
  border-radius: 0; aspect-ratio: auto;
  background: var(--fx-bg-sunken);
  border: 0; box-shadow: none; padding: 0;
}
.foto-showcase-grid .foto-item:hover { transform: none; box-shadow: none; }
.foto-showcase-grid .foto-item--tall { grid-row: span 2; }
.foto-showcase-grid .foto-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--fx-ease);
}
.foto-showcase-grid .foto-item:hover img { transform: scale(1.05); }
.foto-showcase-grid .foto-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  transition: background var(--fx-dur-base) var(--fx-ease);
}
.foto-showcase-grid .foto-item:hover::after { background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.1) 60%); }
.foto-showcase-grid .foto-label {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  padding: var(--fx-space-6);
  background: none; border-radius: 0;
  color: var(--fx-white);
  font-family: var(--fx-font-display);
  font-size: var(--fx-text-xl);
  font-weight: var(--fx-weight-black);
  letter-spacing: var(--fx-tracking-snug);
  line-height: var(--fx-leading-snug);
}
@media (max-width: 56.25rem) {
  .foto-showcase-grid { grid-template-columns: 1fr; grid-template-rows: 15rem 12.5rem 12.5rem; }
  .foto-showcase-grid .foto-item--tall { grid-row: span 1; }
}

/* ── 7. Para quién ────────────────────────────────────────────────────── */

.paraquien-cards, .paraquien-cards--six, .paraquien-cards--compact {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--fx-space-3); margin-top: var(--fx-space-12);
}
.paraquien-tagline {
  font-size: var(--fx-text-xs);
  font-weight: var(--fx-weight-bold);
  letter-spacing: var(--fx-tracking-wide);
  text-transform: uppercase;
  color: var(--fx-accent);
}
.paraquien-chips { display: flex; gap: var(--fx-space-2); flex-wrap: wrap; margin-bottom: auto; }
.paraquien-cta { margin-top: var(--fx-space-8); }
@media (max-width: 62.5rem) { .paraquien-cards, .paraquien-cards--six { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 37.5rem)  { .paraquien-cards, .paraquien-cards--six { grid-template-columns: 1fr; } }

/* ── 8. Voz IA ────────────────────────────────────────────────────────── */

.voz-ai-section {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--fx-navy) 0%, var(--fx-navy-2) 100%);
  color: var(--fx-on-dark-text);
}
.voz-ai-section::before {
  content: ""; position: absolute;
  inset-inline-end: -20%; inset-block-start: -20%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(18,70,255,.45) 0%, transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.voz-ai-section > * { position: relative; z-index: var(--fx-z-base); }
.voz-ai-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--fx-space-12); align-items: center; }
.voz-ai-content { text-align: left; }
.voz-ai-section .section-title { font-size: var(--fx-text-3xl); color: var(--fx-white); margin-block: var(--fx-space-6) var(--fx-space-5, var(--fx-space-4)); }
.voz-ai-desc { color: var(--fx-on-dark-muted); margin-inline: 0; max-width: 52ch; }
.voz-ai-benefits { list-style: none; padding: 0; margin-top: var(--fx-space-8); display: grid; gap: var(--fx-space-3); }
.voz-ai-benefits li {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--fx-space-4);
  align-items: start;
  padding: var(--fx-space-4);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--fx-on-dark-border);
  border-radius: var(--fx-radius-md);
}
.voz-ai-benefit-icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--fx-radius-sm);
  background: var(--fx-brand-600); color: var(--fx-white);
}
.voz-ai-note { margin-top: var(--fx-space-4); font-size: var(--fx-text-sm); color: var(--fx-on-dark-subtle); }

.voz-call-card {
  position: relative;
  padding: var(--fx-space-6);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--fx-radius-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.voz-call-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--fx-space-6); font-size: var(--fx-text-sm); font-weight: var(--fx-weight-semi); }
.voz-call-live { display: flex; align-items: center; gap: var(--fx-space-2); }
.voz-ai-pulse {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--fx-danger);
  box-shadow: 0 0 0 0 rgba(196,50,31,.6);
  animation: fx-pulse 1.6s infinite;
}
@keyframes fx-pulse { to { box-shadow: 0 0 0 .625rem rgba(196,50,31,0); } }
.voz-call-time { font-family: var(--fx-font-display); font-size: var(--fx-text-lg); font-weight: var(--fx-weight-bold); }
.voz-bubble { max-width: 88%; padding: var(--fx-space-4); border-radius: var(--fx-radius-md); font-size: var(--fx-text-sm); line-height: var(--fx-leading-body); margin-bottom: var(--fx-space-3); }
.voz-bubble-who { display: block; font-size: var(--fx-text-xs); font-weight: var(--fx-weight-bold); letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: var(--fx-space-1); }
.voz-bubble--in { background: rgba(255,255,255,.1); border-end-start-radius: var(--fx-space-2); }
.voz-bubble--ai { background: var(--fx-brand-600); margin-left: auto; border-end-end-radius: var(--fx-space-2); }
/* onda de voz */
.voz-wave { display: flex; align-items: center; gap: 3px; height: 1.625rem; margin: var(--fx-space-4) 0 var(--fx-space-4) var(--fx-space-1); }
.voz-wave i { width: 3px; border-radius: 3px; background: rgba(255,255,255,.5); animation: fx-wave 1.2s ease-in-out infinite; }
.voz-wave i:nth-child(1){animation-delay:0s}      .voz-wave i:nth-child(2){animation-delay:.09s}
.voz-wave i:nth-child(3){animation-delay:.18s}    .voz-wave i:nth-child(4){animation-delay:.27s}
.voz-wave i:nth-child(5){animation-delay:.36s}    .voz-wave i:nth-child(6){animation-delay:.45s}
.voz-wave i:nth-child(7){animation-delay:.54s}    .voz-wave i:nth-child(8){animation-delay:.63s}
.voz-wave i:nth-child(9){animation-delay:.72s}    .voz-wave i:nth-child(10){animation-delay:.81s}
.voz-wave i:nth-child(11){animation-delay:.9s}
@keyframes fx-wave { 0%,100% { height: 6px; } 50% { height: 22px; } }
@media (prefers-reduced-motion: reduce) { .voz-wave i { animation: none; height: 12px; } .voz-ai-pulse { animation: none; } }

.voz-call-tags { margin-top: var(--fx-space-4); padding: var(--fx-space-4); background: var(--fx-surface); color: var(--fx-text); border-radius: var(--fx-radius-md); font-size: var(--fx-text-sm); }
.voz-call-tags-head { display: block; font-size: var(--fx-text-xs); font-weight: var(--fx-weight-black); letter-spacing: .08em; text-transform: uppercase; color: var(--fx-accent); margin-bottom: var(--fx-space-3); }
.voz-tag-row { display: flex; justify-content: space-between; padding-block: var(--fx-space-2); border-top: 1px solid var(--fx-border); }
.voz-tag--done  { color: var(--fx-success); font-weight: var(--fx-weight-bold); }
.voz-tag--alert { color: var(--fx-danger);  font-weight: var(--fx-weight-bold); }
@media (max-width: 56.25rem) { .voz-ai-inner { grid-template-columns: 1fr; gap: var(--fx-space-8); } }

/* ── 9. Impacto y tracción ────────────────────────────────────────────── */

/* La fila de métricas la normaliza bridge.css §11 bis para toda la web. */
.metricas-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--fx-space-3); margin-top: var(--fx-space-12); }
.traccion-section, #traccion {
  position: relative; overflow: hidden;
  background: var(--fx-brand-600);
  color: var(--fx-on-dark-text);
}
#traccion::before { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.18) 0%, transparent 65%); }
#traccion .section-title, .traccion-section .section-title { color: var(--fx-white); }
#traccion .section-desc,  .traccion-section .section-desc  { color: rgba(255,255,255,.8); }
.traccion-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--fx-space-3); margin-top: var(--fx-space-12); position: relative; z-index: var(--fx-z-base); }
#traccion .traccion-kpi { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); box-shadow: none; }
#traccion .traccion-kpi:hover { transform: none; box-shadow: none; }
.traccion-kpi-sep { display: none; }
@media (max-width: 56.25rem) { .metricas-row { grid-template-columns: 1fr 1fr; } .traccion-kpis { grid-template-columns: 1fr; } }

/* ── 10. Capturas y tiendas ───────────────────────────────────────────── */

.capturas-stores { display: flex; flex-direction: column; align-items: center; gap: var(--fx-space-4); }
.capturas-stores-label { margin: 0; text-align: center; font-size: var(--fx-text-sm); font-weight: var(--fx-weight-semi); color: var(--fx-text-subtle); }
.capturas-stores .store-badges { justify-content: center; }

/* ── 11. Blog ─────────────────────────────────────────────────────────── */

.home-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--fx-space-4); margin-top: var(--fx-space-12); }
.home-blog-card { padding: 0; }
.home-blog-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--fx-bg-sunken); }
.home-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--fx-ease); }
.home-blog-card:hover .home-blog-thumb img { transform: scale(1.05); }
.home-blog-body { display: flex; flex-direction: column; flex: 1; padding: var(--fx-space-6); }
.home-blog-meta { display: flex; gap: var(--fx-space-3); align-items: flex-start; font-size: var(--fx-text-xs); font-weight: var(--fx-weight-bold); color: var(--fx-text-subtle); margin-bottom: var(--fx-space-3); }
.home-blog-date { padding-top: var(--fx-space-2); white-space: nowrap; }
.home-blog-title { font-size: var(--fx-text-lg); margin-bottom: var(--fx-space-3); }
.home-blog-excerpt { margin-bottom: auto; }
.home-blog-read { margin-top: var(--fx-space-6); display: inline-flex; align-items: center; gap: var(--fx-space-2); font-weight: var(--fx-weight-bold); color: var(--fx-accent); font-size: var(--fx-text-sm); transition: gap var(--fx-dur-fast) var(--fx-ease); }
.home-blog-read:hover { gap: var(--fx-space-3); color: var(--fx-accent-hover); }
.home-blog-head { margin-bottom: var(--fx-space-4); }
@media (max-width: 56.25rem) { .home-blog-grid { grid-template-columns: 1fr; } }

/* ── VOZ IA · las dos columnas cierran en la misma línea ────────────────
   `align-items: center` dejaba la tarjeta de la derecha (628px) flotando
   dentro de una columna de 852px: 112px de aire arriba y otros 112 abajo,
   y su base quedaba por encima de la última funcionalidad de la izquierda.
   Ahora las dos columnas ocupan el alto completo y la transcripción absorbe
   el sobrante, así que ambas terminan a la misma altura. */
.voz-ai-inner { align-items: stretch; }

.voz-ai-visual { display: flex; }

.voz-call-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* La conversación es lo que crece; la cabecera y el volcado al dashboard
   conservan su alto y quedan clavados arriba y abajo. Los mensajes se
   centran en el espacio sobrante para que no quede un vacío debajo. */
.voz-call-transcript { flex: 1; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO EN MÓVIL — la primera vista

   Lo que había a 393px: el logotipo pegado al borde izquierdo mientras la
   píldora, el titular, la entradilla y los botones iban centrados; la
   píldora partida en dos líneas a 9px ocupando 338 de los 345px
   disponibles; noventa y seis píxeles de vacío entre la barra y el primer
   elemento; y el punto verde de la línea de confianza suelto a la izquierda
   de un texto de dos líneas, sin nada al lado.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 47.9375rem) {

  /* 1. EL LOGOTIPO, CENTRADO.
     `layout.css` le puso `margin: 0` y eso pisaba el `margin: auto` que traía
     el sistema anterior: por eso era lo único del hero alineado a la
     izquierda, y es lo que más rompía la vista. */
  .hero-h1 .hero-logo-img {
    margin-inline: auto;
    /* El logotipo ya está en la barra dos centímetros más arriba. Aquí es una
       firma, no el titular: si mide más que el claim, el visitante lee la
       marca y no la promesa. Baja de 204 a 165px para dejarle el sitio. */
    width: min(42vw, 10.5rem);
  }

  /* 1 bis. EL CLAIM.
     Es la única frase que tiene que quedarse en la cabeza y salía a 31px,
     más pequeño que el logotipo que lleva encima. Sube a 41px con
     interlineado cerrado: a este tamaño las tres líneas se leen como un
     bloque y la vista tiene por fin un punto de entrada. */
  body.home .hero-subtitle {
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.038em;
  }

  /* 2. LA PÍLDORA.
     A 9px no se lee y, ocupando todo el ancho, parecía una banda y no una
     etiqueta. Sube a 11px y se ciñe a su contenido: las dos líneas que
     fuerza el markup quedan como una pastilla compacta y centrada. */
  body.home .hero-badge {
    font-size: 0.6875rem;
    letter-spacing: 0.09em;
    padding: 0.5rem 0.875rem;
    /* Tres cosas la mantenían a ancho completo: `.hero-content` es una
       columna flex (sus hijos se estiran), la píldora es un contenedor flex,
       y dentro lleva un `.hero-break` con `flex-basis: 100%` que forzaba la
       línea al ancho disponible. Se resuelve sacándola del modelo flex en
       móvil: en flujo normal, el salto es un salto y la caja se ciñe a la
       línea más larga. */
    display: inline-block;
    align-self: center;
    margin-inline: auto;
    max-width: 100%;
    line-height: 1.4;
  }
  body.home .hero-badge::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
  }
  body.home .hero-break { display: block; height: 0; flex-basis: auto; }

  /* 3. EL VACÍO DE ARRIBA.
     64px de la sección más 32px del bloque interior dejaban la marca a la
     mitad de la pantalla. Con 28+16 el hero arranca donde debe. */
  .hero-section { padding-top: 1.75rem; }
  .hero-inner   { padding-top: 1rem; gap: var(--fx-space-8); }
  .hero-content { gap: var(--fx-space-5, var(--fx-space-4)); }

  /* 4. LOS BOTONES.
     A pantalla completa y con altura de dedo: son la única acción de la
     primera vista y tienen que pesar como tal. */
  .hero-actions { gap: var(--fx-space-3); }
  .hero-actions > .btn,
  .hero-actions > a {
    width: 100%;
    min-height: 3.25rem;
  }

  /* 5. LA LÍNEA DE CONFIANZA.
     Era un contenedor flex, así que su punto verde (un ::before) se
     convertía en un ítem más y se quedaba solo a la izquierda de un texto
     de dos líneas. Pasa a flujo normal para que el punto viaje pegado a la
     primera palabra, como una viñeta. */
  .hero-social-proof {
    display: block;
    text-align: center;
    line-height: 1.55;
  }
  .hero-social-proof::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
  }
}