/* ============================================================================
   HERO DE INICIO — capa aislada
   ----------------------------------------------------------------------------
   Esta hoja gobierna SOLO el interior de .hero-inicio y va la ultima de todas,
   despues de profundidad.css. Existe por una razon concreta: el hero de este
   sitio ya se rompio dos veces (la barra de redes tapada por el hero, y las
   entradas que dejaban todo en opacity:0), siempre por lo mismo, reglas del
   hero repartidas entre estilo.css y animaciones.css peleandose el z-index y
   el reflujo con las secciones vecinas.

   TRES CANDADOS, y cada uno arregla un fallo real que ya paso aqui:

   1. isolation:isolate  -> contexto de apilamiento propio. Ningun z-index de
      adentro puede volver a treparse por encima de la cabecera ni de la barra
      de redes. Ese fue exactamente el bug de la barra social tapada.

   2. contain:layout     -> el reflujo queda encerrado. Nada de lo que cambie
      aqui adentro puede reacomodar a la seccion siguiente. NO se usa
      contain:paint porque recorta al padding-box y la nube tiene que poder
      asomar por fuera del borde; de eso ya se encarga el overflow:hidden.

   3. Variables con prefijo --h- y declaradas en la raiz del hero, no en :root.
      Asi no se filtran al resto del sitio ni chocan con las de nadie.

   El orden de capas, de abajo hacia arriba, va marcado con --h-z-* mas abajo:
   textura -> nube -> contenido. Cada capa es absoluta contra el hero, nunca
   contra el viewport.
   ========================================================================== */

.hero-inicio{
  /* --- geometria y color de esta seccion, todo local --- */
  --h-rojo:#E03527;              /* media del rojo de la plancha, plano */
  /* Grano SIN COSTURA. La baldosa anterior traia una caida de luz horneada y,
     al repetirse, las costuras se leian como bandas horizontales ("cortes muy
     notorios"). Este grano es solo alta frecuencia (se le quito la iluminacion
     de baja frecuencia), gris neutro 128, y se funde por soft-light sobre el
     rojo plano: da textura sin introducir ninguna banda. */
  --h-textura:url('img/arte/grano-rojo.webp');
  --h-nube:url('img/arte/nube-hero.webp');

  /* La nube original mide 686x342 (razon 2.006). El ancho se fija en % del
     hero y el alto sale de la razon, para que no se deforme nunca. */
  /* En el arte la nube ocupa el 29.9% del ancho y llega al 24.6% del alto, y
     el titular arranca por DEBAJO y a la DERECHA de ella. En el sitio el
     titular todavia arranca al 20% del alto y pegado al borde izquierdo (eso
     es el cambio 7 de la lista, redistribuir los textos, que aun no se hace).
     Hasta entonces la nube se mantiene mas chica y mas alta que en el arte,
     para que viva en la esquina sin comerse el titular. Cuando se corrija la
     distribucion, subir --h-nube-ancho a 30% y --h-nube-y a -2%. */
  --h-nube-ancho:24%;
  --h-nube-x:-4%;
  --h-nube-y:-6%;

  --h-z-textura:0;
  --h-z-nube:1;
  --h-z-contenido:3;

  isolation:isolate;
  contain:layout;
  position:relative;
  overflow:hidden;

  /* Fondo: GRANO ROJO REAL DEL CLIENTE, recortado del plato FP37_banner_Moto
     (rojo exacto ~#F73828 + textura auténtica del .ai). Reemplaza la textura
     sintética anterior (grano-rojo tile con #E03527), que aproximaba el rojo
     pero no era el del cliente. Se usa un swatch limpio (sin la nube ni el pill
     horneados) a cover para que escale uniforme sin costuras; la nube de la
     esquina la sigue poniendo el recorte responsive .ne-izq. */
  /* Grano del cliente como TILE seamless (hero-grano.webp), repetido a tamaño
     natural. Antes se usaba un swatch a cover que, en el hero alto de móvil, se
     ampliaba ~2.7x y se veía pixelado/bloqueado. Tileado a 600px no se escala:
     queda nítido en desktop y móvil. El grano ya viene plano (sin viñeta) y las
     costuras están fundidas, así que no se ven repeticiones. */
  background:#E73729 url('img/hero-grano.webp') 0 0 / 600px 600px repeat;
}

/* El grano sintetico que habia antes sobra: la textura ya viene en el archivo
   del disenador. Dejarlo encima ensucia el rojo y lo aparta del arte. */
.hero-inicio::before{ content:none }

/* --------------------------------------------------------------------------
   LA NUBE
   Es un dibujo a mano, con trazo suelto doble y bultos de tamanos distintos.
   Antes se reconstruia con una mascara de circulos iguales en CSS, y por eso
   nunca cuadraba con el arte: ninguna combinacion de radios da un trazo hecho
   a pulso. Ahora es el recorte real, sacado de la plancha de TABLET (la de
   escritorio trae la pildora del nav horneada y se pega a la nube).
   -------------------------------------------------------------------------- */
.hero-inicio .nube-esquina.ne-izq{
  display:none;
}
/* El <svg> de la nube geometrica se queda en el HTML por compatibilidad con
   las hojas viejas, pero deja de pintarse: ahora la figura la pone el fondo. */
.hero-inicio .nube-esquina.ne-izq svg{ display:none }

/* Nube real (FINALES/ELEMENTOS RECURRENTE/NUBE.png) detrás del logo — mismo
   criterio que Eventos/Voluntarios (eventos.css/voluntarios.css): la nube
   vieja (nube-hero.webp al 24% de ancho, --h-nube-x/-y) quedaba casi
   invisible sobre el rojo del hero, muy chica y muy pegada a la esquina. */
/* 460px era 64% más ancha que la de Eventos/Voluntarios (280px, medido con
   getBoundingClientRect en las tres páginas a 768/1024/1280/1440 — un valor
   fijo, no responsive, en las dos) — a ese tamaño tapaba casi toda la foto
   del hero en vez de quedar detrás del logo como en el resto del sitio.
   280px + top/left reescalados en la misma proporción (280/460 ≈ 0.609)
   iguala el criterio real de las otras dos páginas. */
.hero-inicio-nube{
  position:absolute; z-index:var(--h-z-nube); pointer-events:none;
  top:-73px; left:-12px; right:auto; width:280px; height:auto;
}
@media (max-width:600px){
  .hero-inicio-nube{ top:-30px; left:-15px; right:auto; width:180px }
}

/* La nube de la esquina derecha era invento nuestro, no esta en el arte, y es
   parte de lo que la clienta pidio quitar para dejar la pagina limpia. */
.hero-inicio .nube-esquina.ne-der{ display:none }

/* --------------------------------------------------------------------------
   CONTENIDO
   Solo se le sube el z-index dentro del contexto aislado. La rejilla, los
   tamanos y el comportamiento responsive siguen viviendo en estilo.css: esta
   hoja no los duplica a proposito, para no tener dos fuentes de verdad.
   -------------------------------------------------------------------------- */
.hero-inicio .hero-grid{ position:relative; z-index:var(--h-z-contenido) }

/* --------------------------------------------------------------------------
   LA FIGURA: TRES CAPAS SOBRE UN LIENZO COMPARTIDO
   Las tres imagenes miden 1000x1112 exactamente iguales, asi que se apilan con
   inset:0 y no hay una sola cuenta de alineacion en CSS. Eso es deliberado: el
   casco dibujado tiene que caer sobre el gorro del niño, y con posiciones en
   porcentaje se desviaba al cambiar de ancho. Si algun dia hay que remontar la
   figura, se re-exportan las tres al mismo lienzo y no se toca este CSS.

   Orden de abajo hacia arriba: arte (gato, casco, lineas de velocidad) ->
   sombra -> niño.
   -------------------------------------------------------------------------- */
.hero-inicio .hero-capas .capa-arte {
  position: relative;
  z-index: 1;
}
.hero-inicio .hero-capas .capa-sombra {
  position: absolute; top: 0; left: 0; right: auto; bottom: auto;
  width: 100%; height: auto; z-index: 2;
}
.hero-inicio .hero-capas .capa-nino {
  position: absolute; top: 0; left: 0; right: auto; bottom: auto;
  width: 100%; height: auto; z-index: 5;
}
.hero-inicio .hero-capas .capa-casco {
  position: absolute; top: 0; left: 0; right: auto; bottom: auto;
  width: 100%; height: auto; z-index: 6;
}

/* --------------------------------------------------------------------------
   FIN DE LOS TRES APAÑOS DE LA RUEDA CORTADA
   El archivo anterior traia el neumatico cortado DENTRO del propio png, y para
   disimularlo animaciones.css hacia tres cosas: bajar la figura 124px en
   escritorio, bajarla otros 10px en tablet, y difuminar los ultimos 22px con
   una mascara en movil. El recorte nuevo del cliente viene completo, con 23px
   de margen por debajo del neumatico, asi que los tres apaños sobran. Y hay que
   retirarlos de verdad: la bajada de 124px descolocaba la figura respecto de la
   rejilla, y la mascara le comia el canto de la rueda buena.
   -------------------------------------------------------------------------- */
.hero-inicio .hero-capas{ transform:none }
.hero-inicio .hero-capas img{
  -webkit-mask-image:none;
          mask-image:none;
}

/* La flotacion se reasigna. animaciones.css la tenia colgada de .capa-gato, que
   ya no existe: la capa del dibujo ahora se llama .capa-arte. Sin esto el
   parallax entre el dibujo y el niño se quedaba muerto. Se reusan los mismos
   keyframes (flota-gato / flota-nino) para no duplicar la animacion. La sombra
   viaja con el niño, no con el dibujo, porque es SU sombra. */
html.anim .hero-inicio .hero-capas .capa-arte{
  animation:flota-gato 3.9s ease-in-out infinite;
}
html.anim .hero-inicio .hero-capas .capa-nino,
html.anim .hero-inicio .hero-capas .capa-sombra{
  animation:flota-nino 5.2s ease-in-out infinite;
  animation-delay:-1.4s;
}

/* EL CASCO: capa propia alineada sobre la cabeza del niño (el recorte nuevo tiene
   la cabeza más grande/baja que el line-art original, por eso el casco se salía).
   Se posiciona en % del lienzo 1000x1112 y flota CON el niño (mismo keyframe y
   delay) para no despegarse. */
.hero-inicio .hero-capas .capa-casco{
  position:absolute; z-index:4;
  top:0; left:0; width:100%; height:auto;
}
html.anim .hero-inicio .hero-capas .capa-casco{
  animation:flota-nino 5.2s ease-in-out infinite;
  animation-delay:-1.4s;
}

/* --------------------------------------------------------------------------
   AJUSTES POR ANCHO
   La nube crece en proporcion en pantallas chicas: en el arte movil ocupa un
   tercio del ancho, mucho mas que en escritorio en terminos relativos.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .hero-inicio{ --h-nube-ancho:44%; --h-nube-x:-6%; }
}
@media (max-width:600px){
  .hero-inicio{ --h-nube-ancho:62%; --h-nube-x:-10%; --h-nube-y:-1%; }
}

/* ==========================================================================
   FIGURA COMPLETA DEL HERO (tomada del .ai como una sola imagen)
   Reemplaza el apilado de capas. La flotación va sobre la imagen entera.
   ========================================================================== */
.hero-inicio .hero-figura .hero-figura-completa{
  width:100%; height:auto; display:block;
}
html.anim .hero-inicio .hero-figura-completa{
  animation:flota-nino 5.2s ease-in-out infinite;
}

/* Corte inferior del hero: brochazo blanco del .ai (líneas de pincel red->white)
   que reemplaza el festón de nube. La nube de la derecha ya viene en la figura. */
.hero-inicio .hero-corte{
  position:absolute; left:0; right:0; bottom:-1px; z-index:5; pointer-events:none;
  height:clamp(34px,4.2vw,64px);
  background:url('img/hero-corte-pincel.webp') bottom center/100% 100% no-repeat;
}
/* Se retira el festón de nube del corte hero->gesto (ahora es el brochazo). */
.gesto > .nube-arriba{ display:none !important }

/* NUBE COMPLETA DEL CORTE, delante del niño. Extraída del .ai (cúmulo fluffy).
   z-index 4 = por encima del contenido/figura (z3) y por debajo del brochazo del
   corte (z5). Anclada al fondo y bajo el niño (derecha): el niño emerge por
   detrás y su parte baja queda cubierta; el cuerpo blanco se funde con la
   sección siguiente. */
.hero-inicio .hero-nube-frente{
  position:absolute; z-index:4; bottom:-70px; right:0;
  width:43%; pointer-events:none;
}
.hero-inicio .hero-nube-frente img{ display:block; width:100%; height:auto }
/* En tablet/móvil la figura pasa ARRIBA y el corte queda al fondo tras las
   cifras, lejos del niño: la nube frontal quedaría desconectada. Se oculta y el
   corte lo sigue haciendo el brochazo (.hero-corte). */
@media (max-width:900px){
  .hero-inicio .hero-nube-frente{ display:none }
}

/* ==========================================================================
   CIFRAS DEL HERO — quitar el "cuadro" de fondo y subirlas de capa
   --------------------------------------------------------------------------
   profundidad.css le pinta a .cifra un background-image (luz + grano + un radial
   oscuro en los bordes) sobre el BOX rectangular. Como la forma de nube ahora
   vive en .cifra::before (para no recortar el texto), esa veladura del box se
   veía como un cuadro semi-transparente DETRÁS de la nube. Se anula: el relleno
   de la nube ya lo trae el ::before. Y se sube el z-index de las cifras por
   encima de la nube del corte (z4) y la figura, para que nada las tape/corte.
   ========================================================================== */
.hero-inicio .cifra{ background-image:none; }
.hero-inicio .hero-txt{ padding-top:20px; }
.hero-inicio .cifras{ position:relative; z-index:5; transform:translateY(20px); }

/* ==========================================================================
   BANNER DE INICIO — foto limpia de fondo + capas reales encima (2026-08-21)
   --------------------------------------------------------------------------
   Primera vuelta (2026-08-19) probó una pieza única aplanada (foto+texto+
   cifras horneados), como .eventos-hero. Isaías la rechazó: la imagen traía
   una barra blanca falsa detrás del menú real, y el título horneado se veía
   "doble" contra el real. Se vuelve al patrón de capas de siempre: la foto
   nueva (más nítida, sin barra ni texto horneado) va de FONDO ABSOLUTO
   (inset:0, object-fit:cover) y el grid de texto/cifras real fluye ENCIMA,
   con su propio padding-top para no quedar bajo el menú — como estaba antes
   de la primera vuelta. hero.css se carga DOS VECES en index.html (línea 66
   y 126) y gana por ser la última hoja — no hace falta !important aquí para
   pisar estilo.css/profundidad.css. */
.hero-inicio{
  background: none;
  width: 100%;
  padding-top: calc(var(--nav-alto) + 74px);
  padding-bottom: 40px;
  aspect-ratio: 1376 / 768;
  min-height: 560px;
}
.hero-inicio-img{
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero-inicio .hero-figura,
.hero-inicio .hero-nube-frente{
  display: none;
}
.hero-inicio .hero-corte{
  display: block;
}
@media (prefers-reduced-motion: no-preference){
  .hero-inicio-img{
    animation: hero-inicio-respiro 9s ease-in-out infinite;
    transform-origin: center 55%;
  }
  @keyframes hero-inicio-respiro{
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.018); }
  }
}
/* De 900px para abajo (tablet 768 y móvil 375) la caja deja de perseguir la
   proporción de la foto: el título y las cifras reales necesitan más alto del
   que cabe manteniendo esa razón de aspecto, y en tablet/móvil un hero más
   alto es normal, no un defecto. Se vuelve auto: la caja mide lo que el
   contenido en flujo pida (padding-top + título + cifras + padding-bottom).

   2026-08-24: Isaías reportó que la foto se veía "cortada"/"muy acercada" en
   móvil — era height:100%+object-fit:cover forzando la foto ancha (1920x1054,
   1.82:1) a estirarse hasta el alto que pedía el contenido (título + 3 cifras
   apiladas ≈1000px en 375px de ancho, comprobado con getBoundingClientRect),
   un zoom de ~5x. La foto ahora NO persigue el alto del contenido: se queda
   en su propia proporción (height:auto, sin object-fit) pegada arriba, como
   una banda — igual que .contacto-hero/.eventos-hero, que nunca recortan.
   El título (hero-txt, primera fila del grid) cae sobre esa banda porque
   ambos arrancan en el mismo top:0; las cifras (filas de más abajo) quedan
   fuera de la foto, sobre el rojo con grano de siempre — no necesitan la
   foto de fondo: cada cifra ya trae su propio chip opaco (blanco/rojo). */
@media (max-width:900px){
  /* El rojo con grano (background del bloque de arriba, línea ~74) queda
     cancelado por el bloque "segunda vuelta" (más abajo en este archivo,
     background:none) — tenía sentido cuando la foto cubría el 100% de la
     sección. Ahora que la foto sólo ocupa su propia franja, hace falta
     volver a mostrar ese fondo para que el título blanco y el resto del
     contenido no queden sobre blanco puro (invisibles). */
  .hero-inicio{
    aspect-ratio: auto; min-height: 0;
    background:#E73729 url('img/hero-grano.webp') 0 0 / 600px 600px repeat;
  }
  .hero-inicio-img{ position:absolute; top:0; left:0; width:100%; height:auto; }
}

/* 2026-08-25: a ≤600px la foto es hero-inicio-movil.webp (vertical, 768x1376,
   con el título horneado a la izquierda — ver <picture> en index.html). El
   overlay en vivo de .hero-titulo-img duplicaría el título, así que se apaga;
   pero .hero-txt sigue existiendo como CAJA (aspect-ratio 768/1376, mismo
   ancho de la foto) para reservar exactamente el alto que la foto real va a
   ocupar — sin esto, las cifras (que vienen justo después en el grid)
   arrancarían pegadas al top y quedarían montadas sobre la foto en vez de
   caer debajo, en el rojo con grano. aspect-ratio en vez de un px fijo:
   funciona igual en cualquier ancho de la mesa móvil sin recalcular nada. */
@media (max-width:600px){
  .hero-titulo-img{ display:none; }
  .hero-txt{ width:100%; aspect-ratio:768/1376; padding-left:0; }
}