/* Canciones desde el Alma: serenata bajo la ventana.
   Noche violeta de suelo. El dorado es la luz de la ventana: solo para lo que suena y para comprar.
   El rosa es la promesa del titular y el detalle: etiquetas de los discos, marcas, el hilo de los pasos. */

@font-face { font-family: 'Gloock'; src: url('fonts/gloock-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/hanken-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --noche: #15112A;
  --noche-2: #1E1837;
  --noche-3: #2A2147;
  --ventana: #F3C77A;
  --ventana-2: #FFE3AE;
  --rosa: #E9A0A8;
  --crema: #FBF3E6;
  --texto-2: #CDC1DE;
  --texto-3: #A89CC0;
  --linea: rgba(251, 243, 230, .14);
  --tinta: #1B1430;

  --fuente-titulo: 'Gloock', 'Georgia', serif;
  --fuente-texto: 'Hanken Grotesk', system-ui, sans-serif;

  --margen: clamp(1rem, 5vw, 3rem);
  --ancho: 72rem;
  --radio: 14px;
  --barra-alto: 4.25rem;
  --luz: 0; /* 0 apagada, 1 prendida: la ventana se enciende cuando algo suena */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--noche);
  color: var(--crema);
  font: 400 1.0625rem/1.55 var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom));
}
/* La luz de la ventana en toda la página: se prende cuando suena cualquier canción. Solo opacidad. */
body::before {
  content: ''; position: fixed; z-index: -1; top: -25vmax; right: -25vmax; width: 75vmax; height: 75vmax; pointer-events: none;
  background: radial-gradient(closest-side, rgba(243, 199, 122, .16), rgba(243, 199, 122, 0));
  opacity: 0; transition: opacity 1.6s ease;
}
html[data-sonando] body::before { opacity: 1; transition-duration: 1.4s; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--crema); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--rosa); }
::selection { background: var(--ventana); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--ventana); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--noche-3) var(--noche); }

.saltar { position: absolute; left: -999px; top: .5rem; background: var(--ventana); color: var(--tinta); padding: .5rem 1rem; border-radius: 8px; z-index: 100; }
.saltar:focus { left: .5rem; }

/* Placeholders de material pendiente: visibles a propósito, borde punteado. */
.placeholder {
  display: grid; place-content: center; gap: .4rem; text-align: center;
  border: 2px dashed rgba(251, 243, 230, .45); border-radius: var(--radio);
  padding: 1.25rem; color: var(--texto-2); background: rgba(255, 255, 255, .03);
}
.placeholder span { font-weight: 700; letter-spacing: .08em; color: var(--crema); }
.placeholder small { font-size: .85rem; max-width: 32ch; margin-inline: auto; }

/* Aviso de lanzamiento */
.aviso-lanzamiento { background: var(--rosa); color: var(--tinta); text-align: center; font-size: .9rem; padding: .55rem clamp(1rem, 5vw, 3rem); }
.aviso-lanzamiento strong { font-weight: 700; }

/* Cabecera */
.cabecera { position: absolute; z-index: 5; inset-inline: 0; padding: 1rem var(--margen); }
.aviso-lanzamiento:not([hidden]) + .cabecera { position: relative; margin-bottom: -5.5rem; }
.cabecera__logo { display: inline-block; }
.cabecera__logo img { width: clamp(140px, 38vw, 184px); height: auto; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .8rem 1.6rem; border-radius: 999px;
  font: 600 1.05rem/1.1 var(--fuente-texto); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .18s ease, background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.97); }
.boton--oro { background: var(--ventana); color: var(--tinta); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .75); }
.boton--oro:hover { background: var(--ventana-2); }
.boton--linea { background: transparent; color: var(--crema); border-color: rgba(251, 243, 230, .5); }
.boton--linea:hover { border-color: var(--crema); background: rgba(251, 243, 230, .06); }
.boton--chico { min-height: 2.75rem; padding: .6rem 1.3rem; font-size: 1rem; }
.boton[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- Portada ---------- */
.portada { position: relative; min-height: 100svh; display: grid; grid-template-rows: minmax(12rem, 1fr) auto; }
.portada__escena { position: relative; grid-row: 1 / 3; grid-column: 1; overflow: hidden; }
.portada__foto, .portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada__foto img { object-fit: cover; object-position: 50% 12%; }
.portada__escena::after { /* la noche se come la foto hacia abajo para que el texto se lea */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21, 17, 42, 0) 20%, rgba(21, 17, 42, .75) 48%, var(--noche) 62%);
}
.portada__luz { /* el resplandor de la ventana, que se prende cuando suena */
  position: absolute; left: 50%; top: 24%; width: 120vmax; height: 70vmax; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(243, 199, 122, .30), rgba(243, 199, 122, 0));
  opacity: .35; transition: opacity 1.6s ease; pointer-events: none;
}
html[data-sonando] .portada__luz { opacity: 1; transition-duration: 1.4s; }
.portada__texto { grid-row: 2; grid-column: 1; position: relative; z-index: 2; padding: 0 var(--margen) 1.25rem; display: grid; gap: .9rem; max-width: 40rem; }
html.anima .portada__titulo, html.anima .portada__bajada { animation: entra .6s cubic-bezier(.16, 1, .3, 1) backwards; }
html.anima .portada__bajada { animation-delay: .08s; }
.portada__titulo { font-family: var(--fuente-titulo); font-size: clamp(2.3rem, 10.4vw, 5.4rem); line-height: .98; letter-spacing: -.02em; }
.portada__titulo em { font-style: normal; color: var(--rosa); display: block; }
.portada__bajada { color: var(--texto-2); font-size: 1.05rem; max-width: 34ch; }
.portada__compra { display: grid; gap: .6rem; }
.portada__precio { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.portada__precio .paquete { color: var(--texto-2); }
.portada__precio .monto { font-family: var(--fuente-titulo); font-size: 1.9rem; }
s[data-tachado] { color: var(--texto-3); }

/* Muestra del hero */
.muestra { display: flex; align-items: center; gap: 1.4rem; }
.muestra__texto { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.muestra__titulo { font-weight: 600; }
.muestra__titulo span { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.15rem; }
.muestra__meta { color: var(--texto-3); font-size: .9rem; }
.muestra__barra, .cancion__barra { height: 2px; background: var(--linea); border-radius: 2px; margin-top: .4rem; overflow: hidden; }
.muestra__barra span, .cancion__barra span { display: block; height: 100%; width: 100%; background: var(--ventana); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Tocadiscos ---------- */
.tocadiscos { --tam: 88px; position: relative; width: var(--tam); height: var(--tam); flex: none; }
.tocadiscos--chico { --tam: 72px; }
.tocadiscos__plato { position: absolute; inset: 0; border-radius: 50%; background: #0D0A1A; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(251, 243, 230, .08); }
.tocadiscos__disco {
  position: absolute; inset: 5%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 34%, rgba(255, 255, 255, .05) 35%, transparent 36%),
    repeating-radial-gradient(circle, #16121F 0 1.5px, #221C30 1.5px 3px);
  display: grid; place-items: center; will-change: transform;
}
.tocadiscos__disco::after { /* reflejo fijo que delata el giro */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 12%, rgba(255, 255, 255, .09) 16%, transparent 22% 62%, rgba(255, 255, 255, .06) 66%, transparent 72%);
}
.tocadiscos__etiqueta { /* la etiqueta del disco: papel rosa con un anillo y el agujero del eje */
  width: 40%; height: 40%; border-radius: 50%;
  background: radial-gradient(circle, var(--tinta) 0 7%, var(--rosa) 8% 62%, rgba(27, 20, 48, .35) 63% 65%, var(--rosa) 66%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45);
}
.tocadiscos__brazo { position: absolute; right: -9%; top: -6%; width: 22%; height: auto; transform-origin: 50% 11.6%;
  transform: rotate(-10deg); pointer-events: none; transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
/* Sonando: el brazo baja sobre el disco y avanza hacia el centro con el progreso de la canción. */
[data-sonando] .tocadiscos__brazo { transform: rotate(calc(16deg + var(--avance, 0deg))); transition-duration: .7s; }
.tocadiscos__brazo circle { fill: #8E83A6; }
.tocadiscos__brazo path { fill: none; stroke: #CFC5DF; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.tocadiscos__brazo rect { fill: #CFC5DF; }
.tocadiscos__boton {
  position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
  background: var(--ventana); color: var(--tinta);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7);
  transition: transform .18s ease, background-color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.tocadiscos__boton::before { content: ''; position: absolute; inset: -60%; border-radius: 50%; } /* área de toque de 48px+ */
.tocadiscos__boton:active { transform: scale(.94); }
.tocadiscos__boton svg { width: 46%; height: 46%; fill: currentColor; }
.tocadiscos__boton .i-pausa { display: none; }
.tocadiscos__boton[aria-pressed="true"] { background: transparent; box-shadow: none; color: var(--tinta); } /* sonando: se ve la etiqueta rosa girar con la pausa encima */
.tocadiscos__boton[aria-pressed="true"] .i-play { display: none; }
.tocadiscos__boton[aria-pressed="true"] .i-pausa { display: block; }
.tocadiscos--chico .tocadiscos__boton { width: 50%; height: 50%; }
/* El giro lo hace assets/js/app.js con un solo requestAnimationFrame: acelera en 0,9 s y frena en
   1,3 s, y el disco queda donde paró. Sin JS o con movimiento reducido, el disco no gira y el audio
   funciona igual. */

/* ---------- Secciones ---------- */
main > section:not(.portada) { padding: clamp(3.5rem, 11vw, 7rem) var(--margen) 0; max-width: var(--ancho); margin-inline: auto; }
.enfoque .w { display: inline-block; }
html.anima .enfoque .w { opacity: 0; transform: translateY(35%); transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
html.anima .enfoque.visible .w { opacity: 1; transform: none; } /* lo pide el reveal por palabra; va acá y no en un style="" para que la CSP no necesite 'unsafe-inline' */
.titulo-seccion { font-family: var(--fuente-titulo); font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.02; letter-spacing: -.015em; margin-bottom: .8rem; }

/* Ocasiones */
.ocasiones__bajada, .ejemplos__bajada { color: var(--texto-2); max-width: 44ch; margin-bottom: 1.5rem; }
.ocasiones__lista { display: flex; flex-wrap: wrap; gap: .55rem; }
.ocasion {
  font: 500 1rem/1.2 var(--fuente-texto); color: var(--crema); cursor: pointer;
  background: var(--noche-2); border: 1px solid var(--linea); border-radius: 999px;
  padding: .75rem 1.05rem; min-height: 2.9rem; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ocasion:hover { border-color: rgba(251, 243, 230, .4); }
.ocasion[aria-checked="true"] { background: var(--noche-3); color: var(--crema); border-color: var(--crema); }
.preguntas:not(.con-ocasion) { display: none; } /* en celular, el recuadro aparece al elegir una ocasión */
.preguntas { margin-top: 1.5rem; padding: 1.25rem 1.25rem 1.35rem; border-radius: var(--radio); background: var(--noche-2); border: 1px solid var(--linea); max-width: 36rem; }
.preguntas__intro { color: var(--texto-3); font-size: .95rem; }
.preguntas__lista { list-style: none; margin: .6rem 0 .9rem; padding: 0; display: grid; gap: .45rem; }
.preguntas__lista li { font-family: var(--fuente-titulo); font-size: 1.3rem; line-height: 1.2; }
html.anima .preguntas__lista li { animation: entra .45s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.preguntas__cierre { color: var(--texto-2); font-size: .95rem; }

/* Ejemplos */
.lista-canciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.cancion { display: flex; gap: 1.1rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--linea); }
.cancion:last-child { border-bottom: 1px solid var(--linea); }
.cancion__texto { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.cancion__titulo { font-family: var(--fuente-titulo); font-size: 1.45rem; line-height: 1.15; }
.cancion__meta { color: var(--texto-3); font-size: .92rem; }
.versiones { display: flex; gap: .4rem; margin-top: .45rem; }
.version {
  font: 500 .85rem/1 var(--fuente-texto); color: var(--texto-2); background: none; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 999px; padding: .5rem .8rem; min-height: 2.25rem;
}
.version[aria-pressed="true"] { color: var(--crema); border-color: rgba(251, 243, 230, .55); }
[data-sonando] .cancion__titulo { color: var(--ventana); }

/* Pasos */
.pasos__cuerpo { position: relative; padding-left: 2.25rem; }
.pasos__hilo { position: absolute; left: calc(.45rem + 1px); top: .55rem; bottom: .55rem; width: 2px; background: var(--rosa); transform-origin: top; }
html.anima .pasos__hilo { transform: scaleY(0); transform-origin: top; }
.pasos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: paso; }
.paso { position: relative; max-width: 38rem; }
.paso::before {
  content: ''; position: absolute; left: calc(-2.25rem + .45rem - 6px + 2px); top: .5rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--noche); border: 2px solid var(--rosa); transition: background-color .3s ease;
}
.paso.encendido::before { background: var(--rosa); }
.paso h3 { font-family: var(--fuente-titulo); font-size: 1.45rem; line-height: 1.15; margin-bottom: .35rem; }
.paso p { color: var(--texto-2); }

/* Precio */
.precio__ocasion { color: var(--texto-2); margin-bottom: 1.4rem; }
.precio__ocasion strong { color: var(--crema); font-weight: 600; }
.paquetes { display: grid; gap: 1rem; }
.paquete-tarjeta { position: relative; display: grid; gap: .45rem; padding: 1.5rem 1.35rem 1.4rem; border-radius: 18px; background: var(--noche-2); border: 1px solid var(--linea); }
.paquete-tarjeta--destacado { background: linear-gradient(180deg, #2B2046 0%, var(--noche-2) 100%); border-color: rgba(243, 199, 122, .55); }
.paquete-tarjeta__nombre { font-family: var(--fuente-titulo); font-size: 1.9rem; line-height: 1.05; }
.paquete-tarjeta__detalle { color: var(--texto-2); }
.paquete-tarjeta__precio { display: flex; align-items: baseline; gap: .6rem; margin-top: .4rem; }
.paquete-tarjeta__precio .monto { font-family: var(--fuente-titulo); font-size: 2.6rem; line-height: 1; }
.paquete-tarjeta__unidad { color: var(--texto-3); font-size: .9rem; }
.paquete-tarjeta .boton { margin-top: .8rem; width: 100%; }
.incluye { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 38rem; }
.incluye li { position: relative; padding-left: 1.6rem; color: var(--texto-2); }
.incluye li::before { content: ''; position: absolute; left: .1rem; top: .5em; width: .75rem; height: .4rem; border-left: 2px solid var(--rosa); border-bottom: 2px solid var(--rosa); rotate: -45deg; }
.precio__nota { margin-top: 1.1rem; font-size: .9rem; color: var(--texto-3); }

/* Testimonios: citas editoriales, no burbujas de chat. Palabras textuales de los clientes. */
.cita { margin: 0 0 clamp(2.5rem, 6vw, 4rem); max-width: 19rem; } /* el ancho va en rem: ch acá se mide con el texto chico, no con el titular */
.cita blockquote { margin: 0; }
.cita blockquote p {
  font-family: var(--fuente-titulo); font-size: clamp(1.9rem, 6.5vw, 3.2rem); line-height: 1.12;
  letter-spacing: -.01em; text-indent: -.42em;
}
.cita blockquote p::before { content: '“'; color: var(--rosa); }
.cita blockquote p::after { content: '”'; color: var(--rosa); }
.cita figcaption { margin-top: 1.1rem; color: var(--rosa); font-weight: 600; }
.cita__mas { margin-top: .9rem; }
.cita__mas summary { cursor: pointer; color: var(--texto-2); font-size: .95rem; list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.cita__mas summary::-webkit-details-marker { display: none; }
.cita__mas summary::after { content: ''; width: .5rem; height: .5rem; border-right: 2px solid var(--rosa); border-bottom: 2px solid var(--rosa); rotate: 45deg; transition: rotate .2s ease; }
.cita__mas[open] summary::after { rotate: 225deg; }
.cita__mas p { margin-top: .8rem; color: var(--texto-2); max-width: 60ch; }
.citas-cortas { display: grid; gap: 2rem; }
.citas-cortas figure { margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--linea); max-width: 46ch; }
.citas-cortas blockquote { margin: 0; }
.citas-cortas blockquote p { color: var(--crema); }
.citas-cortas blockquote p::before { content: '“'; color: var(--rosa); }
.citas-cortas blockquote p::after { content: '”'; color: var(--rosa); }
.citas-cortas figcaption { margin-top: .7rem; color: var(--rosa); font-weight: 600; font-size: .95rem; }
.testimonios__nota { margin-top: 1.8rem; color: var(--texto-3); font-size: .9rem; }

/* Preguntas frecuentes */
.dudas__lista { display: grid; max-width: 44rem; }
.dudas details { border-top: 1px solid var(--linea); }
.dudas details:last-child { border-bottom: 1px solid var(--linea); }
.dudas summary { list-style: none; cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after { content: ''; position: absolute; right: .35rem; top: 1.35rem; width: .55rem; height: .55rem; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); rotate: 45deg; transition: rotate .2s ease; }
.dudas details[open] summary::after { rotate: 225deg; }
.dudas details p { color: var(--texto-2); padding-bottom: 1.1rem; max-width: 60ch; }

/* Cierre */
.cierre { text-align: center; display: grid; justify-items: center; gap: 1.6rem; padding-bottom: clamp(3rem, 9vw, 6rem) !important; }
.cierre__titulo { font-family: var(--fuente-titulo); font-size: clamp(2.2rem, 9vw, 4.4rem); line-height: 1.02; max-width: 16ch; letter-spacing: -.015em; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 2.5rem var(--margen) 2rem; display: grid; gap: .8rem; justify-items: center; text-align: center; color: var(--texto-3); font-size: .92rem; }
.pie__legal a { color: var(--texto-2); }

/* Barra fija inferior */
.barra-fija {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--margen) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(21, 17, 42, .97); border-top: 1px solid var(--linea);
  transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.barra-fija.visible { transform: none; }
.barra-fija .paquete { color: var(--texto-2); }
.barra-fija .monto { font-family: var(--fuente-titulo); font-size: 1.3rem; margin-left: .3rem; }

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  .portada { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: center; min-height: min(100svh, 56rem); }
  .portada__escena { grid-column: 1 / 3; grid-row: 1; align-self: stretch; }
  .portada__foto img { object-position: 78% 45%; }
  .portada__escena::after { background: linear-gradient(90deg, var(--noche) 30%, rgba(21, 17, 42, .6) 50%, rgba(21, 17, 42, 0) 70%); }
  .portada__luz { left: 75%; top: 45%; }
  .cabecera__logo img { width: 140px; }
  .portada__texto { grid-column: 1; grid-row: 1; padding: 6.25rem 0 2rem var(--margen); gap: .8rem; }
  .portada__titulo { font-size: clamp(2.4rem, 8.5vh, 5.4rem); }
  .portada__compra { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 1.5rem; }
  .tocadiscos { --tam: 96px; }
  .paquetes { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .lista-canciones { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .cancion:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
  body { padding-bottom: 0; }
  .barra-fija { display: none; }

  /* Composición de escritorio: dos columnas en vez de la página de celular estirada. */
  .ocasiones { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 't p' 'b p' 'l p'; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .ocasiones > .titulo-seccion { grid-area: t; }
  .ocasiones__bajada { grid-area: b; }
  .ocasiones__lista { grid-area: l; }
  .preguntas, .preguntas:not(.con-ocasion) { display: block; grid-area: p; margin-top: 0; align-self: center; }
  .testimonios { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(2rem, 6vw, 5rem); grid-template-areas: 't t' 'c s' 'n s'; align-items: start; }
  .testimonios > .titulo-seccion { grid-area: t; }
  .cita { grid-area: c; max-width: 30rem; margin-bottom: 0; }
  .citas-cortas { grid-area: s; gap: 2.5rem; padding-top: .5rem; }
  .testimonios__nota { grid-area: n; margin-top: 2rem; }
  .pasos, .dudas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .pasos > .titulo-seccion, .dudas > .titulo-seccion { position: sticky; top: 2rem; }
}

@media print { .barra-fija, .aviso-lanzamiento { display: none; } }

/* ---------- Páginas simples: gracias y legales ---------- */
.pagina-simple { padding-bottom: 0; }
.gracias { min-height: 100svh; max-width: 34rem; margin: 0 auto; padding: 2.5rem var(--margen) 3rem; display: grid; align-content: center; gap: 1.2rem; }
.gracias__logo { width: 150px; height: auto; margin-bottom: 1rem; }
.gracias__titulo { font-family: var(--fuente-titulo); font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1; }
.gracias__texto { color: var(--texto-2); font-size: 1.1rem; }
.gracias__pasos { margin: .4rem 0 .8rem; padding-left: 1.3rem; display: grid; gap: .5rem; color: var(--texto-2); }
.gracias__pasos li::marker { color: var(--rosa); font-weight: 700; }
.gracias .boton { width: 100%; }
.gracias__nota { color: var(--texto-3); font-size: .92rem; text-align: center; }
.legal { max-width: 44rem; margin: 0 auto; padding: 2.5rem var(--margen) 4rem; }
.legal img { width: 140px; height: auto; margin-bottom: 2rem; }
.legal h1 { font-family: var(--fuente-titulo); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; margin-bottom: 1.5rem; }
.legal h2 { font-family: var(--fuente-titulo); font-size: 1.4rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--texto-2); }
.legal p + p { margin-top: .8rem; }
.legal .placeholder { display: inline; padding: .1rem .4rem; border-width: 1px; }