/* Matrix: tarjeta "Nuevo perfil" con fallos + "Hacia dónde voy" escrito por la lluvia.
   Origen: web/prototipos/matrix-futuro.html (aprobado 2026-10-16) */
/* ---------- 1. tarjeta "Nuevo perfil" con fallos ---------- */
#ia .h-feature-card{position:relative;overflow:hidden}
#ia .gl-layer{position:absolute;inset:0;display:grid;grid-template-columns:inherit;align-items:inherit;pointer-events:none;opacity:0;background:#020a04}
#ia .h-feature-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,255,65,.10) 0 1px,transparent 1px 3px)}
#ia .h-feature-card.glitch{background:#020a04;border-color:#00ff41;box-shadow:0 0 0 1px rgba(0,255,65,.45),0 0 44px rgba(0,255,65,.25)}
#ia .h-feature-card.glitch .h-card-body,
#ia .h-feature-card.glitch .h-card-body *{color:#8dffa8!important;text-shadow:0 0 6px rgba(0,255,65,.7)}
#ia .h-feature-card.glitch .h-card-img{border-color:#00ff41;background:#020a04}
#ia .h-feature-card.glitch img{filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(5) brightness(.75) contrast(1.3)}
#ia .h-feature-card.glitch .gl-layer{opacity:.92}
#ia .h-feature-card.glitch::after{opacity:1}

/* ---------- 2. "Hacia dónde voy" que se escribe con la lluvia ---------- */
#futuro{position:relative;overflow:hidden}
#futuro>.wrap{position:relative;z-index:2}
#mx-rain{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}
#futuro .w{display:inline-block;white-space:nowrap}
#futuro .c{opacity:0}
#futuro .c.on{opacity:1}
#futuro .c.hit{animation:mx-hit .75s ease-out both}
@keyframes mx-hit{
  0%{opacity:1;color:#f6fff8;text-shadow:0 0 6px #fff,0 0 18px #00ff41,0 0 30px #00ff41}
  100%{opacity:1}
}
#futuro .label::before{opacity:0;transition:opacity .4s}
#futuro .label.on::before{opacity:1}
#futuro .give li::before{transform:scaleX(0);transform-origin:left;transition:transform .7s ease-out}
#futuro .give li.on::before{transform:scaleX(1)}
#futuro .thought{border-left-color:transparent;transition:border-color .6s}
#futuro .thought.on{border-left-color:#5b8cff}
@media (prefers-reduced-motion:reduce){
  #futuro .c{opacity:1}
  #futuro .label::before{opacity:1}
  #futuro .give li::before{transform:none}
  #futuro .thought{border-left-color:#5b8cff}
}

/* Placa amarilla de la etiqueta: aparece junto con el engranaje (2026-10-20) */
#futuro .label{opacity:0;transition:opacity .4s}
#futuro .label.on{opacity:1}
@media (prefers-reduced-motion:reduce){#futuro .label{opacity:1}}