/* ============================================================
   sections.css — Inside Consulting
   Bloques grandes de página: hero, servicios, impacto, metodología,
   clientes, equipo, CTA final, contacto y pie.
   ============================================================ */

/* ============================================================
   HERO (portada)
   ============================================================ */

/* La portada es una foto a sangre completa con el titular encima,
   como en revolut.com, en vez de una columna de texto y una imagen
   al lado. El fondo oscuro queda de respaldo por si la foto tarda. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 940px);
  /* El padding superior deja sitio a la barra fija (81 px). */
  padding-block: clamp(6.5rem, 11vh, 8.5rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  background: var(--grad-ink);
  color: #fff;
  isolation: isolate;
}

/* En pantallas bajas (portátiles de 13", móviles apaisados) el titular
   gigante no deja sitio al resto. Se recorta un punto para que el CTA
   siga entrando sin hacer scroll. */
@media (max-height: 44rem) and (min-width: 48rem) {
  .hero { --fs-hero: clamp(2.25rem, 4.4vw, 3.5rem); }
}

/* --- Foto de fondo --- */

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Encuadra hacia la parte alta: es donde están las caras. */
  object-position: center 28%;
}

/* Velo que garantiza que el texto blanco se lea sobre cualquier foto.
   Es más denso a la izquierda, que es donde vive el titular, y se
   aclara hacia la derecha para no matar la imagen. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Los porcentajes están calculados para que el texto blanco cumpla
     WCAG AA sobre CUALQUIER foto, incluida una sobreexpuesta: en la
     franja del titular el velo no baja del 86 % de opacidad.
     Si se aclara, hay que volver a medir el contraste. */
  background:
    linear-gradient(100deg,
      rgba(var(--ink-rgb), .96) 0%,
      rgba(var(--ink-rgb), .90) 32%,
      rgba(var(--ink-rgb), .86) 46%,
      rgba(var(--ink-rgb), .44) 70%,
      rgba(var(--ink-rgb), .60) 100%),
    linear-gradient(180deg,
      rgba(var(--ink-rgb), .70) 0%,
      rgba(var(--ink-rgb), .10) 26%,
      rgba(var(--ink-rgb), .10) 60%,
      rgba(var(--ink-rgb), .80) 100%);
}

/* Manchas de color difuminadas al fondo, marca de la casa Revolut. */
.hero-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}

.hero-blob-1 {
  top: -12%;
  right: -8%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--brand-bright-rgb),.85), transparent 68%);
}

.hero-blob-2 {
  bottom: -22%;
  left: -12%;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--brand-rgb),.6), transparent 70%);
  opacity: .38;
}

/* Retícula tenue de fondo. */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  /* Se desvanece hacia los bordes para que no parezca papel milimetrado. */
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 35%, transparent 100%);
  pointer-events: none;
}

/* El titular arriba, el copy y la tarjeta de vidrio abajo: la misma
   composición vertical de Revolut, no dos columnas enfrentadas. */
.hero-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 3.5rem);
  width: 100%;
}

.hero-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.hero-copy { max-width: 34rem; }

.hero-copy > * + * { margin-top: var(--sp-5); }

.hero .badge {
  color: var(--brand-bright);
  background: rgba(var(--brand-bright-rgb), .12);
  border-color: rgba(var(--brand-bright-rgb), .3);
}

/* Sombra muy suave: no se percibe como sombra, pero da un margen
   extra de legibilidad si la foto tiene una zona clara justo detrás. */
.hero .display {
  color: #fff;
  text-shadow: 0 2px 28px rgba(var(--ink-rgb), .55);
}

.hero-sub {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  /* Sobre foto hace falta más claridad que sobre un fondo plano. */
  color: #C9D5D7;
  text-shadow: 0 1px 18px rgba(var(--ink-rgb), .6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Cada línea del titular vive en un contenedor con overflow oculto:
   así el texto "sube" desde abajo al cargar (ver animations.js). */
.line {
  display: block;
  overflow: hidden;
  /* Un pelo de aire para que las tildes y colas no se recorten. */
  padding-block: 0.06em;
}

.line-inner { display: block; }

/* --- Tarjeta de vidrio ---
   El equivalente al panel translúcido que Revolut superpone a la
   persona. Deja ver la foto a través y flota con una sombra larga. */

.hero-glass {
  flex: 0 1 22rem;
  padding: var(--sp-5) var(--sp-6);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  /* El desenfoque es lo que hace que se lea como vidrio y no como un
     rectángulo gris. Si el navegador no lo soporta, el fondo sube de
     opacidad en la regla @supports de abajo. */
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  animation: flotar 7s var(--ease-out) infinite;
}

@supports not (backdrop-filter: blur(1px)) {
  .hero-glass { background: rgba(var(--ink-rgb), .74); }
}

.hero-glass-titulo {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

.hero-glass-datos {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}

.hero-glass .stat-value {
  /* Sobre la foto, el degradado recortado pierde legibilidad:
     aquí el número va en blanco sólido. */
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.hero-glass .stat-label { color: rgba(255, 255, 255, .72); }

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glass { animation: none; }
}

@media (max-width: 47.9375rem) {
  .hero-glass { flex: 1 1 100%; }
  .float-card-label { white-space: normal; }
}

/* ============================================================
   HERO CLARO (portada)
   Fondo blanco con velos turquesa, celeste y lavanda, como las
   láminas del portafolio. El video de marca va enmarcado como
   tarjeta junto al texto: a sangre completa, sus tramos oscuros
   volverían a ensombrecer la portada.
   ============================================================ */

.hero-claro {
  min-height: auto;
  padding-block: clamp(7.5rem, 14vh, 9.5rem) clamp(3rem, 6vw, 5rem);
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 60% at 85% 10%, rgba(var(--brand-bright-rgb), .55), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--brand-tint) 100%);
}

.hero-claro .hero-blob { filter: blur(80px); }
.hero-claro .hero-blob-1 {
  opacity: .35;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .55), transparent 68%);
}
.hero-claro .hero-blob-2 {
  opacity: .30;
  background: radial-gradient(circle, rgba(163, 139, 194, .55), transparent 70%);
}

.hero-claro-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-claro-grid { grid-template-columns: 1fr 1.05fr; }
}

/* Sin esto la columna crece hasta el ancho de su elemento más largo
   y en móviles de 320 px el contenido se sale por la derecha. */
.hero-claro-grid > * { min-width: 0; }

.hero-claro .badge {
  max-width: 100%;
  white-space: normal;
  color: var(--brand-text);
  background: var(--paper);
  border-color: var(--paper-line);
}

.hero-claro .display {
  color: var(--text);
  text-shadow: none;
}

.hero-claro .hero-sub {
  color: var(--text-muted);
  text-shadow: none;
}

.hero-claro .btn-ghost {
  color: var(--brand-text);
  border-color: var(--brand-text);
}

.hero-claro .btn-ghost:hover {
  color: var(--paper);
  background: var(--brand-text);
}

/* Tarjeta del video, con la tarjeta de cifras montada encima. */
.hero-visual {
  position: relative;
  /* Deja sitio para que la tarjeta de cifras solo muerda el borde
     inferior del video, sin taparlo. */
  padding-bottom: 7rem;
}

.hero-video-marco {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}

.hero-video-marco video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-claro .hero-glass {
  position: absolute;
  bottom: 0;
  left: clamp(-2.5rem, -3vw, -1rem);
  background: rgba(255, 255, 255, .92);
  border-color: var(--paper-line);
  box-shadow: var(--shadow-lg);
}

.hero-claro .hero-glass-titulo { color: var(--text-muted); }

.hero-claro .hero-glass .stat-value {
  background: var(--grad-brand-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-claro .hero-glass .stat-label { color: var(--text-muted); }

/* En móvil los botones van a todo el ancho: en 320 px «Agenda una
   conversación» no cabía con el relleno de .btn-lg. */
@media (max-width: 30rem) {
  .hero-claro .hero-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    padding-inline: var(--sp-4);
    white-space: normal;
    text-align: center;
  }
}

/* En móvil la tarjeta de cifras deja de flotar y va debajo del video. */
@media (max-width: 61.99rem) {
  .hero-visual { padding-bottom: 0; }
  .hero-claro .hero-glass {
    position: static;
    margin: -1.5rem var(--sp-4) 0;
    animation: none;
  }
}

/* La barra transparente de la portada va sobre fondo claro:
   logo y enlaces en oscuro desde el principio. */
.page-inicio .nav:not(.is-scrolled) .nav-logo { color: var(--brand-deep); }

.page-inicio .nav:not(.is-scrolled) .nav-link,
.page-inicio .nav:not(.is-scrolled) .nav-toggle { color: var(--gray-900); }

.page-inicio .nav:not(.is-scrolled) .nav-link:hover {
  color: var(--brand-text);
  background: rgba(var(--brand-rgb), .08);
}

.page-inicio .nav:not(.is-scrolled) .nav-link.is-active { color: var(--brand-text); }

/* --- Banda de logos de clientes, justo debajo del hero ---
   Va sobre fondo CLARO a propósito. Cinco de los 25 logos son PNG sin
   canal alfa: sobre fondo oscuro habría que invertirlos y esos cinco
   se convertirían en rectángulos blancos macizos. En claro se ven
   los 25 tal cual, sin filtros. */

.clients-band {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.clients-band-label {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   MARQUESINA DE LOGOS
   Dos listas idénticas en fila se desplazan a la vez; cuando la
   primera termina, la segunda ya ocupa su lugar y el bucle es
   invisible. Todo en CSS, sin librería de carrusel.
   ============================================================ */

.marquee {
  display: flex;
  gap: var(--sp-8);
  overflow: hidden;
  /* Difumina los extremos para que los logos entren y salgan suaves. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
  animation: desplazar 42s linear infinite;
}

@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; overflow-x: auto; }
  .marquee-track { animation: none; }
}

/* Todos los logos caben en la misma caja: así los anchos no dominan
   y los cuadrados no quedan diminutos. */
.marquee img {
  width: 132px;
  height: 52px;
  object-fit: contain;
  /* Los logos van a color pleno, sin gris ni atenuación: son marcas
     reconocibles y su color es parte de la prueba social. */
  transition: transform var(--dur) var(--ease-out);
}

.marquee img:hover { transform: scale(1.06); }

/* ============================================================
   CABECERA DE PÁGINAS INTERNAS
   ============================================================ */

.page-hero {
  position: relative;
  padding-block: clamp(9rem, 16vh, 12rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  background: var(--grad-ink);
  color: #fff;
  isolation: isolate;
}

.page-hero .hero-blob-1 { top: -30%; right: -6%; width: min(46vw, 540px); }

/* La cabecera interior comparte la foto a sangre y el velo del hero
   de la portada (.hero-media / .hero-scrim), pero es bastante más
   baja: el degradado vertical del hero dejaría el centro demasiado
   claro justo donde va el titular. Aquí se aplana y se densifica. */
.page-hero .hero-media img { object-position: center 34%; }

/* Con `object-fit: cover` en una banda ancha el recorte solo actúa en
   vertical, así que no se puede desplazar al sujeto en horizontal.
   Reflejar la foto lo lleva del lado oscuro (donde vive el titular)
   al claro, y así se ve. Solo vale en fotos sin texto. */
.page-hero .hero-media img.espejo { transform: scaleX(-1); }

.page-hero .hero-scrim {
  background:
    linear-gradient(100deg,
      rgba(var(--ink-rgb), .96) 0%,
      rgba(var(--ink-rgb), .92) 38%,
      rgba(var(--ink-rgb), .86) 54%,
      rgba(var(--ink-rgb), .52) 78%,
      rgba(var(--ink-rgb), .66) 100%),
    linear-gradient(180deg,
      rgba(var(--ink-rgb), .78) 0%,
      rgba(var(--ink-rgb), .34) 45%,
      rgba(var(--ink-rgb), .62) 100%);
}

.page-hero h1 { text-shadow: 0 2px 26px rgba(var(--ink-rgb), .55); }

.page-hero .lead { text-shadow: 0 1px 18px rgba(var(--ink-rgb), .6); }

.page-hero-inner { max-width: 48rem; }

.page-hero h1 { margin-top: var(--sp-3); color: #fff; }

/* Más claro que sobre fondo plano: ahora compite con una foto. */
.page-hero .lead { margin-top: var(--sp-5); color: #C9D5D7; }

/* Frase de cierre de Nosotros: el remate del portafolio, destacado. */
.page-hero .about-cierre {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h4, 1.25rem);
  font-weight: var(--fw-bold);
  color: #fff;
}

/* Migas de pan. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
  /* Sobre foto, un gris más apagado se queda en 3.85:1. Este deja
     margen sobre el mínimo AA (4.5:1) para cuando se cambien las
     fotos por otras más claras. */
  color: #C0CDCF;
  text-shadow: 0 1px 14px rgba(var(--ink-rgb), .6);
}

.breadcrumb a:hover { color: var(--brand-bright); }

.breadcrumb .icon { width: .8em; height: .8em; }

/* ============================================================
   SERVICIOS
   ============================================================ */

.service-card .card-icon { margin-bottom: var(--sp-2); }

/* Numeración discreta de la palanca en la esquina. */
.service-card .service-num {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  opacity: .4;
}

.service-card .link-arrow { margin-top: auto; padding-top: var(--sp-4); }

/* Ficha ampliada de servicio (página de servicios). */
.service-detail {
  scroll-margin-top: 7rem;   /* el nav fijo no debe tapar el título */
}

.service-detail + .service-detail { margin-top: clamp(3rem, 6vw, 5rem); }

/* ============================================================
   FRANJA DE IMPACTO (estadísticas)
   ============================================================ */

.stats-band {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.surface-dark .stats-band { background: var(--grad-card); }

/* Separador vertical entre estadísticas, solo cuando caben en fila. */
@media (min-width: 62rem) {
  .stats-band .stat + .stat {
    padding-left: var(--sp-6);
    border-left: 1px solid var(--line);
  }
}

/* ============================================================
   METODOLOGÍA
   ============================================================ */

.method-card { position: relative; }

/* Línea que conecta las fases entre sí en escritorio. */
@media (min-width: 62rem) {
  .method-grid { position: relative; }

  .method-grid::before {
    content: "";
    position: absolute;
    top: 4.6rem;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--brand) 35%, transparent) 18%,
      color-mix(in srgb, var(--brand) 35%, transparent) 82%,
      transparent);
    pointer-events: none;
  }
}

.method-card .entregable {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-tiny);
  color: var(--brand-text);
}

/* Las tres variables de la filosofía de trabajo. */
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.formula-item {
  flex: 1 1 8rem;
  padding: var(--sp-5);
  text-align: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.surface-dark .formula-item { background: var(--grad-card); }

.formula-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--brand-text);
}

.formula-item span { font-size: var(--fs-small); color: var(--text-muted); }

.formula-op {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

/* ============================================================
   CLIENTES
   ============================================================ */

.client-grid { --col-min: 10.5rem; }

/* En móvil, dos logos por fila: con una sola columna eran 24 cajas
   enormes una debajo de otra. */
@media (max-width: 30rem) {
  .client-grid { --col-min: 7.5rem; gap: var(--sp-3); }
  .client-tile { padding: var(--sp-4); }
  .client-tile img { height: 48px; }
}

.client-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.client-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.client-tile img {
  width: 100%;
  max-width: 150px;
  height: 64px;
  object-fit: contain;
  transition: transform var(--dur) var(--ease-out);
}

.client-tile:hover img { transform: scale(1.04); }

/* Cliente sin logo: se muestra el nombre. */
.client-tile .client-name {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-align: center;
  text-wrap: balance;
  color: var(--text-muted);
}

/* ============================================================
   EQUIPO
   ============================================================ */

.member-photo {
  position: relative;
  margin-bottom: var(--sp-5);
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 5;
  background: var(--paper-soft);
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.member:hover .member-photo img { transform: scale(1.04); }

.member-role {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--brand-text);
}

.member-links {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.member-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.member-links a:hover {
  color: var(--brand-contrast);
  background: var(--brand);
  border-color: var(--brand-text);
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */

.quote-card .quote-mark {
  font-size: 2rem;
  color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.quote-card blockquote {
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

.quote-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
}

.quote-author img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

.quote-author cite {
  display: block;
  font-style: normal;
  font-weight: var(--fw-medium);
}

.quote-author span { font-size: var(--fs-small); color: var(--text-muted); }

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-ink);
  color: #fff;
}

.cta-final .hero-blob-1 { top: -45%; right: 8%; width: min(50vw, 620px); opacity: .42; }

.cta-box {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.cta-box h2 { color: #fff; }

.cta-box .lead { color: #C4D0D2; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ============================================================
   CONTACTO
   ============================================================ */

.contact-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .contact-layout { grid-template-columns: .9fr 1.1fr; }
}

.channel {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}

.channel:last-child { border-bottom: 0; }

.channel .card-icon { width: 3rem; height: 3rem; font-size: 1.25rem; }

.channel h3 { font-size: var(--fs-h4); }

.channel a { color: var(--text-muted); transition: color var(--dur) var(--ease-out); }

.channel a:hover { color: var(--brand-text); }

.channel small { display: block; margin-top: var(--sp-1); color: var(--text-muted); }

.form-card {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field-full { grid-column: 1 / -1; }
}

.form-legal {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* ============================================================
   BLOG
   ============================================================ */

/* Filtro por categoría: píldoras sobre la rejilla. */
.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.blog-filtro {
  padding: .5rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition:
    color        var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background   var(--dur) var(--ease-out);
}

.blog-filtro:hover { color: var(--brand-text); border-color: var(--brand); }

.blog-filtro.is-active {
  color: var(--brand-contrast);
  background: var(--grad-brand);
  border-color: transparent;
}

/* Tarjeta de artículo. Toda la tarjeta es clicable: el enlace del
   título se estira sobre ella con ::after. */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    transform    var(--dur) var(--ease-out),
    box-shadow   var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.post-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: var(--shadow-lg);
}

.post-card .post-cover {
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--paper-soft);
}

.post-card .post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-card:hover .post-cover img { transform: scale(1.05); }

.post-card .post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.post-cat {
  padding: .25rem .75rem;
  font-weight: var(--fw-medium);
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: var(--radius-pill);
}

.post-card h3 { font-size: var(--fs-h4); letter-spacing: var(--tracking-normal); }

.post-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.post-card h3 a:focus-visible { outline: none; }
.post-card:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.post-card p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card .post-link { margin-top: auto; padding-top: var(--sp-2); }

.post-card:hover .post-link { gap: var(--sp-3); }

/* Estado vacío del listado. */
.blog-vacio {
  max-width: 34rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.blog-vacio h2 { font-size: var(--fs-h3); }

/* --- Detalle del artículo --- */

.post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: #C9D5D7;
}

.post-hero-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }

.post-detail {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--brand-text);
  transition: gap var(--dur) var(--ease-out);
}

.post-back:hover { gap: var(--sp-3); }

.post-back .is-back { transform: rotate(180deg); }

.post-hero {
  margin-bottom: var(--sp-6);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.post-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.post-resumen {
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--brand);
  color: var(--text);
}

/* Cuerpo del artículo: HTML que llega del editor del panel. Como
   base.css resetea márgenes y viñetas, aquí se devuelven. */
.prose { color: var(--gray-900); font-size: 1.0625rem; line-height: 1.75; }

.prose > * + * { margin-top: var(--sp-5); }

.prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--sp-6); }

.prose a {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose strong { font-weight: var(--fw-bold); }

.prose ul,
.prose ol { padding-left: 1.4em; }

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li { margin-top: var(--sp-2); }

.prose li::marker { color: var(--brand); }

.prose blockquote {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--brand-deep);
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.prose img { border-radius: var(--radius-md); }

.post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.post-cta p {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */

.footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--sp-6);
  background: var(--ink);
  color: var(--text);
}

.footer-top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--ink-line);
}

@media (min-width: 48rem) {
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .footer-brand { grid-column: auto; }
}

.footer-logo { display: block; color: #fff; }

.footer-logo .logo-svg { height: 40px; }

.footer-tagline {
  max-width: 28rem;
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 1.05rem;
  color: var(--text-muted);
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.footer-social a:hover {
  color: var(--brand-contrast);
  background: var(--brand);
  border-color: var(--brand-text);
}

.footer-title {
  margin-bottom: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #fff;
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer-col a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease-out);
}

.footer-col a:hover { color: var(--brand-bright); }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.footer-contact .icon { margin-top: .3em; color: var(--brand-text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}