/* ══════════════════════════════════════════════════════════════
   HOME — solo lo de esta página
   ══════════════════════════════════════════════════════════════

   Se carga DESPUÉS de /styles.css, que trae la base compartida.
   Aquí no entra nada reutilizable: si algo lo va a usar otra
   página, su sitio es la base.

   Orden de capítulos, el de CLAUDE.md §4:
     1 · Héroe
     2 · Portfolio
     3 · Qué construimos
     4 · Cómo trabajamos          (lista agrupada, no tarjetas)
     5 · ¿Encajamos?
     6 · Formulario
     7 · CTA final
   ══════════════════════════════════════════════════════════════ */


/* ═══ 1 · HÉROE ═══════════════════════════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  /* 100svh y no 100vh: en móvil la barra del navegador se recoge y
     100vh deja un salto que corta el CTA */
  min-height: 84svh;
  padding-block: calc(72px + var(--space-16)) var(--section-y-tight);
}

/* El único glow de esta pantalla. Va detrás del contenido y no
   intercepta el ratón. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(0, 229, 115, .10), transparent 68%),
    radial-gradient(40% 40% at 50% 0%, rgba(0, 229, 115, .06), transparent 70%);
}

/* Retícula de puntos: textura, no dibujo */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232, 236, 240, .16) 1px, transparent 1px);
  background-size: 32px 32px;
  /* Se desvanece hacia abajo para que no compita con el texto */
  -webkit-mask-image: radial-gradient(65% 60% at 50% 38%, #000, transparent 78%);
  mask-image: radial-gradient(65% 60% at 50% 38%, #000, transparent 78%);
  opacity: .45;
}

/* Dos columnas: el titular manda y la cara acompaña. Antes esto era
   una sola columna centrada; con la ficha de Alejandro al lado, el
   texto se alinea a la izquierda y deja de bailar. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  width: 100%;
}

.hero__headline {
  /* El límite va en el titular y no en el contenedor: 1ch se mide con
     la fuente del propio elemento, y en el contenedor (16px) daban
     220px de ancho en vez de 900 */
  max-width: 20ch;
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  /* La rampa cierra al crecer: el titular es lo más grande de la web */
  letter-spacing: var(--tracking-h1);
  text-wrap: balance;
}

.hero__sub {
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--color-text-sub);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* ─── La cara y el nombre ─────────────────────────────────────
   Es lo que le faltaba a toda la web: aquí hay una persona.
   El hueco de la foto se queda marcado a propósito. */
.hero__id {
  text-align: center;
  animation: sg-rise var(--duration-enter) var(--ease-emphasis) both;
  animation-delay: 270ms;
}

.hero__photo {
  display: block;
  width: 208px;
  height: 208px;
  max-width: 100%;
  margin-inline: auto;
  object-position: 50% 42%;
  /* La foto es vertical: sin object-fit el navegador la deforma dentro
     del círculo. Recortada ya en cuadrado, el centro cae en la cara. */
  object-fit: cover;
  border-radius: var(--radius-full);
  border: .5px solid rgba(232, 236, 240, .14);
  background: var(--color-bg-elevated);
  /* Aro verde muy bajo en vez de sombra: box-shadow inset no se ve
     sobre un <img>, queda por debajo del propio bitmap. */
  box-shadow: 0 0 0 6px rgba(0, 229, 115, .07);
}

.hero__id-name {
  margin-top: var(--space-4);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
}

.hero__id-role {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-sm);
  color: var(--color-accent);
}

.hero__id-text {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* En una sola columna la ficha de Alejandro sobra: el orden que pidió
   el cliente es titular, cara, frase y botones. Como la cara vive en
   otro contenedor que la frase, los dos contenedores pasan a
   `display: contents` y los cuatro elementos se ordenan con `order`
   dentro del mismo flex. Los nombres de la ficha se ocultan: ya lo
   dice la frase de debajo. */
@media (max-width: 900px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* El hueco lo pone ahora el padre: con `display: contents` el gap
       de .hero__content deja de existir. */
    gap: var(--space-6);
  }

  /* Las cajas desaparecen y sus hijos suben al flex del héroe. */
  .hero__content,
  .hero__id {
    display: contents;
  }

  .hero__headline { order: 1; max-width: 18ch; }
  .hero__photo    { order: 2; }
  .hero__sub      { order: 3; }
  .hero__actions  { order: 4; justify-content: center; }

  .hero__photo {
    width: 148px;
    height: 148px;
    margin-inline: auto;
    box-shadow: 0 0 0 6px rgba(0, 229, 115, .08);
    /* .hero__id ya no genera caja, así que su animación no corre:
       la entrada se la queda la propia foto. */
    animation: sg-rise var(--duration-enter) var(--ease-emphasis) both;
    animation-delay: 100ms;
  }

  /* Ni nombre, ni rol, ni la coletilla: sobran junto al titular. */
  .hero__id-name,
  .hero__id-role,
  .hero__id-text {
    display: none;
  }
}

/* Entrada orquestada: un solo momento, escalonado de 70ms, recorrido
   de 18px y todo dentro del primer medio segundo. Con @keyframes, que
   corren aunque la pestaña esté en segundo plano. */
.hero__headline { animation: sg-rise var(--duration-enter) var(--ease-emphasis) both; animation-delay: 60ms; }
.hero__sub      { animation: sg-rise var(--duration-enter) var(--ease-emphasis) both; animation-delay: 130ms; }
.hero__actions  { animation: sg-rise var(--duration-enter) var(--ease-emphasis) both; animation-delay: 200ms; }

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding-block: calc(72px + var(--space-12)) var(--section-y-tight);
  }

  .hero__headline {
    max-width: none;
  }
}


/* ═══ 2 · PORTFOLIO ═══════════════════════════════════════════ */

.portfolio {
  padding-block: var(--section-y);
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--space-5);
}

/* Tres objetos distintos, cada uno con su testimonio: aquí la tarjeta
   sí se gana el borde y el radio. */
.pcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--sheen);
  transition:
    transform var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default);
}

.pcard:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 236, 240, .18);
}

/* Radio anidado: dentro de una caja de 22 con 24 de relleno */
.pcard__badge {
  align-self: flex-start;
  padding: 5px var(--space-3);
  border-radius: var(--radius-nested-xl);
  background: rgba(232, 236, 240, .06);
  border: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  /* La etiqueta lleva el acento: es lo que dice si el proyecto está
     vivo, y es el dato que más se mira de la tarjeta. */
  color: var(--color-accent);
  background: var(--mat-accent);
  border: var(--hairline-accent);
}

.pcard__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
}

.pcard__desc {
  flex: 1;
  color: var(--color-text-sub);
}

/* El testimonio se separa con un filete, no con otra caja dentro */
.pcard__quote {
  margin: 0;
  padding-top: var(--space-5);
  border-top: var(--hairline);
}

.pcard__quote-text {
  margin: 0;
  font-size: var(--text-small);
  font-style: italic;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-sub);
}

.pcard__quote-text::before { content: "«"; }
.pcard__quote-text::after  { content: "»"; }

.pcard__quote-author {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  /* La etiqueta lleva el acento: es lo que dice si el proyecto está
     vivo, y es el dato que más se mira de la tarjeta. */
  color: var(--color-accent);
  background: var(--mat-accent);
  border: var(--hairline-accent);
}

/* La tarjeta sin cliente detrás se marca y no se disfraza: la nota
   ocupa el lugar del testimonio para que las tres midan igual. */
/* Los enlaces reales del cliente: es lo que convierte el caso en algo
   comprobable. Se pegan al fondo para que las tres tarjetas cierren
   a la misma altura. */
.pcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: var(--hairline);
}

.pcard__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  border: var(--hairline);
  background: rgba(232, 236, 240, .04);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label-sm);
  color: var(--color-text-sub);
  transition:
    color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.pcard__link svg {
  flex: none;
  color: var(--color-accent);
}

.pcard__link:hover {
  color: var(--color-text);
  border-color: rgba(0, 229, 115, .28);
}

/* Lo que aún no está en vivo va en amarillo y se dice, no se disfraza */
.pcard__badge--demo,
.pcard__badge--wip {
  color: var(--color-pop);
  border: .5px solid rgba(255, 213, 61, .28);
  background: rgba(255, 213, 61, .08);
}

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


/* ═══ 3 · QUÉ CONSTRUIMOS ═════════════════════════════════════ */

.servicios {
  padding-block: var(--section-y);
  background: var(--color-bg-raised);
}

.servicios__grid {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

.servicios__grid--duo {
  grid-template-columns: repeat(2, 1fr);
}

/* Tres bloques hermanos: tres columnas que colapsan solas. Sin esto,
   .servicios__grid es una sola columna y las tarjetas salen enormes. */
.servicios__grid--trio {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service-card-wrap {
  display: flex;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-8);
  background: var(--color-bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--sheen);
  transition:
    transform var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default);
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 115, .28);
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-nested-xl);
  background: var(--mat-accent);
  border: var(--hairline-accent);
  box-shadow: var(--sheen-accent);
  color: var(--color-accent);
}

.service-card__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
}

/* La cifra: condensada, tabular y con el «desde» un nivel por debajo */
.service-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.service-card__price-from {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-muted);
}

.service-card__price-amount {
  font-family: var(--font-condensed);
  font-size: 44px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-h2);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.service-card__price-amount--text {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
  color: var(--color-text-sub);
}

.service-card__desc {
  color: var(--color-text-sub);
}

.service-card__features {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
  padding-top: var(--space-2);
}

.service-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-sub);
}

.service-card__feature:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.service-card__feature-icon {
  flex: none;
  margin-top: 4px;
  color: var(--color-accent);
}

.servicios__foot {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-muted);
}

.servicios__foot a {
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-default);
}

.servicios__foot a:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .servicios__grid--duo,
  .servicios__grid--trio {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: var(--space-6);
  }
}


/* ═══ 4 · CÓMO TRABAJAMOS ═════════════════════════════════════ */

/* Cuatro pasos hermanos y comparables: una lista agrupada, no cuatro
   tarjetas iguales. Una caja, filas separadas por filete y ninguna
   sombra por fila. */

.por-que {
  padding-block: var(--section-y);
}

.por-que__grid {
  background: var(--color-bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--sheen);
  overflow: hidden;
}

.reason-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  border-bottom: var(--hairline);
}

.reason-card:last-child {
  border-bottom: 0;
}

.reason-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-normal);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.reason-card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
}

.reason-card__desc {
  margin-top: var(--space-2);
  max-width: 62ch;
  color: var(--color-text-sub);
}

@media (max-width: 640px) {
  .reason-card {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-5);
  }
}


/* ═══ 5 · ¿ENCAJAMOS? ═════════════════════════════════════════ */

.fit {
  padding-block: var(--section-y);
  background: var(--color-bg-raised);
}

.fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

/* Dos columnas planas separadas por un filete. Ni borde ni sombra:
   no son objetos aparte, son dos caras de la misma pregunta. */
.fit__col--no {
  padding-left: var(--space-12);
  border-left: var(--hairline);
}

.fit__col-title {
  margin-bottom: var(--space-6);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
}

.fit__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fit__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-sub);
}

.fit__item > span:last-child {
  min-width: 0;
}

.fit__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: var(--radius-full);
}

.fit__icon--yes {
  background: var(--mat-accent);
  color: var(--color-accent);
  box-shadow: var(--sheen-accent);
}

/* El «no» no necesita un segundo color: con bajar el nivel de tinta se
   entiende igual y la pantalla conserva un solo acento. */
.fit__icon--no {
  background: rgba(232, 236, 240, .06);
  color: var(--color-text-muted);
}

.fit__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--section-y-tight);
  padding-top: var(--space-10);
  border-top: var(--hairline);
  text-align: center;
}

.fit__close-text {
  max-width: 56ch;
  color: var(--color-text-sub);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .fit__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .fit__col--no {
    padding-left: 0;
    padding-top: var(--space-10);
    border-left: 0;
    border-top: var(--hairline);
  }
}


/* ═══ 6 · FORMULARIO ══════════════════════════════════════════ */

.solicitar {
  padding-block: var(--section-y);
}

.solicitar__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

/* El formulario es EL bloque de la sección: se lleva la elevación */
.solicitar .lead-form {
  padding: var(--space-8);
  background: var(--color-bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--sheen);
}

.solicitar__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.guarantee {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--sheen);
}

.guarantee__star {
  flex: none;
  font-size: var(--text-h4);
  line-height: 1.2;
  color: var(--color-accent);
}

.guarantee__title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.guarantee__text {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-sub);
}

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

  /* En móvil el aside va delante: dice qué pasa después de enviar,
     y eso se lee antes de rellenar, no después. */
  .solicitar__aside {
    order: -1;
  }
}

@media (max-width: 640px) {
  .solicitar .lead-form {
    padding: var(--space-5);
  }
}


/* ═══ 7 · VERTICAL: ENTRENADORES ══════════════════════════════ */

/* El único bloque de la home con acento: es la puerta a la landing
   que recibe el tráfico. Todo lo demás de esta página va plano. */
.vert {
  padding-block: var(--section-y-tight);
}

.vert__box {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--mat-accent);
  border: var(--hairline-accent);
  box-shadow: var(--sheen-accent), var(--glow-accent);
}

.vert__title {
  margin-top: var(--space-4);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

/* El acento en una palabra, igual que en el titular de la landing. */
.vert__title em {
  font-style: normal;
  color: var(--color-accent);
}

.vert__sub {
  margin-top: var(--space-4);
  color: var(--color-text-sub);
  max-width: 52ch;
  text-wrap: pretty;
}

.vert__actions {
  margin-top: var(--space-8);
}

/* Lista agrupada: cuatro frases hermanas, un filete entre ellas y
   ninguna caja por frase. */
.vert__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background: rgba(10, 15, 26, .55);
  border: var(--hairline);
  overflow: hidden;
}

.vert__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

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

.vert__item-key {
  flex: none;
  min-width: 62px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
  color: var(--ink-3);
}

.vert__item--good {
  color: var(--color-text);
}

.vert__item--good .vert__item-key {
  color: var(--color-accent);
}

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

@media (max-width: 640px) {
  .vert__actions .btn-primary {
    width: 100%;
  }
}