/* ==========================================================================
   Mota · anamota.es
   Hoja de estilos principal

   Índice
   1. Fuentes
   2. Variables (colores, tipografía, espacios): EMPIEZA AQUÍ para cambiar el look
   3. Base y reset
   4. Utilidades (contenedor, accesibilidad)
   5. Fondo espacial (estrellas y anillos)
   6. Cabecera y navegación
   7. Botones y enlaces
   8. Secciones y tipografía de contenido
   9. Pie de página
   10. Animaciones al hacer scroll
   ========================================================================== */


/* 1. Fuentes
   Inter alojada en el propio servidor (no se carga desde Google, así no se
   envía la IP de cada visitante a terceros). Fuente variable: un solo archivo
   cubre todos los pesos, de 100 a 900.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Colores de la marca: base negra, grises neutros y un solo acento */
  --c-space: #000000;            /* fondo general (cielo negro) */
  --c-space-2: #121212;          /* superficies un poco más claras (tarjetas) */
  --c-accent: #3D7BFF;           /* azul eléctrico: el ÚNICO color de acento */
  --c-accent-ink: #000000;       /* texto sobre fondo de acento */

  /* Texto */
  --c-text: #FFFFFF;             /* títulos */
  --c-text-body: #E6E6E6;        /* párrafos (menos brillante, cansa menos) */
  --c-text-muted: #A6A6A6;       /* textos secundarios */
  --c-danger: #FF7B7B;           /* solo para avisos: "No cumple", código no válido */

  /* Líneas y cristal */
  --c-line: rgba(255, 255, 255, 0.10);
  --c-line-strong: rgba(255, 255, 255, 0.20);
  --c-glass: rgba(255, 255, 255, 0.04);
  --c-header: rgba(10, 10, 10, 0.72);

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

  --fs-xs: 0.75rem;                              /* 12px */
  --fs-sm: 0.875rem;                             /* 14px */
  --fs-base: 1rem;                               /* 16px */
  --fs-md: 1.125rem;                             /* 18px */
  --fs-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);   /* 20 → 24px */
  --fs-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);   /* 28 → 40px */
  --fs-hero: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);  /* 36 → 68px: título del hero */

  /* Espacios */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Forma */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-pill: 999px;

  /* Medidas */
  --container: 72rem;            /* ancho máximo del contenido (1152px) */
  --gutter: max(1rem, env(safe-area-inset-left, 0px));
  --header-h: 4.5rem;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 600ms;

  color-scheme: dark;
}


/* 3. Base y reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-space);
  color: var(--c-text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

ul[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* 4. Utilidades
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}

/* Oculto a la vista pero legible por lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace "Saltar al contenido": aparece solo al pulsar Tab */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Etiqueta pequeña en mayúsculas ("Diseño web", "Portfolio"…) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 10px var(--c-accent);
}

/* Número de sección en monoespaciada (01, 02…) como en la referencia */
.num {
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0;
  color: var(--c-text-muted);
  opacity: 0.7;
}


/* 5. Fondo espacial
   Cielo negro con estrellas y, al final de la página, el borde de un planeta
   con luz detrás. Todo es CSS (las estrellas son SVG muy ligeros): no hay
   fotos ni 3D, así la web carga rápido y se ve nítida en cualquier pantalla.
   -------------------------------------------------------------------------- */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--c-space);
}

/* Dos capas de estrellas (imágenes SVG muy ligeras que se repiten en mosaico).
   Tienen tamaños distintos para que no se note la repetición; la segunda
   parpadea muy suavemente. */
.space-bg::before,
.space-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.space-bg::before {
  background: url("../img/stars.svg") 0 0 / 1400px 1000px repeat;
}
.space-bg::after {
  background: url("../img/stars-bright.svg") 0 0 / 1700px 1300px repeat;
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* Planeta al final de la página, detrás de Contacto y del pie.
   Tres capas:
   - el propio div: el resplandor que sube desde detrás del planeta
   - ::before: el planeta, un círculo enorme del que solo asoma la parte de arriba
   - ::after: el borde iluminado, más brillante en el centro que en los lados
   Para subir o bajar el planeta, cambia --pe-arc (cuánto asoma). */
.planet-end {
  --pe-r: max(140vw, 600px);                    /* radio del planeta */
  --pe-arc: clamp(13rem, 21vw, 20rem);          /* alto visible del planeta */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(var(--pe-arc) + 40rem);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(clamp(280px, 42vw, 620px) min(52vh, 480px) at 50% calc(100% - var(--pe-arc)),
      rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(clamp(420px, 95vw, 1400px) min(75vh, 680px) at 50% calc(100% - var(--pe-arc)),
      rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
}
.planet-end::before,
.planet-end::after {
  content: "";
  position: absolute;
  left: 50%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}
.planet-end::before {
  top: calc(100% - var(--pe-arc));
  width: calc(var(--pe-r) * 2);
  border-radius: 50%;
  background:
    radial-gradient(18% 5% at 50% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle closest-side, #000000 calc(100% - 420px), #0C0C0C calc(100% - 150px), #242424 100%);
}
.planet-end::after {
  top: calc(100% - var(--pe-arc) - 100px);
  width: calc(var(--pe-r) * 2 + 200px);
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 0) calc(var(--pe-r) - 30px),
    rgba(255, 255, 255, 0.12) calc(var(--pe-r) - 4px),
    rgba(255, 255, 255, 0.95) var(--pe-r),
    rgba(255, 255, 255, 0.42) calc(var(--pe-r) + 4px),
    rgba(255, 255, 255, 0.12) calc(var(--pe-r) + 32px),
    rgba(255, 255, 255, 0) calc(var(--pe-r) + 100px));
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) calc(50% - 55vw), #000000 calc(50% - 12vw), #000000 calc(50% + 12vw), rgba(0, 0, 0, 0.2) calc(50% + 55vw));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) calc(50% - 55vw), #000000 calc(50% - 12vw), #000000 calc(50% + 12vw), rgba(0, 0, 0, 0.2) calc(50% + 55vw));
}

/* Anillos finos concéntricos (decoración del hero).
   El anillo mayor llega hasta los bordes de la pantalla (máximo 1400px) y
   los cinco están igual de separados. Pueden salir del hero por arriba y por
   abajo y pasar por detrás de la sección siguiente, como en la referencia. */
.rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100vw, 1400px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}
.rings span {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid var(--c-line);
  border-radius: 50%;
}
.rings span:nth-child(1) { width: 100%; height: 100%; opacity: 0.5; }
.rings span:nth-child(2) { width: 82%;  height: 82%;  opacity: 0.65; }
.rings span:nth-child(3) { width: 64%;  height: 64%;  opacity: 0.8; }
.rings span:nth-child(4) { width: 46%;  height: 46%; }
.rings span:nth-child(5) { width: 28%;  height: 28%; }


/* 6. Cabecera y navegación
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--c-header);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-text);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img {
  width: 28px;
  height: 28px;
}

/* Navegación principal */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding-block: var(--space-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
/* Línea bajo el enlace activo o al pasar el ratón */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Tableta y ventanas medianas: enlaces del menú un poco más juntos */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .nav__list {
    gap: var(--space-4);
  }
}

/* Selector de idioma ES / PT */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
}
.lang-switch a {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 200ms, background-color 200ms;
}
.lang-switch a:hover {
  color: var(--c-text);
}
.lang-switch a[aria-current="true"] {
  background: var(--c-text);
  color: var(--c-accent-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Botón del menú móvil (hamburguesa) */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 300ms var(--ease), opacity 200ms;
}
.menu-toggle__bars {
  position: relative;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after  { top: 6px; }
/* Se convierte en una X al abrir */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* El botón "Contacto" dentro del menú solo se ve en móvil */
.nav .btn--mobile {
  display: none;
}

/* Móvil: el menú se despliega bajo la cabecera
   (la fila completa necesita unos 730px; desde 768px ya cabe) */
@media (max-width: 47.99rem) {
  .menu-toggle {
    display: inline-flex;
  }
  .header-actions > .btn {
    display: none;   /* el botón "Contacto" va dentro del menú en móvil */
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-5) max(1.25rem, env(safe-area-inset-left, 0px)) var(--space-6);
    background: var(--c-space);
    border-bottom: 1px solid var(--c-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 0s 250ms;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    width: 100%;
    padding-block: var(--space-4);
    font-size: var(--fs-lg);
    border-bottom: 1px solid var(--c-line);
  }
  .nav__link::after {
    display: none;
  }
  .nav .btn--mobile {
    display: inline-flex;
    justify-content: center;
  }
}



/* 7. Botones y enlaces
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms;
}
.btn:hover {
  transform: translateY(-1px);
}

/* Botón principal cian, con un brillo suave como en la referencia */
.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.btn--primary:hover {
  box-shadow: 0 0 24px rgba(61, 123, 255, 0.45);
}

/* Botón blanco */
.btn--light {
  background: var(--c-text);
  color: var(--c-accent-ink);
}

/* Botón con borde */
.btn--ghost {
  border-color: var(--c-line-strong);
  background: transparent;
  color: var(--c-text);
}
.btn--ghost:hover {
  border-color: var(--c-text);
}

/* Enlace de texto con subrayado cian */
.link {
  color: var(--c-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 200ms;
}
.link:hover {
  color: var(--c-accent);
}


/* 8. Secciones
   -------------------------------------------------------------------------- */
main {
  display: block;
}

.section {
  position: relative;
  padding-block: var(--space-9);
}
.section + .section {
  border-top: 1px solid var(--c-line);
}

.section__head {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
  margin-bottom: var(--space-7);
}
.section__title {
  font-size: var(--fs-xl);
}
.section__lead {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-9);
}
.hero__inner {
  display: grid;
  gap: var(--space-5);
  max-width: 50rem;
}
.hero__title {
  max-width: 16ch;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__lead {
  max-width: 36rem;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Tarjeta de cristal (herramientas y avisos) */
.glass {
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

/* Aviso provisional mientras se construye cada fase */
.placeholder {
  padding: var(--space-6);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  border-style: dashed;
}

/* Páginas de texto (aviso legal y privacidad) */
.prose {
  max-width: 65ch;
  font-size: var(--fs-md);
  line-height: 1.75;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  font-size: var(--fs-lg);
}
.prose ul {
  padding-left: 1.25em;
}
.prose li + li {
  margin-top: 0.6em;
}
.prose strong {
  color: var(--c-text);
  font-weight: 600;
}


/* Etiqueta pequeña con el color de acento ("Restaurante", "App de masajes"…) */
.tag {
  justify-self: start;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(61, 123, 255, 0.14);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}


/* Trabajos
   Las tarjetas empiezan apiladas, como cartas, y se abren al hacer scroll:
   - Móvil: el montón va soltando las tarjetas hacia abajo, en columna.
   - Desde 47.5rem (760px: tableta, ordenador o una ventana estrecha): la
     sección se queda fija y las tarjetas se separan hasta quedar en fila.
   El movimiento lo calcula script.js (apartado 5). */
.works {
  padding-block: 0;
  overflow-x: clip;            /* las cartas giradas no crean scroll lateral */
}
.works__sticky {
  padding-block: var(--space-9);
}
.works__grid {
  display: grid;
  gap: 10rem;                  /* móvil: aire entre tarjetas para que cada una se vea entera al soltarse */
  max-width: 32rem;
}

.work-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-5);
  min-width: 0;
  background: var(--c-space-2);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.work-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.work-card__body {
  display: grid;
  gap: var(--space-2);
  padding-inline: var(--space-1);
}
.work-card__title {
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}
.work-card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.work-card .link {
  justify-self: start;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}

@media (min-width: 47.5rem) {
  .works__scene {
    position: relative;
    height: 240vh;               /* recorrido del scroll para la animación */
  }
  .works__sticky {
    position: sticky;
    top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
    display: grid;
    align-content: center;
    padding-block: var(--space-6);
    overflow: hidden;
  }
  .works__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);       /* igual que GAP en script.js */
    max-width: none;
  }
  .work-card {
    will-change: transform;
  }
}


/* Sobre mí: el texto y, al lado, la trayectoria (debajo en móvil) */
.about {
  display: grid;
  gap: var(--space-7) var(--space-8);
  align-items: start;
}
.about__body {
  display: grid;
  gap: var(--space-4);
  max-width: 36rem;
}
.about__text {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
}

/* Trayectoria: línea vertical con un punto por etapa; el último, encendido */
.about__timeline {
  display: grid;
  gap: var(--space-4);
}
.timeline__title {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding-left: 1.75rem;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 5px;
  width: 1px;
  background: var(--c-line-strong);
}
.timeline__item {
  position: relative;
  display: grid;
  gap: 0.1rem;
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: -1.75rem;
  width: 11px;
  height: 11px;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-space);
}
.timeline__item:last-child::before {
  background: var(--c-accent);
  box-shadow: 0 0 12px var(--c-accent);
}
.timeline__years {
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.timeline__role {
  color: var(--c-text);
  font-weight: 600;
}
.timeline__place {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
@media (min-width: 60rem) {
  .about {
    grid-template-columns: 1.1fr 1fr;
  }
  .timeline__title {
    margin-top: 0.4rem;            /* alineado con la primera línea del texto */
  }
}


/* Fuera de la pantalla: aficiones como fotos tipo polaroid, un poco giradas.
   De momento llevan un icono; cuando haya fotos, va una <img> en
   .hobby__picture. El giro usa la propiedad "rotate" para no chocar con la
   animación de aparición (que usa "transform"). */
.hobbies {
  display: grid;
  gap: var(--space-5) var(--space-4);
}
.hobby {
  padding: var(--space-2) var(--space-2) var(--space-4);
  background: var(--c-space-2);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  rotate: -2deg;
  transition: rotate 300ms var(--ease), border-color 200ms;
}
.hobby:nth-child(even) {
  rotate: 1.5deg;
}
.hobby:hover {
  rotate: 0deg;
  border-color: var(--c-line-strong);
}
.hobby__picture {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 25%, rgba(61, 123, 255, 0.22), transparent 60%),
    #0A0A0A;
  color: var(--c-accent);
}
.hobby__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hobby__title {
  margin-top: var(--space-3);
  padding-inline: var(--space-1);
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
}
.hobby__text {
  margin-top: var(--space-1);
  padding-inline: var(--space-1);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Llamada al blog, al final de la sección */
.blog-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text-body);
  font-size: var(--fs-md);
}
/* Botón sin enlace mientras el blog no existe */
.btn--soon {
  color: var(--c-text-muted);
  cursor: default;
}
.btn--soon:hover {
  transform: none;
  border-color: var(--c-line-strong);
}

/* Dos fotos por fila en el móvil, como un collage; cuatro desde tableta */
@media (min-width: 22rem) {
  .hobbies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 48rem) {
  .hobbies {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .hobbies {
    gap: var(--space-6) var(--space-5);
  }
  .hobby {
    padding: var(--space-3) var(--space-3) var(--space-5);
  }
  .hobby__title {
    margin-top: var(--space-4);
    font-size: var(--fs-md);
  }
}


/* Contacto: el email (al pasar el ratón, subrayado en azul), el botón de
   copiar y, más abajo, enlaces de texto como LinkedIn (si los hay). */
.contact {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  padding-bottom: var(--space-6);   /* aire entre los enlaces y el borde del planeta */
}
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  max-width: 100%;
}
.contact__email {
  min-width: 0;
  color: var(--c-text);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  user-select: all;
  transition: text-decoration-color 200ms;
}
.contact__email:hover,
.contact__email:focus-visible {
  text-decoration-color: var(--c-accent);
}
.contact__copy {
  min-height: 40px;
  padding: 0 var(--space-3);
}
.icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.contact .contact__links {      /* más específico que ul[role="list"] */
  margin-top: var(--space-6);   /* separados del email y de su botón */
}
.contact__status {
  margin-top: calc(var(--space-3) * -1);
  min-height: 1.5em;
  color: var(--c-accent);
  font-size: var(--fs-sm);
}


/* Herramientas (portada): una tarjeta por herramienta, toda ella clicable.
   Se mueven al hacer scroll (script.js, apartado 5b):
   - Móvil: como en Trabajos, empiezan apiladas y se van soltando hacia
     abajo, cada una en su sitio de la columna.
   - Desde 47.5rem (760px, como Trabajos): la sección se queda fija y las
     tarjetas entran desde la derecha hasta quedar en fila.
   Sin JavaScript, con menos movimiento o en ventanas anchas muy bajas, las
   tarjetas se quedan quietas en su cuadrícula. */
.tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
}
/* Móvil: una columna, con aire entre tarjetas para que cada una se vea
   entera al soltarse (como Trabajos). Fondo opaco para que, apiladas, no se
   transparenten unas sobre otras. Las mismas condiciones están en script.js. */
@media (prefers-reduced-motion: no-preference) and (max-width: 47.49rem) {
  .js .tools {
    overflow-x: clip;            /* las tarjetas giradas no crean scroll lateral */
  }
  .js .tools__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10rem;                  /* igual que Trabajos en el móvil */
    max-width: 32rem;
  }
  .js .tool-card {
    background-color: #0A0A0A;   /* el mismo tono que el cristal sobre negro */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    will-change: transform;
  }
  .js .tool-card:hover {
    background-color: #0F0F0F;
  }
}
/* Desde 47.5rem, si la ventana tiene altura suficiente: carrusel con la
   sección fija. Las mismas condiciones están en script.js (toolsCarousel). */
@media (prefers-reduced-motion: no-preference) and (min-width: 47.5rem) and (min-height: 30rem) {
  .js .tools {
    padding-block: 0;
    overflow-x: clip;
  }
  .js .tools__scene {
    position: relative;
    height: 240vh;               /* recorrido del scroll para el carrusel */
  }
  .js .tools__sticky {
    position: sticky;
    top: var(--header-h);
    min-height: calc(100vh - var(--header-h));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-block: var(--space-6);
    overflow: hidden;
    overflow: clip;              /* recorta sin dejar que el foco lo desplace */
  }
  .js .tools .section__head {
    margin-bottom: var(--space-6);
  }
  .js .tools__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .js .tool-card {
    will-change: transform;
  }
}
/* Ventanas bajas: menos aire para que quepan las tarjetas */
@media (prefers-reduced-motion: no-preference) and (min-width: 47.5rem) and (min-height: 30rem) and (max-height: 44rem) {
  .js .tools__sticky {
    padding-block: var(--space-3);
  }
  .js .tools .section__head {
    margin-bottom: var(--space-4);
  }
}
/* Tres tarjetas en fila en una ventana mediana: dibujos más pequeños */
@media (prefers-reduced-motion: no-preference) and (min-width: 47.5rem) and (max-width: 59.99rem) and (min-height: 30rem) {
  .js .tool-card__demo {
    gap: var(--space-2);
  }
  .js .tool-card__swatch {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.25rem;
  }
  .js .tool-card__figure {
    font-size: var(--fs-md);
  }
  .js .tool-card__times {
    padding-right: var(--space-3);
    font-size: var(--fs-xs);
  }
  .js .tool-card__device {
    width: 2rem;
    height: 3.7rem;
  }
  .js .tool-card__device--small {
    width: 1.7rem;
    height: 3.1rem;
  }
  .js .tool-card__device--tablet {
    width: 3.8rem;
    height: 4.8rem;
  }
}
.tool-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-5);
  border-radius: 16px;
  transition: border-color 200ms, background-color 200ms;
}
.tool-card:hover {
  border-color: var(--c-line-strong);
  background: rgba(255, 255, 255, 0.06);
}
.tool-card:has(.tool-card__link:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.tool-card__demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--c-space-2);
}
.tool-card__swatch {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tool-card__figure {
  margin-left: var(--space-2);
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tool-card__times {
  display: grid;
  gap: 2px;
  padding-right: var(--space-4);
  border-right: 1px solid var(--c-line-strong);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: right;
}
.tool-card__demo:has(.tool-card__device) {
  align-items: flex-end;
  padding-bottom: 12%;
}
.tool-card__device {             /* siluetas de móviles y tableta */
  width: 2.6rem;
  height: 4.8rem;
  border: 2px solid var(--c-accent);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(61, 123, 255, 0.28), rgba(61, 123, 255, 0.04));
}
.tool-card__device--small {
  width: 2.2rem;
  height: 4rem;
  border-radius: 9px;
}
.tool-card__device--tablet {
  width: 5.6rem;
  height: 7.2rem;
  border-radius: 12px;
}
.tool-card__body {
  display: grid;
  gap: var(--space-2);
  padding-inline: var(--space-1);
}
.tool-card__title {
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}
.tool-card__link {
  text-decoration: none;
}
.tool-card__link:focus-visible {
  outline: none;               /* el foco se marca en toda la tarjeta */
}
.tool-card__link::after {      /* agranda el enlace a toda la tarjeta */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tool-card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.tool-card .link {
  justify-self: start;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}


/* Página de una herramienta: cabecera más corta que la de la portada */
.hero--tool {
  padding-block: var(--space-8) var(--space-6);
}
.back-link {
  justify-self: start;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color 200ms;
}
.back-link:hover {
  color: var(--c-text);
}
.tool-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  letter-spacing: -0.03em;
}
.section--tool {
  padding-top: 0;
  padding-bottom: calc(var(--space-9) + 8rem);   /* deja el borde del planeta por debajo del texto */
}


/* Comprobador de contraste (assets/js/contraste.js)
   Móvil: colores, vista previa y resultado, uno debajo de otro.
   Desde 60rem: colores y vista previa en fila, resultado debajo. */
.checker {
  display: grid;
  gap: var(--space-5);
  grid-template-areas: "controls" "preview" "result";
}
.tool-noscript {
  margin-bottom: var(--space-5);
}

/* Campos de color: selector + código hexadecimal */
.checker__controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5);
}
.color-field {
  display: grid;
  gap: var(--space-2);
}
.color-field__label {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.color-field__row {
  display: flex;
  gap: var(--space-3);
}
.color-field__picker {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: none;
  cursor: pointer;
}
.color-field__picker::-webkit-color-swatch-wrapper {
  padding: 5px;
}
.color-field__picker::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}
.color-field__picker::-moz-color-swatch {
  border: 0;
  border-radius: 7px;
}
.color-field__hex,
.field-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-space-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.color-field__hex:focus-visible,
.field-input:focus-visible {
  border-color: var(--c-accent);
  outline-offset: 2px;
}
.color-field__hex[aria-invalid="true"],
.field-input[aria-invalid="true"] {
  border-color: var(--c-danger);
}
.color-field__error {
  color: var(--c-danger);
  font-size: var(--fs-sm);
}
.color-field__error:empty {
  display: none;
}
.checker__swap {
  justify-self: start;
}

/* Vista previa con los colores elegidos */
.checker__preview {
  grid-area: preview;
  display: grid;
  align-content: center;
  gap: var(--space-4);
  min-height: 16rem;
  padding: var(--space-6);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--fg);
  transition: background-color 150ms, color 150ms;
}
.checker__preview-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.checker__preview-large {
  font-size: 1.5rem;            /* 24px: el mínimo de "texto grande" */
  line-height: 1.3;
}
.checker__preview-text {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
}
.checker__preview-ui {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.checker__preview-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 2px solid currentColor;
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Resultado: número grande, veredicto y lista de niveles */
.checker__result {
  grid-area: result;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}
.checker__score {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}
.checker__label,
.tool-label {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.checker__ratio,
.tool-figure {
  color: var(--c-text);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.checker__ratio-unit {
  margin-left: 0.08em;
  color: var(--c-text-muted);
  font-size: 0.5em;
  letter-spacing: 0;
}
.checker__verdict {
  max-width: 28ch;
  font-size: var(--fs-md);
  line-height: 1.5;
}

.check {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}
.check:first-child {
  padding-top: 0;
}
.check:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.check__name {
  color: var(--c-text);
  font-weight: 500;
}
.check__level {
  margin-left: 0.3em;
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.check__min {
  grid-row: 2;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.check__badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.check__badge[data-pass="true"] {
  background: rgba(61, 123, 255, 0.14);
  color: var(--c-accent);
}
.check__badge[data-pass="false"] {
  background: rgba(255, 123, 123, 0.12);
  color: var(--c-danger);
}
.check__badge[data-pass="true"] .check__icon--fail,
.check__badge[data-pass="false"] .check__icon--pass {
  display: none;
}

/* Sugerencia de color y botón para compartir */
.checker__extra {
  display: grid;
  gap: var(--space-5);
}
.checker__suggest {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: 12px;
  font-size: var(--fs-sm);
}
.checker__suggest[hidden] {
  display: none;
}
.checker__suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.checker__suggest-swatch {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-strong);
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
}
.checker__suggest-hex {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}
.checker__suggest-ratio {
  color: var(--c-text-muted);
}
.checker__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.checker__status {
  color: var(--c-accent);
  font-size: var(--fs-sm);
}

/* Calculadora de horas (assets/js/horas.js)
   Móvil: el total arriba, fijo al hacer scroll, y la lista debajo.
   Desde 48rem: la lista a la izquierda y el total a su lado. */
.hours {
  display: grid;
  gap: var(--space-5);
  grid-template-areas: "total" "list";
  align-items: start;
}
.hours__list {
  grid-area: list;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}
.hours__head {
  padding-left: calc(1.5rem + var(--space-2));   /* alineado con los campos */
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hours__rows {
  display: grid;
  gap: var(--space-2);
}
.hours-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 8.5rem) 1fr 44px;
  align-items: center;
  gap: 0 var(--space-2);
}
.hours-row__num {
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: right;
  opacity: 0.7;
}
.hours-row__input {
  min-height: 48px;
}
.hours-row__running {             /* total acumulado hasta esta fila */
  padding-left: var(--space-2);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.hours-row__remove {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color 200ms, background-color 200ms;
}
.hours-row__remove:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text);
}
.hours-row__error {
  grid-column: 2 / -1;
  margin-top: var(--space-1);
  color: var(--c-danger);
  font-size: var(--fs-sm);
}
.hours-row__error:empty {
  display: none;
}
.hours__add {
  justify-self: start;
}

.hours__total {
  grid-area: total;
  position: sticky;
  top: calc(var(--header-h) + var(--space-3));
  z-index: 5;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: rgba(18, 18, 18, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hours__detail {
  color: var(--c-text-body);
  font-size: var(--fs-md);
}
.hours__count {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.hours__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.hours__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 1.5em;
  color: var(--c-accent);
  font-size: var(--fs-sm);
}
.hours__undo {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.hours__undo[hidden] {
  display: none;
}

/* Móvil: el total fijo arriba ocupa menos */
@media (max-width: 47.99rem) {
  .hours__total {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-4) var(--space-5);
  }
  .hours__total .tool-figure {
    font-size: 2.75rem;
  }
  .hours__total > * {
    grid-column: 1;
  }
  .hours__actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    margin-top: 0;
  }
  .hours__actions .btn {
    justify-content: center;
  }
  .hours__count {
    display: none;
  }
}

@media (min-width: 48rem) {
  .hours {
    grid-template-columns: minmax(0, 30rem) minmax(0, 21rem);
    grid-template-areas: "list total";
  }
}

/* Simulador de móvil (assets/js/simulador.js)
   Móvil: opciones arriba y la vista debajo.
   Desde 48rem: opciones a la izquierda (fijas al bajar) y la vista a la derecha.
   La web se carga con el tamaño real del dispositivo; si no cabe, el marco
   entero se reduce con transform: scale() desde la esquina de arriba. */
.simulator {
  display: grid;
  gap: var(--space-5);
}
.simulator__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-5);
}
.url-form {
  display: grid;
  gap: var(--space-2);
}
.url-form__row {
  display: flex;
  gap: var(--space-2);
}
.url-form__input {               /* una dirección no va en mayúsculas */
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
}
.url-form__row .btn {
  flex: none;
  min-height: 52px;
}
.device-picker {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.device-picker legend {
  margin-bottom: var(--space-2);
  padding: 0;
}
.device-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms;
}
.device-option:hover {
  border-color: var(--c-text-muted);
}
.device-option input {           /* el círculo no se ve: se marca la opción entera */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.device-option:has(input:checked) {
  border-color: var(--c-accent);
  background: rgba(61, 123, 255, 0.1);
}
.device-option:has(input:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.device-option__name {
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.device-option__size {
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.device-option:has(input:checked) .device-option__size {
  color: var(--c-text);
}
.simulator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.simulator__actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}
.simulator__actions .btn[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: rgba(61, 123, 255, 0.1);
}
.simulator__note {
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.simulator__stage {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}
.device-box {                    /* ocupa lo que mide el marco ya reducido */
  position: relative;
  max-width: 100%;
}
.device {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px;                 /* igual que SHELL en simulador.js */
  border-radius: 44px;
  background: #1A1A1A;
  box-shadow: 0 0 0 1px var(--c-line-strong), 0 30px 80px rgba(0, 0, 0, 0.6);
  transform-origin: top left;
}
.device--tablet {
  border-radius: 28px;
}
.device__screen {
  display: block;
  border: 0;
  border-radius: 32px;
  background: #FFFFFF;
}
.device--tablet .device__screen {
  border-radius: 16px;
}
.simulator__caption {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.simulator__caption [data-caption-size] {
  color: var(--c-text);
  font-family: var(--font-mono);
}

@media (min-width: 48rem) {
  .simulator {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
  }
  .simulator__controls {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

/* Explicación debajo de cada herramienta */
.tool-help {
  margin-top: var(--space-8);
}
.tool-note {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 30rem) {
  .check {
    grid-template-columns: 1fr auto auto;
  }
  .check__min {
    grid-row: auto;
  }
  .check__badge {
    grid-column: auto;
    grid-row: auto;
    min-width: 7.5rem;
    justify-content: center;
  }
}

@media (min-width: 60rem) {
  .checker {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    grid-template-areas:
      "controls preview"
      "result result";
  }
  .checker__result {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: var(--space-8);
  }
  .checker__extra {
    grid-column: 1 / -1;
  }
}


/* 9. Pie de página
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-7) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.site-footer a {
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color 200ms;
}
.site-footer a:hover {
  color: var(--c-text);
}


/* 10. Animaciones al hacer scroll
   Los elementos con data-reveal suben y aparecen al entrar en pantalla.
   Solo se activan si JavaScript funciona (clase .js en <html>), así sin JS
   todo se ve igualmente.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Respeta a quien pide menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .works__scene {
    height: auto;
  }
  .works__sticky {
    position: static;
  }
}