/* Hero del Home · sinapsis modular (aprobado el 15-10-2026; origen: prueba-hero-modular).
   Fondo navy con profundidad violeta sutil, contenido centrado y módulos de la marca (punto u y
   cápsulas 2u/3u/5u) que se agrupan y se abren una sola vez al cargar (js/hero-modular.js).
   El contenido es visible por defecto; la animación solo lo oculta mientras se reproduce. */

.hm { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:110px 24px 72px; overflow:hidden; color:#fff; font-family:'Poppins',sans-serif; letter-spacing:0;
  /* atmósfera: navy más claro arriba y profundo abajo; una luz violeta difusa detrás del título dirige la mirada */
  background:
    radial-gradient(ellipse 46% 30% at 50% 50%, rgba(109,74,190,.42) 0%, rgba(109,74,190,.16) 45%, rgba(109,74,190,0) 75%),
    radial-gradient(ellipse 90% 60% at 50% 52%, rgba(192,176,244,.07) 0%, rgba(192,176,244,0) 70%),
    linear-gradient(180deg, #343858 0%, #2B2E48 28%, #25283D 55%, #1B1D2E 100%); }

/* capa decorativa: módulos como elementos HTML para animar solo transform y opacity (compositor) */
.hm-layer { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hm-m { position:absolute; display:block; border-radius:999px; }
.hm-m.w { background:#FFFFFF; }
.hm-m.l { background:#C0B0F4; }
.hm.is-playing .hm-m { will-change:transform, opacity; }      /* solo durante la animación */

/* el bloque de contenido ocupa su espacio desde el primer momento (solo cambia la opacidad) */
.hm-pending .hm-content { opacity:0; }                        /* solo mientras js/hero-modular.js decide (ver <head>) */
.hm-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:1120px; }
.hm-title { font-family:'Poppins',sans-serif; font-weight:500; font-size:clamp(36px, 4.6vw, 64px); line-height:1.12; letter-spacing:0; color:#FFFFFF; margin:0 0 26px; }
.hm-l { display:block; white-space:nowrap; }                   /* escritorio y tablet: exactamente dos líneas */
.hm-lead { font-size:clamp(16px, 1.3vw, 18px); line-height:1.7; font-weight:400; color:hsl(0 0% 100% / .82); letter-spacing:0; margin:0 0 40px; max-width:680px; text-wrap:balance; }   /* escritorio: dos líneas */

@media (max-width:700px){
  .hm-l { display:inline; white-space:normal; }
  /* móvil: «Comunicación Digital» siempre junta (mide 10,93 × el cuerpo en Poppins 500); el cuerpo se ajusta al ancho
     disponible con un 4 % de margen para que nunca desborde: 3 líneas equilibradas de 320 a 700 px */
  .hm-title { font-size:min(clamp(30px, 8.6vw, 38px), calc((100vw - 48px) / 11.4)); text-wrap:balance; }
  .hm-nw { white-space:nowrap; }
  /* móvil: la luz violeta sube y se ensancha para quedar detrás del título */
  .hm { background:
    radial-gradient(ellipse 85% 26% at 50% 40%, rgba(109,74,190,.42) 0%, rgba(109,74,190,.16) 45%, rgba(109,74,190,0) 75%),
    linear-gradient(180deg, #343858 0%, #2B2E48 28%, #25283D 55%, #1B1D2E 100%); }
}

/* botón: degradado de los botones del Home y símbolo de módulos que se convierte en flecha */
.hm-btn { display:inline-flex; align-items:center; gap:12px; padding:16px 26px 16px 30px; border-radius:999px; background:linear-gradient(90deg, hsl(263 45% 52%), hsl(232 24% 19%)); box-shadow:inset 0 0 0 1px hsl(252 74% 82% / .35); color:#FFFFFF; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; line-height:1.2; letter-spacing:0; text-decoration:none; transition:filter .2s ease, transform .16s cubic-bezier(.23,1,.32,1); -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.hm-btn:focus-visible { outline:2px solid #FFFFFF; outline-offset:3px; filter:brightness(1.1); }
.hm-btn:active { transform:scale(.97); }                        /* respuesta inmediata al pulsar */
.hm-btn-i { flex:0 0 auto; width:26px; height:14px; overflow:visible; }
.hm-btn-i .i-dot, .hm-btn-i .i-cap { fill:#FFFFFF; transition:transform .24s cubic-bezier(.23,1,.32,1), opacity .18s ease; transform-box:fill-box; }
.hm-btn-i .i-cap { transform-origin:50% 50%; }
.hm-btn-i .i-head { fill:none; stroke:#FFFFFF; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:14; stroke-dashoffset:14; opacity:0; transition:stroke-dashoffset .24s cubic-bezier(.23,1,.32,1) .03s, opacity .12s ease; }
/* flecha: el punto entra en la cápsula, la cápsula se afina en un trazo y aparece la punta.
   Con foco de teclado siempre; con el cursor solo en dispositivos con puntero fino (evita el hover pegado en táctil). */
.hm-btn:focus-visible .i-dot { transform:translateX(12px); opacity:0; }
.hm-btn:focus-visible .i-cap { transform:translateX(-4px) scaleX(1.25) scaleY(.34); }
.hm-btn:focus-visible .i-head { stroke-dashoffset:0; opacity:1; }
@media (hover:hover) and (pointer:fine){
  .hm-btn:hover { filter:brightness(1.1); }
  .hm-btn:hover .i-dot { transform:translateX(12px); opacity:0; }
  .hm-btn:hover .i-cap { transform:translateX(-4px) scaleX(1.25) scaleY(.34); }
  .hm-btn:hover .i-head { stroke-dashoffset:0; opacity:1; }
}
/* pantallas táctiles: flecha clara desde el principio; un solo toque abre el enlace */
@media (hover:none){
  .hm-btn .i-dot { transform:translateX(12px); opacity:0; }
  .hm-btn .i-cap { transform:translateX(-4px) scaleX(1.25) scaleY(.34); }
  .hm-btn .i-head { stroke-dashoffset:0; opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .hm-btn, .hm-btn-i * { transition:none !important; } .hm-btn:active { transform:none; } }


/* impresión: todo el contenido visible, sin depender de la animación */
@media print {
  .hm { min-height:auto; padding:40px 0; background:#25283D; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .hm-content { opacity:1 !important; }
}

/* Sin JavaScript la plantilla del Home se muestra sin procesar (la etiqueta del componente solo existe en ese caso:
   con JavaScript el runtime la sustituye por #dc-root). Sus capas fijas —vista de agradecimiento, ventanas, avisos—
   tapaban la página y el botón del hero. Se ocultan solo en ese estado. */
x-dc [style*="position:fixed"], x-dc [style*="position: fixed"], x-dc .tst-modal-ov { display:none !important; }