/* Páginas comerciales de MeApunto (web/generar.mjs). Mismos colores que la app: fondo oscuro y naranja #FF8400. */
:root { --fondo: #0f1117; --superficie: #16181f; --tarjeta: #1e2028; --borde: #2c2f3e; --texto: #f0f0f5; --suave: #a0a3b1; --naranja: #FF8400; --naranja-claro: #ffb347; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--naranja-claro); }
.saltar { position: absolute; left: -9999px; } .saltar:focus { left: 16px; top: 16px; background: var(--tarjeta); padding: 8px 12px; z-index: 10; }
.envoltura { width: min(760px, 100% - 32px); margin: 0 auto; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera .envoltura { width: min(1040px, 100% - 32px); display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-weight: 700; font-size: 18px; margin-right: auto; }
.marca img { width: 32px; height: 32px; }
.acceso { color: var(--suave); text-decoration: none; font-weight: 600; font-size: 14px; }
.acceso:hover { color: var(--texto); }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid var(--naranja); color: var(--naranja-claro); transition: transform .15s cubic-bezier(.23,1,.32,1); }
.boton-principal { background: var(--naranja); color: #16181f; }
.boton:active { transform: scale(.98); }
.boton:focus-visible, a:focus-visible { outline: 3px solid var(--naranja-claro); outline-offset: 2px; }
.cabecera .boton { min-height: 40px; padding: 8px 16px; font-size: 14px; }
main { padding: 48px 0 64px; }
h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: 24px; line-height: 1.3; margin: 48px 0 16px; }
.entrada { font-size: 18px; color: var(--suave); margin: 0 0 24px; text-wrap: pretty; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.prueba { margin: 0; padding: 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--tarjeta); }
.aviso { padding: 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--tarjeta); color: var(--suave); }
.pasos, .lista { padding-left: 24px; display: grid; gap: 12px; margin: 0; }
.lista { list-style: disc; }
.preguntas details { border-top: 1px solid var(--borde); padding: 12px 0; }
.preguntas details:last-child { border-bottom: 1px solid var(--borde); }
.preguntas summary { cursor: pointer; font-weight: 600; }
.preguntas p { color: var(--suave); margin: 8px 0 0; }
.cierre { margin-top: 48px; padding: 24px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); display: grid; gap: 16px; }
.cierre p { margin: 0; }
.pie { border-top: 1px solid var(--borde); padding: 32px 0; color: var(--suave); font-size: 14px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.pie a { color: var(--suave); }
@media (max-width: 520px) { .acciones { display: grid; } .acciones .boton { width: 100%; } .acceso { display: none; } }
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }