/*
 * Landing de Mundo Santi.
 *
 * Sitio estático, sin build: se abre index.html y anda. No comparte hoja de estilos con el
 * juego a propósito —el juego fija el body en 1280x800 sin scroll y eso pelearía con una
 * página que tiene que scrollear— pero sí comparte la paleta, para que quien llega desde
 * acá reconozca lo que se descarga.
 */

/* ================================================================= */
/* Fichas                                                             */
/* ================================================================= */

:root {
  --crema-50: #fff8ea;
  --crema-100: #f8ecd6;
  --crema-200: #f0e0c4;

  --tinta-900: #293241;
  --tinta-700: #46536b;
  --tinta-500: #6d7a91;

  --turquesa-600: #138b91;
  --turquesa-500: #17a4ab;
  --turquesa-100: #d8f0f1;

  --coral-500: #f36f55;
  --coral-400: #f78b74;
  --coral-100: #fde4dd;

  --amarillo-400: #f6c344;
  --amarillo-100: #fdf0d0;

  --verde-600: #43a854;
  --verde-100: #dcf0df;

  --azul-500: #369dd9;
  --azul-100: #ddeffa;

  --violeta-500: #8459c7;
  --violeta-100: #e8def7;

  --durazno-100: #fbe3d6;

  --ancho: 1160px;
  --radio-sm: 12px;
  --radio-md: 20px;
  --radio-lg: 30px;
  --radio-pill: 999px;

  --sombra-suave: 0 6px 18px rgba(41, 50, 65, 0.08);
  --sombra-media: 0 14px 34px rgba(41, 50, 65, 0.12);
  --sombra-alta: 0 24px 56px rgba(41, 50, 65, 0.16);

  --t: 0.28s;

  /* La tipografía viene del sistema: una landing que carga rápido vale más que una fuente
     exacta, y estas familias existen en todos lados. */
  --fuente: 'Nunito', 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ================================================================= */
/* Base                                                               */
/* ================================================================= */

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

html {
  /* clip y no hidden: hidden en <html> convierte al elemento en contenedor de scroll y
     rompe el position: sticky de la barra. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* La barra queda fija arriba: sin esto, los anclajes dejan el título tapado. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--crema-50);
  color: var(--tinta-900);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.5px;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  font-weight: 900;
}

h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 900;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

.seccion {
  padding-block: clamp(64px, 9vw, 116px);
}

.seccion__bajada {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--tinta-500);
  font-size: 1.1rem;
  text-align: center;
}

.seccion__bajada--izq {
  margin-inline: 0;
  text-align: left;
}

.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radio-pill);
  background: var(--tinta-900);
  color: var(--crema-50);
}

/* El foco del teclado tiene que verse en todos lados; acá vale una sola regla. */
:focus-visible {
  outline: 3px solid var(--turquesa-600);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ================================================================= */
/* Botones                                                            */
/* ================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: none;
  border-radius: var(--radio-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t) ease, box-shadow var(--t) ease, background var(--t) ease;
}

.btn svg {
  width: 19px;
  height: 19px;
  flex: none;
  transition: transform var(--t) ease;
}

.btn--principal {
  background: var(--turquesa-600);
  color: var(--crema-50);
  box-shadow: 0 8px 20px rgba(19, 139, 145, 0.3);
}

.btn--principal:hover {
  background: var(--turquesa-500);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(19, 139, 145, 0.36);
}

.btn--principal:hover svg {
  transform: translateX(4px);
}

.btn--fantasma {
  background: transparent;
  color: var(--tinta-900);
  box-shadow: inset 0 0 0 2px rgba(41, 50, 65, 0.18);
}

.btn--fantasma:hover {
  background: rgba(41, 50, 65, 0.05);
  transform: translateY(-3px);
}

.btn__play {
  fill: currentColor;
  stroke: none;
  width: 15px;
  height: 15px;
}

.btn--chico {
  padding: 11px 22px;
  font-size: 0.92rem;
}

.btn--grande {
  padding: 19px 42px;
  font-size: 1.15rem;
}

.btn--ancho {
  width: 100%;
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* ================================================================= */
/* Barra                                                              */
/* ================================================================= */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 234, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--t) ease, background var(--t) ease;
}

/* Al bajar, la barra se achica y se apoya: deja de ser parte de la portada. */
.barra[data-scroll='true'] {
  background: rgba(255, 248, 234, 0.95);
  box-shadow: var(--sombra-suave);
}

.barra__fila {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 16px;
  transition: padding var(--t) ease;
}

.barra[data-scroll='true'] .barra__fila {
  padding-block: 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.logo__hoja {
  width: 32px;
  height: 32px;
  flex: none;
  stroke: none;
  transition: transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.logo:hover .logo__hoja {
  transform: rotate(-14deg) scale(1.1);
}

.logo__texto {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.logo--chico .logo__texto {
  font-size: 1.15rem;
}

.barra__nav {
  display: flex;
  gap: 30px;
  margin-inline: auto;
  font-weight: 700;
  font-size: 0.97rem;
}

.barra__nav a {
  position: relative;
  padding-block: 4px;
  color: var(--tinta-700);
  transition: color var(--t) ease;
}

.barra__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--coral-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) ease;
}

.barra__nav a:hover {
  color: var(--tinta-900);
}

.barra__nav a:hover::after,
.barra__nav a[data-activo='true']::after {
  transform: scaleX(1);
}

.barra__menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: none;
  border-radius: var(--radio-sm);
  background: transparent;
  cursor: pointer;
}

.barra__menu span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--tinta-900);
  transition: transform var(--t) ease, opacity var(--t) ease;
}

.barra__menu[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.barra__menu[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.barra__menu[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.barra__movil {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.barra__movil a {
  padding: 14px 4px;
  font-weight: 800;
  border-bottom: 1px solid var(--crema-200);
}

.barra__movil .btn {
  margin-block: 14px 20px;
  border-bottom: none;
}

.barra[data-menu='true'] .barra__movil {
  max-height: 420px;
}

/* ================================================================= */
/* Portada                                                            */
/* ================================================================= */

.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 76px) clamp(50px, 7vw, 90px);
  overflow: hidden;
}

/* Manchas de color muy suaves: dan aire sin robar atención al texto. */
.hero__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  animation: derivar 18s ease-in-out infinite;
}

.hero__mancha--a {
  width: 460px;
  height: 460px;
  top: -140px;
  right: -100px;
  background: var(--turquesa-100);
}

.hero__mancha--b {
  width: 380px;
  height: 380px;
  bottom: -180px;
  left: -120px;
  background: var(--durazno-100);
  animation-delay: -9s;
}

@keyframes derivar {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(28px, -32px) scale(1.08);
  }
}

.hero__grilla {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 44px;
}

/* Capa propia: el trazo amarillo va en z-index -1 y tiene que quedar dentro de este bloque,
   no detrás de la sección entera (ahí lo taparían las manchas de color). */
.hero__texto {
  position: relative;
  z-index: 1;
}

.hero__texto h1 {
  max-width: 15ch;
}

/*
 * El trazo amarillo bajo "protagonizada por tu hijo". Es el fondo del propio <span>, no una
 * capa aparte: así acompaña al texto cuando corta de línea. Con una caja absoluta detrás,
 * el título no podía partirse y se comía 300px del arte de al lado.
 *
 * box-decoration-break: clone hace que cada línea tenga su propio trazo en vez de uno solo
 * estirado de punta a punta.
 */
.resaltado {
  display: inline;
  padding-inline: 4px;
  background-image: linear-gradient(rgba(246, 195, 68, 0.62), rgba(246, 195, 68, 0.62));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0 34%;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.75s 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.revelar[data-visible='true'] .resaltado,
.resaltado[data-visible='true'] {
  background-size: 100% 34%;
}

.hero__bajada {
  max-width: 46ch;
  margin-top: 22px;
  color: var(--tinta-500);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero__sello {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  color: var(--tinta-500);
  font-size: 0.92rem;
  font-weight: 700;
}

.hero__sello svg {
  width: 18px;
  height: 18px;
  color: var(--verde-600);
}

/* --- El arte de la portada --- */

.hero__arte {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
}

.hero__santi {
  position: absolute;
  left: -9%;
  bottom: -4%;
  width: min(42%, 244px);
  z-index: 2;
  filter: drop-shadow(0 18px 26px rgba(41, 50, 65, 0.18));
}

.hero__robot {
  position: absolute;
  right: 2%;
  top: 0;
  width: min(24%, 130px);
  z-index: 2;
  filter: drop-shadow(0 12px 20px rgba(41, 50, 65, 0.16));
}

/* La tablet: el marco que muestra una pantalla de verdad del juego. */
.tablet {
  width: min(100%, 460px);
  padding: 14px;
  border-radius: 28px;
  background: var(--tinta-900);
  box-shadow: var(--sombra-alta);
  transform: rotate(-2.5deg);
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.tablet:hover {
  transform: rotate(0deg) scale(1.02);
}

.tablet__pantalla {
  border-radius: 16px;
  overflow: hidden;
  background: var(--crema-50);
  aspect-ratio: 16 / 10;
}

.tablet__pantalla img,
.tablet__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================= */
/* Tres sellos                                                        */
/* ================================================================= */

.sellos {
  padding-bottom: clamp(20px, 4vw, 40px);
}

.sellos__fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sello {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radio-md);
  background: #fff;
  box-shadow: var(--sombra-suave);
  transition: transform var(--t) ease, box-shadow var(--t) ease;
}

.sello:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
}

.sello div {
  display: flex;
  flex-direction: column;
}

.sello strong {
  font-size: 1rem;
  font-weight: 800;
}

.sello span:last-child {
  color: var(--tinta-500);
  font-size: 0.88rem;
}

.sello__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
}

.sello__icono svg {
  width: 26px;
  height: 26px;
}

.sello__icono--durazno {
  background: var(--coral-100);
  color: var(--coral-500);
}

.sello__icono--turquesa {
  background: var(--turquesa-100);
  color: var(--turquesa-600);
}

.sello__icono--violeta {
  background: var(--violeta-100);
  color: var(--violeta-500);
}

/* ================================================================= */
/* Cuatro pasos                                                       */
/* ================================================================= */

.pasos h2 {
  text-align: center;
}

.pasos__fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 56px;
}

.paso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}

/*
 * La flecha punteada entre pasos. Es un ::after del paso anterior y no un elemento propio,
 * así el último no la tiene y no hay que acordarse de sacarla a mano.
 */
.paso:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 34px;
  left: calc(50% + 62px);
  width: calc(100% - 124px);
  height: 2px;
  background-image: linear-gradient(90deg, var(--crema-200) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  animation: correr 1.2s linear infinite;
}

@keyframes correr {
  to {
    background-position: 16px 0;
  }
}

.paso__numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
}

.paso__numero--durazno {
  background: var(--coral-500);
}
.paso__numero--turquesa {
  background: var(--turquesa-600);
}
.paso__numero--amarillo {
  background: var(--amarillo-400);
  color: var(--tinta-900);
}
.paso__numero--violeta {
  background: var(--violeta-500);
}

.paso__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-block: 22px 18px;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--sombra-suave);
  color: var(--tinta-700);
  transition: transform var(--t) ease, box-shadow var(--t) ease;
}

.paso:hover .paso__icono {
  transform: translateY(-6px) rotate(-4deg);
  box-shadow: var(--sombra-media);
}

.paso__icono svg {
  width: 40px;
  height: 40px;
}

.paso__icono img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.paso__tilde {
  position: absolute;
  right: -8px;
  bottom: -6px;
  width: 34px;
  height: 34px;
  stroke: none;
  filter: drop-shadow(0 3px 6px rgba(41, 50, 65, 0.2));
}

.paso strong {
  font-size: 1.06rem;
  font-weight: 900;
}

.paso p {
  margin-top: 10px;
  color: var(--tinta-500);
  font-size: 0.92rem;
}

/* ================================================================= */
/* Los juegos                                                         */
/* ================================================================= */

.juegos {
  background: linear-gradient(180deg, transparent, var(--crema-100) 12%, var(--crema-100) 88%, transparent);
}

.juegos h2 {
  text-align: center;
}

/* Las pestañas de los mundos. Con muchos, se acomodan en dos renglones. */
.mundos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}

.mundo-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 2px solid var(--crema-200);
  border-radius: var(--radio-pill);
  background: #fff;
  color: var(--tinta-700);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}

.mundo-tab:hover {
  transform: translateY(-2px);
}

.mundo-tab:focus-visible {
  outline: 3px solid var(--turquesa-500);
  outline-offset: 2px;
}

.mundo-tab__n {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--radio-pill);
  background: var(--crema-100);
  font-size: 0.75rem;
}

.mundo-tab[aria-selected='true'] {
  border-color: var(--turquesa-600);
  background: var(--turquesa-600);
  color: #fff;
}

.mundo-tab[aria-selected='true'] .mundo-tab__n {
  background: rgba(255, 255, 255, 0.22);
}

.juegos__grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 22px;
  margin-top: 36px;
}

.juego {
  display: flex;
  flex-direction: column;
}

.juego[hidden] {
  display: none;
}

.juego__marco {
  margin-bottom: 12px;
  border: 4px solid #fff;
  border-radius: var(--radio-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sombra-suave);
  aspect-ratio: 16 / 10;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s ease;
}

.juego:hover .juego__marco {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
}

.juego__marco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.juego:hover .juego__marco img {
  transform: scale(1.05);
}

.juego__mundo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.juego__chip {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 5px;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 900;
}

.juego__titulo {
  margin: 6px 0 2px;
  font-size: 1.02rem;
  font-weight: 900;
}

.juego__texto {
  margin: 0;
  color: var(--tinta-500);
  font-size: 0.88rem;
  line-height: 1.45;
}

.juego__mundo--durazno { color: var(--coral-500); }
.juego__mundo--durazno .juego__chip { background: var(--coral-100); }
.juego__mundo--violeta { color: var(--violeta-500); }
.juego__mundo--violeta .juego__chip { background: var(--violeta-100); }
.juego__mundo--verde { color: var(--verde-600); }
.juego__mundo--verde .juego__chip { background: var(--verde-100); }
.juego__mundo--azul { color: var(--azul-500); }
.juego__mundo--azul .juego__chip { background: var(--azul-100); }
.juego__mundo--coral { color: #d4584a; }
.juego__mundo--coral .juego__chip { background: var(--durazno-100); }
.juego__mundo--amarillo { color: #b8860b; }
.juego__mundo--amarillo .juego__chip { background: var(--amarillo-100); }

/* ================================================================= */
/* Personalización                                                    */
/* ================================================================= */

.personal__grilla {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  align-items: center;
  gap: 56px;
}

.personal__arte {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px;
}

.personal__arte img {
  position: relative;
  width: min(78%, 300px);
  z-index: 1;
  filter: drop-shadow(0 20px 30px rgba(41, 50, 65, 0.18));
}

/*
 * El círculo de fondo, con destellos que giran despacio. Va cuadrado a mano (aspect-ratio y
 * centrado) y no con inset: si se estira con la columna deja de ser un círculo y se lee como
 * una mancha.
 */
.personal__destellos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82%, 340px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--amarillo-100), var(--crema-100) 62%, transparent 72%);
}

.personal__destellos::before,
.personal__destellos::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 2px dashed var(--crema-200);
  animation: girar 34s linear infinite;
}

.personal__destellos::after {
  inset: 6%;
  border-style: dotted;
  animation-duration: 46s;
  animation-direction: reverse;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.personal__globo {
  position: absolute;
  right: 2%;
  top: 12%;
  z-index: 2;
  padding: 12px 18px;
  border-radius: var(--radio-md) var(--radio-md) var(--radio-md) 6px;
  background: #fff;
  box-shadow: var(--sombra-media);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  animation: saludar 3.4s ease-in-out infinite;
}

@keyframes saludar {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}

.ventajas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
  margin-top: 40px;
}

.ventaja {
  display: flex;
  gap: 14px;
}

.ventaja strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.ventaja p {
  margin-top: 5px;
  color: var(--tinta-500);
  font-size: 0.9rem;
}

.ventaja__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  transition: transform var(--t) ease;
}

.ventaja:hover .ventaja__icono {
  transform: rotate(-8deg) scale(1.08);
}

.ventaja__icono svg {
  width: 23px;
  height: 23px;
}

.ventaja__icono--azul {
  background: var(--azul-100);
  color: var(--azul-500);
}
.ventaja__icono--amarillo {
  background: var(--amarillo-100);
  color: #c9922a;
}
.ventaja__icono--verde {
  background: var(--verde-100);
  color: var(--verde-600);
}
.ventaja__icono--coral {
  background: var(--coral-100);
  color: var(--coral-500);
}

/* ================================================================= */
/* Precio                                                             */
/* ================================================================= */

.precio {
  background: var(--crema-100);
}

.precio__grilla {
  display: grid;
  grid-template-columns: 1fr 340px 210px;
  align-items: center;
  gap: 40px;
}

/* Los "libros" apilados: puro adorno, por eso está aria-hidden en el HTML. */
.precio__libros {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 36px;
  max-width: 250px;
}

.precio__libros li {
  padding: 11px 18px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: var(--sombra-suave);
  transition: transform var(--t) ease;
}

.precio__libros li:nth-child(1) {
  background: var(--coral-500);
  width: 100%;
}
.precio__libros li:nth-child(2) {
  background: var(--amarillo-400);
  color: var(--tinta-900);
  width: 92%;
}
.precio__libros li:nth-child(3) {
  background: var(--verde-600);
  width: 84%;
}
.precio__libros li:nth-child(4) {
  background: var(--azul-500);
  width: 76%;
}

.precio__libros:hover li {
  transform: translateX(10px);
}

.precio__libros li:nth-child(2) {
  transition-delay: 0.05s;
}
.precio__libros li:nth-child(3) {
  transition-delay: 0.1s;
}
.precio__libros li:nth-child(4) {
  transition-delay: 0.15s;
}

.tarjeta {
  padding: 34px 30px;
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-alta);
  text-align: center;
  transition: transform var(--t) ease;
}

.tarjeta:hover {
  transform: translateY(-6px);
}

.tarjeta__cinta {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--radio-pill);
  background: var(--turquesa-100);
  color: var(--turquesa-600);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.tarjeta__monto {
  margin-top: 18px;
  font-size: 3.3rem;
  font-weight: 900;
  line-height: 1;
}

.tarjeta__monto span {
  font-size: 1.2rem;
  vertical-align: super;
  color: var(--tinta-500);
}

.tarjeta__pago {
  margin-top: 6px;
  color: var(--tinta-500);
  font-size: 0.92rem;
  font-weight: 700;
}

.tarjeta__lista {
  margin-block: 24px;
  text-align: left;
}

.tarjeta__lista li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid var(--crema-100);
}

.tarjeta__lista li:last-child {
  border-bottom: none;
}

.tarjeta__lista li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 2.6px solid var(--verde-600);
  border-bottom: 2.6px solid var(--verde-600);
  transform: rotate(-45deg);
}

.precio__robot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.precio__nota {
  color: var(--tinta-500);
  font-size: 0.92rem;
  font-weight: 700;
}

.precio__robot img {
  width: min(100%, 170px);
  filter: drop-shadow(0 14px 22px rgba(41, 50, 65, 0.16));
}

/* ================================================================= */
/* Privacidad                                                         */
/* ================================================================= */

.privacidad {
  padding-block: clamp(46px, 6vw, 72px);
}

.privacidad__grilla {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  align-items: center;
  gap: 40px;
  padding: 34px 38px;
  border-radius: var(--radio-lg);
  background: var(--turquesa-100);
}

.privacidad__titulo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.privacidad__titulo strong {
  font-size: 1.2rem;
  font-weight: 900;
}

.privacidad__titulo p {
  margin-top: 4px;
  color: var(--turquesa-600);
  font-size: 0.92rem;
}

.privacidad__escudo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 18px;
  background: var(--turquesa-600);
  color: var(--crema-50);
}

.privacidad__escudo svg {
  width: 27px;
  height: 27px;
}

.privacidad__lista {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.privacidad__lista li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--turquesa-600);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
}

.privacidad__lista svg {
  width: 26px;
  height: 26px;
}

/* ================================================================= */
/* Preguntas                                                          */
/* ================================================================= */

.preguntas__grilla {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: 50px;
}

.acordeon {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acordeon__item {
  border-radius: var(--radio-md);
  background: #fff;
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  transition: box-shadow var(--t) ease;
}

.acordeon__item[open] {
  box-shadow: var(--sombra-media);
}

.acordeon__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.acordeon__item summary::-webkit-details-marker {
  display: none;
}

/* El signo + que se convierte en −. Dos barras, una que se acuesta. */
.acordeon__signo {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--turquesa-100);
}

.acordeon__signo::before,
.acordeon__signo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2.6px;
  border-radius: 2px;
  background: var(--turquesa-600);
  transform: translate(-50%, -50%);
  transition: transform var(--t) ease;
}

.acordeon__item[open] .acordeon__signo::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.acordeon__signo::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acordeon__cuerpo {
  padding: 0 24px 22px;
  color: var(--tinta-500);
  font-size: 0.96rem;
}

/* El desplegado se anima con JS midiendo la altura; acá va el estado cerrado. */
.acordeon__item:not([open]) .acordeon__cuerpo {
  display: none;
}

.acordeon__item[data-animando='true'] .acordeon__cuerpo {
  display: block;
}

/* ================================================================= */
/* Cierre                                                             */
/* ================================================================= */

.cierre {
  position: relative;
  padding-block: clamp(56px, 8vw, 96px);
  background: var(--tinta-900);
  color: var(--crema-50);
  overflow: hidden;
}

.cierre__grilla {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  gap: 30px;
}

.cierre__centro {
  text-align: center;
}

.cierre h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
}

.cierre .btn {
  margin-top: 32px;
}

.cierre .btn--principal {
  background: var(--coral-500);
  box-shadow: 0 10px 26px rgba(243, 111, 85, 0.35);
}

.cierre .btn--principal:hover {
  background: var(--coral-400);
  box-shadow: 0 16px 34px rgba(243, 111, 85, 0.42);
}

.cierre__santi {
  width: min(100%, 190px);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.35));
}

.cierre__nota {
  color: rgba(255, 248, 234, 0.6);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
}

/* ================================================================= */
/* Pie                                                                */
/* ================================================================= */

.pie {
  padding-block: 34px;
  background: var(--crema-100);
}

.pie__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.pie__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  color: var(--tinta-500);
  font-size: 0.92rem;
  font-weight: 700;
}

.pie__nav a:hover {
  color: var(--tinta-900);
}

.pie__lema {
  color: var(--tinta-500);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
  line-height: 1.4;
}

.pie__lema span {
  color: var(--coral-500);
}

/* ================================================================= */
/* Animaciones de entrada                                             */
/* ================================================================= */

/*
 * Todo lo que lleva .revelar empieza corrido hacia abajo y aparece cuando entra en pantalla.
 * data-demora escalona a los hermanos para que no entren todos de golpe.
 */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.65s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.revelar[data-visible='true'] {
  opacity: 1;
  transform: none;
}

.revelar[data-demora='1'] {
  transition-delay: 0.1s;
}
.revelar[data-demora='2'] {
  transition-delay: 0.2s;
}
.revelar[data-demora='3'] {
  transition-delay: 0.3s;
}

.flotar {
  animation: flotar 5.5s ease-in-out infinite;
}

.flotar--lento {
  animation-duration: 7.5s;
  animation-delay: -2s;
}

@keyframes flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* ================================================================= */
/* Personalización: el aviso de ajustes                               */
/* ================================================================= */

.personal__ajustes {
  margin-top: 30px;
  padding: 14px 18px;
  border-left: 4px solid var(--verde-600);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  background: var(--verde-100);
  font-size: 0.95rem;
  font-weight: 700;
}

/* ================================================================= */
/* Pedido                                                             */
/* ================================================================= */

.pedido {
  background: var(--crema-100);
}

.pedido__grilla {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 56px;
}

.pedido__ayuda {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.pedido__ayuda li {
  padding-left: 26px;
  background: no-repeat 0 5px / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2343A854'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23FFF8EA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pedido__santi {
  display: block;
  width: 150px;
  margin: 34px auto 0;
  filter: drop-shadow(0 16px 24px rgba(41, 50, 65, 0.16));
}

.formulario {
  display: grid;
  gap: 16px;
  padding: 32px;
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-media);
}

.formulario__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.campo {
  display: grid;
  gap: 6px;
}

.campo__etiqueta {
  font-size: 0.88rem;
  font-weight: 800;
}

.campo__etiqueta em {
  color: var(--tinta-500);
  font-style: normal;
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--crema-200);
  border-radius: var(--radio-sm);
  background: var(--crema-50);
  color: var(--tinta-900);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color var(--t), background var(--t);
}

.campo textarea {
  resize: vertical;
}

.campo input[type='file'] {
  padding: 9px;
  font-size: 0.85rem;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--turquesa-500);
  background: #fff;
}

/* Marcado en rojo solo después de intentar enviar: no antes de que escriba nada. */
.formulario[data-intentado='true'] :invalid {
  border-color: var(--coral-500);
}

.formulario__permiso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--tinta-700);
  font-size: 0.85rem;
  line-height: 1.45;
}

.formulario__permiso input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--turquesa-600);
}

.formulario[data-intentado='true'] .formulario__permiso input:invalid {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

.formulario__estado {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.formulario__estado[data-tono='ok'] {
  color: var(--verde-600);
}

.formulario__estado[data-tono='error'] {
  color: var(--coral-500);
}

/* ================================================================= */
/* Video                                                              */
/* ================================================================= */

.video h2 {
  text-align: center;
}

.video__marco {
  max-width: 960px;
  margin: 36px auto 0;
  border: 6px solid #fff;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--tinta-900);
  box-shadow: var(--sombra-alta);
}

.video__marco video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

.formulario__legal {
  margin: 0;
  color: var(--tinta-500);
  font-size: 0.8rem;
  text-align: center;
}

.formulario__legal a,
.pie__legal a {
  color: inherit;
}

/* ================================================================= */
/* Pie: enlaces legales                                               */
/* ================================================================= */

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 248, 234, 0.12);
  font-size: 0.82rem;
  opacity: 0.85;
}

.pie__legal a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ================================================================= */
/* Páginas legales                                                    */
/* ================================================================= */

.legal__barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 248, 234, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--crema-200);
}

.legal__barra-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.legal__volver {
  color: var(--turquesa-600);
  font-weight: 800;
  text-decoration: none;
}

.legal {
  max-width: 780px;
  padding-block: 48px 72px;
}

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.15;
}

.legal h2 {
  margin-top: 44px;
  font-size: 1.35rem;
}

.legal h3 {
  margin-top: 24px;
  font-size: 1.05rem;
}

.legal p,
.legal li {
  color: var(--tinta-700);
  line-height: 1.7;
}

.legal ul,
.legal ol {
  padding-left: 1.3em;
}

.legal a {
  color: var(--turquesa-600);
}

.legal__fecha {
  margin-top: 6px;
  color: var(--tinta-500);
  font-size: 0.9rem;
}

.legal__intro {
  font-size: 1.08rem;
}

.legal__resumen,
.legal__indice {
  margin-top: 28px;
  padding: 18px 24px;
  border-radius: var(--radio-md);
  background: #fff;
  box-shadow: var(--sombra-suave);
}

.legal__resumen {
  border-left: 5px solid var(--verde-600);
}

.legal__indice ol {
  columns: 2;
  column-gap: 32px;
  margin: 0;
}

.legal__indice a {
  text-decoration: none;
}

.legal__leyenda {
  padding: 14px 18px;
  border-radius: var(--radio-sm);
  background: var(--crema-100);
  font-size: 0.85rem;
}

.legal__boton {
  text-decoration: none;
}

.tabla-legal {
  overflow-x: auto;
}

.tabla-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-legal th,
.tabla-legal td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--crema-200);
  text-align: left;
  vertical-align: top;
}

.tabla-legal th {
  background: var(--crema-100);
}

/* Lo que falta completar antes de publicar: imposible de pasar por alto. */
mark.completar {
  padding: 1px 5px;
  border-radius: 4px;
  background: #ffe58a;
  color: var(--tinta-900);
}

.pie--legal .pie__legal {
  margin-top: 0;
  border-top: 0;
}

@media (max-width: 620px) {
  .legal__indice ol {
    columns: 1;
  }

  .video__marco {
    border-width: 4px;
    border-radius: var(--radio-md);
  }
}

/* ================================================================= */
/* Pantallas chicas                                                   */
/* ================================================================= */

@media (max-width: 1080px) {
  .precio__grilla {
    grid-template-columns: 1fr 320px;
  }

  .precio__robot {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }

  .precio__robot img {
    width: 130px;
  }

  .privacidad__grilla {
    grid-template-columns: 1fr;
  }

  .juegos__grilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .pedido__grilla {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .pedido__santi {
    display: none;
  }

  html {
    scroll-padding-top: 84px;
  }

  .barra__nav,
  .barra__fila > .btn {
    display: none;
  }

  .barra__menu {
    display: flex;
    margin-left: auto;
  }

  .barra__movil {
    display: flex;
  }

  .hero__grilla {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero__texto {
    text-align: center;
  }

  .hero__texto h1 {
    max-width: none;
  }

  .hero__bajada {
    margin-inline: auto;
  }

  .hero__acciones,
  .hero__sello {
    justify-content: center;
  }

  .hero__sello {
    display: flex;
  }

  .hero__arte {
    order: -1;
    min-height: 0;
    margin-bottom: 18px;
  }

  /* En una columna el arte es angosto: el corrimiento del escritorio dejaba a Santi
     medio cortado contra el borde. */
  .hero__santi {
    left: 0;
    width: min(34%, 150px);
  }

  .hero__robot {
    width: min(20%, 86px);
  }

  .sellos__fila {
    grid-template-columns: 1fr;
  }

  .pasos__fila {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  /* En dos columnas, la flecha solo va entre el 1→2 y el 3→4. */
  .paso:nth-child(2)::after {
    display: none;
  }

  .personal__grilla,
  .preguntas__grilla {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .personal__arte {
    padding: 20px;
  }

  .personal__arte img {
    width: min(60%, 240px);
  }

  .cierre__grilla {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cierre__santi {
    width: 150px;
  }

  .cierre__nota {
    text-align: center;
  }

  .precio__grilla {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .precio__texto {
    text-align: center;
  }

  .seccion__bajada--izq {
    margin-inline: auto;
    text-align: center;
  }

  .personal__texto h2,
  .preguntas__texto h2 {
    text-align: center;
  }

  .precio__libros {
    margin-inline: auto;
  }

  .precio__libros li {
    width: 100% !important;
  }

  .tarjeta {
    width: min(100%, 380px);
  }

  .pie__fila {
    flex-direction: column;
    text-align: center;
  }

  .pie__nav {
    justify-content: center;
  }

  .pie__lema {
    text-align: center;
  }
}

@media (max-width: 620px) {
  .formulario {
    padding: 22px 18px;
  }

  .formulario__fila {
    grid-template-columns: 1fr;
  }

  body {
    font-size: 16px;
  }

  .contenedor {
    padding-inline: 18px;
  }

  .pasos__fila,
  .ventajas {
    grid-template-columns: 1fr;
  }

  .juegos__grilla {
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px;
  }

  .juego__texto {
    font-size: 0.8rem;
  }

  .mundo-tab {
    padding: 7px 12px;
    font-size: 0.8rem;
  }

  .paso::after {
    display: none !important;
  }

  .privacidad__lista {
    grid-template-columns: 1fr 1fr;
  }

  .privacidad__grilla {
    padding: 26px 22px;
  }

  .privacidad__titulo {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__acciones .btn {
    width: 100%;
  }

  .tablet {
    padding: 10px;
    border-radius: 20px;
  }

  .personal__globo {
    right: 0;
    font-size: 0.82rem;
  }

  .tarjeta__monto {
    font-size: 2.8rem;
  }

  .acordeon__item summary {
    padding: 17px 18px;
    font-size: 0.97rem;
  }

  .acordeon__cuerpo {
    padding: 0 18px 18px;
  }
}

/* ================================================================= */
/* Sin movimiento                                                     */
/* ================================================================= */

/*
 * Quien pidió menos animación en su sistema ve la página quieta y completa: nada aparece
 * "al scrollear", porque si el observador no llegara a correr el contenido quedaría invisible.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }

  .resaltado {
    background-size: 100% 34%;
  }
}

/* ================================================================= */
/* Página del pedido (pedido.html)                                    */
/* ================================================================= */

.orden {
  max-width: 760px;
  padding-block: 40px 80px;
  display: grid;
  gap: 20px;
}

.orden [hidden] {
  display: none !important;
}

.orden__cargando,
.orden__aviso {
  padding: 48px 0;
  text-align: center;
  color: var(--tinta-500);
  font-weight: 700;
}

.orden__numero {
  margin: 0;
  color: var(--turquesa-600);
  font-weight: 800;
  font-size: 0.95rem;
}

.orden__titulo {
  margin: 4px 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
}

.orden__bajada {
  margin: 0 0 20px;
  color: var(--tinta-700);
  font-size: 1.08rem;
}

.orden__pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.orden__pasos li {
  counter-increment: paso;
  padding: 10px 6px;
  border-radius: var(--radio-sm);
  background: var(--crema-100);
  color: var(--tinta-500);
  font-weight: 800;
  font-size: 0.9rem;
  text-align: center;
}

.orden__pasos li::before {
  content: counter(paso) '. ';
}

.orden__pasos li[data-estado='hecho'] {
  background: var(--verde-100);
  color: var(--verde-600);
}

.orden__pasos li[data-estado='hecho']::before {
  content: '✓ ';
}

.orden__pasos li[data-estado='actual'] {
  background: var(--turquesa-600);
  color: #fff;
}

.orden__pasos li[data-estado='apagado'] {
  opacity: 0.5;
}

.orden__tarjeta {
  padding: 28px;
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-media);
}

.orden__tarjeta h1,
.orden__tarjeta h2,
.orden__fotos h2 {
  margin-top: 0;
}

.orden__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.orden__tarjeta--codigo {
  border: 3px solid var(--turquesa-100);
}

.orden__clave {
  display: block;
  margin: 8px 0 12px;
  padding: 14px 16px;
  border-radius: var(--radio-md);
  background: var(--crema-50);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}

.orden__instrucciones {
  margin: 20px 0 8px;
  padding-left: 22px;
  color: var(--tinta-700);
}

.orden__instrucciones li + li {
  margin-top: 6px;
}

.orden__nota {
  margin: 12px 0 0;
  color: var(--tinta-500);
  font-size: 0.92rem;
}

.orden__galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orden__galeria:empty {
  display: none;
}

.orden__foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--radio-sm);
  background: var(--crema-100);
  color: var(--tinta-500);
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
}

.orden__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orden__quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(41, 50, 65, 0.75);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.orden__diseno {
  border: 3px solid var(--amarillo-100);
}

.orden__diseno-img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  margin: 8px 0 12px;
  border-radius: var(--radio-md);
  background: var(--crema-50);
}

.orden__diseno-estado {
  margin: 0 0 4px;
  font-weight: 700;
}

.orden__diseno-estado[data-respuesta='aprobado'] {
  color: var(--verde-600);
}

.orden__cambio {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.orden__rondas {
  margin-top: 16px;
  color: var(--tinta-700);
}

.orden__rondas summary {
  cursor: pointer;
  font-weight: 700;
}

.orden__rondas ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.orden__rondas li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orden__rondas img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radio-sm);
  background: var(--crema-50);
}

.orden__resena {
  border: 3px solid var(--verde-100);
}

.orden__resena-form {
  padding: 0;
  box-shadow: none;
}

.orden__estrellas {
  display: flex;
  gap: 6px;
}

.orden__estrellas button {
  border: 0;
  background: none;
  padding: 2px;
  font-size: 40px;
  line-height: 1;
  color: var(--crema-200);
  cursor: pointer;
  transition: transform var(--t) ease, color var(--t) ease;
}

.orden__estrellas button:hover {
  transform: scale(1.12);
}

.orden__estrellas .orden__estrella--on {
  color: var(--amarillo-400);
}

.orden__resena-estrellas {
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing: 2px;
  color: var(--amarillo-400);
}

@media (max-width: 560px) {
  .orden__pasos {
    grid-template-columns: repeat(2, 1fr);
  }

  .orden__tarjeta {
    padding: 20px;
  }
}

/* ================================================================= */
/* Lo que dicen las familias                                          */
/* ================================================================= */

.testimonios[hidden] {
  display: none;
}

.testimonios h2 {
  text-align: center;
}

.testimonios__promedio {
  margin: 8px 0 28px;
  text-align: center;
  color: var(--tinta-700);
  font-weight: 700;
}

.testimonios__estrellas {
  color: var(--amarillo-400);
  letter-spacing: 2px;
}

.testimonios__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 360px));
  justify-content: center;
  gap: 20px;
}

.testimonio {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 24px;
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-suave);
}

.testimonio--destacado {
  box-shadow: 0 0 0 3px var(--amarillo-100), var(--sombra-media);
}

.testimonio blockquote {
  margin: 0;
  color: var(--tinta-900);
  font-size: 1.05rem;
  line-height: 1.5;
}

.testimonio blockquote::before {
  content: '“';
}

.testimonio blockquote::after {
  content: '”';
}

.testimonio figcaption {
  color: var(--tinta-500);
  font-weight: 800;
}

/* El logo de Mundo Santi (assets/logo-mundo-santi.webp, sacado del SVG original). */
.logo__img {
  display: block;
  width: auto;
  height: 46px;
}

.logo--chico .logo__img {
  height: 38px;
}

@media (max-width: 620px) {
  .logo__img {
    height: 38px;
  }
}