/* ==========================================================================
   CAPS Seguros — base.css
   Tokens, reset, tipografia, botones, header, footer, FAB y modal.
   Se carga en las 3 paginas. Mobile-first: todo lo de abajo es movil,
   solo dos media queries (768px / 1100px) ensanchan a tablet y escritorio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Tokens de marca
   -------------------------------------------------------------------------- */
:root {
  /* Colores del brief */
  --caps-navy:        #071457;
  --caps-blue:        #021b79;
  --caps-orange:      #E8822A;
  --caps-orange-dark: #C96A18;

  /* Neutros */
  --caps-ink:         #10131f;
  --caps-body:        #414759;
  --caps-muted:       #6B7280;
  --caps-line:        #E3E7F0;
  --caps-white:       #FFFFFF;
  --caps-gray-bg:     #F9FAFC;
  --caps-blue-soft:   #EEF2FB;

  /* Estados */
  --caps-green:       #1FA855;
  --caps-star:        #F5B301;

  /* Tipografia */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Medidas. --wrap-max: none = el contenido ocupa todo el ancho de pantalla;
     los bloques de texto llevan su propio tope para que la linea no se alargue. */
  --wrap-max:   none;
  --wrap-pad:   20px;
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --header-h:   64px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(7, 20, 87, .06), 0 2px 8px rgba(7, 20, 87, .06);
  --shadow-md: 0 4px 16px rgba(7, 20, 87, .10);
  --shadow-lg: 0 12px 32px rgba(7, 20, 87, .16);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--caps-body);
  background: var(--caps-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `clip` evita que los rieles horizontales amplien el area escalable en iOS,
   pero no crea un segundo contenedor de scroll como `hidden`. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--caps-blue); }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--caps-ink);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: balance;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--caps-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Iconos — sprite SVG en linea (estilo Lucide, MIT). Se declara una vez al
   inicio del <body> de cada pagina: cero peticiones y cero dependencias de CDN.
   El color se hereda con currentColor; el tamano se controla con las clases.
   -------------------------------------------------------------------------- */
.icon-sprite { display: none; }

.ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  vertical-align: -.22em;
}
.ico--sm { width: 16px; height: 16px; }
.ico--md { width: 22px; height: 22px; }

/* Accesible pero invisible (etiquetas de lectores de pantalla) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.section { padding-block: 28px; }

.section--navy   { background: var(--caps-navy);      color: rgba(255,255,255,.88); }
.section--soft   { background: var(--caps-blue-soft); }
.section--gray   { background: var(--caps-gray-bg); }
.section--orange { background: var(--caps-orange);    color: var(--caps-navy); }

.section--navy h2 { color: var(--caps-white); }
.section--orange h2 { color: var(--caps-navy); }

.eyebrow {
  margin: 0 0 14px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Botones — ancho completo en movil, 52px de alto (area tactil comoda)
   -------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 13px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--caps-orange);
  border-color: var(--caps-orange);
  color: var(--caps-navy);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--caps-orange-dark); border-color: var(--caps-orange-dark); }

.btn--secondary {
  background: var(--caps-white);
  border-color: var(--caps-navy);
  color: var(--caps-navy);
}
.btn--secondary:hover { background: var(--caps-blue-soft); }

/* Para usar sobre el fondo naranja */
.btn--white {
  background: var(--caps-white);
  border-color: var(--caps-white);
  color: var(--caps-navy);
  box-shadow: var(--shadow-sm);
}
.btn--white:hover { background: #FFF6EE; }

.btn--outline-white {
  background: transparent;
  border-color: rgba(255,255,255,.85);
  color: var(--caps-white);
}
.btn--outline-white:hover { background: rgba(255,255,255,.14); }

.btn__note {
  display: block;
  font-size: .8125rem;
  font-weight: 400;
  opacity: .85;
}

/* --------------------------------------------------------------------------
   6. Header sticky
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--caps-white);
  border-bottom: 1px solid var(--caps-line);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--header-h);
}

.header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  margin-right: auto;
}
.header__logo img { height: 38px; width: auto; }

/* Enlace "Hablar con un experto": bajo 375px queda solo el icono para que
   siga cabiendo junto al logo y al boton del menu. */
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--caps-orange);
  color: var(--caps-navy);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header__cta:hover { background: var(--caps-orange-dark); }
.header__cta-text { display: none; }

@media (min-width: 375px) and (max-width: 767px) {
  .header__cta { padding-inline: 10px; font-size: .75rem; }
  .header__cta-text { display: inline; }
}

.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--caps-line);
  border-radius: var(--radius-sm);
  background: var(--caps-white);
  color: var(--caps-navy);
  font-size: 1.25rem;
  cursor: pointer;
}
.header__toggle:hover { background: var(--caps-gray-bg); }

/* Menu desplegable. Sin redes sociales: el embudo no se rompe.
   Se despliega con el truco de grid 0fr -> 1fr: anima la altura sin que el JS
   tenga que medir nada y funciona con contenido de alto variable. */
.header__menu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  /* Borde y padding en el contenedor, no en el hijo: el padding de un hijo no
     colapsa con la fila y dejaria una franja visible con el menu cerrado. */
  border-top: 0 solid var(--caps-line);
  padding-block: 0;
  transition: grid-template-rows .28s ease, padding-block .28s ease,
              border-top-width .28s ease, visibility 0s linear .28s;
}
.header__menu.is-open {
  grid-template-rows: 1fr;
  border-top-width: 1px;
  padding-block: 8px 16px;
  visibility: visible;
  transition: grid-template-rows .28s ease, padding-block .28s ease,
              border-top-width .28s ease, visibility 0s;
}
/* min-height:0 es lo que permite que la fila llegue realmente a 0 */
.header__menu-inner { min-height: 0; }
.header__menu ul { margin: 0; padding: 0; list-style: none; }
.header__menu a {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--caps-line);
  color: var(--caps-ink);
  font-weight: 600;
  text-decoration: none;
}
.header__menu a:hover { color: var(--caps-blue); }
.header__menu li:last-child a { border-bottom: 0; }
.header__menu .btn { margin-top: 12px; }

/* --------------------------------------------------------------------------
   7. Footer oscuro
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 40px 96px; /* espacio extra abajo para no chocar con el FAB */
  background: var(--caps-navy);
  color: rgba(255,255,255,.82);
  font-size: .9375rem;
}
.footer__logo { margin-bottom: 20px; }
.footer__logo img { height: 44px; width: auto; }
.footer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--caps-white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer__title::before {
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--caps-orange);
  content: '';
}
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 7px;
  line-height: 1.5;
}
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--caps-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.footer__emails { margin-top: 16px; }
.footer__email-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__email-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  padding-block: 0;
  color: var(--caps-white);
  font-size: .8125rem;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.footer__email-list .ico { color: rgba(255,255,255,.72); }
.footer__legal {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .8125rem;
  color: rgba(255,255,255,.62);
}

/* --------------------------------------------------------------------------
   8. Boton flotante de WhatsApp — siempre visible
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--caps-white);
  box-shadow: var(--shadow-lg);
}
.fab:hover { background: #1DB954; }
.fab svg { width: 30px; height: 30px; fill: currentColor; }

/* --------------------------------------------------------------------------
   9. Modal del formulario breve
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(7, 20, 87, .55);
  opacity: 0;
  transition: opacity .26s ease;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

/* En movil sube desde abajo como una hoja; en escritorio (ver breakpoint)
   entra con un leve acercamiento. */
.modal__panel {
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px 20px 28px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--caps-white);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .68, .3, 1);
}
.modal.is-open .modal__panel { transform: translateY(0); }

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
/* <p>, no <h2>: el modal no debe entrar en la jerarquia SEO de la pagina. */
.modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--caps-ink);
}

.modal__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--caps-line);
  border-radius: var(--radius-sm);
  background: var(--caps-white);
  color: var(--caps-ink);
  cursor: pointer;
}

.modal__intro { margin: 8px 0 18px; font-size: .9375rem; color: var(--caps-muted); }

/* --------------------------------------------------------------------------
   10. Campos de formulario (compartidos por el modal y el cotizador)
   -------------------------------------------------------------------------- */
.field { margin-bottom: 14px; }

.field label,
.field .field__label {
  display: block;
  margin-bottom: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--caps-ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #C9D1E4;
  border-radius: var(--radius-sm);
  background: var(--caps-white);
  font-size: 1rem; /* 16px evita el zoom automatico de iOS */
  color: var(--caps-ink);
}
.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--caps-blue);
  outline: 2px solid rgba(2, 27, 121, .18);
  outline-offset: 0;
}

.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23071457' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.field__error {
  display: block;
  margin-top: 5px;
  font-size: .8125rem;
  font-weight: 600;
  color: #C0392B;
}
.field__error[hidden] { display: none; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #C0392B; }

.form__status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--caps-blue-soft);
  font-size: .875rem;
  color: var(--caps-navy);
}
.form__status[hidden] { display: none; }

.form__legal { margin-top: 12px; font-size: .75rem; color: var(--caps-muted); }

/* --------------------------------------------------------------------------
   11. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   12. Tablet (>=768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --wrap-pad: 32px; --header-h: 76px; }

  body { font-size: 17px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.875rem; }
  h3 { font-size: 1.25rem; }

  .section { padding-block: 72px; }

  .header__logo img { height: 46px; }
  .header__cta { padding: 10px 16px; font-size: .9375rem; }
  .header__cta-text { display: inline; }

  /* Los botones dejan de ser ancho completo cuando hay espacio */
  .btn { width: auto; min-width: 260px; }
  .btn--block { width: 100%; }

  .modal { align-items: center; padding: 24px; }
  .modal__panel {
    max-width: 520px;
    padding: 28px;
    border-radius: var(--radius-lg);
    transform: translateY(16px) scale(.97);
  }
  .modal.is-open .modal__panel { transform: translateY(0) scale(1); }

  .fab { right: 24px; bottom: 24px; width: 62px; height: 62px; }

  .footer { padding-block: 56px; }
  .footer__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px 40px;
    align-items: start;
  }
  .footer__logo { margin-bottom: 0; }
  .footer__details, .footer__emails { grid-column: 2; }
  .footer__emails { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   13. Escritorio (>=1100px)
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  :root { --wrap-pad: 48px; }
  h1 { font-size: 2.875rem; }
  .section { padding-block: 88px; }
}

@media (min-width: 1280px) {
  .footer__grid {
    grid-template-columns: auto minmax(330px, .8fr) minmax(360px, 1fr);
    gap: 40px;
  }
  .footer__details, .footer__emails { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   14. Pantallas anchas (>=1600px) — mas aire lateral, sin volver a encajonar
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --wrap-pad: 72px; }
}