/* ph5.css — Próximo Hito · sistema CSS simple y reutilizable
   2025-09-15
*/

/* ========== 1) TOKENS (CSS custom properties) ========== */
:root{
  /* Color system */
  --bg: #ffffff;
  --surface: #f7f7f8;
  --surface-2:#efeff1;
  --text: #0e0f13;
  --muted:#6b7280;
  --primary:#0e7c86;
  --primary-600:#0b6871;
  --primary-700:#08565d;
  --primary-contrast:#ffffff;
  --accent:#f59e0b;
  --danger:#dc2626;
  --border:#e5e7eb;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --step--1: clamp(.85rem, .82rem + .2vw, .95rem);
  --step-0:  clamp(1rem, .96rem + .4vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + .8vw, 1.375rem);
  --step-2:  clamp(1.35rem, 1.2rem + 1.4vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem);
  --step-4:  clamp(2.125rem, 1.8rem + 3vw, 3rem);

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius & shadow */
  --radius-1: .375rem;
  --radius-2: .75rem;
  --radius-3: 1.25rem;
  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.04);
  --shadow-2: 0 2px 10px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);

  /* Content width & breakpoints */
  --content-max-w: 72rem; /* ~1152px */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10; --surface:#121318; --surface-2:#171821;
    --text:#f5f7fa; --muted:#9aa3b2; --border:#1f2330;
    --primary:#28a4ae; --primary-600:#1f8790; --primary-700:#176c73;
    --accent:#fbbf24;
  }
}

/* ========== 2) BASE & RESET LIGERO ========== */
*,*::before,*::after{ box-sizing:border-box; }
html:focus-within{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font-sans); color:var(--text); background:var(--bg);
  font-size:var(--step-0); line-height:1.6; text-rendering:optimizeLegibility;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,h5,h6{ margin:0 0 var(--space-3); line-height:1.2; letter-spacing:-.01em; }
h1{ font-size:var(--step-4); } h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); } h4{ font-size:var(--step-1); }
p{ margin:0 0 var(--space-4); }
ul[class],ol[class]{ padding-left:0; list-style:none; margin:0; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ========== 3) LAYOUT ========== */
.container{ max-width:var(--content-max-w); margin-inline:auto; padding-inline:var(--space-4); }
.section{ padding-block: clamp(2.5rem, 4vw, 5rem); }
.section--alt{ background:var(--surface); }
.section--muted{ background:var(--surface-2); }
.grid{ display:grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(var(--cols, 1), minmax(0,1fr)); }
@media (min-width: 768px){ .grid.md-2{ --cols:2 } .grid.md-3{ --cols:3 } .grid.md-4{ --cols:4 } }
.stack > * + *{ margin-top: var(--stack-gap, var(--space-4)); }

/* ========== 4) NAV ========== */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-block:.75rem; }
.nav__brand{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; }
.nav__brand img{ display:block; width:22px; height:auto; }
.nav__menu{ display:flex; gap: clamp(.5rem, 2vw, 1rem); flex-wrap:wrap; }
.nav__menu a{ padding:.5rem .75rem; border-radius: var(--radius-1); color:var(--muted); }
.nav__menu a:hover,.nav__menu a[aria-current="page"]{ color:var(--text); background:var(--surface-2); }
/* Toggle móvil */
.nav__toggle{
  display:none; border:1px solid var(--border); background:var(--surface-2);
  border-radius:var(--radius-1); padding:.4rem; cursor:pointer;
}
@media (max-width: 768px){
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav__menu{ display:none; width:100%; flex-direction:column; gap:.25rem; padding:.5rem 0; }
  .nav.nav--open .nav__menu{ display:flex; }
  .nav__menu a{ padding:.5rem .75rem; border-radius:var(--radius-1); }
  .nav__inner{ flex-wrap:wrap; }
}

/* ========== 5) HERO ========== */
.hero{ padding-block: clamp(3rem, 6vw, 7rem); }
.hero__eyebrow{ color:var(--muted); font-size:var(--step--1); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.hero__title{ font-size:var(--step-4); margin-top:var(--space-2); }
.hero__subtitle{ font-size:var(--step-1); color:var(--muted); max-width: 48ch; }

/* ========== 6) COMPONENTES ========== */
.card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-2); padding: clamp(1rem, 2vw, 1.25rem); box-shadow:var(--shadow-1); }
.badge{ display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .5rem; font-size:.75rem; font-weight:600; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); }
.badge--primary{ background:color-mix(in srgb, var(--primary) 15%, var(--surface-2)); color:var(--primary-700); border-color: transparent; }

.btn{
  --_bg: var(--surface-2); --_fg: var(--text); --_bd: var(--border);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1rem; border-radius: var(--radius-2); border:1px solid var(--_bd);
  background:var(--_bg); color:var(--_fg); font-weight:700; line-height:1.1; cursor:pointer;
  transition: transform .08s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn--primary{ --_bg: var(--primary); --_fg: var(--primary-contrast); --_bd: color-mix(in srgb, var(--primary) 80%, black); }
.btn--outline{ --_bg: transparent; --_fg: var(--text); --_bd: var(--border); }
.btn--ghost{ --_bg: transparent; --_fg: var(--muted); --_bd: transparent; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }

.kpis{ display:flex; gap:var(--space-6); flex-wrap:wrap; color:var(--muted); }
.kpis .kpi{ min-width:8rem; }
.kpi strong{ font-size:var(--step-2); color:var(--text); display:block; }

/* ========== 7) LISTAS (robustas, sin grid) ========== */
.list{ list-style: disc; padding-left: 1.25rem; margin: 0; }
.list li{ display: list-item; }
.list li + li{ margin-top: .5rem; }
.list li::marker{ color: var(--primary); font-weight: 700; }
/* Defensa ante textos largos/URLs */
.list li, .list li *{ min-width:0; }
.list li p, .list li span, .list li strong, .list li a{ overflow-wrap:anywhere; word-break:break-word; }

/* ========== 8) FORMULARIOS ========== */
.form{ display:grid; gap:var(--space-4); }
.label{ font-weight:600; font-size:.925rem; }
.input, .select, .textarea{
  width:100%; padding:.625rem .75rem; border-radius: var(--radius-1);
  border:1px solid var(--border); background:var(--bg); color:var(--text);
}
.input:focus, .select:focus, .textarea:focus{
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  outline:2px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset:0;
}
.help{ font-size:.85rem; color:var(--muted); }
.checkbox{ display:flex; gap:.5rem; align-items:flex-start; }
.error{ color:var(--danger); }

/* ========== 9) FOOTER ========== */
.footer{ padding-block: var(--space-6); border-top:1px solid var(--border); color:var(--muted); }

/* ========== 10) UTILIDADES ========== */
.center{ display:grid; place-items:center; }
.right{ margin-left:auto; text-align:right; }
.muted{ color:var(--muted); }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.max-w-prose{ max-width: 65ch; }
.gap-2{ gap: var(--space-2) } .gap-3{ gap: var(--space-3) } .gap-4{ gap: var(--space-4) } .gap-5{ gap: var(--space-5) }
.mt-4{ margin-top: var(--space-4) } .mt-6{ margin-top: var(--space-6) } .mb-6{ margin-bottom: var(--space-6) }
.py-6{ padding-block: var(--space-6) } .px-4{ padding-inline: var(--space-4) }

/* ========== 11) BLOQUES ESPECÍFICOS (how/faq) ========== */
.block--how .step{ display:flex; gap:1rem; align-items:flex-start; }
.block--how .step .num{
  --size: 2rem; flex:0 0 var(--size); height:var(--size); display:grid; place-items:center;
  border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-weight:800;
}
.faq details{ border:1px solid var(--border); border-radius:var(--radius-1); padding:.5rem .75rem; background:var(--surface); }
.faq summary{ cursor:pointer; font-weight:600; }
.faq details + details{ margin-top:.5rem; }

/* ========== 12) ACCESIBILIDAD extra ========== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  background:var(--primary); color:var(--primary-contrast);
  padding:.5rem .75rem; border-radius:var(--radius-1); z-index:1000;
}