/* Tipografías alojadas en el propio sitio (licencia SIL Open Font License 1.1).
   Sin peticiones a servidores de terceros. */
@font-face {
  font-family: 'Outfit';
  src: url('fuentes/outfit-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fuentes/outfit-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fuentes/outfit-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fuentes/outfit-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Philosopher';
  src: url('fuentes/philosopher-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Philosopher';
  src: url('fuentes/philosopher-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('fuentes/great-vibes-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===========================================================================
   Aiscolta — hoja compartida
   
   Los valores NO son aproximaciones: salen de Color.kt y Type.kt de la app.
   Quien llega desde la tienda debe reconocer que es lo mismo, y para eso el
   parecido tiene que ser exacto, no cercano.
   
   Las tres familias vienen de Google Fonts, igual que en la app. En web se
   cargan con la pagina, asi que no hay que empaquetarlas ni preocuparse de si
   el dispositivo las tiene.
   =========================================================================== */

:root {
  /* Superficies */
  --slate950:  #020617;   /* fondo principal */
  --slate900:  #0F172A;   /* tarjetas */
  --slate800:  #1E293B;   /* subtarjetas, campos */
  --slate700:  #334155;   /* bordes activos */
  --cristal:   rgba(255,255,255,0.10);

  /* Texto */
  --marfil:    #FFFFF0;
  --slate200:  #E2E8F0;
  --slate400:  #94A3B8;

  /* Acentos de marca */
  --cian:      #06B6D4;
  --cian-luz:  #22D3EE;
  --fucsia:    #D946EF;
  --purpura:   #A855F7;
  --coral:     #F87171;
  --ambar:     #EAB308;
  --ambar-luz: #FACC15;
  --naranja:   #F97316;   /* el paso "Procesando" de la app */
  --esmeralda: #10B981;   /* el paso "Escuchar" */

  --ancho: 62rem;
  --medida: 34rem;   /* linea de lectura corta: la prosa legal larga cansa */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--slate950);
  color: var(--marfil);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* El resplandor ambiental de la app: dos halos muy tenues que dan profundidad
   al fondo sin dibujar nada. Fijos, para que no compitan con el scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 15% -5%, rgba(88,28,135,0.20), transparent 60%),
    radial-gradient(50rem 35rem at 95% 15%, rgba(6,182,212,0.10), transparent 60%);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: var(--cian-luz); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marfil); }

:focus-visible { outline: 2px solid var(--cian-luz); outline-offset: 3px; border-radius: 3px; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

/* --- Cabecera ------------------------------------------------------------ */
/* Las proporciones salen de la app: el buho LLENA su circulo con un aro fino,
   el lettering es bastante mas grande que el logo, y el eslogan va centrado
   debajo. Escalado a medidas de sitio web, no de telefono. */
.cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0 1rem;
}

.marca { display: flex; align-items: center; gap: 1rem; text-decoration: none; }

.marca-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* Aro fino: en la app el buho llena el circulo y el borde es una linea. */
  padding: 2px;
  /* El aro es LOGO, no diseño: lleva el degradado de la marca tal como esta en
     la app y nada mas. Los colores del indicador de progreso pertenecen al
     producto y no tienen sitio aqui — mezclarlos convertiria una marca fija en
     un elemento que cambia con la interfaz.
     Se conserva el mismo sentido y angulo que el circulo de la aplicacion. */
  background: linear-gradient(135deg, var(--fucsia), var(--purpura), var(--cian-luz));
  flex-shrink: 0;
}
.marca-logo img { width: 100%; height: 100%; display: block; border-radius: 50%; background: #000; }

.marca-bloque { display: flex; flex-direction: column; }

.marca-texto { display: flex; align-items: baseline; line-height: 0.95; }
/* La "A" en rosa y la "I" en cian, tal como en la app: dos colores planos, no
   un degradado. El degradado esta en el aro del logo, no en el lettering. */
.marca-a {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 3.1rem;
  letter-spacing: -0.03em;
  color: #EC4899;
}
.marca-i {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 3.1rem;
  letter-spacing: -0.03em;
  color: var(--cian-luz);
}
.marca-scolta {
  font-family: 'Great Vibes', cursive;
  font-size: 3.5rem;
  /* Sin margen negativo: Great Vibes ya trae bastante arranque a la izquierda
     en su trazo, y tirar de ella montaba la "s" sobre la "I". */
  margin-left: 0.02em;
  background: linear-gradient(180deg, #FFFFFF, #CBD5E1, var(--slate400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marca-eslogan {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--slate400);
  margin: 0.1rem 0 0;
  letter-spacing: 0.01em;
}

.idioma {
  background: var(--slate800);
  color: var(--slate400);
  border: 1px solid var(--slate700);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Portada ------------------------------------------------------------- */
.portada { padding: 2.5rem 0 1rem; }

/* Philosopher para los titulares, igual que displayLarge en la app. */
.titular {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 1rem;
  max-width: 18ch;
  color: var(--marfil);
  /* Mismo recorrido de siete paradas que la frase de marca, pero mas lento:
     dos degradados animados a la misma velocidad se leen como un parpadeo
     comun, y a distinta velocidad cada uno mantiene su propio pulso. */
  background: linear-gradient(100deg,
    var(--cian-luz) 0%,
    var(--purpura) 16%,
    var(--fucsia) 33%,
    var(--naranja) 50%,
    var(--ambar-luz) 66%,
    var(--esmeralda) 83%,
    var(--cian-luz) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: deriva-color 26s linear infinite;
}

.entradilla {
  color: var(--slate400);
  font-size: 1.15rem;
  max-width: 44ch;
  margin: 0 0 3rem;
}

/* --- Las voces: el corazon de la pagina ---------------------------------- */
/* Tres maneras de contar lo mismo. Es el producto entero explicado sin
   describirlo, asi que se lleva el peso visual y lo demas se calla. */
.fuente {
  border-left: 2px solid var(--slate700);
  padding-left: 1.1rem;
  margin-bottom: 2.5rem;
}
.fuente-etiqueta { font-size: 0.82rem; color: var(--slate400); margin: 0 0 0.35rem; }
.fuente-texto { margin: 0; color: var(--slate200); max-width: var(--medida); }

.voces { display: grid; gap: 1.5rem; margin-bottom: 3rem; }

.voz { opacity: 0; animation: aparecer 0.5s ease forwards; }
.voz:nth-child(1) { animation-delay: 0.15s; }
.voz:nth-child(2) { animation-delay: 0.55s; }
.voz:nth-child(3) { animation-delay: 0.95s; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* La secuencia sugiere turnos de habla, que es lo que la pagina describe.
   Sin movimiento se lee igual de bien. */
@media (prefers-reduced-motion: reduce) { .voz { opacity: 1; animation: none; } }

.voz-nombre { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.3rem; }
/* Los tres acentos de la app, en el orden de sus propios gradientes. */
.voz:nth-child(1) .voz-nombre { color: var(--cian-luz); }
.voz:nth-child(2) .voz-nombre { color: var(--fucsia); }
.voz:nth-child(3) .voz-nombre { color: var(--purpura); }

/* El formato va como sello bajo el nombre: pequeño, en el color de la tarjeta,
   para que se lea como una etiqueta del sistema y no como parte del ejemplo. */
.voz-formato {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin: 0 0 0.85rem;
}
.voz-1 .voz-formato { color: var(--cian-luz); background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.3); }
.voz-2 .voz-formato { color: var(--fucsia); background: rgba(217,70,239,0.12); border: 1px solid rgba(217,70,239,0.3); }
.voz-3 .voz-formato { color: var(--esmeralda); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); }

.nota-contrato {
  color: var(--slate400);
  font-size: 0.95rem;
  max-width: var(--medida);
  margin: 1.5rem 0 2.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--ambar-luz);
}

.voz-linea {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.55;
  margin: 0;
  max-width: var(--medida);
  color: var(--marfil);
}

/* --- Descarga ------------------------------------------------------------ */
.descarga {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding: 1.75rem;
  margin-bottom: 3rem;
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 18px;
}

.qr {
  width: 132px;
  height: 132px;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  flex-shrink: 0;
}

.descarga-texto { max-width: 30ch; }
.descarga-texto p { margin: 0 0 0.75rem; color: var(--slate400); font-size: 0.95rem; }

.boton {
  display: inline-block;
  background: var(--cian);
  color: var(--slate950);
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  border-radius: 12px;
  text-decoration: none;
}
.boton:hover { background: var(--cian-luz); color: var(--slate950); }
.boton[aria-disabled="true"] {
  background: var(--slate800);
  color: var(--slate400);
  border: 1px solid var(--slate700);
  cursor: default;
  pointer-events: none;
}

/* Naranja, el mismo tono que la app usa para "Procesando": es un estado de
   espera, no un dato neutro. */
.aviso-proximamente {
  font-size: 0.85rem;
  color: var(--naranja);
  margin: 0.6rem 0 0;
}

/* --- Como funciona ------------------------------------------------------- */
/* Numerado porque SI es una secuencia: subir, elegir, escuchar. */
.pasos { padding: 0 0 3.5rem; }
.pasos ol { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
  max-width: var(--medida);
  color: var(--slate200);
}
/* Los numeros toman los colores del indicador de progreso de la app: subir en
   cian, diseño en purpura, escuchar en verde. Quien ya vio la app reconoce la
   secuencia sin que nadie se la explique. */
.pasos li::before {
  content: counter(paso);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pasos li:nth-child(1)::before { color: var(--cian-luz); }
.pasos li:nth-child(2)::before { color: var(--purpura); }
.pasos li:nth-child(3)::before { color: var(--esmeralda); }

.seccion-titulo {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  color: var(--cian-luz);
}

/* --- Paginas de texto ---------------------------------------------------- */
.documento { padding: 2rem 0 4rem; max-width: var(--medida); }
/* La marca de la cabecera ya lleva a la portada, pero nadie la lee como un
   boton de volver. En una pagina legal, a la que casi siempre se llega desde
   fuera —desde la app o desde la ficha de la tienda—, la salida tiene que
   estar dicha con todas las letras. La flecha va en el CSS y no en el texto
   para que no haya que traducirla. */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--slate400);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.15s ease;
}
.volver::before { content: '\2190'; font-size: 1.05em; }
.volver:hover { color: var(--cian-luz); }
.volver:focus-visible { outline: 2px solid var(--ambar-luz); outline-offset: 3px; border-radius: 4px; }

.documento h1 {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--marfil);
  /* Una linea de acento bajo el titulo, con los tres colores de marca. */
  padding-bottom: 0.85rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--cian-luz), var(--purpura), var(--fucsia)) 1;
  border-width: 0 0 2px;
}
.documento .fecha { color: var(--slate400); font-size: 0.9rem; margin: 0 0 2.5rem; }
/* Los encabezados de seccion en cian: en documentos largos son el unico
   asidero para orientarse, y en marfil se confundian con el cuerpo al hojear.
   El color los convierte en puntos de anclaje visibles sin leer. */
.documento h2 {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate800);
  color: var(--cian-luz);
}
.documento h2:first-of-type { border-top: 0; padding-top: 0; }
.documento p, .documento li { color: var(--slate400); }
.documento strong { color: var(--slate200); font-weight: 600; }
.documento ul { padding-left: 1.1rem; }
.documento li { margin-bottom: 0.5rem; }

.destacado {
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
}
.destacado p:last-child { margin-bottom: 0; }

/* --- Pie ----------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--slate800);
  padding: 2rem 0 3rem;
  font-size: 0.9rem;
  color: var(--slate400);
}
.pie nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }
.pie p { margin: 0; }

@media (max-width: 34rem) {
  body { font-size: 16px; }
  .descarga { gap: 1.25rem; padding: 1.25rem; }
  .qr { width: 110px; height: 110px; }
  .marca-logo { width: 54px; height: 54px; }
  .marca-a, .marca-i { font-size: 2.3rem; }
  .marca-scolta { font-size: 2.6rem; }
  .marca-eslogan { font-size: 0.85rem; }
  .cabecera { gap: 0.5rem; }
}

/* ===========================================================================
   ELEMENTOS DEL PROTOTIPO
   
   El indicador de proceso, las tarjetas de caracteristicas, el reproductor
   didactico y las fichas de personalidad. Todo con los colores de la app.
   
   NADA DE ESTO ES FUNCIONAL: el reproductor no reproduce y las barras no miden
   nada. Son ilustraciones de lo que el usuario va a encontrar, y por eso no
   llevan controles que inviten a pulsarlos.
   =========================================================================== */

/* --- Esquema de proceso -------------------------------------------------- */
/* Antes eran dos cosas: un indicador decorativo arriba y cuatro tarjetas mas
   abajo diciendo lo mismo. Ahora es UNA sola: el esquema lleva la descripcion
   debajo de cada paso, asi que explica y ordena a la vez.
   Los cuatro encendidos porque aqui no hay progreso que marcar — es un mapa,
   no un estado. */
.proceso-seccion { padding: 0 0 4rem; }

.proceso-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.proceso-col { text-align: center; }

/* La linea recorre los cuatro pasos por detras de los discos, en vez de ser
   cuatro segmentos sueltos que se descuadran al cambiar el ancho. */
.proceso-rejilla::before {
  content: '';
  position: absolute;
  top: 1.7rem;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--cian-luz), var(--purpura), var(--naranja), var(--esmeralda));
  opacity: 0.55;
}

.proceso-col .proceso-disco { margin: 0 auto 0.8rem; position: relative; z-index: 1; }
.proceso-col h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.proceso-col p { margin: 0; font-size: 0.9rem; color: var(--slate400); line-height: 1.5; }

@media (max-width: 46rem) {
  .proceso-rejilla { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .proceso-rejilla::before { display: none; }
}
@media (max-width: 26rem) {
  .proceso-rejilla { grid-template-columns: 1fr; }
}

/* --- Indicador de proceso (compacto, sin uso actual) --------------------- */
/* Los cuatro pasos ENCENDIDOS a la vez. En la app se iluminan de uno en uno
   porque marcan progreso real; aqui no hay progreso que marcar, asi que
   mostrarlos todos convierte el indicador en lo que la web necesita: un mapa
   de lo que hace el producto. */
.proceso {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 1.5rem 0 3rem;
  overflow-x: auto;
}

.proceso-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  width: 5.5rem;
}

.proceso-disco {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  background: rgba(2,6,23,0.6);
}
.proceso-disco svg { width: 1.5rem; height: 1.5rem; }

.proceso-nombre { font-size: 0.9rem; font-weight: 700; white-space: nowrap; }

.p-subir    { color: var(--cian-luz); }
.p-diseno   { color: var(--purpura); }
.p-procesar { color: var(--naranja); }
.p-escuchar { color: var(--esmeralda); }

/* Las lineas heredan el degradado entre los dos pasos que unen, igual que en
   la app. Van alineadas al centro del disco, no de la columna entera. */
.proceso-linea {
  height: 2px;
  width: clamp(1.5rem, 6vw, 3.5rem);
  margin-top: 1.7rem;
  flex-shrink: 0;
  border-radius: 2px;
}
.l-1 { background: linear-gradient(90deg, var(--cian-luz), var(--purpura)); }
.l-2 { background: linear-gradient(90deg, var(--purpura), var(--naranja)); }
.l-3 { background: linear-gradient(90deg, var(--naranja), var(--esmeralda)); }

/* --- Sellos -------------------------------------------------------------- */
.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--slate800);
}
.sello {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--slate400);
}
.sello svg { color: var(--esmeralda); }
.sello svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* --- Frase de cierre ----------------------------------------------------- */
/* Siete paradas, no dos: con dos colores el degradado se lee como un color
   sucio. El recorrido es el mismo de la marca — fucsia, purpura, cian,
   esmeralda, ambar, naranja — y cierra volviendo al fucsia para que la
   animacion no de un salto al reiniciar el ciclo. */
.frase-marca {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: clamp(1.5rem, 4.2vw, 2.15rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  margin: 0 0 3.5rem;
  background: linear-gradient(100deg,
    var(--fucsia) 0%,
    var(--purpura) 16%,
    var(--cian-luz) 33%,
    var(--esmeralda) 50%,
    var(--ambar-luz) 66%,
    var(--naranja) 83%,
    var(--fucsia) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: deriva-color 18s linear infinite;
}

@keyframes deriva-color {
  from { background-position: 0% 50%; }
  to   { background-position: 260% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .frase-marca, .titular { animation: none; }
}

.seccion-bajada {
  color: var(--slate400);
  max-width: var(--medida);
  margin: -1.25rem 0 2rem;
}

/* --- La matriz ------------------------------------------------------------
   Los signos de multiplicar no son decoracion: son el argumento. Un lector que
   ve "15 personalidades, 10 formatos" piensa en una lista; viendo el signo
   entiende que se combinan. Por eso van marcados aria-hidden: para la vista
   dicen algo, leidos en voz alta solo estorban. */
.matriz {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}
.matriz li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}
.matriz b {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--marfil);
}
.matriz span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate400);
}
.matriz li:nth-child(1) b { color: var(--cian-luz); }
.matriz li:nth-child(3) b { color: var(--purpura); }
.matriz li:nth-child(5) b { color: var(--fucsia); }
.matriz li:nth-child(7) b { color: var(--naranja); }
.matriz li:nth-child(9) b { color: var(--esmeralda); font-size: 1.5rem; }
.matriz-por {
  font-size: 1.2rem;
  color: var(--slate700);
  align-self: center;
}

/* --- El dialogo a dos voces ---------------------------------------------- */
.dialogo {
  border-top: 1px solid var(--cristal);
  padding-top: 2rem;
}
.dialogo-titulo {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--esmeralda);
  margin: 0 0 0.5rem;
}
.dialogo-nota {
  color: var(--slate400);
  max-width: var(--medida);
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
}
/* El hilo es un objeto contenido, no burbujas flotando sobre el fondo: con
   marco y cabecera se lee como una pieza de la app y no como decoracion. */
.hilo {
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 20px;
  padding: 1.1rem 1.25rem 1.35rem;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hilo-cab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--cristal);
}
.hilo-chip {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--esmeralda);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}
.hilo-formato { font-size: 0.78rem; color: var(--slate400); }

/* Cada turno es avatar mas burbuja. El avatar es lo que convierte dos cajas
   desplazadas en una conversacion: sin el, la alternancia se lee como un
   error de maquetacion. */
.turno {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  max-width: 86%;
}
.turno-a { align-self: flex-start; }
.turno-b { align-self: flex-end; flex-direction: row-reverse; }

/* Iconos y no iniciales: en español las dos personalidades del ejemplo
   empiezan por E, asi que una letra no distinguiria nada. */
.avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-bottom: 0.15rem;
}
.avatar svg { width: 1.05rem; height: 1.05rem; }
.turno-a .avatar {
  color: var(--cian-luz);
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.3);
}
.turno-b .avatar {
  color: var(--naranja);
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.3);
}

.burbuja {
  padding: 0.7rem 1rem 0.8rem;
  border: 1px solid var(--cristal);
  background: var(--slate800);
}
/* La esquina cuadrada del lado del avatar da la sensacion de pico sin
   dibujarlo. */
.turno-a .burbuja { border-radius: 4px 16px 16px 16px; }
.turno-b .burbuja { border-radius: 16px 4px 16px 16px; text-align: right; }

.burbuja-quien {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.turno-a .burbuja-quien { color: var(--cian-luz); }
.turno-b .burbuja-quien { color: var(--naranja); }
.burbuja span { color: var(--slate200); line-height: 1.55; }

@media (max-width: 34rem) {
  .turno { max-width: 100%; }
  .hilo { padding: 1rem; }
}

.boton-grande {
  font-size: 1.05rem;
  padding: 0.9rem 1.9rem;
  margin-bottom: 2.25rem;
}

/* --- El reproductor de la portada ---------------------------------------- */
/* No es una maqueta generica de reproductor: lo que se ve es persona, formato
   e idioma, que es lo que la app hace y la competencia no. Las superficies y
   los radios son los de la app para que quien llegue desde la tienda
   reconozca lo mismo. */
.repro {
  position: relative;
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.4rem;
  width: 22rem;
  overflow: hidden;
}

/* Las cuatro fases de la app: subir, diseñar, procesar, escuchar. */
.repro-fases {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--cian) 0%, var(--purpura) 33%, var(--naranja) 66%, var(--esmeralda) 100%);
}

.repro-cab {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
}
.repro-icono {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: rgba(6,182,212,0.12);
  border: 1px solid rgba(6,182,212,0.3);
  color: var(--cian-luz);
  flex-shrink: 0;
}
.repro-icono svg { width: 1.2rem; height: 1.2rem; }
.repro-cab-texto { min-width: 0; flex: 1; }
.repro-archivo {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--marfil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repro-meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--slate400);
}
.repro-chip {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--esmeralda);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

.repro-onda {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 4.5rem;
  margin-bottom: 1rem;
}
.repro-onda i {
  flex: 1;
  min-width: 0;
  border-radius: 2px;
  background: var(--slate700);
}
/* Lo ya reproducido se colorea; lo que falta queda apagado. El limite lo mueve
   el reproductor, no una posicion fija. */
.repro-onda i {
  transition: background-color 0.18s linear, background 0.18s linear;
}
.repro-onda i.sonado {
  background: linear-gradient(180deg, var(--cian-luz), var(--purpura));
}
.repro-onda i.cabeza { background: var(--marfil); }

.repro-barra {
  height: 4px;
  border-radius: 999px;
  background: var(--slate800);
  margin-bottom: 0.5rem;
}
.repro-avance {
  position: relative;
  display: block;
  height: 100%;
  width: 48%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cian), var(--purpura), var(--fucsia));
}
.repro-avance b {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--marfil);
}

.repro-tiempos {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--slate400);
  margin-bottom: 1.15rem;
}

.repro-mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.repro-salto {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--slate400);
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  font-family: inherit;
  border-radius: 10px;
  transition: color 0.15s ease;
}
.repro-salto:hover { color: var(--marfil); }
.repro-salto svg { width: 1.5rem; height: 1.5rem; }
.repro-salto b {
  position: absolute;
  top: 56%;
  font-size: 0.5rem;
  font-weight: 700;
  transform: translateY(-50%);
}
.repro-play {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--cian);
  color: var(--slate950);
  box-shadow: 0 0 28px rgba(6,182,212,0.35);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.repro-play:hover { background: var(--cian-luz); box-shadow: 0 0 34px rgba(34,211,238,0.45); }
.repro-play svg { grid-area: 1 / 1; width: 1.5rem; height: 1.5rem; }
.repro-play .icono-play { margin-left: 2px; }
.repro-play .icono-pausa { display: none; }
.repro.sonando .repro-play .icono-play { display: none; }
.repro.sonando .repro-play .icono-pausa { display: block; }

/* La barra es pulsable para saltar a un punto, asi que lo dice el cursor. */
.repro-barra { cursor: pointer; }

.repro-play:focus-visible,
.repro-salto:focus-visible {
  outline: 2px solid var(--ambar-luz);
  outline-offset: 3px;
}

/* --- Rejilla de tarjetas ------------------------------------------------- */
/* Tres columnas fijas: con auto-fit, seis tarjetas quedaban en filas de dos y
   una suelta segun el ancho, que es justo el aspecto de "pegado sin orden". */
.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 4rem;
}
@media (max-width: 52rem) { .rejilla { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 16px;
  padding: 1.4rem;
}
.tarjeta h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.9rem 0 0.4rem;
  color: var(--marfil);
}
.tarjeta p { margin: 0; font-size: 0.93rem; color: var(--slate400); line-height: 1.55; }

/* El icono toma el color del tema de su tarjeta: asi la rejilla se lee como un
   conjunto ordenado y no como seis cosas sueltas del mismo tono. */
.tarjeta-icono {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.tarjeta-icono svg { width: 1.35rem; height: 1.35rem; }

.t-cian    .tarjeta-icono { background: rgba(34,211,238,0.14);  color: var(--cian-luz); }
.t-purpura .tarjeta-icono { background: rgba(168,85,247,0.14);  color: var(--purpura); }
.t-naranja .tarjeta-icono { background: rgba(249,115,22,0.14);  color: var(--naranja); }
.t-verde   .tarjeta-icono { background: rgba(16,185,129,0.14);  color: var(--esmeralda); }
.t-fucsia  .tarjeta-icono { background: rgba(217,70,239,0.14);  color: var(--fucsia); }
.t-ambar   .tarjeta-icono { background: rgba(234,179,8,0.14);   color: #EAB308; }

/* Numeradas: los pasos SI son secuencia, y el numero lo dice mejor que el orden
   de lectura en una rejilla que se reordena en movil. */
.tarjeta-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.9rem 0 0;
  opacity: 0.75;
}
.t-cian .tarjeta-num    { color: var(--cian-luz); }
.t-purpura .tarjeta-num { color: var(--purpura); }
.t-naranja .tarjeta-num { color: var(--naranja); }
.t-verde .tarjeta-num   { color: var(--esmeralda); }
.tarjeta-num + h3 { margin-top: 0.15rem; }

/* --- Reproductor didactico ----------------------------------------------- */
/* Ilustracion, no reproductor. Sin boton pulsable y marcado como decorativo:
   un control que parece activo y no responde es peor que no mostrarlo. */
.muestra { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin-bottom: 3.5rem; }
.muestra-titulo { font-size: 0.95rem; font-weight: 600; color: var(--marfil); margin: 0 0 0.3rem; }
.muestra-pie { font-size: 0.88rem; color: var(--slate400); margin: 0 0 1rem; }

.reproductor {
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 18px;
  padding: 1.4rem;
  text-align: center;
}
.repro-episodio { font-weight: 600; color: var(--marfil); margin: 0.8rem 0 0.2rem; font-size: 1rem; }
.repro-voces { font-size: 0.82rem; color: var(--cian-luz); margin: 0 0 1rem; }

.onda { display: flex; align-items: center; justify-content: center; gap: 3px; height: 3.2rem; }
.onda span {
  width: 3px;
  border-radius: 2px;
  background: var(--cian-luz);
  opacity: 0.85;
}

.repro-tiempos { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--slate400); margin: 0.6rem 0 1rem; font-variant-numeric: tabular-nums; }

.repro-controles { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.repro-btn { width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--slate400); }
.repro-btn svg { width: 1.1rem; height: 1.1rem; }
.repro-play {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--marfil); color: var(--slate950);
  display: grid; place-items: center;
}
.repro-play svg { width: 1.3rem; height: 1.3rem; }

/* --- Fichas de personalidad ---------------------------------------------- */
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

.persona {
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 16px;
  padding: 1.1rem;
  text-align: center;
}
.persona-icono { width: 2.8rem; height: 2.8rem; border-radius: 50%; margin: 0 auto 0.7rem; display: grid; place-items: center; }
.persona-icono svg { width: 1.4rem; height: 1.4rem; color: var(--marfil); }
.persona h4 { font-family: 'Philosopher', serif; font-size: 1rem; margin: 0 0 0.5rem; color: var(--marfil); }
.persona-voz {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--slate400);
  background: var(--slate800);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.9rem;
}

.rasgo { text-align: left; margin-bottom: 0.55rem; }
.rasgo-fila { display: flex; justify-content: space-between; font-size: 0.66rem; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.rasgo-nombre { color: var(--slate400); }
.barra { height: 4px; background: var(--slate800); border-radius: 3px; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 3px; }

@media (max-width: 34rem) {
  .proceso { justify-content: flex-start; padding-left: 0.25rem; }
  .proceso-paso { width: 4.6rem; }
  .proceso-disco { width: 2.9rem; height: 2.9rem; }
  .personas { grid-template-columns: 1fr; }
}

/* --- Portada a dos columnas ---------------------------------------------- */
/* El QR arriba y a la derecha, no al final. Es la accion que la pagina existe
   para provocar: enterrarla tras cuatro secciones obliga a leerlo todo antes
   de poder actuar. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 3rem;
  align-items: start;
  padding: 1rem 0 3rem;
}

.hero { align-items: center; }

/* Etiqueta de categoria: lo que es antes de lo que hace. */
/* Ambar: en la app es el color de las voces seleccionadas y del boton de
   generar. Aqui es el unico acento calido de la cabecera, asi que la etiqueta
   se separa del resto en vez de sumarse. El purpura estaba ya en el aro del
   logo, en el segundo paso y en varias tarjetas — repetirlo no daba jerarquia,
   solo mas de lo mismo. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(234,179,8,0.10);
  border: 1px solid rgba(234,179,8,0.32);
  color: #FACC15;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.etiqueta svg { width: 0.95rem; height: 0.95rem; }

.hero .titular { margin-bottom: 1.25rem; max-width: 15ch; }
.hero .entradilla { margin-bottom: 1.75rem; max-width: 46ch; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .repro { width: 100%; max-width: 22rem; }
}


/* --- Cierre -------------------------------------------------------------- */
/* Una sola llamada al final, con el QR repetido. Quien llega hasta abajo ya
   leyo el argumento: pedirle que suba a buscarlo seria perder el unico momento
   en que esta decidido. */
.cierre {
  text-align: center;
  padding: 4rem 0 5rem;
  border-top: 1px solid var(--slate800);
}
.cierre h2 {
  font-family: 'Philosopher', 'Noto Sans KR', Georgia, serif;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 1.5rem;
  max-width: 22ch;
  margin-inline: auto;
  background: linear-gradient(90deg, var(--fucsia), var(--purpura), var(--cian-luz));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cierre h2 { max-width: 20ch; }
.cierre-entradilla {
  color: var(--slate400);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0 auto 2.25rem;
}
.cierre-qr {
  display: inline-block;
  background: var(--slate900);
  border: 1px solid var(--cristal);
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}
.cierre .qr { width: 156px; height: 156px; margin-bottom: 0.75rem; }
.cierre-escanea { margin: 0; font-size: 0.85rem; color: var(--slate400); max-width: 18ch; }
.cierre .aviso-proximamente { margin-top: 0.9rem; }