/* =========================================================
   CAROLA MÍSTICA
   Mundo visual: campos de luz. La energía no tiene borde, se difunde.
   Cero contornos, cero cajas, cero ilustración.
   Auras de degradado desenfocado en los colores del logo.
   ========================================================= */

:root {
  /* Grounds */
  --nube:        #FDF8FB;
  --nube-honda:  #F6EDF4;
  --blanco:      #FFFFFF;

  /* Tinta */
  --tinta:       #241428;
  --tinta-media: #5C4A63;
  --tinta-suave: #78687F;   /* el mínimo que pasa AA en texto chico sobre nube */

  /* Marca, muestreados del logo */
  --rosa:        #F7D6E7;
  --rosa-vivo:   #F0AFD3;
  --lila:        #A890C2;
  --lila-hondo:  #7A5DA0;

  /* Calidez que evita que el pastel se vuelva dulce */
  --durazno:     #FBDFD1;
  --arena:       #EFD9C7;

  /* Acción */
  --violeta:     #3B1D52;
  --violeta-vivo:#542A72;

  /* Sombras: difusas y teñidas de violeta, nunca negras */
  --sombra-baja:  0 2px 12px -4px rgba(59, 29, 82, .10);
  --sombra-media: 0 18px 44px -22px rgba(59, 29, 82, .30);
  --sombra-alta:  0 36px 80px -34px rgba(59, 29, 82, .42);

  /* Forma */
  --radio:      28px;
  --radio-chico:18px;

  /* Ritmo */
  --aire:  clamp(4rem, 2.5rem + 6.5vw, 8rem);
  --ancho: 1200px;
  --canto: clamp(1.25rem, 5vw, 3rem);

  /* Tipografía */
  --sans:   'Manrope', system-ui, -apple-system, sans-serif;
  --acento: 'Petrona', Georgia, serif;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--lila) var(--nube-honda);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nube);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.006em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--violeta); color: var(--nube); }
:focus-visible { outline: 2.5px solid var(--lila-hondo); outline-offset: 4px; border-radius: 6px; }

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
p  { margin: 0; text-wrap: pretty; }
a  { color: inherit; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--violeta); color: var(--nube);
  padding: .8rem 1.4rem; border-radius: 0 0 var(--radio-chico) 0;
  font-size: .9rem; font-weight: 600;
}
.saltar:focus { left: 0; }

/* ============ TIPOGRAFÍA ============ */

h1, h2 {
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 1.7rem + 5.4vw, 6.5rem); }
h2 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.4rem); }

/* La cursiva carga el sentido: una palabra por título, nunca más */
h1 em, h2 em {
  font-family: var(--acento);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--lila-hondo);
}

h4 { margin: 0; font-size: 1rem; }
h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ============ AURAS ============ */

.aura {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* La luz se desvanece hacia el fondo: sin esto se ve el rectángulo que la contiene. */
.aura--apertura {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%);
}
.aura__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.aura__mancha--a {
  width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  top: -20%; left: -12%;
  background: var(--rosa);
  opacity: .95;
  animation: deriva-a 34s ease-in-out infinite alternate;
}
.aura__mancha--b {
  width: 50vw; height: 50vw; max-width: 640px; max-height: 640px;
  top: 4%; right: -10%;
  background: var(--lila);
  opacity: .58;
  animation: deriva-b 41s ease-in-out infinite alternate;
}
.aura__mancha--c {
  width: 42vw; height: 42vw; max-width: 520px; max-height: 520px;
  bottom: -22%; left: 26%;
  background: var(--durazno);
  opacity: .8;
  animation: deriva-c 47s ease-in-out infinite alternate;
}
.aura__mancha--d {
  width: 55vw; height: 55vw; max-width: 700px; max-height: 700px;
  top: -18%; right: -8%;
  background: var(--lila-hondo);
  opacity: .5;
  animation: deriva-b 44s ease-in-out infinite alternate;
}
.aura__mancha--e {
  width: 45vw; height: 45vw; max-width: 560px; max-height: 560px;
  bottom: -20%; left: -8%;
  background: var(--rosa-vivo);
  opacity: .42;
  animation: deriva-a 38s ease-in-out infinite alternate;
}
.aura__mancha--f {
  width: 58vw; height: 58vw; max-width: 720px; max-height: 720px;
  top: -25%; left: 8%;
  background: var(--lila-hondo);
  opacity: .55;
  animation: deriva-c 40s ease-in-out infinite alternate;
}
.aura__mancha--g {
  width: 46vw; height: 46vw; max-width: 580px; max-height: 580px;
  bottom: -28%; right: 2%;
  background: var(--rosa-vivo);
  opacity: .32;
  animation: deriva-b 36s ease-in-out infinite alternate;
}

@keyframes deriva-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(7%, 6%, 0) scale(1.12); } }
@keyframes deriva-b { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-8%, 8%, 0) scale(.94); } }
@keyframes deriva-c { from { transform: translate3d(0,0,0) scale(.96); } to { transform: translate3d(6%, -7%, 0) scale(1.14); } }

/* ============ PÍLDORAS ============ */

.pildora {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.9rem;
  border: 0; border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), background-color .25s, color .25s;
}
.pildora--llena {
  background: var(--violeta); color: var(--nube);
  box-shadow: var(--sombra-media);
}
.pildora--llena:hover { background: var(--violeta-vivo); transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.pildora--suave {
  background: rgba(168, 144, 194, .16);
  color: var(--violeta);
}
.pildora--suave:hover { background: rgba(168, 144, 194, .28); transform: translateY(-3px); }

.pildora--clara { background: var(--nube); color: var(--violeta); box-shadow: var(--sombra-media); }
.pildora--clara:hover { background: var(--blanco); transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.pildora--grande { padding: 1.15rem 2.4rem; font-size: 1.02rem; }
.pildora--ancha  { width: 100%; }

.chip {
  display: inline-flex; align-items: center;
  padding: .32rem .8rem;
  border-radius: 999px;
  background: rgba(168, 144, 194, .17);
  color: var(--violeta);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}

/* ============ BARRA ============ */

/* Flota transparente sobre el aura y recién se solidifica al bajar:
   con fondo desde el arranque se ve una línea recta cortando la luz. */
.barra {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem var(--canto);
  background: transparent;
  transition: background-color .4s ease, backdrop-filter .4s ease;
}
.barra--pegada {
  background: rgba(253, 248, 251, .72);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.barra__marca { flex: 0 0 auto; line-height: 0; }
/* El lila del logo es muy claro sobre la nube: se le da cuerpo sin cambiarle el tono. */
.barra__marca img {
  width: clamp(104px, 14vw, 142px); height: auto;
  filter: saturate(1.25) brightness(.88);
}

.barra__nav {
  display: flex; gap: 2rem; margin-left: auto;
  font-size: .95rem; font-weight: 500;
}
.barra__nav a { text-decoration: none; color: var(--tinta-media); transition: color .2s; }
.barra__nav a:hover { color: var(--violeta); }

.barra__accion { padding: .7rem 1.4rem; font-size: .88rem; }

@media (max-width: 900px) {
  .barra__nav { display: none; }
  .barra__accion { margin-left: auto; }
}

/* ============ APERTURA ============ */

.apertura {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(88svh, 860px);
  padding: clamp(3rem, 1.5rem + 7vw, 7rem) var(--canto) clamp(2rem, 1rem + 3vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.apertura__cuerpo {
  position: relative; z-index: 1;
  max-width: 56rem;
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 1rem + 2vw, 2.4rem);
}
.apertura__bajada {
  max-width: 34rem;
  font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem);
  color: var(--tinta-media);
  line-height: 1.6;
}
.apertura__acciones { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

.apertura__datos {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: center;
  list-style: none; margin: .5rem 0 0; padding: 0;
  font-size: .88rem; font-weight: 500; color: var(--tinta-suave);
}
.apertura__datos li { display: flex; align-items: center; gap: .55rem; }
.apertura__datos li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--lila); margin-right: 1.4rem;
}

/* ============ TRAMOS ============ */

.tramo {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--aire) var(--canto);
}
.tramo__encabezado {
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  text-align: center;
  position: relative; z-index: 1;
}
.tramo__encabezado p {
  margin-top: 1.2rem;
  color: var(--tinta-media);
  font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem);
}

.tramo__ayuda {
  margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  text-align: center;
  color: var(--tinta-media);
}
.tramo__ayuda a {
  color: var(--violeta); font-weight: 600;
  text-decoration-color: rgba(59,29,82,.3);
  text-underline-offset: 5px;
  transition: text-decoration-color .2s;
}
.tramo__ayuda a:hover { text-decoration-color: var(--violeta); }

/* ============ SESIONES ============ */

/* Cuatro y cuatro: la última fila no queda coja. */
.sesiones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, .6rem + 1.6vw, 1.75rem);
  align-items: stretch;
}
@media (min-width: 720px)  { .sesiones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sesiones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sesion {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
  overflow: hidden;
  transition: box-shadow .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.sesion:not([open]):hover { transform: translateY(-6px); box-shadow: var(--sombra-media); }

/* El titular se estira para que el precio quede siempre a la misma altura. */
.sesion > summary {
  list-style: none; cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1rem 1.35rem;
}
.sesion > summary::-webkit-details-marker { display: none; }

/* El campo de aura: hoy es atmósfera, mañana es la foto */
.sesion__campo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radio-chico);
  background: var(--nube-honda);
  position: relative;
  overflow: hidden;
}
/* Cuando hay foto, llena el campo. El degradado queda debajo como respaldo. */
.sesion__campo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sesion__campo[data-tono="1"] { background: radial-gradient(120% 120% at 25% 20%, #FBE3EF 0%, #F0AFD3 55%, #C98BB9 100%); }
.sesion__campo[data-tono="2"] { background: radial-gradient(120% 120% at 75% 25%, #F3E9F7 0%, #C6ADDD 55%, #9070B4 100%); }
.sesion__campo[data-tono="3"] { background: radial-gradient(120% 120% at 30% 75%, #FDEBDF 0%, #F3C7A8 55%, #D39C83 100%); }
.sesion__campo[data-tono="4"] { background: radial-gradient(120% 120% at 70% 30%, #FBEFD9 0%, #EED9A4 55%, #C9A87A 100%); }
.sesion__campo[data-tono="5"] { background: radial-gradient(120% 120% at 35% 30%, #FBDCEA 0%, #E296C2 55%, #A85F91 100%); }
.sesion__campo[data-tono="6"] { background: radial-gradient(120% 120% at 65% 70%, #EDE2F6 0%, #A98CCB 55%, #6C4A96 100%); }
.sesion__campo[data-tono="7"] { background: radial-gradient(120% 120% at 25% 60%, #E7E3F5 0%, #A8A0D0 55%, #6F6BA5 100%); }
.sesion__campo[data-tono="8"] { background: radial-gradient(120% 120% at 70% 35%, #F5E6F2 0%, #CDA9CD 55%, #8E6D9C 100%); }

.sesion__titular { display: grid; gap: .35rem; padding: 0 .45rem; }
.sesion__nombre {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.22rem, 1.1rem + .5vw, 1.5rem);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.18;
}
.sesion__linea { color: var(--tinta-media); font-size: .93rem; line-height: 1.45; }

.sesion__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 .45rem;
}
.sesion__precio {
  font-size: 1.16rem; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Abierta: ocupa el ancho completo y el aura pasa a ser una columna */
.sesion[open] {
  grid-column: 1 / -1;
  box-shadow: var(--sombra-media);
}
.sesion[open] > summary { padding-bottom: .5rem; }
.sesion[open] .sesion__campo { aspect-ratio: 21 / 6; }

.detalle {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding: .75rem clamp(1rem, .6rem + 1.4vw, 1.9rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  animation: revelar .45s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 880px) {
  .detalle { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
@keyframes revelar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.detalle__texto h4 {
  margin: 1.5rem 0 0;
  color: var(--lila-hondo);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.detalle__texto h4:first-child { margin-top: 0; }
.detalle__texto p { margin-top: .5rem; max-width: 62ch; color: var(--tinta-media); }
.detalle__nota {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgba(168,144,194,.28);
  font-size: .92rem;
  color: var(--tinta-suave) !important;
}

.detalle__ficha {
  background: var(--nube);
  border-radius: var(--radio-chico);
  padding: clamp(1.1rem, .8rem + 1vw, 1.5rem);
}
.detalle__ficha dl { margin: 0 0 1.35rem; }
.detalle__ficha dl > div { padding: .65rem 0; }
.detalle__ficha dl > div + div { border-top: 1px solid rgba(168,144,194,.22); }
.detalle__ficha dt {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.detalle__ficha dd { margin: .3rem 0 0; font-size: .97rem; line-height: 1.45; }
.detalle__precio {
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.15rem) !important;
  font-weight: 300; letter-spacing: -0.035em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ============ PASOS ============ */

.tramo--distancia { max-width: 100%; }
.tramo--distancia > * { max-width: var(--ancho); margin-inline: auto; }

.pasos {
  list-style: none;
  /* margin-inline auto, no "margin: 0": este bloque vive dentro de un tramo
     a ancho completo y con margin 0 quedaba pegado a la izquierda. */
  margin-block: 0;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.pasos > li { display: grid; gap: .7rem; align-content: start; }
.pasos__n {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: rgba(168, 144, 194, .18);
  color: var(--violeta);
  font-size: .95rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pasos p { color: var(--tinta-media); font-size: .98rem; }

/* ============ ESCUELA ============ */

.tramo--escuela {
  max-width: 100%;
  overflow: hidden;
  background: var(--violeta);
  color: var(--nube);
  border-radius: clamp(28px, 4vw, 52px);
  margin-inline: var(--canto);
  padding-inline: var(--canto);
}
.tramo--escuela > *:not(.aura) { max-width: var(--ancho); margin-inline: auto; position: relative; z-index: 1; }
.tramo--escuela h2 em { color: var(--rosa); }
.tramo--escuela .tramo__encabezado p { color: rgba(253, 248, 251, .76); }

.escuela {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, .8rem + 2vw, 2rem);
  align-items: stretch;
}
.curso {
  background: rgba(253, 248, 251, .07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: grid; gap: 1.1rem; align-content: start;
}
/* El botón cae al fondo de la tarjeta, así ambas cierran a la misma altura. */
.curso .pildora { margin-top: auto; }
.curso__nota { margin-top: 0; }
.curso--foco { background: var(--nube); color: var(--tinta); box-shadow: var(--sombra-alta); }

/* Las fotos del curso vienen verticales: se encuadra la parte del libro. */
.curso__campo {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: rgba(253, 248, 251, .1);
}
.curso__campo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.curso__cuando {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--rosa);
}
.curso--foco .curso__cuando { color: var(--lila-hondo); }
.curso h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); font-weight: 300; letter-spacing: -0.03em; }
.curso p  { color: rgba(253, 248, 251, .8); font-size: .98rem; }
.curso--foco p { color: var(--tinta-media); }
.curso ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; font-size: .95rem; color: rgba(253,248,251,.72); }
.curso--foco ul { color: var(--tinta-media); }
.curso__valor {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  font-weight: 200; letter-spacing: -0.04em; line-height: 1.05;
  color: var(--nube) !important;
  font-variant-numeric: tabular-nums;
}
.curso--foco .curso__valor { color: var(--tinta) !important; }
.curso__valor span {
  display: block; margin-top: .5rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(253,248,251,.6);
}
.curso--foco .curso__valor span { color: var(--tinta-suave); }
.curso__nota { font-size: .86rem; color: rgba(253,248,251,.62) !important; }
.curso--foco .curso__nota { color: var(--tinta-suave) !important; }

/* ============ QUIÉN SOY ============ */

.tramo--vale {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 880px) { .tramo--vale { grid-template-columns: minmax(260px, 420px) 1fr; } }

.vale__foto { margin: 0; }
.vale__marco {
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
  background: radial-gradient(125% 115% at 30% 22%, #FBE6F1 0%, #E7C4DF 45%, #A98CCB 100%);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.vale__marco img { width: 66%; height: auto; opacity: .55; mix-blend-mode: luminosity; }
/* Con foto real: la imagen llena el marco y el degradado desaparece detrás. */
.vale__marco--foto { padding: 0; }
.vale__marco--foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 1;
  mix-blend-mode: normal;
}
.vale__foto figcaption {
  margin-top: .85rem; text-align: center;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.vale__texto { display: grid; gap: 1.15rem; justify-items: start; }
.vale__entrada { font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem); color: var(--tinta); line-height: 1.55; }
.vale__texto p { max-width: 58ch; color: var(--tinta-media); }
.vale__texto .pildora { margin-top: 1rem; }

/* ============ AGRADECIMIENTOS ============ */

.gracias {
  max-width: 40rem; margin: 0 auto; text-align: center;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  box-shadow: var(--sombra-baja);
  display: grid; gap: 1.75rem; justify-items: center;
}
.gracias p { color: var(--tinta-media); }

/* ============ PREGUNTAS ============ */

.preguntas { max-width: 46rem; margin: 0 auto; display: grid; gap: .7rem; }
.pregunta {
  background: var(--blanco);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-baja);
  overflow: hidden;
  transition: box-shadow .3s;
}
.pregunta[open] { box-shadow: var(--sombra-media); }
.pregunta > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.15rem clamp(1.1rem, .8rem + 1vw, 1.6rem);
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.012em;
  transition: color .2s;
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--lila-hondo);
  border-bottom: 2px solid var(--lila-hondo);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.pregunta[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.pregunta > summary:hover { color: var(--violeta); }
.pregunta p {
  padding: 0 clamp(1.1rem, .8rem + 1vw, 1.6rem) 1.4rem;
  color: var(--tinta-media);
  max-width: 64ch;
}

/* ============ CIERRE ============ */

.cierre {
  position: relative;
  overflow: hidden;
  margin: 0 var(--canto) var(--canto);
  border-radius: clamp(28px, 4vw, 52px);
  background: var(--violeta);
  color: var(--nube);
  text-align: center;
  padding: clamp(4.5rem, 3rem + 7vw, 8rem) var(--canto);
}
.cierre__cuerpo { position: relative; z-index: 1; display: grid; gap: 1.6rem; justify-items: center; }
.cierre h2 { max-width: 18ch; }
.cierre h2 em { color: var(--rosa); }
.cierre p { max-width: 32rem; color: rgba(253, 248, 251, .78); font-size: 1.1rem; }

/* ============ PIE ============ */

.pie {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--aire) var(--canto) 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  font-size: .94rem;
}
.pie h2 {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1.1rem;
}
.pie__marca img { width: 138px; height: auto; }
.pie__marca p { margin-top: 1.1rem; color: var(--tinta-media); line-height: 1.6; }
.pie__grupo { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.pie__grupo a { color: var(--tinta-media); text-decoration: none; transition: color .2s; }
.pie__grupo a:hover { color: var(--violeta); }
.pie__aviso { margin-top: 1.3rem; font-size: .8rem; line-height: 1.55; color: var(--tinta-suave); max-width: 34ch; }
.pie__legal {
  grid-column: 1 / -1;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(168, 144, 194, .25);
  font-size: .82rem;
  color: var(--tinta-suave);
}

/* ============ FLOTANTE ============ */

.flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  background: var(--violeta);
  color: var(--nube);
  text-decoration: none;
  font-size: .92rem; font-weight: 600;
  box-shadow: var(--sombra-alta);
  transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .25s;
}
.flotante:hover { background: var(--violeta-vivo); transform: translateY(-4px); }
@media (max-width: 560px) {
  .flotante span { display: none; }
  .flotante { padding: 1rem; }
}

/* ============ ENTRADA ============ */

.aparece { opacity: 0; transform: translateY(26px); }
.js .aparece { transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aura__mancha { animation: none !important; }
  .aparece { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}