/* ============================================================
   ABOUT
   ============================================================ */

.about-hero{
  min-height:min(70svh,48rem);display:flex;align-items:center;
  padding-block-start:calc(var(--section-y) + var(--nav-h));
}
.about-hero__bio{font-size:var(--step-4);max-width:22ch;font-weight:var(--w-bold);
  line-height:var(--lh-tight);letter-spacing:var(--track-tight)}

/* ---------- Tira de fotos ---------- */
.photos{
  display:grid;gap:var(--space-sm);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.photos figure{margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--hairline);aspect-ratio:4/5}
.photos img{width:100%;height:100%;object-fit:cover}
/* Marco vacío mientras no hay fotos. Se borra al meterlas. */
.photos .empty{
  display:grid;place-items:center;height:100%;
  border:1.5px dashed var(--hairline);border-radius:var(--r-md);
  color:var(--dim);font-size:var(--step--1);text-align:center;padding:var(--space-md);
}

/* ---------- Dos columnas: título a la izquierda, cuerpo a la derecha ---------- */
.split{
  display:grid;gap:var(--space-lg) var(--space-2xl);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .split__title{position:sticky;top:calc(var(--nav-h) + var(--space-lg));align-self:start}
}
.split__title{font-size:var(--step-3)}
.split__body > * + *{margin-block-start:var(--space-lg)}

/* ---------- Bloques numerados: filosofía y "why me" ---------- */
.points{
  display:grid;gap:var(--space-lg) var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  margin-block-start:var(--space-xl);
}
.points h3{font-size:var(--step-1);margin-bottom:var(--space-xs)}
.points p{color:var(--dim);max-width:38ch}

/* ---------- Experiencia: el CV en HTML ---------- */
.cv{margin-block-start:var(--space-lg)}
/* Ojo: aquí NO puede haber una regla `.cv li{display:grid}`. Los <li>
   ahora contienen el botón y el panel del acordeón, y convertirlos en
   grid metía el botón en una columna estrecha y le encimaba el texto. */
.cv .years{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.cv .place{font-weight:var(--w-bold);letter-spacing:-.01em}
.cv .place small{display:block;font-weight:var(--w-regular);color:var(--dim);
  font-size:var(--step--1);letter-spacing:0}
.cv .role{font-weight:var(--w-medium)}

/* ---------- Listas simples: certificaciones, formación, clientes ---------- */
.stack{margin-block-start:var(--space-lg);display:grid;gap:var(--space-sm)}
.stack li{
  display:flex;gap:var(--space-md);justify-content:space-between;
  flex-wrap:wrap;padding-block:var(--space-sm);
  border-block-end:1px solid var(--hairline);
}
.on-dark .stack li{border-block-end-color:var(--hairline-alt)}
.stack .by{color:var(--dim);font-size:var(--step--1)}

.logos{
  display:grid;gap:var(--space-sm);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  margin-block-start:var(--space-xl);
}
.logos li{
  display:grid;place-items:center;min-height:6.5rem;padding:var(--space-md);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  font-weight:var(--w-medium);text-align:center;font-size:var(--step--1);
}
.on-dark .logos li{border-color:var(--hairline-alt)}

/* ---------- Aviso de sección pendiente ---------- */
.pending{
  border:1.5px dashed var(--hairline);border-radius:var(--r-md);
  padding:var(--space-lg);margin-block-start:var(--space-lg);
  color:var(--dim);
}
.on-dark .pending{border-color:var(--hairline-alt)}

.cv-cta{
  display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;
  margin-block-start:var(--space-xl);
}

/* ---------- Experiencia: acordeón ----------
   El <button> es el que abre. Ser un botón de verdad significa que
   funciona con Enter y Espacio sin que yo escriba nada, y que el
   lector de pantalla dice "contraído/expandido" solo, por aria-expanded. */
.exp__hint{font-size:var(--step--1);margin-block-start:var(--space-md)}

.cv__item{border-block-start:1px solid var(--hairline)}
.cv__item:last-child{border-block-end:1px solid var(--hairline)}

.cv__head{
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  inline-size:100%;text-align:start;
  display:grid;gap:var(--space-xs) var(--space-lg);
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  padding:var(--space-md) var(--space-sm);
  transition:background var(--dur-fast) var(--ease),
             padding-inline var(--dur-base) var(--ease);
}
/* Animación sutil al pasar por encima: se recorre un poco y se tiñe. */
.cv__head:hover,
.cv__head:focus-visible{
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  padding-inline-start:var(--space-md);
}
@media (min-width:760px){
  .cv__head{
    grid-template-columns:8rem minmax(0,1.1fr) minmax(0,1fr) 1.25rem;
    align-items:center;
  }
  .cv__head .role{text-align:end}
}

.cv__chev{
  inline-size:.62rem;block-size:.62rem;justify-self:end;
  border-inline-end:1.8px solid currentColor;
  border-block-end:1.8px solid currentColor;
  rotate:45deg;
  transition:rotate var(--dur-base) var(--ease);
  opacity:.55;
}
.cv__head[aria-expanded="true"] .cv__chev{rotate:225deg;opacity:1}

/* La altura la mide accordion.js y la escribe en --alto.

   Antes esto usaba el truco de grid-template-rows 0fr → 1fr, que evita
   tener que saber cuánto mide el contenido. En este layout no funcionó:
   cerrado quedaba en la altura del padding y abierto resolvía la
   fracción contra cero espacio libre, así que el panel nunca crecía.
   Medir en JS es menos elegante pero se comporta igual en todos lados,
   y el acordeón ya necesita JavaScript de todos modos. */
.cv__panel{
  max-height:0;overflow:hidden;
  transition:max-height var(--dur-base) var(--ease);
}
.cv__head[aria-expanded="true"] + .cv__panel{max-height:var(--alto,60rem)}
.cv__inner{min-height:0}

/* En pantallas anchas los bullets van a dos columnas. En una sola
   dejaban media pantalla vacía a la derecha, y estirarlos a todo lo
   ancho daría renglones de 140 caracteres, ilegibles. */
.cv__inner > ul{
  display:grid;gap:0 var(--space-2xl);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .cv__inner > ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.cv__panel li{
  position:relative;padding-inline-start:var(--space-md);
  margin-block-end:var(--space-md);color:var(--dim);max-width:56ch;
}
.cv__panel li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.65em;
  inline-size:.35rem;block-size:.35rem;border-radius:var(--r-pill);
  background:var(--link,var(--coral-text));
}
.cv__inner > ul{padding:0 var(--space-sm) var(--space-md)}

/* ---------- Formación y certificaciones ---------- */
.stack--hover li,.stack--cert li{
  padding-inline:var(--space-sm);border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease),
             padding-inline var(--dur-base) var(--ease);
}
.stack--hover li:hover,.stack--cert li:hover{
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  padding-inline-start:var(--space-md);
}
/* .stack .by también apunta a este elemento y es más específico, así que
   este selector tiene que igualarlo o el link se pinta como texto gris. */
.stack .cert__link{
  color:var(--link,var(--coral-text));
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease);
}
.stack .cert__link:hover{opacity:.7}

/* ---------- Logos de clientes ----------
   Los archivos son artwork BLANCO sobre transparente, así que la ficha
   no puede tener fondo claro: se volvían invisibles. Van directo sobre
   la banda de cobalto, con solo un borde tenue que los agrupa. */
.logos li{
  background:transparent;
  transition:background var(--dur-base) var(--ease),
             transform var(--dur-base) var(--ease);
}
.logos li:hover{
  background:color-mix(in srgb, var(--paper) 12%, transparent);
  transform:translateY(-2px);
}
.logos img{
  max-height:3rem;width:auto;object-fit:contain;
  opacity:.88;transition:opacity var(--dur-base) var(--ease);
}
.logos li:hover img{opacity:1}

/* ---------- Recomendaciones ---------- */
.says{
  display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  margin-block-start:var(--space-xl);
  align-items:start;
}
.say{
  border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--space-lg);
  transition:transform var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease);
}
.say:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.say blockquote{margin:0;white-space:pre-line;color:var(--dim);max-width:none}
.say blockquote::before{content:"“";font-size:var(--step-3);line-height:0;
  vertical-align:-.35em;margin-inline-end:.1em;color:var(--link,var(--coral-text))}
.say__who{margin:var(--space-md) 0 0;font-weight:var(--w-bold);max-width:none}
.say__who small{display:block;font-weight:var(--w-regular);color:var(--dim);
  font-size:var(--step--1)}