/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---------- Reset & Variables ---------- */
:root{
/* Colores (claro) */
--bg: #ffffff;
--text: #1b1b1b;
--muted: #6b6b6b;
--border: #e6e6e6;
--primary: #4f46e5; /* índigo */
--primary-contrast: #ffffff;
--link: #2563eb;
--link-visited: #7c3aed;

/* Espacios y radios */
--radius: 14px;
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;

/* Anchos */
--container: 1100px;

/* Sombra suave */
--shadow: 0 8px 24px rgba(0,0,0,.08);

/* Tipografía */
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Verdana, Arial, "Helvetica Neue", sans-serif;
--leading: 1.6;

/* Tamaños fluidos */
--fs-300: clamp(.85rem, .8rem + .2vw, .95rem);
--fs-400: clamp(1rem, .95rem + .4vw, 1.125rem);
--fs-500: clamp(1.15rem, 1.05rem + .6vw, 1.35rem);
--fs-600: clamp(1.35rem, 1.2rem + .9vw, 1.75rem);
--fs-700: clamp(1.8rem, 1.5rem + 1.6vw, 2.25rem);
}

@media (prefers-color-scheme: dark){
:root{
--bg: #0f1115;
--text: #e5e7eb;
--muted: #a1a1aa;
--border: #24262b;
--primary: #818cf8;
--primary-contrast: #0f1115;
--link: #93c5fd;
--link-visited: #c4b5fd;
--shadow: 0 8px 24px rgba(0,0,0,.35);
}
}

/* Reset básico */
*,
*::before,
*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fs-400);
line-height: var(--leading);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

img, svg, video{ max-width: 100%; height: auto; display: block; }
input, button, textarea, select{ font: inherit; color: inherit; }
a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:visited{ color: var(--link-visited); }
:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Estructura ---------- */
.container{
width: min(100% - 2rem, var(--container));
margin-inline: auto;
}

.header{
position: sticky; top: 0; z-index: 50;
backdrop-filter: saturate(1.2) blur(6px);
background: color-mix(in srgb, var(--bg) 85%, transparent);
border-bottom: 1px solid var(--border);
}

.navbar{
display: flex; align-items: center; gap: var(--space-4);
padding: .75rem 0;
}

.brand{
font-weight: 800; letter-spacing: .2px;
font-size: var(--fs-500);
}

.nav{
margin-left: auto;
display: flex; gap: var(--space-4); align-items: center;
}
.nav a{
padding: .35rem .6rem; border-radius: 10px;
color: var(--text); text-decoration: none;
}
.nav a[aria-current="page"],
.nav a:hover{
background: color-mix(in srgb, var(--primary) 14%, transparent);
color: var(--text);
}

/* Hamburguesa (móvil) */
.nav-toggle{
display: none; appearance: none; background: none; border: 0; padding: .4rem;
}
.nav-toggle span{
display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px;
}

/* Layout principal */
.main{
padding-block: var(--space-6);
}
.layout{
display: grid; gap: var(--space-6);
grid-template-columns: 1fr;
}
.sidebar{
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-5);
box-shadow: var(--shadow);
background: color-mix(in srgb, var(--bg) 98%, transparent);
}
.content{
display: grid; gap: var(--space-5);
}

/* Footer */
.footer{
margin-top: var(--space-6);
padding-block: var(--space-6);
border-top: 1px solid var(--border);
color: var(--muted);
font-size: var(--fs-300);
}

/* Responsivo /
@media (min-width: 880px){
.layout{
grid-template-columns: minmax(0,1fr) 320px; / contenido + sidebar */
}
.sidebar{ position: sticky; top: 84px; align-self: start; }
.nav-toggle{ display: none; }
}
@media (max-width: 879px){
.nav{ display: none; }
.nav.is-open{ display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.nav-toggle{ display: inline-block; margin-left: auto; }
}

/* ---------- Tipografía ---------- */
h1, h2, h3{
line-height: 1.2; margin: 0 0 .5em 0;
}
h1{ font-size: var(--fs-700); }
h2{ font-size: var(--fs-600); margin-top: 1.2em; }
h3{ font-size: var(--fs-500); margin-top: 1em; }
p{ margin: 0 0 1em 0; color: var(--text); }
.lead{ font-size: var(--fs-500); color: var(--muted); }
small, .small{ font-size: var(--fs-300); color: var(--muted); }

/* ---------- Componentes ---------- /
/ Botones */
.btn{
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid var(--border);
border-radius: 999px;
padding: .55rem .95rem;
background: var(--bg); color: var(--text);
text-decoration: none; cursor: pointer;
transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{
background: var(--primary);
color: var(--primary-contrast);
border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}
.btn-ghost{
background: transparent;
border-color: var(--border);
}

/* Tarjetas */
.card{
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: clip;
background: color-mix(in srgb, var(--bg) 98%, transparent);
box-shadow: var(--shadow);
}
.card__media img{ width: 100%; display: block; }
.card__body{ padding: var(--space-5); }
.card__title{ font-size: var(--fs-500); margin: 0 0 .25em 0; }
.card__text{ color: var(--muted); }

/* Listas limpias */
.list{ padding: 0; margin: 0; list-style: none; }
.list li{ padding: .35rem 0; border-bottom: 1px dashed var(--border); }
.list li:last-child{ border-bottom: 0; }

/* Código / bloques pre */
code, pre{
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
border: 1px solid var(--border);
}
code{ border-radius: 8px; padding: .15rem .35rem; }
pre{
padding: var(--space-5);
border-radius: var(--radius);
overflow: auto;
}

/* Formularios */
.field{ display: grid; gap: .35rem; margin-bottom: 1rem; }
label{ font-weight: 600; font-size: .95em; }
input[type="text"],
input[type="email"],
input[type="url"],
textarea, select{
width: 100%;
padding: .6rem .75rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
}
input:focus, textarea:focus, select:focus{
outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
border-color: var(--primary);
}

/* ---------- Utilidades ---------- */
.grid{ display: grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 720px){
.grid-2, .grid-3{ grid-template-columns: 1fr; }
}
.flex{ display: flex; gap: var(--space-4); }
.center{ text-align: center; }
.m-0{ margin: 0!important; } .mt-4{ margin-top: var(--space-4)!important; }
.mb-4{ margin-bottom: var(--space-4)!important; }
.p-0{ padding: 0!important; } .p-4{ padding: var(--space-4)!important; }
.hide{ display: none!important; }

/* ---------- Accesibilidad & Motion ---------- */
@media (prefers-reduced-motion: reduce){
*{ animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}

/* ---------- Ejemplos de “secciones” ---------- */
.section{
padding-block: clamp(2.5rem, 1.5rem + 2vw, 4rem);
border-top: 1px solid var(--border);
}
.section:first-child{ border-top: 0; }
.section__title{ margin-bottom: .75em; }

/* ---------- Helpers para el nav móvil (opcional JS) ---------- /
/ Si usas JS: al hacer click en .nav-toggle, añades/quitas .is-open en .nav */

/* ---------- Fin ---------- */