/* ==========================================================================
   BASE — lo que comparten la portada y las páginas de caso.

   Tokens de color, tipografía base, header con barra de progreso, botones,
   footer, la animación de aparición al hacer scroll y el responsive de todo
   eso, y la tarjeta de caso (grilla de la portada y «Siguiente caso» al pie
   de cada caso). Lo que es propio de cada página (hero, columna de lectura,
   cierre) vive en el <style> de esa página.

   Si un valor de acá no le sirve a una página, esa página lo sobrescribe en
   su propio <style> (por ejemplo, el caso usa --max-content: 980px y un
   padding de sección más corto). No se toca acá para un solo lugar.
   ========================================================================== */

:root {
  /* Paleta — arcilla cálida.
     Un solo acento (terracota) y neutros de la misma familia.
     El fondo no es blanco: es un tono medio, que es lo que saca
     la sensación de documento corporativo. */
  --base:    #EDE6DC;  /* fondo de página */
  --surface: #F8F4EE;  /* superficies elevadas: tarjetas */
  --ink:     #201B16;  /* texto principal */
  --muted:   #5F5648;  /* texto secundario */
  --accent:  #A2402A;  /* único acento */
  --tint:    #E0D4C2;  /* bloques y sombras de apoyo */
  --line:    #DCD1C2;  /* filetes y bordes */
  --deep:    #241C17;  /* bloque de cierre */
  --on-deep: #F3EBE1;

  /* Rol: color principal. Cambiar acá lo cambia en todo. */
  --primary: var(--accent);
  --card: var(--surface);

  --header-h: 68px;
  --max-content: 1120px;
  --max-reading: 65ch;
}

* { box-sizing: border-box; }

/* scroll-behavior se activa sólo si el usuario no pidió reducir movimiento
   (ver el bloque prefers-reduced-motion más abajo). */

body {
  margin: 0;
  font-family: "Satoshi", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--on-deep);
}
/* Secciones que reciben el foco al navegar desde el menú (assets/base.js):
   no son controles, no llevan contorno. */
[tabindex="-1"]:focus { outline: none; }

/* Skip link: invisible hasta que se navega con teclado (accesibilidad). */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 500;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* --- Énfasis editorial --- */
.editorial {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}


/* --- Header fijo con nav --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: rgba(36, 28, 23, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #3B2F26;
  z-index: 100;
}

/* Barra de progreso de lectura, apoyada sobre el borde inferior del
   header. Se escala en X desde la izquierda en vez de animar el ancho:
   el navegador lo resuelve sin recalcular layout en cada scroll. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-header .brand {
  font-weight: 500;
  font-size: 1rem;
  color: var(--on-deep);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: #B3A496;
  padding: 4px 2px;
  font-size: 0.94rem;
  transition: color 0.2s ease;
}
.site-nav a:hover {
  color: var(--on-deep);
}
.site-nav a[aria-current="true"] {
  color: var(--on-deep);
  font-weight: 500;
}

/* --- Layout general --- */
main { padding-top: var(--header-h); }

section {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 72px 24px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}


/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--surface);
}
.btn-secondary {
  background: var(--surface);
  border-color: var(--line);
}
.btn:hover {
  transform: translateY(-1px);
}

/* Flecha de los CTAs: se desliza un poco al pasar el mouse / al foco. */
.cta-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
.btn:hover .cta-arrow,
.btn:focus-visible .cta-arrow {
  transform: translateX(4px);
}


/* --- Tarjeta de caso --- */
/* La usa la grilla de la portada y, en fila, el bloque «Siguiente caso» al
   pie de cada caso. */
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-3px);
  border-color: #C3B29A;
}

/* Banda con la pieza del caso. Cada pieza va en tres tamaños (srcset) que
   coinciden con el ancho al que se muestra, a 1x, 2x y 3x: si el navegador
   tiene que achicar una imagen grande por su cuenta, los bordes de las
   letras salen con ruido en un monitor de 1x.
   Las imágenes traen el fondo en el mismo
   color que la superficie (#F8F4EE), así que el teléfono se apoya sobre la
   tarjeta sin rectángulo alrededor. El recorte por abajo lo hace
   object-fit: se muestra la primera pantalla y el resto queda fuera. */
.project-media {
  height: 300px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px 34px 0;
  overflow: hidden;
}
.project-media img {
  width: 320px;
  height: 260px;
  object-fit: cover;
  object-position: top;
  display: block;
}
/* El render del prototipo tiene más margen alrededor del teléfono que la
   pieza de WhatsApp; se compensa para que los dos teléfonos midan igual. */
.project-media img.media-dni { width: 402px; }

.project-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-labels {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 10px;
}
.project-body h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.project-descriptor {
  max-width: 44ch;
  font-size: 1.06rem;
  margin: 0 0 22px;
}

.project-cta {
  margin-top: auto;
  font-weight: 500;
  color: var(--accent);
}
/* La flecha del CTA se desliza igual que en los botones. */
.project-card:hover .cta-arrow,
.project-card:focus-visible .cta-arrow {
  transform: translateX(4px);
}

/* Variante en fila: la pieza a la izquierda y el texto a la derecha. Es la
   tarjeta del pie de cada caso, donde ocupa el ancho completo de lectura. */
.project-card--fila {
  display: grid;
  grid-template-columns: 5fr 7fr;
}
.project-card--fila .project-media {
  height: auto;
  min-height: 280px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.project-card--fila .project-body {
  padding: 32px 36px 34px;
  justify-content: center;
}
.project-card--fila .project-cta { margin-top: 0; }


/* --- Footer --- */
.site-footer {
  padding: 0 0 34px;
  background: var(--deep);
  color: #9E9082;
  font-size: 0.88rem;
}
.site-footer p { margin: 0; }

/* El padding lateral va en el envoltorio y no en el footer: así el borde
   izquierdo (y el filete) arrancan en la misma línea que el contenido del
   bloque de arriba, que mide --max-content CON su padding incluido. */
.footer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 24px;
}
.footer-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* Filete que le da al footer su propia zona dentro del bloque oscuro.
     Va en el tono de la píldora de disponibilidad y no en el del borde
     del header: sobre este fondo, #3B2F26 da 1,29:1 de contraste y es
     invisible. Este da 2,49:1 y se lee sin gritar. */
  border-top: 1px solid #6B584A;
  padding-top: 24px;
}
.footer-derecha { text-align: right; }

.site-footer .footer-nombre {
  color: var(--on-deep);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-footer .footer-rol  { margin-top: 3px; font-size: 0.85rem; }
.site-footer .footer-anio { font-size: 0.85rem; }

/* Centrado por flex y no con vertical-align: un desplazamiento fijo en em
   se calcula sobre el tamaño de la letra, no del dibujo, así que el ícono
   se despega de la línea a medida que crece. Por flex el centro coincide
   exacto a cualquier tamaño. */
.site-footer .footer-nota {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 3px;
  color: #8A7A6B;
  font-size: 0.85rem;
}
/* Carmen es calicó: crema, naranja y negro. Es la paleta del sitio,
   así que el dibujo no introduce ningún color nuevo. */
.footer-gato {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  margin-right: 0.42em;
}


/* --- Animación: fade sutil al hacer scroll --- */
/* Cada página declara el orden de entrada de sus hijos (--orden) en su
   propio <style>; acá va sólo el mecanismo. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Las secciones marcadas .stagger no se desvanecen en bloque: eso lo
     hacen sus hijos, uno detrás de otro. */
  .reveal.stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal.stagger .reveal-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--orden, 0) * 80ms);
  }
  .reveal.stagger.is-visible .reveal-item {
    opacity: 1;
    transform: none;
  }
}


/* --- Responsive: breakpoint en 768px --- */
@media (max-width: 768px) {
  section { padding: 56px 20px; }

  /* Header: se evita el wrapping y se ajustan tamaños para que entre
     prolijo en una sola línea; se amplía el área táctil del nav. */
  .site-header { padding: 0 16px; gap: 10px; }
  .site-header .brand { font-size: 0.95rem; white-space: nowrap; }
  .site-nav ul { gap: 12px; }
  .site-nav a { font-size: 0.9rem; white-space: nowrap; padding: 10px 4px; }

  /* Tarjeta de caso: banda más baja para que no quede tan larga; la
     variante en fila vuelve a apilarse como en la portada. */
  .project-media { height: 240px; padding-top: 30px; }
  .project-media img { width: 270px; height: 210px; }
  .project-media img.media-dni { width: 339px; }
  .project-body { padding: 20px 20px 24px; }
  .project-body h3 { font-size: 1.4rem; }
  .project-card--fila { grid-template-columns: 1fr; }
  .project-card--fila .project-media { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-card--fila .project-body { padding: 20px 20px 24px; }

  /* Footer apilado: alineado a la izquierda como el resto. */
  .footer-fila { gap: 22px; }
  .footer-derecha { text-align: left; }
  .site-footer .footer-nota { justify-content: flex-start; }

  /* Apilado, el año deja de ser el encabezado de la columna derecha y
     se interpone entre el rol y la nota, que quieren leerse juntas.
     Invertido, cierra el bloque como corresponde a una firma. */
  .footer-derecha { display: flex; flex-direction: column; }
  .site-footer .footer-nota { order: 1; margin-top: 0; }
  .site-footer .footer-anio { order: 2; margin-top: 3px; }
}