@charset "UTF-8";
/* ==========================================================================
   eneboo.org — hoja de estilo única
   Breakpoints (mobile-first): 30em/480 · 48em/768 · 64em/1024 · 75em/1200
   ========================================================================== */

@layer reset, base, layout, componentes, paginas, utilidades;

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --naranja: #ee5f00;
  --naranja-tinta: #c24e00;      /* enlaces y texto pequeño sobre claro (AA) */
  --naranja-hover: #a84400;
  --sobre-naranja: #211307;      /* texto sobre botón naranja */
  --tinte-1: #fff3ea;
  --tinte-2: #f8d9c2;

  /* Superficie */
  --fondo: #ffffff;
  --fondo-alt: #f6f7f8;
  --superficie: #ffffff;
  --superficie-hundida: #f1f3f5;
  --borde: #e2e5e9;
  --borde-fuerte: #c6cbd2;
  --texto: #24272b;
  --texto-2: #5a616b;
  --texto-3: #6d747f;
  --inverso: #17191e;

  /* Semánticos */
  --exito: #1a7f37;  --exito-bg: #ecf7ef;
  --aviso: #955d00;  --aviso-bg: #fdf5e2;
  --info:  #0b6dad;  --info-bg:  #eaf4fb;

  /* Tipografía */
  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.125rem, 1.55rem + 2.9vw, 3.5rem);
  --fs-h1:   clamp(1.875rem, 1.55rem + 1.5vw, 2.5rem);
  --fs-h2:   clamp(1.5rem, 1.36rem + .7vw, 1.875rem);
  --fs-h3:   clamp(1.1875rem, 1.14rem + .35vw, 1.375rem);
  --fs-lead: 1.1875rem;
  --fs-base: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .8125rem;

  /* Espaciado */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-seccion: clamp(3rem, 2rem + 5vw, 6rem);

  /* Formas */
  --radio-s: .375rem;
  --radio-m: .625rem;
  --radio-l: 1rem;
  --radio-pill: 999px;
  --sombra-1: 0 1px 2px rgba(23,25,30,.06);
  --sombra-2: 0 1px 3px rgba(23,25,30,.07), 0 6px 16px -6px rgba(23,25,30,.12);
  --sombra-3: 0 2px 6px rgba(23,25,30,.08), 0 16px 40px -12px rgba(23,25,30,.22);

  /* Layout */
  --ancho-max: 75rem;
  --ancho-prosa: 70ch;
  --ancho-estrecho: 46rem;
  --alto-header: 4rem;

  --transicion: 150ms ease;
  accent-color: var(--naranja);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --naranja-tinta: #ff8a3d;
    --naranja-hover: #ffa76b;
    --tinte-1: rgba(238, 95, 0, .12);
    --tinte-2: rgba(238, 95, 0, .28);

    --fondo: #141619;
    --fondo-alt: #1b1e22;
    --superficie: #1e2126;
    --superficie-hundida: #14161a;
    --borde: #2e333a;
    --borde-fuerte: #454c55;
    --texto: #e8eaed;
    --texto-2: #a5adb8;
    --texto-3: #8b939e;

    --exito: #57ab5a;  --exito-bg: rgba(87,171,90,.14);
    --aviso: #d9a514;  --aviso-bg: rgba(217,165,20,.14);
    --info:  #539bf5;  --info-bg:  rgba(83,155,245,.14);

    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 8px rgba(0,0,0,.5);
    --sombra-3: 0 8px 32px rgba(0,0,0,.6);
  }
}

/* --------------------------------------------------------------------------
   2. FUENTES
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Fallback con métricas ajustadas para que no haya salto al cargar la fuente */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  svg { fill: currentColor; }
  input, button, textarea, select { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  :target { scroll-margin-top: calc(var(--alto-header) + 1.5rem); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
@layer base {
  body {
    font: 400 var(--fs-base)/1.55 var(--sans);
    background: var(--fondo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }

  h1, h2, h3, h4 { text-wrap: balance; color: var(--texto); }
  h1 { font-size: var(--fs-h1); font-weight: 750; line-height: 1.15; letter-spacing: -.015em; }
  h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2;  letter-spacing: -.01em; }
  h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.3; }
  h4 { font-size: 1.0625rem;    font-weight: 650; line-height: 1.35; }
  p  { text-wrap: pretty; }

  a { color: var(--naranja-tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--naranja-hover); }

  :focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: 2px;
    border-radius: var(--radio-s);
  }

  ::selection { background: var(--naranja); color: #fff; }
  @media (prefers-color-scheme: dark) { ::selection { color: #17191e; } }

  code, kbd, samp {
    font-family: var(--mono);
    font-size: .9em;
  }
  :not(pre) > code {
    background: var(--superficie-hundida);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
    padding: .1em .35em;
    word-break: break-word;
  }
  hr { border: 0; border-top: 1px solid var(--borde); margin: var(--sp-6) 0; }
  abbr[title] { text-decoration: underline dotted; cursor: help; }
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
@layer layout {
  .contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
  }
  .contenedor--prosa   { max-width: calc(var(--ancho-prosa) + 4rem); }
  .contenedor--estrecho{ max-width: calc(var(--ancho-estrecho) + 4rem); }

  .seccion { padding-block: var(--sp-seccion); }
  .seccion--alt {
    background: var(--fondo-alt);
    border-block: 1px solid var(--borde);
  }
  .seccion--oscura { background: var(--inverso); color: #e8eaed; }
  .seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
  .seccion--oscura p { color: #c9ced6; }

  .grid-auto {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }
  .grid-auto--estrecho {
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  }

  .flujo > * + * { margin-top: var(--sp-4); }

  /* --- Cabecera ---------------------------------------------------------- */
  .cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--borde);
  }
  /* El fondo y el desenfoque viven en un pseudo-elemento a propósito: aplicar
     backdrop-filter a .cabecera la convertiría en contenedor de posicionamiento
     de sus descendientes position:fixed, y el panel del menú móvil quedaría
     colapsado dentro de la altura de la cabecera. */
  .cabecera::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
  }
  @supports (backdrop-filter: blur(8px)) {
    .cabecera::before { backdrop-filter: blur(10px) saturate(1.4); }
  }
  @supports not (backdrop-filter: blur(8px)) {
    .cabecera::before { background: var(--fondo); }
  }
  .cabecera__barra {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--alto-header);
  }
  .cabecera__nav { display: none; }
  .cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

  @media (min-width: 64em) {
    .cabecera__nav {
      display: flex;
      align-items: center;
      gap: clamp(.5rem, 1.4vw, 1.35rem);
      margin-left: var(--sp-5);
    }
    .menu-movil { display: none; }
  }

  /* (Los ajustes de la barra en móvil estrecho están en la capa "utilidades":
     deben ganar a .btn de la capa "componentes".) */

  .nav-enlace {
    color: var(--texto-2);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 550;
    padding: .4rem .1rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .nav-enlace:hover { color: var(--texto); }
  .nav-enlace[aria-current="page"] {
    color: var(--naranja-tinta);
    border-bottom-color: var(--naranja);
  }

  /* --- Menú móvil (sin JavaScript) --------------------------------------- */
  .menu-movil > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-m);
    color: var(--texto);
  }
  .menu-movil > summary::-webkit-details-marker { display: none; }
  .menu-movil > summary .icono { width: 1.35rem; height: 1.35rem; }
  .menu-movil[open] > summary { background: var(--fondo-alt); border-color: var(--borde-fuerte); }
  .menu-movil[open] > summary .icono-menu { display: none; }
  .menu-movil:not([open]) > summary .icono-cerrar { display: none; }
  /* +1px porque la cabecera mide --alto-header más su borde inferior. */
  .menu-movil__panel {
    position: fixed;
    inset: calc(var(--alto-header) + 1px) 0 0 0;
    background: var(--fondo);
    border-top: 1px solid var(--borde);
    padding: var(--sp-5) clamp(1rem, 4vw, 2rem) var(--sp-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }
  .menu-movil__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }
  .menu-movil__panel a {
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--texto);
    text-decoration: none;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--borde);
  }
  .menu-movil__panel a[aria-current="page"] { color: var(--naranja-tinta); }
  /* La fila inferior (versión y GitHub) no son enlaces de navegación. */
  .menu-movil__pie a {
    font-size: var(--fs-sm);
    border-bottom: 0;
    padding: 0;
  }
  .menu-movil__pie .badge--version { font-size: var(--fs-xs); }

  /* --- Pie -------------------------------------------------------------- */
  .pie {
    background: var(--inverso);
    color: #c9ced6;
    padding-block: var(--sp-7) var(--sp-5);
    font-size: var(--fs-sm);
  }
  /* Sin margen propio: la última sección ya aporta su padding inferior, y así
     el pie encaja sin banda blanca cuando la página acaba en franja oscura. */
  .pie a { color: #c9ced6; text-decoration: none; }
  .pie a:hover { color: #ff8a3d; text-decoration: underline; }
  .pie__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: var(--sp-6);
  }
  .pie__cols {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    padding-bottom: var(--sp-6);
  }
  .pie__cols h2 {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    margin-bottom: var(--sp-3);
  }
  .pie__cols ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    list-style: none;
    padding: 0;
  }
  /* Área de pulsación holgada en móvil sin separar visualmente los enlaces. */
  .pie__cols li > a { display: inline-block; padding-block: .35rem; }
  .pie__legal {
    border-top: 1px solid #2e333a;
    padding-top: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
    color: #8b939e;
    font-size: var(--fs-xs);
  }
}

/* --------------------------------------------------------------------------
   6. COMPONENTES
   -------------------------------------------------------------------------- */
@layer componentes {

  /* --- Logotipo ---------------------------------------------------------- */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--texto);
    flex-shrink: 0;
  }
  /* El logotipo es la imagen original del proyecto; se escala por altura. */
  .logo img { width: auto; height: 2rem; }
  @media (min-width: 30em) { .logo img { height: 3.25rem; } }
  .pie .logo img { height: 2.5rem; }

  /* --- Botones ----------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 650;
    font-size: var(--fs-base);
    line-height: 1.2;
    padding: .7rem 1.3rem;
    border-radius: var(--radio-m);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion),
                color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
  }
  .btn .icono { width: 1.15em; height: 1.15em; flex-shrink: 0; }

  .btn--primario { background: var(--naranja); color: var(--sobre-naranja); }
  .btn--primario:hover {
    background: #ff7419;
    color: var(--sobre-naranja);
    transform: translateY(-1px);
    box-shadow: var(--sombra-2);
  }
  .btn--primario:active { background: #d95600; transform: none; }

  .btn--secundario {
    background: var(--superficie);
    color: var(--texto);
    border-color: var(--borde-fuerte);
  }
  .btn--secundario:hover {
    border-color: var(--naranja);
    color: var(--naranja-tinta);
    background: var(--tinte-1);
  }
  .seccion--oscura .btn--secundario {
    background: transparent;
    color: #e8eaed;
    border-color: #454c55;
  }
  .seccion--oscura .btn--secundario:hover { border-color: var(--naranja); color: #ff8a3d; background: rgba(238,95,0,.1); }

  .btn--fantasma {
    background: none;
    padding-inline: 0;
    padding-block: .5rem;
    color: var(--naranja-tinta);
  }
  .btn--fantasma:hover { color: var(--naranja-hover); text-decoration: underline; }
  .btn--fantasma .icono-flecha { transition: transform var(--transicion); }
  .btn--fantasma:hover .icono-flecha { transform: translateX(3px); }

  .btn--sm { font-size: var(--fs-sm); padding: .45rem .85rem; min-height: 2.5rem; }
  .btn-grupo { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  /* --- Insignias --------------------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: .22rem .65rem;
    border-radius: var(--radio-pill);
    white-space: nowrap;
    text-decoration: none;
  }
  .badge--version {
    background: var(--tinte-1);
    color: var(--naranja-tinta);
    border: 1px solid var(--tinte-2);
    font-family: var(--mono);
    font-size: .75rem;
  }
  a.badge--version:hover { background: var(--tinte-2); color: var(--naranja-hover); }
  .badge--estable { background: var(--exito-bg); color: var(--exito); }
  .badge--neutro  { background: var(--fondo-alt); color: var(--texto-3); border: 1px solid var(--borde); }
  .badge--fecha   { background: var(--fondo-alt); color: var(--texto-2); font-variant-numeric: tabular-nums; }

  .punto-vivo {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--exito);
    flex-shrink: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .punto-vivo { animation: latido 2.4s ease-in-out infinite; }
    @keyframes latido {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--exito) 55%, transparent); }
      50%      { box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--exito) 0%, transparent); }
    }
  }

  /* --- Tarjetas ---------------------------------------------------------- */
  .card {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    padding: var(--sp-5);
    box-shadow: var(--sombra-1);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
  }
  .card h3 { margin-bottom: var(--sp-2); }
  .card p  { color: var(--texto-2); font-size: var(--fs-sm); }
  .card--enlace:hover {
    border-color: var(--tinte-2);
    box-shadow: var(--sombra-2);
    transform: translateY(-2px);
  }
  .card--enlace a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radio-m);
    background: var(--tinte-1);
    color: var(--naranja);
    margin-bottom: var(--sp-4);
  }
  .card__icono .icono { width: 1.5rem; height: 1.5rem; }
  .card a { text-decoration: none; }
  .card a:hover { text-decoration: underline; }

  /* --- Bloque de terminal ------------------------------------------------ */
  .terminal {
    background: #17191e;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-3);
    overflow: hidden;
    border: 1px solid #2e333a;
  }
  .terminal__barra {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid #2e333a;
    background: #1c1f25;
  }
  .terminal__punto { width: .7rem; height: .7rem; border-radius: 50%; background: #3d434c; }
  .terminal__punto:nth-child(3) { background: var(--naranja); }
  .terminal__titulo {
    margin-left: .5rem;
    font-family: var(--mono);
    font-size: var(--fs-xs);
    color: #8b939e;
  }
  .terminal pre {
    margin: 0;
    padding: var(--sp-5);
    overflow-x: auto;
    font-family: var(--mono);
    font-size: .875rem;
    line-height: 1.75;
    color: #e8eaed;
    tab-size: 2;
  }
  .terminal .prompt { color: #ff8a3d; user-select: none; -webkit-user-select: none; }
  .terminal .coment { color: #8b939e; }
  .terminal .destaca { color: #7ee787; }

  /* --- Tablas ------------------------------------------------------------ */
  .tabla-scroll {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    background: var(--superficie);
    /* Sombras laterales que aparecen sólo si queda contenido por desplazar:
       en móvil es la única pista de que la tabla tiene más columnas. */
    background-image:
      linear-gradient(to right, var(--superficie), transparent 2.5rem),
      linear-gradient(to left, var(--superficie), transparent 2.5rem),
      linear-gradient(to right, rgba(23,25,30,.14), transparent 1rem),
      linear-gradient(to left, rgba(23,25,30,.14), transparent 1rem);
    background-repeat: no-repeat;
    background-size: 3rem 100%, 3rem 100%, 1rem 100%, 1rem 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-attachment: local, local, scroll, scroll;
  }
  .tabla-scroll table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  /* La nota de la tabla va FUERA del contenedor con scroll: dentro adoptaría
     el ancho de la tabla (más de 500px) y su texto quedaría cortado en móvil. */
  .tabla-nota {
    font-size: var(--fs-xs);
    color: var(--texto-3);
    margin-bottom: var(--sp-2);
    max-width: 80ch;
  }
  .tabla-scroll th, .tabla-scroll td { padding: .7rem var(--sp-4); text-align: left; white-space: nowrap; }
  .tabla-scroll thead th {
    background: var(--fondo-alt);
    font-weight: 650;
    color: var(--texto-2);
    border-bottom: 1px solid var(--borde);
  }
  .tabla-scroll tbody tr + tr th, .tabla-scroll tbody tr + tr td { border-top: 1px solid var(--borde); }
  .tabla-scroll tbody tr:hover { background: var(--fondo-alt); }
  .tabla-scroll .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* --- Avisos ------------------------------------------------------------ */
  .callout {
    --_c: var(--info);
    --_bg: var(--info-bg);
    background: var(--_bg);
    border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent);
    border-inline-start: 4px solid var(--_c);
    border-radius: var(--radio-m);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
  }
  .callout--exito { --_c: var(--exito); --_bg: var(--exito-bg); }
  .callout--aviso { --_c: var(--aviso); --_bg: var(--aviso-bg); }
  .callout--marca { --_c: var(--naranja); --_bg: var(--tinte-1); }
  .callout .icono { width: 1.25rem; height: 1.25rem; color: var(--_c); flex-shrink: 0; margin-top: .15rem; }
  .callout strong { color: var(--_c); }
  .callout p { font-size: var(--fs-sm); }
  .callout p + p { margin-top: var(--sp-2); }

  /* --- Acordeón (FAQ) ---------------------------------------------------- */
  .acordeon {
    border: 1px solid var(--borde);
    border-radius: var(--radio-m);
    background: var(--superficie);
  }
  .acordeon + .acordeon { margin-top: var(--sp-3); }
  .acordeon > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radio-m);
  }
  .acordeon > summary::-webkit-details-marker { display: none; }
  .acordeon > summary:hover { background: var(--fondo-alt); }
  .acordeon > summary .icono {
    width: 1.1rem; height: 1.1rem;
    flex-shrink: 0;
    color: var(--texto-3);
    transition: transform var(--transicion);
  }
  .acordeon[open] > summary {
    color: var(--naranja-tinta);
    border-bottom: 1px solid var(--borde);
    border-radius: var(--radio-m) var(--radio-m) 0 0;
  }
  .acordeon[open] > summary .icono { transform: rotate(180deg); color: var(--naranja-tinta); }
  .acordeon__cuerpo { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .acordeon__cuerpo > * + * { margin-top: var(--sp-3); }
  .acordeon__cuerpo p { color: var(--texto-2); }

  /* --- Migas de pan ------------------------------------------------------ */
  .migas { font-size: var(--fs-sm); color: var(--texto-3); }
  .migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
  .migas li + li::before { content: "/"; margin-right: .4rem; color: var(--borde-fuerte); }
  .migas a { color: var(--texto-2); text-decoration: none; }
  .migas a:hover { color: var(--naranja-tinta); text-decoration: underline; }

  /* --- Cronología -------------------------------------------------------- */
  .timeline { list-style: none; padding: 0; position: relative; }
  .timeline > li {
    position: relative;
    padding-inline-start: 2.25rem;
    padding-bottom: var(--sp-6);
    border-inline-start: 2px solid var(--borde);
    margin-inline-start: .35rem;
  }
  .timeline > li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
  .timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -.44rem;
    top: .35rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--borde-fuerte);
    border: 3px solid var(--fondo);
    box-sizing: content-box;
  }
  .timeline > li.es-release::before { background: var(--naranja); width: .9rem; height: .9rem; inset-inline-start: -.52rem; }
  .timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .timeline h3 { margin-bottom: var(--sp-2); }
  .timeline p { color: var(--texto-2); }
  .timeline__anyo {
    font-size: var(--fs-h3);
    font-weight: 750;
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
    margin: var(--sp-6) 0 var(--sp-4);
  }
  .timeline__anyo:first-child { margin-top: 0; }

  /* --- Prosa ------------------------------------------------------------- */
  .prosa { max-width: var(--ancho-prosa); font-size: 1.0625rem; line-height: 1.7; }
  .prosa > * + * { margin-top: var(--sp-4); }
  .prosa h2 { margin-top: var(--sp-7); }
  .prosa h3 { margin-top: var(--sp-5); }
  .prosa ul, .prosa ol { padding-inline-start: 1.35rem; display: flex; flex-direction: column; gap: var(--sp-2); }
  .prosa li::marker { color: var(--naranja); }
  .prosa ol li::marker { color: var(--texto-3); font-variant-numeric: tabular-nums; }
  .prosa dt { font-weight: 650; margin-top: var(--sp-4); }
  .prosa dd { margin: var(--sp-1) 0 0; color: var(--texto-2); }

  /* --- Lista con marcas -------------------------------------------------- */
  .lista-check { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
  .lista-check li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
  .lista-check .icono { width: 1.15rem; height: 1.15rem; color: var(--exito); flex-shrink: 0; margin-top: .18rem; }

  /* --- Saltar al contenido ----------------------------------------------- */
  .saltar {
    position: absolute;
    left: -9999px;
    z-index: 100;
  }
  .saltar:focus {
    left: var(--sp-4);
    top: var(--sp-4);
    background: var(--naranja);
    color: var(--sobre-naranja);
    padding: .7rem 1.2rem;
    border-radius: var(--radio-m);
    font-weight: 650;
  }

  /* --- Banner de cookies ------------------------------------------------- */
  .cookies {
    position: fixed;
    inset-inline: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 90;
    max-width: 34rem;
    margin-inline: auto;
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-3);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm);
  }
  .cookies[hidden] { display: none; }
  .cookies p { color: var(--texto-2); margin-bottom: var(--sp-3); }
  .cookies .btn-grupo { gap: var(--sp-2); }

  /* --- Encabezado de página ---------------------------------------------- */
  .pagina-cabecera {
    background: var(--fondo-alt);
    border-bottom: 1px solid var(--borde);
    padding-block: var(--sp-6) var(--sp-7);
  }
  .pagina-cabecera h1 { margin-top: var(--sp-3); }
  .pagina-cabecera .entradilla {
    font-size: var(--fs-lead);
    color: var(--texto-2);
    max-width: 62ch;
    margin-top: var(--sp-4);
  }
  .pagina-cabecera .meta {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--texto-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
  }

  .eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--naranja-tinta);
    margin-bottom: var(--sp-3);
  }
  .seccion-cabecera { max-width: 60ch; margin-bottom: var(--sp-6); }
  .seccion-cabecera p { color: var(--texto-2); font-size: var(--fs-lead); margin-top: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   7. PÁGINAS
   -------------------------------------------------------------------------- */
@layer paginas {

  /* --- Portada: hero ----------------------------------------------------- */
  .hero { position: relative; overflow: hidden; padding-block: var(--sp-seccion); }
  .hero__marca {
    position: absolute;
    inset-inline-end: -3rem;
    bottom: -1.5rem;
    width: min(22rem, 34%);
    opacity: .07;
    pointer-events: none;
  }
  @media (prefers-color-scheme: dark) { .hero__marca { opacity: .11; } }
  @media (max-width: 63.99em) { .hero__marca { display: none; } }
  .hero__grid { position: relative; display: grid; gap: var(--sp-7); align-items: center; }
  @media (min-width: 64em) {
    .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); }
  }
  .hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.025em; line-height: 1.07; margin-block: var(--sp-4); }
  .hero h1 em { font-style: normal; color: var(--naranja-tinta); }
  .hero__lead { font-size: var(--fs-lead); color: var(--texto-2); max-width: 56ch; }
  .hero .btn-grupo { margin-top: var(--sp-6); }
  .hero__datos {
    margin-top: var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* --- Portada: cifras --------------------------------------------------- */
  .cifras {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
    text-align: center;
  }
  .cifras dt { font-size: var(--fs-sm); color: var(--texto-3); order: 2; margin-top: var(--sp-1); }
  .cifras dd {
    order: 1;
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
  }
  .cifras > div { display: flex; flex-direction: column; }

  /* --- Ilustración de la aplicación -------------------------------------- */
  .marco-app {
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    overflow: hidden;
    box-shadow: var(--sombra-3);
    background: var(--superficie);
  }
  .marco-app__barra {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    background: var(--fondo-alt);
    border-bottom: 1px solid var(--borde);
  }
  .marco-app__punto { width: .65rem; height: .65rem; border-radius: 50%; background: var(--borde-fuerte); }
  .marco-app__titulo { margin-left: .5rem; font-size: var(--fs-xs); color: var(--texto-3); }
  .marco-app figcaption {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--texto-3);
    border-top: 1px solid var(--borde);
  }
  .marco-app svg { width: 100%; height: auto; display: block; }

  /* --- Descargas --------------------------------------------------------- */
  .descarga-card { display: flex; flex-direction: column; gap: var(--sp-3); }
  .descarga-card .btn { margin-top: auto; }
  .descarga-card__peso { font-size: var(--fs-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }

  /* Ficha de módulo: identificador real, versión y dependencias. */
  .modulo { display: flex; flex-direction: column; }
  .modulo h4 { margin-bottom: var(--sp-2); }
  .modulo p { color: var(--texto-2); font-size: var(--fs-sm); }
  .modulo__ref {
    margin-top: auto;
    padding-top: var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
  }
  .modulo__ref code {
    color: var(--naranja-tinta);
    background: var(--tinte-1);
    border-color: var(--tinte-2);
    font-size: var(--fs-xs);
  }
  .modulo__version {
    color: var(--texto-3);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .modulo__deps { color: var(--texto-3); }
  .area__cuenta {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--texto-3);
    letter-spacing: 0;
    margin-inline-start: var(--sp-3);
    white-space: nowrap;
  }

  /* --- Partners ---------------------------------------------------------- */
  .partner { display: flex; flex-direction: column; gap: var(--sp-3); }
  .partner__nota {
    font-size: var(--fs-sm);
    color: var(--naranja-tinta);
    font-weight: 550;
  }
  .etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin-top: auto;
  }
  .partner__contacto {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--borde);
  }
  .partner__contacto dt { color: var(--texto-3); }
  .partner__contacto dd { margin: 0; overflow-wrap: anywhere; }
  /* En la tabla de extensiones esta columna sí debe envolver el texto. */
  .celda-ancha { white-space: normal; min-width: 22ch; }

  /* --- FAQ --------------------------------------------------------------- */
  .faq-grupo + .faq-grupo { margin-top: var(--sp-7); }
  .faq-grupo > h2 { margin-bottom: var(--sp-4); }

  /* --- Separación entre bloques temáticos de una página interior --------- */
  /* --- Transparencia editorial al pie de los artículos ------------------- */
  .transparencia {
    margin-top: var(--sp-8);
    padding: var(--sp-5);
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    font-size: var(--fs-sm);
  }
  .transparencia > h2 {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-3);
    margin-bottom: var(--sp-4);
  }
  .transparencia__datos { display: grid; gap: var(--sp-4); }
  @media (min-width: 48em) {
    .transparencia__datos {
      grid-template-columns: 12rem 1fr;
      gap: var(--sp-3) var(--sp-5);
      align-items: baseline;
    }
  }
  .transparencia__datos dt {
    font-weight: 650;
    color: var(--texto);
  }
  .transparencia__datos dd { margin: 0; color: var(--texto-2); }
  .transparencia__aviso { display: block; margin-top: var(--sp-2); color: var(--texto-3); }
  .transparencia__fuentes {
    list-style: none;
    padding: 0;
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .transparencia__fuentes li { padding-inline-start: 1rem; position: relative; }
  .transparencia__fuentes li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .55em;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--naranja);
  }

  /* Respuesta destacada al principio de un artículo: es la que citan los
     buscadores y los asistentes, así que se distingue del resto del texto. */
  .respuesta-directa {
    font-size: var(--fs-lead);
    line-height: 1.65;
    padding: var(--sp-5);
    background: var(--tinte-1);
    border-inline-start: 4px solid var(--naranja);
    border-radius: var(--radio-m);
  }
  .respuesta-directa strong { color: var(--texto); }
  .respuesta-directa > * + * { margin-top: var(--sp-3); }

  .bloque-area { margin-top: var(--sp-8); }
  .bloque-area--primero { margin-top: 0; }

  /* --- Ajustes de móvil estrecho (hasta 480px) --------------------------- */
  @media (max-width: 30em) {
    /* El bloque de terminal deja 240px útiles y corta los comandos. */
    .terminal pre { padding: var(--sp-4); font-size: .8125rem; }
    .terminal__barra { padding: .5rem .7rem; }

    /* El aviso de cookies medía 166px de alto y tapaba el contenido. */
    .cookies {
      inset-inline: var(--sp-2);
      bottom: max(var(--sp-2), env(safe-area-inset-bottom));
      padding: var(--sp-3) var(--sp-4);
      font-size: var(--fs-xs);
    }

    .callout { padding-inline: var(--sp-4); }
    .acordeon > summary { padding-inline: var(--sp-4); }
    .acordeon__cuerpo { padding-inline: var(--sp-4); }
    .card { padding: var(--sp-4); }
  }
}

/* --------------------------------------------------------------------------
   8. UTILIDADES
   -------------------------------------------------------------------------- */
@layer utilidades {
  .oculto-visual {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .texto-2 { color: var(--texto-2); }
  .texto-3 { color: var(--texto-3); }
  .centrado { text-align: center; }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .sin-margen-sup { margin-top: 0; }
  .mt-5 { margin-top: var(--sp-5); }
  .mt-6 { margin-top: var(--sp-6); }
  .icono { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
  .lead { font-size: var(--fs-lead); color: var(--texto-2); }

  /* No usamos atributos style= en el HTML: la política de seguridad de
     contenido (CSP) los bloquea a propósito, así que todo va en clases. */
  .sprite { display: none !important; }
  .ancho-62 { max-width: 62ch; }
  .ancho-52-centrado { max-width: 52ch; margin-inline: auto; }
  .ancho-34 { max-width: 34ch; }
  .alinear-inicio { align-items: start; }
  .alinear-centro { align-items: center; }
  .justificar-centro { justify-content: center; }
  .compacta { padding-block: var(--sp-6); }
  .mt-3 { margin-top: var(--sp-3); }
  .texto-sm { font-size: var(--fs-sm); }
  .direccion { font-style: normal; }
  .pie__resumen { color: #a5adb8; max-width: 34ch; }
  .pie__resumen strong { color: #ff8a3d; }
  .pie__lugar { color: #8b939e; }
  .pie__marca { width: 1.25rem; height: .95rem; color: var(--naranja); }

  /* --- Cabecera en móvil estrecho ---------------------------------------- */
  /* La barra necesita ~380px para logo + versión + GitHub + botón de menú, así
     que por debajo de 480px se retira el botón de GitHub (queda en el panel
     del menú) y se aprieta el gap. Va en esta capa porque tiene que ganar a
     .btn { display: inline-flex } de la capa "componentes". */
  @media (max-width: 30em) {
    .cabecera__barra { gap: var(--sp-2); }
    .cabecera__acciones .btn--secundario { display: none; }
    .logo { min-width: 0; overflow: hidden; }
  }
}