/* Portada: hero con la placa de circuito y la sección del principio de Sinapton.
   La placa es el único elemento llamativo del sitio: el nodo ámbar (el cliente) al centro y una traza por rama,
   con el mismo trazo del símbolo (ortogonal, chaflanes a 45°, las trazas nunca tocan el nodo). */

.hero { padding-block: calc(var(--snp-grid) * 12) calc(var(--snp-grid) * 10); overflow: hidden; }
.hero-fila { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { max-width: 16ch; margin-bottom: 24px; }
.hero .entrada { margin-bottom: 40px; }

/* ---- Placa ---- */
.placa { width: 100%; max-width: 560px; justify-self: end; overflow: visible; }
.placa .traza { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s, stroke-width .2s; }
.placa .ramal { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.placa .tec { stroke: var(--snp-sinapsis); }
.placa .op { stroke: #9FB0BC; }
.placa .pad { fill: var(--snp-tinta); stroke-width: 5; transition: stroke .2s; }
.placa .pad.tec { stroke: var(--snp-sinapsis); }
.placa .pad.op { stroke: #9FB0BC; }
.placa .punto { stroke: none; }
.placa .punto.tec { fill: var(--snp-sinapsis); }
.placa .punto.op { fill: #9FB0BC; }
.placa .nodo { fill: var(--snp-nodo); }
.placa .anillo { fill: none; stroke: var(--snp-nodo); stroke-width: 4; }
.placa .nombre { font: 500 22px var(--snp-font-display); fill: var(--snp-blanco); letter-spacing: -0.01em; }
.placa .sub { font: 400 13px var(--snp-font-mono); fill: #8C9AA5; }
.placa .cliente { font: 500 13px var(--snp-font-mono); fill: var(--snp-nodo); }

/* Cada rama de la placa es un enlace: al pasar el cursor o con el teclado, su traza se enciende en blanco. */
.placa a { cursor: pointer; outline: none; }
.placa a:hover .traza, .placa a:focus-visible .traza { stroke: var(--snp-blanco); stroke-width: 8; }
.placa a:hover .pad, .placa a:focus-visible .pad { stroke: var(--snp-blanco); }
.placa a:hover .sub, .placa a:focus-visible .sub { fill: var(--snp-blanco); }
.placa a:focus-visible .nombre { text-decoration: underline; text-decoration-color: var(--snp-nodo); text-underline-offset: 6px; }

/* Un solo momento de movimiento al cargar: la señal recorre cada traza hacia el cliente y el anillo late una vez.
   Con «reducir movimiento» (base.css) la placa aparece completa desde el inicio. */
.placa .traza { stroke-dasharray: 1; stroke-dashoffset: 0; animation: senal 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.placa a:nth-of-type(2) .traza { animation-delay: .12s; }
.placa a:nth-of-type(3) .traza { animation-delay: .24s; }
.placa a:nth-of-type(4) .traza { animation-delay: .36s; }
.placa .anillo { transform-origin: 280px 230px; animation: latido .9s ease-out 1.35s both; }
@keyframes senal { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes latido { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Principio: una misma raíz ---- */
.principio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.principio blockquote { margin: 0; }
.principio blockquote p { font: 600 clamp(2rem, 4vw, 3.1rem)/1.1 var(--snp-font-display); letter-spacing: -0.02em; max-width: 14ch; }
.principio blockquote footer { margin-top: 24px; color: var(--snp-acero); }
.principio ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
.principio li { display: grid; gap: 6px; padding-left: 28px; border-left: 2px solid var(--snp-petroleo); }
.principio li strong { font: 600 1.15rem var(--snp-font-display); }
.principio li span { color: var(--snp-acero); }

/* ---- Contacto ---- */
.contacto-fila { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.contacto-fila .seccion-cabeza { margin-bottom: 0; }

/* En celular la placa se ve chica: se ocultan los subtítulos mono y crecen los nombres para que se lean. */
@media (max-width: 600px) {
  .placa .sub { display: none; }
  .placa .nombre { font-size: 30px; }
}
@media (max-width: 960px) {
  .hero-fila, .principio, .contacto-fila { grid-template-columns: minmax(0, 1fr); }
  .placa { justify-self: center; max-width: 480px; }
  .hero { padding-block: calc(var(--snp-grid) * 8); }
}