/* PIAR 360 — marca común (14-oct-2026).
   Una sola hoja que se carga ÚLTIMA en todas las páginas (portada, guías,
   contacto, privacidad, ingreso, registro y la app) para que el sitio y la app
   se vean como un mismo producto. Re-define los tokens de las dos hojas de
   base (styles.css: --brand, --dark…; claro.css: --verde, --tinta…) y suma los
   componentes de la portada (.h-*).
   Identidad: verde de aula (#1a6b4a) + tiza amarilla (#f5c542) solo para
   subrayar lo importante. Títulos en Bricolage Grotesque, texto en Inter.
   Siempre clara (color-scheme: only light). */
:root{
  color-scheme:only light;
  /* hoja de la web pública (styles.css) */
  --bg:#f7f9f6; --bg-warm:#f7f9f6; --card:#fff;
  --text:#25332b; --dark:#12211a; --muted:#52665a; --faint:#7d8f84;
  --border:#d8e2db; --border-light:#e6eee9;
  --brand:#1a6b4a; --brand-hover:#14573b; --brand-light:#e8f3ee; --brand-50:#f1f8f4;
  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --shadow:0 4px 14px rgba(18,33,26,.07); --shadow-lg:0 14px 40px rgba(18,33,26,.12);
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  /* hoja de la app (claro.css) */
  --verde:#1a6b4a; --verde-osc:#14573b; --verde-2:#e8f3ee;
  --tinta:#17261f; --gris:#52665a; --gris-2:#7d8f84; --linea:#d8e2db; --fondo:#f7f9f6;
  --tiza:#f5c542; --tiza-2:#fff4cc; --radio:10px;
  --max-w:1120px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.nav-logo,.logo{font-family:var(--font-display);letter-spacing:-.015em}
h1,h2{font-weight:700}
::selection{background:var(--tiza-2)}
:focus-visible{outline:3px solid var(--tiza);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ── Marca: el cuadro «P» con su subrayado de tiza ── */
.nav-logo .logo-icon,.logo b{position:relative;background:var(--brand)!important;border-radius:9px;color:#fff;font-family:var(--font-display);font-weight:800}
.nav-logo .logo-icon::after,.logo b::after{content:"";position:absolute;left:22%;right:22%;bottom:18%;height:3px;border-radius:2px;background:var(--tiza)}
.nav-logo,.logo{color:var(--dark);font-weight:800}
.nav-logo span{color:var(--brand)}

/* ── Barra superior de la web pública ── */
.nav{background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);box-shadow:none}
.nav-inner{height:68px}
.nav-links{gap:26px}
.nav-links a{color:var(--text);font-weight:500;font-size:.94rem}
.nav-links a:hover{color:var(--brand)}
.btn{border-radius:10px;font-weight:600}
.btn-primary{background:var(--brand);box-shadow:none}
.btn-primary:hover{background:var(--brand-hover);box-shadow:0 6px 18px rgba(26,107,74,.25);transform:translateY(-1px)}
.btn-outline{border:1.5px solid var(--brand);color:var(--brand);background:#fff}
.btn-outline:hover{background:var(--brand-light);color:var(--brand-hover)}
.btn-ghost{color:var(--text)}
.btn-lg{padding:15px 30px;font-size:1.02rem}
.btn-sm{padding:8px 18px}

/* ── Guías y páginas de texto ── */
.guia-hero{background:#fff;border-bottom:1px solid var(--border);padding:112px 0 30px}
.guia-hero h1{font-weight:800;letter-spacing:-.025em}
.guia-texto h2{font-weight:700}
.guia-texto a{color:var(--brand);text-decoration-color:var(--tiza);text-decoration-thickness:2px;text-underline-offset:3px}
.guia-texto a:hover{background:var(--tiza-2)}
.guia-cta{border-radius:var(--radius-lg)}
.guia-mas a{border-radius:12px;background:#fff}
.guia-mas a:hover{border-color:var(--brand);transform:none;box-shadow:var(--shadow)}

/* ── Pie ── */
.footer{background:var(--dark)}
.cta-section{background:var(--brand);background-image:none}
.cta-section .btn-white{background:var(--tiza);color:var(--dark)}
.cta-section .btn-white:hover{background:#ffd75e;color:var(--dark)}

/* ── App, ingreso y registro (claro.css) ── */
body.entrada-pag,body{font-family:var(--font-body)}
.top{border-bottom:1px solid var(--linea)}
.top .logo{font-size:18px}
.top nav a.on{background:var(--verde-2);color:var(--verde);font-weight:600}
h1,h2{color:var(--tinta)}
.card{border-radius:14px;box-shadow:0 1px 2px rgba(18,33,26,.04)}
.btn.p,.btn.primario{background:var(--verde);border-color:var(--verde)}
.btn{border-radius:10px}
.entrada-caja{border-radius:16px}

/* ═══════════ PORTADA (.h-*) ═══════════ */
.h-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.h-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.h-nav .h-wrap{display:flex;align-items:center;gap:28px;height:68px}
.h-nav nav{display:flex;gap:24px;margin-left:12px}
.h-nav nav a{color:var(--text);font-weight:500;font-size:.94rem}
.h-nav nav a:hover{color:var(--brand)}
.h-nav .h-der{margin-left:auto;display:flex;gap:8px;align-items:center}
.h-hero{background:#fff;border-bottom:1px solid var(--border);padding:64px 0 72px}
.h-hero .h-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.h-etiqueta{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;font-weight:600;color:var(--brand);background:var(--brand-light);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.h-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0 0 18px;color:var(--dark)}
.h-marca{background:linear-gradient(transparent 62%,var(--tiza) 62%,var(--tiza) 92%,transparent 92%);padding:0 .08em}
.h-hero p.h-lead{font-size:1.15rem;line-height:1.6;color:var(--muted);max-width:52ch;margin:0 0 26px}
.h-acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.h-nota{font-size:.84rem;color:var(--faint);margin:14px 0 0}
.h-modelo{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow-lg)}
.h-modelo-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.h-modelo-cab b{font-family:var(--font-display);font-size:1.08rem;color:var(--dark)}
.h-modelo-cab small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.h-ejemplo{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--border);border-radius:6px;padding:2px 7px;white-space:nowrap}
.h-barra{height:8px;border-radius:999px;background:#dfe9e3;overflow:hidden;margin:6px 0 14px}
.h-barra i{display:block;height:100%;width:86%;background:var(--brand);border-radius:999px}
.h-relato{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:.92rem;line-height:1.5;color:var(--text);margin-bottom:12px}
.h-relato small{display:block;color:var(--faint);font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.h-secs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.h-secs li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-light);border-radius:10px;padding:8px 12px;font-size:.9rem;color:var(--text)}
.h-secs li b{font-weight:600}
.h-secs .h-ok,.h-secs .h-falta{margin-left:auto;font-size:.76rem;font-weight:700;border-radius:999px;padding:2px 9px}
.h-secs .h-ok{color:var(--brand);background:var(--brand-light)}
.h-secs .h-falta{color:#7a5200;background:var(--tiza-2)}
.h-sec{padding:76px 0}
.h-sec.h-alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.h-cab{max-width:680px;margin:0 0 34px}
.h-cab .h-sobre{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.h-cab h2{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 12px;color:var(--dark)}
.h-cab p{color:var(--muted);font-size:1.06rem;line-height:1.6;margin:0}
.h-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:paso}
.h-paso{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 22px 24px;position:relative}
.h-alt .h-paso{background:var(--bg)}
.h-paso::before{counter-increment:paso;content:counter(paso);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--font-display);font-weight:800;margin-bottom:14px}
.h-paso h3{font-size:1.2rem;margin:0 0 6px;color:var(--dark)}
.h-paso p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55}
.h-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h-item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px}
.h-alt .h-item{background:var(--bg)}
.h-item h3{font-size:1.06rem;margin:0 0 6px;color:var(--dark);display:flex;gap:10px;align-items:center}
.h-item h3 i{font-style:normal;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--brand-light);font-size:1rem;flex:none}
.h-item p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.h-dua{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h-dua div{border-left:4px solid var(--tiza);background:#fff;border-radius:0 12px 12px 0;padding:14px 18px;border-top:1px solid var(--border-light);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.h-dua b{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--dark);margin-bottom:3px}
.h-dua span{color:var(--muted);font-size:.93rem;line-height:1.5}
.h-garantias{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.h-garantias div{display:flex;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px}
.h-garantias i{font-style:normal;font-size:1.3rem;line-height:1.2}
.h-garantias b{display:block;color:var(--dark);margin-bottom:2px}
.h-garantias span{color:var(--muted);font-size:.94rem;line-height:1.5}
.h-cierre{background:var(--brand);color:#fff;padding:64px 0;text-align:center}
.h-cierre h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 10px;letter-spacing:-.025em}
.h-cierre p{color:rgba(255,255,255,.88);max-width:52ch;margin:0 auto 24px;font-size:1.08rem}
.h-cierre .btn-tiza{background:var(--tiza);color:var(--dark);border:0}
.h-cierre .btn-tiza:hover{background:#ffd75e}
.h-cierre .btn-borde{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.h-cierre .btn-borde:hover{background:rgba(255,255,255,.12)}
@media (max-width:900px){
  .h-hero .h-wrap{grid-template-columns:1fr;gap:34px}
  .h-hero{padding:40px 0 48px}
  .h-pasos,.h-rejilla,.h-dua{grid-template-columns:1fr 1fr}
  .h-nav nav{display:none}
}
@media (max-width:640px){
  .h-pasos,.h-rejilla,.h-dua,.h-garantias{grid-template-columns:1fr}
  .h-sec{padding:52px 0}
  .h-hero h1{font-size:2.05rem}
  .h-acciones .btn{width:100%}
  .h-nav .h-wrap{gap:12px}
}

/* ── Páginas con tarjeta central (contacto…): fondo claro, no el degradado verde oscuro ── */
.auth-page{background:var(--bg)!important;background-image:none!important}
.auth-card{border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.auth-card h2{font-weight:700}
.guia-texto .guia-ver{margin:-6px 0 14px;font-size:.95rem}