/*
  base.css
  Reinicio ligero, elementos base y componentes compartidos (encabezado, menú desplegable,
  pie, botones, tarjetas, píldoras, aviso de borrador). Prioriza contenido legible sin
  depender de JavaScript ni animación (constitución, FR-013): el menú usa <details>/<summary>
  nativo, que se abre y cierra sin ejecutar ningún script.
*/

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Enlace de salto para navegación por teclado */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -3rem;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  z-index: 100;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-s);
}

/* Aviso de versión de revisión interna (solo en builds locales) */
.draft-banner {
  background: var(--color-draft-bg);
  color: var(--color-draft-text);
  text-align: center;
  font-size: var(--font-size-small);
  padding: var(--space-2xs) var(--space-s);
}

.draft-note {
  font-size: var(--font-size-small);
  color: var(--color-draft-text);
  background: var(--color-draft-bg);
  display: inline-block;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-s);
}

/* Encabezado: nombre a la izquierda, botón de menú circular a la derecha */
.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-m) var(--space-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  position: relative;
}

.site-header__brand {
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--color-text);
}

/* Menú desplegable nativo (details/summary): funciona sin JavaScript */
.nav-disclosure {
  position: relative;
}

.nav-disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  cursor: pointer;
  list-style: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.nav-disclosure__toggle::-webkit-details-marker {
  display: none;
}

.nav-disclosure__toggle:hover {
  border-color: var(--color-border-strong);
}

.nav-disclosure__icon,
.nav-disclosure__icon::before,
.nav-disclosure__icon::after {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-disclosure__icon {
  position: relative;
  display: block;
}

.nav-disclosure__icon::before,
.nav-disclosure__icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-disclosure__icon::before {
  top: -6px;
}

.nav-disclosure__icon::after {
  top: 6px;
}

/* Estado abierto: botón se vuelve un círculo sólido y el ícono forma una "×" */
.nav-disclosure[open] > .nav-disclosure__toggle {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.nav-disclosure[open] .nav-disclosure__icon {
  background: transparent;
}

.nav-disclosure[open] .nav-disclosure__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-disclosure[open] .nav-disclosure__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  right: 0;
  min-width: 12rem;
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: var(--space-xs);
  box-shadow: 0 1.5rem 3rem rgba(17, 17, 17, 0.12);
  z-index: 50;
}

.site-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: block;
  text-align: right;
  text-decoration: none;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.site-nav__link:hover {
  background: var(--color-surface-strong);
  color: var(--color-text);
}

.site-nav__link {
  position: relative;
}

.site-nav__link[aria-current='page'] {
  color: var(--color-text);
  font-weight: 600;
}

/* Punto indicador junto al ítem activo del menú (00-menu.png). El desplazamiento negativo
   tiene que quedarse dentro del padding de .site-nav (var(--space-xs) = 12px): con un
   desplazamiento mayor a eso, el punto queda fuera de la caja del menú. */
.site-nav__link[aria-current='page']::before {
  content: '';
  position: absolute;
  left: var(--space-3xs);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 46rem) {
  .site-nav__link[aria-current='page']::before {
    left: 0;
  }

  .site-nav__link[aria-current='page'] {
    padding-left: var(--space-m);
  }
}

/* Pie de página. La barra de 60px (.site-footer__inner) no lleva relleno inferior propio;
   este padding-bottom es aire después de la barra para que no quede pegada al borde
   inferior real de la página. */
.site-footer {
  margin-top: var(--space-xl);
  padding-bottom: var(--space-l);
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  height: 60px;
  padding: 0 var(--space-s);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.site-footer a {
  color: var(--color-text);
}

/* El <p> global (typography.css) trae margin-bottom: es el texto de cuerpo normal. Sin
   quitarlo aquí, ese margen invisible se suma a la caja del texto y rompe el centrado
   vertical con align-items:center (el texto queda más pegado arriba que abajo). */
.site-footer__meta {
  margin: 0;
}

/* Contenedor principal */
main {
  display: block;
}

/* Botones en forma de píldora, como los controles de la referencia visual */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.button--primary {
  background: var(--color-text);
  color: var(--color-bg);
}

.button--primary:hover {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}

.button--secondary {
  background: transparent;
  color: var(--color-text);
}

.button--secondary:hover {
  background: var(--color-surface);
}

.link-arrow {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--color-text-muted);
}

.link-arrow:hover {
  color: var(--color-text);
}

/* Tarjeta de superficie gris clara con esquinas amplias */
.surface-card {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  padding: var(--space-l);
}

/* Etiqueta pequeña en mayúsculas ("CONTEXTO", "PROYECTOS"...), como en los wireframes. */
.eyebrow {
  display: block;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-s);
}

/* Contenedor central estándar, reutilizado por todas las secciones de página. */
.section-block {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-s);
}

.section-block--tight {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}

/* Grilla masonry: número de columnas fijo por punto de quiebre (nunca "auto-fill"), para que
   una pieza --wide/--big que pide 2 columnas jamás pida más columnas de las que existen —
   esa combinación es la causa típica de desbordamiento horizontal en CSS Grid. Cada pieza
   declara cuántas filas ocupa según su forma (cuadrada, ancha, alta) para lograr variedad
   sin depender de dimensiones reales de imagen (activos todavía pendientes). */
.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 12px;
  /* "dense": cuando una pieza alta dentro de una columna deja un hueco junto a piezas más
     bajas, permite que una pieza posterior suba a llenar ese hueco en vez de dejarlo vacío. */
  grid-auto-flow: row dense;
  gap: var(--space-m);
  margin-top: var(--space-m);
  /* Separación con lo que venga después (botón, enlace "Siguiente caso"...): sin esto, una
     columna alta puede terminar tocando ese elemento sin ningún aire entre ambos. */
  margin-bottom: var(--space-l);
}

.masonry__item {
  /* 8 filas ≈ proporción cuadrada en una columna de 1fr (ni "cuadrado" alargado hacia
     arriba como antes con span 20, que se veía como un rectángulo vertical muy angosto). */
  grid-row-end: span 8;
  border-radius: var(--radius-l);
  position: relative;
  /* Anula el min-width:auto por defecto de los ítems de grid: sin esto, contenido interno
     (texto largo, imágenes) puede forzar que la columna crezca más que su 1fr y desborde
     la página. */
  min-width: 0;
  /* Ojo: a propósito NO lleva overflow:hidden aquí. Las piezas que combinan imagen + texto
     (.project-card-masonry, .archive-card) usan este mismo elemento como contenedor de
     ambos; si el recorte se aplicara a todo el ítem, la última línea de la descripción podía
     cortarse a la mitad cuando el texto real (más largo que el de prueba) no cabía en el
     alto fijo de la fila. El recorte de esquinas redondeadas ahora vive en .media-placeholder
     (ver abajo), que sí puede recortarse con seguridad porque nunca lleva texto dentro. */
}

.masonry__item--wide {
  grid-column: span 2;
  grid-row-end: span 14;
}

.masonry__item--tall {
  grid-row-end: span 28;
}

.masonry__item--big {
  grid-column: span 2;
  /* Formato horizontal (paisaje), no vertical: con 2 columnas de ancho, este alto deja la
     imagen claramente más ancha que alta (la descripción real, cuando existe, se resta de
     este alto total y "roba" la franja inferior, dejando la imagen en una proporción todavía
     más panorámica) — y en el panel de CTA (sin ese texto aparte) queda entre horizontal y
     cuadrado, sin verse alargado. */
  grid-row-end: span 14;
}

@media (max-width: 60rem) {
  .masonry {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .masonry {
    grid-template-columns: 1fr;
  }

  .masonry__item--wide,
  .masonry__item--big {
    grid-column: span 1;
  }
}

/* Variante para galerías chicas dentro de una sección (2 a 5 piezas: Sistema/Aplicaciones de
   un caso, marcas de MEG, detalle de serie) — no la grilla principal de 4 columnas. Con tan
   pocas piezas y formas mezcladas (wide=2 columnas, tall/sq=1), la de 4 columnas dejaba
   columnas completas vacías y una altura "tall" (28 filas) muchísimo más alta que una "wide"
   (14 filas), y el conjunto se veía desordenado en vez de una grilla intencional. En 3
   columnas, angosta(1) + ancha(2) = 3 exactas (sin huecos) tanto para pares wide+tall/sq
   como para el patrón de 4 piezas sq,wide,sq,wide — y las piezas comparten un único alto. */
.masonry.masonry--gallery {
  grid-template-columns: repeat(3, 1fr);
}

.masonry.masonry--gallery .masonry__item,
.masonry.masonry--gallery .masonry__item--wide,
.masonry.masonry--gallery .masonry__item--tall {
  grid-row-end: span 12;
}

@media (max-width: 60rem) {
  .masonry.masonry--gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  /* La regla general de .masonry ya baja a 1 columna acá, pero .masonry--gallery pesa más
     (2 clases) por su regla de 60rem de arriba, así que sin este bloque se quedaba trabada
     en 2 columnas en celular en vez de bajar a 1 como el resto del sitio. */
  .masonry.masonry--gallery {
    grid-template-columns: 1fr;
  }

  .masonry.masonry--gallery .masonry__item--wide {
    grid-column: span 1;
  }
}

/* Marcador visual de imagen/video pendiente (no se inventa contenido: se declara qué falta).
   El recorte de esquinas redondeadas vive aquí (no en el contenedor .masonry__item): así,
   en piezas que combinan imagen + texto, solo la imagen se recorta y el texto siempre puede
   mostrarse completo aunque su alto real exceda el alto fijo calculado de la fila. */
.media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  display: flex;
  align-items: flex-end;
  padding: var(--space-m);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-l);
  overflow: hidden;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--color-border), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), var(--color-border), transparent calc(50% + 1px));
}

.media-placeholder--dark {
  background: #1c1c1a;
  color: rgba(255, 255, 255, 0.72);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(255, 255, 255, 0.16), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(255, 255, 255, 0.16), transparent calc(50% + 1px));
}

.media-placeholder__label {
  font-size: var(--font-size-small);
  font-weight: 600;
}

/* Portada grande de caso, formato panorámico, con etiqueta del activo pendiente. */
.case-cover {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 16 / 8;
}

.case-cover .media-placeholder {
  min-height: 100%;
}

/* Tarjeta de proyecto (Inicio y Trabajo): imagen + etiqueta + título + flecha + descripción. */
.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-card__media {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-s);
}

.project-card__media .media-placeholder {
  min-height: 100%;
}

/* Portada real (MEG, Turbo Llantas, Mareazul, Cavanevla): mismo recorte 4:3 centrado en
   Inicio y en Trabajo (ver .project-card-masonry__media más abajo) para que la portada se
   vea consistente entre ambos listados, tal como pidió Santiago. */
.project-card__media .media-real {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-card__eyebrow {
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3xs);
}

.project-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
}

.project-card__title-row h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: 600;
}

.project-card__arrow {
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.project-card:hover .project-card__arrow {
  transform: translateX(0.25rem);
  color: var(--color-text);
}

.project-card__description {
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
  max-width: var(--measure-max-width);
}

/* Bloque negro de llamada a la acción: dos variantes — franja delgada (Inicio) y bloque
   grande dentro de la composición masonry (Trabajo). */
.cta-block {
  display: block;
  text-decoration: none;
  background: #111111;
  color: #ffffff;
  border-radius: var(--radius-l);
  transition: background-color var(--transition-fast);
}

.cta-block:hover {
  background: #2a2a2a;
}

.cta-block--bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
}

.cta-block--panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-l);
  min-height: 16rem;
  height: 100%;
}

.masonry__item .cta-block {
  height: 100%;
}

/* Panel de "Otros proyectos" con portada (Trabajo): la imagen queda de fondo, detrás del
   texto, con un degradado oscuro que conserva el mismo contraste blanco-sobre-negro que el
   panel ya tenía sin imagen (ver renderCtaBlock en build.mjs). */
.cta-block--panel-media {
  position: relative;
  overflow: hidden;
}

.cta-block__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-block__media .media-real {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cta-block__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.cta-block--panel-media .cta-block__eyebrow,
.cta-block--panel-media .cta-block__title,
.cta-block--panel-media .cta-block__description,
.cta-block--panel-media .cta-block__arrow {
  position: relative;
  z-index: 1;
}

.cta-block__eyebrow {
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--space-s);
}

.cta-block__title {
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: var(--line-height-tight);
  /* Sin esto el título (mismo tamaño que un h2, pero va en un <span>, no hereda el ajuste
     de tracking de la etiqueta h2) se ve con las letras más separadas de lo normal, y esa
     separación se nota todavía más cuando el texto se parte en varias líneas cortas dentro
     de una columna angosta. */
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-s);
}

.cta-block__description {
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 26rem;
}

.cta-block__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: #ffffff;
  color: #111111;
  flex-shrink: 0;
  margin-top: var(--space-m);
}

/* Botones circulares de redes sociales, con etiqueta accesible; el icono es SVG inline. */
.social-icons {
  display: flex;
  gap: var(--space-xs);
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
}

.social-icons--footer {
  margin: 0;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.social-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.social-icon:hover {
  border-color: var(--color-border-strong);
}

.social-icons--footer .social-icon {
  border: none;
  background: var(--color-text);
  color: var(--color-bg);
}

.social-icons--footer .social-icon:hover {
  background: var(--color-text-muted);
}

.social-icon[aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 46rem) {
  .site-header__inner {
    flex-wrap: wrap;
  }

  /* .nav-disclosure (el contenedor de posicionamiento de .site-nav) mide solo lo que mide el
     botón circular (3rem): es un ítem flex dentro de .site-header__inner, así que se achica a
     su contenido y .site-nav (position:absolute) no aporta ancho propio al no participar del
     flujo. "left:0; right:0" (regla anterior) posicionaba el panel relativo a ESE ancho de
     3rem, no al de la pantalla, y lo dejaba comprimido al tamaño del botón con el texto
     cortado. Se ancla solo por la derecha (right:0, como en escritorio) y se le da un ancho
     explícito, con un tope ligado al viewport para no desbordar en pantallas muy angostas. */
  .site-nav {
    left: auto;
    right: 0;
    width: 14rem;
    min-width: 0;
    max-width: calc(100vw - 2 * var(--space-m));
  }

  .site-nav__link {
    text-align: left;
  }

  .cta-block--bar {
    flex-direction: column;
    align-items: flex-start;
  }
}