/* ===== Capa "App nativa" para las paginas de contenido, cuenta y acceso =====
   (FOTOLISTA/PLAN-PREMIUM.md, 17 oct 2026). Va DESPUES del <style> de cada pagina
   y la pasa al sistema de la portada y la app: negro puro, superficies lisas de
   radio grande, tipografia del sistema de Apple (Inter de reserva), botones en
   minusculas normales y el naranja de marca con su brillo. No cambia ninguna
   logica: solo restiliza las clases que ya usan esas paginas. El logotipo sigue
   en Bebas Neue. */
:root {
  --black: #000; --white: #f5f5f7; --accent: #e8452a; --accent-2: #ff6a4d; --ok: #30d158;
  --muted: rgba(245,245,247,0.56); --text-2: rgba(245,245,247,0.72);
  --card-bg: #111113; --surface: #111113; --surface-2: #1c1c1f; --surface-3: #2c2c2e;
  --border: rgba(255,255,255,0.09);
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --glass-bg: #111113; --glass-border: transparent; --glass-border-top: transparent; --glass-blur: none;
  --glass-radius: 24px; --glass-shadow: none;
  --spring: cubic-bezier(0.2, 0.9, 0.3, 1);
}
html { background: #000; }
body { background: #000; color: var(--white); font: 400 17px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
body::before, body::after { display: none; }
button, input, select, textarea { font-family: var(--font-body); }
input, select, textarea { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* ---------- Barra superior (como la portada) ---------- */
header { height: 60px; padding: 0 max(20px, calc((100vw - 1100px) / 2)); border-bottom: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); }
.logo-wrap { gap: 9px; }
.logo-svg { width: 30px; height: 30px; }
.logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 0.04em; color: var(--white); }
.logo-text span { color: var(--accent); }
.nav-r { display: flex; align-items: center; gap: 6px; }
.back-link { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); padding: 8px 10px; }
.back-link:hover { color: var(--white); text-decoration: none; }
.nav-go { font-size: 0.9375rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: var(--white); color: #000; text-decoration: none; white-space: nowrap; }
.nav-go:hover { background: #fff; text-decoration: none; }
@media (prefers-reduced-transparency: reduce) { header { background: #000 !important; } }

/* ---------- Texto ---------- */
main { padding-top: 72px; padding-bottom: 96px; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 14px; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--white); text-transform: none; }
h2 .num { color: var(--accent-2); }
h3 { font-weight: 600; letter-spacing: -0.01em; }
.update-date { font-size: 0.875rem; color: var(--muted); }
.intro, .section-intro { font-size: 1.125rem; line-height: 1.55; color: var(--text-2); font-weight: 400; }
p { font-size: 1rem; line-height: 1.65; color: var(--text-2); font-weight: 400; }
ul li { font-size: 1rem; line-height: 1.65; color: var(--text-2); font-weight: 400; padding-left: 1.25rem; }
ul li::before { content: ''; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
ol li { color: var(--text-2); }
a { color: var(--accent-2); }
strong { color: var(--white); font-weight: 600; }
.divider { border-top-color: var(--border); }

/* ---------- Tarjetas ---------- */
.cta-box, .info-card, .calc-box, .toc, .contact-card, .guide-card, .warn-box {
  background: var(--surface); border: 0; border-radius: 24px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.cta-box { padding: 28px; }
.calc-box { padding: 28px; }
.warn-box { background: rgba(232,69,42,0.1); }
.guide-card { padding: 24px 26px; transition: transform 300ms var(--spring), background 200ms; }
.guide-card:hover { transform: translateY(-2px); background: #17171a; border: 0; box-shadow: none; }
.guide-card h2 { font-size: 1.3rem; margin-bottom: 6px; }
.guide-card .guide-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent-2); }
.guide-card p { font-size: 0.9375rem; color: var(--text-2); }
.contact-card { transition: transform 300ms var(--spring), background 200ms; }
.contact-card:hover { background: #17171a; border: 0; transform: translateY(-2px); box-shadow: none; }
.card-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.card-icon { border-radius: 14px; }
.toc { padding: 22px 24px; }
.toc h2 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.toc a { color: var(--white); }
.toc li::before { color: var(--accent-2); }
.faq-item h3 { font-size: 1.0625rem; font-weight: 600; color: var(--white); }
.faq-q { font-size: 1rem; font-weight: 600; }
.faq-a { font-size: 0.9375rem; color: var(--text-2); }
.faq-mini h2 { font-size: 1.5rem; letter-spacing: -0.02em; }

/* Tablas comparativas */
.compare-wrap { background: var(--surface); border: 0; border-radius: 24px; padding: 6px; backdrop-filter: none; }
.compare th { font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; color: var(--white); }
.compare td { font-size: 0.9375rem; color: var(--text-2); font-weight: 400; }
.compare .foto-col { color: var(--white); font-weight: 600; }
.compare th, .compare td { border-bottom-color: var(--border); }

/* ---------- Botones ---------- */
/* Texto grande (19px, negrita) para que el blanco sobre naranja cumpla AA como
   texto grande sin tocar el naranja de marca (decision del 2 sep 2026). */
.cta-btn, .calc-btn {
  font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  border-radius: 999px; background: var(--accent); color: #fff;
  box-shadow: 0 12px 32px rgba(232,69,42,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1), background 200ms;
}
.cta-btn { padding: 16px 30px; }
/* Relleno en vez de altura fija: algunos son enlaces con display:block en linea
   y con min-height el texto se quedaba arriba. */
.calc-btn { min-height: 0; padding: 16px 24px; line-height: 1.3; }
.cta-btn:hover, .calc-btn:hover { background: #d93d24; transform: none; box-shadow: 0 12px 32px rgba(232,69,42,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
.cta-btn:active, .calc-btn:active { transform: scale(0.97); transition-duration: 90ms; }
.btn-secondary { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; min-height: 52px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--white); }
.btn-secondary:hover { background: var(--surface-3); border: 0; color: var(--white); }
.btn-peligro { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; min-height: 52px; border: 0; border-radius: 999px; background: rgba(232,69,42,0.14); color: #ff8a70; }
.btn-peligro:hover { background: rgba(232,69,42,0.22); color: #ffb3a3; }

/* ---------- Formularios ---------- */
.field label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.field input, .field select { background-color: var(--surface-2); border: 0; border-radius: 12px; font-size: 1rem; min-height: 50px; color: var(--white); }
.field input:focus, .field select:focus { border: 0; box-shadow: 0 0 0 2px rgba(232,69,42,0.6); }
.field input::placeholder { color: rgba(245,245,247,0.6); } /* 0,4 no llegaba a 4,5:1 (22 oct 2026) */
.field-hint { font-size: 0.8125rem; color: var(--muted); }
.password-toggle { color: rgba(245,245,247,0.5); }
.switch-link { font-size: 0.9375rem; color: var(--text-2); }
.form-error { color: var(--accent-2); font-size: 0.9375rem; }
.form-success { color: var(--ok); }

/* Mi cuenta */
.status-row { border-bottom-color: var(--border); }
.status-label { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.status-value { font-size: 1rem; }
.badge { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; }
.notice { border-radius: 16px; font-size: 0.9375rem; }
.eliminar summary { font-size: 0.875rem; }

/* Calculadora publica */
.result-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.result-value { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
.calc2-k { font-size: 0.875rem !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; }
.calc2-precio { font-family: var(--font-display) !important; font-weight: 800; letter-spacing: -0.04em; }
.calc2-tira { background: var(--surface-2) !important; border: 0 !important; border-radius: 16px !important; }
.calc2-tira.mid { background: rgba(232,69,42,0.14) !important; }
.calc2-tira b { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.calc2-tira span { font-size: 0.8125rem !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; }
.disclaimer { font-size: 0.875rem; color: var(--muted); }

/* ---------- Pie ---------- */
footer { border-top: 0; padding: 56px 20px 48px; font-size: 0.875rem; color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--white); }

@media (max-width: 600px) {
  header { padding: 0 16px; }
  main { padding-top: 44px; }
  .cta-box, .calc-box { padding: 22px 20px; }
  .nav-go { padding: 8px 14px; }
}
@media (max-width: 380px) {
  .nav-r:has(.nav-go) .back-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card, .contact-card, .cta-btn, .calc-btn { transition: none; }
}