/* ==========================================================================
   GPA GARANTIA — capa de tema (v1)
   Cargar SIEMPRE la última, después de mbr-additional.css.
   No modifica el HTML de Mobirise: sólo redefine tokens y componentes.
   ========================================================================== */

:root {
  /* Paleta derivada del logotipo */
  --gpa-red:        #D6132E;   /* carmesí de la G */
  --gpa-red-hi:     #EE1111;   /* rojo terminal de la A */
  --gpa-red-deep:   #9E0C1F;   /* estado activo */
  --gpa-ink:        #0A0B0D;   /* negro de GARANTIA */
  --gpa-graphite:   #16181D;   /* superficie oscura */
  --gpa-steel:      #6A7180;   /* texto secundario */
  --gpa-line:       #E2E4E9;   /* filete */
  --gpa-mist:       #F5F6F8;   /* superficie clara */
  --gpa-white:      #FFFFFF;

  --gpa-display: 'Archivo', 'Barlow', system-ui, sans-serif;
  --gpa-body:    'Barlow', system-ui, sans-serif;

  --gpa-shadow-1: 0 1px 2px rgba(10,11,13,.04), 0 8px 24px -12px rgba(10,11,13,.18);
  --gpa-shadow-2: 0 2px 4px rgba(10,11,13,.06), 0 22px 48px -20px rgba(10,11,13,.30);
  --gpa-ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   1. Tipografía
   Display: Archivo (grotesca industrial, misma construcción que el logotipo)
   Texto:   Barlow
   -------------------------------------------------------------------------- */

body,
.mbr-text,
p,
li {
  font-family: var(--gpa-body);
  color: var(--gpa-graphite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.mbr-section-title,
.mbr-section-subtitle,
.item-title,
.card-title,
.navbar-caption {
  font-family: var(--gpa-display) !important;
  letter-spacing: -.022em;
  color: var(--gpa-ink);
}

.display-1 { font-family: var(--gpa-display) !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.display-2 { font-family: var(--gpa-display) !important; font-weight: 800; letter-spacing: -.03em;  line-height: 1.08; }
.display-5 { font-family: var(--gpa-body) !important;    font-weight: 400; letter-spacing: -.005em; line-height: 1.45; }
.display-7 { font-family: var(--gpa-display) !important; font-weight: 700; letter-spacing: -.02em;  line-height: 1.2; }
.display-4 { font-family: var(--gpa-body) !important;    font-weight: 500; }

/* Antetítulos: versalita ancha con filete rojo — etiqueta la sección, no decora */
.mbr-section-subtitle {
  font-family: var(--gpa-display) !important;
  font-weight: 600;
  font-size: .78rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gpa-red) !important;
}

/* Texto largo: medida de lectura contenida */
.mbr-text.display-5 { max-width: 62ch; }
.mbr-text.display-5:not([class*="text-center"]) { margin-inline: 0; }
[class*="text-center"] .mbr-text.display-5 { margin-inline: auto; }

/* --------------------------------------------------------------------------
   2. Botones — la firma: filete interior de 1px, igual que las letras del logo
   -------------------------------------------------------------------------- */

body .btn,
body a.btn {
  font-family: var(--gpa-display) !important;
  font-weight: 600;
  font-size: .94rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px !important;
  border-width: 0 !important;
  padding: .95rem 1.9rem !important;
  transition: transform .25s var(--gpa-ease), box-shadow .25s var(--gpa-ease), background-color .25s var(--gpa-ease);
  will-change: transform;
}

body .btn-secondary,
body .btn-secondary:active,
body .btn-info,
body .btn-info:active,
body .btn-primary,
body .btn-primary:active {
  background-color: var(--gpa-red) !important;
  background-image: linear-gradient(96deg, var(--gpa-red) 0%, var(--gpa-red-hi) 100%);
  border-color: transparent !important;
  color: var(--gpa-white) !important;
  /* filete interior = keyline del logotipo */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 10px 22px -14px rgba(214,19,46,.85) !important;
}

body .btn-secondary:hover,
body .btn-secondary:focus,
body .btn-secondary.active,
body .btn-info:hover,
body .btn-info:focus,
body .btn-primary:hover,
body .btn-primary:focus {
  background-color: var(--gpa-red-hi) !important;
  background-image: linear-gradient(96deg, var(--gpa-red-hi) 0%, var(--gpa-red) 100%);
  color: var(--gpa-white) !important;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 16px 32px -14px rgba(214,19,46,.95) !important;
}

body .btn-secondary:disabled,
body .btn-secondary.disabled {
  background-image: none;
  background-color: var(--gpa-steel) !important;
  box-shadow: none !important;
}

/* Botón secundario contextual: sobre fondos oscuros pasa a contorno */
body .btn-secondary-outline,
body .btn-secondary-outline:active {
  background: transparent !important;
  color: var(--gpa-red) !important;
  box-shadow: inset 0 0 0 1px var(--gpa-red) !important;
}
body .btn-secondary-outline:hover,
body .btn-secondary-outline:focus {
  background: var(--gpa-red) !important;
  color: var(--gpa-white) !important;
  box-shadow: inset 0 0 0 1px var(--gpa-red) !important;
}

body .btn .mbr-iconfont-btn { margin-right: .5rem; }

/* --------------------------------------------------------------------------
   3. Navbar — fija, filete inferior, subrayado rojo que crece
   -------------------------------------------------------------------------- */

.menu.menu1 {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.menu.menu1 .navbar {
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--gpa-line);
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  transition: box-shadow .3s var(--gpa-ease), background-color .3s var(--gpa-ease);
}
.menu.menu1 .navbar.opened { background: var(--gpa-white) !important; }
.menu.menu1 .navbar:hover { box-shadow: 0 10px 30px -24px rgba(10,11,13,.55); }

.navbar-logo img,
.navbar-brand img {
  height: 2.6rem !important;
  width: auto;
  display: block;
}

body .navbar-nav .nav-item .nav-link {
  font-family: var(--gpa-display) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  letter-spacing: .01em;
  color: var(--gpa-ink) !important;
  padding: 12px 18px !important;
  background: transparent !important;
}

body .navbar-nav .nav-item > .nav-link::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 2px;
  background: var(--gpa-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--gpa-ease);
}
body .navbar-nav .nav-item > .nav-link:hover::before,
body .navbar-nav .nav-item > .nav-link:focus-visible::before,
body .navbar-nav .nav-item.open > .nav-link::before {
  transform: scaleX(1);
}
body .navbar-nav .nav-item .nav-link:hover { color: var(--gpa-red) !important; }

body .dropdown-menu {
  border: 1px solid var(--gpa-line) !important;
  border-radius: 6px !important;
  box-shadow: var(--gpa-shadow-2);
  padding: .4rem !important;
  background: var(--gpa-white) !important;
}
body .dropdown-item {
  font-family: var(--gpa-body) !important;
  font-weight: 500 !important;
  color: var(--gpa-graphite) !important;
  border-radius: 4px;
  padding: .6rem .9rem !important;
}
body .dropdown-item:hover,
body .dropdown-item:focus {
  background: var(--gpa-mist) !important;
  color: var(--gpa-red) !important;
}

.navbar .hamburger span { background-color: var(--gpa-ink) !important; }

/* --------------------------------------------------------------------------
   4. Superficies y tarjetas
   -------------------------------------------------------------------------- */

.items-wrapper .item .item-wrapper,
.item-wrapper.large-radius,
.card-wrapper {
  background: var(--gpa-white);
  border: 1px solid var(--gpa-line);
  border-radius: 10px !important;
  box-shadow: var(--gpa-shadow-1) !important;
  overflow: hidden;
  transition: transform .35s var(--gpa-ease), box-shadow .35s var(--gpa-ease), border-color .35s var(--gpa-ease);
}

.items-wrapper .item:hover .item-wrapper,
.items-wrapper .item:focus-within .item-wrapper {
  transform: translateY(-4px);
  border-color: rgba(214,19,46,.35);
  box-shadow: var(--gpa-shadow-2) !important;
}

.items-wrapper .item .item-wrapper .item-img img { transition: transform .6s var(--gpa-ease) !important; }
.items-wrapper .item:hover .item-wrapper .item-img img { transform: scale(1.06) !important; }

.item-content .item-title { margin-bottom: .5rem; }
.item-content .mbr-text { color: var(--gpa-steel); }

/* Iconos de cobertura: rojo en contenido, heredado dentro de botones */
.item-wrapper .mbr-iconfont,
.item-wrapper .mobi-mbri,
.card-wrapper .mbr-iconfont,
.iconfont-wrapper .mbr-iconfont { color: var(--gpa-red); }

body .btn .mbr-iconfont,
body .btn .mobi-mbri,
body .btn .mbr-iconfont-btn { color: inherit !important; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.header01 .mbr-section-title.display-1 {
  font-size: clamp(2.6rem, 6.2vw, 5.2rem) !important;
  text-transform: uppercase;
  color: var(--gpa-ink) !important;
}
.header01 .content-wrapper .mbr-text {
  color: var(--gpa-graphite) !important;
  font-size: 1.2rem !important;
  max-width: 54ch;
}
.header01 .border-wrapper {
  border: 0 !important;
  height: 3px;
  width: 96px;
  background: linear-gradient(90deg, var(--gpa-red), var(--gpa-red-hi));
  margin: 1.75rem 0 2rem;
  border-radius: 2px;
}
.header01 .card { background: transparent !important; border: 0 !important; }

/* --------------------------------------------------------------------------
   6. Pie
   -------------------------------------------------------------------------- */

.footer1 { background-color: var(--gpa-ink) !important; }
.footer1 .mbr-section-title,
.footer1 .mbr-section-title a { color: var(--gpa-white) !important; }
.footer1 .mbr-text,
.footer1 p,
.footer1 li { color: rgba(255,255,255,.66) !important; }
.footer1 a:not(.btn) { color: rgba(255,255,255,.86) !important; text-decoration: none; transition: color .2s var(--gpa-ease); }
.footer1 a:not(.btn):hover { color: var(--gpa-red-hi) !important; }
.footer1 .socicon { transition: color .2s var(--gpa-ease); }
.footer1 .socicon:hover { color: var(--gpa-red-hi) !important; }

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */

body .form-control,
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body textarea,
body select {
  font-family: var(--gpa-body) !important;
  border: 1px solid var(--gpa-line) !important;
  border-radius: 6px !important;
  background: var(--gpa-white) !important;
  color: var(--gpa-ink) !important;
  padding: .85rem 1rem !important;
  transition: border-color .2s var(--gpa-ease), box-shadow .2s var(--gpa-ease);
}
body .form-control:focus,
body textarea:focus,
body select:focus {
  border-color: var(--gpa-red) !important;
  box-shadow: 0 0 0 3px rgba(214,19,46,.14) !important;
  outline: none;
}

/* --------------------------------------------------------------------------
   8. Enlaces de texto — filete rojo en lugar de subrayado completo
   -------------------------------------------------------------------------- */

.mbr-text a:not(.btn),
li a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--gpa-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(214,19,46,.32);
  transition: border-color .2s var(--gpa-ease);
}
.mbr-text a:not(.btn):hover,
li a:not(.btn):not(.nav-link):not(.dropdown-item):hover { border-bottom-color: var(--gpa-red); }

/* --------------------------------------------------------------------------
   9. Suelo de calidad: foco visible, movimiento reducido, móvil
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gpa-red);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gpa-red); color: var(--gpa-white); }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .items-wrapper .item:hover .item-wrapper { transform: none; }
  body .btn-secondary:hover { transform: none; }
}

@media (max-width: 991px) {
  .menu.menu1 .navbar { background: var(--gpa-white) !important; }
  body .navbar-nav .nav-item > .nav-link::before { display: none; }
  body .navbar-nav .nav-item .nav-link { padding: 14px 4px !important; }
  .navbar-logo img, .navbar-brand img { height: 2.2rem !important; }
  .header01 .mbr-text.display-5 { max-width: 100%; }
}

@media (max-width: 575px) {
  body .btn, body a.btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.2rem !important;
  }
  .mbr-section-btn { width: 100%; }
}