/* Landing de Alder Gestiones · primera pantalla.
   Campo marino a pantalla completa, titular grande a la izquierda y el celular con la captura del rubro elegido a la derecha
   (debajo en celulares, asomando para invitar al scroll). Al elegir un rubro cambian el lema, la captura y el color del disco. */

.hero { min-height: 100dvh; display: grid; align-items: center; padding-block: var(--e-6) var(--e-8); overflow-x: clip; }
.hero-grilla { display: grid; gap: var(--e-7); grid-template-areas: "marca" "texto" "tel"; align-items: start; }
.hero-marca { grid-area: marca; justify-self: start; min-height: 44px; }
.hero-texto { grid-area: texto; display: grid; gap: var(--e-5); align-content: start; }
.hero-telefono { grid-area: tel; justify-self: center; position: relative; isolation: isolate; width: min(300px, 72vw); }
.hero h1 { max-width: 12ch; }

/* Lema: los cuatro textos se apilan en la misma celda, así la altura no cambia al elegir otro rubro */
.hero-lema { display: grid; max-width: 30ch; }
.lema { grid-area: 1 / 1; margin: 0; font: 600 clamp(1.25rem, 1.05rem + 1vw, 1.75rem)/1.25 var(--f-titulo); letter-spacing: -.015em; color: var(--tinta); text-wrap: balance; opacity: 0; visibility: hidden; }
.lema[data-activo] { opacity: 1; visibility: visible; }

.hero-selector { display: grid; gap: var(--e-3); }
.hero-selector .nota { color: var(--tinta-2); }
.hero-wa { justify-self: start; }

/* Disco de color detrás del celular: toma el acento del rubro */
.hero-telefono::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; width: 132%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: color-mix(in srgb, var(--acento) 38%, var(--marino)); }

/* Capturas apiladas: la activa se ve, las otras quedan transparentes y desenfocadas */
.hero .telefono-marco { display: grid; }
.captura { grid-area: 1 / 1; opacity: 0; filter: blur(8px); }
.captura[data-activa] { opacity: 1; filter: none; }

@media (min-width: 900px) {
  .hero-grilla { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); grid-template-areas: "marca marca" "texto tel"; column-gap: var(--e-8); row-gap: var(--e-8); align-items: center; }
  .hero-telefono { width: min(340px, 100%); }
}

/* Cambio de rubro: cruce breve. Sin movimiento, el cambio es inmediato y conserva el estado. */
@media (prefers-reduced-motion: no-preference) {
  .lema { transform: translateY(8px); transition: opacity var(--dur-cambio) var(--salida), transform var(--dur-cambio) var(--salida), visibility 0s linear var(--dur-cambio); }
  .lema[data-activo] { transform: none; transition-delay: 0s; }
  .captura { transition: opacity var(--dur-cambio) var(--salida), filter var(--dur-cambio) var(--salida); }
  .hero-telefono::before { transition: background-color 420ms ease; }
}
@media (prefers-reduced-motion: reduce) { .lema, .captura, .hero-telefono::before { transition: none; } }