/* =============================
   Temas y variables
============================= */
:root{
  /* Light por defecto (se sobrescribe si html[data-theme="dark"]) */
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #f7f9fe;
  --text: #0c1524;
  --muted: #5b6b82;
  --brand: #00c282;
  --brand-2: #1977ff;
  --danger: #e64949;
  --border: #dfe6f1;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.07);
}

html[data-theme="dark"]{
  --bg: #0b0e13;
  --panel: #10151d;
  --panel-2: #0d121a;
  --text: #e9eef5;
  --muted: #aab7c7;
  --brand: #00d187;
  --brand-2: #19a3ff;
  --danger: #ff5252;
  --border: #1b2430;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
}

/* Respeta preferencia del SO si el usuario no ha elegido */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme: light;
  }
}

/* =============================
   Reset básico
============================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--brand-2) 18%, transparent) 0%, transparent 60%) , var(--bg);
  color: var(--text);
  line-height: 1.55;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; height:auto; display:block; }
::selection{ background: color-mix(in oklab, var(--brand) 80%, white 20%); color:#031015; }

/* =============================
   Topbar / Header
============================= */
.site-header{
  position: relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 80%, black 20%), var(--panel));
  border-bottom: 1px solid var(--border);
}

.topbar{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
}
.logo{ font-size: 22px; }
.brand-text{ font-size: 16px; }

/* Botón switch tema */
.theme-switch{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 80%, black 5%);
  color: inherit;
  padding:8px 10px;
  border-radius: 12px;
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.theme-switch:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--brand-2) 45%, var(--border)); }
.theme-switch .ico{ font-size: 16px; line-height: 1; }
.theme-switch .sun{ display:none; }
.theme-switch.is-dark .moon{ display:none; }
.theme-switch.is-dark .sun{ display:inline; }

/* Nav */
.nav-toggle{ display:none; }
.hamburger{
  width:38px; height:32px; display:none; cursor:pointer;
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
}
.hamburger span{
  width:26px; height:2px; background: color-mix(in oklab, var(--text) 70%, white 30%); display:block; transition:.25s;
}
.main-nav ul{
  list-style:none; display:flex; gap:18px; margin:0; padding:0;
}
.main-nav a{
  padding:10px 14px; border-radius:10px;
  color: color-mix(in oklab, var(--text) 80%, white 20%);
  border:1px solid transparent;
  transition: .2s ease;
}
.main-nav a:hover{
  background: color-mix(in oklab, var(--panel) 90%, black 10%);
  border-color: var(--border);
}

/* =============================
   Banner
============================= */
.banner{
  position: relative; isolation:isolate;
  max-width: 1200px; margin: 10px auto 28px; border-radius: 18px;
  overflow:hidden; box-shadow: var(--shadow);
  border:1px solid var(--border);
}
.banner img{
  width:100%; height: clamp(240px, 46vw, 420px); object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.banner::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 75%);
  z-index:1;
}
.banner-overlay{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start; padding:24px 26px 28px;
  gap:10px;
}
.banner-overlay h1{
  margin:0; font-size: clamp(22px, 3.5vw, 36px); font-weight:800;
  text-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.banner-overlay p{ margin:0 0 8px; color: color-mix(in oklab, var(--text) 80%, white 20%); }
.cta{
  display:inline-block; padding:12px 18px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand), #06bf98 60%));
  color:#07151a; font-weight:800; letter-spacing:.2px;
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 25%, black);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.cta:active{ transform: translateY(0); }

/* =============================
   Main / Cards
============================= */
.main-content{ padding: 10px 16px 40px; }
.section{
  max-width: 1200px; margin: 0 auto; background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border); border-radius: 18px; padding: 20px;
  box-shadow: var(--shadow-soft);
}
.section h2{ margin: 2px 0 18px; font-size: clamp(18px, 2.5vw, 26px); }

.cards-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 600px){ .cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px){ .cards-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card{
  background: color-mix(in oklab, var(--panel) 85%, black 15%);
  border:1px solid var(--border);
  border-radius: 16px; padding: 16px; display:flex; flex-direction:column; gap:8px;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
html[data-theme="light"] .card{ background: #ffffff; }
.card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--brand-2) 30%, var(--border));
  box-shadow: 0 12px 26px rgba(0,0,0,.15);
}
.card h3{ margin:0; font-size: 18px; }
.card p{ margin:0; color: var(--muted); }
.card-primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 8%, var(--panel)), color-mix(in oklab, #0f1420 40%, var(--panel)));
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}
.card-outline{
  background: transparent; border-style: dashed;
}
.chip{
  align-self:flex-start; margin-top:6px;
  font-size:12px; padding:6px 10px; border-radius: 999px;
  color:#031b10; background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand), #05b990 60%));
  border:1px solid color-mix(in oklab, white 15%, transparent);
}

/* Nota y enlace de ayuda */
.note{ margin-top: 14px; color: var(--muted); font-size: 13.5px; }
.help-link{
  display:inline-block; margin-left:8px; padding:2px 6px; border-radius: 8px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 95%, black 5%);
}
.help-link:hover{ border-color: color-mix(in oklab, var(--brand-2) 30%, var(--border)); }

/* =============================
   Footer
============================= */
.site-footer{
  border-top:1px solid var(--border);
  padding: 22px 16px 32px; background: color-mix(in oklab, var(--panel) 92%, black 8%);
}
.footer-links{
  max-width: 1200px; margin: 0 auto 12px; display:flex; flex-wrap:wrap; gap:10px 16px;
}
.footer-links a{ color: color-mix(in oklab, var(--text) 75%, white 25%); font-size:14px; opacity:.9; }
.site-footer p{ max-width:1200px; margin:0 auto; color: var(--muted); font-size: 13.5px; }

/* =============================
   Navegación móvil
============================= */
@media (max-width: 880px){
  .hamburger{ display:flex; }
  .main-nav{
    position:absolute; top:58px; left:0; right:0; z-index: 20;
    background: color-mix(in oklab, var(--panel) 95%, black 5%);
    border-top:1px solid var(--border);
    transform: translateY(-12px);
    opacity:0; pointer-events:none; transition: opacity .2s ease;
  }
  .main-nav ul{ flex-direction:column; gap:0; padding:8px; }
  .main-nav a{ display:block; padding:14px 14px; border-radius:12px; }
  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:checked ~ .main-nav{ opacity:1; pointer-events:auto; }
}