/* ==========================================================================
   base.css — cimiento común de las páginas de caso de estudio
   Ballestastudio · fuente canónica en Pagina Web/_casos_base/

   NO EDITAR LA COPIA que vive dentro de cada caso. Se edita este archivo
   y se corre  python sync_base.py  para repartirlo.

   --------------------------------------------------------------------------
   CONTRATO DE TOKENS
   --------------------------------------------------------------------------
   Este archivo no define ningún color ni tipografía: los consume. Cada caso
   declara estos tokens en su :root con los valores de SU marca. Si falta uno,
   el valor de reserva de abajo evita que la página se rompa, pero se ve mal
   a propósito para que se note.

     Superficies   --papel           fondo principal
                   --papel-alt       fondo del pie y de bloques alternos
     Texto         --tinta           títulos y texto fuerte
                   --texto           cuerpo
                   --texto-tenue     etiquetas y texto secundario
     Marca         --acento          color de marca (enlaces, foco, hover)
                   --acento-fuerte   variante oscura para hover sobre claro
     Bordes        --borde           filetes suaves
                   --borde-fuerte    separadores visibles
     Tipografía    --ui              fuente de cuerpo
                   --label           fuente de etiquetas y datos
     Escala        --paso-1 … --paso-5
     Medidas       --ancho           ancho máximo del contenido
                   --ancho-texto     medida de lectura (60–70ch)
     Forma         --r-sm  --r-md
     Movimiento    --curva
   ========================================================================== */

:root{
  /* Reservas visibles: si un caso olvida declarar un token, se nota. */
  --papel:        #FFF;
  --papel-alt:    #F4F4F4;
  --tinta:        #111;
  --texto:        #333;
  --texto-tenue:  #666;
  --acento:       #C0397A;   /* magenta de aviso: ningún caso usa este color */
  --acento-fuerte:#8A2255;
  --borde:        #E5E5E5;
  --borde-fuerte: #D0D0D0;
  --ui:           system-ui, -apple-system, "Segoe UI", sans-serif;
  --label:        var(--ui);
  --paso-1: clamp(.5rem, .45rem + .25vw, .75rem);
  --paso-2: clamp(1rem, .85rem + .70vw, 1.75rem);
  --paso-3: clamp(1.75rem, 1.40rem + 1.60vw, 3rem);
  --paso-4: clamp(2.75rem, 2.10rem + 3.00vw, 5.25rem);
  --paso-5: clamp(4rem, 3.00rem + 4.80vw, 8rem);
  --ancho:        1180px;
  --ancho-texto:  66ch;
  --r-sm: 8px;
  --r-md: 14px;
  --curva: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Reset y elementos base -------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body{
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--ui);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

p, li, figcaption, dd, blockquote{ text-wrap: pretty; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

h1,h2,h3,h4{ text-wrap: balance; }

/* ---- Foco ---------------------------------------------------------------
   Nunca se quita el anillo: se reemplaza por uno de marca. */
:focus-visible{
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Salto al contenido -------------------------------------------------
   Fuera de pantalla hasta que recibe foco por teclado. Se aceptan las dos
   clases porque los casos viejos usan .saltar y los nuevos .skip. */
.saltar, .skip{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--acento);
  color: #fff;
  font-family: var(--label);
  font-size: .8rem;
  padding: 12px 18px;
  text-decoration: none;
}
.saltar:focus, .skip:focus{ left: 12px; top: 12px; }

/* ==========================================================================
   PIE — idéntico en todos los casos
   Markup esperado:
     footer.pie > (.contenedor opcional) >
       nav.pie__salidas   dos enlaces: volver al portafolio / Behance
       div.pie__filete    con <img> del logo o <span> con el nombre
       nav.pie__menu      enlaces del sitio, separados por filetes
       p.pie__legal
       p.pie__nota        qué trabajo fue y de qué año
   ========================================================================== */
.pie{
  padding: var(--paso-4) var(--paso-2) var(--paso-3);
  background: var(--papel-alt);
  text-align: center;
}
.pie > .contenedor,
.pie > .wrap{
  max-width: var(--ancho);
  margin-inline: auto;
}

/* Salidas: volver atrás a la izquierda, seguir explorando a la derecha */
.pie__salidas{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso-1) var(--paso-3);
  margin-bottom: var(--paso-3);
}
.pie__salidas a{
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* objetivo táctil */
  font-family: var(--label);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color .25s;
}
.pie__salidas a:hover{ color: var(--acento-fuerte); }
.pie__salidas em{
  font-style: normal;
  display: inline-block;
  transition: transform .25s var(--curva);
}
.pie__salidas a:first-child:hover em{ transform: translateX(-4px); }
.pie__salidas a:last-child:hover em{ transform: translate(2px, -2px); }

/* Filete con la marca partiendo la línea. Funciona con <img> o con <span>. */
.pie__filete{
  display: flex;
  align-items: center;
  gap: var(--paso-2);
  margin-bottom: var(--paso-3);
  color: var(--acento);
}
.pie__filete::before,
.pie__filete::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde-fuerte);
}
.pie__filete img{ height: 26px; width: auto; }
.pie__filete span{
  font-family: var(--label);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Menú del pie: enlaces separados por un filete vertical */
.pie__menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--paso-1) 0;
  margin-bottom: var(--paso-3);
}
.pie__menu a{
  touch-action: manipulation;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* objetivo táctil */
  padding: 0 clamp(9px, 1.4vw, 17px);
  font-size: .87rem;
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color .2s;
}
.pie__menu a + a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5px;
  background: var(--borde-fuerte);
}
.pie__menu a:hover{ color: var(--acento-fuerte); }

.pie__legal{ margin: 0; font-size: .8rem; color: var(--texto-tenue); }
.pie__nota{ margin: 6px 0 0; font-size: .78rem; color: var(--texto-tenue); opacity: .8; }

@media (max-width: 620px){
  .pie__salidas{ justify-content: center; }
}

/* ---- Movimiento ---------------------------------------------------------
   El contenido se ve por defecto. Solo se oculta para animarlo cuando el
   documento confirma que hay JS (clase .js), así una falla de JS nunca deja
   la página en blanco. */
.js .revelar{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease-out, transform .4s ease-out;
}
.js .revelar.visible{ opacity: 1; transform: none; }

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

/* ---- Impresión ---------------------------------------------------------- */
@media print{
  body{ background: #fff; color: #000; }
  .saltar, .skip, .pie__salidas{ display: none !important; }
  a[href^="http"]::after{ content: ' (' attr(href) ')'; font-size: .75em; }
}