:root {
  --azul: #29439b;
  --marino: #1f2a44;
  --tinta: #222b3a;
  --gris: #6b7280;
  --linea: #e3e7ef;
  --fondo: #f4f6fa;
  --blanco: #fff;
  --rojo: #b3261e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.55;
}
a { color: var(--azul); }
.ancho { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Encabezado */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.cabecera .ancho { display: flex; align-items: center; gap: 20px; min-height: 68px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marino); font-weight: 700; font-size: 1.15rem; }
.marca img { width: 40px; height: 40px; border-radius: 6px; }
.menu { display: flex; gap: 18px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.menu a { text-decoration: none; color: var(--tinta); font-size: 0.95rem; }
.menu a:hover { color: var(--azul); }
.boton {
  display: inline-block; background: var(--azul); color: var(--blanco) !important; border: 0; border-radius: 8px;
  padding: 10px 18px; font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit;
}
.boton:hover { background: #1f357f; }
.boton.claro { background: var(--blanco); color: var(--marino) !important; }
.boton.borde { background: transparent; color: var(--azul) !important; border: 1px solid var(--azul); }

/* Portada */
.portada { background: var(--marino); color: var(--blanco); padding: 84px 0 92px; }
.portada h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; margin: 0 0 18px; max-width: 17ch; }
.portada p { font-size: 1.15rem; max-width: 56ch; color: #cadcfc; margin: 0 0 30px; }
.portada .acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Secciones */
section { padding: 68px 0; }
section.gris { background: var(--fondo); }
h2 { font-size: 1.8rem; color: var(--marino); margin: 0 0 8px; }
.bajada { color: var(--gris); max-width: 62ch; margin: 0 0 34px; }
.grilla { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 22px; }
.tarjeta h3 { margin: 0 0 6px; color: var(--marino); font-size: 1.1rem; }
.tarjeta p { margin: 0; color: #4a5568; font-size: 0.96rem; }
.etiqueta { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--azul); background: #e8edfb; border-radius: 99px; padding: 2px 10px; margin-bottom: 10px; }
.dos { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dos h3 { color: var(--azul); margin: 0 0 6px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dos p { margin: 0; }

/* Pie */
.pie { background: var(--marino); color: #cadcfc; padding: 30px 0; font-size: 0.9rem; }
.pie .ancho { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.pie a { color: var(--blanco); }

/* Páginas interiores */
.interior { background: var(--fondo); min-height: calc(100vh - 69px); padding: 46px 0 70px; }
.interior h1 { color: var(--marino); font-size: 2rem; margin: 0 0 10px; }
.caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 26px; }
.estrecho { max-width: 720px; }
.aviso { background: #fff7e0; border: 1px solid #ecd58a; border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; margin: 0 0 22px; }
.exito { background: #e7f5ec; border-color: #9fd3b3; }

/* Formularios */
label { display: block; font-weight: 600; font-size: 0.93rem; margin: 18px 0 6px; color: var(--marino); }
label small, .ayuda { font-weight: 400; color: var(--gris); font-size: 0.85rem; }
input[type=text], input[type=email], input[type=date], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #c6cdda; border-radius: 8px; font: inherit; background: var(--blanco);
}
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.opciones label { display: flex; gap: 8px; font-weight: 400; margin: 6px 0; align-items: flex-start; }
.oculto { display: none; }

/* Portal de mandantes */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 22px 0; }
.kpi { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; }
.kpi b { display: block; font-size: 1.55rem; color: var(--marino); }
.kpi span { color: var(--gris); font-size: 0.85rem; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding: 10px 0 0; border-bottom: 1px solid var(--linea); }
.barra { flex: 1; min-width: 12px; background: var(--azul); border-radius: 4px 4px 0 0; position: relative; }
.barra.cerrado { background: repeating-linear-gradient(45deg, #dfe4ee, #dfe4ee 4px, #f4f6fa 4px, #f4f6fa 8px); }
.barra:hover::after {
  content: attr(data-info); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--marino); color: var(--blanco); font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2;
}
.ejes { display: flex; gap: 6px; margin: 4px 0 22px; }
.ejes span { flex: 1; min-width: 12px; text-align: center; font-size: 0.72rem; color: var(--gris); }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--linea); text-align: right; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--gris); font-weight: 600; font-size: 0.82rem; }
tfoot td { font-weight: 700; border-top: 2px solid var(--marino); border-bottom: 0; }
td.nota { color: var(--gris); text-align: left; }
.desliza { overflow-x: auto; }

/* Formularios en dos columnas y títulos de bloque */
.par { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
h2.bloque { font-size: 1.1rem; margin: 30px 0 4px; padding-top: 22px; border-top: 1px solid var(--linea); }
input[type=time] { width: 100%; padding: 10px 12px; border: 1px solid #c6cdda; border-radius: 8px; font: inherit; background: var(--blanco); }

/* ===================== Hero (portado de hero-referencia.html) =====================
   Todo va acotado a .hero para no tocar el resto del sitio; solo .liquid-glass es global. */
.liquid-glass {
  background: rgba(0,0,0,.4);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
  position: relative; overflow: hidden;
}
.liquid-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.1) 80%, rgba(255,255,255,.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.hero {
  --bg: #4f555c; --fg: #ffffff; --muted: #e5e7eb; --line: rgba(255,255,255,.25); --accent: #2f7cf6;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font); background: var(--bg); color: var(--fg); color-scheme: dark;
  position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  padding: 0; /* anula el padding general de section */
}
@supports (height: 100svh) { .hero { min-height: max(620px, 100svh); } }
.hero #streets { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .pad {
  position: relative; z-index: 1;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) { .hero .pad { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1024px) { .hero .pad { padding-left: max(64px, env(safe-area-inset-left, 0px)); padding-right: max(64px, env(safe-area-inset-right, 0px)); } }
.hero .bordered { border: 1px solid var(--line); }

.hero .navwrap { padding-top: 24px; }
.hero nav { border-radius: 12px; padding: 8px 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero .logo { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--fg); text-decoration: none; }
.hero .logo-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff; }
.hero .links { display: none; gap: 32px; font-size: .875rem; }
.hero .links a { color: var(--fg); text-decoration: none; transition: color .2s; }
.hero .links a:hover { color: #d1d5db; }
@media (min-width: 768px) { .hero .logo { font-size: 1.5rem; } }
@media (min-width: 1000px) { .hero .links { display: flex; } }

.hero .btn { font: inherit; font-weight: 500; border-radius: 8px; cursor: pointer; transition: background-color .25s, color .25s; text-decoration: none; display: inline-block; }
.hero .btn:focus-visible, .hero .links a:focus-visible, .hero .logo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero .btn-white { background: #fff; color: #000; border: 0; }
.hero .btn-white:hover { background: #f3f4f6; }
.hero .btn-sm { padding: 8px 20px; font-size: .875rem; white-space: nowrap; }
.hero .btn-lg { padding: 12px 32px; font-size: 1rem; }
.hero .btn-glass { color: #fff; }
.hero .btn-glass:hover { background: #fff; color: #000; }

.hero .content { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 48px; }
.hero .grid { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) { .hero .content { padding-bottom: 64px; } .hero .grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; } }
.hero h1 { font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; font-size: 2.25rem; margin: 0 0 16px; text-shadow: 0 2px 24px rgba(0,0,0,.25); color: var(--fg); }
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.4rem; } }
@media (min-width: 1440px) { .hero h1 { font-size: 4.25rem; } }
.hero h1 .line { display: block; }
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; }
.hero.js-anim h1 .ch { opacity: 0; transform: translateX(-18px); transition: opacity 500ms ease, transform 500ms ease; }
.hero.js-anim h1.go .ch { opacity: 1; transform: translateX(0); }

.hero .sub { font-size: 1rem; line-height: 1.6; color: var(--muted); margin: 0 0 20px; max-width: 34rem; }
@media (min-width: 768px) { .hero .sub { font-size: 1.125rem; } }
.hero .actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero .tagcol { display: flex; align-items: flex-end; justify-content: flex-start; }
@media (min-width: 1024px) { .hero .tagcol { justify-content: flex-end; } }
.hero .tag { border-radius: 12px; padding: 12px 24px; font-weight: 300; font-size: 1.125rem; }
@media (min-width: 768px) { .hero .tag { font-size: 1.25rem; } }

.hero.js-anim .fade { opacity: 0; transition-property: opacity; transition-timing-function: ease; }
.hero.js-anim .fade.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero.js-anim h1 .ch, .hero.js-anim .fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Celulares angostos: logo y botón un poco más chicos para que el botón no se salga de la barra */
@media (max-width: 420px) {
  .hero nav { gap: 10px; }
  .hero .logo { font-size: 1.05rem; gap: 8px; }
  .hero .btn-sm { padding: 8px 14px; }
}