/* Van Guardia Digital LLC · vanguardiasoft.com
   Empresa de software: blanco, tinta y un solo azul ultramar. Una sola familia, Archivo:
   ancha (125%) para la marca y los títulos, normal para leer. Lo único llamativo es el isotipo. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fuentes/archivo-latin-wdth-normal.woff2') format('woff2-variations'),
       url('/fuentes/archivo-latin-wdth-normal.woff2') format('woff2');
}

:root {
  --blanco: #ffffff;
  --niebla: #f2f4f7;
  --tinta: #0e1726;
  --grafito: #4a5466;
  --linea: #dce1e8;
  --ultramar: #2333c9;
  --ultramar-hondo: #18238f;
  --verde: #0d7a52;
  --ancho: 74rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
}

a { color: var(--ultramar); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ultramar-hondo); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ultramar); outline-offset: 3px; border-radius: 3px; }

.saltar {
  position: absolute; left: var(--margen); top: -4rem; z-index: 10;
  background: var(--tinta); color: var(--blanco); padding: .5rem 1rem; text-decoration: none;
}
.saltar:focus { top: .75rem; }

/* ---------- Barra ---------- */
.barra { border-bottom: 1px solid var(--linea); background: var(--blanco); }
.barra-interior {
  max-width: var(--ancho); margin: 0 auto; padding: 1rem var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; }
.logo:hover { color: var(--tinta); }
.logo-isotipo { width: 1.9rem; height: auto; color: var(--ultramar); }
.logo-nombre { font-stretch: 125%; font-weight: 650; font-size: 1.2rem; letter-spacing: -.01em; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: .975rem; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--ultramar); text-decoration: underline; }
.menu-idioma { color: var(--grafito) !important; }

/* ---------- Portada ---------- */
.portada { border-bottom: 1px solid var(--linea); }
.portada-interior {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7.5rem) var(--margen) clamp(3.5rem, 8vw, 6.5rem);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; align-items: center;
}
.portada h1 {
  margin: 0 0 1.5rem;
  font-stretch: 125%; font-weight: 640;
  font-size: clamp(2.3rem, 4.9vw, 4rem); line-height: 1.04; letter-spacing: -.025em;
  max-width: 17ch;
  text-wrap: balance;
}
.intro { margin: 0 0 2.25rem; max-width: 56ch; color: var(--grafito); font-size: 1.15rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.boton {
  display: inline-block; padding: .8rem 1.35rem; border-radius: 6px;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1.2;
  border: 1.5px solid var(--ultramar);
}
.boton-principal { background: var(--ultramar); color: var(--blanco); }
.boton-principal:hover { background: var(--ultramar-hondo); border-color: var(--ultramar-hondo); color: var(--blanco); }
.boton-secundario { color: var(--ultramar); background: transparent; }
.boton-secundario:hover { background: var(--niebla); }

.portada-isotipo { display: flex; justify-content: flex-end; }
.isotipo-grande { width: min(100%, 17rem); height: auto; color: var(--ultramar); }

/* ---------- Secciones ---------- */
.seccion-interior { max-width: var(--ancho); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--margen); }
h2 {
  margin: 0 0 .75rem;
  font-stretch: 125%; font-weight: 640;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em;
}
.seccion-intro { margin: 0 0 2.5rem; max-width: 60ch; color: var(--grafito); }

/* ---------- Productos: una planilla de especificaciones, no tarjetas ---------- */
.lista-productos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--tinta);
}
.producto {
  padding: 2rem 2.5rem 2.25rem 0;
  border-bottom: 1px solid var(--linea);
  display: flex; flex-direction: column;
}
.producto:nth-child(2n) { padding: 2rem 0 2.25rem 2.5rem; border-left: 1px solid var(--linea); }
.producto-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.producto-nombre { margin: 0; font-stretch: 112%; font-weight: 640; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; }
.estado {
  margin: 0; flex: none; font-size: .875rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .45rem;
}
.estado::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; }
.estado-vivo { color: var(--verde); }
.estado-vivo::before { background: var(--verde); }
.estado-pendiente { color: var(--grafito); }
.estado-pendiente::before { border: 1.5px solid var(--grafito); }
.producto-area { margin: .25rem 0 1rem; color: var(--grafito); font-size: .95rem; }
.producto-texto { margin: 0 0 1.25rem; max-width: 52ch; }
.producto-enlace { margin: auto 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Empresa ---------- */
.empresa { background: var(--niebla); }
.empresa h2 { margin-bottom: 2rem; }
.datos {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem;
}
.datos div { border-top: 2px solid var(--ultramar); padding-top: 1rem; }
.datos dt { font-weight: 650; margin-bottom: .35rem; }
.datos dd { margin: 0; color: var(--grafito); }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: #c4cad6; font-size: .95rem; }
.pie-interior {
  max-width: var(--ancho); margin: 0 auto; padding: 2rem var(--margen);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.pie-marca { margin: 0; display: inline-flex; align-items: center; gap: .6rem; }
.pie-isotipo { width: 1.3rem; height: auto; color: #8ea0ff; }
.pie nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pie a { color: #ffffff; text-decoration-color: #5b6a8a; }
.pie a:hover { color: #b9c4ff; }

/* ---------- Páginas legales ---------- */
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) var(--margen) 5rem; }
.legal article { max-width: 46rem; margin: 0 auto; }
.legal h1 {
  font-stretch: 125%; font-weight: 640; letter-spacing: -.025em;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0 0 .75rem;
}
.legal .fecha { color: var(--grafito); margin: 0 0 2.5rem; }
.legal section { border-top: 1px solid var(--linea); padding-top: 1.5rem; margin-top: 2rem; }
.legal h2 { font-size: 1.3rem; font-stretch: 112%; margin: 0 0 .75rem; letter-spacing: -.01em; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .6rem; }
.legal li::marker { color: var(--ultramar); }
.volver { margin-top: 3rem; font-weight: 600; }

/* ---------- Pantallas medianas y celulares ---------- */
@media (max-width: 900px) {
  .portada-interior { grid-template-columns: minmax(0, 1fr); }
  .portada-isotipo { display: none; }
  .lista-productos { grid-template-columns: minmax(0, 1fr); }
  .producto, .producto:nth-child(2n) { padding: 1.75rem 0 2rem; border-left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .menu a:not(.menu-idioma) { display: none; }
  .intro { font-size: 1.0625rem; }
  .producto-cabeza { flex-wrap: wrap; }
}