/* =========================================================
   EMMA · Pagina en preparacion  (plantilla temporal reutilizable)
   Scopeado bajo .emma-prep. Misma superficie clara y mismo hero
   que /producto/ y /login-esp/, para que la pagina temporal no
   parezca rota sino deliberada.

   El panel de esqueleto se dibuja ENTERO por CSS (gradientes sobre
   un grupo vacio): no usa imagenes ni bloques hijos, asi el patron
   queda con un solo contenedor y no se puede desarmar sin querer.
   Ver [emma-home-estado]: mismo criterio que la barra del navegador
   del marco de la Home.
   v7.45
   ========================================================= */

.emma-prep{
  --morado:#4D4A9E;
  --deep:#3A3877;
  --violet:#AC92EC;
  --green:#8DC049;
  --slate:#516377;
  --surface:#F6F6FB;
}

/* --- hero: mismo lenguaje que /producto/ y /login-esp/ --- */
.emma-prep .prep-hero{
  background:var(--surface);
  padding:78px 26px 82px;
}
.emma-prep .wrap{max-width:1080px;margin:0 auto}
.emma-prep .center{text-align:center}
.emma-prep .sec-head{max-width:700px;margin-inline:auto}
/* el eyebrow es inline-flex: lo centra el text-align del padre .center,
   no el justify-content (eso solo alinea la linea verde y el texto entre si) */
.emma-prep .eyebrow{margin:0 0 14px}

.emma-prep .prep-h1{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  letter-spacing:-.02em;
  font-size:clamp(34px,4.6vw,50px);
  line-height:1.1;
  color:var(--morado);
  margin:0;
}
.emma-prep .prep-lede{
  font-size:18px;
  line-height:1.6;
  color:var(--slate);
  margin:16px 0 0;
}

/* --- panel de esqueleto ---------------------------------
   Un solo grupo vacio. El marco lo da el contenedor y las
   "lineas de contenido" son un repeating-linear-gradient,
   asi que no hay bloques hijos que mantener.
   -------------------------------------------------------- */
.emma-prep .prep-frame{
  max-width:820px;
  margin:44px auto 0;
}
.emma-prep .prep-skeleton{
  position:relative;
  height:230px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(77,74,158,.14);
  box-shadow:0 16px 40px rgba(77,74,158,.10);
  overflow:hidden;
}

/* barra superior del marco, con los tres puntos */
.emma-prep .prep-skeleton::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:38px;
  background:
    radial-gradient(circle 4px at 22px 19px, rgba(77,74,158,.30) 98%, transparent 100%),
    radial-gradient(circle 4px at 40px 19px, rgba(77,74,158,.20) 98%, transparent 100%),
    radial-gradient(circle 4px at 58px 19px, rgba(77,74,158,.14) 98%, transparent 100%),
    linear-gradient(#F2F1FA, #F2F1FA);
  border-bottom:1px solid rgba(77,74,158,.10);
}

/* lineas de contenido: 4 renglones grises de altura fija */
.emma-prep .prep-skeleton::after{
  content:"";
  position:absolute;
  left:30px; right:30px; top:76px;
  height:116px;
  background:
    linear-gradient(90deg, rgba(172,146,236,.34) 0 46%, transparent 46%) 0 0/100% 12px no-repeat,
    linear-gradient(90deg, rgba(81,99,119,.16) 0 88%, transparent 88%) 0 40px/100% 10px no-repeat,
    linear-gradient(90deg, rgba(81,99,119,.16) 0 74%, transparent 74%) 0 68px/100% 10px no-repeat,
    linear-gradient(90deg, rgba(141,192,73,.30) 0 32%, transparent 32%) 0 100px/100% 10px no-repeat;
  border-radius:3px;
}

/* pulso lento: senala "en curso" sin llamar la atencion */
@media (prefers-reduced-motion: no-preference){
  .emma-prep .prep-skeleton::after{
    animation:emma-prep-pulse 3.4s ease-in-out infinite;
  }
}
@keyframes emma-prep-pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* --- salidas --- */
.emma-prep .prep-foot{margin-top:40px}
.emma-prep .prep-btns{justify-content:center}
.emma-prep .prep-btns .wp-block-button__link{padding:13px 32px}
.emma-prep .prep-note{
  font-size:15px;
  color:var(--slate);
  margin:22px 0 0;
}
.emma-prep .prep-note a{
  color:var(--morado);
  text-decoration:underline;
  text-underline-offset:3px;
}
.emma-prep .prep-note a:hover{color:var(--deep)}

/* --- responsive --- */
@media (max-width:780px){
  .emma-prep .prep-hero{padding:58px 20px 62px}
  .emma-prep .prep-frame{margin-top:34px}
  .emma-prep .prep-skeleton{height:196px}
  .emma-prep .prep-skeleton::after{left:22px;right:22px;top:66px}
  .emma-prep .prep-btns{gap:10px}
}