/* =========================================================================
   home.css — Decisiones LOCAL de la Home.

   docs/DESIGN_SYSTEM.md declara explícitamente que estas composiciones NO
   deben convertirse en componentes globales:

     - superficie invertida PyME (existe una sola vez en toda la V1);
     - bloque completo de proyecto;
     - email destacado;
     - composición About 1fr / 392px;
     - largos concretos de pautas.

   Nada de lo que ya resuelve un patrón Sistema se duplica acá.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Largos de pauta — Local
   Rango del contrato: 24–240px en desktop, 24–60px en mobile.
   El largo es ritmo visual, no categoría: no se deriva matemáticamente
   entre breakpoints ni codifica una escala semántica.

   Criterio de composición propuesto: segmento largo en las tres secciones
   que sostienen el argumento (01 la idea, 03 el método, 07 la invitación) y
   segmento corto en las de inventario (02, 04, 06). Pendiente de
   aprobación visual humana.
   ------------------------------------------------------------------------- */
.seccion--hero {
  --pauta-seg: 60px;
}
.seccion--proyectos {
  --pauta-seg: 36px;
}
.seccion--problema {
  --pauta-seg: 48px;
}
.seccion--servicios {
  --pauta-seg: 30px;
}
.seccion--proceso {
  --pauta-seg: 44px;
}
.seccion--sobre-mi {
  --pauta-seg: 26px;
}
.seccion--contacto {
  --pauta-seg: 56px;
}

@media (min-width: 900px) {
  .seccion--hero {
    --pauta-seg: 240px;
  }
  .seccion--proyectos {
    --pauta-seg: 96px;
  }
  .seccion--problema {
    --pauta-seg: 168px;
  }
  .seccion--servicios {
    --pauta-seg: 72px;
  }
  .seccion--proceso {
    --pauta-seg: 132px;
  }
  .seccion--sobre-mi {
    --pauta-seg: 56px;
  }
  .seccion--contacto {
    --pauta-seg: 200px;
  }
}

/* -------------------------------------------------------------------------
   Hero — Local
   ------------------------------------------------------------------------- */
.hero__titulo {
  max-width: 16ch;
}

.hero__bajada {
  margin-top: var(--s5);
  color: var(--text-secondary);
}

.hero__apoyo {
  margin-top: var(--s4);
}

.hero__acciones {
  margin-top: var(--s6);
}

@media (min-width: 900px) {
  .hero__titulo {
    max-width: 20ch;
  }

  .hero__acciones {
    margin-top: var(--s7);
  }
}

/* -------------------------------------------------------------------------
   Bloque completo de proyecto — Local
   Nombre + estado + descripción + acciones + evidencia.
   NO es un componente de proyecto global. Sin cards.
   ------------------------------------------------------------------------- */
.proyectos__intro {
  margin-top: var(--s4);
  color: var(--text-secondary);
}

.proyecto {
  padding-top: var(--s7);
  border-top: 1px solid var(--border);
}

.proyecto + .proyecto {
  margin-top: var(--s8);
}

.proyecto__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s4);
  row-gap: var(--s2);
}

.proyecto__descripcion {
  margin-top: var(--s4);
  color: var(--text-secondary);
}

.proyecto__acciones {
  margin-top: var(--s5);
}

.proyecto__evidencia {
  margin-top: var(--s7);
}

/* D-025: en mobile Varmo muestra una sola captura grande en lugar de dos
   pequeñas. Ambas son vistas alternativas de la misma afirmación, así que
   el contrato autoriza elegir una representativa. */
.proyecto__evidencia .evidencia__figura--alterna {
  display: none;
}

@media (min-width: 900px) {
  .proyecto__evidencia .evidencia__figura--alterna {
    display: block;
  }
}

/* -------------------------------------------------------------------------
   Superficie invertida PyME — Local
   Existe UNA sola vez en toda la V1 y no se reutiliza en otras páginas sin
   una nueva decisión. Sobre tiza nunca se usa --accent: el énfasis y el
   foco usan --accent-on-inverted.
   ------------------------------------------------------------------------- */
.pyme {
  margin-top: var(--s8);
  padding: var(--s6) var(--s5);
  background-color: var(--inverted-bg);
  color: var(--inverted-text);
  --focus-color: var(--accent-on-inverted);
}

.pyme__cuerpo {
  margin-top: var(--s4);
  color: var(--inverted-text-secondary);
}

.pyme__pregunta,
.pyme__cierre {
  margin-top: var(--s4);
  color: var(--inverted-text);
  font-weight: 700;
}

.pyme__humano {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--inverted-border);
  color: var(--inverted-text-secondary);
}

@media (min-width: 900px) {
  .pyme {
    padding: var(--s8) var(--s7);
  }
}

/* -------------------------------------------------------------------------
   About 1fr / 392px — Local
   ------------------------------------------------------------------------- */
.about {
  display: grid;
  gap: var(--s7);
}

.about__texto > * + * {
  margin-top: var(--s4);
}

.about__credenciales {
  min-width: 0;
}

.about__titulo-credenciales {
  margin-bottom: var(--s4);
  color: var(--text-secondary);
}

.about__aclaracion {
  margin-top: var(--s4);
  color: var(--text-secondary);
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: 1fr 392px;
    gap: var(--s8);
  }

  /* En esta composición la columna de término no dispone de 260px. */
  .about__credenciales .definicion__fila {
    grid-template-columns: 1fr;
    row-gap: var(--s2);
  }
}

/* -------------------------------------------------------------------------
   Email destacado — Local
   No es un componente global.
   ------------------------------------------------------------------------- */
.contacto__cuerpo > * + * {
  margin-top: var(--s4);
}

.email-destacado {
  display: inline-block;
  margin-top: var(--s6);
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  transition: color var(--duration-interaction) var(--easing);
}

.email-destacado:hover {
  color: var(--accent);
}

.contacto__canales {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s6);
}

@media (max-width: 899.98px) {
  .contacto__canales a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .email-destacado {
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   Ritmo interno de secciones — Local
   ------------------------------------------------------------------------- */
.seccion__cuerpo {
  margin-top: var(--s4);
  color: var(--text-secondary);
}

.seccion__cuerpo > * + * {
  margin-top: var(--s4);
}

.bloque {
  margin-top: var(--s6);
}