/* --------------------------------------------------------------------------
   CV Jossue Alcalá — section styles (load AFTER shared Bloqio CSS).
   Terminology (Holoform / LumenEdge / Glassware / Goverless): see styles/tokens.css header.
   Card family (C) Profile Editorial — intent + reserved names: tokens.css “Card taxonomy”.
   IMPORTANT: Do not redefine :root or global body/a here — that would override
   tokens and make the main site header/nav look different from other pages.
   Legacy variable names used below are aliased on body.profile-cv only.
   -------------------------------------------------------------------------- */

/*
 * Section map — (C) Profile Editorial Card family (styles/tokens.css “Card taxonomy”).
 * This route is editorial/professional: do not apply Product Catalog (B) patterns or
 * heavy Holoform Priority (A) effects by default. Prefer restraint: no underglow,
 * pedestal glow, holographic footer, or colored slabs under cards. Polish = white-first,
 * thin borders when needed, restrained motion. Rough order in this file: Hero →
 * impact/metrics → brand strip → section shell → Resumen → Expertise → Experience →
 * Projects → GOS (rail + cards) → CTA final.
 */

/*
 * Step 14 — Reserved future selectors (documentation only; zero runtime effect)
 * (C) Profile Editorial Card — aliases not implemented; do not add to HTML yet.
 * Intended for a future additive migration on /jossuealcala: editorial profile cards,
 * white-first surfaces, professional restraint. Not Product Catalog (B); not heavy
 * Holoform Priority (A) treatment. Avoid: bottom glow, pedestal wash, holographic
 * footer, aggressive LumenEdge as default. Cross-ref: styles/tokens.css “Future alias names”.
 * Reserved class names (no rules below — grep may still find this block):
 *   .bhf-card--profile
 *   .profile-editorial-card
 *   .profile-editorial-card--important
 */

/* =============================================================================
   Profile Editorial Card final layer — scoped to /jossuealcala
   Profile cards only (.bhf-card--profile, .profile-editorial-card hooks). Does not
   target hero / CTA / rail (.bhf-profile-hero, .bhf-profile-cta, .bhf-profile-rail).
   White-first, thin neutral perimeter, no goverless wash slab (bottom-heavy radials),
   no underglow, restrained hover. Same declarations as the approved Step 25 QA pass.
   ============================================================================= */

/* 1) Card shell + 2) goverless ambient on same element (components: ::before) */
body[data-page="jossuealcala"]
  .bhf-card--profile.goverless-surface--card.shine-card {
  /* Subtle neutral depth only; no chromatic base, no “floating” rainbow */
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 88%, transparent) inset,
    0 1px 3px color-mix(in srgb, var(--color-identity) 0.04, transparent),
    0 10px 32px color-mix(in srgb, var(--color-identity) 0.04, transparent);
}

body[data-page="jossuealcala"]
  .bhf-card--profile.goverless-surface--card.shine-card::before {
  /* Neutralize soft iridescent / bottom-weighted goverless radials (see components.css) */
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none;
}

/* 3) ::after — no extra glow layer; suppress spare ::after used for pedestal glow */
body[data-page="jossuealcala"]
  .bhf-card--profile.goverless-surface--card.shine-card::after {
  content: none !important;
  display: none !important;
}

/* 4) Shared hook: same node as .bhf-card--profile; reinforce perimeter without new layout */
body[data-page="jossuealcala"]
  .bhf-card--profile.profile-editorial-card {
  /* Intentionally minimal — paired with .bhf-card--profile rules above */
  border-color: color-mix(in srgb, var(--color-identity) 0.1, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 88%, transparent) inset,
    0 0 0 0.5px color-mix(in srgb, var(--bhf-lumenedge-muted) 7%, transparent),
    0 8px 28px color-mix(in srgb, var(--color-identity) 3.5%, transparent);
}

/* 5) Featured profile project: slightly calmer emphasis, still no chromatic underglow */
body[data-page="jossuealcala"]
  .bhf-card--profile.profile-editorial-card--important {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 90%, transparent) inset,
    0 1px 3px color-mix(in srgb, var(--color-identity) 0.05, transparent),
    0 12px 36px color-mix(in srgb, var(--color-identity) 0.06, transparent);
}

/* 6) Restrained hover — neutral lift, no blue stroke */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body[data-page="jossuealcala"]
    .bhf-card--profile.profile-editorial-card.goverless-card-hover:hover,
  body[data-page="jossuealcala"]
    .bhf-card--profile.profile-editorial-card:hover {
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 color-mix(in srgb, #fff 88%, transparent) inset,
      0 1px 4px color-mix(in srgb, var(--color-identity) 0.05, transparent),
      0 12px 36px color-mix(in srgb, var(--color-identity) 0.07, transparent);
  }
}

body[data-page="jossuealcala"]
  .bhf-card--profile.profile-editorial-card.goverless-card-hover:hover {
  color: var(--color-text);
}

body[data-page="jossuealcala"]
  .bhf-card--profile:hover {
  border-color: color-mix(in srgb, var(--color-identity) 0.12, var(--color-border));
}

body[data-page="jossuealcala"]
  .bhf-card--profile {
  background-color: transparent;
}

/* White-first inner face: drop chromatic “footer” / pedestal wash (pages.css stack) */
body[data-page="jossuealcala"]
  .bhf-card--profile .shine-card__surface {
  background-color: #ffffff;
  background-image:
    radial-gradient(
      100% 72% at 10% 6%,
      color-mix(in srgb, #fff 94%, var(--color-accent-blue) 6%) 0%,
      transparent 58%
    ),
    linear-gradient(
      168deg,
      color-mix(in srgb, #ffffff 97%, var(--bloqio-glass-bg) 3%) 0%,
      #ffffff 100%
    );
  box-shadow:
    var(--bloqio-glass-shadow),
    inset 0 1px 0 color-mix(in srgb, #fff 90%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="jossuealcala"]
    .bhf-card--profile.profile-editorial-card.goverless-card-hover:hover,
  body[data-page="jossuealcala"]
    .bhf-card--profile.profile-editorial-card:hover {
    transform: none;
  }
}

/* LumenEdge fino visible en anillos shine (editorial, no catálogo) */
body[data-page="jossuealcala"] .bhf-card--profile.shine-card .shine-card__ring {
  opacity: 0.88;
  filter: saturate(0.92) brightness(1.02);
}

/* ============================================================================= */

/* --------------------------------------------------------------------------
   Horizontal overflow — /jossuealcala only (not global CSS).
   Cause: .profile-cv__hero uses overflow:visible so the halo is not clipped in the
   section; .profile-cv__hero-halo uses negative horizontal inset (-22%) and
   scale(1.05), so paint extends past the viewport and widens document scrollWidth.
   Fix: clip the document on the X axis for this route only. Hero gradients and
   card/rail styling are unchanged; marquee stays inside .capability-rail__mask.
   -------------------------------------------------------------------------- */
html:has(body[data-page="jossuealcala"]) {
  overflow-x: clip;
}

body[data-page="jossuealcala"].site {
  overflow-x: clip;
}

body[data-page="jossuealcala"] main.site-main {
  max-width: 100%;
}

body.profile-cv {
  --color-text-secondary: var(--color-text-muted);
  --color-text-tertiary: var(--color-text-subtle);
  --content-max: var(--container-max);
  --measure: 42rem;
  --narrow-max: var(--container-narrow);
  --ease-default: var(--ease-out);
  --duration-fast: var(--motion-duration-fast);
  --duration-normal: var(--motion-duration);
  --font-sans: var(--font-body);
  --radius-pill: var(--radius-full);
  --color-bg-hero: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg-soft) 52%,
    var(--color-bg-soft-alt) 100%
  );
  --color-bg-tint-subtle: var(--color-bg-soft-alt);
  --color-fill-primary: var(--color-identity);
  --color-fill-primary-hover: #2f2f2f;
  --shadow-photo: 0 2px 12px rgba(68, 68, 68, 0.08), 0 22px 52px rgba(68, 68, 68, 0.09);
  --shadow-card: var(--color-shadow-card);
  --shadow-card-hover: 0 4px 22px rgba(68, 68, 68, 0.12);
  --shadow-button-primary: 0 1px 2px rgba(68, 68, 68, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-button-primary-hover: 0 3px 12px rgba(68, 68, 68, 0.2);
  --shadow-project: 0 1px 3px rgba(68, 68, 68, 0.06), 0 10px 28px rgba(68, 68, 68, 0.09);
  --shadow-project-hover: 0 4px 18px rgba(68, 68, 68, 0.1), 0 14px 40px rgba(68, 68, 68, 0.1);
  --shadow-project-featured: 0 2px 4px rgba(68, 68, 68, 0.06), 0 14px 40px rgba(68, 68, 68, 0.1);
  --shadow-project-featured-hover: 0 5px 16px rgba(68, 68, 68, 0.1), 0 18px 48px rgba(68, 68, 68, 0.12);
}

/* --------------------------------------------------------------------------
   Hero / profile introduction — (C) Profile Editorial
   Person-led surface (e.g. goverless-hero--minimal, halo); not a product card or
   Product Catalog tile. Marketing “hero cards” and /apps catalog energy do not apply here.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 0;
  border-bottom: none;
}

.hero:not(.goverless-surface) {
  background: var(--color-bg-hero);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.07) 14%,
    rgba(0, 0, 0, 0.07) 86%,
    transparent
  );
  pointer-events: none;
}

.hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(4.75rem, 11vw, 8.75rem) var(--space-6)
    clamp(3.5rem, 7.5vw, 5.75rem);
}

.hero__grid {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-12));
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.68fr);
    gap: clamp(var(--space-12), 4.25vw, var(--space-16));
    align-items: center;
  }
}

/* Typography: shared .eyebrow (components.css) */
.hero__eyebrow {
  margin: 0 0 var(--space-4);
}

.hero__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(var(--text-2xl), 5.5vw, var(--text-3xl));
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.hero__role {
  margin: 0 0 var(--space-6);
  font-size: clamp(var(--text-lg), 1.5vw, var(--text-xl));
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.hero__lead {
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.hero__signals {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: var(--measure);
}

.hero__signal {
  display: inline-block;
  padding: 0.3125rem 0.6875rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--holo-motion-duration-fast) var(--holo-motion-ease),
    background-color var(--holo-motion-duration-fast) var(--holo-motion-ease),
    box-shadow var(--holo-motion-duration-fast) var(--holo-motion-ease),
    transform var(--holo-motion-duration-fast) var(--holo-motion-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__signal:hover {
    transform: translateY(-0.5px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.11);
    box-shadow: 0 4px 14px rgba(68, 68, 68, 0.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__signal:hover {
    transform: none;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__figure {
  margin: 0;
  justify-self: center;
}

@media (min-width: 900px) {
  .hero__figure {
    justify-self: end;
  }
}

.hero__photo-frame {
  position: relative;
  width: min(100%, 304px);
  max-width: 100%;
  border-radius: calc(var(--radius-lg) + 2px);
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #e8eaf0 100%);
  box-shadow:
    var(--shadow-photo),
    0 0 0 0.5px color-mix(in srgb, var(--bhf-lumenedge-muted) 5%, var(--color-border) 40%),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

body[data-page="jossuealcala"] .hero__photo-frame {
  box-shadow:
    var(--shadow-photo),
    0 0 0 0.5px color-mix(in srgb, var(--bhf-lumenedge-muted) 7%, var(--color-border) 35%),
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 44px color-mix(in srgb, var(--color-accent-blue) 0.05, rgba(68, 68, 68, 0.08));
}

.hero__photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.045),
    inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  pointer-events: none;
  z-index: 1;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform var(--duration-normal) var(--ease-default);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__figure:hover .hero__photo {
    transform: scale(1.02);
  }
}

/* jossuealcala CV: portrait framing (cover crop favoring face; not other pages) */
body[data-page="jossuealcala"] .profile-cv__hero .hero__photo {
  object-position: 50% 20%;
}

/* Hero — entrada escalonada (carga inicial) */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero--animate .hero__eyebrow,
  .hero--animate .hero__title,
  .hero--animate .hero__role,
  .hero--animate .hero__lead,
  .hero--animate .hero__signals,
  .hero--animate .hero__actions,
  .hero--animate .hero__figure {
    opacity: 0;
    animation: hero-fade-up 0.68s var(--holo-motion-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
  }

  .hero--animate .hero__eyebrow {
    animation-delay: 0.04s;
  }

  .hero--animate .hero__title {
    animation-delay: 0.09s;
  }

  .hero--animate .hero__role {
    animation-delay: 0.15s;
  }

  .hero--animate .hero__lead {
    animation-delay: 0.21s;
  }

  .hero--animate .hero__signals {
    animation-delay: 0.27s;
  }

  .hero--animate .hero__actions {
    animation-delay: 0.33s;
  }

  .hero--animate .hero__figure {
    animation-delay: 0.25s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--animate .hero__eyebrow,
  .hero--animate .hero__title,
  .hero--animate .hero__role,
  .hero--animate .hero__lead,
  .hero--animate .hero__signals,
  .hero--animate .hero__actions,
  .hero--animate .hero__figure {
    opacity: 1;
    animation: none;
  }
}

/* Impact / metrics / trajectory — (C) Profile Editorial: compact stat cards
   (.shine-card tiles tuned quieter in pages.css). Not catalog or flagship product cards. */
.highlights {
  padding: var(--space-8) var(--space-6) var(--space-10);
  background: color-mix(in srgb, var(--color-bg) 94%, var(--bhf-glass-fill) 6%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--bhf-lumenedge-muted) 3%);
}

body[data-page="jossuealcala"] .highlights {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, #fff 88%, var(--bhf-glass-fill) 12%), transparent 58%),
    color-mix(in srgb, var(--color-bg) 91%, var(--bhf-glass-fill) 9%);
  border-bottom-color: color-mix(in srgb, var(--bhf-lumenedge-muted) 5%, var(--color-border) 80%);
}

.highlights__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.highlights__heading {
  margin: 0 0 var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.highlights__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .highlights__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.highlights__item {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
}

body[data-page="jossuealcala"] .highlights__item .shine-card {
  height: 100%;
}

.highlights__stat {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.highlights__count-value {
  font-variant-numeric: tabular-nums;
}

.highlights__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

/* Brand strip — discrete social proof; (C) Profile Editorial tone (not a product rail). */
.brand-strip {
  padding: var(--space-6) var(--space-6) var(--space-8);
  background: var(--color-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.brand-strip__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.brand-strip__label {
  margin: 0 auto var(--space-5);
  max-width: 28rem;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: var(--leading-snug);
}

.brand-strip__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  align-items: center;
  justify-items: center;
}

@media (min-width: 720px) {
  .brand-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
  }
}

.brand-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 12.5rem;
  margin: 0;
}

.brand-strip__logo {
  display: block;
  width: auto;
  max-width: 10.5rem;
  height: auto;
  max-height: 3rem;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.52;
  transition: opacity var(--duration-fast) var(--ease-default),
    filter var(--duration-fast) var(--ease-default);
}

.brand-strip__logo--farmalisto {
  max-width: 12rem;
  max-height: 3.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .brand-strip__logo {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-strip__item:hover .brand-strip__logo {
    opacity: 0.92;
    filter: grayscale(0.12);
  }
}

/* Main: inherit global Bloqio buttons (Glassware / holo-motion); header/footer stay outside <main> */
main .button {
  min-height: 2.75rem;
}

/* Secciones — vertical rhythm for (C) Profile Editorial blocks (see section map above) */
.section {
  padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
}

.section--tint {
  background: var(--color-bg-tint-subtle);
  border-block: 1px solid rgba(0, 0, 0, 0.055);
}

.section--compact {
  padding-block: clamp(var(--space-10), 4vw, var(--space-12));
}

.section__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.section__inner--narrow {
  max-width: var(--narrow-max);
}

.section__title {
  margin: 0 0 var(--space-8);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.section__title--sm {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-6);
}

.section__intro {
  margin: calc(var(--space-2) * -1) 0 var(--space-10);
  max-width: var(--measure);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.prose p {
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Resumen profesional — (C) Profile Editorial: .shine-card / .shine-card__surface--cv-summary
   (shared rules in pages.css). Editorial summary block, not Product Catalog or app CTA shell. */
body[data-page="jossuealcala"] .profile-cv__summary-panel {
  position: relative;
}

/* Expertise — (C) Profile Editorial cards inside .card-grid--expertise (shine-wrapped in HTML).
   Editorial expertise tiles, not (B) Product Catalog Cards. */
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

body[data-page="jossuealcala"] .card-grid--expertise {
  min-width: 0;
}

body[data-page="jossuealcala"] .card-grid--expertise .card {
  min-width: 0;
}

@media (min-width: 640px) {
  .card-grid--expertise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid--expertise {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.card {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(0, 0, 0, 0.065);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6) var(--space-8);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

@media (prefers-reduced-motion: no-preference) {
  .card:hover {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
  }

  body[data-page="jossuealcala"] .card-grid--expertise .card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }
}

.card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

body[data-page="jossuealcala"] .card-grid--expertise .card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-page="jossuealcala"] .card-grid--expertise .card .shine-card {
  height: 100%;
}

/* Tags */
.subsection-title {
  margin: var(--space-10) 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-list li {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
}

.tag-list--muted li {
  background: transparent;
  color: var(--color-text-tertiary);
  border-color: var(--color-border);
}

/* Experiencia laboral — long-form editorial column; (C) Profile Editorial (text rhythm, not cards). */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 48rem;
  min-width: 0;
  width: 100%;
}

.timeline__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-10) 0;
}

.timeline__item:first-child {
  padding-top: 0;
}

.timeline__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.timeline__card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.timeline__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.timeline__meta {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.timeline__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Selected projects — (C) Profile Editorial / featured profile project cards (.project-card*).
   Showcase for CV context, not product-landing catalog energy. */
.projects {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

@media (min-width: 720px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .project-card--featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-card--featured {
    grid-column: span 2;
  }
}

.project-card {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(0, 0, 0, 0.078);
  border-radius: calc(var(--radius-md) + 2px);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 100%;
  min-width: 0;
  box-shadow: var(--shadow-project);
  transition: border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

@media (prefers-reduced-motion: no-preference) {
  .project-card:hover {
    border-color: rgba(0, 0, 0, 0.11);
    box-shadow: var(--shadow-project-hover);
    transform: translateY(-1px);
  }

  .project-card--featured:hover {
    box-shadow: var(--shadow-project-featured-hover);
    transform: translateY(-1px);
  }
}

.project-card--featured {
  padding: var(--space-10) var(--space-8);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: var(--shadow-project-featured);
}

body[data-page="jossuealcala"] .project-card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-page="jossuealcala"] .project-card .shine-card {
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="jossuealcala"] .project-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }

  body[data-page="jossuealcala"] .project-card--featured:hover {
    transform: none;
    box-shadow: none;
  }
}

.project-card__eyebrow {
  margin: 0 0 var(--space-2);
}

.project-card--featured .project-card__title {
  font-size: clamp(1.3125rem, 2.2vw, 1.5625rem);
  letter-spacing: -0.03em;
}

.project-card--featured .project-card__text {
  max-width: 42rem;
}

.project-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.project-card__role {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.project-card__text {
  margin: 0;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  flex: 1;
}

/* Growth Operating System — (C) Profile Editorial: capability rail + GOS cards (shine-wrapped).
   Profile “stack” narrative, not a product marketing rail or heavy CTA surface. */
.section--gos {
  padding-bottom: clamp(var(--space-16), 7vw, var(--space-24));
}

.gos__intro {
  max-width: 40rem;
  margin-bottom: var(--space-10);
}

body[data-page="jossuealcala"] .section--gos {
  position: relative;
}

/* No section-level chroma wash — it stacked behind cards and read as underglow / pedestal. */
body[data-page="jossuealcala"] .section--gos::before {
  display: none;
}

body[data-page="jossuealcala"] .section--gos .section__inner {
  position: relative;
  z-index: 1;
}

body[data-page="jossuealcala"] .gos-card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-page="jossuealcala"] .gos-card .shine-card {
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="jossuealcala"] .gos-card:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
  }
}

.gos-matrix {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

@media (min-width: 640px) {
  .gos-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }
}

@media (min-width: 1024px) {
  .gos-matrix {
    gap: var(--space-6);
  }
}

.gos-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6) var(--space-10);
  background: var(--color-bg-elevated);
  border: 1px solid rgba(0, 0, 0, 0.065);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

@media (prefers-reduced-motion: reduce) {
  .gos-card {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gos-card:hover {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
  }
}

.gos-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.gos-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
  max-width: 36rem;
}

.gos-chips {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.gos-chip {
  display: inline-block;
  margin: 0;
  padding: 0.3125rem 0.6875rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

@media (prefers-reduced-motion: reduce) {
  .gos-chip {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gos-chip:hover {
    border-color: rgba(0, 0, 0, 0.14);
    color: var(--color-text);
  }
}

/* —— Bloqio shell: CV hero + sticky “En esta página” (not in standalone CV bundle) —— */
.profile-cv__hero {
  position: relative;
  overflow: hidden;
}

/* jossuealcala: dejar de recortar el halo en caja; el aire bajo el subnav va en .hero__inner (abajo) */
body[data-page="jossuealcala"] .profile-cv__hero {
  overflow: visible;
  isolation: isolate;
}

/* jossuealcala: aire bajo el subnav y antes de la siguiente sección (solo CV) */
body[data-page="jossuealcala"] .profile-cv__hero .hero__inner {
  padding-top: clamp(7.5rem, 15vw, 11.5rem);
  padding-bottom: clamp(4.75rem, 9.5vw, 7.5rem);
}

/* Holoform editorial — capa fina: iridiscencia + diagonales (no card; no tapa tipografía) */
body[data-page="jossuealcala"] .profile-cv__hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 42% at 14% 18%, color-mix(in srgb, var(--color-accent-blue) 5.5%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 38% at 88% 22%, color-mix(in srgb, var(--color-accent-orange) 3.8%, transparent), transparent 58%),
    repeating-linear-gradient(
      122deg,
      transparent 0 18px,
      color-mix(in srgb, var(--bhf-lumenedge-muted) 2.8%, transparent) 18px,
      color-mix(in srgb, var(--bhf-lumenedge-muted) 2.8%, transparent) 19px,
      transparent 19px 36px
    );
  opacity: 0.42;
  mix-blend-mode: soft-light;
}

/* No bottom-anchored wash — that read as a pedestal under the hero. Upper-field only, calmer for a profile. */
.profile-cv__hero-halo {
  pointer-events: none;
  position: absolute;
  inset: -18% -15% auto -15%;
  height: min(50vh, 28rem);
  background:
    radial-gradient(
      ellipse 62% 48% at 24% 34%,
      color-mix(in srgb, var(--color-accent-blue, #426fff) 9%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 58% 46% at 78% 36%,
      color-mix(in srgb, var(--color-accent-orange, #f5911e) 6.5%, transparent),
      transparent 56%
    );
  opacity: 0.72;
}

.profile-cv__hero.goverless-surface.goverless-hero--minimal .profile-cv__hero-halo {
  opacity: 0.48;
  height: min(42vh, 22rem);
}

/* jossuealcala: halos más amplios y difusos; menos “caja” con bordes duros al recortar */
  body[data-page="jossuealcala"] .profile-cv__hero .profile-cv__hero-halo,
  body[data-page="jossuealcala"]
  .profile-cv__hero.goverless-surface.goverless-hero--minimal
  .profile-cv__hero-halo {
  inset: -32% -22% -8% -22%;
  height: min(64vh, 40rem);
  max-width: none;
  background:
    linear-gradient(
      118deg,
      transparent 0%,
      color-mix(in srgb, var(--color-accent-blue, #426fff) 4%, transparent) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 90% 58% at 32% 36%,
      color-mix(in srgb, var(--color-accent-blue, #426fff) 8.5%, transparent),
      transparent 62%
    ),
    radial-gradient(
      ellipse 88% 56% at 70% 40%,
      color-mix(in srgb, var(--color-accent-orange, #f5911e) 6.5%, transparent),
      transparent 60%
    );
  filter: blur(18px) saturate(1.06);
  transform: scale(1.05);
  transform-origin: 50% 32%;
  opacity: 0.58;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="jossuealcala"] .profile-cv__hero .profile-cv__hero-halo,
  body[data-page="jossuealcala"]
    .profile-cv__hero.goverless-surface.goverless-hero--minimal
    .profile-cv__hero-halo {
    filter: blur(32px) saturate(1.02);
    transform: none;
    opacity: 0.36;
  }
}

.profile-cv__hero-card {
  position: relative;
  z-index: 1;
}

/* CV — scroll: main header hidden via body.cv-page--header-hidden (see script.js). Subnav stays sticky. */

body.profile-cv .site-header {
  z-index: 50;
  transition:
    max-height var(--motion-duration) var(--ease-out),
    min-height var(--motion-duration) var(--ease-out),
    opacity 200ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  body.profile-cv .site-header {
    transition: none;
  }
}

body.profile-cv.cv-page--header-hidden .site-header {
  max-height: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.profile-cv.cv-page--header-hidden .site-header .site-header__inner {
  min-height: 0 !important;
  height: 0 !important;
  padding-block: 0 !important;
  overflow: hidden;
}

/* Panel nav portaled: no quedar detrás del subnav CV al abrir menú */
body.profile-cv #site-nav.site-nav--portaled.is-open {
  z-index: 130;
}

body.profile-cv.cv-page--header-hidden.site-nav-open {
  overflow: hidden;
}

/* Sin widget «¿Dudas?» en el CV (Builder help) */
body[data-page="jossuealcala"] .bb-help-widget {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* CV — secondary in-page nav: chips glass tipo Galería (sticky bajo header; top:0 si header oculto) */
@keyframes jossue-cv-subnav-in {
  from {
    opacity: 0.9;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Toolbar chrome + sticky: shared with /galería via pages.css (.gallery-toolbar-wrap) */

body[data-page="jossuealcala"] .gallery-toolbar-wrap.cv-subnav--enhanced {
  transition:
    box-shadow var(--holo-motion-duration-fast) var(--holo-motion-ease),
    border-color var(--holo-motion-duration-fast) var(--holo-motion-ease),
    background var(--holo-motion-duration-fast) var(--holo-motion-ease),
    top var(--holo-motion-duration-fast) var(--holo-motion-ease);
}

body[data-page="jossuealcala"] .cv-subnav__toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: 0.1rem;
  box-sizing: border-box;
}

body[data-page="jossuealcala"] .cv-subnav__label {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--font-subheader);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
  line-height: 1.2;
}

body[data-page="jossuealcala"] .cv-subnav__label::after {
  display: none;
}

body[data-page="jossuealcala"] .gallery-toolbar-wrap .gallery-filter-list {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

body[data-page="jossuealcala"] .gallery-filter.gallery-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="jossuealcala"] .gallery-toolbar-wrap.cv-subnav--enhanced {
    animation: jossue-cv-subnav-in 0.5s var(--holo-motion-ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="jossuealcala"] .gallery-toolbar-wrap.cv-subnav--enhanced,
  body[data-page="jossuealcala"] .gallery-filter.gallery-nav__link {
    animation: none;
  }
}

@media (max-width: 43.75rem) {
  body[data-page="jossuealcala"] .gallery-toolbar-wrap.cv-subnav--enhanced {
    padding-block: 0.5rem;
  }

  body[data-page="jossuealcala"] .gallery-filter.gallery-nav__link {
    min-height: 2.1rem;
    padding: 0.48rem 0.82rem;
    font-size: 0.74rem;
  }
}

/* GOS — carril capability con más lectura glass Holoform (solo editorial, no home) */
body[data-page="jossuealcala"] .gos-capability-rail.capability-rail {
  border-block: 1px solid color-mix(in srgb, var(--bhf-glass-border) 50%, var(--bhf-lumenedge-muted) 7%);
  background:
    linear-gradient(188deg, color-mix(in srgb, #fff 32%, transparent) 0%, transparent 48%),
    linear-gradient(180deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 95%, var(--bhf-glass-fill) 5%) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent),
    0 8px 32px color-mix(in srgb, var(--color-identity) 0.04, transparent);
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
}

/* CTA final — conexión Holoform sin volverse marketing duro */
body[data-page="jossuealcala"] .bhf-profile-cta.profile-editorial-cta.shine-card--cta {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 90%, transparent) inset,
    0 0 0 0.5px color-mix(in srgb, var(--bhf-lumenedge-muted) 6%, var(--color-border) 30%),
    0 14px 44px color-mix(in srgb, var(--color-identity) 0.055, transparent);
}

/* Enlaces recursos */
.link-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Final CTA — profile CTA (may use shared .shine-card CTA shell in pages.css): calmer than
   site-wide marketing CTAs where this file applies. Still (C) Profile Editorial intent, not (B). */
.cta-final {
  text-align: center;
}

/* Breathing room above global footer (jossuealcala only; layout.css .site-footer otherwise) */
body[data-page="jossuealcala"] .site-footer {
  padding-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-end: var(--space-16);
}

.cta-final__title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* Legacy .cta-final__text — use .cta-final__copy (shared Bloqio CTA) */
.cta-final__text {
  margin: 0 auto var(--space-10);
  max-width: 34rem;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Motion — reveal al scroll (una vez; requiere html.js) */
.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal--compact:not(.is-visible) {
  transform: translateY(10px);
  transition-duration: 0.48s, 0.48s;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Print */
@media print {
  .site-header,
  .cv-subnav,
  .site-footer,
  .hero__actions,
  .cta-final__actions,
  .cta-final .shine-card__ring,
  .link-actions,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 11pt;
    color: #000;
  }

  .section {
    padding: 1rem 0;
  }

  .hero {
    background: #fff;
  }

  .hero::after {
    display: none;
  }

  .card,
  .project-card,
  .gos-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .gos-chip {
    border-color: #ccc;
  }

  .highlights__item .shine-card__ring {
    display: none !important;
  }

  .highlights__item {
    box-shadow: none;
    border: none;
  }

  .hero__signal:hover {
    background: inherit;
    border-color: #ddd;
  }

  .brand-strip__logo {
    filter: grayscale(1);
    opacity: 0.75;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero--animate .hero__eyebrow,
  .hero--animate .hero__title,
  .hero--animate .hero__role,
  .hero--animate .hero__lead,
  .hero--animate .hero__signals,
  .hero--animate .hero__actions,
  .hero--animate .hero__figure {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   Profile CV — responsive repair final
   Scope: /jossuealcala only
   ========================================================= */

/* 1) Contención: evita desbordes en grid/flex sin hacks globales */
body[data-page="jossuealcala"] .cv-subnav {
  max-width: 100%;
  overflow-x: visible;
  box-sizing: border-box;
}

body[data-page="jossuealcala"] .cv-subnav__toolbar,
body[data-page="jossuealcala"] .gallery-filter-list {
  min-width: 0;
}

body[data-page="jossuealcala"] .site-main,
body[data-page="jossuealcala"] .section__inner,
body[data-page="jossuealcala"] .highlights__inner,
body[data-page="jossuealcala"] .brand-strip__inner {
  min-width: 0;
  box-sizing: border-box;
}

/* 2) Hero — <900px: una columna, menos aire “fantasma” que el shell desktop (768–899px incl.) */
@media (max-width: 56.25rem) {
  body[data-page="jossuealcala"] .profile-cv__hero .hero__inner.profile-cv__hero-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: clamp(var(--space-4), 4.5vw, var(--space-6));
    padding-top: clamp(5.5rem, 10vw, 7.5rem);
    padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
  }

  /* Retrato a la izquierda, copy a la derecha (orden DOM: content, figure) */
  body[data-page="jossuealcala"] .profile-cv__hero .hero__grid {
    /* Columna foto: más presencia + column-gap con aire; una sola fila → row-gap 0 */
    grid-template-columns: minmax(0, clamp(6.75rem, 32vw, 10.5rem)) minmax(0, 1fr);
    row-gap: 0;
    column-gap: clamp(1.125rem, 5.5vw, 2.25rem);
    align-items: start;
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__figure {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__title {
    font-size: clamp(1.375rem, 4.2vw, 1.875rem);
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__role {
    font-size: clamp(1rem, 2.8vw, 1.2rem);
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__lead {
    font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
    max-width: 100%;
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__signals {
    max-width: 100%;
  }
}

/* 2b) Hero — retrato en columna izquierda (≤900px; mismo corte que 56.25rem) */
@media (max-width: 900px) {
  body[data-page="jossuealcala"] .profile-cv__hero .hero__figure {
    justify-self: stretch;
    align-self: start;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__photo-frame {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    width: 100%;
    margin: 0;
    border-radius: clamp(1rem, 3.4vw, 1.5rem);
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__photo {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    margin: 0;
  }
}

/* 3) Hero — móvil: CTAs a ancho completo, ritmo un poco más compacto */
@media (max-width: 48rem) {
  body[data-page="jossuealcala"] .profile-cv__hero .hero__inner.profile-cv__hero-card {
    padding-top: clamp(6rem, 12vw, 7.5rem);
    padding-bottom: clamp(3rem, 6vw, 4.25rem);
  }

  /* Refuerza aire foto ↔ texto en móvil (gana por orden sobre 56.25rem) */
  body[data-page="jossuealcala"] .profile-cv__hero .hero__grid {
    grid-template-columns: minmax(0, clamp(6.5rem, 34vw, 10.75rem)) minmax(0, 1fr);
    row-gap: 0;
    column-gap: clamp(1.25rem, 5.8vw, 2.5rem);
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__actions {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  body[data-page="jossuealcala"] .profile-cv__hero .hero__actions .button {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

/* 4) Métricas: una columna en móvil muy estrecho; secciones con padding lateral cómodo */
@media (max-width: 30rem) {
  body[data-page="jossuealcala"] .highlights__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  body[data-page="jossuealcala"] .highlights {
    padding-inline: var(--space-4);
  }

  body[data-page="jossuealcala"] .section {
    padding-inline: var(--space-4);
  }
}