/* ============================================================
   ATLA — home.css
   Solo lo específico del Home. La estructura común vive en base.css
   ============================================================ */

/* ============================================================
   HERO — foto a sangre, oscuro y cinematográfico
   (referencia: "Estilos secciones/Home/Home Diseño Idea.jpeg")

   La foto es "Atla fondo home.webp": cinco paneles verticales, uno por
   servicio, en el MISMO orden que las píldoras de la cabecera
   (Consultoría · Contabilidad · Marketing · Diseño Web · Automatización).
   El original en PNG pesaba 1,6 MB; se conserva como master en la carpeta
   pero el sitio usa el WebP de 48 KB.

   Debajo de la foto quedan los degradés que la reemplazaban: siguen ahí a
   propósito, como red de seguridad si el archivo falta o tarda en cargar.
   ============================================================ */
.hero {
  --hero-image: url("../../Atla%20fondo%20home.webp");
  /* La foto ya viene muy oscura, así que el velo es suave: sube solo lo
     necesario para el contraste del titular. Con una foto más clara habría
     que subirlo. 0 = foto a full, 1 = foto tapada. */
  --hero-scrim: 0.30;

  position: relative;
  isolation: isolate;
  /* Sangra por debajo de la cabecera: la imagen llega hasta arriba de todo,
     pero el texto arranca recién después de la barra (ver nota en base.css). */
  margin-top: calc(var(--header-h) * -1);
  /* Alto = pantalla, sin topes en px. Los topes de antes
     (clamp(620px, 100svh, 900px)) rompían el zoom: al alejar, el viewport
     crece en px CSS pero el techo de 900px lo cortaba, así que el hero
     dejaba de llenar la pantalla y la foto —al ser `cover`— se achicaba
     con él. Con 100svh a secas el bloque siempre mide exactamente la
     pantalla física, a cualquier zoom, y `cover` reencuadra igual porque
     la proporción del viewport no cambia. `min-` y no `height` para que
     pueda crecer si el contenido no entra en pantallas bajas. */
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: var(--sp-6);
  background: var(--navy-deep);
  color: var(--ink-on-dark);
}

/* Capa 1 — la foto (o el degradé marcador mientras no haya foto) */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--navy-deep);
  background-image:
    var(--hero-image),
    radial-gradient(75% 55% at 50% 22%, rgba(120, 141, 182, 0.34) 0%, transparent 62%),
    radial-gradient(60% 45% at 82% 78%, rgba(201, 151, 31, 0.14) 0%, transparent 70%),
    linear-gradient(168deg, #1B2A47 0%, #0D1526 55%, #080D18 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Capa 2 — velo. Dos gradientes con trabajos distintos:
   · el radial garantiza el contraste justo detrás del titular, sin importar
     qué haya en la foto en ese punto;
   · el vertical hunde arriba (para la cabecera) y abajo (para el corte con
     la sección clara), y deja respirar la zona media de la foto. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(62% 46% at 50% 46%, rgba(8, 13, 24, 0.62) 0%, transparent 74%),
    linear-gradient(180deg,
      rgba(8, 13, 24, calc(var(--hero-scrim) + 0.26)) 0%,
      rgba(8, 13, 24, calc(var(--hero-scrim) - 0.10)) 34%,
      rgba(8, 13, 24, var(--hero-scrim)) 64%,
      rgba(8, 13, 24, calc(var(--hero-scrim) + 0.32)) 100%);
}

/* Capa 3 — grano, para que el degradé no lea como plástico */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.hero .label { color: var(--ink-muted-on-dark); }

.hero__title {
  font-size: var(--fs-display);
  max-width: 15ch;
  color: var(--ink-on-dark);
}

/* La coma en oro: único acento del titular */
.hero__title em { font-style: italic; color: var(--accent); }

.hero__lead {
  max-width: 52ch;
  color: var(--ink-muted-on-dark);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* ---------- Quiénes somos ---------- */
.manifiesto { text-align: center; }

.manifiesto__statement {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.12;
  max-width: 20ch;
  margin: var(--sp-3) auto var(--sp-4);
}

.manifiesto__statement b {
  font-weight: 400;
  font-style: italic;
  color: var(--burgundy);
}

.manifiesto__text {
  display: grid;
  gap: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.manifiesto__sign {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  margin-top: var(--sp-3);
}

/* ============================================================
   EQUIPO — cuatro retratos
   (referencia: "Estilos secciones/Home/home imagenes de nosotros.webp")

   Cada socio toma el color de una de las cuatro barras del isotipo.
   El PDF de marca dice que las barras son "una por cada socio fundador":
   acá esa idea se vuelve literal y verificable de un vistazo.

   PARA PONER LAS FOTOS: reemplazar el <div class="socio__ph"> por
   <img class="socio__foto" src="..." alt="..."> — el recorte y el
   degradé ya están resueltos por el contenedor.
   ============================================================ */
.equipo__head { text-align: center; margin-bottom: var(--sp-5); }
.equipo__title { font-size: var(--fs-h2); margin-top: var(--sp-2); }

.equipo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.socio {
  --tono: var(--slate-deep);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  padding: var(--sp-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink-on-dark);
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--tono) 55%, #ffffff) 0%, transparent 58%),
    linear-gradient(158deg, color-mix(in srgb, var(--tono) 88%, #000000) 0%, var(--tono) 100%);
  box-shadow: 0 1px 2px rgba(22, 35, 61, 0.10), 0 12px 28px -18px rgba(22, 35, 61, 0.45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.socio:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(22, 35, 61, 0.12), 0 22px 40px -20px rgba(22, 35, 61, 0.55);
}

/* ------------------------------------------------------------
   Velo detras del nombre y el rol.

   Encontrado por `audit-ui` midiendo los pixeles reales de la tarjeta, no
   el CSS: el realce radial es `color-mix(--tono 55%, blanco)` y cae arriba
   a la derecha, justo donde va el nombre. Medido sobre la captura:

     tarjeta   nombre   rol
     acero      2,65    2,04
     vino       3,41    2,48
     oro        1,71    1,46     <- el peor, y es el bug del oro con tinta
     marino     4,59    3,13        clara que ya estaba documentado (§6bis)

   Siete de ocho textos reprobaban. Con este velo al 0,55 en la franja del
   texto pasan los ocho, y el peor caso (oro) queda en 6,76 y 5,16.

   Va como vineta corta y no como capa sobre toda la tarjeta: oscurecer el
   naipe entero apagaria el color, que es lo que identifica a cada socio.
   ------------------------------------------------------------ */
.socio::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.60) 26%,
    rgba(0, 0, 0, 0.48) 44%,
    rgba(0, 0, 0, 0.26) 62%,
    rgba(0, 0, 0, 0.10) 82%,
    transparent 100%);
}

/* El texto tiene que quedar por ENCIMA del velo: un `::before` posicionado
   con z-index 0 se pinta despues del contenido en flujo normal. */
.socio__nombre,
.socio__rol {
  position: relative;
  z-index: 1;
}

.socio__nombre {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  text-align: center;
}

.socio__rol {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  /* 0.94 y no 0.7: a 12px sobre la tarjeta dorada, ni 0.7 ni 0.82 llegaban
     a 4,5:1. El oro es el peor caso de las cuatro y manda el valor. */
  color: rgba(244, 242, 238, 0.94);
  margin-top: 0.2rem;
}

/* Marcador de retrato: silueta sobria, no un ícono de "usuario" genérico */
.socio__ph {
  flex: 1;
  display: grid;
  place-items: end center;
  margin-top: var(--sp-2);
}

.socio__ph svg {
  width: 78%;
  height: auto;
  opacity: 0.34;
  color: var(--ink-on-dark);
}

/* Cuando lleguen las fotos reales */
.socio__foto {
  flex: 1;
  width: 100%;
  margin-top: var(--sp-2);
  object-fit: cover;
  object-position: top center;
}

.equipo__nota {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* ---------- Servicios ---------- */
.servicios__head { text-align: center; margin-bottom: var(--sp-5); }
.servicios__title { font-size: var(--fs-h2); margin-top: var(--sp-2); }
.servicios__list { border-top: 1px solid var(--line); }

/* Cada servicio es una fila, no una tarjeta.
   Al pasar el mouse, el color de SU página entra desde la izquierda:
   es un anticipo del universo visual al que se accede. */
.servicio {
  --svc: var(--ink);
  --svc-on: var(--paper);

  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3.4vw, 2.5rem) clamp(0.75rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  transition: color var(--dur) var(--ease);
}

.servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--svc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.servicio:focus-visible { outline-offset: -3px; }
.servicio__num { transition: color var(--dur) var(--ease); }

/* ⚠️ EL TEXTO SOLO SE TIÑE DONDE EXISTE EL RELLENO (bug del 25/08/2026).

   Por debajo de 861px el `::before` va con `display: none` —abajo, en la
   media query— y el color pasa a mostrarse como filete lateral. Si ahí el
   texto igual se pinta con `--svc-on` (marfil), queda marfil sobre papel y
   la fila entera se borra. Medido: 1,0:1. Por eso el tinte VIVE dentro de
   `min-width: 861px` en vez de anularse después: lo que no existe no hay
   que deshacerlo.

   Y el `:hover` lleva además `(hover: hover) and (pointer: fine)`, porque en
   un teléfono el tap deja el `:hover` PEGADO hasta que se toca otra cosa —
   sin esto el efecto no se va nunca. `:focus-visible` queda afuera de esa
   condición: el teclado tiene que funcionar con cualquier puntero. */
@media (min-width: 861px) {
  .servicio:focus-visible::before { transform: scaleX(1); }
  .servicio:focus-visible { color: var(--svc-on); }
}

@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .servicio:hover::before { transform: scaleX(1); }
  .servicio:hover { color: var(--svc-on); }
  .servicio:hover .servicio__num { color: color-mix(in srgb, var(--svc-on) 72%, transparent); }
  .servicio:hover .servicio__desc { color: color-mix(in srgb, var(--svc-on) 84%, transparent); }
  .servicio:hover .servicio__go { opacity: 1; transform: translateX(6px); }
}

.servicio__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.servicio__desc {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}

.servicio__go {
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* El foco sí mueve la flecha en cualquier ancho: no depende del relleno. */
.servicio:focus-visible .servicio__go { opacity: 1; transform: translateX(6px); }

/* ---------- Cómo trabajamos ---------- */
.proceso__head { text-align: center; margin-bottom: var(--sp-5); }
.proceso__title { font-size: var(--fs-h2); margin-top: var(--sp-2); }

.proceso__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.paso { padding-top: var(--sp-3); border-top: 2px solid var(--accent); }

.paso__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: var(--sp-1) 0;
}

.paso__text { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.7; }

/* ---------- Cierre ---------- */
.cierre { text-align: center; }
.cierre__title { font-size: var(--fs-h2); margin: var(--sp-2) auto var(--sp-3); max-width: 18ch; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .equipo__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
}

@media (max-width: 860px) {
  .proceso__grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  .servicio {
    grid-template-columns: 1fr auto;
    row-gap: 0.35rem;
    padding-inline: 0;
    /* En móvil no hay hover: el color se muestra como filete lateral fijo */
    border-left: 3px solid var(--svc);
    padding-left: var(--sp-2);
  }
  .servicio__num { grid-column: 1 / -1; }
  .servicio::before { display: none; }
  .servicio__go { opacity: 0.5; }

  /* Solo el padding de ABAJO. Con el atajo `padding-block` se pisaba el
     `padding-top: calc(var(--header-h) + var(--sp-4))` que reserva la
     cabecera, pero el `margin-top` negativo seguía en pie: el hero subía
     233px y solo devolvía 64, así que en 390px el titular terminaba 18px
     POR DEBAJO de las píldoras. Es exactamente contra lo que avisa la §6. */
  .hero { padding-bottom: var(--sp-6); }
}

@media (max-width: 480px) {
  .equipo__grid { grid-template-columns: 1fr; }
  .socio { aspect-ratio: 4 / 3; }
}