/* style.css
 *
 * Reglas que vienen del encargo y conviene no romper sin querer:
 * sin degradados, sin sombras bajo las tarjetas, sin esquinas redondeadas por
 * todas partes y sin iconos de librería. Las formas son rectas y los bordes son
 * líneas de tinta, que es lo que casa con el dibujo de la sección de arriba.
 *
 * Tipografías del sistema a propósito: el encargo prohíbe cargar nada desde un
 * CDN, y Google Fonts lo es. Si quieres una tipografía concreta, hay que dejar
 * los .woff2 en /fonts/ y declarar aquí la @font-face; entonces cambian las dos
 * variables de abajo y nada más.
 */

:root {
  --papel:      #F2EDE2;
  --verde:      #6E7F6A;
  --verde-osc:  #47564A;
  --gris-verde: #8E9A8B;
  --tinta:      #3A3D38;

  --titular: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --texto: -apple-system, system-ui, "Segoe UI", sans-serif;

  --columna: 34rem;
  --tactil: 56px;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* Las reglas de abajo fijan display en botones y demás, y eso gana a la regla
   del navegador para [hidden]. Sin esto, lo oculto se ve. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.6 var(--texto);
  -webkit-text-size-adjust: 100%;
}

/* --- estructura ----------------------------------------------------------- */

.banda {
  max-width: var(--columna);
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}
.banda + .banda { padding-top: 1rem; }

/* La primera pantalla va apretada a propósito: el botón de grabar tiene que
   caber sin hacer scroll en un móvil pequeño. */
.portada { padding-top: 2rem; padding-bottom: 2rem; }
.portada h1 { font-size: clamp(1.85rem, 7.5vw, 2.6rem); margin-bottom: .8rem; }
.portada .entrada { margin-bottom: 1.6rem; }
.portada .boton--grande { margin: 1.1rem 0 .3rem; }
.portada textarea { min-height: 5.2rem; }

.trato { font-size: .92rem; color: var(--verde); margin: .2rem 0 1.4rem; }

.atajos { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.atajos a {
  color: var(--verde-osc);
  font-size: .95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid var(--gris-verde);
}
.atajos a:hover { border-bottom-color: var(--verde-osc); }

h1 {
  font: 400 clamp(2rem, 8vw, 2.9rem)/1.12 var(--titular);
  margin: 0 0 1.2rem;
  letter-spacing: -.01em;
}
h2 {
  font: 400 clamp(1.45rem, 5.5vw, 1.9rem)/1.2 var(--titular);
  margin: 0 0 1.2rem;
}
h3 {
  font: 400 1.15rem/1.3 var(--titular);
  color: var(--verde-osc);
  margin: 2.5rem 0 .9rem;
}
p { margin: 0 0 1rem; }

.entrada { font-size: 1.08rem; }
.aparte { color: var(--verde); font-size: .95rem; }

/* --- botones -------------------------------------------------------------- */

.boton {
  display: block;
  width: 100%;
  min-height: var(--tactil);
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--verde-osc);
  background: var(--verde-osc);
  color: var(--papel);
  font: 500 1.02rem/1.2 var(--texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.boton:hover { background: var(--tinta); border-color: var(--tinta); }
.boton--linea { background: none; color: var(--verde-osc); }
.boton--linea:hover { background: var(--verde-osc); color: var(--papel); }
.boton--grande { min-height: 68px; font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.boton[disabled] { opacity: .45; cursor: default; }
.boton[disabled]:hover { background: var(--verde-osc); border-color: var(--verde-osc); }

a:focus-visible, button:focus-visible, summary:focus-visible,
textarea:focus-visible, audio:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* --- cómo funciona -------------------------------------------------------- */

.pasos { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: paso; }
.pasos li {
  counter-increment: paso;
  display: flex;
  gap: .9rem;
  padding: .55rem 0;
}
.pasos li::before {
  content: counter(paso);
  font: 400 1.35rem/1 var(--titular);
  color: var(--gris-verde);
  min-width: 1.3rem;
}
.dibujo { margin: 2rem 0 1.5rem; }
.dibujo img { display: block; width: 100%; height: auto; }

/* --- vídeos --------------------------------------------------------------- */

.videos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.videos video { display: block; width: 100%; aspect-ratio: 9 / 16; background: var(--verde-osc); }

/* --- temáticas ------------------------------------------------------------ */

.tematica { border-top: 1px solid var(--gris-verde); }
.tematica:last-child { border-bottom: 1px solid var(--gris-verde); }
.tematica summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 0;
  min-height: var(--tactil);
}
.tematica summary::-webkit-details-marker { display: none; }
.tematica__nombre {
  display: block;
  font: 400 1.12rem/1.3 var(--titular);
}
.tematica__proposito { display: block; color: var(--verde); font-size: .93rem; margin-top: .2rem; }
.tematica[open] .tematica__nombre { color: var(--verde-osc); }

.plantillas { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.plantillas button {
  display: block;
  width: 100%;
  min-height: var(--tactil);
  text-align: left;
  padding: .95rem 1rem;
  margin-bottom: .5rem;
  border: 1px solid var(--gris-verde);
  background: none;
  color: var(--tinta);
  font: 400 1rem/1.45 var(--texto);
  cursor: pointer;
}
.plantillas button:hover { border-color: var(--verde-osc); background: rgba(110,127,106,.09); }

/* --- canciones ------------------------------------------------------------ */

.canciones { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cancion__portada { display: block; width: 100%; aspect-ratio: 1; }
.cancion__nombre { font: 400 1.3rem/1.2 var(--titular); margin: .9rem 0 .25rem; }
.cancion__desc { color: var(--verde); font-size: .95rem; margin: 0 0 .8rem; }
.cancion audio { width: 100%; margin-top: .4rem; }
.cancion__aviso {
  display: none;
  font-size: .88rem;
  color: var(--verde-osc);
  border-left: 2px solid var(--verde-osc);
  padding-left: .6rem;
  margin: 0 0 .6rem;
}
.cancion.con-voz .cancion__aviso { display: block; }

/* --- grabadora ------------------------------------------------------------ */

.etiqueta {
  display: block;
  font-size: .88rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: .5rem;
}
textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid var(--gris-verde);
  background: none;
  color: var(--tinta);
  font: 400 1.08rem/1.5 var(--texto);
  resize: vertical;
}
textarea:focus { border-color: var(--verde-osc); }

.hueco { margin: 1.4rem 0 0; }
.hueco canvas { display: block; width: 100%; height: 76px; border: 1.5px solid var(--gris-verde); }
.hueco__pie { font-size: .88rem; color: var(--verde); margin: .5rem 0 0; }

.estado { min-height: 1.5em; font-size: .95rem; color: var(--verde-osc); margin: .4rem 0 0; }

.elegir { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1rem; }
.elegir button {
  min-height: var(--tactil);
  padding: .8rem;
  border: 1.5px solid var(--gris-verde);
  background: none;
  color: var(--tinta);
  font: 400 1rem/1.3 var(--texto);
  cursor: pointer;
}
.elegir button[aria-pressed="true"] {
  border-color: var(--verde-osc);
  background: var(--verde-osc);
  color: var(--papel);
}

#reproductor { width: 100%; margin-bottom: 1.5rem; }

.compra { margin-bottom: 2rem; }
.compra .boton { margin-bottom: .6rem; }
.compra__nota { font-size: .88rem; color: var(--verde); margin: 0 0 1rem; }

/* Mientras se graba, la página se aparta: la persona está leyendo su frase en
   voz alta y cualquier cosa que se mueva alrededor estorba. La frase y el hueco
   siguen a plena intensidad. */
body.grabando .banda:not(.grabadora),
body.grabando .pie { opacity: .18; }
body.grabando .banda { transition: opacity .4s ease; }
body.grabando .grabadora .etiqueta,
body.grabando .grabadora h2 { color: var(--verde-osc); }
body.grabando .hueco canvas { border-color: var(--verde-osc); }

.pie { color: var(--gris-verde); font-size: .88rem; padding-top: 1rem; padding-bottom: 4rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}