/* ============================================================
   Arcosto — páginas públicas (landing y acceso)
   Usa los tokens de styles.css (papel, tinta, riel, acento, Bahnschrift).
   Mismo taller sobre papel: el único color fuerte es el azul del riel.
   ============================================================ */

html,body{height:auto}
body{overflow:auto;background:var(--papel);color:var(--tinta);font-family:var(--f-ui);line-height:1.5}
a{color:var(--acento)}
h1,h2,h3{font-family:var(--f-dato);font-weight:600;letter-spacing:.2px;margin:0}
p{margin:0}
.contenedor{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- cabecera pública ---------- */
.portada-cab{background:var(--riel);color:var(--riel-tinta);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--riel-2)}
.portada-cab .contenedor{display:flex;align-items:center;gap:18px;height:56px}
.portada-cab .marca{padding:0;border:0;color:var(--riel-tinta);text-decoration:none}
.portada-cab nav{display:flex;gap:4px;margin-left:12px}
.portada-cab nav a{color:var(--riel-tenue);text-decoration:none;padding:6px 10px;border-radius:var(--r);font-size:13.5px}
.portada-cab nav a:hover{color:var(--riel-tinta);background:var(--riel-2)}
.portada-cab .acciones{margin-left:auto;display:flex;gap:8px;align-items:center}
.portada-cab .btn{border-color:var(--riel-2);background:transparent;color:var(--riel-tinta)}
.portada-cab .btn:hover{background:var(--riel-2);border-color:var(--riel-tenue)}
.portada-cab .btn.primary{background:var(--riel-activo);border-color:var(--riel-activo);color:#fff}
.portada-cab .btn.primary:hover{filter:brightness(1.08)}
.portada-cab .usuario-chip{font-size:13px;color:var(--riel-tenue)}

/* ---------- héroe ---------- */
.heroe{padding:64px 0 48px}
.heroe .contenedor{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.heroe h1{font-size:40px;line-height:1.12}
.heroe .sub{font-size:17px;color:var(--tinta-2);margin:18px 0 26px;max-width:52ch}
.heroe .ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.heroe .ctas .btn{padding:10px 18px;font-size:14px}
.heroe .nota{font-size:12.5px;color:var(--tinta-3);margin-top:14px}
.etiqueta{display:inline-block;font-family:var(--f-dato);font-size:12.5px;color:var(--acento);background:var(--acento-suave);border:1px solid var(--acento-linea);border-radius:999px;padding:3px 10px;margin-bottom:16px}

/* hoja de muestra (misma hoja que la app, en miniatura) */
.hoja-muestra{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);box-shadow:var(--sombra);overflow:hidden}
/* La barra lleva el azul del riel (styles.css ya define .barra para el valor ganado; aquí se fija todo). */
.hoja-muestra .barra{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--riel);color:var(--riel-tenue);font-size:12.5px;height:auto;border-radius:0}
.hoja-muestra .barra b{font-family:var(--f-dato);color:var(--riel-tinta);font-weight:600;font-size:14px}
.hoja-muestra .total{margin-left:auto;font-family:var(--f-dato);color:var(--riel-tinta);font-weight:600}
.hoja-muestra table{width:100%;border-collapse:collapse;font-size:12.5px}
.hoja-muestra th{font-size:11px;color:var(--tinta-3);font-weight:600;text-align:left;padding:7px 10px;border-bottom:1px solid var(--linea);background:var(--superficie-2)}
.hoja-muestra td{padding:7px 10px;border-bottom:1px solid var(--linea)}
.hoja-muestra tr:last-child td{border-bottom:0}
.hoja-muestra .num,.hoja-muestra th.num{text-align:right;font-family:var(--f-dato);font-variant-numeric:tabular-nums}
.hoja-muestra .fila-num{color:var(--tinta-3);font-family:var(--f-dato);width:28px}
.hoja-muestra .partida td{background:var(--partida-fondo);font-weight:600}
.hoja-muestra .clave{font-family:var(--f-dato);color:var(--tinta-2)}
.hoja-muestra .con-dato{background:var(--celda-dato)}
.hoja-muestra .desc{color:var(--peligro)}
.hoja-muestra .pie{padding:8px 14px;font-size:12px;color:var(--tinta-3);background:var(--superficie-2);border-top:1px solid var(--linea)}
.hoja-muestra .pie code{font-family:var(--f-dato);color:var(--tinta-2)}

/* ---------- secciones ---------- */
.seccion{padding:48px 0;border-top:1px solid var(--linea)}
.seccion h2{font-size:26px;margin-bottom:6px}
.seccion .intro{color:var(--tinta-2);max-width:64ch;margin-bottom:26px}

.flujo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:paso}
.flujo li{list-style:none;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);padding:16px 16px 14px;position:relative}
.flujo li::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);font-family:var(--f-dato);font-size:13px;color:var(--riel-activo);font-weight:600;display:block;margin-bottom:8px}
.flujo h3{font-size:16px;margin-bottom:4px}
.flujo p{font-size:13px;color:var(--tinta-2)}

.tarjetas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tarjeta-f{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);padding:16px}
.tarjeta-f .icono{width:22px;height:22px;color:var(--riel-activo);margin-bottom:10px}
.tarjeta-f h3{font-size:15.5px;margin-bottom:4px}
.tarjeta-f p{font-size:13px;color:var(--tinta-2)}
.tarjeta-f .pill{margin-top:8px}

.planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px}
.plan{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:12px}
.plan.pro{border-color:var(--acento-linea);box-shadow:var(--sombra)}
.plan h3{font-size:20px}
.plan .precio{font-family:var(--f-dato);font-size:28px;font-weight:600}
.plan .precio small{font-family:var(--f-ui);font-size:13px;color:var(--tinta-3);font-weight:400;margin-left:6px}
.plan ul{margin:0;padding:0 0 0 18px;color:var(--tinta-2);font-size:13.5px;line-height:1.7}
.plan .btn{align-self:flex-start}

.origen{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);padding:20px 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.origen h3{font-size:15px;margin-bottom:6px}
.origen p{font-size:13px;color:var(--tinta-2)}

.portada-pie{border-top:1px solid var(--linea);padding:22px 0 36px;font-size:12.5px;color:var(--tinta-3)}
.portada-pie .contenedor{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.portada-pie a{color:var(--tinta-2)}

/* ---------- acceso ---------- */
body.acceso{display:grid;place-items:center;min-height:100vh;padding:24px}
.acceso-caja{display:grid;grid-template-columns:300px minmax(0,1fr);width:100%;max-width:820px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);box-shadow:var(--sombra);overflow:hidden}
.acceso-riel{background:var(--riel);color:var(--riel-tinta);padding:26px 24px;display:flex;flex-direction:column;gap:18px}
.acceso-riel .marca{padding:0;border:0;color:inherit;text-decoration:none}
.acceso-riel p{color:var(--riel-tenue);font-size:13.5px}
.acceso-riel ul{margin:auto 0 0;padding:0;list-style:none;color:var(--riel-tenue);font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.acceso-riel li::before{content:"— ";color:var(--riel-activo)}
.acceso-riel a.volver{color:var(--riel-tenue);font-size:12.5px;text-decoration:none}
.acceso-riel a.volver:hover{color:var(--riel-tinta)}
.acceso-form{padding:26px 28px 24px}
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:18px}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font-family:var(--f-dato);font-size:15px;color:var(--tinta-3);margin-bottom:-1px}
.pestanas button[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--riel-activo)}
.pestanas button:hover{color:var(--tinta)}
.acceso-form form{display:flex;flex-direction:column;gap:12px}
.acceso-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tinta-2)}
.acceso-form input{background:var(--superficie);border:1px solid var(--linea-2);border-radius:var(--r);padding:9px 10px;font-size:14px;width:100%}
.acceso-form input:focus-visible{border-color:var(--acento)}
.acceso-form input[aria-invalid="true"]{border-color:var(--peligro)}
.acceso-form .form-error{color:var(--peligro);font-size:12.5px;min-height:18px;margin:0 0 8px}
.acceso-form .btn.primary{justify-content:center;padding:10px 14px;font-size:14px}
.separador{display:flex;align-items:center;gap:10px;color:var(--tinta-3);font-size:12px;margin:14px 0}
.separador::before,.separador::after{content:"";flex:1;border-top:1px solid var(--linea)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:9px 14px;font-size:14px;text-decoration:none;color:var(--tinta)}
.btn-google svg{width:18px;height:18px}
.btn-google[aria-disabled="true"]{opacity:.5;pointer-events:none}
.acceso-form .hint{margin-top:10px}
.acceso-form [hidden]{display:none!important}

/* ---------- modo oscuro ---------- */
@media (prefers-color-scheme: dark){
  .portada-cab .btn.primary{color:#fff}
  .hoja-muestra .partida td{color:var(--tinta)}
}

/* ---------- tableta y móvil ---------- */
@media (max-width:980px){
  .heroe{padding:36px 0 32px}
  .heroe .contenedor{grid-template-columns:1fr;gap:28px}
  .heroe h1{font-size:30px}
  .flujo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .origen{grid-template-columns:1fr}
  .portada-cab nav{display:none}
  .acceso-caja{grid-template-columns:1fr}
  .acceso-riel ul{display:none}
  .seccion{padding:36px 0}
}
@media (max-width:560px){
  .contenedor{padding:0 16px}
  .flujo,.tarjetas,.planes{grid-template-columns:1fr}
  .portada-cab .usuario-chip{display:none}
  body.acceso{padding:12px}
  .acceso-form{padding:20px 18px}
  .hoja-muestra th:nth-child(4),.hoja-muestra td:nth-child(4){display:none}
}