/* SCROLL dentro de utnlabs.com: siempre en papel (sin modo oscuro), como la academia.
   Sistema: papel bone #DED8C2, tinta #2C2C2A, coral #D85A30 sólo en lo que no es texto (barra, filetes, bloques) y
   #9C3A18 para texto y links coral (4,85:1 sobre el papel). Newsreader para leer, Archivo para etiquetar.
   Spec: docs/superpowers/specs/2026-11-04-scroll-marca-utnlabs.md. */
.scroll {
  --s-papel: #DED8C2;
  --s-papel-2: #E8E3D2;
  --s-tinta: #2C2C2A;
  --s-tinta-2: #4A4A46;
  --s-coral: #D85A30;
  --s-coral-texto: #9C3A18;
  --s-error: #8F1D1D;
  --s-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --s-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  background: var(--s-papel);
  color: var(--s-tinta);
  font-family: var(--s-serif);
  border-right: 6px solid var(--s-coral); /* la barra de scroll de la marca */
  min-height: 80vh;
}
.scroll a { color: var(--s-coral-texto); }
.scroll-cabeza { max-width: 760px; margin: 0 auto; padding: 28px 24px 8px; border-bottom: 2px solid var(--s-tinta); }
.scroll-volver { font-family: var(--s-sans); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.scroll-logo { font-family: var(--s-sans); font-weight: 900; font-size: clamp(44px, 9vw, 84px); letter-spacing: -.02em; line-height: 1; margin: 14px 0 4px; }
.scroll-lema { font-style: italic; margin: 0 0 14px; color: var(--s-tinta-2); }
.scroll-hoja { max-width: 760px; margin: 0 auto; padding: 28px 24px 72px; }
.scroll-centro { text-align: center; }
.scroll-titulo { font-family: var(--s-sans); font-weight: 800; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; margin: 8px 0 12px; }
.scroll-bajada { font-size: 19px; line-height: 1.5; }
.scroll-firma { font-style: italic; font-size: 20px; }
.scroll-confianza { margin: 20px 0; padding: 16px 20px; border-left: 4px solid var(--s-coral); background: var(--s-papel-2); font-size: 18px; line-height: 1.5; }
.scroll-confianza p { margin: 0 0 8px; }
.scroll-confianza p:last-child { margin: 0; }

/* El formulario del sitio, en papel. */
.scroll .formulario { background: var(--s-papel-2); border: 1px solid rgba(44, 44, 42, .25); color: var(--s-tinta); font-family: var(--s-serif); }
.scroll .campo label, .scroll legend { color: var(--s-tinta); font-family: var(--s-sans); }
.scroll .campo--check label { font-family: var(--s-serif); font-size: 17px; }
.scroll .campo__ayuda, .scroll .campo__opc { color: var(--s-tinta-2); }
.scroll .campo__req { color: var(--s-coral-texto); }
.scroll .campo input, .scroll .campo textarea, .scroll .campo select {
  background: #FFFDF7; color: var(--s-tinta); border: 1px solid rgba(44, 44, 42, .45);
}
.scroll .campo input:focus, .scroll .campo textarea:focus, .scroll .campo select:focus { border-color: var(--s-tinta); box-shadow: 0 0 0 3px rgba(216, 90, 48, .35); }
.scroll .campo--error input, .scroll .campo--error textarea, .scroll .campo--error select { border-color: var(--s-error); }
.scroll .campo__error { color: var(--s-error); }
.scroll .aviso { background: #F3D9CF; border-color: var(--s-coral); color: var(--s-tinta); }
.scroll .aviso--ok { background: #DCE8D2; border-color: #4C6B3A; }
.scroll input[type="file"] { padding: 12px; cursor: pointer; }
.scroll-quiero, .scroll-fotos { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.scroll-quiero legend, .scroll-fotos legend { font-weight: 700; margin-bottom: 8px; }
.scroll-fotos { border-top: 1px solid rgba(44, 44, 42, .25); padding-top: 18px; }
.scroll-declaracion { border-top: 1px solid rgba(44, 44, 42, .25); padding-top: 18px; }
.scroll-declaracion label span { font-style: italic; font-size: 19px; }
.scroll-privacidad { margin: 8px 0; font-size: 16px; line-height: 1.5; }
.scroll-privacidad summary { font-family: var(--s-sans); font-weight: 700; cursor: pointer; }
.scroll-ley { font-size: 14px; color: var(--s-tinta-2); }
.scroll .boton.scroll-boton { background: var(--s-tinta); color: var(--s-papel); border-color: var(--s-tinta); font-family: var(--s-sans); }
.scroll .boton.scroll-boton:hover { background: #000; }
.scroll .boton--fantasma { color: var(--s-tinta); border-color: var(--s-tinta); background: transparent; }

/* ── v2 (Axel, 4/11/2026): la portada, la elección, los checkboxes propios y la página de los códigos ── */
.scroll .boton.scroll-boton { box-shadow: none; }

/* La portada: la estética de la presentación (N.º 01): barra con la regla coral, tapa en papel claro con la foto. */
.scroll-portada { max-width: 1080px; margin: 0 auto; padding: 20px 24px 0; }
.scroll-portada__barra { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 3px solid var(--s-coral); }
.scroll-kicker { font-family: var(--s-sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--s-tinta-2); }
.scroll-portada__tapa { display: grid; margin-top: 24px; background: var(--s-papel-2); box-shadow: 0 22px 44px -28px rgba(44, 44, 42, .55); overflow: hidden; }
.scroll-portada__texto { padding: 24px 22px 30px; }
.scroll-portada__texto .scroll-logo { margin-top: 0; }
.scroll-portada__texto .scroll-titulo { margin-top: 22px; }
.scroll-portada__texto .scroll-bajada p { margin: 0; }
.scroll-portada__foto { margin: 0; order: -1; }
.scroll-portada__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 42%; }
@media (min-width: 820px) {
  .scroll-portada { padding-top: 28px; }
  .scroll-portada__tapa { grid-template-columns: 1.2fr .8fr; min-height: 460px; }
  .scroll-portada__texto { padding: 52px 48px; align-self: center; }
  .scroll-portada__foto { order: 0; }
  .scroll-portada__foto img { height: 100%; aspect-ratio: auto; object-position: 70% 45%; }
}

/* El formulario: bloques con su título, una sola leyenda «* obligatorio». */
.scroll-form { gap: 22px; }
.scroll-obligatorio { margin: 0; font-family: var(--s-sans); font-size: 14px; color: var(--s-tinta-2); }
.scroll-bloque { display: grid; gap: 18px; border-top: 1px solid rgba(44, 44, 42, .25); padding-top: 20px; }
.scroll-resto { display: grid; gap: 22px; }
.scroll-subtitulo { margin: 0; font-family: var(--s-sans); font-weight: 800; font-size: 20px; line-height: 1.25; }
.scroll-sinjs { font-weight: 500; font-size: 15px; color: var(--s-tinta-2); }
.scroll-explica { margin: 0; font-size: 17px; line-height: 1.5; }
.scroll .campo label { font-weight: 700; font-size: 15px; }
.scroll .campo__ayuda { font-size: 14px; line-height: 1.45; }
.scroll .campo__error { font-family: var(--s-sans); font-size: 14px; }

/* La elección: dos tarjetas con su radio, alineado con la primera línea. */
.scroll-modo { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.scroll-modo legend, .scroll-quiero legend { padding: 0; margin-bottom: 10px; font-family: var(--s-sans); font-weight: 800; font-size: 20px; color: var(--s-tinta); }
.scroll-quiero legend { font-size: 15px; font-weight: 700; }
.scroll-quiero legend .campo__opc { font-weight: 400; }
@media (min-width: 640px) { .scroll-modo { grid-template-columns: 1fr 1fr; } .scroll-modo legend { grid-column: 1 / -1; } }
.scroll-opcion {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; row-gap: 4px; align-items: start;
  padding: 16px 18px; border: 1.5px solid rgba(44, 44, 42, .35); border-radius: 12px; background: #FFFDF7; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.scroll-opcion:hover { border-color: var(--s-tinta); }
.scroll-opcion:has(input:checked) { border-color: var(--s-tinta); background: var(--s-papel); box-shadow: inset 0 0 0 1px var(--s-tinta); }
.scroll-opcion input[type="radio"] {
  appearance: none; -webkit-appearance: none; grid-row: 1 / span 2; width: 22px; height: 22px; margin: 0; padding: 0;
  border: 1.5px solid var(--s-tinta); border-radius: 50%; background: #FFFDF7; cursor: pointer;
}
.scroll-opcion input[type="radio"]:checked { border-width: 7px; }
.scroll-opcion input[type="radio"]:focus-visible { outline: 3px solid var(--s-coral-texto); outline-offset: 2px; }
.scroll-opcion__titulo { font-family: var(--s-sans); font-weight: 700; font-size: 16px; line-height: 22px; }
.scroll-opcion__ayuda { font-size: 15px; line-height: 1.4; color: var(--s-tinta-2); }
.scroll-modo .campo__error { grid-column: 1 / -1; margin: 0; }
.scroll-modo.campo--error .scroll-opcion { border-color: var(--s-error); }

/* Los checkboxes: propios (sin la caja de 48 px de .campo input ni el anillo de foco), alineados con la primera línea. */
.scroll-quiero { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.scroll-check { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.scroll-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0;
  display: grid; place-content: center; border: 1.5px solid var(--s-tinta); border-radius: 4px; background: #FFFDF7;
  box-shadow: none; cursor: pointer;
}
.scroll-check input[type="checkbox"]:checked { background: var(--s-tinta); }
.scroll-check input[type="checkbox"]:checked::after {
  content: ""; width: 6px; height: 11px; border: solid var(--s-papel); border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}
.scroll-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--s-coral-texto); outline-offset: 2px; }
.scroll-check.campo--error input[type="checkbox"] { border-color: var(--s-error); border-width: 2px; }
.scroll-check label { display: grid; gap: 3px; cursor: pointer; }
.scroll-check__titulo { font-family: var(--s-sans); font-weight: 700; font-size: 16px; line-height: 22px; }
.scroll-check__ayuda { font-size: 16px; line-height: 1.45; color: var(--s-tinta-2); }
.scroll-check .campo__error { grid-column: 2; margin: 4px 0 0; }
.scroll-quiero .scroll-check { padding: 14px 16px; border: 1px solid rgba(44, 44, 42, .22); border-radius: 12px; background: #FFFDF7; }
.scroll-quiero .scroll-check:has(input:checked) { border-color: var(--s-tinta); }
.scroll-quiero.campo--error .scroll-check { border-color: var(--s-error); }
.scroll-quiero > .campo__error { margin: 0; }

/* Las fotos: la pública y las privadas, cada una con su rótulo. */
.scroll-foto { display: grid; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 1px dashed rgba(44, 44, 42, .4); }
.scroll-foto--privada { background: rgba(44, 44, 42, .04); }
.scroll-foto__rotulo { margin: 0; font-family: var(--s-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--s-coral-texto); }
.scroll .campo input[type="file"] { min-height: 0; padding: 10px; font-family: var(--s-sans); font-size: 15px; }
.scroll input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; margin-right: 12px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--s-tinta); background: transparent; color: var(--s-tinta);
}
.scroll input[type="file"]::file-selector-button:hover { background: var(--s-tinta); color: var(--s-papel); }

/* El cierre: el código de honor pegado a la declaración jurada, el consentimiento y el botón. */
.scroll-cierre { gap: 20px; }
.scroll-honor { display: grid; gap: 12px; padding: 18px 20px; background: var(--s-papel); border-left: 4px solid var(--s-coral); }
.scroll-honor ul { margin: 0; padding-left: 1.1em; font-size: 18px; line-height: 1.5; }
.scroll-honor li + li { margin-top: 2px; }
.scroll-check--firma .scroll-check__titulo { font-family: var(--s-serif); font-style: italic; font-weight: 600; font-size: 18px; }
.scroll-cierre .boton.scroll-boton { justify-self: start; }
.scroll-despues { margin-top: -8px; }

/* Lo que se ve según la elección (scroll.js pone data-js y data-modo). Sin JS se ve todo. */
.scroll-form[data-js] .sin-js { display: none !important; }
.scroll-form:not([data-js]) .con-js { display: none !important; }
.scroll-form[data-js][data-modo=""] .scroll-resto { display: none; }
.scroll-form[data-js][data-modo="recibir"] .solo-participar { display: none !important; }
.scroll-form[data-js][data-modo="participar"] .solo-recibir { display: none !important; }

/* La página de los códigos. */
.scroll-codigo { border-top: 1px solid rgba(44, 44, 42, .25); padding: 20px 0 8px; }
.scroll-codigo .scroll-subtitulo { margin-bottom: 12px; }
.scroll-codigo__destino { font-weight: 500; color: var(--s-tinta-2); font-size: 17px; margin-left: 6px; }
.scroll-codigo__form { display: grid; gap: 12px; max-width: 420px; }
.scroll-codigo__form .campo input { font-family: var(--s-sans); font-size: 26px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.scroll-codigo__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.scroll-link { background: none; border: 0; padding: 10px 2px; font-family: var(--s-sans); font-size: 15px; font-weight: 600; color: var(--s-coral-texto); text-decoration: underline; cursor: pointer; }
.scroll-ok { margin: 0; font-family: var(--s-sans); font-weight: 700; font-size: 17px; color: #2F5A1E; }
.scroll .aviso--suave { background: var(--s-papel-2); border-color: rgba(44, 44, 42, .3); color: var(--s-tinta); }
@media (max-width: 819px) {
  .scroll-portada { padding: 14px 16px 0; }
  .scroll-portada__tapa { margin-top: 16px; }
  .scroll-portada__foto img { aspect-ratio: 16 / 10; }
  .scroll-portada .scroll-logo { font-size: 48px; }
  .scroll-portada__texto { padding: 18px 18px 22px; }
  .scroll-portada__texto .scroll-titulo { margin-top: 14px; font-size: 28px; }
  .scroll-portada .scroll-bajada { font-size: 17px; }
  .scroll-hoja { padding: 20px 12px 56px; }
  .scroll .formulario { padding: 20px 16px; border-radius: 16px; }
}
.scroll-cierre > .scroll-check .scroll-check__titulo { font-family: var(--s-serif); font-weight: 500; font-size: 16px; line-height: 22px; }