/* Prototipo de la web (F3.1) — estilos comunes. Mismo mundo visual que los personajes: tinta #2a2433, crema, colores planos. */
@font-face { font-family: 'Inter'; font-weight: 800; src: url('fonts/Inter-ExtraBold.otf'); }
@font-face { font-family: 'Inter'; font-weight: 900; src: url('fonts/Inter-Black.otf'); }
/* fuentes de la apariencia del vídeo (estilo/fuentes.py las descarga; licencia OFL) */
@font-face { font-family: 'F-nunito'; font-weight: 200 1000; src: url('estilo/fuentes/Nunito.ttf'); }
@font-face { font-family: 'F-baloo'; font-weight: 400 800; src: url('estilo/fuentes/Baloo2.ttf'); }
@font-face { font-family: 'F-montserrat'; font-weight: 100 900; src: url('estilo/fuentes/Montserrat.ttf'); }
@font-face { font-family: 'F-lexend'; font-weight: 100 900; src: url('estilo/fuentes/Lexend.ttf'); }
@font-face { font-family: 'F-fredoka'; font-weight: 300 700; src: url('estilo/fuentes/Fredoka.ttf'); }
@font-face { font-family: 'F-quicksand'; font-weight: 300 700; src: url('estilo/fuentes/Quicksand.ttf'); }
@font-face { font-family: 'F-comfortaa'; font-weight: 300 700; src: url('estilo/fuentes/Comfortaa.ttf'); }
@font-face { font-family: 'F-rubik'; font-weight: 300 900; src: url('estilo/fuentes/Rubik.ttf'); }
@font-face { font-family: 'F-outfit'; font-weight: 100 900; src: url('estilo/fuentes/Outfit.ttf'); }
@font-face { font-family: 'F-sora'; font-weight: 100 800; src: url('estilo/fuentes/Sora.ttf'); }
@font-face { font-family: 'F-grandstander'; font-weight: 100 900; src: url('estilo/fuentes/Grandstander.ttf'); }
:root {
  --tinta: #2a2433; --crema: #f6ebd0; --papel: #fffaf0; --gris: #5f5468; --linea: #e6d9b8;
  --naranja: #f07d2a; --azul: #2f7fd0; --verde: #2aa6a0; --oro: #f2b632; --rojo: #d94a3a; --lila: #9b7fd4;
  --radio: 22px; --sombra: 0 4px 0 var(--tinta);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--crema); color: var(--tinta); font: 500 16px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
a { color: inherit; }
h1, h2, h3 { font-weight: 900; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 6vw, 60px); }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.chico { font-size: 14px; color: var(--gris); }
.oculto { display: none !important; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--crema); border-bottom: 3px solid var(--tinta); }
.cabecera .contenedor { display: flex; align-items: center; gap: 18px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; text-decoration: none; }
.logo svg { width: 40px; height: 40px; }
.menu { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.menu a { text-decoration: none; font-weight: 800; padding: 8px 12px; border-radius: 12px; }
.menu a:hover, .menu a.activo { background: var(--papel); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 900; font-size: 16px;
  padding: 12px 20px; border: 3px solid var(--tinta); border-radius: 14px; background: var(--naranja); color: var(--tinta);
  box-shadow: var(--sombra); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.boton.secundario { background: var(--papel); }
.boton.azul { background: var(--azul); color: #fff; }
.boton.peque { padding: 7px 12px; font-size: 14px; border-radius: 10px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* Tarjetas */
.tarjeta { background: var(--papel); border: 3px solid var(--tinta); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.rejilla { display: grid; gap: 20px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .r3, .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .r2, .r3, .r4 { grid-template-columns: minmax(0, 1fr); } .menu a:not(.boton) { padding: 6px 8px; } }

.etiqueta { display: inline-block; font-weight: 900; font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--oro); }
.etiqueta.ok { background: #bfe8c9; } .etiqueta.revisar { background: #ffe3a3; } .etiqueta.bloqueada { background: #f6b3aa; }
.etiqueta.cola { background: #cfe2f6; } .etiqueta.listo { background: #bfe8c9; }

/* Portada */
.heroe { padding: 56px 0 40px; }
.heroe .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
@media (max-width: 860px) { .heroe .contenedor { grid-template-columns: 1fr; } }
.heroe .sub { font-size: 20px; max-width: 560px; }
.escaparate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.escaparate .p { background: var(--papel); border: 3px solid var(--tinta); border-radius: 18px; aspect-ratio: 1 / 1.05; display: flex; align-items: center; justify-content: center; }
.escaparate svg { width: 92%; height: 92%; }
.pasos .num { width: 44px; height: 44px; border-radius: 50%; background: var(--oro); border: 3px solid var(--tinta); display: grid; place-items: center; font-weight: 900; font-size: 20px; margin-bottom: 10px; }
.seccion { padding: 44px 0; }
.banda { background: var(--tinta); color: var(--crema); }
.banda .tarjeta { color: var(--tinta); }
.pie { padding: 30px 0 40px; font-size: 14px; color: var(--gris); border-top: 3px solid var(--tinta); margin-top: 30px; }

/* Formularios */
label { display: block; font-weight: 800; margin: 12px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: inherit; padding: 11px 13px; border: 3px solid var(--tinta); border-radius: 12px; background: #fff; color: var(--tinta); }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--azul); outline-offset: 1px; }
.fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 620px) { .fila { grid-template-columns: 1fr; } }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { margin: 0; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones span { display: inline-block; padding: 8px 14px; border: 3px solid var(--tinta); border-radius: 12px; background: #fff; font-weight: 800; cursor: pointer; }
.opciones input:checked + span { background: var(--oro); }
.opciones input:focus-visible + span { outline: 3px solid var(--azul); }
.aviso { border: 3px solid var(--tinta); border-radius: 14px; padding: 12px 14px; background: #fff3d6; margin: 12px 0; }
.aviso.error { background: #fde0dc; } .aviso.bien { background: #ddf3e2; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }

/* Panel */
.panel { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding: 28px 0; }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }
.lateral { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) { .lateral { flex-direction: row; flex-wrap: wrap; } }
.lateral button { text-align: left; font: inherit; font-weight: 900; padding: 12px 14px; border: 3px solid var(--tinta); border-radius: 14px; background: var(--papel); cursor: pointer; color: var(--tinta); }
.lateral button.activo { background: var(--oro); }
.lienzo { background: repeating-linear-gradient(45deg, #fff8e6 0 14px, #fdf2d8 14px 28px); border: 3px solid var(--tinta); border-radius: var(--radio); display: grid; place-items: center; padding: 10px; }
.lienzo svg { width: 100%; max-width: 340px; height: auto; }
.mini-expr { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.mini-expr div { background: #fff; border: 2px solid var(--tinta); border-radius: 10px; text-align: center; font-size: 11px; font-weight: 800; padding: 2px; }
.mini-expr svg { width: 100%; height: auto; display: block; }
.plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.plan div { background: #fff; border: 2px solid var(--tinta); border-radius: 12px; padding: 8px 10px; }
.plan b { display: block; font-size: 20px; font-weight: 900; }
.video { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 520px) { .video { grid-template-columns: 1fr; } }
.portada { border: 3px solid var(--tinta); border-radius: 14px; overflow: hidden; background: var(--crema); display: grid; place-items: center; }
.portada.v { aspect-ratio: 9 / 16; } .portada.h { aspect-ratio: 16 / 9; }
.portada svg { width: 100%; height: 100%; }
.lista-personajes { display: flex; flex-wrap: wrap; gap: 10px; }
.lista-personajes button { width: 92px; padding: 4px; background: #fff; border: 3px solid var(--tinta); border-radius: 14px; cursor: pointer; font: inherit; font-weight: 800; font-size: 12px; color: var(--tinta); }
.lista-personajes button.activo { background: var(--oro); }
.lista-personajes svg { width: 100%; height: auto; display: block; }

/* F3.2 · accesibilidad y pulido */
.saltar { position: absolute; left: -999px; top: 8px; background: var(--oro); border: 3px solid var(--tinta); border-radius: 10px; padding: 8px 12px; font-weight: 900; z-index: 20; }
.saltar:focus { left: 12px; }
a:focus-visible, button:focus-visible, .boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.pie-filas { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.pie-filas .logo { font-size: 18px; color: var(--tinta); }
.pie nav a { font-weight: 800; }
@media (max-width: 760px) { .pie-filas { grid-template-columns: 1fr; gap: 10px; } }
.escena svg { width: 100%; height: auto; display: block; }
.fila-personajes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fila-personajes div { background: var(--papel); border: 3px solid var(--tinta); border-radius: 16px; }
.fila-personajes svg { width: 100%; height: auto; display: block; }
@media (max-width: 620px) { .fila-personajes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.faq details { background: var(--papel); border: 3px solid var(--tinta); border-radius: 16px; padding: 14px 18px; }
.faq summary { font-weight: 900; cursor: pointer; font-size: 18px; }
.faq details[open] summary { margin-bottom: 8px; }
.vacio { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
.vacio svg { width: 100%; height: auto; }
@media (max-width: 520px) { .vacio { grid-template-columns: 1fr; } .vacio > div:first-child { width: 120px; } }
@media (max-width: 860px) {
  .lateral #hola { flex-basis: 100%; }
  .lateral button { flex: 1 1 0; text-align: center; padding: 10px 8px; }
}

/* Precios */
.plan-precio { display: flex; flex-direction: column; }
.plan-precio .cifra { font-size: 46px; font-weight: 900; line-height: 1; margin: 8px 0; }
.plan-precio ul { padding-left: 20px; flex: 1; }
.plan-precio.destacado { background: #fff1d1; transform: translateY(-8px); }
.ejemplo { background: #fde0dc; border: 2px dashed var(--rojo); border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 14px; display: inline-block; }
@media (max-width: 620px) {
  .cabecera .contenedor { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 6px; }
  .menu { margin-left: 0; width: 100%; }
  .logo { font-size: 19px; } .logo svg { width: 32px; height: 32px; }
}

/* Pedir vídeo: voces y apariencia */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.filtros button { font: inherit; font-weight: 800; font-size: 14px; padding: 6px 12px; border: 2px solid var(--tinta); border-radius: 999px; background: #fff; cursor: pointer; color: var(--tinta); }
.filtros button.activo { background: var(--oro); }
.voces { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.voz { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 10px 12px; border: 3px solid var(--tinta); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--tinta); }
.voz.activo { background: var(--oro); }
.voz b { font-size: 17px; font-weight: 900; }
.voz small { grid-column: 1 / -1; color: var(--gris); font-weight: 700; font-size: 12px; }
.escuchar { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--papel); cursor: pointer; font-size: 15px; display: grid; place-items: center; color: var(--tinta); }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.temas button { padding: 0; border: 3px solid var(--tinta); border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; font: inherit; font-weight: 900; font-size: 13px; color: var(--tinta); }
.temas button.activo { outline: 4px solid var(--naranja); outline-offset: 2px; }
.temas svg { display: block; width: 100%; height: auto; }
.temas span { display: block; padding: 4px 6px; }
.apariencia { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; margin-top: 12px; }
.apariencia .vista svg { width: 100%; height: auto; display: block; border: 3px solid var(--tinta); border-radius: 16px; }
@media (max-width: 620px) { .apariencia { grid-template-columns: 1fr; } .apariencia .vista { max-width: 220px; } }
.colores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.colores input[type=color] { width: 100%; height: 40px; border: 3px solid var(--tinta); border-radius: 10px; padding: 2px; background: #fff; }
.pestanas { display: flex; gap: 6px; margin: 6px 0 12px; flex-wrap: wrap; }
.pestanas button { font: inherit; font-weight: 900; font-size: 14px; padding: 8px 14px; border: 3px solid var(--tinta); border-radius: 12px; background: #fff; cursor: pointer; color: var(--tinta); }
.pestanas button.activo { background: var(--oro); }
.acciones-temas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.mi-color { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mi-color label { margin: 0; }
.mi-color input[type=color] { width: 46px; height: 36px; border: 3px solid var(--tinta); border-radius: 10px; padding: 2px; background: #fff; }
details.mas { margin-top: 10px; } details.mas summary { font-weight: 900; cursor: pointer; }
.modo { margin: 0 0 14px; } .modo span { font-size: 17px; }
.lista-personajes .sin-personaje { font-size: 13px; min-height: 92px; }