/* Pantallas de cuenta de Vuelve a Ti con el manual de marca de Martha Fer (v4).
   Fondo blanco y gris claro (R40), Petróleo #007B7A (R43), Turquesa de acción #009C98 con blanco solo en texto grande (R44),
   Carbón #222222 (R47), gris claro #F8F8F8 (R48), Montserrat 600 titulares 32–44 px (R53), Source Sans 3 17–18 px con
   interlínea 1,65 (R54), firma Montserrat 600 mayúsculas 15 px (R55), leyendas ≥ 14 px (R59). */
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('fuentes/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('fuentes/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap; src: url('fuentes/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap; src: url('fuentes/source-sans-3-latin-600-normal.woff2') format('woff2'); }

:root {
  --petroleo: #007B7A;
  --turquesa: #009C98;
  --carbon: #222222;
  --gris: #F8F8F8;
  --blanco: #FFFFFF;
  --linea: rgba(34, 34, 34, .12);
  /* Texto pequeño en Carbón (R47, R49) y nada fuera de la paleta (R51): «peligro» también es Carbón. */
  --suave: #222222;
  --peligro: #222222;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--gris); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 24px;
  background: var(--gris);
  color: var(--carbon);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.65;
}
/* Diseño «Cuaderno» (DEC-20261103-1329): la misma hoja con margen que el programa. */
.hoja {
  --margen: 46px;
  width: 100%;
  max-width: 560px;
  background:
    linear-gradient(to right, transparent calc(var(--margen) - 16px), #33A3A2 calc(var(--margen) - 16px), #33A3A2 calc(var(--margen) - 14.5px), transparent calc(var(--margen) - 14.5px)) no-repeat,
    var(--blanco);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(34, 34, 34, .06), 0 10px 28px rgba(34, 34, 34, .06); /* sombra en Carbón (R51) */
  padding: 32px 24px 28px var(--margen);
}
.logo { display: block; width: 132px; height: auto; margin: 0 0 28px; }
h1 {
  margin: 0 0 14px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 36px); /* R53: titulares de 32 a 44 px en web */
  line-height: 1.16;
  color: var(--carbon);
  letter-spacing: -0.01em;
}
::selection { background: #F8F8F8; color: var(--petroleo); }
/* Subtítulos como texto del manual (R54): Source Sans 3 Regular a 18 px, en Petróleo para distinguirse (R43).
   Los titulares en Montserrat 600 van de 32 px en adelante (R53); igual que en la app. */
h2 {
  margin: 0 0 6px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--petroleo);
}
p { margin: 0 0 14px; max-width: 62ch; }
strong { font-weight: 600; overflow-wrap: anywhere; }
a { color: var(--petroleo); text-underline-offset: 3px; }
.nota { font-size: 16px; color: var(--suave); }
.opcional { font-weight: 400; color: var(--suave); }

form { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 8px; }
label { font-weight: 600; font-size: 17px; }
input[type=email], input[type=text] {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1.5px solid rgba(34, 34, 34, .45);
  border-radius: 10px;
  background: var(--blanco);
  color: var(--carbon);
  font: inherit;
}
input.codigo { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 28px; letter-spacing: .3em; text-align: center; }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--petroleo);
  outline-offset: 3px;
}
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 6px 0 14px; }
.check input { width: 22px; height: 22px; margin-top: 4px; accent-color: var(--petroleo); flex: none; }

/* Botón: Turquesa de acción con blanco solo en texto grande (Montserrat 700, 19 px) */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 24px;
  margin: 8px 0 4px;
  border: 0;
  border-radius: 12px;
  background: var(--turquesa);
  color: var(--blanco);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
form .boton { width: 100%; }
.boton:hover { background: var(--petroleo); }
.boton[disabled] { opacity: .6; cursor: progress; }
.boton.secundario { background: var(--blanco); color: var(--petroleo); border: 2px solid var(--petroleo); font-size: 17px; }
.boton.secundario:hover { background: var(--gris); }
.boton.peligro { background: var(--peligro); }
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.botones .boton { margin: 0; }
.enlace { background: none; border: 0; padding: 0; color: var(--petroleo); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlaces { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 18px 0 0; font-size: 17px; }
/* Toques de al menos 44 px de alto, sin cambiar el texto ni su tamaño */
.enlaces a, .enlaces .enlace { display: inline-flex; align-items: center; min-height: 44px; }
/* Mensajes de la página (confirmar y «recuperada»): Carbón sobre gris claro, borde Petróleo, sin íconos (R49, R73) */
.aviso { background: var(--gris); border-left: 4px solid var(--petroleo); border-radius: 8px; padding: 12px 14px; margin: 10px 0 12px; font-size: 17px; }
.aviso p { margin: 0 0 10px; }
#recuperar { scroll-margin-top: 16px; }

.error { color: var(--peligro); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.bloque { border-top: 1px solid var(--linea); padding-top: 18px; margin-top: 22px; }
/* Un rayo del logo como separador (R72), calcado del archivo (marca/rayo.svg), nunca una barra inventada. */
.bloque h2::before { content: ""; display: block; width: 44px; height: 11px; background: url('marca/rayo.svg') left center / contain no-repeat; margin: 0 0 12px; }
.bloque.peligro h2 { color: var(--peligro); }
.lista { padding-left: 1.2em; margin: 0 0 14px; }
details { margin: 4px 0 12px; }
summary { cursor: pointer; color: var(--petroleo); font-weight: 600; min-height: 44px; padding: 8px 0; }
details.datos { background: var(--gris); border-radius: 10px; padding: 10px 14px; }
details.datos p { font-size: 17px; margin: 8px 0; }
.pasos { padding-left: 1.3em; margin: 6px 0 12px; }
.pasos li { margin: 0 0 8px; padding-left: 4px; }
.pasos li::marker { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; color: var(--petroleo); }
.instalar .boton[data-accion="instalar"] { width: 100%; margin-bottom: 14px; }
.resultado { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gris); padding: 12px; border-radius: 8px; font-size: 14px; }

.firma {
  margin-top: 22px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--petroleo);
  text-align: center;
}
.abriendo h1 { font-size: 32px; } /* R53: no baja de 32 px */

@media (min-width: 900px) {
  body { padding-top: 64px; }
  .hoja { --margen: 76px; padding: 44px 48px 40px var(--margen); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }