/* brianjacome.es · portafolio para el empleo · Bors-CC 🏗️ «Bors Caballeria R4 B» · 2026-09-22
   Sistema visual: DESIGN.md v1.0 de la marca personal (fuente única). Tokens copiados de su §3.
   Móvil primero (390 px y crece con min-width). Sin dependencias, sin red externa, sin rastreadores. */

/* Fuentes autoalojadas — regla 10 del sistema: en producción, cero red externa. */
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Superficies */
  --bj-papel:#FBFAF7; --bj-papel-alt:#F2F0EA; --bj-linea:#E3E0D8;
  /* Texto */
  --bj-tinta:#11242A; --bj-texto-2:#33474D; --bj-texto-3:#5F7278;
  /* Marca */
  --bj-teal:#015763; --bj-teal-profundo:#01464F; --bj-oro:#EFC245;
  /* Tipografía */
  --bj-font-titulo:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bj-font-cuerpo:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bj-fs-nombre:clamp(2.5rem, 2rem + 2.08vw, 3.5rem);
  --bj-fs-titulo:clamp(1.625rem, 1.47rem + .64vw, 2.125rem);
  --bj-fs-h3:1.1875rem;
  --bj-fs-lead:clamp(1.125rem, 1.05rem + .31vw, 1.3125rem);
  --bj-fs-cuerpo:1.125rem; --bj-fs-meta:.9375rem; --bj-fs-rotulo:.8125rem;
  --bj-lh-nombre:1.08; --bj-lh-titulo:1.2; --bj-lh-lead:1.55; --bj-lh-cuerpo:1.7;
  /* Retícula y ritmo */
  --bj-texto:38rem; --bj-container:62rem; --bj-gutter:clamp(1.25rem, 5vw, 3rem);
  --bj-sect:clamp(3.5rem, 2.57rem + 3.81vw, 6rem); --bj-gap:clamp(1rem, .5rem + 2vw, 1.75rem);
  --bj-radio:10px; --bj-radio-min:4px; --bj-tap:44px; --bj-transicion:140ms ease;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bj-papel);color:var(--bj-tinta);
  font-family:var(--bj-font-cuerpo);font-size:var(--bj-fs-cuerpo);line-height:var(--bj-lh-cuerpo)}
h1,h2,h3{font-family:var(--bj-font-titulo);font-weight:600;margin:0}
p{margin:0}
ul,dl,dd{margin:0;padding:0}
li{list-style:none}

.contenedor{max-width:var(--bj-container);margin-inline:auto;padding-inline:var(--bj-gutter)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{position:static;display:inline-block;padding:12px 16px;background:var(--bj-teal);color:var(--bj-papel)}

/* Foco: contorno sólido de 2 px en petróleo, 2 px de separación (regla 6). Nunca outline:none. */
a:focus-visible,summary:focus-visible{outline:2px solid var(--bj-teal);outline-offset:2px;border-radius:var(--bj-radio-min)}

.rotulo{font-size:var(--bj-fs-rotulo);text-transform:uppercase;letter-spacing:.09em;color:var(--bj-teal);font-weight:600}
.meta{font-size:var(--bj-fs-meta);color:var(--bj-texto-3)}
.lead{font-size:var(--bj-fs-lead);line-height:var(--bj-lh-lead);color:var(--bj-texto-2);max-width:var(--bj-texto)}

.enlace{color:var(--bj-teal);text-decoration:underline;text-underline-offset:2px;
  display:inline-block;min-height:var(--bj-tap);line-height:var(--bj-tap);transition:color var(--bj-transicion)}
.enlace:hover{text-decoration-color:var(--bj-oro)}

.boton{display:inline-flex;align-items:center;justify-content:center;min-height:var(--bj-tap);
  padding:12px 20px;border-radius:var(--bj-radio-min);background:var(--bj-teal);color:var(--bj-papel);
  text-decoration:none;font-weight:600;font-size:1rem;border:2px solid var(--bj-teal);
  transition:background var(--bj-transicion),color var(--bj-transicion)}
.boton:hover{background:var(--bj-teal-profundo);border-color:var(--bj-teal-profundo)}
.boton--suave{background:transparent;color:var(--bj-teal)}
.boton--suave:hover{background:var(--bj-papel-alt);color:var(--bj-teal-profundo)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.acciones--menor{gap:24px;margin-top:8px;font-size:var(--bj-fs-meta)}
.acciones--menor .enlace{min-height:auto;line-height:1.7;padding-block:8px}

/* Cabecera */
.hero{padding-block:calc(var(--bj-sect) * .7) var(--bj-sect);border-bottom:1px solid var(--bj-linea)}
.hero__caja{display:grid;gap:32px}
.nombre{font-size:var(--bj-fs-nombre);line-height:var(--bj-lh-nombre);margin:8px 0 12px;
  color:var(--bj-teal-profundo);max-width:16ch}
.titular{font-size:var(--bj-fs-lead);line-height:var(--bj-lh-lead);color:var(--bj-tinta);font-weight:600}
.hero .lead{margin-top:4px}
/* El único trazo dorado del papel (regla 2): bajo el titular. */
.titular::after{content:"";display:block;width:64px;height:3px;background:var(--bj-oro);margin-top:16px}

/* Hueco rotulado (componente 6): se rotula y se espera; jamás se rellena con relleno. */
.hueco{border:2px dashed rgba(1,87,99,.5);background:var(--bj-papel-alt);border-radius:var(--bj-radio);
  padding:24px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.hueco p{font-size:var(--bj-fs-meta);color:var(--bj-texto-2)}
.hueco--retrato{aspect-ratio:1;max-width:320px}
.retrato{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--bj-radio)}

/* Secciones */
.seccion{padding-block:var(--bj-sect)}
.seccion--alterna{background:var(--bj-papel-alt)}
.seccion--alterna .meta{color:var(--bj-texto-2)}
.seccion__titulo{font-size:var(--bj-fs-titulo);line-height:var(--bj-lh-titulo);color:var(--bj-teal-profundo);
  margin-bottom:24px}

/* La prueba: rejilla de tarjetas; una sola con color sólido (regla 3). */
.rejilla{display:grid;gap:var(--bj-gap);grid-template-columns:repeat(auto-fit,minmax(13rem,22rem))}
.tarjeta{background:var(--bj-papel-alt);border-radius:var(--bj-radio);padding:24px}
.tarjeta__dato{font-family:var(--bj-font-titulo);font-weight:600;font-size:var(--bj-fs-h3);
  color:var(--bj-teal-profundo);line-height:1.25}
.tarjeta__pie{margin-top:8px;font-size:var(--bj-fs-meta);color:var(--bj-texto-2)}
.tarjeta--firma{background:var(--bj-teal)}
.tarjeta--firma .tarjeta__dato{color:var(--bj-papel)}
.tarjeta--firma .tarjeta__pie{color:#D5E3E5}

/* Experiencia */
.entrada{max-width:var(--bj-texto);margin-bottom:32px}
.entrada:last-child{margin-bottom:0}
.entrada__puesto{font-size:var(--bj-fs-h3);color:var(--bj-teal-profundo)}
.entrada__meta{font-size:var(--bj-fs-meta);color:var(--bj-texto-3);margin-top:4px}
.seccion--alterna .entrada__meta{color:var(--bj-texto-2)}
.vinetas{margin-top:12px;display:grid;gap:8px}
.vinetas li{padding-left:20px;position:relative}
.vinetas li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--bj-teal)}

/* Competencias */
.familias{display:grid;gap:16px}
.familias dt{font-size:var(--bj-fs-rotulo);text-transform:uppercase;letter-spacing:.09em;
  color:var(--bj-teal);font-weight:600;padding-top:2px}
.familias dd{color:var(--bj-texto-2);margin-bottom:8px}
.idioma{margin-bottom:4px}

.seccion--contacto .acciones{margin-top:20px}
.pie{border-top:1px solid var(--bj-linea);padding-block:24px}
.pie .enlace{min-height:auto;line-height:inherit}

@media (min-width:768px){
  .hero__caja{grid-template-columns:1fr 320px;align-items:center;gap:48px}
  .familias{grid-template-columns:13rem 1fr;gap:12px 24px}
  .familias dd{margin-bottom:0}
  .dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
}

/* Movimiento: solo fundidos de 140 ms, y aquí su anulación ESCRITA (regla 8). */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* Hoja de impresión mínima (regla 11). */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .saltar,.acciones,.hueco{display:none}
  .seccion,.hero{padding-block:16pt;border:0}
  .seccion--alterna,.tarjeta,.tarjeta--firma{background:transparent}
  .tarjeta{border:1px solid #999;padding:8pt}
  .tarjeta--firma .tarjeta__dato,.tarjeta--firma .tarjeta__pie{color:#000}
  .entrada,.rejilla{break-inside:avoid;page-break-inside:avoid}
  a{color:#000;text-decoration:underline}
}