/* ══ Heredado de la landing, tal cual ═════════════════════════════════════
   ARCHIVO GENERADO — no editar a mano. Se rehace con:
       python3 extraer-heredado.py
   Sale del `estilos.css` de la landing sin tocar una regla: el header, el
   menú, el pie, el chip de estado y los botones son la misma pieza visual.
   ═══════════════════════════════════════════════════════════════════════ */

/* ============================================================================
   Centauro · Solicitud de cotización
   ----------------------------------------------------------------------------
   Estética tomada de la referencia "Contrast": lienzo blanco, un solo color de
   acento haciendo todo el trabajo, radios generosos (píldora en lo que se toca),
   una única sombra muy tenue y ritmo de 8 px con 80 px entre secciones.

   Lo que NO se toma de la referencia, por pedido de Mateo:
     · la paleta cromática → va la de Centauro (verde oliva del sitio)
     · la tipografía → va Montserrat, la del sitio
   ========================================================================= */

:root {
  /* ── Paleta de Centauro, en los roles de la referencia ──────────────────
     El verde y el casi negro salen de medir el sitio en vivo. */
  --acento: #96a07d;          /* Signal Coral → verde oliva del sitio */
  --acento-hondo: #7c8663;    /* Ember / Persimmon → su versión profunda */
  --acento-wash: #edf0e7;     /* Coral Mist → el lavado del acento */
  --tinta: #252728;           /* Carbon Ink → el casi negro del sitio */
  --blanco: #ffffff;          /* Pure White */
  --niebla: #f5f7f9;          /* Fog → la superficie clara del sitio */
  --pizarra: #6b6860;         /* Slate → texto secundario */
  --linea: #e4e6e3;           /* divisores y bordes suaves */
  --linea-fuerte: #c9ccc6;
  --alerta: #8f4531;

  /* ── Tipografía: Montserrat, la única del sitio ──────────────────────── */
  --fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-caption: 14px;      --lh-caption: 1.43;
  --t-body-sm: 16px;      --lh-body-sm: 1.5;
  --t-body: 18px;         --lh-body: 1.56;
  --t-sub: 20px;          --lh-sub: 1.6;
  --t-heading-sm: 24px;   --lh-heading-sm: 1.33;
  --t-heading: 48px;      --lh-heading: 1.11;
  --t-display: 56px;      --lh-display: 0.9;

  /* ── Espaciado: base 8 px ────────────────────────────────────────────── */
  --s8: 8px;   --s16: 16px; --s24: 24px; --s32: 32px; --s40: 40px;
  --s48: 48px; --s56: 56px; --s64: 64px; --s72: 72px; --s80: 80px;

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --r-sm: 16px;      /* tarjetas chicas */
  --r-md: 24px;      /* tarjetas */
  --r-lg: 40px;      /* tarjetas grandes */
  --r-pill: 100px;   /* botones, chips, insignias, imágenes chicas */

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --ancho: 1200px;
  --gap-seccion: 80px;
  --pad-card: 24px;
  --gap: 16px;

  /* ── Elevación: una sola sombra, muy tenue ───────────────────────────── */
  --sombra: rgba(38, 42, 62, .06) 0 5px 25px 0;
}

* { box-sizing: border-box; }
/* Sin `scroll-behavior: smooth` global: los saltos de la app lo piden explícito,
   y el del primer error tiene que ser instantáneo. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-body-sm);
  font-weight: 500;
  line-height: var(--lh-body-sm);
}

h1, h2, h3, p, ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
img { display: block; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Etiquetas chicas: 14 px, sin versalitas ni tracking (la referencia no ajusta
   el espaciado de letras en ningún tamaño). */
.rot { font-size: var(--t-caption); font-weight: 600; color: var(--pizarra); }

.membrete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.membrete__fila {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--s16) var(--s24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
}

.membrete__logo { display: inline-flex; align-items: center; }

.membrete__logo img { height: 40px; width: auto; display: block; }

.menu { display: flex; align-items: center; gap: var(--s8); }

.menu__link {
  padding: var(--s8);
  border-radius: var(--r-pill);
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}

.menu__link:hover { color: var(--acento-hondo); text-decoration: underline; text-underline-offset: 4px; }

.menu__grupo { position: relative; }

.menu__link--boton {
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menu__link--boton:hover { text-decoration: none; }

.menu__caret { transition: transform .15s ease; }

.menu__link--boton[aria-expanded="true"] { color: var(--acento-hondo); }

.menu__link--boton[aria-expanded="true"] .menu__caret { transform: rotate(180deg); }

.desplegable {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: 288px;
  max-width: calc(100vw - 32px);
  /* En pantallas bajas, 11 filas no entran: se limita y scrollea. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: var(--s8);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra);
}

.desplegable[hidden] { display: none; }

.desplegable__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  padding: 11px var(--s16);
  border-radius: var(--r-sm);
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}

.desplegable__fila:hover { background: var(--niebla); color: var(--acento-hondo); text-decoration: none; }

.desplegable__fila--todo { font-weight: 600; }

.desplegable__cuenta { font-size: var(--t-caption); font-weight: 500; color: var(--pizarra); font-variant-numeric: tabular-nums; }

.desplegable__fila:hover .desplegable__cuenta { color: var(--acento-hondo); }

.desplegable__sep { height: 1px; background: var(--linea); margin: var(--s8) var(--s16); }

.parte__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 6px var(--s16);
  border-radius: var(--r-pill);
  background: var(--acento-wash);
  color: var(--acento-hondo);
  font-size: var(--t-caption);
  font-weight: 600;
  margin-bottom: var(--s24);
}

.parte__marca b { font-weight: 700; }

.boton {
  border: 1px solid var(--tinta);
  border-radius: var(--r-pill);
  background: var(--blanco);
  color: var(--tinta);
  padding: 12px var(--s24);
  font-size: var(--t-body-sm);
  font-weight: 600;
  cursor: pointer;
}

.boton:hover { background: var(--tinta); color: var(--blanco); }

.boton--pri { background: var(--acento); border-color: var(--acento); color: var(--blanco); }

.boton--pri:hover { background: var(--acento-hondo); border-color: var(--acento-hondo); }

.boton--pri[disabled] { background: var(--niebla); border-color: var(--niebla); color: var(--pizarra); cursor: default; }

.boton--pri[disabled]:hover { background: var(--niebla); border-color: var(--niebla); color: var(--pizarra); }

.boton--ancho { width: 100%; }

@media (max-width: 960px) {  .membrete__logo img { height: 32px; }
  .menu__link { font-size: var(--t-caption); padding: 6px; }
}

.pie {
  background: var(--niebla);
  padding: var(--s64) var(--s24) var(--s40);
  margin-top: var(--s80);
}

.pie__cuerpo {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s48);
  align-items: start;
}

.pie__titulo {
  font-size: var(--t-body-sm);
  font-weight: 700;
  padding-bottom: var(--s16);
  margin-bottom: var(--s16);
  border-bottom: 1px solid var(--linea-fuerte);
  max-width: 240px;
}

.pie__mail { font-size: var(--t-caption); font-weight: 700; margin-bottom: var(--s8); }

.pie__mail a { color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }

.pie__mail a:hover { color: var(--acento-hondo); text-decoration: underline; text-underline-offset: 3px; }

.pie__dato { font-size: var(--t-caption); font-weight: 500; color: var(--pizarra); }

.pie__dato a { color: inherit; text-decoration: none; }

.pie__dato a:hover { color: var(--acento-hondo); text-decoration: underline; text-underline-offset: 3px; }

.pie__marca { display: grid; place-items: center; }

.pie__marca img { height: 72px; width: auto; }

.pie__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.pie__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: 5px 0;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}

.pie__link:hover { color: var(--acento-hondo); }

.pie__flecha { display: inline-flex; color: var(--acento); }

.pie__link:hover .pie__flecha { color: var(--acento-hondo); }

.pie__legal {
  max-width: var(--ancho);
  margin: var(--s48) auto 0;
  padding-top: var(--s24);
  border-top: 1px solid var(--linea-fuerte);
}

.pie__legal p { font-size: 12.5px; line-height: 1.6; font-weight: 500; color: var(--pizarra); }

.pie__copyright { margin-top: var(--s8); }

@media (max-width: 960px) {  .pie { padding: var(--s40) var(--s24) var(--s32); margin-top: var(--s56); }
  .pie__cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s32);
    text-align: center;
  }
  .pie__titulo { margin-inline: auto; }
  .pie__menu { align-items: center; }
  .pie__legal { text-align: left; }
}