/* ============================================================
   main.css — layout & components ("Editorial ejecutivo")
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(56px, 9vw, 128px); }
.section--alt { background: var(--paper-2); }
.section--ink {
  background: var(--ink-bg);
  color: var(--paper);
}

/* ---- Tipografía ---- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--clay);
}
.section-title { font-size: var(--fs-h2); }
.lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  line-height: 1.5;
}
.muted { color: var(--muted); }
em.accent { font-style: italic; color: var(--clay-deep); }

/* ---- Navegación ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  height: 68px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.15rem;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 0.4ch;
}
.brand__dot { color: var(--clay); }
.nav__links { display: flex; align-items: center; gap: var(--sp-6); }
.nav__links a {
  font-size: 0.92rem; font-weight: 500; color: var(--ink-2);
  position: relative; padding-block: 4px;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--clay); transition: width var(--dur) var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: var(--sp-4); }

@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* Toggle idioma */
.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  overflow: hidden; font-size: 0.8rem; font-weight: 600;
}
.lang button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--muted); padding: 6px 12px; font: inherit; letter-spacing: 0.04em;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6ch;
  font-weight: 600; font-size: 0.95rem;
  padding: 13px 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--clay); color: #fff; box-shadow: var(--sh-md); }
.btn--primary:hover { background: var(--clay-deep); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn__ic { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.btn__ic--wa { fill: #25D366; }  /* verde WhatsApp original */
.btn__ic--li { fill: #0A66C2; }  /* azul LinkedIn original */
.btn { position: relative; }
.btn__short { display: none; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---- Hero ---- */
.hero { padding-block: clamp(64px, 11vw, 150px) clamp(48px, 8vw, 110px); position: relative; }
.hero__eyebrow { margin-bottom: var(--sp-5); }
.hero__title { font-size: var(--fs-h1); max-width: 15ch; font-weight: 700; letter-spacing: -0.03em; }
.hero__title .soft { color: var(--clay); }
.hero__lead {
  margin-top: var(--sp-6); max-width: 54ch;
  font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.55;
}
.hero__cta { margin-top: var(--sp-7); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero__meta {
  margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.hero__meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero__meta-item b {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink);
}
.hero__meta-item span { font-size: 0.85rem; color: var(--muted); }

/* ---- Pilares ---- */
.pillars {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-8);
}
.pillar {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.pillar__num {
  font-family: var(--font-display); font-size: 1rem; color: var(--clay);
  font-weight: 600; letter-spacing: 0.02em;
}
.pillar__title { font-family: var(--font-display); font-size: var(--fs-h3); margin: var(--sp-3) 0 var(--sp-3); font-weight: 600; }
.pillar p { color: var(--ink-2); font-size: 1rem; }

@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* ---- Impacto / métricas ---- */
.cases { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); }
.case {
  border-radius: var(--r-lg); padding: var(--sp-6);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 130%);
  border: 1px solid var(--line);
}
.case__metric {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1; color: var(--clay-deep);
}
.case__metric.is-word { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); letter-spacing: -0.02em; }

/* ---- Alcance (Sales Operations) — fichas que giran ---- */
.scope-note { color: var(--muted); font-size: 0.85rem; margin-top: var(--sp-5); }
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }

.scope-card {
  perspective: 1400px; border: 0; background: transparent; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none;
}
.scope-card__inner {
  position: relative; display: grid; min-height: 320px; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
}
.scope-card:hover .scope-card__inner,
.scope-card:focus-visible .scope-card__inner,
.scope-card.is-flipped .scope-card__inner { transform: rotateY(180deg); }

.scope-card__face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; padding: var(--sp-6);
}
.scope-card:focus-visible .scope-card__face { box-shadow: 0 0 0 3px var(--clay-soft), var(--sh-md); }

/* cara frontal: imagen de fondo + número + título */
.scope-card__front {
  justify-content: flex-end; color: #fff;
  background-color: var(--clay-deep);
  background-image:
    linear-gradient(180deg, rgba(6,53,60,0.42) 0%, rgba(6,53,60,0.55) 40%, rgba(4,20,23,0.96) 100%),
    var(--bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: normal, luminosity;
  box-shadow: var(--sh-md);
}
.scope-card__front .scope-card__k { color: var(--paper); opacity: 0.8; }
.scope-card .scope-card__front h3 { color: #fff; }
.scope-card__hint {
  margin-top: var(--sp-4); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.82);
}

/* cara trasera: explicación */
.scope-card__back {
  transform: rotateY(180deg); justify-content: center;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.scope-card__back p { color: var(--ink-2); font-size: 0.98rem; line-height: var(--lh-body); }

.scope-card__k { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--clay); }
.scope-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); margin: var(--sp-3) 0 var(--sp-3); color: var(--ink); line-height: var(--lh-snug); }

@media (max-width: 980px) { .scope-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .scope-grid { grid-template-columns: 1fr; } .scope-card__inner { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .scope-card__inner { transition: transform 0.001ms; } }
.case__label { margin-top: var(--sp-3); font-weight: 600; color: var(--ink); }
.case p { margin-top: var(--sp-2); color: var(--muted); font-size: 0.95rem; }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; } }

/* ---- Diferencial ---- */
.diff { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.diff__quote {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.25; color: var(--ink);
}
.diff__quote .clay { color: var(--clay); font-style: normal; }
.diff__list { display: grid; gap: var(--sp-5); }
.diff__item { display: flex; gap: var(--sp-4); }
.diff__mark {
  flex: 0 0 auto; width: 22px; height: 2px; margin-top: 15px; background: var(--clay);
}
.diff__item b { display: block; font-weight: 600; margin-bottom: 2px; }
.diff__item p { color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 860px) { .diff { grid-template-columns: 1fr; } }

/* ---- Formación y reconocimiento ---- */
.edu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
.edu-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.edu-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.edu-card__logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.edu-card__logo--cesa { height: 52px; }
.edu-card__logo--esic { height: 46px; }
.edu-card__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); line-height: var(--lh-snug); }
.edu-card__school { margin-top: 4px; font-size: 0.9rem; color: var(--ink-2); }
.edu-card__year { margin-top: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: var(--clay); }

.award {
  margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 5px;
  background: var(--ink-bg); color: var(--paper);
  border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-7);
}
.award__k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); }
.award__t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.award__b { color: color-mix(in srgb, var(--paper) 74%, transparent); font-size: 0.98rem; max-width: 62ch; }
.edu-meta { margin-top: var(--sp-7); }
@media (max-width: 900px) { .edu-grid { grid-template-columns: 1fr; } }

/* ---- Sobre mí (dos pasiones) ---- */
.facets { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.facet {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.facet:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.facet__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.facet__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--ease);
}
.facet:hover .facet__media img { transform: scale(1.04); }
.facet__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.facet__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); line-height: var(--lh-snug); }
.facet__body p { color: var(--ink-2); font-size: 0.96rem; }
.facet__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.tag {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; color: var(--clay);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap;
}
@media (max-width: 980px) {
  .about-top { grid-template-columns: 1fr; }
  .facets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .facets { grid-template-columns: 1fr; } }

/* ---- Cierre / contacto ---- */
.cta-block { text-align: center; }
.cta-block .eyebrow { color: var(--clay-soft); }
.cta-block .section-title { max-width: 20ch; margin-inline: auto; color: var(--paper); font-family: var(--font-display); }
.cta-block .lead { color: color-mix(in srgb, var(--paper) 72%, transparent); margin: var(--sp-5) auto 0; max-width: 52ch; }
.cta-block .hero__cta { justify-content: center; margin-top: var(--sp-7); }
.cta-block .btn--ghost { border-color: color-mix(in srgb, var(--paper) 40%, transparent); color: var(--paper); }
.cta-block .btn--ghost:hover { border-color: var(--paper); }

/* ---- Footer ---- */
.footer { background: var(--ink-bg-2); color: color-mix(in srgb, var(--paper) 70%, transparent); padding-block: var(--sp-7); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; align-items: center; }
.footer a:hover { color: var(--paper); }
.footer__links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* ---- Section header ---- */
.sec-head { max-width: 62ch; }
.sec-head .eyebrow { margin-bottom: var(--sp-4); }
.sec-head .lead { margin-top: var(--sp-4); }

/* ---- Reveal on scroll (solo si el JS está activo; sin JS el contenido se ve) ---- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* Utilidad: no romper el layout horizontal en tablas/bloques anchos */
.scroll-x { overflow-x: auto; }

/* ---- Hero grid + retrato ---- */
.hero__grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(155deg, var(--paper-3) 0%, var(--clay-soft) 100%);
  box-shadow: var(--sh-lg); display: grid; place-items: center; isolation: isolate;
}
.portrait__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.portrait__mono {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em;
  font-size: clamp(3.4rem, 9vw, 5.5rem); color: color-mix(in srgb, var(--clay-deep) 68%, #fff);
}
.portrait__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 16px; font-size: 0.82rem; font-weight: 500; color: #fff;
  background: linear-gradient(0deg, rgba(23, 22, 15, 0.5), transparent);
}
@media (max-width: 860px) {
  /* La foto sube entre el titular y el párrafo: rompe el bloque de texto y
     baja la densidad de la primera pantalla (el texto ya no llega en masa). */
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__content { display: contents; }
  .hero__eyebrow { grid-row: 1; margin-bottom: 0; }
  .hero__title   { grid-row: 2; }
  .portrait      { grid-row: 3; }
  .hero__lead    { grid-row: 4; margin-top: 0; }
  .hero__cta     { grid-row: 5; margin-top: var(--sp-2); }
  /* fix: sin width explícito la figura se encogía al ancho del monograma (img es absolute) */
  .portrait { width: 100%; max-width: 300px; margin-inline: auto; }
}

/* ============================================================
   Hero oscuro — la figura se funde con el fondo
   (banda a todo el ancho con el MISMO negro que la foto: #090907)
   ============================================================ */
.hero-band { background: var(--hero-bg); position: relative; }

.hero-band .hero__eyebrow { color: var(--clay-soft); }
.hero-band .hero__title { color: var(--paper); }
.hero-band .hero__title .soft { color: var(--accent-bright); }
.hero-band .hero__lead { color: color-mix(in srgb, var(--paper) 74%, transparent); }

.hero-band .btn--ghost { border-color: color-mix(in srgb, var(--paper) 38%, transparent); color: var(--paper); }
.hero-band .btn--ghost:hover { border-color: var(--paper); }

.hero-band .hero__meta { border-top-color: color-mix(in srgb, var(--paper) 16%, transparent); }
.hero-band .hero__meta-item b { color: var(--paper); }
.hero-band .hero__meta-item span { color: color-mix(in srgb, var(--paper) 55%, transparent); }

/* retrato fundido: sin tarjeta, mismo negro, y los CUATRO bordes se desvanecen
   para que la figura "emerja" de la oscuridad en vez de cortarse en seco.
   El fondo del JPG es exactamente #090907 (= --hero-bg), así que arriba no hay
   costura; la que se veía era la blusa verde cortada a escuadra contra los
   lados y el pie del marco (object-fit:cover recorta ~8% de ancho por lado). */
.hero-band .portrait { background: var(--hero-bg); border-radius: 0; box-shadow: none; }

/* Laterales: máscara sobre la imagen — transparenta de verdad (deja ver el negro
   de la banda) en vez de pintar un velo encima. Los stops intermedios suavizan
   la curva: con un degradado de dos paradas se nota el quiebre donde arranca. */
.hero-band .portrait__img {
  --edge: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.30) 5%,
      rgba(0, 0, 0, 0.72) 10%,
      rgba(0, 0, 0, 0.94) 14%,
      #000 18%,
      #000 82%,
      rgba(0, 0, 0, 0.94) 86%,
      rgba(0, 0, 0, 0.72) 90%,
      rgba(0, 0, 0, 0.30) 95%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: var(--edge);
          mask-image: var(--edge);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Pie: el mismo negro pintado encima, con curva larga y suave (34% de la altura).
   Se mantiene como capa aparte para no depender de mask-composite. */
.hero-band .portrait::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(0deg,
      var(--hero-bg) 0%,
      color-mix(in srgb, var(--hero-bg) 94%, transparent) 18%,
      color-mix(in srgb, var(--hero-bg) 72%, transparent) 42%,
      color-mix(in srgb, var(--hero-bg) 38%, transparent) 68%,
      color-mix(in srgb, var(--hero-bg) 12%, transparent) 86%,
      transparent 100%);
  z-index: 2; pointer-events: none;
}
.hero-band .portrait__cap { z-index: 3; background: none; }

/* Nav transparente mientras está sobre el hero oscuro (sólo en el tope de la página);
   al hacer scroll (.is-scrolled) recupera el fondo claro y el texto oscuro por defecto */
.brand, .nav__links a, .lang, .lang button {
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* En el tope, la barra comparte el negro del hero (continuo, sin costura).
   No puede ser 'transparent' porque el nav es sticky y reserva espacio: dejaría
   ver la franja clara del body detrás. */
.nav:not(.is-scrolled) {
  background: var(--hero-bg); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav:not(.is-scrolled) .brand { color: var(--paper); }
.nav:not(.is-scrolled) .brand__dot { color: var(--accent-bright); }
.nav:not(.is-scrolled) .nav__links a { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.nav:not(.is-scrolled) .nav__links a::after { background: var(--accent-bright); }
.nav:not(.is-scrolled) .lang { border-color: color-mix(in srgb, var(--paper) 34%, transparent); }
.nav:not(.is-scrolled) .lang button { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.nav:not(.is-scrolled) .lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* ---- Credenciales (Sobre mí) ---- */
/* rejilla de 2 columnas: la columna de valores se alinea al rótulo más ancho */
.creds {
  padding: 0; margin: var(--sp-5) 0 0;
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: var(--sp-5); row-gap: var(--sp-3);
  align-items: baseline;
}
.creds__k {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay);
}
.creds dd { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 560px) {
  /* en pantallas angostas el rótulo se pone encima para no ahogar el valor */
  .creds { grid-template-columns: 1fr; row-gap: 2px; }
  .creds__k { margin-top: var(--sp-4); }
  .creds__k:first-child { margin-top: 0; }
}

/* ---- Testimonios ---- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); align-items: start; }
.quote {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; flex-direction: column;
}
.quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.02rem, 0.94rem + 0.35vw, 1.2rem); line-height: 1.5; color: var(--ink);
}
.quote figcaption {
  margin-top: auto; padding-top: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.quote__avatar {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; border: 1px solid var(--line);
}
.quote__who {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 0.92rem; font-weight: 700; color: var(--clay-deep);
}
.quote__role { font-size: 0.84rem; font-weight: 500; color: var(--ink-2); }
.quote__rel { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* ---- Pilares con imagen de fondo (texto protagonista) ---- */
.pillar--img {
  position: relative; overflow: hidden; border: none; color: #fff;
  min-height: 300px; background-color: var(--ink-bg);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pillar--img::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(16, 22, 25, 0.30) 0%, rgba(12, 55, 66, 0.80) 60%, rgba(6, 40, 46, 0.95) 100%);
}
.pillar--img > * { position: relative; z-index: 1; }
.pillar--img .pillar__num { color: var(--clay-soft); }
.pillar--img .pillar__title { color: #fff; }
.pillar--img p { color: rgba(255, 255, 255, 0.85); }
.pillar--img:hover { box-shadow: var(--sh-lg); }
.pillar--map { background-image: url('../assets/pillar-map.jpg'); }
.pillar--margin { background-image: url('../assets/pillar-margin.jpg'); }
.pillar--control { background-image: url('../assets/pillar-control.jpg'); }

/* ---- Cinta de trayectoria ---- */
.trail { padding-block: clamp(40px, 6vw, 80px); border-block: 1px solid var(--line); background: var(--paper); }
.trail__eyebrow { margin-bottom: var(--sp-6); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  white-space: nowrap; will-change: transform;
  animation: marquee-scroll 36s linear infinite;
}
/* copia del loop: replica el espaciado del track para que el bucle sea continuo */
.marquee__dup { display: inline-flex; align-items: center; gap: inherit; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.55ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); letter-spacing: -0.01em;
  color: var(--ink-2); padding: 4px 2px; transition: color var(--dur) var(--ease);
}
.marquee__item:hover, .marquee__item:focus-visible { color: var(--clay); outline: none; }
.co-ic {
  flex: 0 0 auto; height: 24px; width: 24px; object-fit: contain; border-radius: 5px;
  opacity: 1;  /* colores originales de cada empresa, sin escala de grises */
  transition: transform var(--dur) var(--ease);
}
.marquee__item:hover .co-ic, .marquee__item:focus-visible .co-ic { transform: scale(1.08); }
.marquee__sep { color: var(--clay-soft); font-size: 1.4rem; font-weight: 400; }
.trail__panel { margin-top: var(--sp-6); min-height: 92px; }
.trail__hint { color: var(--muted); font-size: 1rem; }
.trail__card { max-width: 72ch; }
.trail__co { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-4); }
#trailName { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--ink); letter-spacing: -0.01em; }
.trail__role { font-size: 0.9rem; font-weight: 600; color: var(--clay); }
.trail__card p { margin-top: var(--sp-3); color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; }
.trail__actions { display: none; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.trail__btn {
  appearance: none; cursor: pointer; font: inherit;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 8px 14px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.trail__btn:hover, .trail__btn:focus-visible { border-color: var(--ink); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Cinta en móvil: se apaga el auto-scroll y se vuelve una fila de chips táctil */
@media (max-width: 860px) {
  .marquee {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__track {
    animation: none; gap: var(--sp-3);
    padding-inline: var(--gutter); padding-block: 2px;
  }
  .marquee__dup, .marquee__sep { display: none; }
  .marquee__item {
    scroll-snap-align: center;
    font-size: 1.02rem; padding: 9px 14px;
    background: var(--paper); color: var(--ink-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .marquee__item .co-ic { height: 20px; width: 20px; }
  .marquee__item.is-active {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  .marquee__item.is-active .co-ic { filter: none; opacity: 1; }

  .trail__panel { min-height: 0; margin-top: var(--sp-5); }
  .trail__card { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
  .trail__card p { font-size: 1rem; line-height: 1.6; }
  .trail__card p.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  }
  .trail__actions { display: flex; }
}

/* ---- Logos universidades ---- */
.edu-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.edu-logo { height: 56px; width: auto; }
.edu-logo--cesa { height: 80px; }
.edu-logo--esic { height: 64px; }

/* ---- Ajustes móviles finos ---- */
@media (max-width: 560px) {
  /* Nav en una sola línea: el nombre no se parte y el CTA se reduce a "CV" */
  .nav__inner { height: 60px; gap: var(--sp-3); }
  .brand { font-size: 0.98rem; white-space: nowrap; }
  .nav__actions { gap: var(--sp-3); }
  .nav .btn--primary { padding: 9px 14px; font-size: 0.85rem; }
  .nav .btn__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav .btn__short { display: inline; }
  .lang button { padding: 5px 10px; font-size: 0.75rem; }

  /* Hero: aire en vez de muro de texto */
  .hero { padding-block: clamp(32px, 8vw, 64px) clamp(36px, 8vw, 80px); }
  .hero__title { font-size: clamp(2rem, 8.6vw, 2.6rem); max-width: 17ch; letter-spacing: -0.025em; }
  .hero__lead { font-size: 1.02rem; line-height: 1.62; }
  .hero__cta { gap: var(--sp-3); }
  .hero__cta .btn { padding: 12px 18px; }
  .portrait { max-width: 260px; }

  /* Los 3 CTA del hero, en una sola fila y a la misma altura: en tercios iguales.
     Con flex-wrap "CV ampliado" se caía a un segundo renglón y quedaba desalineado.
     El tamaño de letra escala con el viewport para que ninguna etiqueta se salga
     de su tercio (el ancho ya no lo decide el texto, lo decide la rejilla). */
  .hero-band .hero__cta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2); align-items: stretch;
  }
  .hero-band .hero__cta .btn {
    justify-content: center; gap: 0.4ch;
    padding: 12px 6px; font-size: clamp(0.72rem, 3.2vw, 0.9rem);
  }

  /* Métricas: 2×2 en vez de una tira que se desborda */
  /* dos columnas independientes (no rejilla): así un rótulo corto no deja
     hueco esperando a que su vecino de fila termine de ocupar 2 líneas */
  .hero__meta {
    display: block; column-count: 2; column-gap: var(--sp-4);
    margin-top: var(--sp-6); padding-top: var(--sp-5);
  }
  .hero__meta-item { break-inside: avoid; margin-bottom: var(--sp-5); }
  .hero__meta-item:last-child { margin-bottom: 0; }
  .hero__meta-item b { font-size: 1.25rem; }
  .hero__meta-item span { font-size: 0.8rem; line-height: 1.35; }

  .marquee__item { font-size: 0.98rem; }
  /* móvil: los 3 logos en una sola fila y todos a la misma altura */
  .edu-logos { flex-wrap: nowrap; gap: var(--sp-3); }
  .edu-logo,
  .edu-logo--cesa,
  .edu-logo--esic { height: clamp(34px, 11vw, 48px); }
}

/* Pantallas muy angostas (≤340px): el nav se apretaba y provocaba scroll horizontal */
@media (max-width: 340px) {
  .nav__inner { gap: var(--sp-2); }
  .nav__actions { gap: var(--sp-2); }
  .nav .btn--primary { padding: 8px 12px; font-size: 0.8rem; }
  .lang button { padding: 4px 8px; font-size: 0.72rem; }
}