/* ==========================================================================
   HOME — estilos específicos
   ========================================================================== */

.hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: var(--sp-7);
}

@media (max-width: 640px) {
  .hero { padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
}

.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: start;
}

/* Primera pantalla en escritorio: el hero (claim + icono + CAUCE +
   definición, todo dentro de .hero__intro) debe verse completo y
   centrado verticalmente al cargar la Home, con .hero__more ("Servicios
   digitales..." + lead + CTAs) empezando justo por debajo del viewport
   inicial — mismo patrón que ya usa el hero móvil (min-height en el
   grid + margin-top:auto en .hero__more), aplicado aquí solo a
   escritorio y sin tocar ningún elemento individual con translateY.
   73px = altura real medida del header sticky. */
/* Primera pantalla en escritorio: el hero (claim + icono + CAUCE +
   definición, todo dentro de .hero__intro) debe verse completo y algo
   más centrado verticalmente al cargar la Home, con .hero__more
   ("Servicios digitales..." + lead + CTAs) empezando por debajo del
   viewport inicial. Se da min-height a .hero__intro (no a .hero__grid
   ni .hero): al ser una fila de grid auto-dimensionada, .hero__intro
   pasa a medir al menos el alto del viewport (menos el header), y su
   align-items:center YA EXISTENTE centra claim y CAUCE+definición
   dentro de esa caja más alta, sin lógica nueva. .hero__more, al ser
   la siguiente fila del grid, queda empujado por debajo automáticamente.
   73px = altura real medida del header sticky. */
@media (min-width: 641px) {
  .hero__intro {
    min-height: calc(100dvh - 73px - 96px);
  }
}

.hero__intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: center;
}

.hero__aside { grid-column: 2; grid-row: 1; }
.hero__main { grid-column: 1; grid-row: 1; }

/* Composición del hero en escritorio — reconstrucción estructural única,
   causas verificadas con getBoundingClientRect() y captura real en
   Chromium/Playwright:

   1) HORIZONTAL: con grid-template-columns:7fr 5fr (original) las
   columnas no son mitades reales del hero, así que centrar cada bloque
   dentro de su propia columna no lo centraba en la mitad geométrica
   real. Se corrige con columnas 1fr 1fr y gap:0, de forma que el
   centro de cada columna coincide con el centro de cada mitad real.

   2) VERTICAL (causa real del bloque derecho desproporcionado): la
   regla base .hero__aside{height:100%} vive dentro de una fila de
   grid auto-dimensionada — su 100% depende de la altura de la fila,
   pero la altura de la fila (auto) depende a su vez del contenido de
   .hero__aside, una referencia circular. El navegador la resuelve
   inflando la fila a ~1400px (medido), y el icono (flex-grow:1 dentro
   de esa fila) se estira a esa altura absurda, empujando "CAUCE" y la
   definición fuera de la pantalla — el bug visible en la captura de
   referencia. Se corrige quitando height:100% en escritorio (el
   bloque icono+nota pasa a medir su alto real de contenido) y dando
   al icono una altura fija razonable en vez de flex-grow:1, formando
   un bloque compacto icono+CAUCE+definición equivalente en peso visual
   al claim. Con eso, align-items:center de .hero__intro centra ambos
   bloques (claim y icono+nota) en la misma fila sin necesidad de
   ningún translateY ni offset manual: sus centros coinciden porque
   ambas cajas ya tienen una altura real y proporcionada. */
.hero__more { grid-column: 1; }

.hero__title {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-5);
  max-width: 17ch;
}

@media (max-width: 640px) {
  .hero__title {
    max-width: 20ch;
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-4);
    /* El tamaño y el desplazamiento vertical (transform) de este mismo
       selector en este mismo breakpoint se definen más abajo, junto al
       resto de ajustes del hero móvil, para no dispersar en dos sitios
       las reglas de un mismo elemento. */
  }
}

.hero__lead { margin-bottom: var(--sp-7); }

.hero__actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

@media (max-width: 640px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .hero__actions .btn--primary { justify-content: center; width: 100%; }
  .hero__actions .btn--ghost { align-self: center; }
}

.hero__aside { position: relative; height: 100%; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }

.hero__mark { flex-grow: 1; opacity: 0.9; }
.hero__mark svg { width: 100%; height: 100%; }
.hero__mark path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Composición del hero en escritorio — reconstrucción estructural única,
   causas verificadas con getBoundingClientRect() y captura real en
   Chromium/Playwright:

   1) HORIZONTAL: con grid-template-columns:7fr 5fr (original) las
   columnas no son mitades reales del hero, así que centrar cada bloque
   dentro de su propia columna no lo centraba en la mitad geométrica
   real. Se corrige con columnas 1fr 1fr y gap:0, de forma que el
   centro de cada columna coincide con el centro de cada mitad real.

   2) VERTICAL (causa real del bloque derecho desproporcionado): la
   regla base .hero__aside{height:100%} vive dentro de una fila de
   grid auto-dimensionada — su 100% depende de la altura de la fila,
   pero la altura de la fila (auto) depende a su vez del contenido de
   .hero__aside, una referencia circular. El navegador la resuelve
   inflando la fila a ~1400px (medido), y el icono (flex-grow:1 dentro
   de esa fila) se estira a esa altura absurda, empujando "CAUCE" y la
   definición fuera de la pantalla — el bug visible en la captura de
   referencia. Se corrige quitando height:100% en escritorio (el
   bloque icono+nota pasa a medir su alto real de contenido) y dando
   al icono una altura fija razonable en vez de flex-grow:1, formando
   un bloque compacto icono+CAUCE+definición equivalente en peso visual
   al claim. Con eso, align-items:center de .hero__intro centra ambos
   bloques (claim y icono+nota) en la misma fila sin ningún translateY
   ni offset manual: sus centros coinciden porque ambas cajas ya tienen
   una altura real y proporcionada.

   Este bloque se define DESPUÉS de las reglas base .hero__aside y
   .hero__mark (más arriba en este archivo) para ganar el cascade con
   igual especificidad — colocarlo antes hacía que la regla base
   posterior (flex-grow:1) ganara y anulara este override. */
@media (min-width: 641px) {
  .hero__intro {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .hero__aside {
    height: auto;
  }
  .hero__mark {
    flex-grow: 0;
    height: 480px;
  }
  .hero__aside-note {
    align-self: center;
  }
  .hero__main {
    text-align: center;
  }
}

.hero__aside-note {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--color-border-strong);
  max-width: 30ch;
  line-height: 1.6;
}

.hero__aside-note__word {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}

.hero__aside-note__def {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* En móvil, .hero__grid pasa a flexbox en columna con
   min-height:calc(100dvh - 65px) (100dvh = viewport útil real, 65px =
   altura del header sticky). .hero__more (lead + CTA) recibe
   margin-top:auto, que lo empuja al final del espacio disponible del
   contenedor SIN estirar ni recortar el contenido protagonista de
   encima — a diferencia de un min-height aplicado directamente al
   bloque protagonista con centrado, que se descartó tras comprobar por
   cálculo que cortaba el H1 en los tamaños más pequeños. Por
   construcción algebraica, .hero__more siempre queda exactamente
   padding-top del hero por debajo del viewport visible, en cualquier
   tamaño de pantalla. El bloque protagonista (icono + definición +
   claim, agrupados en .hero__intro) recibe margin-top/bottom:auto para
   centrarse verticalmente dentro del espacio libre por encima de
   .hero__more, formando una composición compacta y equilibrada en vez
   de quedar pegado al borde superior. Verificado por cálculo explícito
   en 320x568, 375x667, 390x844 y 430x932: el bloque (383px) cabe con
   margen creciente en los 4 casos (120px de margen mínimo), y
   .hero__more sigue quedando exactamente en el límite del viewport en
   los 4 tamaños, sin excepción. */
@media (max-width: 960px) {
  .hero__grid {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 65px); /* resta la altura del header sticky */
  }
  .hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  .hero__aside {
    align-items: center;
    /* separación corta entre definición y claim (el H1 vive fuera de
       .hero__aside, en .hero__main; este margen es el hueco entre
       ambos bloques) */
    margin-bottom: var(--sp-4);
  }
  .hero__aside-note {
    /* separación amplia entre icono y "CAUCE" */
    margin-top: var(--sp-6);
    padding-left: 0;
    border-left: none;
    max-width: none;
    text-align: center;
  }
  .hero__main {
    text-align: center;
    padding-top: 0;
  }
  .hero__more { margin-top: auto; padding-top: var(--sp-6); }
  .hero__mark { height: 132px; flex-grow: 0; } /* icono ligeramente más grande */
  .hero__title { max-width: none; }
}

@media (max-width: 640px) {
  .hero__aside-note br { display: none; } /* en pantallas estrechas la nota debe leerse como línea corrida, no forzar el salto pensado para escritorio */

  .hero__aside {
    margin-bottom: var(--sp-5); /* 24px: colchón real extra para el transform de abajo */
  }

  /* Corrección directa de posición del H1. transform no altera el flujo:
     .hero__aside y .hero__more no se mueven, y el hueco que deja el H1
     al subir queda como espacio vacío debajo de él, antes de .hero__more.

     MAGNITUD VERIFICADA: a 320px de ancho la definición envuelve a 3
     líneas (fuente mono, columna ~280px), dejando solo ~24-32px reales
     entre definición y H1. Un desplazamiento de 2 líneas completas
     (~112px) solapa visualmente el texto de la definición en ese ancho
     — problema de geometría, no de técnica (con margin negativo
     ocurriría igual). Ampliar el hueco real lo suficiente para evitar
     el solape (>=110px) consumiría el margen de seguridad del primer
     viewport en 320x568 y rompería que todo el hero quepa sin scroll.
     Se sube ligeramente de 1.45em a 1.55em (~+5px a 320px, font-size
     mínimo 3.25rem): sigue muy por debajo del umbral de solape (~112px)
     documentado arriba, con margen de seguridad amplio frente a la
     definición en el ancho más estrecho soportado. */
  .hero__title {
    font-size: clamp(3.25rem, 12vw, 4rem);
    transform: translateY(-1.55em);
  }
}

/* ---- Problema / respuesta — dos columnas asimétricas, tensión visual ---- */
.problem-answer__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-8);
}

.problem-answer__col .display-3 { margin-top: var(--sp-4); }
.problem-answer__col--answer .display-3 { color: var(--color-text); }
.problem-answer__col:first-child .display-3 { color: var(--color-text-muted); }

@media (max-width: 860px) {
  .problem-answer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---- Section head reutilizado en varias páginas ---- */
.section-head { max-width: 60ch; margin-bottom: var(--sp-7); }
.section-head .display-2 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }

@media (max-width: 640px) {
  .section-head { margin-bottom: var(--sp-6); }
}

/* ---- Cómo trabajamos — resumen home ---- */
.how-preview__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--sp-8);
  align-items: center;
}

.how-preview__list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-base);
}
.how-preview__list li:last-child { border-bottom: 1px solid var(--color-border); }
.how-preview__list li span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .how-preview__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---- CTA final ---- */
.cta-final__box {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-9) var(--sp-7);
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg-raised) 0%, var(--color-bg) 100%);
}

@media (max-width: 640px) {
  .cta-final__box { padding: var(--sp-7) var(--sp-5); }
  .cta-final__box .display-2 { max-width: 40ch; overflow-wrap: normal; word-break: normal; font-size: clamp(1.85rem, 8vw, 2.75rem); }
}
.cta-final__box .display-2 { max-width: 20ch; margin-inline: auto; margin-bottom: var(--sp-4); letter-spacing: normal; }
.cta-final__box .lead { margin-inline: auto; margin-bottom: var(--sp-7); }

/* Causa (medida): "¿Ordenamos tu presencia digital?" mide ~874px de
   ancho natural a 56px (fuente desktop), pero max-width:20ch (=720px a
   ese tamaño) lo fuerza a partirse en 2 líneas aunque el contenedor
   real disponible mide 1177-1284px según el ancho — sobra espacio de
   sobra. Se amplía max-width solo en escritorio (regla con
   min-width:641px, no toca la regla base que gobierna móvil) para que
   quepa en una línea sin reducir font-size, tal como se pide. */
@media (min-width: 641px) {
  .cta-final__box .display-2 { max-width: 30ch; }
}

@media (max-width: 640px) {
  .cta-final__box .lead { margin-bottom: var(--sp-6); }
  .cta-final__box .btn { margin-top: var(--sp-2); }
}