/* ═══════════════════════════════════════════════════════════════════════════
   EL HÉROE A SANGRE — SU PROPIA HOJA, PORQUE LO USAN DOS FAMILIAS.

   Nació dentro de `public_services.css` para las ocho fichas de servicio. El
   2026-09-15, al meter en el rediseño las rutas que se habían quedado atrás
   —/pricing, /add-ons, /about, /contact, /testimonials—, apareció el problema:
   las páginas de confianza cargan `public_support_trust.css` y NO la hoja de
   servicios, así que el componente no existía allí.

   Las tres salidas malas eran: copiar las sesenta líneas a la otra hoja (que
   es como se acaba con cinco maneras de dibujar lo mismo), cargar los ~40 KB
   de la hoja de servicios en páginas que no la necesitan, o dejar cada página
   con su propia cabecera. Ésta es la buena: un archivo pequeño, una sola
   fuente de verdad, cargado por `base.html` en todo el sitio público. En las
   páginas que no llevan héroe no cuesta nada: ninguna regla casa con nada.

   El velo NO es un gradiente inventado: son las paradas medidas en el
   laboratorio capturando el héroe CON EL TEXTO OCULTO y muestreando el fondo
   real bajo cada bloque. Se endurece del 50 % hacia abajo, que es donde vive
   el texto, y deja clara la parte de arriba, que es donde se ve el coche.
   ══════════════════════════════════════════════════════════════════════════ */
body.public-app .svc-heroe {
  position: relative;
  /* Sale del `.container` --342px de ancho en un móvil de 360-- sin tener que
     mover la plantilla al bloque `site_main`. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* No 100svh como en el laboratorio: allí no había cabecera de sitio encima.
     Con ella, una pantalla entera deja TODO lo demás bajo el pliegue. */
  min-height: 72svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
body.public-app .svc-heroe-medio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.public-app .svc-heroe-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 9, 11, 0.55) 0%,
    rgba(8, 9, 11, 0.14) 26%,
    rgba(8, 9, 11, 0.74) 52%,
    rgba(8, 9, 11, 0.94) 76%,
    var(--aui-bg, #0b0d10) 100%
  );
}
body.public-app .svc-heroe-texto {
  position: relative;
  padding: 0 24px clamp(40px, 11vw, 80px);
  display: grid;
  gap: 16px;
  /* Centrado como el del laboratorio: allí se midió que alinear sólo el botón
     no arreglaba nada --se alinea el BLOQUE entero-- . */
  justify-items: center;
  text-align: center;
}
body.public-app .svc-heroe-etiqueta {
  margin: 0;
  font-size: 14px;
  /* Sobre foto el gris de cuerpo daba 3,14:1 y la norma pide 4,5:1. Se sube
     la opacidad en vez de agrandar la letra. */
  color: rgba(226, 232, 240, 0.86);
}
body.public-app .svc-heroe h1 {
  margin: 0 auto;
  font-size: clamp(2.125rem, 9vw, 4.53rem);
  /* 1,30 y no 1,05: el aire ENTRE líneas es lo que hace respirar un titular
     grande, y éste va a dos renglones en un móvil. */
  line-height: 1.3;
  max-width: 13ch;
}
/* EL BLOQUE DE PRECIO, CENTRADO DE VERDAD.
   `justify-items` no hace nada sobre un contenedor flex, y
   `.service-pricing-anchor` lo es: el bloque quedaba centrado como caja pero
   su contenido alineado a la izquierda, así que con la leyenda en una línea
   parecía centrado y con dos —«From $89.99 / Sedan base · we come to you» a
   360 px— se veía pegado al borde. Dos páginas contiguas con el mismo
   componente y distinta pinta. Visto en las capturas, no en los números. */
body.public-app .svc-heroe .service-page-price,
body.public-app .svc-heroe .service-page-actions {
  margin: 0;
  justify-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

/* ── VARIANTE SOBRIA: SIN FOTO ─────────────────────────────────────────────
   Para las páginas de política. Una portada de 72 svh con un coche encima de
   «Privacy policy» no es coherencia, es ruido: quien abre una política va a
   leer, no a desear, y la foto le mete media pantalla de retraso y su peso en
   una página que no vende nada.

   Lo que SÍ hereda es la tipografía y el aire, que es lo que hacía que estas
   páginas parecieran de otra generación: el mismo titular grande y la misma
   etiqueta. Sin `min-height`, sin velo y sin imagen. */
body.public-app .svc-heroe.is-sobrio {
  width: auto;
  margin-inline: 0;
  min-height: 0;
  padding-top: clamp(24px, 8vw, 56px);
  background: none;
}
body.public-app .svc-heroe.is-sobrio .svc-heroe-texto {
  padding: 0 0 clamp(20px, 6vw, 36px);
  justify-items: start;
  text-align: left;
}
/* La etiqueta SIN foto detrás vuelve al rojo de la casa. Sobre fotografía va
   en gris claro por contraste —el rojo sobre un coche cualquiera no llega al
   4,5:1 que pide la norma—, pero aquí el fondo es el de la página y entonces
   el gris la dejaba indistinguible de un párrafo más, que es justo lo que
   hacía que estas páginas parecieran de otra generación. */
body.public-app .svc-heroe.is-sobrio .svc-heroe-etiqueta {
  color: var(--brand-red, #dc2626);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12.5px;
  font-weight: 600;
}
body.public-app .svc-heroe.is-sobrio h1 {
  margin: 0;
  /* Menos que el de una ficha: es un titular de documento, no de portada. */
  font-size: clamp(1.9rem, 7.4vw, 3rem);
  max-width: 18ch;
}

/* LA CIUDAD DENTRO DEL TITULAR, con menos peso que el servicio: lo que se
   busca con la vista es el servicio y la ciudad es el contexto. Sin `nowrap`
   —«Colorado Springs» cabe a 360 px, pero una ciudad más larga se saldría de
   la pantalla antes que partir—. */
body.public-app .svc-heroe .service-h1-ciudad {
  font-size: 0.62em;
  font-weight: 400;
  opacity: 0.62;
  display: block;
  margin-top: 2px;
}