/* ============================================================
   SEÑORITA CUPCAKE — hoja de marca

   La paleta y las tipografías viven acá y en ningún otro lado.
   La usan la landing y la tienda de tortas; la landing de
   cursos ya traía las mismas familias, así que los tres
   módulos se leen como un solo negocio.

   Los rosas salen del logo (#de66ae) y de lo que ya usaba el
   sitio. El de los botones es más hondo a propósito: sobre él
   va texto blanco y el del logo no da contraste suficiente
   para leerse en un celular al sol.
   ============================================================ */

:root{
  --rosa:#de66ae;            /* el del logo */
  --rosa-fuerte:#e83e8c;
  --accion:#cf2d78;          /* fondo de botón, con texto blanco */
  --rosa-hondo:#8e2b5e;      /* texto rosa sobre fondo claro */
  --rosa-claro:#f8c6dc;
  --rosa-humo:#fff4f9;
  --crema:#fffaf7;
  --tinta:#3a2430;
  --tinta-suave:rgba(58,36,48,.70);
  --linea:rgba(222,102,174,.22);
  --sombra-1:0 2px 10px rgba(142,43,94,.07);
  --sombra-2:0 14px 34px rgba(142,43,94,.13);
  --sombra-3:0 22px 50px rgba(142,43,94,.20);
  --radio:22px;
  --radio-chico:14px;
  --ancho:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--tinta);
  line-height:1.6;
  background:
    radial-gradient(circle at 10% -8%, rgba(248,198,220,.34), transparent 42%),
    radial-gradient(circle at 96% 12%, rgba(255,228,240,.7), transparent 38%),
    var(--crema);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0}
p{margin:0 0 16px}

.envoltorio{width:min(100%,var(--ancho));margin:0 auto;padding:0 18px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:999px;
  font:600 1rem/1 Inter,system-ui,sans-serif;border:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;text-align:center;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.btn-primario{background:linear-gradient(135deg,var(--rosa-fuerte),var(--accion));color:#fff;box-shadow:var(--sombra-1)}
.btn-suave{background:#fff;color:var(--rosa-hondo);border:1px solid var(--linea)}
.btn-ancho{width:100%}

/* ---------- Etiquetas ---------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  background:var(--rosa-humo);color:var(--rosa-hondo);border:1px solid var(--linea);
}
.etiqueta-viva{background:var(--accion);color:#fff;border-color:transparent}

/* El navegador aplica [hidden] desde su hoja de usuario, que pierde contra
   cualquier clase del proyecto: un elemento con display:flex y hidden se
   ve igual. Acá gana siempre. */
[hidden]{display:none !important}