/* grou-runtime.css — estados base para los idioms de grou-runtime.js.
   Copia junto al runtime. Los colores/tokens los pone la demo; aquí solo el comportamiento. */

/* Reveal: estado inicial y final. .in lo pone el runtime (o la red de seguridad). */
.reveal, [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease, cubic-bezier(.22,.61,.36,1)), transform .7s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.reveal.in, [data-reveal].in { opacity: 1; transform: none; }

/* Header con fondo al scroll (la demo define el look; aquí solo el hook). */
[data-header] { transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }

/* Carrusel: pista horizontal. */
[data-carousel] { overflow: hidden; }
[data-carousel] .track, [data-carousel] [data-track] { display: flex; transition: transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)); }
[data-carousel] .track > *, [data-carousel] [data-track] > * { flex: 0 0 100%; }

/* Lightbox: oculto por defecto ([hidden] SIEMPRE gana, evita que display:grid lo muestre al cargar). */
[data-lightbox][hidden] { display: none !important; }
[data-lightbox] { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: rgba(0,0,0,.86); }

/* Comparador antes/después. */
[data-compare] { position: relative; overflow: hidden; touch-action: none; }
[data-compare] [data-compare-top] { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
[data-compare] [data-compare-handle] { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #fff; cursor: ew-resize; }

/* Form: estado de validación / éxito / error (la demo estiliza el detalle). */
form[data-contact-form] .invalid { border-color: #f2a89f !important; }

/* Respeto a reduced-motion: sin animaciones, estado final visible. */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-carousel] .track, [data-carousel] [data-track] { transition: none !important; }
}