/* ---------------------------------------------------------------
   alisios.dev — página en construcción
   Sin JavaScript, sin dependencias, sin peticiones a terceros.
   Paleta y tipografía tomadas de la spec del sitio (sección 4).
   --------------------------------------------------------------- */

@font-face { font-family:"Manrope"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:800;
  font-display:swap; src:url("../fonts/manrope-800.woff2") format("woff2"); }

:root {
  /* marca */
  --ink:#0D1B2A; --navy:#1B263B; --blue:#2D6CDF; --sky:#4CC9F0;
  --sand:#F4E9D3; --mist:#E6E8EC; --paper:#FFFFFF;

  /* semánticos (claro) */
  --fondo:var(--paper);
  --superficie:#FBFAF7;
  --borde:var(--mist);
  --texto:var(--ink);
  --texto-suave:#4A5A6E;
  --accion:var(--blue);
  --accion-viva:#1F58C4;
  --sobre-accion:#FFFFFF;
  --acento:var(--sky);

  --fuente:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --margen:clamp(1.25rem, 5vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:var(--ink);
    --superficie:#16253A;
    --borde:#26374E;
    --texto:var(--mist);
    --texto-suave:#97A3B4;
    --accion:#4C8BF5;
    --accion-viva:#6FA3FF;
    --sobre-accion:#06111E;
  }
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--fuente);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img { display:block; max-width:100%; }

a { color:var(--accion); text-underline-offset:.18em; }
a:hover { color:var(--accion-viva); }

:focus-visible { outline:3px solid var(--acento); outline-offset:3px; border-radius:6px; }

/* --- selector de idioma ---------------------------------------- */
.idioma {
  display:flex; justify-content:flex-end; gap:.45rem;
  padding:var(--margen) var(--margen) 0;
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
}
.idioma a { color:var(--texto-suave); text-decoration:none; }
.idioma a:hover { color:var(--accion); }
.idioma [aria-current="true"] { color:var(--accion); }
.idioma span { color:var(--borde); }

/* --- contenido -------------------------------------------------- */
.principal {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem, 7vw, 4.5rem) var(--margen);
}

.bloque { width:100%; max-width:40rem; text-align:center; }

/* El cambio claro/oscuro lo hace <picture>, para bajar un solo archivo. */
.logo { width:clamp(190px, 42vw, 260px); margin:0 auto clamp(2rem, 5vw, 2.75rem); height:auto; }

.ceja {
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 1.25rem;
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--texto-suave);
}
.ceja::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--acento); flex:none;
}

h1 {
  margin:0 0 1.25rem;
  font-size:clamp(1.9rem, 5.4vw, 3rem);
  font-weight:800; line-height:1.08; letter-spacing:-.03em;
  text-wrap:balance;
}

.entrada {
  margin:0 auto 2.5rem;
  max-width:34rem;
  font-size:clamp(1.05rem, 2.2vw, 1.2rem);
  color:var(--texto-suave);
  text-wrap:pretty;
}

/* --- estado real del proyecto ----------------------------------- */
.estado {
  margin:0 0 2.5rem;
  padding:1.5rem clamp(1.25rem, 4vw, 1.75rem);
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:14px;
  text-align:left;
}
.estado h2 {
  margin:0 0 1rem;
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--texto-suave);
}
.estado ul { margin:0; padding:0; list-style:none; display:grid; gap:.85rem; }
.estado li {
  display:grid; grid-template-columns:auto 1fr; gap:.75rem;
  font-size:.98rem; line-height:1.55;
}
.estado li::before {
  content:""; width:7px; height:7px; border-radius:50%;
  margin-top:.55rem; flex:none;
}
.estado .hecho::before  { background:var(--acento); }
.estado .curso::before  { background:var(--accion); }
.estado .falta::before  { background:var(--borde); }

/* --- llamada ----------------------------------------------------- */
.boton {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.85rem;
  border-radius:10px;
  background:var(--accion); color:var(--sobre-accion);
  font-weight:700; font-size:1.02rem; text-decoration:none;
  transition:background-color .15s ease;
}
.boton:hover { background:var(--accion-viva); color:var(--sobre-accion); }

.nota { margin:1.25rem 0 0; font-size:.9rem; color:var(--texto-suave); }

/* --- horizonte ---------------------------------------------------- */
.horizonte { position:relative; height:clamp(170px, 32vh, 320px); overflow:hidden; }
.horizonte img { width:100%; height:100%; object-fit:cover; object-position:62% 46%; }
.horizonte::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to bottom,
    var(--fondo) 0%,
    color-mix(in srgb, var(--fondo), transparent 100%) 58%
  );
}

/* --- pie ---------------------------------------------------------- */
.pie {
  background:var(--navy); color:var(--mist);
  padding:2rem var(--margen);
  text-align:center;
  font-size:.85rem; line-height:1.6;
}
.pie p { margin:0; }
.pie p + p { margin-top:.6rem; color:rgba(230,232,236,.62); }
.pie a { color:var(--sky); }