/* Portada de la home (index.html), estilo worley.com: video de fondo, cifra y cita, cinta, método, cifras,
   industrias, notas y contacto a la vista. Usa styles.css como base. */

/* ---------- Hero: foto de fondo más visible (opción B) + tarjeta con cifra y cita ---------- */
.alt-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; padding: 96px 0 96px; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; align-items: flex-end; background: var(--oscuro) url("video/industrias-fondo.jpg") center / cover no-repeat; }
.alt-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Velo oscuro: firme detrás del texto, más liviano a la derecha para que se vea el video */
.alt-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,43,55,.9) 10%, rgba(10,43,55,.6) 50%, rgba(10,43,55,.3)), linear-gradient(0deg, rgba(10,43,55,.6), transparent 40%); }
.alt-hero h1, .alt-hero__bajada { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.alt-hero__pausa { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(8,30,39,.6); color: #fff; font-size: 12px; cursor: pointer; display: grid; place-items: center; }
.alt-hero__pausa:hover { background: rgba(8,30,39,.9); }
.alt-hero__fila { display: grid; grid-template-columns: 1.35fr .9fr; gap: 56px; align-items: end; }
.alt-hero h1 { margin-top: 22px; font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.05; }
.alt-hero h1 em { display: block; font-style: normal; color: var(--naranja-claro); }
.alt-hero__bajada { margin-top: 24px; max-width: 54ch; font-size: 18px; line-height: 1.55; color: #d9e5e9; }
.alt-hero__bajada strong { color: #fff; }
.alt-hero .hero__ctas { margin-top: 30px; }

.alt-tarjeta {
  background: rgba(255,255,255,.96); color: var(--texto); border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35); border-top: 4px solid var(--naranja);
}
.alt-tarjeta__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja); }
.alt-tarjeta__cifra { margin-top: 6px; font-size: 64px; font-weight: 800; line-height: 1; color: var(--oscuro); letter-spacing: -.02em; }
.alt-tarjeta__texto { margin-top: 8px; font-size: 14.5px; color: var(--texto-suave); }
.alt-tarjeta__cita { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--borde); font-family: "Lora", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.5; color: var(--texto); }
.alt-tarjeta__firma { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }

/* ---------- Cinta de novedades ---------- */
.alt-cinta { display: flex; align-items: stretch; background: var(--petroleo); color: #e6eef0; font-size: 14px; overflow: hidden; }
.alt-cinta__rotulo { flex-shrink: 0; display: flex; align-items: center; padding: 0 20px; background: var(--naranja); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.alt-cinta__ventana { flex: 1; min-width: 0; overflow: hidden; }
.alt-cinta__pista { list-style: none; margin: 0; padding: 14px 0; display: flex; gap: 56px; width: max-content; animation: alt-cinta 48s linear infinite; }
.alt-cinta:hover .alt-cinta__pista { animation-play-state: paused; }
.alt-cinta__pista li { white-space: nowrap; }
.alt-cinta__pista b { color: #fff; }
@keyframes alt-cinta { to { transform: translateX(calc(-50% - 28px)); } }

/* ---------- Método en 4 pasos ---------- */
.alt-titulo > p { color: var(--texto-suave); }
.alt-pasos { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--borde); }
.alt-paso { display: flex; flex-direction: column; padding: 28px 24px 26px; border-right: 1px solid var(--borde); transition: background .25s; }
.alt-paso:last-child { border-right: 0; }
.alt-paso:hover { background: var(--crema); }
.alt-paso__num { font-size: 15px; font-weight: 800; color: var(--naranja); letter-spacing: .06em; }
.alt-paso h3 { margin-top: 14px; font-size: 21px; }
.alt-paso > p:not(.alt-paso__num) { margin-top: 10px; font-size: 14.5px; color: var(--texto-suave); flex: 1; }
.alt-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.alt-tags li { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--petroleo); background: var(--celeste); padding: 5px 9px; border-radius: 999px; }
.alt-paso__link { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--naranja); text-decoration: none; }
.alt-paso__link span { display: inline-block; transition: transform .25s; }
.alt-paso__link:hover span { transform: translateX(4px); }

/* ---------- Cifras ---------- */
.alt-cifras { background: var(--oscuro); color: #fff; padding: 44px 0; }
.alt-cifras__fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.alt-cifras p { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 2px; }
.alt-cifras b { font-size: 54px; font-weight: 800; line-height: 1; color: var(--naranja-claro); }
.alt-cifras span { font-size: 34px; font-weight: 800; color: var(--naranja-claro); }
.alt-cifras small { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; color: #c4d2d7; max-width: 22ch; }

/* ---------- Industrias (oscura, con foto y enlace) ---------- */
.alt-industrias { background: var(--oscuro-2); color: #fff; }
.alt-industrias__grilla { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.alt-industria { position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: var(--radio); overflow: hidden; color: #fff; text-decoration: none; }
.alt-industria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.alt-industria::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,37,47,.1) 20%, rgba(8,37,47,.92)); }
.alt-industria:hover img { transform: scale(1.06); }
.alt-industria__cuerpo { position: relative; z-index: 2; display: grid; gap: 6px; padding: 20px; }
.alt-industria__cuerpo b { font-size: 21px; }
.alt-industria__cuerpo span { font-size: 13.5px; color: #dfe9ec; }
.alt-industria__cuerpo i { margin-top: 6px; font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--naranja-claro); }

/* ---------- Notas ---------- */
.alt-notas { margin-top: 40px; }
.alt-nota { display: flex; flex-direction: column; background: #fff; border-radius: var(--radio); padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.alt-nota h3 { margin-top: 10px; font-size: 19px; }
.alt-nota > p:not(.kicker) { margin-top: 10px; font-size: 14.5px; color: var(--texto-suave); flex: 1; }

/* ---------- Contacto con formulario a la vista ---------- */
.alt-contacto { background: var(--petroleo); color: #fff; padding: 88px 0; }
.alt-contacto__fila { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.alt-contacto h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.alt-contacto__texto > p:not(.eyebrow) { margin-top: 14px; color: #d4e2e7; font-size: 17px; }
.alt-contacto__datos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: #d4e2e7; }
.alt-contacto__datos a { color: #fff; font-weight: 600; text-decoration: none; }
.alt-contacto__datos a:hover { text-decoration: underline; }
.alt-form { position: relative; background: #fff; color: var(--texto); border-radius: 18px; padding: 28px; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.alt-form .sr { width: 1px; height: 1px; padding: 0; border: 0; }
.alt-form__gracias { grid-column: 1 / -1; text-align: center; padding: 24px 8px; display: grid; gap: 10px; justify-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .alt-hero__fila, .alt-contacto__fila { grid-template-columns: 1fr; gap: 36px; }
  .alt-tarjeta { max-width: 460px; }
  .alt-pasos, .alt-industrias__grilla, .alt-cifras__fila { grid-template-columns: repeat(2, 1fr); }
  .alt-paso:nth-child(2) { border-right: 0; }
  .alt-paso:nth-child(-n+2) { border-bottom: 1px solid var(--borde); }
}
@media (max-width: 720px) {
  .alt-hero { padding: 56px 0 84px; }
  .alt-hero::before { background: rgba(10,43,55,.72); }
  .alt-hero__bajada { font-size: 16px; }
  .alt-tarjeta__cifra { font-size: 52px; }
  .alt-cinta { font-size: 13px; }
  .alt-cinta__rotulo { padding: 0 12px; font-size: 11px; }
  .alt-pasos, .alt-industrias__grilla { grid-template-columns: 1fr; }
  .alt-paso { border-right: 0; border-bottom: 1px solid var(--borde); padding: 24px 4px; }
  .alt-paso:last-child { border-bottom: 0; }
  .alt-cifras__fila { gap: 28px 16px; }
  .alt-cifras b { font-size: 44px; }
  .alt-industria { min-height: 260px; }
  .alt-contacto { padding: 64px 0; }
  .alt-form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-hero__video { display: none; }
  .alt-cinta__pista { animation: none; flex-wrap: wrap; width: auto; gap: 8px 32px; padding: 14px 16px; }
  .alt-cinta__pista li[aria-hidden="true"] { display: none; }
}

/* ---------- Qué hace la IA (dentro de la sección NaIA) ---------- */
.ia-capacidades { margin: 40px 0 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ia-cap { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); overflow: hidden; transition: transform .35s, border-color .3s, background .3s; }
.ia-cap::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(243,154,95,.28), transparent 70%); opacity: 0; transition: opacity .4s; }
.ia-cap:hover { transform: translateY(-4px); border-color: rgba(243,154,95,.55); }
.ia-cap:hover::after { opacity: 1; }
.ia-cap__icono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(243,154,95,.14); color: var(--naranja-claro); margin-bottom: 6px; }
.ia-cap__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ia-cap b { font-size: 17px; }
.ia-cap__texto { font-size: 14px; color: #c4d2d7; flex: 1; }
.ia-cap i { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--naranja-claro); }
@media (prefers-reduced-motion: no-preference) {
  /* El ícono "respira" en cascada, como si la IA estuviera trabajando */
  .ia-cap__icono { animation: ia-respira 3.2s ease-in-out infinite; }
  .ia-cap:nth-child(2) .ia-cap__icono { animation-delay: .8s; }
  .ia-cap:nth-child(3) .ia-cap__icono { animation-delay: 1.6s; }
  .ia-cap:nth-child(4) .ia-cap__icono { animation-delay: 2.4s; }
}
@keyframes ia-respira { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(243,154,95,0); } 35% { box-shadow: 0 0 0 8px rgba(243,154,95,.18); } }
.modulos article .link-flecha { margin-top: 12px; color: var(--naranja-claro); }

/* ---------- Entrada de la portada ---------- */
.anim-js .alt-hero__texto > *, .anim-js .alt-tarjeta { animation: entra .9s var(--ease-salto, ease) both; }
.anim-js .alt-hero h1 { animation-delay: .1s; }
.anim-js .alt-hero__bajada { animation-delay: .25s; }
.anim-js .alt-hero .hero__ctas { animation-delay: .4s; }
.anim-js .alt-tarjeta { animation-delay: .6s; }

/* ---------- Chat del Agente: escribe en vivo ---------- */
.chat__escribiendo { display: inline-flex; gap: 4px; padding: 12px 14px; background: #f2f5f7; border-radius: 14px 14px 14px 4px; justify-self: start; }
.chat__escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--petroleo); opacity: .35; animation: chat-punto 1s infinite; }
.chat__escribiendo i:nth-child(2) { animation-delay: .15s; }
.chat__escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punto { 30% { opacity: 1; transform: translateY(-3px); } }
.chat [data-chat-paso] { transition: opacity .4s, transform .4s; }
.chat [data-chat-paso].oculto { opacity: 0; transform: translateY(8px); }

@media (max-width: 1020px) { .ia-capacidades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .ia-capacidades { grid-template-columns: 1fr; } }

/* Flecha "seguí bajando" al pie de la portada */
.alt-hero__bajar { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.4); text-decoration: none; }
.alt-hero__bajar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alt-hero__bajar:hover { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: no-preference) { .alt-hero__bajar svg { animation: bajar 1.8s ease-in-out infinite; } }
@keyframes bajar { 50% { transform: translateY(4px); } }

/* ---------- Más movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Títulos palabra por palabra */
  .titulo-animado .palabra { display: inline-block; opacity: 0; transform: translateY(.55em); transition: opacity .6s, transform .7s var(--ease-salto, ease); transition-delay: calc(var(--i) * 55ms); }
  .titulo-animado.titulo-visto .palabra { opacity: 1; transform: none; }
  .anim-js .titulo-animado[data-aparece] { opacity: 1; transform: none; } /* el título ya se anima por palabras */
  .anim-js .alt-hero h1.titulo-animado { animation: none; }

  /* Método: línea que se dibuja sobre los 4 pasos y número que salta */
  .alt-pasos { position: relative; }
  .alt-pasos::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: linear-gradient(90deg, var(--naranja), var(--naranja-claro)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-salto, ease) .2s; }
  .alt-pasos--visto::before { transform: scaleX(1); }
  .alt-paso__num { display: inline-block; transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
  .alt-pasos--visto .alt-paso__num { animation: num-salta .6s cubic-bezier(.2,1.6,.4,1) both; }
  .alt-pasos--visto .alt-paso:nth-child(2) .alt-paso__num { animation-delay: .4s; }
  .alt-pasos--visto .alt-paso:nth-child(3) .alt-paso__num { animation-delay: .8s; }
  .alt-pasos--visto .alt-paso:nth-child(4) .alt-paso__num { animation-delay: 1.2s; }

  /* Fotos de servicios: entran con zoom */
  .servicios .tarjeta img { transform: scale(1.15); transition: transform 1.4s var(--ease-salto, ease); }
  .servicios .tarjeta--vista img { transform: scale(1); }
  .servicios .tarjeta--vista:hover img { transform: scale(1.05); }

  /* Industrias: profundidad al hacer scroll */
  .alt-industria img { inset: -30px 0; height: calc(100% + 60px); transform: translateY(var(--desplazo, 0)) scale(1.02); transition: transform .2s linear; }
  .alt-industria:hover img { transform: translateY(var(--desplazo, 0)) scale(1.08); }

  /* Secciones oscuras: brillo que se mueve despacio en el fondo */
  #naia, .alt-cifras, .alt-contacto, .alt-industrias { position: relative; isolation: isolate; overflow: hidden; }
  #naia::before, .alt-cifras::before, .alt-contacto::before, .alt-industrias::before {
    content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(243,154,95,.13), transparent 62%);
    top: -30vmax; left: -20vmax; animation: brillo-deriva 22s ease-in-out infinite alternate;
  }
  .alt-cifras::before { animation-duration: 16s; top: -45vmax; }
  .alt-contacto::before { left: auto; right: -25vmax; animation-direction: alternate-reverse; }
}
@keyframes num-salta { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes brillo-deriva { to { transform: translate(35vmax, 25vmax); } }

/* Servicios en 3 columnas: la sexta tarjeta invita al diagnóstico */
.tarjeta--invita { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px; text-decoration: none; color: #fff; background: linear-gradient(150deg, var(--petroleo), var(--oscuro)); }
.tarjeta--invita .kicker { color: var(--naranja-claro); }
.tarjeta--invita b { font-size: 24px; line-height: 1.15; }
.tarjeta--invita span:not(.kicker) { font-size: 14.5px; color: #c4d2d7; }
.tarjeta--invita i { font-style: normal; font-weight: 700; color: var(--naranja-claro); }
@media (max-width: 1020px) { .servicios.grilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .servicios.grilla--3 { grid-template-columns: 1fr; } }
.alt-notas__todas { margin-top: 28px; }