@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/atkinson-400.woff2) format("woff2") }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/atkinson-700.woff2) format("woff2") }
@font-face { font-family: "Playwrite MX"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/playwrite-mx.woff2) format("woff2") }

:root {
  --azul: #1D3FA8; --rojo: #C3261C; --tinta: #1B1B1B; --gris: #4a4a4a;
  --renglon: #A9BCE6; --renglon-rojo: #E8A7AF; --margen: #E39AA6;
  --paso: 40px; --margen-x: 28px;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; color: var(--tinta); font: 18px/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
  background-color: #fff;
  /* cuaderno de doble raya: renglón azul y rojo en pares, margen rosa a la izquierda */
  background-image:
    linear-gradient(90deg, transparent calc(var(--margen-x) - 2px), var(--margen) calc(var(--margen-x) - 2px), var(--margen) var(--margen-x), transparent var(--margen-x)),
    repeating-linear-gradient(to bottom, transparent 0 26px, var(--renglon) 26px 27px, transparent 27px 34px, var(--renglon-rojo) 34px 35px, transparent 35px var(--paso));
}
a { color: var(--azul) }
.hoja { max-width: 980px; margin: 0 auto; padding: 0 20px 0 calc(var(--margen-x) + 16px) }
.letra { font-family: "Playwrite MX", cursive; font-weight: 400; color: var(--azul) }
h1, h2 { font-family: "Playwrite MX", cursive; font-weight: 400; color: var(--azul); line-height: 1.5 }
h1 { font-size: 52px; margin: 0 0 8px }
h2 { font-size: 30px; margin: 56px 0 14px }
h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; color: var(--rojo); margin: 28px 0 6px }
p { margin: 0 0 14px }
.recreo { font-family: "Playwrite MX", cursive; color: var(--rojo); font-size: 16px; text-align: right; padding-top: 14px }

/* portada */
.portada { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; padding-top: 8px }
.portada .sub { font-weight: 700; font-size: 22px; line-height: 1.3 }
.portada .frase { font-size: 20px }
.portada img { width: 100%; max-width: 420px; height: auto; display: block; border: 1px solid #d9dfee; box-shadow: 0 2px 10px rgba(0,0,0,.08) }
@media (min-width: 820px) {
  .portada { grid-template-columns: 1.1fr .9fr; gap: 40px; padding-top: 28px }
  h1 { font-size: 68px }
}

/* compra */
.compra { margin: 22px 0 6px }
.precio { font-size: 34px; font-weight: 700; margin: 0 }
.precio small { font-size: 16px; font-weight: 400; color: var(--gris) }
.boton {
  display: inline-block; margin-top: 10px; padding: 14px 34px; min-height: 52px;
  font: 700 21px/1.2 "Atkinson Hyperlegible", sans-serif; color: #fff; background: var(--azul);
  border: 2px solid #142d7a; border-radius: 4px; cursor: pointer; text-decoration: none;
}
.boton:hover, .boton:focus-visible { background: #142d7a }
.boton:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px }
.boton[disabled] { opacity: .6; cursor: wait }
.nota { font-size: 15px; color: var(--gris); margin-top: 10px }
.aviso { font-size: 15px; color: var(--gris); border-left: 3px solid var(--margen); padding-left: 10px }
.alerta { border: 2px solid var(--rojo); background: #fff; padding: 12px 14px; margin: 16px 0; font-weight: 700 }

/* contenido */
.lista { list-style: none; padding: 0; margin: 0 }
.lista li { position: relative; padding: 4px 0 4px 22px }
.lista li::before { content: "•"; position: absolute; left: 4px; color: var(--rojo); font-weight: 700 }
.muestras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px }
.muestras figure { margin: 0 }
.muestras img { width: 100%; height: auto; display: block; border: 1px solid #cfd6e8; box-shadow: 0 2px 8px rgba(0,0,0,.08); background: #fff }
.muestras figcaption { font-size: 14px; color: var(--gris); margin-top: 6px }
@media (max-width: 640px) {
  .muestras { grid-template-columns: 1fr 1fr; overflow-x: auto }
  .muestras figure:last-child { grid-column: span 2; max-width: 50%; justify-self: center }
}
.ia { background: #fff; border: 1px dashed var(--renglon); padding: 10px 12px }
details { background: #fff; border-bottom: 1px solid var(--renglon); padding: 10px 0 }
summary { cursor: pointer; font-weight: 700; font-size: 18px }
details p { margin: 8px 0 4px }

footer { margin: 60px 0 0; padding: 20px 0 40px; font-size: 15px; color: var(--gris); border-top: 1px solid var(--renglon) }
footer a { margin-right: 14px }

/* aviso de cookies del pixel */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; max-width: 640px; margin: 0 auto; z-index: 10;
  background: #fff; border: 2px solid var(--azul); box-shadow: 0 4px 18px rgba(0,0,0,.15); padding: 14px 16px; font-size: 15px;
}
.consent p { margin: 0 0 10px }
.consent button { font: 700 16px "Atkinson Hyperlegible", sans-serif; padding: 9px 16px; margin-right: 8px; border-radius: 4px; cursor: pointer; border: 2px solid var(--azul) }
.consent .si { background: var(--azul); color: #fff }
.consent .no { background: #fff; color: var(--azul) }

/* descarga */
.caja { background: #fff; border: 1px solid var(--renglon); padding: 18px 20px; margin: 20px 0; max-width: 640px }
.enlace { display: flex; gap: 8px; flex-wrap: wrap }
.enlace input { flex: 1 1 260px; font: 15px monospace; padding: 8px; border: 1px solid #aaa; min-width: 0 }
.enlace button { font: 700 15px "Atkinson Hyperlegible", sans-serif; padding: 8px 14px; cursor: pointer }
[hidden] { display: none !important }