@charset "UTF-8";

/* Paleta y medidas compartidas. El tema inicial sigue al sistema. */
:root {
  color-scheme: light dark;
  --fondo: #f5f8f6;
  --superficie: #ffffff;
  --texto: #172721;
  --suave: #52665b;
  --acento: #096b51;
  --sobre-acento: #ffffff;
  --linea: #cedad3;
  --borde-control: #688075;
  --tinte: #e4eee8;
  --caso: #eaf1ed;
  --cabecera: #f5f8f6f5;
  --radio: .75rem;
  --ancho: 76rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --fondo: #101916; --superficie: #182720; --texto: #eef5f0;
    --suave: #b0c2b7; --acento: #83e2b8; --sobre-acento: #11251b;
    --linea: #344c40; --borde-control: #829a8e; --tinte: #233e2f;
    --caso: #1a2d23; --cabecera: #101916f5;
  }
}
:root[data-tema="dark"] {
  color-scheme: dark;
  --fondo: #101916; --superficie: #182720; --texto: #eef5f0;
  --suave: #b0c2b7; --acento: #83e2b8; --sobre-acento: #11251b;
  --linea: #344c40; --borde-control: #829a8e; --tinte: #233e2f;
  --caso: #1a2d23; --cabecera: #101916f5;
}
:root[data-tema="light"] { color-scheme: light; }

/* Base y accesibilidad. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block: 8rem; }
body { margin: 0; background: var(--fondo); color: var(--texto); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, a { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 5px; }
::selection { background: var(--acento); color: var(--sobre-acento); }
h1, h2, h3, p { margin-block: 0; overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
p { max-width: 65ch; }
h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); font-weight: 550; line-height: 1.07; letter-spacing: -.055em; }
h1 span { color: var(--acento); }
h2 { font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.15; letter-spacing: -.045em; font-weight: 500; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.02em; }
.contenedor { width: min(var(--ancho), calc(100% - 6rem)); margin-inline: auto; }
.icono { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.etiqueta { font: 600 .75rem/1.6 Consolas, 'Courier New', monospace; letter-spacing: .09em; color: var(--acento); margin-bottom: 1.5rem; }
.numero, .ubicacion { font: .75rem/1.6 Consolas, 'Courier New', monospace; letter-spacing: .08em; color: var(--suave); }
.saltar { position: fixed; left: 1rem; top: -8rem; z-index: 100; padding: 1rem; background: var(--superficie); border: 1px solid var(--acento); }
.saltar:focus { top: 1rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3rem; max-width: 100%; padding: .875rem 1.25rem; border-radius: .375rem; border: 1px solid transparent; font-size: .875rem; font-weight: 600; text-align: left; line-height: 1.4; overflow-wrap: anywhere; transition: background-color 150ms, color 150ms; }
.primario { background: var(--acento); color: var(--sobre-acento); }
.primario:hover { filter: brightness(1.08); }
.secundario { background: transparent; border-color: var(--borde-control); }
.secundario:hover { background: var(--tinte); }
.acciones { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* Cabecera y navegación. */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--cabecera); border-bottom: 1px solid var(--linea); backdrop-filter: blur(10px); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 6rem; }
.marca { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.055em; line-height: 1; flex-shrink: 0; }
.marca-simbolo { width: 2.5rem; height: 2.5rem; }
.marca-simbolo path { stroke: currentColor; stroke-width: 5; fill: none; }
.marca-simbolo circle { fill: var(--acento); }
.marca-sub { display: block; font-size: .75rem; font-weight: 400; letter-spacing: .13em; margin-top: .3rem; }
#navegacion { display: flex; gap: 1.25rem; align-items: center; font-size: .875rem; font-weight: 600; }
#navegacion a { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; }
#navegacion a:hover, #navegacion a[aria-current] { color: var(--acento); }
.nav-contacto { border-left: 1px solid var(--linea); padding-left: 1.25rem; }
.controles { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.idiomas { display: flex; align-items: center; gap: .125rem; font-size: .875rem; flex-wrap: wrap; }
.idiomas a { min-height: 2.75rem; min-width: 2.75rem; display: inline-flex; align-items: center; padding: .5rem; border-radius: .25rem; }
.idiomas a[aria-current] { color: var(--acento); background: var(--tinte); text-decoration: underline; text-underline-offset: .25em; }
.tema-boton { display: grid; place-items: center; border: 1px solid var(--borde-control); border-radius: 50%; width: 2.75rem; height: 2.75rem; background: transparent; flex-shrink: 0; }
.tema-boton .sol, .tema-boton[data-oscuro="true"] .luna { display: none; }
.tema-boton[data-oscuro="true"] .sol { display: block; }
.menu-boton { display: none; min-width: 2.75rem; min-height: 2.75rem; background: transparent; border: 1px solid var(--borde-control); border-radius: .25rem; padding: .5rem .75rem; font-size: .875rem; }
.sugerencia { padding-top: .75rem; }
.sugerencia a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: underline; font-size: .875rem; color: var(--acento); }

/* Presentación y diagrama de la operación. */
.hero { padding-block: 5rem; display: grid; grid-template-columns: 1.22fr 1fr; gap: 4rem; align-items: center; }
.hero > *, .caso > *, .nosotros > *, .preguntas > *, .contacto-interior > *, .contexto-interior > * { min-width: 0; }
.bajada { color: var(--suave); font-size: 1.0625rem; line-height: 1.7; margin-block: 1.5rem 2rem; }
.prueba-hero { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.prueba-hero strong { font-size: 2.5rem; line-height: 1; font-weight: 500; letter-spacing: -.05em; }
.prueba-hero strong span { color: var(--acento); }
.prueba-hero > span { max-width: 11rem; color: var(--suave); font-size: .875rem; line-height: 1.5; }
.diagrama { margin: 0; padding: 2rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); position: relative; box-shadow: 0 1rem 4rem #00000005; }
.diagrama .etiqueta { margin-bottom: .5rem; }
.diagrama h2 { font-size: 1.375rem; letter-spacing: -.03em; }
.diagrama-nodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.nodo { display: flex; gap: .75rem; align-items: center; border: 1px solid var(--linea); padding: 1rem; border-radius: .375rem; font-size: .875rem; overflow-wrap: anywhere; min-width: 0; }
.nodo .icono { color: var(--acento); }
.diagrama-puente { height: 2.5rem; width: 50%; margin-inline: auto; border-inline: 1px solid var(--acento); border-bottom: 1px solid var(--acento); border-radius: 0 0 .5rem .5rem; position: relative; }
.diagrama-puente::after { content: ''; position: absolute; height: 1rem; width: 1px; background: var(--acento); top: 100%; left: 50%; }
.diagrama-centro { display: flex; align-items: center; gap: 1.5rem; justify-content: center; padding: 1.5rem 1rem; border: 1px solid var(--acento); background: var(--tinte); border-radius: .5rem; margin-top: 1rem; }
.diagrama-centro strong { display: block; font-size: 1.25rem; }
.diagrama-centro div > span { display: block; color: var(--suave); font-size: .875rem; }
.monograma { font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: -.12em; }
.monograma > span { color: var(--acento); }
.diagrama-salida { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.5rem; color: var(--acento); font-size: .875rem; }
.diagrama figcaption { font-size: .75rem; color: var(--suave); text-align: center; margin-top: 1.5rem; line-height: 1.6; }
.banda-prueba { border-block: 1px solid var(--linea); }
.banda-prueba > div { display: grid; grid-template-columns: 1fr 1.1fr auto; gap: 2rem; align-items: center; padding-block: 1.5rem; }
.banda-prueba strong { font-size: 1rem; }
.banda-prueba p { font-size: .875rem; color: var(--suave); }

/* Servicios, caso, proceso y preguntas. */
.seccion { padding-block: 5rem; }
.encabezado-seccion { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 5rem; margin-bottom: 2.5rem; }
.encabezado-seccion > p { color: var(--suave); font-size: 1rem; }
.servicios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.servicio { padding: 1.5rem; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; }
.servicio:first-child { border-left: 1px solid var(--linea); }
.servicio-superior { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.servicio-superior .icono { color: var(--acento); width: 2rem; height: 2rem; }
.servicio h3 { margin-bottom: 1rem; }
.servicio p { color: var(--suave); font-size: 1rem; }
.servicio .ejemplo { margin-top: auto; padding-top: 1.5rem; font-size: .875rem; }
.caso { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; background: var(--caso); border: 1px solid var(--linea); border-radius: var(--radio); padding: 3rem; }
.caso p { color: var(--suave); margin-top: 1.25rem; }
.caso .boton { margin-top: 2rem; }
.caso-resumen { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--linea); padding-left: 3rem; }
.caso-resumen, .sica-emblema { container-type: inline-size; }
.sica-marca { font-size: min(5.5rem, 32cqw); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.sica-marca > span { color: var(--acento); }
.caso-resumen > p { font-size: .875rem; }
.caso ul { padding: 0; margin: 2rem 0 0; list-style: none; }
.caso li { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; margin-top: 1rem; overflow-wrap: anywhere; }
.caso li .icono { color: var(--acento); width: 1.25rem; }
.nosotros { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.pasos { list-style: none; padding: 0; margin: 0; }
.pasos li { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--linea); padding-block: 1.5rem; }
.pasos li:first-child { padding-top: 0; }
.pasos .numero { color: var(--acento); margin-top: .25rem; }
.pasos p { color: var(--suave); margin-top: .75rem; }
.preguntas { padding-top: 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon details:first-child { border-top: 1px solid var(--linea); }
.acordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; padding: 1.25rem 0; min-height: 2.75rem; list-style: none; font-weight: 600; overflow-wrap: anywhere; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .icono { color: var(--acento); }
.acordeon details[open] summary .icono { transform: rotate(45deg); }
.acordeon details > p { padding-bottom: 1.5rem; color: var(--suave); }

/* Página SICA. */
.migas { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--suave); padding-top: 1.5rem; }
.migas a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: underline; text-underline-offset: .25em; }
.hero-sica { padding-top: 2rem; }
.sica-emblema { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 25rem; position: relative; isolation: isolate; text-align: center; }
.sica-emblema > .icono { width: 3rem; height: 3rem; color: var(--acento); margin-bottom: 2rem; }
.sica-emblema p { margin-block: 1.5rem; font-size: .875rem; }
.emblema-orbita { position: absolute; z-index: -1; width: min(24rem, 100%); aspect-ratio: 1; border: 1px solid var(--linea); border-radius: 50%; background: radial-gradient(var(--tinte), transparent 70%); }
.emblema-orbita::after { content: ''; position: absolute; inset: 1rem; border: 1px dashed var(--linea); border-radius: 50%; }
.contexto { padding-block: 3rem; background: var(--tinte); border-block: 1px solid var(--linea); }
.contexto-interior { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.contexto-interior h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.contexto-interior > p { color: var(--suave); }
.recorrido { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; }
.recorrido-icono { display: flex; justify-content: space-between; align-items: center; color: var(--acento); border-bottom: 1px solid var(--linea); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.recorrido-icono .icono { width: 2rem; height: 2rem; }
.recorrido-icono span { font: .75rem Consolas, monospace; }
.recorrido p { margin-top: 1rem; color: var(--suave); }
.capacidades { padding-top: 0; }
.capacidades h2 { max-width: 20ch; margin-bottom: 2.5rem; }
.capacidades .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.relevamiento { align-items: center; }
.relevamiento ul { margin: 0; }
.relevamiento li { font-size: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--linea); }
.volver-servicios { padding-block: 2rem 4rem; }

/* Contacto y pie. */
.contacto { padding-block: 4rem; border-block: 1px solid var(--linea); background: var(--tinte); }
.contacto-interior { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.contacto h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); max-width: 14ch; }
.contacto-interior > div > p:not(.etiqueta) { color: var(--suave); margin-top: 1.5rem; }
.correo { display: inline-block; font-size: clamp(1.125rem, 2.3vw, 1.75rem); letter-spacing: -.03em; line-height: 1.5; border-bottom: 1px solid var(--acento); padding-block: .5rem; overflow-wrap: anywhere; }
.contacto-acciones .acciones { margin-top: 1.5rem; }
.contacto-acciones .ayuda, .contacto-acciones .estado-copia { font-size: .875rem; }
.estado-copia { min-height: 3rem; }
.pie { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 2rem; }
.pie p, .pie > span { color: var(--suave); font-size: .75rem; }
.contacto-movil { display: none; }

/* Adaptación por ancho y preferencias. */
@media (max-width: 1199px) {
  .contenedor { width: calc(100% - 4rem); }
  .barra { gap: 1rem; }
  #navegacion { gap: .75rem; }
  .nav-contacto { padding-left: .75rem; }
  .hero { gap: 2rem; }
  .diagrama { padding: 1.5rem; }
  .nodo { flex-direction: column; gap: .5rem; }
  .banda-prueba > div { grid-template-columns: 1fr 1.3fr; }
  .banda-prueba .ubicacion { display: none; }
  .servicio { padding: 1.5rem 1.25rem; }
}
@media (max-width: 1023px) {
  .barra { flex-wrap: wrap; padding-block: 1rem; }
  .menu-boton { display: block; margin-left: auto; }
  #navegacion { order: 4; width: 100%; justify-content: space-between; border-top: 1px solid var(--linea); padding-top: 1rem; }
  .js #navegacion { display: none; }
  .js #navegacion[data-abierto="true"] { display: flex; }
  .hero { padding-block: 3rem; }
  .diagrama h2 { font-size: 1.25rem; }
  .diagrama-centro { gap: 1rem; }
  .monograma { font-size: 3rem; }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio:nth-child(odd) { border-left: 1px solid var(--linea); }
  .caso { gap: 2rem; padding: 2rem; }
  .caso-resumen { padding-left: 2rem; }
  .nosotros, .preguntas, .encabezado-seccion, .contacto-interior, .contexto-interior { gap: 3rem; }
  .recorrido { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capacidades .servicios { grid-template-columns: 1fr; }
  .capacidades .servicio { border-left: 1px solid var(--linea); }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 11rem; scroll-padding-bottom: 7rem; }
  .cabecera { position: static; }
  .contenedor { width: calc(100% - 2.5rem); }
  .barra { gap: .5rem; min-height: 0; }
  .marca { font-size: 1.375rem; }
  .marca-simbolo { width: 2rem; }
  .marca-sub { font-size: .75rem; }
  .controles { gap: .5rem; }
  .idiomas { font-size: .875rem; }
  #navegacion { flex-wrap: wrap; justify-content: flex-start; gap: .5rem 1rem; }
  .nav-contacto { border-left: 0; padding-left: 0; }
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem; }
  h1 { font-size: clamp(2.25rem, 7.8vw, 3.5rem); }
  .hero .bajada { font-size: 1rem; }
  .etiqueta { font-size: .75rem; margin-bottom: 1rem; }
  .diagrama { padding: 1.5rem; }
  .diagrama-titulo .etiqueta, .diagrama-puente, .diagrama-centro .monograma { display: none; }
  .diagrama-nodos { margin-top: 1rem; gap: .5rem; }
  .nodo { flex-direction: row; padding: .75rem; }
  .diagrama-centro { padding: .75rem; margin-top: .75rem; }
  .diagrama-centro > div { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; justify-content: center; }
  .diagrama-centro strong { font-size: 1rem; }
  .diagrama-salida { margin-top: .75rem; }
  .diagrama figcaption { margin-top: .75rem; }
  .banda-prueba > div { grid-template-columns: 1fr; gap: .5rem; padding-block: 1.5rem; }
  .seccion { padding-block: 3rem; }
  .encabezado-seccion, .nosotros, .preguntas, .contexto-interior, .contacto-interior { grid-template-columns: 1fr; gap: 2rem; }
  .encabezado-seccion { gap: 1.25rem; margin-bottom: 2rem; }
  .caso { grid-template-columns: 1fr; padding: 1.5rem; }
  .caso-resumen { padding-left: 0; padding-top: 2rem; border-left: 0; border-top: 1px solid var(--linea); }
  .caso-resumen ul { margin-top: 1rem; }
  .preguntas, .capacidades { padding-top: 0; }
  .sica-emblema { min-height: 15rem; }
  .sica-emblema .icono, .sica-emblema .emblema-orbita { display: none; }
  .hero-sica { padding-top: 1rem; }
  .contacto { padding-block: 3rem; }
  .contacto h2 { max-width: 18ch; }
  .pie { flex-wrap: wrap; gap: 1.5rem; }
  .pie > span { width: 100%; }
  .js body { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  .contacto-movil:not([hidden]) { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; background: var(--cabecera); border-top: 1px solid var(--linea); padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom, 0px)); }
  .contacto-movil .boton { width: 100%; }
}
@media (max-width: 599px) {
  .servicios, .recorrido { grid-template-columns: 1fr; }
  .servicio { border-left: 1px solid var(--linea); }
  .servicio-superior { margin-bottom: 1.25rem; }
  .recorrido { gap: 1.5rem; }
  .recorrido-icono { padding-bottom: 1rem; margin-bottom: 1rem; }
  .barra .controles { width: 100%; justify-content: space-between; }
  .idiomas { gap: .5rem; }
  .tema-boton { margin-left: auto; }
  .hero { padding-top: 2rem; }
  .acciones .boton { min-width: 0; }
  .contacto-acciones .acciones { align-items: stretch; }
  .nodo { flex-direction: column; text-align: center; }
  .nodo > span { max-width: 100%; }
  .diagrama-salida { flex-wrap: wrap; text-align: center; }
  .boton { padding-inline: .75rem; gap: .5rem; }
}
@media (max-height: 600px) {
  .cabecera { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}