/* Componentes compartidos por la portada y las páginas de rama. */

/* ---- Firma de rama: marca madre + descriptor (sinapton | suite) ----
   El descriptor va en Space Grotesk 500 color petróleo (sinapsis sobre oscuro), tras una línea vertical color línea. */
/* El horizontal nunca va a menos de 180 px (regla de la marca); si no cabe, el descriptor pasa abajo. */
.firma { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.firma img { width: 180px; height: auto; }
.firma-descriptor {
  padding-left: 14px; border-left: 2px solid var(--snp-linea);
  font: 500 1.5rem/1 var(--snp-font-display); color: var(--snp-petroleo); letter-spacing: -0.01em;
}
.oscuro .firma-descriptor { color: var(--snp-sinapsis); border-left-color: rgb(213 220 225 / 0.35); }

/* ---- Ramas en la portada: cuatro paneles de una placa ----
   No son tarjetas idénticas: cada panel tiene su firma, su promesa y lo que resuelve, con un enlace a su página. */
.ramas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rama {
  position: relative; display: grid; gap: 16px; align-content: start;
  padding: 32px; border: 1px solid var(--snp-linea); border-radius: var(--snp-radius-md); background: var(--snp-blanco);
}
/* Pad de conexión en la esquina: el mismo anillo con que terminan las trazas del símbolo. */
.rama::before {
  content: ''; position: absolute; top: 28px; right: 28px; width: 14px; height: 14px;
  border: 3px solid var(--snp-linea); border-radius: 50%;
}
.rama:hover::before, .rama:focus-within::before { border-color: var(--snp-petroleo); }
.rama-promesa { font: 600 1.35rem/1.3 var(--snp-font-display); letter-spacing: -0.01em; max-width: 30ch; }
.rama ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--snp-acero); }
.rama li { position: relative; padding-left: 22px; }
/* Viñeta en forma de ramal: un tramo horizontal que termina en un punto. */
.rama li::before {
  content: ''; position: absolute; left: 0; top: .78em; width: 12px; height: 2px; background: var(--snp-petroleo);
}
.rama li::after {
  content: ''; position: absolute; left: 11px; top: calc(.78em - 2px); width: 6px; height: 6px; border-radius: 50%; background: var(--snp-petroleo);
}
.rama-enlace { justify-self: start; margin-top: 8px; font-weight: 600; }

/* ---- Filas de capacidades (páginas de rama) ----
   Cada fila se separa con un divisor-traza: una línea con chaflán de 45° y un pad, en lugar de una tarjeta más. */
.capacidades { display: grid; }
.capacidad {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px 48px;
  padding-block: 32px; border-top: 1px solid var(--snp-linea);
}
.capacidad::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 72px; height: 10px;
  background: linear-gradient(var(--snp-petroleo), var(--snp-petroleo)) 0 0 / 56px 2px no-repeat;
  clip-path: polygon(0 0, 56px 0, 64px 8px, 72px 8px, 72px 10px, 63px 10px, 55px 2px, 0 2px);
}
.capacidad::after {
  content: ''; position: absolute; top: 4px; left: 64px; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--snp-petroleo); background: var(--snp-blanco);
}
.seccion-niebla .capacidad::after { background: var(--snp-niebla); }
.capacidad { padding-top: 40px; }
.disponible { margin-top: 40px; padding: 24px 28px; border-radius: var(--snp-radius-md); background: var(--snp-niebla); }
.capacidad p { color: var(--snp-acero); }
.capacidad .detalle { margin-top: 8px; font-size: .95rem; }

/* Estado de una herramienta: Disponible (ya existe) o Próximamente (propuesta). Texto, no solo color. */
.estado { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; vertical-align: middle;
  font: 500 .75rem/1.6 var(--snp-font-body); letter-spacing: 0; }
.estado-hoy { background: rgb(14 110 116 / 0.1); color: var(--snp-petroleo); }
.estado-despues { background: var(--snp-niebla); color: var(--snp-acero); border: 1px dashed var(--snp-linea); }

/* ---- Métricas de Suite: lista en tres columnas, cada una con su pad de conexión ---- */
.metricas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.metricas li { display: grid; align-content: start; gap: 4px; padding-left: 24px; position: relative; }
.metricas li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--snp-petroleo); }
.metricas strong { font: 600 1.05rem var(--snp-font-display); }
.metricas span { color: var(--snp-acero); font-size: .95rem; }

/* ---- Cabecera de una rama ---- */
.rama-cabeza { padding-block: calc(var(--snp-grid) * 10); }
.rama-cabeza-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.rama-cabeza .firma { margin-bottom: 32px; }
.rama-cabeza h1 { max-width: 18ch; margin-bottom: 24px; }
.rama-cabeza .entrada { margin-bottom: 32px; }

/* Bloque de datos técnicos (números de parte, medidas): IBM Plex Mono, como pide la marca. */
.datos {
  display: grid; gap: 4px; padding: 24px; border-radius: var(--snp-radius-lg);
  background: rgb(255 255 255 / 0.04); border: 1px solid rgb(213 220 225 / 0.18);
  font: 400 .95rem/1.7 var(--snp-font-mono); color: #D5DCE1;
}
.datos dt { color: #8C9AA5; font-size: .82rem; }
.datos dd { margin: 0 0 12px; color: var(--snp-blanco); }
.datos dd:last-child { margin-bottom: 0; }
.datos .ok { color: var(--snp-sinapsis); }

/* ---- Para quién: lista corta en dos columnas ---- */
.para-quien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.para-quien h3 { font-size: 1.1rem; margin-bottom: 8px; }
.para-quien p { color: var(--snp-acero); }

/* ---- Banda de llamada a la acción ---- */
.banda { padding-block: calc(var(--snp-grid) * 8); }
.banda-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.banda h2 { max-width: 24ch; }

/* ---- Formulario de contacto ---- */
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.campo { display: grid; gap: 8px; font-weight: 500; }
.campo-ancho { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea {
  font: 400 1rem/1.4 var(--snp-font-body); color: var(--snp-tinta);
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--snp-linea); border-radius: var(--snp-radius-sm); background: var(--snp-blanco);
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--snp-petroleo); box-shadow: 0 0 0 3px rgb(14 110 116 / 0.18); }
.formulario-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.aviso { display: flex; gap: 10px; align-items: baseline; color: var(--snp-alerta); font-size: .95rem; }
.aviso[data-tipo='ok'] { color: var(--snp-petroleo); }
.aviso[data-tipo='ok']::before { content: '✓'; }
.campo [aria-invalid='true'] { border-color: var(--snp-alerta); box-shadow: 0 0 0 3px rgb(178 107 0 / 0.15); }
.campo-error { color: var(--snp-alerta); font-size: .875rem; font-weight: 400; }
/* Campo trampa: fuera de la vista y del teclado, pero no con display:none (algunos programas lo detectan). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; font: 700 .75rem/1 var(--snp-font-body); }

@media (max-width: 860px) {
  .ramas, .formulario, .para-quien, .rama-cabeza-fila, .metricas { grid-template-columns: minmax(0, 1fr); }
  .capacidad { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rama { padding: 24px; }
  .firma-descriptor { font-size: 1.25rem; }
}