/* =====================================================================
   inicio-intro.css: animación de entrada de la portada (index.html).
   Solo se animan transform, opacity y filter: va fluido y no recoloca nada.

   Línea de tiempo (milisegundos desde que carga la página):
     0–700      pantalla de carga: sube la marea ámbar y el logo crece barra a barra
     700–1180   la barra ámbar brilla y aparece la palabra "Sumora"
     1000–1650  la marea baja, el logo se eleva y la pantalla de carga se retira
     1250 →     --inicio-entrada: cabecera, titular, texto y móvil entran en cascada

   Para quitar la pantalla de carga: borra su bloque en index.html y pon
   --inicio-entrada:0ms aquí abajo.
   ===================================================================== */
:root{--inicio-entrada:1250ms}

@keyframes crece-desde-abajo{from{transform:scaleY(0)}to{transform:none}}
@keyframes destello-ambar{0%{filter:drop-shadow(0 0 0 rgba(240,180,87,0))}45%{filter:drop-shadow(0 0 7px rgba(240,180,87,.85))}100%{filter:drop-shadow(0 0 0 rgba(240,180,87,0))}}
@keyframes entra-subiendo{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes entra-bajando{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes sale-de-mascara{from{transform:translateY(108%)}to{transform:none}}
@keyframes entra-con-profundidad{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes se-asienta{from{transform:scale(1.08)}to{transform:none}}

/* ---------- Retraso de cada pieza (se suma a --inicio-entrada) ---------- */
.intro-cabecera{--retraso:0ms}
.cabecera-inicio .logo-isotipo .barra-1{--retraso:120ms}
.cabecera-inicio .logo-isotipo .barra-2{--retraso:200ms}
.cabecera-inicio .logo-isotipo .barra-3{--retraso:280ms}
.intro-logo-texto{--retraso:340ms}
.intro-linea-1{--retraso:220ms}
.intro-linea-2{--retraso:330ms}
.intro-movil{--retraso:300ms}
.intro-subtitulo{--retraso:560ms}
.intro-botones{--retraso:680ms}

/* ---------- Tipos de entrada ---------- */
/* Barras del logo de la cabecera: crecen desde la base; la ámbar remata con un destello. */
.cabecera-inicio .logo-isotipo path{transform-box:fill-box;transform-origin:50% 100%;animation:crece-desde-abajo 720ms var(--curva-expo) both}
.cabecera-inicio .logo-isotipo .barra-3{animation:crece-desde-abajo 720ms var(--curva-expo) both,destello-ambar 1100ms ease-out both;
  animation-delay:calc(var(--inicio-entrada) + var(--retraso)),calc(var(--inicio-entrada) + var(--retraso) + 420ms)}

/* Revelado con máscara: el contenido sube desde debajo de su propia caja. */
.intro-mascara{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.intro-mascara>*{display:inline-block;animation:sale-de-mascara 900ms var(--curva-expo) both}
.intro-linea{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.intro-linea>span{display:block;animation:sale-de-mascara 1000ms var(--curva-expo) both}

.intro-sube{animation:entra-subiendo 900ms var(--curva-salida) both}
.intro-baja{animation:entra-bajando 900ms var(--curva-salida) both}
.intro-profundidad{animation:entra-con-profundidad 1300ms var(--curva-expo) both}
.intro-profundidad img{animation:se-asienta 1800ms var(--curva-salida) both}

/* Retraso común. Va después de los atajos "animation", que lo reinician. */
.intro-cabecera,.cabecera-inicio .logo-isotipo .barra-1,.cabecera-inicio .logo-isotipo .barra-2,
.intro-mascara>*,.intro-linea>span,.intro-sube,.intro-profundidad,.intro-profundidad img{
  animation-delay:calc(var(--inicio-entrada) + var(--retraso,0ms))}

/* ---------- Pantalla de carga ----------
   Marea ámbar + isotipo que emerge. El logo respeta el manual de marca:
   barras de trazo redondo, ámbar solo en la tercera, sin degradados.
   La marea es un elemento aparte, nunca parte del logo. */
@keyframes marea-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes marea-baja{to{transform:translateY(105%)}}
@keyframes logo-se-va{to{opacity:0;transform:translateY(-18px) scale(.97)}}
@keyframes carga-desaparece{to{opacity:0;visibility:hidden}}

.pantalla-carga{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:var(--fondo,#F7F6F3);
  animation:carga-desaparece 450ms var(--curva-salida) 1250ms both;pointer-events:none}
.carga-logo{position:relative;z-index:1;display:flex;align-items:center;gap:13px;margin-top:-8vh;
  animation:logo-se-va 420ms cubic-bezier(.5,0,.75,0) 1060ms both}
.carga-logo path{transform-box:fill-box;transform-origin:50% 100%;animation:crece-desde-abajo 620ms var(--curva-expo) both}
.carga-logo .barra-1{animation-delay:160ms}
.carga-logo .barra-2{animation-delay:250ms}
.carga-logo .barra-3{animation:crece-desde-abajo 620ms var(--curva-expo) both,destello-ambar 900ms ease-out both;animation-delay:340ms,720ms}
.carga-palabra{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.carga-palabra>span{display:block;font-family:'Archivo',sans-serif;font-size:44px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--tinta,#17181A);
  animation:sale-de-mascara 720ms var(--curva-expo) 480ms both}
.carga-palabra b{font-weight:700}
.carga-marea{position:absolute;left:0;right:0;bottom:0;height:38vh;animation:marea-baja 650ms cubic-bezier(.7,0,.84,0) 1000ms forwards}
.carga-marea .olas{top:0;animation:marea-sube 1100ms var(--curva-expo) both}
.carga-marea svg:nth-child(1){--duracion:9s}
.carga-marea svg:nth-child(2){--duracion:6s}
.carga-marea svg:nth-child(3){--duracion:12s}
@media (max-width:520px){.carga-logo svg{width:52px;height:52px}.carga-palabra>span{font-size:34px}.carga-logo{gap:10px}}

/* Movimiento reducido: sin pantalla de carga; el resto salta a su estado final (base.css). */
@media (prefers-reduced-motion:reduce){.pantalla-carga{display:none}}