/* Elemental Quantum Transformation — base
   Reset, tipografía, transiciones globales y animaciones compartidas.
   Los estilos de componentes viven en assets/<pagina>.css */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #08211f;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

a { color: #a3f6ff; text-decoration: none; }
a:not([class]):hover { color: #ffffff; }

::selection { background: #daffa9; color: #06110f; }

/* Toda transición del sitio: ningún cambio de estado ocurre de golpe */
a, button, article, figure, figcaption, div, span, h3, h4, blockquote, li {
  transition:
    background-color .35s cubic-bezier(.22,.61,.36,1),
    background .35s cubic-bezier(.22,.61,.36,1),
    background-position .35s ease,
    background-size .35s ease,
    color .3s ease,
    border-color .3s ease,
    border-width .3s ease,
    padding .35s cubic-bezier(.22,.61,.36,1),
    margin .35s cubic-bezier(.22,.61,.36,1),
    gap .35s ease,
    letter-spacing .3s ease,
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .3s ease,
    box-shadow .45s cubic-bezier(.22,.61,.36,1),
    filter .35s ease;
}

/* Tipografía: evita que la última línea quede con una sola palabra */
p, li, blockquote, figcaption, dd {
  text-wrap: pretty;
}

/* Utilidades */
.eqt-rail::-webkit-scrollbar { display: none; }
.eqt-rail { scrollbar-width: none; }

/* Animaciones */
@keyframes eqtRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes eqtPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes eqtImgIn { from { opacity: 0; transform: scale(1.05); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes eqtTxtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes eqtRail { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes eqtHalo { 0%,100% { box-shadow: 0 0 0 0 rgba(218,255,169,0.35); } 50% { box-shadow: 0 0 0 9px rgba(218,255,169,0); } }
/* Recorrido = 6 tarjetas × (ancho + gap). Escritorio: 6 × (352 + 15.8) */
@keyframes eqtMarqLeft { from { transform: translate3d(0,0,0); } to { transform: translate3d(-2206.8px,0,0); } }
@keyframes eqtMarqRight { from { transform: translate3d(-2206.8px,0,0); } to { transform: translate3d(0,0,0); } }
/* Móvil: 6 × (300 + 15.8) */
@keyframes eqtMarqLeftM { from { transform: translate3d(0,0,0); } to { transform: translate3d(-1894.8px,0,0); } }
@keyframes eqtMarqRightM { from { transform: translate3d(-1894.8px,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes eqtTravel { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes eqtBeat { 0%, 74%, 100% { transform: rotate(45deg) scale(1); } 84% { transform: rotate(45deg) scale(1.32); } }
@keyframes eqtWake { 0%, 70%, 100% { background: rgba(6,17,15,0.18); } 84% { background: rgba(18,124,122,0.55); } }
@keyframes eqtNudge { 0%, 62%, 100% { transform: translateX(0); } 76% { transform: translateX(4px); } 88% { transform: translateX(-1px); } }
@keyframes eqtSpark { 0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(164,246,255,0); } 76% { box-shadow: 0 0 0 7px rgba(164,246,255,0.16); } }
@keyframes eqtLoop { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.18); } }
@keyframes eqtFlow { 0% { opacity: .25; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(2px); } 100% { opacity: .25; transform: translateY(-4px); } }
@keyframes eqtEmber { 0%,100% { opacity: .55; } 50% { opacity: 1; } }