/* ============================================================
   RITMO — mucho aire. El espacio es el único adorno que hay.
   ============================================================ */
:root {
  /* Separación vertical entre secciones */
  --bloque: clamp(4rem, 9vw, 8rem); /* @kind spacing */

  /* Anchos de contenedor */
  --ancho: 1240px; /* @kind spacing */
  /* Para páginas que son de mirar y no de leer (proyectos). El texto
     seguido nunca se pone a este ancho: a 1.600 px la línea se hace
     larguísima de seguir. */
  --ancho-amplio: 1600px; /* @kind spacing */
  --margen: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */

  /* Escala de huecos, tal y como aparece en el CSS original */
  --hueco-xs: 0.4rem;
  --hueco-s: 0.85rem;
  --hueco-m: 1.25rem;
  --hueco-l: 1.75rem;
  --hueco-xl: 2.5rem;
  --hueco-xxl: 3.5rem;

  /* Accesibilidad táctil: nada pulsable mide menos de esto */
  --tap: 48px; /* @kind spacing */
  --tap-corto: 42px; /* @kind spacing */ /* fichas de filtro */
}

/* ------------------------------------------------------------
   FORMAS — líneas de 1 píxel, esquinas casi siempre rectas,
   sombras solo cuando algo se levanta del papel.
   ------------------------------------------------------------ */
:root {
  /* Bordes: siempre 1px. El grosor solo cambia en el subrayado de un
     campo con foco (2px) y en la flecha del desplegable (1.5px). */
  --raya: 1px; /* @kind spacing */
  --raya-foco: 2px; /* @kind spacing */

  /* Radios. La regla: los pilares son redondos del todo, las cajas
     son rectas, y solo las tarjetas y las fotos se ablandan. */
  --radio-0: 0; /* @kind radius */
  --radio-s: 6px; /* tarjeta de oferta de empleo, marco de obra */
  --radio-m: 14px; /* foto dentro de una tarjeta */
  --radio-l: 26px; /* tarjeta de centro y de noticia */
  --radio-pastilla: 100px; /* botones, fichas, flechas del carrusel */
  --radio-circulo: 50%; /* icono en círculo */

  /* Sombras. Nunca en reposo: solo al pasar por encima. */
  --sombra-tarjeta: 0 10px 26px rgba(28, 28, 28, 0.07);
  --sombra-tarjeta-oscura: 0 12px 30px rgba(28, 28, 28, 0.18);
  --sombra-mega: 0 18px 34px rgba(28, 28, 28, 0.07);

  /* Velos sobre fotografía. Tres densidades según lo que va encima. */
  --velo-heroe: linear-gradient(rgba(20, 18, 16, 0.55) 0%, rgba(20, 18, 16, 0.3) 45%, rgba(20, 18, 16, 0.5) 100%); /* @kind other */
  --velo-portada: linear-gradient(rgba(18, 16, 15, 0.72) 0%, rgba(18, 16, 15, 0.58) 45%, rgba(18, 16, 15, 0.74) 100%); /* @kind other */
  --velo-cabecera: linear-gradient(rgba(18, 16, 15, 0.88) 0%, rgba(18, 16, 15, 0.8) 45%, rgba(18, 16, 15, 0.9) 100%); /* @kind other */

  /* Trama para el hueco de una foto que aún no existe */
  --trama-pendiente: repeating-linear-gradient(45deg, #e6e2de 0 12px, #ded9d4 12px 24px); /* @kind other */

  /* Tiempos. Cortos, lineales de sensación, sin rebotes. */
  --paso-rapido: 0.2s; /* @kind other */
  --paso: 0.25s; /* @kind other */
  --paso-foto: 0.6s; /* @kind other */
  --curva-foto: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
}