/* IronDroid Legal — sistema de diseño. Cada app define su color con una clase en <body>/<li>. */
:root {
  --bg:#fbfaf8; --surface:#fff; --fg:#17181c; --muted:#5b5f6a; --line:#e6e4df;
  --brand:#1f2a44; --on-brand:#fff; --accent:#f59e0b;
  --head:"Outfit",system-ui,sans-serif; --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px; --wrap:1120px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1014; --surface:#171a20; --fg:#eceef2; --muted:#a0a5b1; --line:#272b34; --brand:#c7d2fe; --on-brand:#111827; }
}
.app-hiad       { --brand:#0f766e; --accent:#f59e0b; }
.app-joven      { --brand:#1e2a78; --accent:#facc15; }
.app-coleapp    { --brand:#12305f; --accent:#fbbf24; }
.app-club       { --brand:#b91c1c; --accent:#facc15; }
.app-pathfinder { --brand:#5b3fa8; --accent:#fbbf24; }
@media (prefers-color-scheme: dark) {
  .app-hiad       { --brand:#2dd4bf; --on-brand:#04201d; }
  .app-joven      { --brand:#a5b4fc; --on-brand:#0b1033; }
  .app-coleapp    { --brand:#93c5fd; --on-brand:#0b1f3d; }
  .app-club       { --brand:#f87171; --on-brand:#3b0a0a; }
  .app-pathfinder { --brand:#c4b5fd; --on-brand:#241553; }
}

/* --soft depende de --brand: se calcula en el elemento que define la app, no en :root */
body, [class*="app-"] { --soft:color-mix(in srgb, var(--brand) 13%, var(--bg)); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.7 var(--body); -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--brand); text-underline-offset:3px; }
a:focus-visible, .shots ul:focus-visible, .btn:focus-visible { outline:3px solid var(--brand); outline-offset:3px; border-radius:8px; }
.wrap { max-width:var(--wrap); margin:0 auto; padding-inline:24px; }
.muted { color:var(--muted); font-size:.92rem; }

/* Barra superior */
.top { border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; min-height:56px; font:600 .95rem var(--head); }
.top a { color:var(--fg); text-decoration:none; padding:10px 0; }
.top a:hover { color:var(--brand); }

/* Botones y chips */
.btn { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 26px; border-radius:999px; background:var(--brand); color:var(--on-brand); font:600 1rem var(--head); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent); }
.btn svg { width:18px; height:18px; fill:currentColor; }
.btn.ghost { background:transparent; color:var(--fg); border:1.5px solid var(--line); }
.btn.ghost:hover { border-color:var(--brand); box-shadow:none; }
.chip { display:inline-block; padding:3px 12px; border:1px solid var(--line); background:var(--surface); border-radius:999px; font-size:.85rem; color:var(--muted); }
.chip code { font:inherit; }

/* Icono de la app */
.icon { flex:none; width:72px; height:72px; border-radius:18px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font:700 2rem var(--head); overflow:hidden; box-shadow:0 4px 14px rgb(0 0 0 / .15); }
.icon img { width:100%; height:100%; display:block; object-fit:contain; }
.icon.has-img { background:#fff; padding:7px; box-shadow:0 4px 14px rgb(0 0 0 / .15), inset 0 0 0 1px rgb(0 0 0 / .06); }
.card .icon.has-img { padding:4px; box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08); }

/* Marco de teléfono: contiene la captura completa */
.phone { position:relative; width:var(--w,200px); padding:7px; background:#15171c; border-radius:calc(var(--w,200px) * .16); box-shadow:0 18px 40px rgb(0 0 0 / .28), inset 0 0 0 1.5px #3a3d46; }
.phone::before { content:""; position:absolute; top:12px; left:50%; width:26%; height:5px; margin-left:-13%; border-radius:9px; background:#15171c; z-index:1; opacity:.9; }
.phone img { display:block; width:100%; height:auto; border-radius:calc(var(--w,200px) * .125); background:var(--surface); }

/* Hero */
.hero { background:var(--soft); overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:48px; align-items:center; padding-block:56px 64px; }
.hero h1 { font:800 clamp(2.3rem,5vw,3.8rem)/1.05 var(--head); letter-spacing:-.02em; margin:24px 0 16px; }
.hero .lead { font-size:1.2rem; line-height:1.6; color:var(--muted); max-width:34ch; margin:0 0 28px; }
.hero .id { display:flex; align-items:center; gap:16px; }
.hero .actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.phones { position:relative; display:flex; justify-content:center; align-items:flex-end; padding:40px 12px 28px; }
.phones::before { content:""; position:absolute; inset:14% 0 0; background:var(--brand); border-radius:36px; opacity:.95; }
.phones .phone { position:relative; --w:150px; margin-inline:-6px; }
.phones .phone:nth-child(1) { transform:rotate(-5deg) translateY(10px); }
.phones .phone:nth-child(2) { --w:190px; z-index:2; transform:translateY(-14px); }
.phones .phone:nth-child(3) { transform:rotate(5deg) translateY(10px); }

/* Carrusel de capturas */
.shots { padding-block:56px 40px; }
.shots h2 { font:700 clamp(1.6rem,3vw,2.2rem)/1.2 var(--head); margin:0 0 8px; }
.shots ul { list-style:none; margin:24px 0 0; padding:8px max(24px, calc((100% - var(--wrap)) / 2 + 24px)) 28px; display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:max(24px, calc((100% - var(--wrap)) / 2 + 24px)); scrollbar-width:thin; }
.shots li { flex:none; scroll-snap-align:start; }
.shots .phone { --w:190px; }

/* Política */
.policy { padding-block:40px 72px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px; border-top:1px solid var(--line); }
.toc { position:sticky; top:24px; align-self:start; font-size:.92rem; }
.toc p { margin:0 0 10px; font:600 .95rem var(--head); }
.toc ol { list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.toc a { display:block; padding:5px 0 5px 14px; margin-left:-2px; border-left:2px solid transparent; color:var(--muted); text-decoration:none; }
.toc a:hover { color:var(--brand); border-left-color:var(--brand); }
article { max-width:70ch; }
article h2 { font:800 clamp(1.8rem,3.5vw,2.4rem)/1.15 var(--head); letter-spacing:-.01em; margin:0 0 6px; }
article h3 { font:700 1.35rem/1.3 var(--head); margin:2.4rem 0 .5rem; padding-top:1.6rem; border-top:1px solid var(--line); scroll-margin-top:20px; }
article code { font:.88em ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--soft); padding:.1em .4em; border-radius:6px; }
article h4 { font:600 1.05rem/1.4 var(--head); margin:1.4rem 0 .3rem; scroll-margin-top:20px; }
article ul { margin:.5rem 0 1rem; padding-left:1.3em; }
article li { margin-bottom:.4rem; }
.notice { margin:20px 0; padding:14px 18px; background:var(--soft); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; font-size:.95rem; }
.notice p { margin:0; }

/* Pie */
.foot { background:var(--soft); border-top:1px solid var(--line); }
.foot .wrap { display:flex; flex-wrap:wrap; gap:12px 32px; align-items:center; justify-content:space-between; padding-block:28px; font-size:.95rem; }
.foot nav { display:flex; flex-wrap:wrap; gap:8px 24px; }

/* Portada */
.home-hero { padding-block:64px 24px; }
.home-hero h1 { font:800 clamp(2.4rem,6vw,4.2rem)/1.04 var(--head); letter-spacing:-.025em; margin:0 0 16px; max-width:16ch; }
.home-hero p { font-size:1.2rem; color:var(--muted); max-width:46ch; margin:0; }
.apps { list-style:none; margin:0; padding:32px 0 72px; display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.card { display:flex; flex-direction:column; height:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; color:var(--fg); text-decoration:none; transition:transform .18s, box-shadow .18s; }
.card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgb(0 0 0 / .14); }
.card .stage { background:var(--soft); display:flex; justify-content:center; padding:32px 0; position:relative; overflow:hidden; }
.card .stage::before { content:""; position:absolute; left:22%; right:22%; top:56px; bottom:16px; background:var(--brand); border-radius:28px; }
.card .phone { --w:140px; position:relative; }
.card .body { display:flex; flex-direction:column; gap:6px; padding:20px 22px 24px; flex:1; }
.card .name { display:flex; align-items:center; gap:12px; font:700 1.3rem/1.2 var(--head); }
.card .icon { width:44px; height:44px; border-radius:11px; font-size:1.2rem; box-shadow:none; }
.card .tag { color:var(--muted); font-size:.98rem; line-height:1.5; }
.card .go { margin-top:auto; padding-top:12px; font:600 .95rem var(--head); color:var(--brand); }

@media (max-width:860px) {
  .hero .wrap { grid-template-columns:1fr; gap:32px; padding-block:40px 48px; }
  .policy { grid-template-columns:1fr; gap:24px; }
  .toc { position:static; }
  .toc ol { display:flex; flex-wrap:wrap; gap:8px; border:0; }
  .toc a { border:1px solid var(--line); border-radius:999px; padding:6px 14px; margin:0; }
}
@media (max-width:480px) {
  .phones .phone { --w:104px; margin-inline:-10px; }
  .phones .phone:nth-child(2) { --w:136px; }
  .shots .phone { --w:160px; }
  .apps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } html { scroll-behavior:auto; } .btn:hover, .card:hover { transform:none; } }