/* ==========================================================================
   Seguratis — Sistema de MOVIMIENTO + FONDO del hero  (v2, SPA-friendly)
   Copia este CSS + motion.js (v2). Framework-agnóstico.
   Novedad v2: el fondo del hero (con color en las esquinas) es UNA clase
   .sg-hero — sin divs extra. El brillo "aurora" va en ::before/::after,
   así no hay que añadir elementos que se olviden.
   ========================================================================== */

/* ---------- KEYFRAMES ---------- */
@keyframes sg-fadeUp   { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
@keyframes sg-aurora   { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-26px) scale(1.12)} 66%{transform:translate(-26px,24px) scale(.92)} 100%{transform:translate(0,0) scale(1)} }
@keyframes sg-drift    { 0%{transform:translate(0,0)} 50%{transform:translate(14px,-18px)} 100%{transform:translate(0,0)} }
@keyframes sg-shimmer  { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes sg-pulseRing{ 0%{box-shadow:0 0 0 0 rgba(0,182,122,.5)} 70%{box-shadow:0 0 0 7px rgba(0,182,122,0)} 100%{box-shadow:0 0 0 0 rgba(0,182,122,0)} }
@keyframes sg-glow     { 0%,100%{text-shadow:0 0 0 rgba(232,110,77,0)} 50%{text-shadow:0 8px 22px rgba(232,110,77,.3)} }
@keyframes sg-pop      { 0%{opacity:0; transform:scale(.5)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)} }

/* ==========================================================================
   FONDO DEL HERO  ←  esto es lo que te faltaba (color en las esquinas)
   Pon class="sg-hero" en el CONTENEDOR del hero (la sección, no el texto).
   - Naranja arriba-derecha + verde abajo-izquierda + base melocotón.
   - El brillo que "respira" va en ::before/::after (sin DOM extra).
   ========================================================================== */
.sg-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 92% 0%,  rgba(232,110,77,.20), transparent 60%),  /* naranja ↗ */
    radial-gradient(55% 55% at 4% 100%, rgba(0,182,122,.16), transparent 60%),    /* verde ↙ */
    radial-gradient(115% 95% at 100% -5%, #FBDFCC 0%, #FCEEE3 42%, #FBF6EF 100%); /* melocotón */
}
.sg-hero > *{ position:relative; z-index:1; }           /* el contenido va por encima */
.sg-hero::before, .sg-hero::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(8px); pointer-events:none; z-index:0;
}
.sg-hero::before{                                         /* mancha naranja ↗ que respira */
  top:-120px; right:-80px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(232,110,77,.22), transparent 65%);
  animation:sg-aurora 16s ease-in-out infinite;
}
.sg-hero::after{                                          /* mancha verde ↙ que respira */
  bottom:-160px; left:-60px; width:460px; height:460px;
  background:radial-gradient(circle, rgba(0,182,122,.16), transparent 65%);
  animation:sg-aurora 20s ease-in-out infinite reverse;
}
/* Puntos opcionales a la deriva: <span class="sg-dot"></span> dentro del hero */
.sg-dot{ position:absolute; width:12px; height:12px; border-radius:50%;
  background:#E86E4D; opacity:.5; pointer-events:none; z-index:0;
  animation:sg-drift 9s ease-in-out infinite; }
.sg-dot--green{ background:#00B67A; }
.sg-dot--2{ animation-duration:11s; animation-delay:1s; }

/* ==========================================================================
   1) ENTRADA ESCALONADA (reveal on scroll)
   Marca con data-reveal; motion.js añade .is-visible. Sin JS / reduce-motion
   el contenido se ve igual (no se queda oculto).
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--d, 0s); will-change:opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="form"]{ transform:translateY(28px); }   /* el form entra una vez, no flota */

/* ==========================================================================
   2) MICRO-INTERACCIONES (solo añadir la clase en el HTML)
   ========================================================================== */
.sg-badge-dot{ width:8px; height:8px; border-radius:50%; background:#00B67A;
  animation:sg-pulseRing 2.2s ease-out infinite; }                 /* pulso del punto */

.sg-accent{ font-family:"Instrument Serif", serif; font-style:italic; font-weight:400;
  color:#E86E4D; animation:sg-glow 3.6s ease-in-out infinite; }    /* "complicado" con brillo */

.sg-cta{ position:relative; overflow:hidden; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(90deg,#E86E4D,#F2885E,#E86E4D); background-size:200% 100%;
  animation:sg-shimmer 3.5s linear infinite;
  box-shadow:0 16px 28px -12px rgba(232,110,77,.6);
  transition:transform .2s ease, box-shadow .2s ease; }            /* CTA con brillo */
.sg-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -12px rgba(232,110,77,.7); }

.sg-input{ border:1.5px solid #ECE3D6; border-radius:11px; padding:13px 14px;
  font-size:15px; color:#14233B; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease; }         /* foco de campos */
.sg-input:focus{ border-color:#E86E4D; box-shadow:0 0 0 4px rgba(232,110,77,.14); }

.sg-star{ animation:sg-pop .5s ease-out both; }                    /* estrellas pop (opcional) */

/* ==========================================================================
   ACCESIBILIDAD — prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}