:root{--petroleo:#0B2530;--petroleo-2:#0E2C3A;--petroleo-3:#122F3D;--marfil:#EFEEE8;
    --marfil-2:#E6E4DB;--tinta:#152730;--gris:#5C6E74;--laton:#B98A2F;--laton-claro:#D4A94A;
    --vivo:#3F8F5F;--alerta:#B4472F;--linea:#D8D5CA;--linea-osc:#1C3C4C}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--marfil);color:var(--tinta);font-family:"Segoe UI",system-ui,sans-serif;
    line-height:1.65;font-size:16.5px}
  .contenido{max-width:1080px;margin:0 auto;padding:0 24px}
  .ceja{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
  a{color:inherit}:focus-visible{outline:2px solid var(--laton);outline-offset:3px}
  h1,h2,h3{font-family:Georgia,serif;font-weight:400;text-wrap:balance}
  section{padding:80px 0}
  h2{font-size:clamp(26px,3.5vw,37px);line-height:1.18;max-width:20em}
  h3{font-size:19px}
  .intro{margin-top:16px;max-width:64ch;color:var(--gris);font-size:17.5px}
  .oscura{background:var(--petroleo);color:var(--marfil)}
  .oscura .intro{color:#AFBFC3}.oscura .ceja{color:var(--laton-claro)}.clara .ceja{color:var(--laton)}
  .barra{background:var(--petroleo);color:var(--marfil);position:sticky;top:0;z-index:50;
    border-bottom:1px solid var(--linea-osc)}
  .barra .contenido{display:flex;align-items:center;justify-content:space-between;padding:15px 24px}
  .logo{display:flex;align-items:center;text-decoration:none}
  /* el logo, mas grande a peticion de Pepe (22-ago) */
  .logo .logotipo{height:52px;width:auto;display:block}
  @media (max-width:640px){.logo .logotipo{height:40px}}
  /* La frase va DEBAJO del logotipo, no a un lado: a un lado le comia el
     ancho al menu (Pepe lo vio partido, 22-ago). En laton oscuro --el segundo
     dorado de la marca-- para que acompane al logo sin competirle. */
  .marca-bloque{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    margin-right:auto}
  .logo-frase{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;
    color:var(--laton);white-space:nowrap;line-height:1.2}
  @media (max-width:560px){.logo-frase{font-size:8.5px;letter-spacing:.1em}}
  .volver{font-size:13.5px;color:#B9C6C9;text-decoration:none}
  .cta-mini{text-decoration:none;color:var(--petroleo);background:var(--laton-claro);
    padding:9px 18px;border-radius:3px;font-weight:600;font-size:13.5px}
  .heroe .contenido{padding:80px 24px 70px}
  .heroe h1{font-size:clamp(34px,5.4vw,56px);line-height:1.1;max-width:14em}
  .heroe h1 em{font-style:italic;color:var(--laton-claro)}
  .heroe .baja{margin-top:24px;max-width:56ch;color:#AFBFC3;font-size:18.5px}
  .btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;
    padding:15px 30px;border-radius:3px;margin-top:34px}
  .btn-oro{background:var(--laton-claro);color:var(--petroleo)}
  /* espejo */
  .lista{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
    gap:1px;background:var(--linea);border:1px solid var(--linea)}
  .lista .item{background:var(--marfil);padding:24px}
  .lista .item::before{content:"—";color:var(--laton);margin-right:10px;font-weight:700}
  /* flujo */
  .flujo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
    background:var(--linea-osc);border:1px solid var(--linea-osc);margin-top:42px}
  .flujo .p{background:var(--petroleo-2);padding:26px 22px}
  .flujo .p .n{font-family:Georgia,serif;font-size:26px;color:var(--laton-claro)}
  .flujo .p h3{color:var(--marfil);margin:8px 0 6px;font-size:17px}
  .flujo .p p{color:#AFBFC3;font-size:14.5px}
  /* documentos */
  .docs{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
  .doc{background:var(--marfil);border:1px solid var(--linea);border-left:3px solid var(--laton);
    padding:14px 18px;font-size:15px}
  .doc span{color:var(--laton);font-family:Georgia,serif;margin-right:8px}
  /* módulos */
  .mods{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
  .mod{background:var(--marfil);border:1px solid var(--linea);border-radius:4px;padding:26px 24px}
  .mod .tag{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:var(--laton);border:1px solid var(--laton);border-radius:99px;
    padding:3px 10px;margin-bottom:12px}
  .mod h3{margin-bottom:8px;line-height:1.3}
  .mod p{font-size:15px;color:var(--gris)}
  /* cita destacada */
  .destacado{background:var(--petroleo-3);color:var(--marfil);border-left:4px solid var(--laton-claro);
    padding:30px 34px;margin-top:40px;border-radius:0 4px 4px 0}
  .destacado p{color:#C8D8D2;font-size:17px}
  .destacado b{color:var(--marfil)}
  /* números */
  .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;margin-top:40px}
  .num .n{font-family:Georgia,serif;font-size:42px;color:var(--laton-claro);line-height:1}
  .num small{display:block;font-size:14px;color:#AFBFC3;margin-top:10px}
  /* no incluye */
  .noinc{margin-top:34px;display:grid;gap:12px}
  .noinc div{background:var(--marfil-2);border-left:3px solid var(--gris);padding:16px 20px;font-size:15.5px}
  .cierre{text-align:center}
  .cierre h2{margin:0 auto;max-width:16em}
  .cierre .baja{margin:18px auto 0;max-width:52ch;color:#AFBFC3;font-size:18px}
  .nota{margin-top:24px;font-size:14px;color:#8FA6AC}
  footer{background:var(--petroleo-2);color:#8FB3A8;border-top:1px solid var(--linea-osc);
    padding:28px 0;font-size:13.5px}
  footer .contenido{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  footer a{color:var(--laton-claro);text-decoration:none}
  .aviso{background:#FFF3CD;border-left:4px solid var(--laton);padding:13px 20px;font-size:14px;color:#5C4A16}

  /* barra: dos enlaces en medio (estaciones + quienes somos).
     flex-wrap para que en celular envuelva en vez de desbordar. */
  /* 30-ago-2026: sin gap, "Quienes somos" quedaba PEGADO al boton dorado y se
     veia encimado (Pepe lo vio). space-between reparte el sobrante, pero entre
     dos hermanos contiguos no deja nada: el espacio hay que pedirlo. */
  /* 31-ago-2026: Pepe lo volvio a ver encimado. La correccion de arriba estaba
     escrita desde el 30 pero NUNCA SE PUBLICO: produccion servia el CSS viejo.
     Y el gap solo no basta: si "Quienes somos" puede encogerse, su texto se
     desborda y el boton --que se pinta despues-- lo TAPA. Por eso ninguno de los
     dos encoge: si no caben, la barra ENVUELVE (row-gap), que se ve mal pero
     nunca miente. */
  .barra .contenido{flex-wrap:wrap;row-gap:9px;column-gap:28px}
  .barra .cta-mini{flex:0 0 auto}
  .barra .enlaces{flex:0 1 auto;flex-shrink:0}
  .barra .enlaces{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

  /* --- CONTACTO FLOTANTE (22-ago, Pepe: "hay que poner el boton al whatsapp
     y el correo que esta hasta abajo -- visibles"). En laton, no en el verde de
     WhatsApp, para no romper la paleta: el icono ya dice de que es. --- */
  .flotante{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:10px}
  .flotante a{display:flex;align-items:center;gap:9px;text-decoration:none;border-radius:999px;
    box-shadow:0 6px 22px rgba(0,0,0,.38);transition:transform .15s ease}
  .flotante a:hover{transform:translateY(-2px)}
  .fl-wa{background:var(--laton-claro);color:var(--petroleo);padding:12px 20px;
    font-weight:700;font-size:14.5px;letter-spacing:.01em}
  .fl-wa svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
  .fl-mail{background:var(--petroleo-2);color:var(--laton-claro);padding:12px;
    border:1px solid rgba(212,169,74,.4)}
  .fl-mail svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .flotante.escondido{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
  .flotante{transition:opacity .25s ease, transform .25s ease, visibility .25s}
  @media(max-width:520px){
    .flotante{right:13px;bottom:13px;gap:8px}
    .fl-wa span{display:none}
    .fl-wa{padding:13px}
  }

  /* --- FOTO REAL DEL EQUIPO (24-ago-2026). Las paginas de estacion prometian
     "hacemos los equipos" y no ensenaban ni uno: 20 paginas con cero fotos.
     Va SIEMPRE con figcaption -- una foto de un gabinete abierto no se explica
     sola, y el pie es donde se dice que lo de adentro es nuestro.
     La franja es OSCURA a proposito: continua el heroe, asi la prueba queda
     pegada a la promesa en vez de abrir una seccion nueva. --- */
  .franja-foto{padding:0 0 52px}
  .franja-foto .foto{margin-top:0}
  .foto{margin:40px 0 0;border:1px solid var(--linea);border-radius:5px;overflow:hidden;
    background:#fff;box-shadow:0 14px 34px -18px rgba(11,37,48,.28)}
  .foto img{display:block;width:100%;height:auto}
  .foto figcaption{font-size:12.5px;color:var(--gris);padding:11px 15px;
    border-top:1px solid var(--linea);background:var(--marfil)}
  .oscura .foto{border-color:var(--linea-osc);background:var(--petroleo-2);
    box-shadow:0 16px 40px -20px rgba(0,0,0,.6)}
  .oscura .foto figcaption{color:#AFBFC3;background:var(--petroleo-2);
    border-top-color:var(--linea-osc)}

  /* El ESPACIO RESERVADO se esconde mientras no llegue la imagen (25-ago-2026).
     Estaba comiendose una pantalla entera y empujando el texto fuera de la
     vista justo cuando lo que se esta revisando es el TEXTO. El bloque sigue
     en el HTML con su medida y su pie: cuando llegue la foto se le quita el
     data-reservado a la <img> y la clase .reservada a la <section>, y aparece.
     Efecto de lado util: aunque alguien publique por error, el hueco no se ve. */
  /* Pepe, 25-ago 00:04: "el cuadro amarillo ahi esta de entrada y deja el
     lugar de la imagen". Entonces: el CARTEL se va -- gritaba en medio de lo
     que se esta revisando, que es el TEXTO -- pero el LUGAR se queda marcado,
     discreto, para saber donde va a ir la foto. El pie NO se toca: es texto
     final y hay que poder leerlo. */
  .franja-foto.reservada .foto{background:transparent;box-shadow:none;
    border:1px dashed rgba(212,169,74,.32)}
  .franja-foto.reservada .foto img{display:none}
  .franja-foto.reservada .foto::before{content:"espacio para la foto";display:block;
    padding:26px 0;text-align:center;font-size:11.5px;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(175,191,195,.5)}
  .franja-foto.reservada .foto figcaption{border-top:1px dashed rgba(212,169,74,.28)}

  /* La frase TAL COMO SALE del sistema, dentro de un destacado. Se pone en
     monoespaciada para que se lea como lo que es -- una salida de maquina --
     y no como una frase de folleto. 30-ago-2026. */
  .cita-sistema{display:inline-block;margin:10px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:15px;line-height:1.5;color:var(--laton-claro);border-left:3px solid var(--laton);padding:6px 0 6px 14px}

  /* LAS PREGUNTAS (31-ago-2026). <details> nativo: abre y cierra sin una linea de
     JavaScript, y Google lee el texto aunque este cerrado. */
  .faq{border:1px solid var(--linea);border-radius:7px;background:#fff;overflow:hidden}
  .faq + .faq{margin-top:-1px}
  .faq summary{cursor:pointer;list-style:none;padding:16px 46px 16px 20px;font-weight:600;
    font-size:16.5px;position:relative;color:var(--petroleo)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:18px;top:13px;font-size:23px;
    font-weight:400;color:var(--laton);line-height:1}
  .faq[open] summary::after{content:"–"}
  .faq summary:hover{background:#FAF9F5}
  .faq summary:focus-visible{outline:2px solid var(--laton);outline-offset:-2px}
  .faq p{padding:0 20px 18px;font-size:15.5px;line-height:1.7;color:#3E4E54;max-width:78ch}
  .oscura .faq{background:var(--petroleo-2, #0E2C3A);border-color:var(--linea-osc)}
  .oscura .faq summary{color:var(--marfil)}
  .oscura .faq p{color:#B9C8CD}