/* subpaginas.css — extiende el sistema de home.css a las subpáginas.
   Cargar SIEMPRE después de home.css. Reusa tokens, nav, footer, botones,
   eyebrows, .seccion--*, .proceso, .statement-texto, reveal/t-mask.
   Aquí solo viven los componentes propios de subpágina. */

/* == Hero de subpágina (reusa .hero.hero--v3): chips + cascada del 5º hijo == */
.hero--v3 .hero-sub { max-width: 60ch; }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hero--v3 .hero-chips .chip {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .92);
}
/* la cascada de la home solo nombra eyebrow/h1/sub/acciones; damos delay al resto */
html.js .hero-centro > .hero-acciones { animation-delay: .44s; }
html.js .hero-centro > .hero-chips { animation-delay: .56s; }
@media (prefers-reduced-motion: reduce) { html.js .hero-centro > .hero-chips { animation: none; opacity: 1; } }
/* Fondo del hero por subpágina: cada página estrena su propia onda (no todas iguales). */
.hero-fondo--metal { background-image: url('brand_assets/flyer/bg-metal.webp'); }
.hero-fondo--aurora { background-image: url('brand_assets/flyer/bg-aurora.webp'); }

/* == Lede e intro de sección == */
.seccion-lede { font-size: 18px; line-height: 1.65; color: var(--gris); max-width: 60ch; margin-top: -26px; margin-bottom: 8px; }
.seccion--oscura .seccion-lede { color: rgba(255, 255, 255, .74); }

/* == Narrativa editorial (párrafos de lectura larga) == */
.narrativa { max-width: 720px; }
.narrativa p { font-size: 18px; line-height: 1.72; color: var(--gris); margin-bottom: 22px; }
.narrativa p:last-child { margin-bottom: 0; }
.narrativa strong { color: var(--tinta); font-weight: 600; }

/* == Eras: el patrón histórico (electrificación / internet / IA) == */
.eras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.era {
  background: var(--blanco); border: 1px solid rgba(10, 10, 10, .1); border-radius: var(--radio);
  padding: 28px 26px; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.era:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, .4); box-shadow: 0 12px 28px rgba(37, 99, 235, .08); }
.era-periodo { font-family: var(--fuente-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.era h3 { font-family: var(--fuente-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin: 12px 0 12px; }
.era p { font-size: 15px; line-height: 1.6; color: var(--gris); }
/* la era "ahora" (IA) resalta en oscuro entre las dos claras: atrae el ojo al presente */
.era--ahora { background: var(--tinta); border-color: transparent; box-shadow: 0 18px 40px rgba(10, 10, 10, .14); }
.era--ahora h3 { color: #fff; }
.era--ahora p { color: rgba(255, 255, 255, .82); }
.era--ahora .era-periodo { color: #93B4F8; }
.era--ahora:hover { transform: translateY(-4px); border-color: rgba(37, 99, 235, .5); }
@media (max-width: 760px) { .eras { grid-template-columns: 1fr; } }

/* == Frase-cierre (reusa .statement-texto y su tecleo, sin el grid de 2-col) == */
.metodo-frase { margin-top: clamp(48px, 6vw, 76px); }
.metodo-frase .statement-texto { max-width: 26ch; font-size: clamp(28px, 3.6vw, 48px); }

/* == Tres capas (con callout de analogía) == */
.capas { display: flex; flex-direction: column; gap: 16px; }
.capa {
  display: grid; grid-template-columns: 236px 1fr; gap: clamp(20px, 3vw, 48px);
  background: var(--blanco); border: 1px solid rgba(10, 10, 10, .1); border-radius: var(--radio);
  padding: clamp(24px, 3vw, 36px); align-items: start;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.capa:hover { border-color: rgba(37, 99, 235, .35); box-shadow: 0 12px 30px rgba(10, 10, 10, .05); }
.capa-tag { font-family: var(--fuente-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.capa-nombre { display: block; font-family: var(--fuente-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.04; margin-top: 10px; color: var(--tinta); }
.capa-cuerpo h3 { font-family: var(--fuente-display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; margin-bottom: 10px; }
.capa-cuerpo > p { font-size: 15.5px; line-height: 1.62; color: var(--gris); }
.capa-cuerpo strong { color: var(--tinta); font-weight: 600; }
@media (max-width: 760px) { .capa { grid-template-columns: 1fr; gap: 14px; } }

/* == Callout de analogía "En palabras del negocio" (regla NODO) == */
.analogia { margin-top: 18px; border-left: 2px solid var(--azul); background: rgba(37, 99, 235, .05); border-radius: 0 var(--radio) var(--radio) 0; padding: 15px 18px; }
.analogia-label { font-family: var(--fuente-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); margin-bottom: 6px; }
.analogia p { font-size: 14.5px; line-height: 1.6; color: var(--gris); }
/* variante sobre bloque oscuro */
.seccion--oscura .analogia { background: rgba(37, 99, 235, .14); }
.seccion--oscura .analogia p { color: rgba(255, 255, 255, .82); }
.seccion--oscura .analogia-label { color: #93B4F8; }

/* == Principios no negociables == */
.principios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principio {
  background: var(--blanco); border: 1px solid rgba(10, 10, 10, .1); border-radius: var(--radio);
  padding: 28px 26px 30px; transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}
.principio:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .4); box-shadow: 0 12px 28px rgba(37, 99, 235, .08); }
.principio-num { font-family: var(--fuente-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--azul); }
.principio h3 { font-family: var(--fuente-display); font-weight: 600; font-size: 17.5px; letter-spacing: -.01em; margin: 14px 0 10px; }
.principio p { font-size: 14.5px; line-height: 1.62; color: var(--gris); }
@media (max-width: 860px) { .principios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principios { grid-template-columns: 1fr; } }

/* == Doble lectura (negocio / tecnología) == */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.dual-col { background: var(--blanco); border: 1px solid rgba(10, 10, 10, .1); border-radius: var(--radio); padding: clamp(28px, 3vw, 40px); }
.dual-col-eyebrow { font-family: var(--fuente-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.dual-col h3 { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.12; margin: 12px 0 22px; }
.dual-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dual-col li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--gris); }
.dual-col li::before { content: ''; position: absolute; left: 0; top: 10px; width: 13px; height: 2px; background: var(--azul); }
@media (max-width: 760px) { .dual { grid-template-columns: 1fr; } }

/* == Cierre CTA con cuerpo (reusa .cierre de la home + párrafo) == */
.cierre-lede { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .88); max-width: 54ch; margin: 20px auto 0; }

/* ===================================================================
   Página "El Sistema" (patrón Product: pilares con producto real)
   =================================================================== */

/* Hero de El Sistema: vertical iris rotado a horizontal (pétalos metálicos). */
.hero-fondo--iris { background-image: url('brand_assets/flyer/bg-iris-h.webp'); }

/* Pilar: producto + texto lado a lado, alternando el lado. */
.pilar { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pilar-txt, .pilar-media { min-width: 0; }
.pilar + .pilar { margin-top: clamp(56px, 8vw, 104px); }
.pilar--flip .pilar-media { order: 2; }
.pilar-txt .eyebrow { margin-bottom: 14px; display: block; }
.pilar-txt h2 { font-size: clamp(27px, 3.2vw, 40px); letter-spacing: -.02em; line-height: 1.08; margin-bottom: 16px; }
.pilar-txt > p { font-size: 17px; line-height: 1.65; color: var(--gris); max-width: 48ch; }
.seccion--oscura .pilar-txt > p { color: rgba(255, 255, 255, .76); }
.pilar-lista { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.pilar-lista li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--gris); }
.seccion--oscura .pilar-lista li { color: rgba(255, 255, 255, .72); }
.pilar-lista li::before { content: ''; position: absolute; left: 0; top: 9px; width: 13px; height: 2px; background: var(--azul); }
.pilar-media .brain-panel { max-width: 100%; }
@media (max-width: 860px) {
  .pilar { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pilar--flip .pilar-media { order: 0; }
}

/* Panel de producto genérico para las maquetas oscuras. */
.mock-panel { background: #080B12; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 30px 70px rgba(0, 0, 0, .45); overflow: hidden; }
.mock-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mock-barra .maqueta-titulo { color: rgba(255, 255, 255, .82); }
.mock-barra .maqueta-estado { margin-left: auto; color: #7EA6FF; }

/* Agentes operativos. */
.agente { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-top: 1px solid rgba(255, 255, 255, .06); }
.agente:first-of-type { border-top: none; }
.agente-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: rgba(37, 99, 235, .16); color: #93B4F8; display: flex; align-items: center; justify-content: center; }
.agente-ico svg { width: 18px; height: 18px; }
.agente-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.agente-info strong { font-size: 13.5px; color: rgba(255, 255, 255, .92); font-weight: 600; }
.agente-info span { font-size: 12px; color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agente-chip { flex-shrink: 0; font-family: var(--fuente-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.agente-chip--activo { background: rgba(37, 99, 235, .18); color: #93B4F8; }
.agente-chip--ok { background: rgba(52, 199, 120, .16); color: #6EE7A2; }

/* Seguridad: quién ve qué (permisos heredados). */
.permisos { display: flex; flex-direction: column; gap: 10px; }
.permiso { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: center; padding: 15px 18px; background: var(--blanco); border: 1px solid rgba(10, 10, 10, .1); border-radius: var(--radio); }
.permiso-rol { font-family: var(--fuente-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
.permiso-ve { font-size: 14px; line-height: 1.45; color: var(--gris); }
.permiso-ve b { color: var(--tinta); font-weight: 600; }

/* Reporte ejecutivo (maqueta clara). */
.mock-reporte { background: var(--blanco); border: 1px solid rgba(10, 10, 10, .1); border-radius: 8px; box-shadow: 0 2px 3px rgba(10, 10, 10, .02), 0 20px 40px rgba(10, 10, 10, .06); overflow: hidden; }
.reporte-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(10, 10, 10, .08); }
.reporte-top strong { font-family: var(--fuente-display); font-weight: 600; font-size: 15px; }
.reporte-top .maqueta-estado { margin-left: auto; color: var(--azul); }
.reporte-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.reporte-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reporte-fila span { font-size: 13.5px; color: var(--gris); }
.reporte-fila strong { font-family: var(--fuente-display); font-weight: 600; font-size: 17px; color: var(--tinta); }
.reporte-barras { display: flex; align-items: flex-end; gap: 8px; height: 92px; padding-top: 10px; border-top: 1px solid rgba(10, 10, 10, .08); }
.reporte-barra { flex: 1; background: linear-gradient(var(--azul), #7EA6FF); border-radius: 3px 3px 0 0; opacity: .92; }

/* ===== Legales (privacidad/terminos) en el sistema nuevo: tema claro ===== */
.pg-legal .nav { position: absolute; }
.legal-hero { background: var(--tinta); color: var(--blanco); padding: calc(var(--pad-seccion) + 30px) 0 clamp(40px, 5vw, 60px); }
.legal-hero h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.03em; color: var(--blanco); }
.legal-hero .meta { font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .6); margin-top: 16px; }
.legal-cuerpo { padding: clamp(48px, 6vw, 80px) 0; }
.legal-cuerpo .contenedor { max-width: 820px; }
.legal-bloque { margin-bottom: 40px; }
.legal-bloque h2 { font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.01em; margin-bottom: 14px; }
.legal-bloque h3 { font-family: var(--fuente-display); font-weight: 600; font-size: 16px; margin: 22px 0 8px; }
.legal-bloque p, .legal-bloque li { font-size: 15.5px; line-height: 1.7; color: var(--gris); }
.legal-bloque strong { color: var(--tinta); font-weight: 600; }
.legal-bloque ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.legal-bloque ul li { position: relative; padding-left: 22px; }
.legal-bloque ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 2px; background: var(--azul); }
.legal-bloque a { color: var(--azul); text-decoration: none; }
.legal-num { font-family: var(--fuente-mono); font-size: 12px; color: var(--azul); letter-spacing: .06em; }
.legal-callout { border-left: 2px solid var(--azul); background: rgba(37, 99, 235, .05); border-radius: 0 var(--radio) var(--radio) 0; padding: 16px 18px; margin: 8px 0; }
.legal-callout p { color: var(--tinta); font-weight: 500; }