/* amodoclub.com — estilo común de /app, /privacidad y /borrar-datos.
   Mismo sistema que la portada (index.html lleva su propia copia inline):
   verde azulado del logo, fondo de las capturas, un color por función,
   Archivo + Inter, radios secos y la sombra dura ámbar del botón principal. */

@font-face { font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:italic; font-weight:600; font-display:swap; src:url("/fonts/archivo-600i.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); }

:root {
  --ink:#0F1A14; --bg:#F2F3F5; --paper:#FFFFFF; --white:#FFFFFF;
  --teal:#0C5454; --violet:#8460F0; --coral:#F06C6C; --green:#3CB484; --amber:#F0A830; --sky:#30A8D8;
  /* Derivados: valor ya resuelto como base (Safari < 16.2 y Chrome < 111 no tienen color-mix
     y dejarían la propiedad sin valor: campos sin borde, fondos y rayas invisibles).
     La versión con color-mix va en el @supports de abajo. */
  --line:rgba(15,26,20,.12);
  --line-strong:rgba(15,26,20,.38);
  --line-field:rgba(15,26,20,.55);   /* borde de campo de formulario: ≈4:1 sobre blanco */
  --ink-muted:#616865;
  --teal-press:#0C4C4B;
  --on-teal-muted:#CAD9D9;
  --err:#B3261E; --err-bg:#FCE5E5;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px;
  --gutter:clamp(16px, 4vw, 40px); --max:1280px; --measure:38ch;
  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --tap:44px; --cta-h:56px; --bw:1px; --bw-strong:2px;

  --font-display:"Archivo", Arial, sans-serif;
  --font-body:"Inter", Arial, sans-serif;
  --fs-label:12px; --fs-small:15px; --fs-ui:16px; --fs-body:17px; --fs-btn:17px; --fs-lead:18px; --fs-brand:20px;
  --fs-h1:clamp(2.75rem, 8vw, 6.5rem);
  --shadow-hard:4px 4px 0 var(--amber); --shadow-hard-hover:6px 6px 0 var(--amber); --press:4px;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --line:color-mix(in srgb, var(--ink) 12%, transparent);
    --line-strong:color-mix(in srgb, var(--ink) 38%, transparent);
    --line-field:color-mix(in srgb, var(--ink) 55%, transparent);
    --ink-muted:color-mix(in srgb, var(--ink) 64%, var(--bg));
    --teal-press:color-mix(in srgb, var(--teal) 86%, var(--ink));
    --on-teal-muted:color-mix(in srgb, var(--white) 78%, var(--teal));
    --err-bg:color-mix(in srgb, var(--coral) 18%, var(--paper));
  }
}
@media (min-width:960px) { :root { --fs-body:18px; --fs-lead:20px; } }

*, *::before, *::after { box-sizing:border-box; }
html { font-synthesis:none; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 var(--fs-body)/1.5 var(--font-body); overflow-x:clip; }
img { display:block; max-width:100%; height:auto; }
h1, h2, h3, p { margin:0; }
a { color:var(--teal); text-decoration-thickness:var(--bw); text-underline-offset:.18em; }
a:hover { text-decoration-thickness:var(--bw-strong); color:var(--teal-press); }
:focus-visible { outline:var(--bw-strong) solid var(--teal); outline-offset:3px; }
.on-teal :focus-visible { outline-color:var(--white); }

.wrap { width:100%; max-width:calc(var(--max) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.label { font:700 var(--fs-label)/1.2 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
.on-teal { background:var(--teal); color:var(--white); }
.on-teal .label { color:var(--on-teal-muted); }
.on-teal a, .on-teal a:hover { color:var(--white); }

/* Botones */
.btn-cta { display:inline-flex; align-items:center; justify-content:center; min-height:var(--cta-h); padding:0 var(--s-6);
  font:600 var(--fs-btn)/1 var(--font-body); color:var(--ink); background:var(--white); text-decoration:none;
  border-radius:var(--r-md); border:var(--bw-strong) solid var(--ink); box-shadow:var(--shadow-hard); cursor:pointer; }
.btn-cta:hover { color:var(--ink); box-shadow:var(--shadow-hard-hover); }
.btn-cta:active { transform:translate(var(--press), var(--press)); box-shadow:none; }
.btn-cta[disabled] { opacity:.6; cursor:default; box-shadow:none; transform:none; }
.btn-line { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--s-6);
  font:600 var(--fs-ui)/1 var(--font-body); color:var(--ink); background:transparent; text-decoration:none;
  border-radius:var(--r-md); border:var(--bw-strong) solid var(--ink); }
.btn-line:hover { color:var(--ink); background:var(--paper); }

/* Cabecera */
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding-block:var(--s-4); }
.brand { display:inline-flex; align-items:center; gap:var(--s-3); min-height:var(--tap); text-decoration:none;
  font:600 var(--fs-brand)/1 var(--font-display); letter-spacing:-.01em; }
.brand img { width:40px; height:40px; border-radius:var(--r-md); background:var(--white); }
.site-nav { display:flex; align-items:center; gap:var(--s-6); font-size:var(--fs-ui); }
.site-nav a { display:inline-flex; align-items:center; min-height:var(--tap); text-decoration:none; }
.site-nav a:hover { text-decoration:underline; }
.site-nav .install-link { font-weight:600; text-decoration:underline; text-decoration-thickness:var(--bw-strong); }

/* Cabecera de página en verde azulado */
.page-head { padding-block:var(--s-6) var(--s-12); }
.page-head h1 { font:700 var(--fs-h1)/.92 var(--font-display); letter-spacing:-.035em; text-wrap:balance; margin:var(--s-4) 0 var(--s-4); }
.page-head h1 em { font-weight:600; font-style:italic; }
.page-head .lead { font-size:var(--fs-lead); max-width:var(--measure); }

/* Pie: el mismo en las cuatro páginas (index.html lleva una copia) */
.site-footer { border-top:var(--bw) solid var(--line); }
.site-footer .wrap { display:grid; gap:var(--s-4); padding-block:var(--s-8) var(--s-12); font-size:var(--fs-small); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:0 var(--s-6); }
.site-footer nav a { min-height:var(--tap); display:inline-flex; align-items:center; }
.site-footer p { color:var(--ink-muted); text-wrap:balance; }
@media (min-width:960px) {
  .site-footer .wrap { grid-template-columns:1fr auto; align-items:center; }
}