/* ==========================================================================
   CASA VERDE SERVICES — HERO
   Concepto: LA HORA EXACTA · composicion tomada de la referencia del cliente

   Se carga DESPUES de styles.css. Colores, espaciado, curvas y formas salen
   de css/tokens.css: aqui no hay ni un color ni una duracion escritos a mano.

   TIPOGRAFIA: por peticion del cliente el banner conserva las familias
   originales del sitio -- Montserrat en titulares y Rubik en texto-- y NO usa
   el par Bricolage/Instrument del sistema de la Fase 1. El resto del sistema
   (styleguide.html) mantiene el par nuevo.

   FORMA: por la misma razon el banner usa los radios que ya tiene el sitio
   (--radius-sm 12px, --radius 20px, --radius-lg 26px, --radius-pill) en lugar
   del corte a 45 grados de la Fase 1. El componente .sello se sobreescribe
   aqui para que no dibuje el chaflan.

   Consecuencia medida: Montserrat es 1,58x mas ancha que Bricolage condensada
   (3213 px contra 1952 px para la cadena del h1 a 100 px). Al cuerpo de la
   Fase 1 el titular pasaba de 4 lineas a 6, asi que el hero lleva su propia
   escala de titular, mas contenida.

   Regla que gobierna este archivo: el texto del hero NUNCA nace invisible.
   El movimiento va encima de contenido ya legible, jamas como condicion para
   verlo. Ese era el fallo 4.6 y el que rompia el criterio T-legible.
   ========================================================================== */

.hero {
  /* Escala del titular calculada PARA Montserrat: con la de la Fase 1 (101 px)
     salian 6 lineas. */
  /* El techo baja de 4.75rem (76px) a 3.4375rem (55px) por peticion del cliente.
     Se cambia SOLO el techo, no el clamp entero: el suelo de 2.125rem (34px)
     esta medido y un 55px plano desbordaria en movil. El suelo baja de
     2.25rem (36px) a 2.125rem (34px) porque a 360px el titular caia en 6
     lineas usando el 76% de su caja, con 77px muertos a la derecha; a 34px
     cae en 4 y llena el 100%. Ver qa/informe-errores.html B3.
     Con el techo en 55px la rampa lo alcanza a 1079px de ancho, asi que de ahi
     en adelante el titular es exactamente 55px. */
  --fs-hero-banner: clamp(2.125rem, 5.1vw, 3.4375rem);   /* 34 -> 55 px */

  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid;
  padding: 0;
  overflow: hidden;
  background: var(--tinta-alta);   /* color de respaldo mientras llega la foto */
}

/* --- Fondo a sangre ------------------------------------------------------ */
.hero-fondo,
.hero-fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero-fondo img {
  object-fit: cover;
  object-position: 42% 30%;   /* mismo anclaje que el recorte de qa/generar-hero.py */
  max-width: none;
}

/* --- El velo -------------------------------------------------------------
   En verde de marca, no en negro. Es asi como una fotografia que no podemos
   repintar acaba leyendose en los colores corporativos.                     */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      /* La franja oscura llega hasta el 55%: es hasta donde alcanza el
         titular en Montserrat, que es 1,58x mas ancha que Bricolage. Con el
         reparto anterior el contraste del h1 bajaba a 4,57:1. */
      rgba(12, 42, 28, .86) 0%,
      rgba(12, 42, 28, .74) 30%,
      rgba(12, 42, 28, .60) 55%,
      rgba(27, 67, 50, .28) 78%,
      rgba(27, 67, 50, .14) 100%),
    linear-gradient(
      to top,
      rgba(12, 42, 28, .92) 0%,
      rgba(12, 42, 28, .55) 34%,
      rgba(12, 42, 28, .08) 62%,
      rgba(12, 42, 28, .38) 100%);
}

/* --- Estructura ---------------------------------------------------------- */
.hero-marco {
  position: relative;
  width: var(--medida);
  margin-inline: auto;
  padding-block: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

/* La fila de contenido va centrada en vertical: el mismo aire arriba que abajo.
   Antes iba pegada abajo (`align-items: end`), herencia de cuando el hero tenia
   ademas el sello de hora en la fila superior. Al retirarse aquel bloque, el
   contenido quedaba descolgado contra el borde inferior. */
.hero-bajo {
  flex: 1 1 auto;
  align-items: center;
  row-gap: var(--s-6);
}

.hero-texto { grid-column: 1 / 8; }
/* El titular va centrado en vertical (lo pone `.hero-bajo`), pero la columna de
   accion se queda abajo: el CTA cerrando la composicion, como estaba. */
.hero-lado  { grid-column: 9 / 13; align-self: end; display: flex; flex-direction: column; gap: var(--s-4); }

/* --- Titular -------------------------------------------------------------
   Sin estado inicial oculto. Se ve en el primer pintado, con o sin JS.      */
.hero h1 {
  font-family: var(--font-head);           /* Montserrat, la de siempre */
  font-size: var(--fs-hero-banner);
  /* El titular va en peso normal y solo la parte marcada con .accent en bold
     (ver .accent abajo): el contraste lo hace el fragmento, no la frase entera.
     Hoy ese fragmento es "inside and the outside". */
  font-weight: 400;
  /* Sube de 1.02 a 1.15: el 1.02 estaba calculado para el titular de 76px, y a
     55px las lineas se leian pegadas. Ademas el subrayado del acento ocupa el
     hueco entre lineas, asi que necesita aire por debajo. */
  line-height: 1.15;
  letter-spacing: -.025em;                 /* el tracking original del sitio */
  color: var(--papel);
  margin: 0;
  /* En rem y no en ch: ch depende de la metrica de la fuente y cambiaria de
     valor al hacer el swap, provocando un salto de layout.
     La medida baja de 46rem a 32rem al acortarse el titular: "Llegamos cuando
     dijimos que iba a llegar" son 44 caracteres contra los 65 del anterior, y
     con 46rem caia en 2 lineas descompensadas (una llena y una de tres
     palabras). A 32rem son 3 lineas parejas, el bloque para el que se calibro
     la escala de 76px. */
  max-width: 32rem;
  /* `pretty` y no `balance`: Chrome desactiva el balanceo a partir de 6 lineas,
     asi que en movil no hacia nada. `pretty` si trabaja siempre y mejora el
     margen derecho — a 560px pasa de llenar el 77% de la caja al 90%. */
  text-wrap: pretty;
}

/* El acento deja de ser italica verde: sobre foto oscura seria ilegible.
   Su forma definitiva la decide la Fase 2. */
.hero h1 .accent {
  font-style: normal;
  font-weight: 800;   /* la unica palabra en bold de todo el titular */
  color: var(--papel);
  /* text-decoration y no box-shadow: el subrayado tiene que romper con la
     linea. Con box-shadow, en un titular de 4 lineas, la barra quedaba
     suelta cruzando por debajo de la siguiente linea. */
  text-decoration: underline;
  /* Blanco, no el oxido del sello: se pidio que la linea acompanie al texto en
     vez de introducir un segundo color en el titular. --papel y no #fff para
     que sea exactamente el mismo tono que el resto del h1. */
  text-decoration-color: var(--papel);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

.hero .lead {
  margin-top: var(--s-4);
  max-width: 35rem;   /* idem: nada de ch en el hero */
  font-family: var(--font-body);           /* Rubik */
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--sobre-tinta);
  text-wrap: pretty;
}

/* --- Respaldos del titular ----------------------------------------------
   Los tres avales, en la misma voz de sello que el telefono de abajo: versales
   de 11px con tracking abierto. No van como pastillas con borde a proposito;
   el hero ya tiene un boton y unas pastillas competirian con el. El separador
   se pinta desde CSS para que no entre en el texto que lee el navegador. */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: var(--fs-sello);
  letter-spacing: var(--ls-sello);
  text-transform: uppercase;
  color: var(--sobre-tinta);
}
.hero-chips li { display: flex; align-items: baseline; gap: var(--s-3); }
/* Al partirse en dos lineas el punto queda colgando al principio de la
   segunda, asi que solo lo lleva el elemento que comparte fila con el
   anterior. `text-indent: -.6em` no vale aqui: el li es flex. */
.hero-chips li + li::before {
  content: "·";
  color: var(--sobre-tinta-baja);
  letter-spacing: 0;
}

/* --- Barra de accion -----------------------------------------------------
   Un solo CTA, como en la referencia. "Llamar ahora" baja a enlace, no a
   segundo boton: dos botones del mismo peso no priorizan nada.              */
/* `align-items: center` en vez del estirado por defecto: el boton se ajusta a
   su texto y queda centrado, con el telefono centrado debajo. */
.hero-accion { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.hero-cta { align-self: center; }

.hero-cta {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  /* Sin fondo propio: cada mitad pinta el suyo. Con el crema aqui quedaba una
     capa entera por debajo del bloque verde, y asomaba por los pixeles a medio
     cubrir de su curva. Se leia como un reborde claro rodeando el check. */
  background: transparent;
  color: var(--tinta-alta);
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;          /* red de seguridad del radio de la barra */
  box-shadow: var(--elev-2);
  transition: color var(--dur-ui) var(--ease-mecanico);
}
.hero-cta-txt {
  /* Se estira a toda la altura para poder llevar el crema que antes ponia el
     enlace; el rotulo se sigue centrando, ahora con el grid interior. El
     relleno derecho absorbe el `gap` de 13px que separaba las dos mitades:
     ahora se tocan, para que entre ellas no quede rendija a la foto. */
  display: grid;
  place-items: center;
  padding: var(--s-4);
  padding-right: calc(var(--s-4) + var(--s-3));
  background: var(--papel);
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--pe-fuerte);
  letter-spacing: var(--ls-titulo);
  transition: background var(--dur-ui) var(--ease-mecanico);
}
.hero-cta-flecha {
  flex: 0 0 auto;
  width: var(--s-7);
  /* Radio propio en las dos esquinas de la derecha: el `overflow: hidden` del
     padre recorta, pero no pinta. Y -1px de margen para que el verde solape al
     crema en la junta: al no haber ya fondo en el enlace, un reparto en
     subpixeles del flex dejaria ver la foto por esa linea. */
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-left: -1px;
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: var(--papel);
  transition: background var(--dur-ui) var(--ease-mecanico);
}
/* El check es una silueta rellena: su tinta ocupa toda la caja, mientras que
   la flecha de trazo que habia antes solo llenaba 16 de sus 24 unidades. Por
   eso la caja baja de 54px a 38px: asi el dibujo conserva el mismo peso
   optico (43% del bloque) que tenia la flecha. Movil mantiene la proporcion. */
.hero-cta-flecha svg { width: 38px; height: 38px; }

.hero-cta:hover .hero-cta-txt   { background: var(--sobre-tinta); }
/* Verde de la paleta, no el oxido del sello: era el unico color no verde que
   aparecia al pulsar. `--senal` mantiene el mismo salto visual desde el reposo
   (2,32 contra los 2,39 del oxido) y sube el contraste de la flecha blanca de
   4,51 a 4,65. Se descarto `--green-400`, el acento del sitio, porque la flecha
   sobre el se queda en 2,36:1 y el minimo para un icono es 3:1. */
.hero-cta:hover .hero-cta-flecha { background: var(--senal); }

.hero-tel {
  font-family: var(--font-head);
  font-size: var(--fs-sello);
  letter-spacing: var(--ls-sello);
  text-transform: uppercase;
  color: var(--sobre-tinta-baja);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-ui) var(--ease-mecanico);
}
.hero-tel:hover { color: var(--papel); }

/* Telefono y WhatsApp bajo el CTA (G3: cada aparicion del telefono lleva
   WhatsApp al lado). Van APILADOS, no en fila: el boton flotante de WhatsApp
   vive fijo en esta misma esquina, y en una sola linea el segundo enlace le
   quedaba por debajo y se cortaba. Apilados los dos quedan por encima de el.
   Sin punto medio de separacion: en fila se envolvia y dejaba el "·" colgando. */
.hero-contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  /* Holgura para el boton flotante de WhatsApp (fixed, right/bottom 20px). Sin
     ella el renglon del telefono entraba 11px en su caja y el numero se cortaba
     — pasaba ya antes de anadir el enlace de WhatsApp. La columna esta anclada
     abajo (`.hero-lado { align-self: end }`), asi que este margen sube el
     bloque en vez de estirar el hero. */
  margin-bottom: 1.25rem;
}

/* --- Respaldo con metrica casada para Montserrat -------------------------
   El de tokens.css esta calibrado para Bricolage (87,8 %) y aqui no sirve.

   Recalibrado al pasar el titular de peso 800 a 400. La cadena del h1 a 100 px:
     Montserrat 800 / -.025em ..... 3213 px   (valor viejo -> 112,3 %)
     Montserrat 400 / -.025em ..... 2987 px   <- el peso que manda ahora
     Respaldo sin ajustar ......... 3233 px   ->  2987/3233 x 112,3 = 103,8 %

   Con el 112,3 % el respaldo salia 8,2 % mas ancho que la fuente real, asi que
   al llegar Montserrat el titular se re-partia y el hero saltaba. El fragmento
   .accent sigue en 800, pero son unas pocas palabras dentro de una frase larga:
   la calibracion tiene que seguir al peso dominante, no a la excepcion.      */
@font-face {
  font-family: "Montserrat respaldo";
  src: local("Arial Bold"), local("Arial"), local("Liberation Sans"),
       local("Helvetica Neue");
  size-adjust: 103.8%;
  ascent-override: 82%;
  descent-override: 21%;
  line-gap-override: 0%;
}

.hero h1,
.hero-cta-txt,
.hero-tel {
  font-family: "Montserrat", "Montserrat respaldo", system-ui, sans-serif;
}

/* --- Foco visible sobre fondo oscuro ------------------------------------- */
.hero a:focus-visible,
.hero button:focus-visible {
  outline: 2px solid var(--papel);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.hero .hero-tel:focus-visible { border-radius: var(--radius-pill); }
.hero .hero-cta:focus-visible { border-radius: var(--radius); }

/* --- Entrada -------------------------------------------------------------
   Solo transform. Nada de opacidad sobre el texto: si el JS no llega, el
   hero se ve completo igual y T-legible no depende del script.              */
@media (prefers-reduced-motion: no-preference) {
  .hero-marco > * { animation: hero-sube var(--dur-cinematic) var(--ease-out-expo) both; }
  .hero-bajo      { animation-delay: 120ms; }
}
@keyframes hero-sube {
  from { transform: translateY(var(--s-4)); }
  to   { transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .hero-texto { grid-column: 1 / -1; }
  .hero-lado  { grid-column: 1 / -1; }
  /* 30rem, no 18ch: `ch` depende de la metrica de la fuente y cambia de valor
     al terminar el swap, que fue una de las dos causas del salto de layout que
     documenta qa/notas/02-hero.md. La regla base ya lo evitaba; esta se quedo
     sin migrar. 30rem = 480px, el mismo ancho que daba 18ch. */
  .hero h1    { max-width: 30rem; }

  /* Apilado no hay columna lateral: texto y CTA se leen como un solo bloque,
     asi que se centran juntos. Dejar el CTA anclado abajo abria un hueco de
     225px entre el parrafo y el boton; centrando el conjunto queda la
     separacion natural de 55px y el mismo aire arriba que abajo. */
  .hero-bajo { align-content: center; }
  .hero-lado { align-self: auto; }
}

@media (max-width: 639.98px) {
  .hero { min-height: 0; }
  /* Densidad apretada: en un movil de 740px de alto, cada salto de Fibonacci
     que sobre empuja el CTA por debajo del pliegue. */
  .hero-marco { padding-block: var(--s-5) var(--s-5); gap: var(--s-4); }
  .hero-bajo  { row-gap: var(--s-4); }

  .hero-velo {
    /* En vertical el degradado lateral no sirve: el texto ocupa todo el ancho.
       Y se afloja: al 95% la fotografia desaparecia y el hero se leia como un
       rectangulo verde liso. */
    background:
      linear-gradient(to top,
        rgba(12, 42, 28, .90) 0%,
        rgba(12, 42, 28, .72) 38%,
        rgba(12, 42, 28, .40) 72%,
        rgba(27, 67, 50, .30) 100%);
  }

  .hero h1     { max-width: none; }
  .hero .lead  { max-width: none; margin-top: var(--s-3); }
  .hero-cta-txt    { padding: var(--s-3) calc(var(--s-4) + var(--s-3)) var(--s-3) var(--s-4); }
  /* Bloque mas estrecho, flecha proporcionalmente igual: 21 de 55 = 38%. */
  .hero-cta-flecha { width: var(--s-6); }
  .hero-cta-flecha svg { width: 23px; height: 23px; }

  /* PENDIENTE (Fase 3): a 360px el boton flotante de WhatsApp se apoya encima
     de la flecha del CTA. Probe a acortar el rotulo y no basta: el flotante
     esta en position:fixed abajo a la derecha y pisa contenido en TODAS las
     secciones, no solo aqui. Se arregla al rediseniar el flotante, no
     empequeneciendo el CTA principal del hero. */
}

/* "Solicitar mi cotizacion gratis" es largo y en movil estrecho no entra en
   una linea. Al centrar el CTA dejo de estirarse hasta el ancho de la columna,
   asi que ya no basta con bajar un punto de cuerpo: hay que recortar tambien
   el relleno lateral. El cuerpo escala con el viewport en vez de dar un salto
   seco, que dejaba dos tramos partidos en dos lineas (320-373 y 375-385). */
@media (max-width: 419.98px) {
  .hero-cta-txt {
    padding-inline: var(--s-3) calc(var(--s-3) * 2);
    font-size: clamp(11.5px, 3.6vw, 15px);
  }
}