/* ============================================================================
   Portafolio de Emilio Palma.

   Todo baja en una sola columna: identidad arriba, después las secciones en
   orden. Lo que cambia entre teléfono y escritorio no es el orden sino el
   ancho y la distribución interna — en pantalla ancha el número y el título
   de cada sección se van a un canalón a la izquierda y el texto ocupa el
   resto, que es como se lee un currículum impreso. Nada de barras laterales.

   Newsreader para leer, JetBrains Mono para los metadatos. Fondo claro.
   ========================================================================== */

:root{
  --fondo:#fdfcfa; --papel:#ffffff; --hundido:#f4f2ee;
  --tinta:#14130f; --tinta-media:#38352d; --tinta-suave:#736d61;
  --linea:#e5e0d5; --linea-fina:#efebe2;
  --acento:#1f3a68; --vivo:#0f6b45;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ancho:62rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--serif);
  font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* --- barra --------------------------------------------------------------- */
.barra{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--fondo) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linea);
}
.barra>div{max-width:var(--ancho);margin:0 auto;padding:12px 28px;display:flex;gap:20px;align-items:center}
.barra .yo{font-weight:600;font-size:16px;letter-spacing:-.015em;color:var(--tinta);text-decoration:none}
.barra nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.barra nav a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave);text-decoration:none}
.barra nav a:hover,.barra nav a:focus-visible{color:var(--acento)}
/* La entrada a las noticias se lee como destino, no como una sección más. */
.barra nav a.noticias{
  color:var(--acento);border:1px solid color-mix(in srgb,var(--acento) 28%,transparent);
  border-radius:999px;padding:5px 13px;
}
.barra nav a.noticias:hover,.barra nav a.noticias:focus-visible{background:var(--acento);color:#fff;border-color:var(--acento)}

.pagina{max-width:var(--ancho);margin:0 auto;padding:0 28px 90px}

/* --- identidad, arriba ---------------------------------------------------- */
.identidad{padding:60px 0 48px;border-bottom:1px solid var(--linea)}
.fila{display:flex;gap:34px;align-items:flex-start}
.foto{
  width:132px;height:132px;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid var(--linea);background:var(--hundido);display:grid;place-items:center;
}
.foto .marcador{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave)}
.datos{flex:1;min-width:0}
h1{font-size:44px;line-height:1.02;letter-spacing:-.03em;font-weight:600;margin:0 0 10px}
.cargo{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento);margin:0 0 18px}
.cargo .luz{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vivo);margin-right:8px;vertical-align:1px}
.intro{font-size:19px;color:var(--tinta-media);margin:0 0 24px;max-width:38rem}
.acciones{display:flex;gap:10px;flex-wrap:wrap}
.boton{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 18px;border-radius:6px;transition:background .15s,border-color .15s,transform .15s;
}
.boton.primario{background:var(--acento);color:#fff}
.boton.primario:hover,.boton.primario:focus-visible{background:#16294a;transform:translateY(-1px)}
.boton.secundario{border:1px solid var(--linea);color:var(--tinta-media)}
.boton.secundario:hover,.boton.secundario:focus-visible{border-color:var(--tinta-suave);transform:translateY(-1px)}

/* --- secciones ------------------------------------------------------------ */
section{padding:48px 0;border-bottom:1px solid var(--linea)}
section:last-of-type{border-bottom:0}
.tituloseccion{display:flex;align-items:baseline;gap:13px;margin:0 0 24px}
.tituloseccion .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--acento)}
h2{font-size:27px;letter-spacing:-.025em;font-weight:600;margin:0}
p{margin:0 0 14px;color:var(--tinta-media)}
p:last-child{margin-bottom:0}
a{color:var(--acento)}

.entrada{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--linea-fina)}
.entrada:first-of-type{border-top:0;padding-top:0}
.marca{
  width:56px;height:56px;flex:none;border-radius:8px;overflow:hidden;
  border:1px solid var(--linea);background:var(--papel);display:grid;place-items:center;padding:7px;
}
.marca.llena{padding:0}
.marca img{max-height:100%;width:auto;height:auto;object-fit:contain}
/* Sin logo, pero ocupa el mismo lugar: si no, la entrada de al lado arranca
   más a la izquierda y la columna se ve quebrada. */
.marca.vacia{border:0;background:none}
.entrada .cuerpo{flex:1;min-width:0}
.entrada h3{font-size:19px;font-weight:600;margin:0 0 2px;letter-spacing:-.015em}
.entrada .meta{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 9px}
.entrada p{font-size:16.5px;margin:0}

.proyecto{padding:24px 0;border-top:1px solid var(--linea-fina)}
.proyecto:first-of-type{border-top:0;padding-top:0}
.proyecto h3{font-size:20px;font-weight:600;margin:0;letter-spacing:-.015em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--hundido);color:var(--tinta-suave);
}
.chip.produccion{background:#e6f3ec;color:var(--vivo)}
.proyecto .meta{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-suave);margin:6px 0 12px}
.proyecto p{font-size:16.5px;margin:0 0 12px}
.pila{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pila span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--tinta-suave);background:var(--hundido);padding:3px 9px;border-radius:4px}

/* Los grupos de herramientas reutilizan las mismas etiquetas que las fichas
   de proyecto: la sección deja de ser una lista de palabras sueltas y pasa a
   tener la misma textura que el resto de la página. */
.grupo{padding:16px 0;border-top:1px solid var(--linea-fina)}
.grupo:first-child{border-top:0;padding-top:0}
.grupo h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 9px;font-weight:400}
.grupo .pila{margin-top:0}
.grupo .pila span{font-size:12.5px;padding:5px 12px;border-radius:5px}

/* El dato de idiomas y nacionalidad, que antes eran dos columnas de un ítem
   cada una, cabe en una línea al pie de la sección. */
.linea-datos{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-suave);margin:22px 0 0;padding-top:16px;border-top:1px solid var(--linea-fina);
}

/* El cierre: la página termina invitando a escribir, no enumerando software.
   Los datos van en grande porque son la acción que se espera del visitante. */
.cierre{border-bottom:0}
.invitacion{font-size:19px;color:var(--tinta-media);margin:0 0 22px;max-width:34rem}
.enlaces{display:flex;flex-direction:column}
.enlaces a{
  display:block;text-decoration:none;color:var(--tinta);
  padding:16px 0;border-top:1px solid var(--linea-fina);transition:color .15s;
}
.enlaces a:first-child{border-top:0}
.enlaces a:hover,.enlaces a:focus-visible{color:var(--acento)}
/* El corrimiento al pasar encima mueve el texto, no la caja: transform no
   obliga a recalcular el layout como lo hacía padding-left. */
.enlaces .que,.enlaces .dato{transition:transform .15s}
.enlaces a:hover :is(.que,.dato),.enlaces a:focus-visible :is(.que,.dato){transform:translateX(6px)}
.enlaces .que{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:3px;
}
.enlaces .dato{display:block;font-size:21px;letter-spacing:-.015em}
.boton.grande{margin-top:26px;padding:14px 24px;font-size:12px}

footer{padding:28px 0 0;color:var(--tinta-suave);font-size:14.5px;font-style:italic}
footer a{color:var(--tinta-suave)}

html.js .revelar{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
html.js .revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .revelar{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===================== ESCRITORIO ===================== */
/* Mismo orden vertical; lo que cambia es que el título de cada sección se va
   a un canalón a la izquierda y el contenido ocupa el ancho útil. */
@media (min-width:900px){
  body{font-size:19px}
  .identidad{padding:76px 0 56px}
  h1{font-size:56px}
  .intro{font-size:21px}
  section{display:grid;grid-template-columns:210px 1fr;gap:40px;padding:56px 0}
  .tituloseccion{flex-direction:column;gap:6px;margin:0;position:sticky;top:76px;align-self:start}
  h2{font-size:24px}
  .contenidoseccion{min-width:0}
  footer{grid-column:1/-1}
}
@media (min-width:1150px){
  section{grid-template-columns:250px 1fr;gap:56px}
  h1{font-size:62px}
}

/* ===================== TELÉFONO ===================== */
@media (max-width:899px){
  .pagina{padding:0 22px 70px}
  .barra>div{padding:11px 22px}
  .barra .yo{display:none}
  .barra nav{margin-left:0;gap:16px}
  .identidad{padding:36px 0 36px}
  .fila{flex-direction:column-reverse;gap:22px;align-items:flex-start}
  .foto{width:104px;height:104px}
  h1{font-size:34px}
  body{font-size:17px}
  .intro{font-size:17.5px}
  section{padding:38px 0}
  h2{font-size:24px}
  .entrada{gap:14px}
  .marca{width:46px;height:46px}
}

/* Resultado de cada proyecto: la evidencia, separada de la descripción. */
.resultado{font-size:16px;font-style:italic;color:var(--tinta);padding-left:12px;border-left:2px solid var(--linea);margin:0 0 12px}
.proyecto .boton{margin-top:14px}

/* --- revisión 2026-09-15: legibilidad y navegación ------------------------
   Mismo formato (mono en mayúscula espaciada), pero ninguna etiqueta bajo
   ~11px: a 9,5–10,5px costaba leerlas en el teléfono. */
.barra nav a{font-size:12px}
.chip{font-size:11px}
.pila span{font-size:12px}
.grupo h3{font-size:12px}
.entrada .meta,.proyecto .meta{font-size:12px}
.tituloseccion .n{font-size:12px}
.linea-datos{font-size:12px}
.enlaces .que{font-size:11.5px}
.boton{font-size:12px}
/* Al saltar a una sección o avanzar con Tab, la barra fija no tapa lo que
   queda enfocado (scroll-padding en html cubre ambos casos). */
html{scroll-padding-top:72px}
/* Enlace para saltar al contenido: invisible hasta recibir foco con teclado. */
.saltar{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--acento);color:#fff;padding:8px 14px;border-radius:6px;font-family:var(--mono);font-size:12px;text-decoration:none}
.saltar:focus{left:12px}
/* En pantallas muy angostas el menú puede pasar a dos líneas en vez de desbordar. */
@media (max-width:380px){
  .barra nav{flex-wrap:wrap;gap:6px 12px}
  .barra nav a{font-size:11px}
}

/* --- revisión 2026-10-29: teclado, títulos y toque -------------------------
   Con teclado cada enlace muestra un anillo propio; el del navegador casi no
   se veía sobre el botón azul. Solo con :focus-visible, así que no aparece
   al hacer clic. */
a:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
/* Títulos repartidos en líneas parejas: sin una palabra sola al final. */
h1,h2,h3{text-wrap:balance}
a{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--acento) 14%,transparent)}