/* ==========================================================================
   QWorkLab · home.css
   Las doce secciones del home. Depende de base.css.
   ========================================================================== */

/* ==========================================================================
   1 · Hero
   ========================================================================== */

.hero {
  padding-block: clamp(44px, 6vw, 80px) clamp(44px, 5vw, 64px);
}

.hero__rotulos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: clamp(24px, 3vw, 32px);
}

.hero__titulo { color: var(--claro); }

/* Único uso de verde señal en tipografía de este tamaño, sobre grafito. */
.hero__acento { color: var(--verde-senal); }

.hero__inferior {
  margin-top: clamp(30px, 3.8vw, 42px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 60px);
}

.hero__izquierda {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 580px;
}

.hero__bajada { color: var(--claro-cuerpo); }

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

/* A 360px las tres etapas caen en dos líneas en vez de recortarse. */
.hero__etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  row-gap: 18px;
}

.hero__etapa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: clamp(12px, 2.2vw, 26px);
  border-left: 1px solid var(--grafito-borde);
}

.hero__etapa:first-child {
  padding-left: 0;
  border-left: none;
}

.hero__etapa-num {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gris-verdoso-tenue);
}

.hero__etapa-nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--claro);
}

.hero__etapa--destacada .hero__etapa-num,
.hero__etapa--destacada .hero__etapa-nombre {
  color: var(--verde-senal);
}

/* ==========================================================================
   2 · Reconocimiento
   ========================================================================== */

.reconocimiento .encabezado { margin-bottom: clamp(32px, 4vw, 44px); }

.reconocimiento__cierre {
  margin-top: clamp(28px, 3vw, 36px);
  max-width: 720px;
  font-family: var(--fuente-titulo);
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--tinta);
  text-wrap: pretty;
}

/* ==========================================================================
   3 · El enfoque
   ========================================================================== */

.enfoque__cabecera {
  --gap: clamp(30px, 4vw, 60px);
}

.enfoque__titular { gap: 22px; }

.enfoque__texto { gap: 20px; }

.enfoque__texto p {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.65;
  color: var(--claro-cuerpo);
  text-wrap: pretty;
}

/* Más contrastado: es la afirmación de la marca. */
.enfoque__afirmacion { color: var(--claro); }

.enfoque__metodologias {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 36px);
  border-top: 1px solid var(--grafito-borde);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.enfoque__nota {
  max-width: 700px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-verdoso-tenue);
  text-wrap: pretty;
}

.enfoque__chips {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   4 · Programas
   Las cinco categorías son la estructura, no un rótulo: una espina vertical
   con los siete programas visibles y el detalle que abre en sitio.
   ========================================================================== */

.programas__encabezado { margin-bottom: clamp(26px, 3vw, 36px); }

.programas__bajada {
  margin-top: 6px;
  max-width: 720px;
}

/* El verde señal no alcanza contraste como texto sobre papel. */
.acento-verde {
  color: var(--verde-profundo);
  font-style: normal;
}

.categorias {
  display: flex;
  flex-direction: column;
}

/* Flex, no grilla con auto-fit: con dos hijos las columnas se repartirían
   50/50 y quedaría un hueco muerto entre la etapa y su primer programa. */
.categoria {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 36px);
  padding-block: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--papel-borde);
}

.categorias > :last-child { border-bottom: 1px solid var(--papel-borde); }

.categoria.is-abierta { border-top-color: var(--grafito); }

.categoria__espina {
  flex: 0 0 auto;
  width: min(100%, 258px);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.categoria__punto {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  flex: 0 0 auto;
  background: var(--papel-borde-fino);
}

.categoria.is-abierta .categoria__punto { background: var(--grafito); }

.categoria__id {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.categoria__num {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.categoria.is-abierta .categoria__num { color: var(--verde-profundo); }

.categoria__label {
  font-family: var(--fuente-titulo);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--tinta);
}

.categoria__nota {
  max-width: 220px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-verdoso);
}

.categoria__cuerpo {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Pieza de programa --------------------------------------------------- */

.piezas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pieza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  background: var(--papel-alt);
  border: 1px solid var(--papel-borde);
}

.pieza__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--tinta);
}

/* En minúsculas, a diferencia del resto de los rótulos en mono. */
.pieza__plazo {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gris-verdoso);
}

.pieza__signo {
  font-family: var(--fuente-mono);
  font-size: 14px;
  line-height: 1;
  color: var(--verde-profundo);
}

.pieza.is-abierta {
  background: var(--grafito);
  border-color: var(--grafito);
}

.pieza.is-abierta .pieza__nombre { color: var(--claro); }
.pieza.is-abierta .pieza__plazo,
.pieza.is-abierta .pieza__signo { color: var(--verde-senal); }

/* --- Bloque de detalle --------------------------------------------------- */

.detalle {
  background: var(--grafito);
  padding: clamp(20px, 2.6vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}

.detalle[hidden] { display: none; }

.detalle__campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detalle__rotulo {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-verdoso-tenue);
}

.detalle__rotulo--acento { color: var(--verde-senal); }

.detalle__texto {
  font-size: clamp(16px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--claro);
  text-wrap: pretty;
}

.detalle__texto--tenue { color: var(--claro-cuerpo); }

.programas__cierre {
  margin-top: clamp(28px, 3vw, 36px);
  max-width: 760px;
}
/* ==========================================================================
   5 · Qué cambia en tu empresa
   La inversión de color es intencional: el estado actual se ve en papel
   apagado y el resultado en grafito con acento, para que el "después"
   pese más que el "hoy".
   ========================================================================== */

.cambia { border-top: 1px solid var(--papel-borde-alt); }

.cambia__grilla {
  --gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

/* --- Selector ------------------------------------------------------------ */

.cambia__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--papel-borde);
}

.cambia__cabecera .rotulo-min { letter-spacing: 0.16em; }

.cambia__filas {
  display: flex;
  flex-direction: column;
}

.cambia__fila {
  display: grid;
  grid-template-columns: 30px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: clamp(15px, 1.8vw, 19px) clamp(12px, 1.6vw, 16px);
  border-bottom: 1px solid var(--papel-borde);
  background: transparent;
  text-align: left;
  transition: background 0.2s ease;
}

.cambia__fila:hover { background: var(--papel-hover); }

.cambia__fila-num {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gris-verdoso);
}

.cambia__fila-titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--tinta-cuerpo2);
}

.cambia__fila-flecha {
  font-family: var(--fuente-titulo);
  font-size: 15px;
  text-align: right;
  color: transparent;
}

.cambia__fila.is-activa,
.cambia__fila.is-activa:hover { background: var(--grafito); }

.cambia__fila.is-activa .cambia__fila-num,
.cambia__fila.is-activa .cambia__fila-flecha { color: var(--verde-senal); }

.cambia__fila.is-activa .cambia__fila-titulo {
  font-weight: 600;
  color: var(--claro);
}

/* --- Panel --------------------------------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--papel-borde);
}

.panel__barra {
  height: 3px;
  background: var(--papel-rayado);
}

.panel__barra-relleno {
  height: 3px;
  background: var(--verde-senal);
  transition: width 0.35s ease;
}

.panel__rotulo {
  letter-spacing: 0.2em;
  font-size: 10px;
}

.panel__rotulo--claro { color: var(--verde-senal); }
.panel__rotulo--claro::after { background: var(--grafito-linea); }

.panel__hoy {
  background: var(--papel);
  padding: clamp(22px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel__situacion {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--tinta-suave);
}

.panel__costo {
  font-family: var(--fuente-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.panel__palanca {
  background: var(--papel-alt);
  padding: 9px clamp(22px, 2.8vw, 30px);
  display: flex;
  align-items: center;
  gap: 12px;
  border-block: 1px solid var(--papel-borde);
}

.panel__palanca-flecha {
  font-family: var(--fuente-titulo);
  font-size: 17px;
  line-height: 1;
  color: var(--verde-profundo);
}

.panel__palanca-nombre {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

.panel__despues {
  background: var(--grafito);
  padding: clamp(22px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.panel__resultado {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--claro);
}

.panel__ganancia {
  font-family: var(--fuente-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde-senal);
}

.panel__nav {
  background: var(--grafito-superficie);
  padding: 12px clamp(20px, 2.6vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--grafito-linea);
}

.panel__nav-boton {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-verdoso-tenue);
  padding-block: 8px;
}

.panel__nav-boton:hover { color: var(--claro); }

/* --- Qué recibes --------------------------------------------------------- */

.recibes {
  margin-top: clamp(36px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recibes__grilla { --min: 280px; }

.recibes__tarjeta {
  background: var(--papel);
  padding: clamp(22px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recibes__cierre {
  margin-top: 8px;
  max-width: 720px;
}

/* ==========================================================================
   6 · Cómo trabajamos
   Regla de color deliberada: esta sección no usa grafito. El enfoque,
   Programas y Por qué nosotros ya cargan bloques oscuros; un cuarto
   saturaba la página. La jerarquía se resuelve con borde y tono.
   ========================================================================== */

.metodo .encabezado { margin-bottom: clamp(26px, 3vw, 36px); }

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 1.6vw, 16px);
}

.paso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 26px);
  text-align: left;
  background: transparent;
  border: 1px solid var(--papel-borde);
}

.paso__num {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

/* El nombre mantiene el mismo color en los dos estados: lo que cambia es
   el borde y el fondo. */
.paso__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--tinta);
}

.paso__linea {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-verdoso);
}

.paso.is-activo {
  background: var(--papel-alt);
  border: 2px solid var(--grafito);
}

.paso.is-activo .paso__num { color: var(--verde-profundo); }
.paso.is-activo .paso__linea { color: var(--tinta-suave); }

/* --- Banda de detalle ---------------------------------------------------- */

.banda-paso {
  background: var(--papel-alt);
  border: 1px solid var(--papel-borde);
  border-top: none;
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.banda-paso__principal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.banda-paso__rotulo {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

.banda-paso__rotulo--tenue {
  letter-spacing: 0.16em;
  color: var(--gris-verdoso);
}

.banda-paso__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--tinta);
  text-wrap: balance;
}

.banda-paso__detalle {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.banda-paso__campos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.banda-paso__campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.banda-paso__campo--separado {
  padding-top: 16px;
  border-top: 1px solid var(--papel-borde);
}

.banda-paso__valor {
  font-size: clamp(16px, 1.8vw, 17px);
  line-height: 1.6;
  color: var(--tinta-cuerpo2);
  text-wrap: pretty;
}

.banda-paso__valor--suave { color: var(--tinta-suave); }
/* ==========================================================================
   7 · Por qué nosotros
   ========================================================================== */

.razones__encabezado { margin-bottom: clamp(30px, 4vw, 44px); }

.razones__grilla {
  --min: 270px;
  --gap: clamp(18px, 2.4vw, 26px);
}

.razon {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--grafito-borde-alt);
}

.razon__titulo {
  font-family: var(--fuente-titulo);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--claro);
}

.razon__texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--claro-cuerpo2);
  text-wrap: pretty;
}

/* La promesa diferenciadora: única columna con el acento. */
.razon--destacada { border-top-color: var(--verde-senal); }
.razon--destacada .razon__titulo { color: var(--verde-senal); }
.razon--destacada .razon__texto { color: var(--claro-cuerpo); }

/* ==========================================================================
   8 · Quiénes somos
   ========================================================================== */

.quienes__grilla {
  --gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Único patrón permitido del sistema. Se reemplaza por la fotografía real. */
.placeholder-foto {
  min-height: clamp(320px, 42vw, 480px);
  background: repeating-linear-gradient(
    135deg,
    var(--papel-alt) 0 10px,
    var(--papel-rayado) 10px 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.placeholder-foto__leyenda {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.quienes__texto { gap: 20px; }

.quienes__nombre {
  font-size: clamp(30px, 4vw, 45px);
  line-height: 1.07;
}

.quienes__nota {
  padding-top: 8px;
  border-top: 1px solid var(--papel-borde);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-verdoso);
}

/* ==========================================================================
   9 · Invitación a la autoevaluación
   ========================================================================== */

.invitacion { padding-block: clamp(48px, 6vw, 80px); }

.invitacion__grilla {
  --gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.invitacion__texto { gap: 18px; }

.invitacion__bajada {
  max-width: 520px;
  font-size: var(--cuerpo-dest);
  line-height: 1.6;
  color: var(--sobre-verde);
  text-wrap: pretty;
}

.invitacion__accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.invitacion__nota {
  font-family: var(--fuente-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sobre-verde-rotulo);
}

/* ==========================================================================
   10 · Recursos
   Sección deliberadamente pequeña: los artículos apoyan, no son el
   argumento. Padding vertical de casi la mitad de una sección normal.
   ========================================================================== */

.recursos { padding-block: clamp(44px, 5vw, 68px); }

.recursos__encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(20px, 2.4vw, 26px);
}

.recursos__titular { gap: 10px; }

.recursos__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tinta);
  text-wrap: balance;
}

.recursos__nota {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

/* El gap de 1px sobre el fondo del borde dibuja las divisiones como
   líneas capilares. */
.recursos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--papel-borde);
  border-block: 1px solid var(--papel-borde);
}

.recurso {
  background: var(--papel);
  padding: clamp(20px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
}

.recurso:hover { background: var(--papel-hover); }

.recurso__meta {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

/* El flex:1 alinea el pie de las tres tarjetas. */
.recurso__titulo {
  flex: 1;
  font-family: var(--fuente-titulo);
  font-size: clamp(17px, 1.9vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tinta);
  text-wrap: pretty;
}

.recurso__leer {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

/* ==========================================================================
   11 · Preguntas frecuentes
   Acordeón de una sola columna, una respuesta abierta a la vez.
   ========================================================================== */

.faq { border-top: 1px solid var(--papel-borde-alt); }

.faq__encabezado { margin-bottom: clamp(24px, 3vw, 34px); }

.faq__lista {
  display: flex;
  flex-direction: column;
  max-width: 860px;
}

.faq__bloque {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--papel-borde);
}

.faq__lista > :last-child { border-bottom: 1px solid var(--papel-borde); }

.faq__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(18px, 2.2vw, 22px);
  text-align: left;
}

.faq__pregunta {
  font-family: var(--fuente-titulo);
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--tinta);
  text-wrap: pretty;
}

.faq__signo {
  flex: 0 0 auto;
  font-family: var(--fuente-mono);
  font-size: 17px;
  line-height: 1;
  color: var(--verde-profundo);
}

.faq__cabecera[aria-expanded="true"] .faq__signo { color: var(--grafito); }

.faq__respuesta {
  max-width: 680px;
  padding-bottom: clamp(20px, 2.4vw, 26px);
  font-size: clamp(16px, 1.8vw, 17px);
  line-height: 1.65;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* El enlace vive al pie, fuera del acordeón, para que el clic de abrir y
   el de navegar no compitan. */
.faq__pie {
  margin-top: clamp(26px, 3vw, 34px);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-verdoso);
}

/* ==========================================================================
   12 · Contacto
   ========================================================================== */

.contacto__grilla {
  --gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

.contacto__izquierda { gap: 20px; }

.contacto__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--claro);
}

.contacto__bajada {
  max-width: 460px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--claro-cuerpo);
  text-wrap: pretty;
}

.contacto__indicador {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
  border-block: 1px solid var(--grafito-borde);
}

.contacto__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-senal);
  flex: 0 0 auto;
}

.contacto__indicador-texto {
  font-family: var(--fuente-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--claro);
}

.contacto__datos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 6px;
}

.contacto__dato {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contacto__valor {
  font-size: 17px;
  color: var(--claro);
}

a.contacto__valor:hover { color: var(--verde-senal); }

/* --- Formulario ---------------------------------------------------------- */

.formulario {
  background: var(--grafito-superficie);
  padding: clamp(26px, 3.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.formulario__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 16px;
}

/* --- Opciones exclusivas -------------------------------------------------
   Radios reales bajo una casilla dibujada: funciona sin JavaScript y el
   teclado lo recorre con las flechas, como cualquier grupo de radio. */

.opciones {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* El legend no es un ítem flex del fieldset: el gap del contenedor no lo
   separa de la lista. La distancia va en su propio margen. */
.opciones > .campo__etiqueta { margin-bottom: 10px; }

.opciones__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opcion {
  display: block;
  cursor: pointer;
}

.opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.opcion span {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  padding: 13px 15px;
  background: var(--grafito);
  border: 1px solid var(--grafito-borde-alt);
  color: var(--claro-cuerpo);
}

.opcion input:checked + span {
  background: var(--verde-senal);
  border-color: var(--verde-senal);
  color: var(--grafito);
}

.opcion input:focus-visible + span {
  outline: 2px solid var(--verde-senal);
  outline-offset: 3px;
}

.formulario__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 4px;
}

.formulario__enviar {
  padding: 17px 30px;
  font-size: 17px;
}