/* alfil · v7 (01-nov-2026): estructura tipo Globant. Portada con tres destacados que rotan, banda con cifras y cinta
   de nombres, sección de plataforma con video, áreas en filas con flecha, mosaico de casos. Mismas reglas de marca. */

/* ---------- portada: tres destacados ---------- */
.portada { position: relative; height: max(calc(100svh - 72px), 640px); overflow: hidden; background: var(--tinta); }
.captura .portada { height: 820px; }
.portada__pista { position: absolute; inset: 0; }
.portada__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 800ms var(--suave), visibility 0s 800ms; }
.portada__slide.activa { opacity: 1; visibility: visible; transition: opacity 800ms var(--suave); z-index: 1; }
.portada .heroe { min-height: 0; }
.portada .heroe__ct { height: 100%; }
.portada .heroe__in, .captura .portada .heroe__in { min-height: 0; height: 100%; padding: 40px 0 clamp(56px, 10vh, 96px); }
.portada .heroe__txt .d-hero { max-width: 9.5ch; }

.slide { display: block; }
.slide--clara { background: var(--hueso); color: var(--tinta); }
.slide__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.slide__fondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__fondo--der { left: auto; width: 62%; }
.slide__fondo--der img { object-position: 75% 50%; }
.slide--video .slide__fondo { object-position: 70% 50%; }
.slide__in { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding: 40px 0 clamp(56px, 10vh, 96px); }
.slide__txt { display: grid; gap: clamp(18px, 3vh, 30px); max-width: 44%; }
.slide__txt .d-hero { font-size: clamp(44px, 6.6vw, 104px); }
.slide--clara .slide__txt .lead { color: var(--sec); }
.slide--video .slide__txt .lead { color: rgba(244, 241, 236, .82); }
.slide--video .btn { background: var(--hueso); color: var(--tinta); }
.slide--video .btn:hover { background: var(--naranja); }

/* indicadores: tres barras, la activa se llena en 8 s */
.portada__ctrl { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 3; display: flex; gap: 10px; }
.ind { width: 72px; height: 20px; display: grid; align-items: center; cursor: pointer; }
.ind::before { content: ""; grid-area: 1 / 1; height: 2px; background: rgba(244, 241, 236, .28); }
.ind i { grid-area: 1 / 1; display: block; height: 2px; width: 0; background: var(--hueso); }
.ind.activa i { width: 100%; transition: width 8s linear; }
.portada.clara .ind::before { background: rgba(20, 20, 20, .22); }
.portada.clara .ind i { background: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .ind.activa i { transition: none; } }
@media (max-width: 880px) {
  .portada .heroe__in { align-items: start; padding: 32px 0 44vh; }
  .slide__fondo--der { width: 100%; top: auto; height: 46%; }
  .slide__fondo--der img { object-position: 50% 70%; }
  .slide__in { align-items: flex-start; padding: 32px 0 44vh; }
  .slide__txt { max-width: 100%; }
  .slide--video .slide__fondo { object-position: 60% 80%; }
}

/* ---------- banda: frase, cifras y cinta ---------- */
.banda { background: var(--hueso); color: var(--tinta); }
.banda__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 64px; align-items: center; padding: clamp(48px, 7vh, 88px) 0 clamp(36px, 5vh, 56px); }
.banda__txt { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; color: var(--sec); text-wrap: pretty; }
.banda__txt strong { color: var(--tinta); font-weight: 600; }
.banda__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--filete); }
.banda__cifras li { display: grid; gap: 6px; padding-top: 16px; }
.banda__cifras .d-cifra-chica { font-size: clamp(34px, 3.2vw, 52px); }
.cinta { overflow: hidden; border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); padding: 22px 0; }
.cinta__in { display: flex; gap: 56px; width: max-content; animation: cinta 46s linear infinite; }
.cinta:hover .cinta__in { animation-play-state: paused; }
.cinta span { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.012em; color: var(--sec); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.cinta span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--filete); }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta__in { animation: none; flex-wrap: wrap; width: auto; gap: 16px 40px; } .cinta span { gap: 40px; } }
@media (max-width: 880px) { .banda__in { grid-template-columns: 1fr; } .banda__cifras { grid-template-columns: 1fr 1fr; } }

/* ---------- plataforma ---------- */
.plataforma .enc { align-items: start; margin-bottom: clamp(32px, 5vh, 56px); }
.rasgos { display: grid; border-top: 1px solid var(--filete); }
.rasgos li { padding: 18px 0 20px; border-bottom: 1px solid var(--filete); display: grid; gap: 6px; }
.rasgos h3 { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.012em; }
.rasgos p { font-size: 16px; color: var(--sec); line-height: 1.45; max-width: 36em; }
.marco { margin: 0; display: grid; gap: 12px; }
.marco .med { border: 1px solid var(--filete); }
.marco figcaption { color: var(--sec); }

/* ---------- áreas en filas con flecha ---------- */
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; border-top: 1px solid var(--filete); margin-bottom: clamp(28px, 4vh, 40px); }
.area { width: 100%; display: grid; grid-template-columns: 1fr 32px; grid-template-areas: "t f" "d f"; gap: 4px 16px; align-items: center; text-align: left; padding: 20px 0; border-bottom: 1px solid var(--filete); }
.area__t { grid-area: t; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.012em; }
.area__d { grid-area: d; font-size: 15px; color: var(--sec); line-height: 1.45; }
.area__f { grid-area: f; font-family: var(--display); font-size: 22px; transition: transform var(--t-medio) var(--sube), color var(--t-rapido); justify-self: end; }
.area:hover .area__f, .area.activa .area__f { transform: translateX(6px); color: var(--naranja); }
.area.activa .area__t { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 880px) { .areas { grid-template-columns: 1fr; } }

/* ---------- cuatro tarjetas en grilla (soluciones) ---------- */
.cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cuatro .tarjeta { border-top: 1px solid var(--filete); padding-top: 18px; }
.tarjeta__tags { font-size: 13px; line-height: 1.5; color: var(--sec); }
@media (max-width: 1080px) { .cuatro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cuatro { grid-template-columns: 1fr; } }

/* ---------- mosaico de casos ---------- */
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.mos { display: grid; gap: 12px; align-content: start; }
.mos--7 { grid-column: span 7; } .mos--5 { grid-column: span 5; } .mos--4 { grid-column: span 4; }
.mos .med { width: 100%; }
.mos__t { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.015em; line-height: 1.12; text-wrap: pretty; }
.mos__t--chico { font-size: clamp(19px, 1.5vw, 23px); }
.mos--tinta, .mos--borde { padding: 26px 28px 30px; min-height: 320px; align-content: space-between; }
.mos--tinta { background: var(--tinta); color: var(--hueso); }
.mos--tinta .cap { color: rgba(244, 241, 236, .7); }
.mos--borde { border: 1px solid var(--filete); }
.mos__cifra { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3.4vw, 54px); letter-spacing: -0.02em; line-height: 1; }
.mos__cifra b { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 7.5vw, 120px); letter-spacing: -0.03em; color: var(--naranja); display: block; font-variant-numeric: tabular-nums; }
.mos--borde .mos__cifra b { color: var(--tinta); }
.mos__d { font-size: 16px; line-height: 1.45; color: inherit; opacity: .85; max-width: 28em; }
@media (max-width: 880px) { .mos--7, .mos--5, .mos--4 { grid-column: span 12; } .mos--tinta, .mos--borde { min-height: 0; gap: 18px; } }

/* ---------- ajustes de tema para el nuevo orden de secciones ---------- */
.v7 .como { background: var(--tinta); color: var(--hueso); }
.v7 .paso::before { background: var(--hueso); }
.v7 .paso:nth-child(5)::before { background: var(--naranja); }
.v7 .campo input::placeholder, .v7 .campo textarea::placeholder { color: var(--sec); opacity: .7; }
.v7 .equipo-v6 .socio-v6 .med { background: var(--hueso); }

/* los chips de filtro quedan para el script; el filtro visible son las filas de áreas */
.v7 .filtros { display: none; }
.filtro-todas { font-size: 15px; }
.carril__pie .filtro-todas { margin-right: 8px; }
.med .provisoria { position: absolute; left: 14px; bottom: 14px; font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .02em; padding: 5px 9px; background: var(--tinta); color: var(--hueso); opacity: .85; }