/* ============================================================================
   A1S — HOME v6 "Cinematic Red" · texturas, idle del guarda, slots, glow
   ========================================================================== */

/* ── Palabra destacada del hero: shimmer cálido + glow ─────────────── */
.a1s-word-hi {
  display: inline-block;
  background: linear-gradient(102deg, #fff 0%, #fff 32%, #FFC9C1 44%, #FF8D7E 50%, #FFC9C1 56%, #fff 68%, #fff 100%);
  background-size: 240% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,110,90,.5)) drop-shadow(0 4px 14px rgba(20,3,2,.45));
  animation: a1s-word-shine 5.2s var(--ease-standard) infinite;
}
@keyframes a1s-word-shine { 0%, 18% { background-position: 120% 0; } 58%, 100% { background-position: -120% 0; } }
html.a1s-static .a1s-word-hi { animation: none; background-position: 50% 0; }

/* ── Steps: hover con vida ─────────────────────────────────────────── */
.a1s-step6 { position: relative; overflow: hidden; transition: transform .35s var(--ease-out), background .35s, border-color .35s, box-shadow .35s; }
.a1s-step6::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--a1s-red), transparent 80%); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out); }
.a1s-step6:hover { transform: translateY(-8px); background: rgba(192,35,27,.10) !important;
  border-color: rgba(255,82,66,.45) !important; box-shadow: 0 32px 60px -22px rgba(192,35,27,.45); }
.a1s-step6:hover::before { transform: scaleX(1); }
.a1s-step6 .stepnum { transition: transform .35s var(--ease-out), color .3s; transform-origin: left top; }
.a1s-step6:hover .stepnum { transform: scale(1.14); color: #FF5242 !important; }

/* ── HABLEMOS: barrido de luz + glow volumétrico ───────────────────── */
.a1s-hablemos {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .9;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #FF5242 50%, #fff 62%, #fff 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: a1s-hablemos-sweep 4.6s var(--ease-standard) infinite;
}
.a1s-hablemos::before {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1;
  color: rgba(255,59,48,.5); filter: blur(34px);
}
.a1s-hablemos::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -2;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,82,66,.4);
  transform: translate(7px, 7px);
}
@keyframes a1s-hablemos-sweep { 0%, 14% { background-position: 100% 0; } 60%, 100% { background-position: -100% 0; } }
html.a1s-static .a1s-hablemos { animation: none; background-position: 50% 0; }

/* ── Sellos de certificación (carrusel) ────────────────────────────── */
.a1s-certseal { display: inline-flex; align-items: center; gap: 16px; padding: 18px 30px 18px 18px;
  border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10);
  white-space: nowrap; transition: border-color .3s, background .3s, transform .3s var(--ease-out); }
.a1s-certseal:hover { border-color: rgba(255,82,66,.45); background: rgba(192,35,27,.10); transform: translateY(-3px); }
.a1s-certseal .seal-mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 0 22px rgba(192,35,27,.28); flex: none; overflow: hidden; }
.a1s-certseal .seal-mark img { width: 72%; height: 72%; object-fit: contain; display: block; }
.a1s-certseal .seal-name { font-weight: 700; font-size: 1.0625rem; color: #fff; letter-spacing: -.01em; }
.a1s-certseal .seal-sub { font-size: .78rem; color: var(--dark-muted); margin-top: 2px; letter-spacing: .04em; }
.a1s-cert-marquee .a1s-marquee-track { gap: 22px; animation-duration: 32s; }
/* Espacio vertical para que el lift del hover no se recorte con overflow:hidden */
.a1s-cert-marquee { padding-block: 8px; margin-block: -8px; }

/* ── Texturas reutilizables ──────────────────────────────────────────── */
.a1s-noise::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.a1s-gridtex { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 54px); }
.a1s-diag { position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(0,0,0,.10) 90px 92px); }

/* ── Idle del guarda (solo el guarda; el carro permanece quieto) ────────
   Dos capas: sway (peso, 11s) + breathe (respiración, 6.5s). Casi
   imperceptible: ±0.3deg, 2px, escala 1.006. Origen en los pies.        */
@keyframes a1s-idle-sway {
  0%, 100% { transform: rotate(.25deg) translateX(0); }
  50%      { transform: rotate(-.3deg) translateX(-2.5px); }
}
@keyframes a1s-idle-breathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  46%      { transform: scaleY(1.007) translateY(-2.5px); }
}
.a1s-idle-sway   { animation: a1s-idle-sway 11s ease-in-out infinite; transform-origin: 50% 96%; will-change: transform; }
.a1s-idle-breathe{ animation: a1s-idle-breathe 6.5s ease-in-out infinite; transform-origin: 50% 96%; will-change: transform; }
html.a1s-static .a1s-idle-sway, html.a1s-static .a1s-idle-breathe,
html.a1s-no-idle .a1s-idle-sway, html.a1s-no-idle .a1s-idle-breathe { animation: none; }

/* ── Mapa de cobertura (imagen neón + pines de regional + radar) ──────── */
.a1s-map-wrap { position: relative; overflow: hidden; }
.a1s-map-wrap::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px); }
.a1s-map-img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.a1s-map-radar {
  position: absolute; left: 50%; top: 50%; width: 175%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); transform-origin: center; pointer-events: none; z-index: 2;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255,72,56,.30) 0deg, rgba(255,72,56,.08) 16deg, transparent 44deg, transparent 360deg);
  mix-blend-mode: screen; animation: a1s-radarspin 5.5s linear infinite;
}
@keyframes a1s-radarspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
html.a1s-static .a1s-map-radar { animation: none; }

.a1s-mappin { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.a1s-mappin-dot { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%;
  background: var(--a1s-red); box-shadow: 0 0 0 3px rgba(192,35,27,.25), 0 0 12px var(--a1s-red-glow); }
.a1s-mappin-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.a1s-mappin-ping { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%;
  border: 1.5px solid var(--a1s-red); opacity: .5; transform-origin: center; animation: a1s-ping 2.4s ease-out infinite; }
html.a1s-static .a1s-mappin-ping { animation: none; }
.a1s-mappin-label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--font-sans); line-height: 1.05; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.a1s-mappin-label b { display: block; color: #fff; font-weight: 700; font-size: clamp(.85rem, 1.5vw, 1.05rem); letter-spacing: -.01em; }
.a1s-mappin-label span { display: block; color: rgba(255,255,255,.62); font-weight: 500; font-size: clamp(.7rem, 1.1vw, .82rem); margin-top: 1px; }
/* en el mapa interactivo (cobertura) la regional activa resalta */
.a1s-mappin.is-int { cursor: pointer; }
.a1s-mappin.is-int .a1s-mappin-dot { transition: transform .2s; }
.a1s-mappin.is-active .a1s-mappin-dot { transform: scale(1.45); }
.a1s-mappin.is-int:not(.is-active) .a1s-mappin-label b { color: rgba(255,255,255,.72); }

/* ── Carrusel de clientes (logos reales) ──────────────────────────────── */
.a1s-clientlogo-wrap { display: inline-flex; align-items: center; height: 64px; }
.a1s-clientlogo { width: auto; max-width: 158px; height: 38px; object-fit: contain; display: block; }
.a1s-clientlogo.mono { filter: brightness(0) saturate(0); opacity: .46; transition: opacity .3s var(--ease-out), filter .3s var(--ease-out); }
.a1s-clientlogo.mono:hover { filter: none; opacity: 1; }
.a1s-clientlogo.nat { opacity: .82; transition: opacity .3s var(--ease-out); }
.a1s-clientlogo.nat:hover { opacity: 1; }
.a1s-clientlogo.is-sq { height: 58px; }
.a1s-clientlogo.is-sm { height: 28px; }
@media (prefers-reduced-motion: reduce) { .a1s-idle-sway, .a1s-idle-breathe { animation: none; } }

/* ── Drop-zones (image-slot) ────────────────────────────────────────────
   Estado vacío: etiqueta HUD discreta abajo-izquierda, contorno fino.
   Estado lleno: invisible (la imagen manda).                            */
image-slot { color: rgba(255,255,255,.6); }
image-slot::part(ring) { border: 1px dashed rgba(255,255,255,.28); border-radius: 14px; }
image-slot::part(empty) {
  align-items: flex-start; justify-content: flex-end; text-align: left;
  padding: 14px 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  background: linear-gradient(to top, rgba(0,0,0,.34), transparent 46%);
  border-radius: 14px;
}
image-slot[data-filled]::part(empty) { background: none; }
image-slot.slot-ghost:not([data-filled]) { opacity: .8; transition: opacity .25s; }
image-slot.slot-ghost:not([data-filled]):hover, image-slot.slot-ghost[data-over] { opacity: 1; }

/* Capas del hero: si el usuario soltó CUALQUIER capa, ocultar el fallback */
.a1s-hero-figure .hero-fallback { transition: opacity .4s; }
.a1s-hero-figure:has(image-slot[data-filled]) .hero-fallback { opacity: 0; visibility: hidden; }
/* Capas vacías sobre el hero: muy discretas hasta hover/drag */
.a1s-hero-figure image-slot:not([data-filled]) { opacity: 0; }
.a1s-hero-figure:hover image-slot:not([data-filled]),
.a1s-hero-figure image-slot[data-over]:not([data-filled]) { opacity: .85; }
/* En cuanto una capa del hero tiene imagen, mostrar también la otra zona */
.a1s-hero-figure:has(image-slot[data-filled]) image-slot:not([data-filled]) { opacity: .85; }

/* Ilustración de respaldo en paneles de servicio: se oculta al llenar slot */
.a1s-svc-media .svc-illus { transition: opacity .35s; }
.a1s-svc-media:has(image-slot[data-filled]) .svc-illus { opacity: 0; }

/* ── Tarjeta premium con glow (servicios, certificaciones) ─────────────── */
.a1s-glowcard {
  position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(165deg, #17080699, #0905047a 55%), rgba(10,6,5,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.a1s-glowcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(80% 50% at 50% -10%, rgba(255,90,70,.16), transparent 60%); }

/* Pills de tab sobre rojo */
.a1s-tab6 {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 19px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem; white-space: nowrap;
  background: rgba(0,0,0,.22); color: rgba(255,255,255,.78);
  transition: all .25s var(--ease-out); backdrop-filter: blur(4px);
}
.a1s-tab6:hover { background: rgba(0,0,0,.38); color: #fff; transform: translateY(-1px); }
.a1s-tab6.on { background: #fff; color: var(--a1s-red-700); border-color: #fff;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.5); }

/* ── Botón "beacon": CTA que respira luz ───────────────────────────────── */
.a1s-beacon { position: relative; }
.a1s-beacon::before { content: ''; position: absolute; inset: -3px; border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 50%, rgba(255,70,55,.55), transparent 70%);
  filter: blur(10px); opacity: .65; z-index: -1; animation: a1s-beacon 3.2s ease-in-out infinite; }
@keyframes a1s-beacon { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
html.a1s-static .a1s-beacon::before { animation: none; }

/* ── Titular gigante delineado (CTA final) ─────────────────────────────── */
.a1s-outline-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .92; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,82,66,.55);
  transition: color .5s var(--ease-out), -webkit-text-stroke-color .5s;
}
.a1s-outline-title em { font-style: normal; color: #fff; -webkit-text-stroke: 0; }
.a1s-cta-final:hover .a1s-outline-title { color: rgba(255,82,66,.14); }

/* ── Cierre Clientes | Talento v6 ──────────────────────────────────────── */
.a1s-portal { position: relative; overflow: hidden; border: none; cursor: pointer;
  text-align: left; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(420px, 46vw, 640px); padding: clamp(2rem,4vw,4.5rem);
  transition: filter .35s var(--ease-standard); }
.a1s-portal .portal-img { transition: transform .8s var(--ease-out), opacity .45s; }
.a1s-portal:hover .portal-img { transform: scale(1.05) translateY(-6px); opacity: 1; }
.a1s-portal .portal-cta { display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px; padding: 15px 28px; border-radius: 999px; font-weight: 700;
  font-size: 1rem; width: fit-content; transition: gap .3s var(--ease-out), transform .3s, box-shadow .3s; }
.a1s-portal:hover .portal-cta { gap: 16px; transform: translateY(-2px); }
.a1s-portal .portal-kicker { overflow: hidden; }
.a1s-portal .portal-kicker > span { display: inline-block; transition: transform .45s var(--ease-out); }
.a1s-portal:hover .portal-kicker > span { transform: translateX(6px); }

/* ── Banda de certificaciones ──────────────────────────────────────────── */
.a1s-certcard { display: flex; gap: 18px; align-items: flex-start; padding: clamp(1.4rem,2.4vw,2rem);
  border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09);
  transition: transform .3s var(--ease-out), background .3s, border-color .3s; }
.a1s-certcard:hover { transform: translateY(-4px); background: rgba(255,255,255,.06);
  border-color: rgba(255,82,66,.35); }

/* ── Cursor "mira de precisión" ────────────────────────────────────────── */
html.a1s-aim-on, html.a1s-aim-on * { cursor: none !important; }
html.a1s-aim-on input, html.a1s-aim-on textarea, html.a1s-aim-on select { cursor: text !important; }
#a1s-aim-dot {
  position: fixed; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--a1s-red-glow, #FF3B30); pointer-events: none;
  z-index: 2147483646; opacity: 0; box-shadow: 0 0 10px rgba(255,59,48,.8);
}
#a1s-aim-ring {
  position: fixed; left: 0; top: 0; width: 36px; height: 36px;
  border: 1.5px solid rgba(255,82,66,.85); border-radius: 50%;
  pointer-events: none; z-index: 2147483645; opacity: 0;
  transition: border-color .25s, border-radius .28s var(--ease-out), opacity .2s;
}
#a1s-aim-ring .tick { position: absolute; width: 9px; height: 9px; opacity: 0; transition: opacity .22s; }
#a1s-aim-ring .tick::before, #a1s-aim-ring .tick::after { content: ''; position: absolute; background: var(--a1s-red-glow, #FF3B30); }
#a1s-aim-ring .tick::before { width: 9px; height: 1.5px; } #a1s-aim-ring .tick::after { width: 1.5px; height: 9px; }
#a1s-aim-ring .tick.tl { left: -2px; top: -2px; } #a1s-aim-ring .tick.tl::before { left: 0; top: 0; } #a1s-aim-ring .tick.tl::after { left: 0; top: 0; }
#a1s-aim-ring .tick.tr { right: -2px; top: -2px; } #a1s-aim-ring .tick.tr::before { right: 0; top: 0; } #a1s-aim-ring .tick.tr::after { right: 0; top: 0; }
#a1s-aim-ring .tick.bl { left: -2px; bottom: -2px; } #a1s-aim-ring .tick.bl::before { left: 0; bottom: 0; } #a1s-aim-ring .tick.bl::after { left: 0; bottom: 0; }
#a1s-aim-ring .tick.br { right: -2px; bottom: -2px; } #a1s-aim-ring .tick.br::before { right: 0; bottom: 0; } #a1s-aim-ring .tick.br::after { right: 0; bottom: 0; }
#a1s-aim-ring.lock { border-color: rgba(255,82,66,.30); }
#a1s-aim-ring.lock .tick { opacity: 1; }
#a1s-aim-ring.pulse { animation: a1s-aim-pulse .4s var(--ease-out); }
@keyframes a1s-aim-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.5); } 100% { box-shadow: 0 0 0 18px rgba(255,59,48,0); } }

/* ── Metodología "Enfoque integral" (flujo nítido, vectorial) ──────────── */
.a1s-method { position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2vw, 30px); margin-top: clamp(44px, 6vw, 64px); }
.a1s-method::before { content: ''; position: absolute; top: 38px; left: 9%; right: 9%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--a1s-red) 15%, transparent), var(--a1s-red) 50%, color-mix(in srgb, var(--a1s-red) 15%, transparent)); opacity: .55; }
.a1s-method-step { position: relative; z-index: 1; text-align: center; }
.a1s-method-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  background: radial-gradient(62% 62% at 50% 32%, rgba(255,82,66,.24), transparent 72%), #15100F;
  border: 1.5px solid rgba(255,82,66,.52); color: #fff;
  box-shadow: 0 0 30px rgba(192,35,27,.30), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s; }
.a1s-method-step:hover .a1s-method-ic { transform: translateY(-6px) scale(1.05);
  border-color: var(--a1s-red); box-shadow: 0 18px 44px -10px rgba(192,35,27,.6); }
.a1s-method-num { display: block; margin-top: 18px; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--a1s-red-400); }
.a1s-method-t { margin: 8px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.01em; color: #fff; }
.a1s-method-d { margin: 9px auto 0; max-width: 24ch; color: var(--dark-muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 1024px) { .a1s-method { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .a1s-method::before { display: none; } .a1s-method-d { max-width: 30ch; } }
@media (max-width: 520px) { .a1s-method { grid-template-columns: 1fr; } }

/* ── Reveal on-scroll (solo transform) ─────────────────────────────────── */
@keyframes a1s-rise-soft { from { transform: translateY(26px); } to { transform: none; } }

/* ── Stats hero v6 ─────────────────────────────────────────────────────── */
.a1s-stats6 { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(1.6rem,4vw,4rem); width: fit-content; }
@media (max-width: 860px) { .a1s-stats6 { grid-template-columns: repeat(2, 1fr); width: 100%; } }

/* Hero: 2×2 compacto, anclado a la izquierda para que el carro no tape las cifras */
.a1s-hero-stats {
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: clamp(1.6rem, 3vw, 3rem);
  row-gap: clamp(1.4rem, 2.6vw, 2.1rem);
  max-width: min(390px, 36%);
  position: relative; z-index: 8;
}
@media (max-width: 1100px) { .a1s-hero-stats { max-width: 48%; } }
@media (max-width: 860px)  { .a1s-hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; } }

/* ── Responsive home v6 ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .a1s-hero6-figure { right: -26% !important; height: min(94%, 820px) !important; }
}
@media (max-width: 980px) {
  .a1s-hero6-figure { right: -42% !important; height: min(84%, 720px) !important; opacity: .94; }
}
@media (max-width: 860px) {
  .a1s-hero6-figure { position: relative !important; right: auto !important; height: 56vh !important; margin: 26px auto 0 !important; }
  .a1s-svc-grid { grid-template-columns: 1fr !important; }
  .a1s-portal-grid { grid-template-columns: 1fr !important; }
  .a1s-cert-grid { grid-template-columns: 1fr !important; }
  .a1s-about-grid { grid-template-columns: 1fr !important; }
}
