/* ==========================================================================
   K2 SOLUTIONS — Sistema de diseño
   Sherpas de la Grandeza Empresarial
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Marca */
  --k2-blue:        #00407D;
  --k2-blue-deep:   #0E2841;
  --k2-blue-night:  #071A2B;
  --k2-teal:        #156082;
  --k2-orange:      #FF4F00;
  --k2-orange-soft: #E97132;

  /* Neutros */
  --white:   #FFFFFF;
  --gray-50: #F7F9FB;
  --gray-100:#EEF2F6;
  --gray-200:#DDE4EC;
  --gray-300:#C2CEDA;
  --gray-500:#7B8A9B;
  --gray-700:#41525F;
  --gray-900:#1B2833;

  /* Semánticos */
  --bg:          var(--white);
  --bg-alt:      var(--gray-50);
  --text:        var(--gray-900);
  --text-muted:  var(--gray-700);
  --text-subtle: var(--gray-500);
  --border:      var(--gray-200);
  --accent:      var(--k2-orange);

  /* Tipografía */
  --font-display: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Escala fluida */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 0.8vw + 1.1rem, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 2.8vw + 1.3rem, 3.5rem);
  --fs-4xl:  clamp(2.5rem, 4.5vw + 1.2rem, 4.75rem);

  /* Ritmo */
  --space-section: clamp(4rem, 7vw, 7.5rem);
  --wrap: 1200px;
  --wrap-narrow: 780px;

  --radius:    10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 3px rgba(14, 40, 65, .07), 0 1px 2px rgba(14, 40, 65, .04);
  --shadow-md: 0 8px 24px rgba(14, 40, 65, .09), 0 2px 6px rgba(14, 40, 65, .05);
  --shadow-lg: 0 24px 56px rgba(14, 40, 65, .16), 0 6px 16px rgba(14, 40, 65, .07);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 88px;
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  color: var(--k2-blue-deep);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); font-weight: 400; }
h2 { font-size: var(--fs-3xl); font-weight: 400; }
h3 { font-size: var(--fs-xl); font-weight: 500; }
h4 { font-size: var(--fs-lg); font-weight: 500; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--k2-teal); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--k2-orange); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
li::marker { color: var(--k2-orange); }

:focus-visible {
  outline: 3px solid var(--k2-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--k2-orange); color: #fff;
  padding: .7rem 1.2rem; border-radius: var(--radius);
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* --- 3. Layout ---------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

section { padding-block: var(--space-section); }
.section-tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

.bg-alt   { background: var(--bg-alt); }
.bg-dark  { background: var(--k2-blue-deep); color: rgba(255,255,255,.82); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }
.bg-blue  { background: var(--k2-blue); color: rgba(255,255,255,.86); }
.bg-blue h2, .bg-blue h3 { color: #fff; }

/* --- 3b. Fondos fotográficos con velo de marca --------------------------- */
/* La foto queda como textura al fondo y el velo en azul K2 garantiza que el
   texto siga siendo legible. Sirve sobre cualquier sección oscura o azul.     */
.bg-photo { position: relative; isolation: isolate; overflow: hidden; }
.bg-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.bg-photo::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,26,43,.93) 0%, rgba(7,26,43,.86) 55%, rgba(7,26,43,.95) 100%),
    linear-gradient(105deg, rgba(0,64,125,.55) 0%, rgba(0,64,125,0) 70%);
}
/* Sobre secciones azules el velo es algo más claro, para no perder el color */
.bg-blue.bg-photo::after,
.cta-band.bg-photo::after {
  background:
    linear-gradient(180deg, rgba(14,40,65,.9) 0%, rgba(0,64,125,.84) 50%, rgba(21,96,130,.9) 100%),
    linear-gradient(105deg, rgba(255,79,0,.14) 0%, rgba(255,79,0,0) 60%);
}

.foto-cordada::before  { background-image: url('../img/grupo-escalando.jpg'); }
.foto-sherpa::before   { background-image: url('../img/sherpa-1.jpg'); }
.foto-sherpa2::before  { background-image: url('../img/sherpa-2.jpg'); }
.foto-sherpa3::before  { background-image: url('../img/sherpa-mujer.jpg'); }
.foto-ruta::before     { background-image: url('../img/montana-ruta.jpg'); }
.foto-digital::before  { background-image: url('../img/montana-digital.jpg'); }

/* En móvil se sirve la versión ligera de cada foto */
@media (max-width: 900px) {
  .foto-cordada::before  { background-image: url('../img/grupo-escalando-sm.jpg'); }
  .foto-sherpa::before   { background-image: url('../img/sherpa-1-sm.jpg'); }
  .foto-sherpa2::before  { background-image: url('../img/sherpa-2-sm.jpg'); }
  .foto-sherpa3::before  { background-image: url('../img/sherpa-mujer-sm.jpg'); }
  .foto-ruta::before     { background-image: url('../img/montana-ruta-sm.jpg'); }
  .foto-digital::before  { background-image: url('../img/montana-digital-sm.jpg'); }
}

/* Las dos montañas ya son composiciones muy azules: el velo es más ligero
   para no apagarlas del todo. */
.foto-digital::after,
.foto-ruta::after {
  background:
    linear-gradient(180deg, rgba(7,26,43,.84) 0%, rgba(7,26,43,.74) 50%, rgba(7,26,43,.9) 100%),
    linear-gradient(105deg, rgba(0,64,125,.4) 0%, rgba(0,64,125,0) 70%);
}

/* --- 3c. Fondos gráficos: curvas de nivel y cordillera ------------------- */
/* Alternativa a la fotografía: patrones vectoriales de marca. Pesan unos
   pocos KB, escalan sin perder nitidez y evitan repetir las mismas fotos.   */
.bg-topo { position: relative; isolation: isolate; overflow: hidden; }
.bg-topo::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url('../img/patron-topografia.svg') no-repeat;
  /* Desplazado hacia el margen para que quede como motivo de esquina
     y nunca compita con el texto */
  background-position: right -220px center;
  background-size: auto 150%;
  pointer-events: none;
}
/* Sobre fondos claros, la versión en azul */
.bg-alt.bg-topo::before,
section.bg-topo:not(.bg-dark):not(.bg-blue):not(.cta-band):not(.stats-band)::before {
  background-image: url('../img/patron-topografia-azul.svg');
}

/* Variante anclada a la izquierda, para alternar el ritmo entre secciones */
.bg-topo.topo-izquierda::before {
  background-position: left -240px center;
  transform: scaleX(-1);
}

/* Cordillera al pie de una sección oscura */
.bg-cordillera { position: relative; isolation: isolate; overflow: hidden; }
.bg-cordillera::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: clamp(120px, 18vw, 260px);
  background: url('../img/patron-cordillera.svg') no-repeat bottom center / 100% 100%;
  pointer-events: none;
}
/* Deja aire para que la cordillera no pise el texto */
.bg-cordillera { padding-bottom: calc(var(--space-section) + clamp(40px, 6vw, 90px)); }

@media (max-width: 640px) {
  .bg-topo::before { background-size: auto 110%; background-position: right -120px center; opacity: .8; }
}

/* Marca de agua del logo K2 en las franjas de llamado a la acción */
.cta-band .wrap::after,
.cta-band .wrap-narrow::after {
  content: "";
  position: absolute; right: -60px; bottom: -70px;
  width: 340px; height: 194px;
  background: url('../img/logo-k2-blanco.png') no-repeat center / contain;
  /* Muy tenue: acompaña sin competir con la silueta de cordillera */
  opacity: .055;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 760px) {
  .cta-band .wrap::after,
  .cta-band .wrap-narrow::after { width: 210px; height: 120px; right: -40px; bottom: -40px; }
}

.grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Cuadrícula fija de 2 columnas: cuatro elementos en 2x2, no 3+1 */
.grid-pair { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mini tarjetas dentro de una columna estrecha */
.grid-mini { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Sección con encabezado a la izquierda y contenido a la derecha */
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: start; }
  .split > .split-aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* --- 4. Elementos tipográficos ------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k2-orange);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px;
  background: var(--k2-orange); flex: none;
}
.bg-dark .eyebrow, .bg-blue .eyebrow { color: #FF8A4C; }
.bg-dark .eyebrow::before, .bg-blue .eyebrow::before { background: #FF8A4C; }

/* Cuando el epígrafe lleva icono, éste sustituye a la rayita decorativa */
.eyebrow:has(.eyebrow-icon)::before { display: none; }
.eyebrow {
  gap: .75rem;
  font-size: var(--fs-sm);
}
.eyebrow-icon {
  width: 38px; height: 38px;
  padding: 7px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 11px;
  background: rgba(255, 79, 0, .11);
  box-shadow: inset 0 0 0 1px rgba(255, 79, 0, .18);
}
.bg-dark .eyebrow-icon,
.bg-blue .eyebrow-icon,
.cta-band .eyebrow-icon,
.page-hero .eyebrow-icon {
  background: rgba(255, 138, 76, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 76, .3);
}

/* Iconos del menú */
.nav-icon {
  width: 20px; height: 20px;
  flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  color: var(--k2-orange);
  opacity: .8;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.site-header.over-hero .nav-icon { color: #FF8A4C; }
.nav-link:hover .nav-icon,
.nav-link[aria-current="page"] .nav-icon { opacity: 1; transform: scale(1.08); }

/* En pantallas intermedias el menú se aprieta: los iconos ceden espacio */
@media (min-width: 1081px) and (max-width: 1300px) {
  .nav-list > .nav-item > .nav-link > .nav-icon { display: none; }
}

.dd-icon {
  width: 32px; height: 32px;
  padding: 6px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  color: var(--k2-orange);
  background: rgba(255, 79, 0, .1);
  border-radius: 9px;
  grid-row: 1 / 3;
  margin-top: .1rem;
  transition: background .2s var(--ease);
}
.dropdown a:hover .dd-icon { background: rgba(255, 79, 0, .2); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
}
.bg-dark .lead, .bg-blue .lead { color: rgba(255,255,255,.8); }

.section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }

/* --- 5. Botones --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .015em;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), background .22s var(--ease),
              color .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-primary { background: var(--k2-orange); color: #fff; box-shadow: 0 6px 18px rgba(255,79,0,.28); }
.btn-primary:hover { background: #FF6420; color: #fff; box-shadow: 0 10px 26px rgba(255,79,0,.36); }

.btn-secondary { background: var(--k2-blue); color: #fff; }
.btn-secondary:hover { background: var(--k2-teal); color: #fff; }

.btn-outline { border-color: var(--k2-blue); color: var(--k2-blue); background: transparent; }
.btn-outline:hover { background: var(--k2-blue); color: #fff; }

.btn-ghost-light { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: #fff; color: var(--k2-blue-deep); border-color: #fff; }

.btn-sm { padding: .65rem 1.25rem; font-size: var(--fs-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--k2-orange);
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }

/* --- 6. Header ---------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

/* Header transparente sobre héroes oscuros */
.site-header.over-hero {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.over-hero .nav-link,
.site-header.over-hero .lang-switch a { color: rgba(255,255,255,.9); }
.site-header.over-hero .nav-link:hover { color: #fff; }
.site-header.over-hero .burger span { background: #fff; }
.site-header.over-hero .logo-dark { display: none; }
.site-header.over-hero .logo-light { display: block; }
.logo-light { display: none; }

.header-inner {
  width: min(100% - 2.5rem, 1320px);
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: 56px; width: auto;
  transition: height .25s var(--ease);
}
/* Al hacer scroll el encabezado se compacta un poco, sin perder presencia */
.site-header.scrolled .brand img { height: 48px; }

.main-nav { margin-left: auto; }
.nav-list {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-list > li { margin: 0; position: relative; }

.nav-link {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--gray-700);
  padding: .6rem .8rem;
  border-radius: var(--radius);
  white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover { color: var(--k2-orange); }
.nav-link[aria-current="page"] { color: var(--k2-blue); font-weight: 600; }
.nav-link .chev { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.nav-item.open > .nav-link .chev { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 290px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .6rem;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-item.open .dropdown,
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { margin: 0; }
.dropdown a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: .15rem .75rem;
  align-items: start;
  padding: .65rem .85rem;
  border-radius: var(--radius);
  color: var(--gray-900);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dropdown a span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: .15rem;
}
.dropdown a:hover { background: var(--gray-50); color: var(--k2-blue); }
.dropdown a:hover span { color: var(--gray-700); }

.header-actions { display: flex; align-items: center; gap: .9rem; flex: none; }

.lang-switch {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
}
.lang-switch a { color: var(--gray-500); padding: .2rem .35rem; border-radius: 4px; }
.lang-switch a.active { color: var(--k2-blue); }
.lang-switch .sep { color: var(--gray-300); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 0;
}
.burger span {
  display: block; height: 2px; width: 24px; margin-inline: auto;
  background: var(--k2-blue-deep); border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 7. Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  background: var(--k2-blue-night);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 28%;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,26,43,.72) 0%, rgba(7,26,43,.42) 34%, rgba(7,26,43,.92) 100%),
    linear-gradient(100deg, rgba(0,64,125,.62) 0%, rgba(0,64,125,0) 62%);
}
.hero .wrap { position: relative; z-index: 2; }

.hero-content { max-width: 900px; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 .accent { color: var(--k2-orange); }
.hero-slogan {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--k2-orange);
  margin-bottom: 1.4rem;
}
.hero-lead {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.86);
  max-width: 66ch;
  margin-bottom: 2rem;
}
.hero .btn-row { margin-bottom: 2.5rem; }

.scroll-cue {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.scroll-cue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--k2-orange), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Hero interior (páginas secundarias) */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 6vw, 6rem));
  padding-bottom: clamp(3rem, 5vw, 5rem);
  background: linear-gradient(135deg, var(--k2-blue-deep) 0%, var(--k2-blue) 58%, var(--k2-teal) 100%);
  color: #fff;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; right: -6%; top: -30%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(255,79,0,.24) 0%, transparent 68%);
  pointer-events: none;
}
/* Cabeceras de página con fotografía velada.
   Se usa una variable para la imagen, de modo que el degradado no se repita. */
.page-hero[class*="hero-foto-"] {
  background-image:
    linear-gradient(180deg, rgba(7,26,43,.92) 0%, rgba(0,64,125,.84) 55%, rgba(21,96,130,.9) 100%),
    var(--hero-img);
  background-size: cover, cover;
  background-position: center, center 28%;
  background-repeat: no-repeat, no-repeat;
}
.hero-foto-cordada { --hero-img: url('../img/grupo-escalando.jpg'); }
.hero-foto-sherpa  { --hero-img: url('../img/sherpa-1.jpg'); }
.hero-foto-sherpa2 { --hero-img: url('../img/sherpa-2.jpg'); }
.hero-foto-sherpa3 { --hero-img: url('../img/sherpa-mujer.jpg'); }
.hero-foto-ruta    { --hero-img: url('../img/montana-ruta.jpg'); }
.hero-foto-digital { --hero-img: url('../img/montana-digital.jpg'); }

@media (max-width: 900px) {
  .hero-foto-cordada { --hero-img: url('../img/grupo-escalando-sm.jpg'); }
  .hero-foto-sherpa  { --hero-img: url('../img/sherpa-1-sm.jpg'); }
  .hero-foto-sherpa2 { --hero-img: url('../img/sherpa-2-sm.jpg'); }
  .hero-foto-sherpa3 { --hero-img: url('../img/sherpa-mujer-sm.jpg'); }
  .hero-foto-ruta    { --hero-img: url('../img/montana-ruta-sm.jpg'); }
  .hero-foto-digital { --hero-img: url('../img/montana-digital-sm.jpg'); }
}

/* Las dos montañas son composiciones ya muy azules y de bajo contraste:
   admiten un velo más suave sin comprometer la lectura. */
.page-hero.hero-foto-ruta,
.page-hero.hero-foto-digital {
  background-image:
    linear-gradient(180deg, rgba(7,26,43,.82) 0%, rgba(0,64,125,.7) 55%, rgba(14,40,65,.88) 100%),
    var(--hero-img);
}

.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { max-width: 68ch; color: rgba(255,255,255,.85); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-size: var(--fs-xs); color: rgba(255,255,255,.6);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: rgba(255,255,255,.35); }
.breadcrumb a { color: rgba(255,255,255,.78); }
.breadcrumb a:hover { color: var(--k2-orange); }

/* --- 8. Franja de resultados -------------------------------------------- */
.stats-band { background: var(--k2-blue-deep); position: relative; overflow: hidden; }
.stats-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,79,0,.14) 0%, transparent 45%);
}
.stats-band .wrap { position: relative; z-index: 2; }
.stats-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat { text-align: center; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
  display: flex; align-items: baseline; justify-content: center; gap: .05em;
}
.stat-value .unit { color: var(--k2-orange); font-size: .55em; font-weight: 500; }
.stat-label {
  margin-top: .8rem;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

/* --- 9. Tarjetas -------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card::before {
  content: "";
  position: absolute; left: 0; top: 26px; bottom: 26px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--k2-orange);
  opacity: 0; transform: scaleY(.4); transform-origin: center;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.card:hover::before { opacity: 1; transform: scaleY(1); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-muted); font-size: var(--fs-sm); }
.card .link-arrow { margin-top: auto; padding-top: 1.2rem; }

.card-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,64,125,.10), rgba(255,79,0,.13));
  color: var(--k2-blue);
  margin-bottom: 1.2rem;
  flex: none;
}
.card-icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.card:hover .card-icon { color: var(--k2-orange); }

.card-num {
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--k2-orange);
  letter-spacing: .1em;
  margin-bottom: .8rem;
}

/* Tarjeta de unidad de negocio */
.unit-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  color: #fff;
  background: var(--k2-blue-deep);
  isolation: isolate;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.unit-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform .6s var(--ease);
}
.unit-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,26,43,.25) 0%, rgba(7,26,43,.85) 62%, rgba(7,26,43,.96) 100%);
  transition: background .32s var(--ease);
}
.unit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.unit-card:hover::before { transform: scale(1.06); }
.unit-card:hover::after {
  background: linear-gradient(180deg, rgba(0,64,125,.32) 0%, rgba(7,26,43,.86) 60%, rgba(7,26,43,.97) 100%);
}
/* Fondos de cada unidad de negocio. Las rutas son relativas al CSS. */
.unit-card.u1::before { background-image: url('../img/sherpa-1.jpg'); }
.unit-card.u2::before { background-image: url('../img/sherpa-mujer.jpg'); }
.unit-card.u3::before { background-image: url('../img/montana-ruta.jpg'); }
.unit-card.u4::before { background-image: url('../img/grupo-escalando.jpg'); }

.unit-card h3 { color: #fff; font-size: var(--fs-xl); margin-bottom: .45rem; }
.unit-card p { color: rgba(255,255,255,.78); font-size: var(--fs-sm); margin-bottom: 1.1rem; }
.unit-card .link-arrow { color: var(--k2-orange); }

/* Lista de servicios */
.service-list { display: grid; gap: 1px; background: var(--border); border-block: 1px solid var(--border); }
.service-item {
  background: #fff;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.75rem);
  display: grid; gap: .35rem 1.75rem;
  grid-template-columns: minmax(0, 1fr);
  transition: background .25s var(--ease);
}
.service-item:hover { background: var(--gray-50); }
.service-item h3 {
  font-size: var(--fs-lg); margin: 0;
  display: flex; align-items: flex-start; gap: .75rem;
}
.service-item h3::before {
  content: ""; flex: none;
  width: 9px; height: 9px; margin-top: .55em;
  border-radius: 2px;
  background: var(--k2-orange);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.service-item:hover h3::before { transform: rotate(135deg) scale(1.15); }
.service-item p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

@media (min-width: 860px) {
  .service-item { grid-template-columns: minmax(280px, 34%) 1fr; align-items: start; }
}

/* --- 10. Ruta de ascenso ------------------------------------------------ */
.route { display: grid; gap: 0; counter-reset: step; }
.route-step {
  position: relative;
  padding: 0 0 clamp(2rem, 3.5vw, 3rem) clamp(3.25rem, 5vw, 4.5rem);
  counter-increment: step;
}
.route-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.15em;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--k2-orange);
  color: var(--k2-orange);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  z-index: 2;
}
.route-step::after {
  content: "";
  position: absolute; left: 23px; top: 46px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--k2-orange), var(--gray-200));
}
.route-step:last-child { padding-bottom: 0; }
.route-step:last-child::after { display: none; }
.route-step h3 { margin-bottom: .35rem; }
.route-step p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 62ch; }

.bg-dark .route-step::before { background: var(--k2-blue-deep); }
.bg-dark .route-step::after { background: linear-gradient(180deg, var(--k2-orange), rgba(255,255,255,.15)); }
.bg-dark .route-step p { color: rgba(255,255,255,.75); }

/* --- 11. Industrias ----------------------------------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.filter-btn {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500;
  padding: .6rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--gray-700);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.filter-btn:hover { border-color: var(--k2-blue); color: var(--k2-blue); }
.filter-btn[aria-pressed="true"] {
  background: var(--k2-blue); border-color: var(--k2-blue); color: #fff;
}

.industry-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
/* Fondo sofisticado: degradado suave de marca en la esquina superior derecha
   más una retícula finísima. Da profundidad sin restar legibilidad. */
.industry-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(115% 90% at 100% 0%, rgba(0,64,125,.09) 0%, rgba(0,64,125,.03) 42%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #FFFFFF 0%, #FBFCFD 55%, #F4F7FA 100%);
  transition: opacity .3s var(--ease);
}
.industry-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(0,64,125,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,64,125,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 85% at 100% 0%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 85% at 100% 0%, #000 0%, transparent 68%);
  opacity: .85;
  transition: opacity .3s var(--ease);
}
.industry-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255,79,0,.35);
}
.industry-card:hover::after { opacity: 1; }
.industry-card[hidden] { display: none; }

/* Icono grande de la industria */
.industry-icono {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  background: linear-gradient(140deg, rgba(0,64,125,.11) 0%, rgba(255,79,0,.13) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,64,125,.1);
  color: var(--k2-blue);
  transition: color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.industry-icono svg {
  width: 42px; height: 42px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.industry-card:hover .industry-icono {
  color: var(--k2-orange);
  transform: scale(1.05) rotate(-2deg);
  background: linear-gradient(140deg, rgba(255,79,0,.16) 0%, rgba(0,64,125,.1) 100%);
}

@media (max-width: 640px) {
  .industry-icono { width: 64px; height: 64px; border-radius: 17px; }
  .industry-icono svg { width: 35px; height: 35px; }
}
.industry-tag {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--k2-teal);
  background: rgba(21,96,130,.08);
  padding: .3rem .7rem; border-radius: 999px;
  margin-bottom: .9rem;
}
.industry-card h3 { font-size: var(--fs-lg); margin-bottom: .8rem; }
.industry-card ul { margin: 0; padding-left: 1.1em; }
.industry-card li { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- 12. Acordeón ------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem .25rem;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500;
  color: var(--k2-blue-deep);
  transition: color .2s var(--ease);
}
.accordion-trigger:hover { color: var(--k2-orange); }
.accordion-trigger .plus {
  flex: none; width: 26px; height: 26px; position: relative;
}
.accordion-trigger .plus::before,
.accordion-trigger .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--k2-orange); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.accordion-trigger .plus::before { width: 15px; height: 2px; }
.accordion-trigger .plus::after  { width: 2px; height: 15px; }
.accordion-trigger[aria-expanded="true"] .plus::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.accordion-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.accordion-panel > div { overflow: hidden; }
.accordion-item.open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel .inner { padding: 0 .25rem 1.6rem; color: var(--text-muted); }

/* --- 13. Equipo --------------------------------------------------------- */
.team-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--k2-blue) 0%, var(--k2-teal) 100%);
  background-size: cover; background-position: center top;
  display: grid; place-items: center;
  position: relative;
}
.team-photo .initials {
  font-family: var(--font-display); font-size: 3rem; font-weight: 300;
  color: rgba(255,255,255,.9); letter-spacing: .04em;
}
/* Al añadir la foto real, marca el contenedor con .has-photo para ocultar las iniciales */
.team-photo.has-photo .initials { display: none; }
.team-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.team-body h3 { font-size: var(--fs-lg); margin-bottom: .2rem; }
.team-role {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--k2-orange);
  margin-bottom: .9rem;
}
.team-body p { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- 14. Citas y testimonios -------------------------------------------- */
.quote {
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 3px solid var(--k2-orange);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.4;
  color: var(--k2-blue-deep);
}
.bg-dark .quote, .bg-blue .quote { color: #fff; }

/* --- 15. Logos de clientes ---------------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.logo-tile {
  display: grid; place-items: center;
  aspect-ratio: 11 / 6;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.logo-tile img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  /* Los logos vienen con fondo blanco opaco, así que grayscale/brightness
     teñirían también ese fondo. saturate() sólo afecta al color de la marca
     y deja el blanco intacto. */
  filter: saturate(.55);
  opacity: .9;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-tile:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.logo-tile:hover img { filter: saturate(1); opacity: 1; }

.logo-name {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-500); text-align: center;
  transition: color .25s var(--ease);
}
.logo-name:hover { color: var(--k2-blue); }

/* --- 15b. Tarjetas de caso de éxito -------------------------------------- */
.case-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

.case-logos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  flex-wrap: nowrap;
  padding: 1.5rem clamp(1.5rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--border);
  background: #fff;   /* blanco, para que no se vea el fondo blanco de los logos */
  min-height: 190px;
}
/* Todos los logos viven en un lienzo normalizado de 720x300; al fijar el
   ancho (y no la altura) todos se ven del mismo tamaño en cada tarjeta. */
.case-logos img {
  width: min(100%, 380px); height: auto; aspect-ratio: 720 / 300;
  max-height: none; max-width: none;
  object-fit: contain;
  /* Se muestran a tamaño pleno y en color: son el sello de credibilidad
     de cada caso, no un elemento decorativo. */
  filter: none; opacity: 1;
  transition: transform .3s var(--ease);
}
.case-card:hover .case-logos img { transform: scale(1.04); }

/* Con dos marcas en el mismo caso, cada una ocupa la mitad del ancho. */
.case-logos:has(img + img) img { width: 48%; }

.case-body {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex; flex-direction: column; flex: 1;
}
.case-sector {
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--k2-orange);
  margin-bottom: .7rem;
}
.case-card h3 { font-size: var(--fs-lg); margin-bottom: .6rem; }
.case-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.case-scale {
  font-size: var(--fs-xs); color: var(--text-subtle);
  padding-bottom: .9rem; margin-bottom: .9rem;
  border-bottom: 1px dashed var(--border);
}

/* Métricas dentro de la tarjeta */
.case-metrics {
  display: grid; gap: .85rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: auto; padding-top: 1.35rem;
}
.case-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.6vw, 1.6rem);
  font-weight: 400; line-height: 1.1;
  color: var(--k2-blue);
  letter-spacing: -0.02em;
}
.case-metric span {
  display: block;
  font-size: var(--fs-xs); color: var(--text-subtle);
  line-height: 1.35; margin-top: .25rem;
}

/* Distintivo para el caso presentado internacionalmente */
.case-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  align-self: flex-start;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  color: var(--k2-teal);
  background: rgba(21,96,130,.09);
  border-radius: 999px;
  padding: .35rem .8rem;
  margin-bottom: .9rem;
}

/* --- 15d. Insignias de certificación ------------------------------------- */
.cert-logo {
  width: 104px; height: 104px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 7px;
  margin-bottom: 1.1rem;
  flex: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover .cert-logo { border-color: var(--gray-300); transform: scale(1.03); }

/* Sello de afiliación destacado junto al texto de la sección */
.afiliacion {
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2rem);
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--k2-orange);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  box-shadow: var(--shadow-sm);
}
.afiliacion img {
  width: 128px; height: 128px;
  object-fit: contain;
  flex: none;
}
.afiliacion-texto { flex: 1 1 320px; min-width: 0; }
.afiliacion-texto strong {
  display: block;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--k2-blue-deep);
  margin-bottom: .35rem;
}
.afiliacion-texto p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

@media (max-width: 640px) {
  .afiliacion { flex-direction: column; text-align: center; }
  .afiliacion img { width: 108px; height: 108px; }
  .cert-logo { width: 88px; height: 88px; }
}

/* --- 15e. Videos de testimonio ------------------------------------------- */
/* Fachada: primero se muestra la miniatura y sólo al pulsar se carga el
   reproductor de YouTube. Así la página no arrastra scripts de terceros
   y el video se ve sin salir del sitio. */
.video-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }

.video-fachada {
  position: relative;
  width: 100%;
  /* Los testimonios están grabados en vertical: un marco 4:3 sobre azul de
     marca muestra el cuadro completo sin recortar a ninguno de los dos
     interlocutores. */
  aspect-ratio: 4 / 3;
  border: 0; padding: 0; margin: 0;
  background: var(--k2-blue-deep);
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.video-fachada img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .5s var(--ease);
}
.video-fachada::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,26,43,.1) 0%, rgba(7,26,43,.5) 100%);
}
.video-card:hover .video-fachada img { transform: scale(1.05); }

.video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--k2-orange);
  box-shadow: 0 10px 30px rgba(255, 79, 0, .45);
  z-index: 2;
  transition: transform .28s var(--ease), background .28s var(--ease);
}
.video-fachada:hover .video-play,
.video-fachada:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.1); background: #FF6420; }
.video-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }

/* El reproductor conserva el marco 4:3 de la miniatura: no hay salto de layout. */
.video-marco { width: 100%; background: #000; }
.video-marco-box { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.video-marco-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-alt {
  display: block; text-align: right;
  padding: .4rem .9rem; background: var(--k2-blue-deep);
  font-size: var(--fs-xs); font-weight: 600; color: #fff; text-decoration: none; letter-spacing: .02em;
}
.video-alt:hover { color: var(--k2-orange-light, #FF8A4C); }

.video-info { padding: 1.25rem clamp(1.15rem, 2vw, 1.6rem) 1.5rem; }
.video-cliente {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--k2-orange);
  margin-bottom: .4rem;
}
.video-info h3 { font-size: var(--fs-base); margin-bottom: 0; }

@media (max-width: 640px) {
  .video-play { width: 60px; height: 60px; }
  .video-play svg { width: 23px; height: 23px; }
  .case-logos { min-height: 150px; }
  .case-logos img { width: min(100%, 300px); }
}


/* --- 15b2. Muros en vivo (YouTube / Facebook) ------------------------------ */
.social-embeds {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  max-width: 1080px; margin-inline: auto;
}
.social-embed {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.social-embed:hover { box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.social-embed-head {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem clamp(1.15rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--border);
}
.social-embed-head h3 { font-size: var(--fs-base); margin: 0 0 .15rem; }
.social-embed-head p  { font-size: var(--fs-xs); color: var(--text-subtle); margin: 0; }
.social-embed-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
}
.social-embed-icon svg { width: 24px; height: 24px; fill: currentColor; }
.social-embed-icon.yt { background: #FF0000; }
.social-embed-icon.fb { background: #1877F2; }
.social-embed-body { position: relative; background: var(--k2-blue-deep); }
.social-embed-body iframe { display: block; width: 100%; border: 0; }
.social-embed-body.yt { aspect-ratio: 4 / 3; flex: 1 0 auto; } /* crece hasta igualar la altura del muro de Facebook */
.social-embed-body.yt iframe { position: absolute; inset: 0; height: 100%; }
.social-embed-body.fb { background: #fff; }
.social-embed-body.fb iframe { height: 640px; }
.social-embed-btn { margin: 1.1rem clamp(1.15rem, 2vw, 1.5rem) 1.25rem; align-self: center; }
.social-embed-icon.li { background: #0A66C2; }
/* Tres muros en fila (Recursos e Inicio) */
.social-embeds-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: none; }
.social-embeds-3 .social-embed-body.fb iframe { height: 560px; }

/* Tarjeta de LinkedIn (sin feed embebible): perfil + newsletters */
.social-embed-body.li { background: #fff; flex: 1 0 auto; padding: 1.25rem clamp(1.15rem, 2vw, 1.5rem) .5rem; }
.li-perfil {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem; border-radius: var(--radius-md, 12px);
  background: var(--gray-50, #F5F7FA); border: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: border-color .25s var(--ease);
}
.li-perfil:hover { border-color: #0A66C2; }
.li-avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background-size: cover; background-position: center top; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(7,26,43,.15);
}
.li-perfil strong { display: block; font-family: var(--font-display); font-weight: 500; color: var(--k2-blue-deep); line-height: 1.2; }
.li-perfil small  { display: block; font-size: var(--fs-xs); color: var(--text-subtle); margin-top: .2rem; line-height: 1.35; }
.li-titulo {
  margin: 1.25rem 0 .4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #0A66C2;
}
.li-lista { list-style: none; margin: 0; padding: 0; }
.li-lista li + li { border-top: 1px solid var(--border); }
.li-lista a {
  display: block; padding: .75rem .25rem; color: inherit; text-decoration: none;
  transition: color .2s var(--ease);
}
.li-lista a:hover strong { color: #0A66C2; }
.li-lista strong { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--k2-blue-deep); }
.li-lista span   { display: block; font-size: var(--fs-xs); color: var(--text-subtle); margin-top: .1rem; }

/* Listas de reproducción (Entrevistas, Conferencias y Club Ejecutivo) */
.playlist {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.playlist:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.playlist-marco { position: relative; aspect-ratio: 16 / 10; background: var(--k2-blue-deep); }
.playlist-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.playlist-info { padding: 1.25rem clamp(1.15rem, 2vw, 1.6rem) 1.5rem; display: flex; flex-direction: column; flex: 1; }
.playlist-info h3 { font-size: var(--fs-lg); margin-bottom: .4rem; }
.playlist-info p  { font-size: var(--fs-sm); color: var(--text-subtle); flex: 1; }
.playlist-info .link-arrow { margin-top: .9rem; }

/* --- 15c. Tarjetas de redes sociales ------------------------------------- */
.red-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .35rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem) 1.25rem;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.red-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }

.red-icono {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 20px;
  margin-bottom: .9rem;
  color: #fff;
  transition: transform .28s var(--ease);
}
.red-card:hover .red-icono { transform: scale(1.06); }
.red-icono svg { width: 34px; height: 34px; fill: currentColor; }

.red-linkedin  { background: #0A66C2; }
.red-youtube   { background: #FF0000; }
.red-x         { background: #14171A; }
.red-tiktok    { background: #010101; }
.red-facebook  { background: #1877F2; }

.red-card h3 { font-size: var(--fs-lg); margin-bottom: .2rem; }
.red-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.red-card .red-handle {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; color: var(--k2-teal);
  margin-top: .55rem;
}

/* Marca pequeña junto al título de cada newsletter */
.card-marca {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: #0A66C2;
  margin-bottom: .8rem;
}
.card-marca svg { width: 17px; height: 17px; fill: currentColor; }

/* --- 16. Formulario ----------------------------------------------------- */
.form-grid { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } }

.field label {
  display: block;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500;
  color: var(--k2-blue-deep);
  margin-bottom: .4rem;
}
.field .req { color: var(--k2-orange); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--text);
  padding: .85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--k2-blue);
  box-shadow: 0 0 0 3px rgba(0,64,125,.12);
}
.field-check { display: flex; align-items: flex-start; gap: .7rem; }
.field-check input { width: auto; margin-top: .25rem; flex: none; }
.field-check label { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); }

.form-note { font-size: var(--fs-xs); color: var(--text-subtle); }

/* Bloque de contacto directo por correo */
.mail-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.mail-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: .35rem;
}
.mail-address {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--k2-blue);
  word-break: break-all;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.mail-address:hover { color: var(--k2-orange); border-bottom-color: var(--k2-orange); }

.mail-help { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: .75rem; }

.mail-checklist { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.mail-checklist li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: .55rem;
}
.mail-checklist li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--k2-orange);
  border-bottom: 2px solid var(--k2-orange);
  transform: rotate(-45deg);
}

/* Calendario embebido (Calendly) */
.calendly-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.calendly-frame iframe {
  display: block;
  width: 100%;
  height: 760px;
  border: 0;
}
@media (max-width: 640px) {
  .calendly-frame iframe { height: 1000px; }
}

/* --- 17. CTA final ------------------------------------------------------ */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--k2-blue-deep) 0%, var(--k2-blue) 55%, var(--k2-teal) 100%);
  color: #fff;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; left: -8%; bottom: -55%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(255,79,0,.28) 0%, transparent 68%);
}
.cta-band .wrap, .cta-band .wrap-narrow { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.92); }

/* Alianzas */
.ally-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  max-width: 1080px; margin-inline: auto;
}
.ally {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.6rem;
  text-align: center;
  background: #fff;
  color: inherit; text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ally:hover { border-color: var(--k2-orange); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(7,26,43,.10); }
.ally img {
  display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 720 / 300;
  object-fit: contain; margin-bottom: 1.1rem;
}
.ally strong {
  display: block;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--k2-blue-deep);
  margin-bottom: .35rem;
}
.ally span { font-size: var(--fs-sm); color: var(--text-subtle); line-height: 1.5; display: block; max-width: 30ch; }

/* --- 18. Footer --------------------------------------------------------- */
.site-footer {
  background: var(--k2-blue-night);
  color: rgba(255,255,255,.62);
  font-size: var(--fs-sm);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}
.footer-grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: span 2; max-width: 340px; } }
.footer-brand img { height: 46px; margin-bottom: 1.2rem; }
.footer-slogan { color: var(--k2-orange); font-family: var(--font-display); font-weight: 500; }

.site-footer h4 {
  color: #fff; font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: rgba(255,255,255,.62); }
.footer-links a:hover { color: var(--k2-orange); }

.social-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
  transition: all .22s var(--ease);
}
.social-row a:hover { background: var(--k2-orange); border-color: var(--k2-orange); color: #fff; transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; }

.footer-bottom {
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.42);
}

/* --- 19. WhatsApp flotante ---------------------------------------------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 26px rgba(37,211,102,.42);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 12px 32px rgba(37,211,102,.55); }
.wa-float svg { width: 30px; height: 30px; }

/* --- 20. Animaciones de entrada ----------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .09s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .27s; }

/* --- 21. Utilidades ----------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 22. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .burger { display: flex; }

  /* backdrop-filter convierte al encabezado en bloque contenedor de sus
     descendientes position:fixed, lo que dejaba el menú lateral atrapado
     dentro de los 70 px del encabezado. Sin él, el panel ocupa la pantalla. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
  }
  .site-header.over-hero { background: transparent; }

  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 auto;
    width: min(400px, 88vw);
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.25rem 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s var(--ease);
    margin-left: 0;
  }
  .main-nav.open { transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav-link { padding: .85rem .6rem; font-size: var(--fs-base); justify-content: space-between; }
  .site-header.over-hero .nav-link { color: var(--gray-700); }
  .site-header.over-hero .nav-link:hover { color: var(--k2-orange); }

  .dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--border);
    border-radius: 0;
    min-width: 0; padding: 0 0 .5rem .75rem; margin-left: .6rem;
    display: none;
  }
  .nav-item.open .dropdown { display: block; }
  .nav-item:hover .dropdown { display: none; }
  .nav-item.open:hover .dropdown { display: block; }
  .dropdown a { padding: .55rem .6rem; }

  .header-actions { margin-left: auto; }
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --header-h: 78px; }
  .brand img { height: 48px; }
  .site-header.scrolled .brand img { height: 44px; }

  /* En el menú lateral sí hay sitio para los iconos */
  .nav-list > .nav-item > .nav-link > .nav-icon { display: block; }
  .nav-link { min-height: 48px; }
  .dropdown a { min-height: 48px; }
  .lang-switch a { padding: .5rem; }
}

@media (max-width: 900px) {
  .grid-pair { grid-template-columns: 1fr; }
  .case-logos { min-height: 160px; }
  .case-logos img { width: min(100%, 340px); }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --header-h: 70px; }

  .brand img { height: 42px; }
  .site-header.scrolled .brand img { height: 38px; }

  .wrap, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }

  .hero { min-height: 86svh; padding-bottom: 3rem; }
  .hero-lead { font-size: var(--fs-base); }

  /* Botones a ancho completo, apilados y con área de toque cómoda */
  .btn { width: 100%; min-height: 52px; padding: .95rem 1.4rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; min-width: 0; }
  .btn-sm { min-height: 44px; }

  .eyebrow-icon { width: 34px; height: 34px; padding: 6px; }
  .eyebrow { font-size: var(--fs-xs); gap: .6rem; }

  .route-step { padding-left: 3rem; }
  .route-step::before { width: 40px; height: 40px; }
  .route-step::after { left: 20px; top: 40px; }

  .wa-float { width: 56px; height: 56px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 28px; height: 28px; }

  /* Los filtros no se apilan: se deslizan en horizontal */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: .35rem;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; scroll-snap-align: start; min-height: 44px; }

  .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-tile { padding: 1rem; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: clamp(2rem, 9vw, 2.75rem); }

  .footer-grid { gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .4rem; }

  .quote { font-size: var(--fs-lg); padding-left: 1.1rem; }
  .mail-address { font-size: 1.375rem; }

  .calendly-frame iframe { height: 1080px; }

  .service-item { padding: 1.25rem 0; }
  .team-photo { aspect-ratio: 1 / 1; }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
  .case-metrics { grid-template-columns: 1fr; }
  .brand img { height: 38px; }
}

/* Ningún bloque ancho debe provocar desplazamiento horizontal */
.wrap, .wrap-narrow, .card, .case-card, .industry-card, .team-card { min-width: 0; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }

/* --- 23. Impresión y accesibilidad -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* "Un % de nuestros honorarios" — el signo % en gran tamaño (resultados.html) */
.pct-destacado { color: #FF8A4C; font-weight: 600; }
.pct-destacado .pct {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.9em; line-height: 0; vertical-align: -0.12em;
  margin-right: .05em;
}

/* Portada de reserva para los reproductores de YouTube (solo al abrir el sitio
   desde el disco, ver initYouTubeEmbeds en main.js) */
.yt-portada {
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: var(--k2-blue-deep); color: #fff; text-decoration: none;
}
.yt-portada img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.yt-portada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,26,43,.05) 0%, rgba(7,26,43,.55) 100%);
}
.yt-portada .video-play { pointer-events: none; }
.yt-portada:hover .video-play { transform: translate(-50%, -50%) scale(1.1); background: #FF6420; }
.yt-aviso {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: .55rem 1rem; text-align: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  background: rgba(7,26,43,.75);
}