:root {
  --navy: #06111F;
  --navy-2: #0B1E2D;
  --ink: #102033;
  --muted: #5e6a7a;
  --line: #E7ECF2;
  --white: #FFFFFF;
  --soft: #F6F8FB;
  --cyan: #19C7D4;
  --amber: #F5A623;
  --green: #25D366;
  --edge: #2A3B4D;
  --radius: 26px;
  --radius-sm: 16px;
  --shadow: 0 24px 80px rgba(6, 17, 31, .13);
  --shadow-soft: 0 12px 40px rgba(6, 17, 31, .08);
  --max: 1180px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

img {
  max-width: 100%;
  display: block
}

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

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

.skip {
  position: absolute;
  left: -999px
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 99;
  background: #fff;
  padding: 10px;
  border-radius: 10px
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: auto
}

.section {
  padding: 92px 0
}

.light {
  background: linear-gradient(180deg, #fff, #f8fbfd)
}

.dark,
.soft-dark {
  background: radial-gradient(circle at 80% 0%, rgba(25, 199, 212, .18), transparent 35%), linear-gradient(180deg, var(--navy), #030913);
  color: #fff
}

.soft-dark {
  background: linear-gradient(180deg, #071421, #0a1827)
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(231, 236, 242, .8)
}

.nav-shell {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 22px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--navy);
  line-height: .95
}

.brand img {
  width: 48px
}

.brand small {
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: .08em
}

.main-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 650;
  color: #2e3b4c
}

.main-nav a {
  padding: 10px 2px;
  border-bottom: 2px solid transparent
}

.main-nav a.active,
.main-nav a:hover {
  color: var(--navy);
  border-color: var(--cyan)
}

.menu-toggle {
  display: none
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s transform, .2s box-shadow, .2s opacity
}

.btn:hover {
  transform: translateY(-1px)
}

.btn-small {
  padding: 10px 17px;
  font-size: 14px
}

.btn-amber {
  background: var(--amber);
  color: #06111f;
  box-shadow: 0 14px 30px rgba(245, 166, 35, .24)
}

.btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 14px 30px rgba(37, 211, 102, .22)
}

.btn-soft {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25)
}

.btn-soft-dark {
  background: #eff4f8;
  color: var(--navy)
}

.btn-outline {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line)
}

.btn-full {
  width: 100%
}

.text-link {
  font-weight: 800;
  color: #008f9b;
  cursor: pointer
}

.hero {
  padding: 86px 0
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 900;
  color: var(--cyan)
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.02;
  letter-spacing: -.04em
}

h1 {
  font-size: clamp(48px, 6vw, 86px);
  max-width: 740px
}

h2 {
  font-size: clamp(34px, 4vw, 58px)
}

h3 {
  font-size: 24px
}

.lead {
  font-size: clamp(18px, 2vw, 22px);
  color: #d8e3ef;
  max-width: 620px
}

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 30px 0
}

.trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px
}

.trust-row span {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 13px;
  font-weight: 800;
  color: #dfeaf5
}

.hero-card {
  border-radius: 36px;
  overflow: hidden;
  background: #09192a;
  box-shadow: 0 30px 120px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .12)
}

.hero-card img {
  height: 520px;
  width: 100%;
  object-fit: cover;
  opacity: .93
}

.section-head {
  max-width: 760px;
  margin-bottom: 34px
}

.section-head.centered {
  text-align: center;
  margin-inline: auto
}

.section-head p {
  color: var(--muted);
  font-size: 18px
}

.section-head.invert p {
  color: #c8d3df
}

.section-title {
  text-align: center;
  margin-bottom: 26px
}

.mini-grid,
.stats-grid,
.testimonial-grid {
  display: grid;
  gap: 16px
}

.mini-grid.four {
  grid-template-columns: repeat(4, 1fr)
}

.mini-grid article,
.tools-card,
.product-card,
.quote-form,
.stats-grid article,
.testimonial-grid article,
.branch-card,
.faq-item,
.modal-card {
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft)
}

.mini-grid article {
  padding: 22px
}

.mini-grid b {
  display: block;
  font-size: 18px;
  margin-bottom: 6px
}

.mini-grid span {
  color: var(--muted)
}

.tools-card {
  padding: 22px;
  margin-bottom: 24px
}

.search-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 8px;
  color: var(--navy)
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  outline: 0;
  color: var(--navy)
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(25, 199, 212, .12)
}

.category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px
}

.category-tab {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 11px 15px;
  font-weight: 800;
  color: #334155;
  cursor: pointer
}

.category-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.result-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 18px 0 24px;
  color: var(--muted)
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.product-card {
  overflow: hidden
}

.product-card .img-box {
  background: linear-gradient(180deg, #fff, #f3f6f9);
  height: 178px;
  display: grid;
  place-items: center
}

.product-card .img-box img {
  max-width: 78%;
  max-height: 140px;
  object-fit: contain
}

.product-card .body {
  padding: 18px
}

.product-card h3 {
  font-size: 20px
}

.product-card p {
  color: var(--muted);
  font-size: 14px
}

.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0
}

.tags span {
  font-size: 11px;
  background: #eef3f7;
  color: #405060;
  border-radius: 999px;
  padding: 5px 8px
}

.card-actions {
  display: flex;
  gap: 8px
}

.card-actions .btn {
  padding: 10px 12px;
  font-size: 13px;
  flex: 1
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.service-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  overflow: hidden
}

.service-card img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  opacity: .82
}

.service-card .body {
  padding: 18px
}

.service-card p {
  color: #c8d3df
}

.process-card {
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, .05)
}

.process-card div {
  display: flex;
  gap: 12px;
  align-items: center
}

.process-card b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cyan);
  color: #06202b
}

.quote-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: start
}

.quote-form {
  padding: 24px
}

.quote-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px
}

.quote-form legend {
  font-weight: 900;
  margin-bottom: 10px
}

.vehicle-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px
}

.vehicle-options button {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 12px 8px;
  cursor: pointer;
  font-weight: 750
}

.vehicle-options button.active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(25, 199, 212, .12)
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.quote-form label {
  display: block;
  font-size: 13px;
  font-weight: 850;
  color: var(--navy);
  margin: 0 0 14px
}

.quote-aside {
  position: sticky;
  top: 92px
}

.dark-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  overflow: hidden
}

.dark-card img {
  height: 210px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px
}

.check-list {
  padding-left: 18px;
  color: #d8e3ef
}

.stats-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 20px
}

.stats-grid article {
  padding: 24px;
  text-align: center
}

.stats-grid strong {
  display: block;
  color: var(--navy);
  font-size: 28px;
  line-height: 1.1
}

.stats-grid span,
.testimonial-grid p {
  color: var(--muted)
}

.testimonial-grid {
  grid-template-columns: repeat(3, 1fr)
}

.testimonial-grid article {
  padding: 24px;
  color: #ffb02e
}

.testimonial-grid b {
  color: var(--navy)
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.branch-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
  padding: 22px
}

.branch-type {
  font-size: 12px;
  color: var(--cyan);
  border: 1px solid rgba(25, 199, 212, .5);
  padding: 4px 8px;
  border-radius: 999px;
  margin-left: 8px
}

.branch-card p {
  color: #c8d3df
}

.map img {
  height: 170px;
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1)
}

.branch-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px
}

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px
}

.faq-list {
  display: grid;
  gap: 10px
}

.faq-item {
  border-radius: 18px;
  overflow: hidden
}

.faq-question {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 18px;
  text-align: left;
  font-weight: 900;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer
}

.faq-question span {
  color: var(--cyan)
}

.faq-answer {
  display: none;
  padding: 0 18px 18px;
  color: var(--muted)
}

.faq-item.open .faq-answer {
  display: block
}

.site-footer {
  background: #030913;
  color: #c8d3df;
  padding: 42px 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 28px
}

.site-footer img {
  width: 150px;
  margin-bottom: 12px
}

.site-footer b {
  color: #fff
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.modal.show {
  display: flex
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 9, 19, .68);
  backdrop-filter: blur(10px)
}

.modal-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: 22px
}

.modal-card img {
  height: 220px;
  width: 100%;
  object-fit: contain;
  background: #f6f8fb;
  border-radius: 20px
}

.modal-close {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 24px;
  cursor: pointer
}

.reveal {
  animation: fadeUp .55s ease both
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.footer-legal {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  line-height: 1.7;
  color: #9fb0c2;
}

.footer-legal p {
  margin: 0 0 10px;
}

.footer-legal strong,
.footer-legal b {
  color: #fff;
}

.footer-legal-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.footer-legal-links a {
  color: var(--cyan);
  font-weight: 800;
}

.footer-legal-links a:hover {
  text-decoration: underline;
}

.footer-legal-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.footer-legal-blocks article {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}

.footer-legal-blocks article p {
  margin-top: 6px;
}


.product-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.page-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  padding: 10px 14px;
  min-width: 42px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: .2s transform, .2s background, .2s color, .2s opacity;
}

.page-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #f3f7fb;
}

.page-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.page-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.page-ellipsis {
  color: var(--muted);
  font-weight: 900;
  padding: 0 3px;
}

@media(max-width:980px) {
  .container {
    width: min(100% - 28px, var(--max))
  }

  .nav-shell {
    height: 64px
  }

  .brand span {
    display: none
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 9px 12px
  }

  .main-nav {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 72px;
    background: #fff;
    box-shadow: var(--shadow);
    border-radius: 20px;
    padding: 14px;
    display: none;
    flex-direction: column
  }

  .main-nav.open {
    display: flex
  }

  .nav-shell>.btn {
    display: none
  }

  .hero-grid,
  .quote-grid,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .hero-card img {
    height: 330px
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .mini-grid.four,
  .stats-grid,
  .testimonial-grid,
  .process-card,
  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .quote-aside {
    position: static
  }

  .vehicle-options {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:620px) {
  .section {
    padding: 64px 0
  }

  h1 {
    font-size: 44px
  }

  .hero {
    padding: 58px 0
  }

  .actions,
  .card-actions,
  .branch-actions {
    flex-direction: column
  }

  .product-grid,
  .service-grid,
  .mini-grid.four,
  .stats-grid,
  .testimonial-grid,
  .process-card,
  .branch-grid,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .result-bar {
    align-items: flex-start;
    flex-direction: column
  }

  .hero-card img {
    height: 260px
  }

  .category-tabs {
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px
  }

  .category-tab {
    white-space: nowrap
  }

  .footer-grid {
    gap: 18px
  }
}

.modal-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.modal-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

#quoteModal .modal-card img {
  margin-bottom: 16px;
}


@media(max-width:620px) {
  .footer-legal-blocks {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    font-size: 11px;
  }
}


@media(max-width:620px) {
  .product-pagination {
    justify-content: flex-start;
    gap: 7px;
  }

  .page-btn {
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .reveal {
    animation: none
  }

  .btn:hover {
    transform: none
  }
}


/* =========================================================
   Ajuste visual: logotipo y razón social en header
   Objetivo: ampliar el logo, mejorar contraste y hacer más
   visible la razón social en escritorio y móvil.
   ========================================================= */

.site-header .nav-shell {
  height: 86px;
}

.site-header .brand {
  gap: 14px;
  min-width: 300px;
  line-height: 1;
}

.site-header .brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 8px;
  background: linear-gradient(145deg, #06111F, #0B1E2D);
  border: 1px solid rgba(25, 199, 212, .30);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(6, 17, 31, .22);
}

.site-header .brand span {
  display: block;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 950;
  color: #06111F;
  letter-spacing: .02em;
}

.site-header .brand small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.15;
  color: #008F9B;
  font-weight: 950;
  letter-spacing: .08em;
}

/* Ajuste de navegación para compensar el logo más grande */
.site-header .main-nav {
  gap: 18px;
}

.site-header .btn-small {
  padding: 11px 18px;
}

/* Tablet y móvil */
@media(max-width:980px) {
  .site-header .nav-shell {
    height: 78px;
  }

  .site-header .brand {
    min-width: auto;
    max-width: 260px;
    gap: 11px;
  }

  .site-header .brand img {
    width: 58px;
    height: 58px;
    padding: 7px;
    border-radius: 16px;
  }

  .site-header .brand span {
    display: block;
    font-size: 14px;
    line-height: 1.05;
  }

  .site-header .brand small {
    font-size: 10px;
    line-height: 1.1;
  }

  .site-header .menu-toggle {
    margin-left: auto;
  }
}

@media(max-width:620px) {
  .site-header .nav-shell {
    height: 74px;
    gap: 12px;
  }

  .site-header .brand {
    max-width: 225px;
    gap: 9px;
  }

  .site-header .brand img {
    width: 52px;
    height: 52px;
    padding: 6px;
    border-radius: 14px;
  }

  .site-header .brand span {
    display: block;
    font-size: 12px;
  }

  .site-header .brand small {
    font-size: 9px;
    letter-spacing: .06em;
  }
}


/* =========================================================
   Hero principal con imagen extendida, difuminada y texto encima
   ========================================================= */

#inicio.hero.section.dark{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:none;
  color:#fff;
  padding:86px 0;
}

/* Imagen principal extendida como fondo */
#inicio.hero.section.dark::before{
  content:"";
  position:absolute;
  inset:-14px;
  background-image:url("assets/backgrounds/hero-inicio.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(3px);
  transform:scale(1.05);
  z-index:0;
}

/* Capa oscura para que el texto se lea mejor */
#inicio.hero.section.dark::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,9,19,.90) 0%, rgba(3,9,19,.72) 42%, rgba(3,9,19,.30) 100%),
    linear-gradient(180deg, rgba(3,9,19,.22) 0%, rgba(3,9,19,.88) 100%);
  z-index:1;
}

#inicio.hero.section.dark .container{
  position:relative;
  z-index:2;
}

/* El hero deja de dividirse en texto + imagen lateral */
#inicio .hero-grid{
  grid-template-columns:1fr;
  min-height:560px;
  align-items:center;
}

/* Texto sobre la imagen */
#inicio .hero-copy{
  max-width:780px;
  padding:60px 0;
}

#inicio .hero-copy .eyebrow{
  color:var(--cyan);
}

#inicio .hero-copy h2{
  max-width:850px;
  font-size:clamp(38px,5vw,68px);
  color:#fff;
  text-shadow:0 8px 28px rgba(0,0,0,.42);
}

#inicio .hero-copy .lead{
  max-width:700px;
  color:#e8f0f7;
  text-shadow:0 6px 18px rgba(0,0,0,.34);
}

/* Ocultamos la imagen lateral porque ahora es fondo */
#inicio .hero-card{
  display:none;
}

/* Diferenciales sobre imagen */
#inicio .trust-row span{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);
  color:#eef6ff;
}

/* Botones sobre imagen */
#inicio .btn-soft{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  backdrop-filter:blur(8px);
}

#inicio .btn-amber{
  box-shadow:0 16px 38px rgba(245,166,35,.35);
}

/* Responsive del hero */
@media(max-width:980px){
  #inicio.hero.section.dark{
    min-height:560px;
    padding:46px 0;
  }

  #inicio .hero-grid{
    min-height:500px;
  }

  #inicio .hero-copy{
    padding:46px 0;
  }

  #inicio.hero.section.dark::after{
    background:
      linear-gradient(90deg, rgba(3,9,19,.88) 0%, rgba(3,9,19,.72) 58%, rgba(3,9,19,.42) 100%),
      linear-gradient(180deg, rgba(3,9,19,.25) 0%, rgba(3,9,19,.88) 100%);
  }
}

@media(max-width:620px){
  #inicio.hero.section.dark{
    min-height:620px;
    padding:58px 0;
  }

  #inicio.hero.section.dark::before{
    filter:blur(2px);
    background-position:center right;
    transform:scale(1.04);
  }

  #inicio.hero.section.dark::after{
    background:
      linear-gradient(180deg, rgba(3,9,19,.84) 0%, rgba(3,9,19,.76) 52%, rgba(3,9,19,.92) 100%);
  }

  #inicio .hero-grid{
    min-height:500px;
  }

  #inicio .hero-copy h2{
    font-size:38px;
  }

  #inicio .hero-copy .lead{
    font-size:17px;
  }
}


/* =========================================================
   Ajuste final: hero más compacto en escritorio y móviles
   Reduce espacio superior/inferior manteniendo imagen difuminada
   ========================================================= */

#inicio.hero.section.dark{
  min-height:560px;
  padding:46px 0;
}

#inicio .hero-grid{
  min-height:430px;
}

#inicio .hero-copy{
  padding:24px 0;
  max-width:780px;
}

#inicio .hero-copy h2{
  font-size:clamp(36px,4.6vw,62px);
  line-height:1.04;
}

#inicio .hero-copy .lead{
  margin-top:22px;
  margin-bottom:0;
}

#inicio .actions{
  margin:26px 0 22px;
}

#inicio .trust-row{
  margin-top:18px;
}

/* Tablet */
@media(max-width:980px){
  #inicio.hero.section.dark{
    min-height:520px;
    padding:40px 0;
  }

  #inicio .hero-grid{
    min-height:400px;
  }

  #inicio .hero-copy{
    padding:18px 0;
  }

  #inicio .hero-copy h2{
    font-size:clamp(34px,5.6vw,54px);
  }

  #inicio .hero-copy .lead{
    font-size:18px;
    max-width:640px;
  }

  #inicio .actions{
    margin:24px 0 18px;
  }

  #inicio .trust-row{
    margin-top:16px;
  }
}

/* Celular */
@media(max-width:620px){
  #inicio.hero.section.dark{
    min-height:auto;
    padding:40px 0 34px;
  }

  #inicio .hero-grid{
    min-height:auto;
  }

  #inicio .hero-copy{
    padding:8px 0;
  }

  #inicio .hero-copy .eyebrow{
    font-size:10px;
    letter-spacing:.12em;
    margin-bottom:10px;
  }

  #inicio .hero-copy h2{
    font-size:32px;
    line-height:1.06;
    max-width:100%;
  }

  #inicio .hero-copy .lead{
    font-size:16px;
    line-height:1.5;
    margin-top:18px;
    max-width:100%;
  }

  #inicio .actions{
    margin:22px 0 16px;
    gap:10px;
  }

  #inicio .actions .btn{
    width:100%;
    padding:13px 18px;
  }

  #inicio .trust-row{
    margin-top:14px;
    gap:8px;
  }

  #inicio .trust-row span{
    padding:8px 10px;
    font-size:11px;
  }
}

/* Celulares muy pequeños */
@media(max-width:390px){
  #inicio.hero.section.dark{
    padding:34px 0 30px;
  }

  #inicio .hero-copy h2{
    font-size:29px;
  }

  #inicio .hero-copy .lead{
    font-size:15px;
  }
}


/* =========================================================
   Ajuste final hero: imagen más visible, sin blur y responsive
   Nota: este bloque va al final para sobrescribir ajustes previos.
   ========================================================= */

#inicio.hero.section.dark{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:none;
  color:#fff;
  padding:46px 0;
}

/* Imagen hero más clara: sin difuminado ni escala */
#inicio.hero.section.dark::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/backgrounds/hero-inicio.png");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  filter:none;
  transform:none;
  z-index:0;
}

/* Oscurece más el lado del texto y deja más visible la imagen al lado derecho */
#inicio.hero.section.dark::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(3,9,19,.94) 0%,
      rgba(3,9,19,.82) 34%,
      rgba(3,9,19,.50) 62%,
      rgba(3,9,19,.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,9,19,.14) 0%,
      rgba(3,9,19,.66) 100%
    );
  z-index:1;
}

#inicio.hero.section.dark .container{
  position:relative;
  z-index:2;
}

/* Texto encima de la imagen */
#inicio .hero-grid{
  grid-template-columns:1fr;
  min-height:430px;
  align-items:center;
}

#inicio .hero-copy{
  max-width:760px;
  padding:24px 0;
}

#inicio .hero-copy .eyebrow{
  color:var(--cyan);
}

#inicio .hero-copy h2{
  max-width:780px;
  font-size:clamp(36px,4.4vw,60px);
  line-height:1.04;
  color:#fff;
  text-shadow:0 8px 28px rgba(0,0,0,.45);
}

#inicio .hero-copy .lead{
  max-width:680px;
  color:#e8f0f7;
  margin-top:22px;
  margin-bottom:0;
  text-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Se oculta la imagen lateral porque ahora la imagen es fondo */
#inicio .hero-card{
  display:none;
}

#inicio .actions{
  margin:26px 0 22px;
}

#inicio .trust-row{
  margin-top:18px;
}

#inicio .trust-row span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
  color:#eef6ff;
}

#inicio .btn-soft{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  backdrop-filter:blur(8px);
}

#inicio .btn-amber{
  box-shadow:0 16px 38px rgba(245,166,35,.35);
}

/* Tablet */
@media(max-width:980px){
  #inicio.hero.section.dark{
    min-height:520px;
    padding:40px 0;
  }

  #inicio.hero.section.dark::before{
    background-position:center right;
  }

  #inicio.hero.section.dark::after{
    background:
      linear-gradient(
        90deg,
        rgba(3,9,19,.92) 0%,
        rgba(3,9,19,.78) 48%,
        rgba(3,9,19,.38) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3,9,19,.18) 0%,
        rgba(3,9,19,.72) 100%
      );
  }

  #inicio .hero-grid{
    min-height:400px;
  }

  #inicio .hero-copy{
    padding:18px 0;
    max-width:690px;
  }

  #inicio .hero-copy h2{
    font-size:clamp(34px,5.6vw,54px);
  }

  #inicio .hero-copy .lead{
    font-size:18px;
    max-width:640px;
  }

  #inicio .actions{
    margin:24px 0 18px;
  }

  #inicio .trust-row{
    margin-top:16px;
  }
}

/* Móvil */
@media(max-width:620px){
  #inicio.hero.section.dark{
    min-height:auto;
    padding:40px 0 34px;
  }

  #inicio.hero.section.dark::before{
    background-position:center;
  }

  #inicio.hero.section.dark::after{
    background:
      linear-gradient(
        180deg,
        rgba(3,9,19,.88) 0%,
        rgba(3,9,19,.78) 52%,
        rgba(3,9,19,.92) 100%
      );
  }

  #inicio .hero-grid{
    min-height:auto;
  }

  #inicio .hero-copy{
    padding:8px 0;
    max-width:100%;
  }

  #inicio .hero-copy .eyebrow{
    font-size:10px;
    letter-spacing:.12em;
    margin-bottom:10px;
  }

  #inicio .hero-copy h2{
    font-size:32px;
    line-height:1.06;
    max-width:100%;
  }

  #inicio .hero-copy .lead{
    font-size:16px;
    line-height:1.5;
    margin-top:18px;
    max-width:100%;
  }

  #inicio .actions{
    margin:22px 0 16px;
    gap:10px;
  }

  #inicio .actions .btn{
    width:100%;
    padding:13px 18px;
  }

  #inicio .trust-row{
    margin-top:14px;
    gap:8px;
  }

  #inicio .trust-row span{
    padding:8px 10px;
    font-size:11px;
  }
}

/* Celulares muy pequeños */
@media(max-width:390px){
  #inicio.hero.section.dark{
    padding:34px 0 30px;
  }

  #inicio .hero-copy h2{
    font-size:29px;
  }

  #inicio .hero-copy .lead{
    font-size:15px;
  }
}


/* =========================================================
   Ajuste sección Cotizar:
   "Qué puedes esperar" debajo del texto izquierdo
   y formulario fijo a la derecha en desktop.
   ========================================================= */

#cotizar .quote-grid{
  display:grid;
  grid-template-columns:minmax(300px, .95fr) minmax(360px, 1.05fr);
  grid-template-areas:
    "copy form"
    "expect form";
  column-gap:34px;
  row-gap:22px;
  align-items:start;
}

#cotizar .section-head{
  grid-area:copy;
  margin-bottom:0;
  max-width:520px;
}

#cotizar .quote-form{
  grid-area:form;
  width:100%;
  max-width:520px;
  justify-self:start;
}

#cotizar .quote-aside{
  grid-area:expect;
  position:static;
  top:auto;
  width:100%;
  max-width:520px;
  margin-top:0;
  align-self:start;
}

#cotizar .quote-aside.dark-card{
  padding:18px;
  border-radius:24px;
}

#cotizar .quote-aside img{
  height:210px;
  width:100%;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
  margin-bottom:18px;
}

#cotizar .quote-aside h3{
  font-size:26px;
  margin-bottom:14px;
}

#cotizar .quote-aside .check-list{
  margin:0;
  padding-left:20px;
}

#cotizar .quote-aside .check-list li{
  margin-bottom:7px;
}

/* Tablet */
@media(max-width:980px){
  #cotizar .quote-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "expect"
      "form";
    row-gap:24px;
  }

  #cotizar .section-head,
  #cotizar .quote-form,
  #cotizar .quote-aside{
    max-width:680px;
    width:100%;
    justify-self:center;
  }

  #cotizar .quote-aside img{
    height:260px;
  }
}

/* Móvil */
@media(max-width:620px){
  #cotizar .quote-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "expect"
      "form";
    row-gap:20px;
  }

  #cotizar .section-head,
  #cotizar .quote-form,
  #cotizar .quote-aside{
    max-width:100%;
  }

  #cotizar .quote-aside.dark-card{
    padding:14px;
    border-radius:22px;
  }

  #cotizar .quote-aside img{
    height:180px;
    border-radius:16px;
    margin-bottom:16px;
  }

  #cotizar .quote-aside h3{
    font-size:24px;
  }

  #cotizar .quote-aside .check-list{
    font-size:15px;
  }
}


/* =========================================================
   Ajuste productos final: botones alineados sin espacios grandes
   Este bloque corrige el espacio excesivo entre título, descripción y botones.
   ========================================================= */

.product-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.product-card .img-box{
  height:178px;
  flex:0 0 178px;
}

.product-card .body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px;
}

/* Quita alturas forzadas que generaban espacios grandes */
.product-card h3{
  min-height:0;
  margin:0 0 10px;
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
  -webkit-box-orient:initial;
}

/* Código */
.product-card .body > p:first-of-type{
  min-height:0;
  margin:0 0 10px;
}

/* Descripción compacta */
.product-card .body > p:nth-of-type(2){
  min-height:0;
  margin:0 0 14px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Tags compactos */
.product-card .tags{
  min-height:0;
  margin:0 0 14px;
  align-content:flex-start;
}

/* Botones al fondo, pero sin empujar texto hacia abajo */
.product-card .card-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding-top:8px;
}

.product-card .card-actions .btn{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  font-size:14px;
  white-space:nowrap;
}

/* Móvil */
@media(max-width:620px){
  .product-card .img-box{
    height:170px;
    flex-basis:170px;
  }

  .product-card .body{
    padding:16px;
  }

  .product-card .body > p:nth-of-type(2){
    -webkit-line-clamp:4;
  }

  .product-card .card-actions{
    grid-template-columns:1fr;
    gap:9px;
  }

  .product-card .card-actions .btn{
    min-height:46px;
  }
}


/* =========================================================
   Ajuste final sucursales:
   - Títulos en una sola línea en desktop
   - Cards del mismo tamaño
   - Texto visible sin salirse del card
   ========================================================= */

/* Grid parejo */
.branch-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

/* Cards con estructura vertical pareja */
.branch-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  overflow:hidden;
}

/* Título + badge en la misma línea */
.branch-card h3{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(21px, 1.55vw, 26px);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 22px;
  min-height:34px;
}

/* Permite que el texto largo del h3 no saque el badge ni rompa el card */
.branch-card h3{
  min-width:0;
}

.branch-card h3 .branch-type{
  flex:0 0 auto;
  white-space:nowrap;
  margin-left:4px;
  font-size:11px;
  padding:4px 8px;
  letter-spacing:0;
}

/* Textos internos visibles y controlados */
.branch-card p{
  overflow-wrap:break-word;
  word-break:normal;
}

/* Dirección con altura pareja */
.branch-card p:first-of-type{
  min-height:72px;
  margin:0 0 18px;
}

/* Referencia con altura pareja */
.branch-card p:nth-of-type(2){
  min-height:44px;
  margin:0 0 18px;
}

/* Mapa mismo tamaño */
.branch-card .map{
  width:100%;
  margin:0 0 18px;
}

.branch-card .map img{
  width:100%;
  height:210px;
  object-fit:cover;
  object-position:center;
}

/* Teléfonos ocupan una zona estable */
.branch-card .map + p,
.branch-card .branch-phones{
  min-height:54px;
}

/* Botones al fondo para que las cards cierren igual */
.branch-card .branch-actions{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Desktop mediano: baja un poco el título para conservar una línea */
@media(min-width:981px) and (max-width:1280px){
  .branch-card h3{
    font-size:clamp(18px, 1.35vw, 22px);
    gap:6px;
  }

  .branch-card h3 .branch-type{
    font-size:10px;
    padding:3px 7px;
  }
}

/* Tablet: cards una debajo de otra, texto completo visible */
@media(max-width:980px){
  .branch-grid{
    grid-template-columns:1fr;
    align-items:start;
  }

  .branch-card{
    height:auto;
  }

  .branch-card h3{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    flex-wrap:wrap;
    font-size:clamp(24px, 4vw, 30px);
    min-height:0;
    margin-bottom:18px;
  }

  .branch-card p:first-of-type,
  .branch-card p:nth-of-type(2),
  .branch-card .map + p,
  .branch-card .branch-phones{
    min-height:0;
  }

  .branch-card .map img{
    height:230px;
  }

  .branch-card .branch-actions{
    margin-top:16px;
    padding-top:0;
  }
}

/* Móvil */
@media(max-width:620px){
  .branch-card{
    padding:18px;
  }

  .branch-card h3{
    font-size:23px;
    line-height:1.1;
    gap:6px;
  }

  .branch-card h3 .branch-type{
    font-size:10px;
    padding:3px 7px;
  }

  .branch-card .map img{
    height:190px;
  }

  .branch-actions .btn{
    width:100%;
  }
}

/* Celulares muy pequeños */
@media(max-width:390px){
  .branch-card h3{
    font-size:20px;
  }
}


/* =========================================================
   Corrección final sucursales:
   Muestra el badge "Sucursal" en Xalapa sin salirse del card.
   ========================================================= */

/* En desktop bajamos el tamaño para que título + badge entren completos */
@media(min-width:981px){
  .branch-card h3{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    max-width:100%;
    font-size:clamp(17px, 1.22vw, 22px);
    line-height:1.08;
    letter-spacing:-.045em;
  }

  .branch-card h3 .branch-type{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    white-space:nowrap;
    margin-left:4px;
    font-size:10px;
    padding:3px 7px;
  }
}

/* En pantallas desktop más angostas, reducimos un poco más */
@media(min-width:981px) and (max-width:1180px){
  .branch-card h3{
    font-size:clamp(15px, 1.15vw, 18px);
    gap:6px;
  }

  .branch-card h3 .branch-type{
    font-size:9px;
    padding:3px 6px;
  }
}

/* En tablet y móvil permitimos salto de línea para que se lea completo */
@media(max-width:980px){
  .branch-card h3{
    white-space:normal;
    flex-wrap:wrap;
    overflow:visible;
    text-overflow:clip;
  }

  .branch-card h3 .branch-type{
    display:inline-flex;
    flex:0 0 auto;
  }
}


/* =========================================================
   Ajuste Cotizar: "Qué puedes esperar" parejo al formulario
   El card izquierdo estira su altura para cerrar al nivel del
   formulario donde está el botón de WhatsApp.
   ========================================================= */

#cotizar .quote-grid{
  align-items:stretch;
}

/* Permite que el formulario defina la altura total de la columna */
#cotizar .quote-form{
  height:100%;
  align-self:stretch;
}

/* Estira el card "Qué puedes esperar" dentro de su área */
#cotizar .quote-aside{
  align-self:stretch;
  height:100%;
}

#cotizar .quote-aside.dark-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100%;
}

/* Imagen más estable para que el contenido se reparta mejor */
#cotizar .quote-aside img{
  flex:0 0 auto;
}

/* Lista ocupando el espacio restante sin deformar el diseño */
#cotizar .quote-aside .check-list{
  flex:1;
}

/* Mantiene buena proporción en desktop */
@media(min-width:981px){
  #cotizar .quote-grid{
    grid-template-columns:minmax(320px, .98fr) minmax(390px, 1.02fr);
    grid-template-areas:
      "copy form"
      "expect form";
    align-items:stretch;
  }

  #cotizar .quote-aside.dark-card{
    min-height:360px;
  }

  #cotizar .quote-aside img{
    height:220px;
  }
}

/* Tablet y móvil: vuelve a comportamiento natural para no dejar espacios largos */
@media(max-width:980px){
  #cotizar .quote-form,
  #cotizar .quote-aside,
  #cotizar .quote-aside.dark-card{
    height:auto;
    min-height:0;
  }
}

@media(max-width:620px){
  #cotizar .quote-aside img{
    height:180px;
  }
}


/* =========================================================
   Footer legal: redes sociales dentro de Términos legales
   Facebook / Instagram / TikTok con iconos SVG
   ========================================================= */

#terminos-legales{
  display:flex;
  flex-direction:column;
  min-height:210px;
}

#terminos-legales p{
  margin-bottom:18px;
}

.social-links{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:18px;
}

.social-link{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  transition:.2s transform, .2s background, .2s border-color, .2s box-shadow;
}

.social-link svg{
  width:21px;
  height:21px;
  display:block;
  fill:currentColor;
}

.social-link:hover{
  transform:translateY(-2px);
  border-color:rgba(25,199,212,.55);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

/* Colores por red */
.social-link.facebook:hover{
  background:#1877F2;
  border-color:#1877F2;
}

.social-link.instagram:hover{
  background:linear-gradient(135deg,#833AB4,#E1306C,#F77737);
  border-color:rgba(255,255,255,.20);
}

.social-link.tiktok:hover{
  background:#000;
  border-color:rgba(255,255,255,.22);
}

/* Texto oculto accesible */
.social-link .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;
}

/* Móvil */
@media(max-width:620px){
  #terminos-legales{
    min-height:auto;
  }

  .social-links{
    margin-top:8px;
    padding-top:14px;
  }

  .social-link{
    width:44px;
    height:44px;
  }

  .social-link svg{
    width:20px;
    height:20px;
  }
}


/* =========================================================
   Ajuste formulario de cotización: botones tipo de vehículo
   Corrige desbordes y deja los botones parejos dentro del card.
   ========================================================= */

.quote-form .vehicle-options{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  width:100%;
  max-width:100%;
}

.quote-form .vehicle-options button{
  width:100%;
  min-width:0;
  min-height:74px;
  padding:10px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.18;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  border-radius:18px;
}

/* Botón seleccionado */
.quote-form .vehicle-options button.active{
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(25,199,212,.13);
}

/* Evita que el formulario se salga del contenedor */
.quote-form,
.quote-form fieldset{
  min-width:0;
  max-width:100%;
}

/* Ajuste de inputs para que queden parejos con los botones */
.quote-form .form-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.quote-form input,
.quote-form select,
.quote-form textarea{
  min-width:0;
}

/* Desktop mediano: reduce un poco el texto para que entren 5 botones */
@media(min-width:981px) and (max-width:1180px){
  .quote-form .vehicle-options{
    gap:8px;
  }

  .quote-form .vehicle-options button{
    min-height:70px;
    padding:9px 6px;
    font-size:13px;
    border-radius:16px;
  }
}

/* Tablet: 3 columnas para evitar que se aprieten */
@media(max-width:980px){
  .quote-form .vehicle-options{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .quote-form .vehicle-options button{
    min-height:68px;
  }
}

/* Móvil: 2 columnas, botones cómodos y sin salirse */
@media(max-width:620px){
  .quote-form .vehicle-options{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }

  .quote-form .vehicle-options button{
    min-height:64px;
    padding:10px 8px;
    font-size:14px;
  }

  .quote-form .form-grid{
    grid-template-columns:1fr;
  }
}

/* Celulares muy pequeños */
@media(max-width:390px){
  .quote-form .vehicle-options{
    grid-template-columns:1fr;
  }

  .quote-form .vehicle-options button{
    min-height:56px;
  }
}


/* =========================================================
   Corrección botones tipo de vehículo:
   Evita que el texto se salga de la caja.
   ========================================================= */

.quote-form .vehicle-options{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  width:100%;
  max-width:100%;
}

.quote-form .vehicle-options button{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:74px;
  padding:10px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  font-size:clamp(11px, .78vw, 14px);
  border-radius:18px;
}


  /* =========================================================
    Footer: logo con texto debajo
    ========================================================= */

  .site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer .footer-brand img {
    width: 180px;
    height: auto;
    object-fit: contain;
    margin-bottom: 14px;
  }

  .site-footer .footer-brand p {
    margin: 0;
    max-width: 280px;
    color: #c8d3df;
    line-height: 1.6;
  }

/* Desktop mediano: aún más compacto para que quepan 5 botones */
@media(min-width:981px) and (max-width:1280px){
  .quote-form .vehicle-options{
    gap:8px;
  }

  .quote-form .vehicle-options button{
    min-height:70px;
    padding:9px 5px;
    font-size:12px;
    border-radius:16px;
  }
}

/* Tablet: 3 columnas para evitar textos apretados */
@media(max-width:980px){
  .quote-form .vehicle-options{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .quote-form .vehicle-options button{
    min-height:68px;
    font-size:14px;
    padding:10px 8px;
  }
}

/* Móvil: 2 columnas */
@media(max-width:620px){
  .quote-form .vehicle-options{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }

  .quote-form .vehicle-options button{
    min-height:64px;
    font-size:14px;
  }
}

/* Celulares muy pequeños: 1 columna */
@media(max-width:390px){
  .quote-form .vehicle-options{
    grid-template-columns:1fr;
  }

  .quote-form .vehicle-options button{
    min-height:56px;
  }
}

/* =========================================================
   AJUSTE FINAL HEADER + FOOTER LOGO
   Pegar al final del CSS. Este bloque sobrescribe reglas
   anteriores repetidas para que el logo y texto se vean bien.
   ========================================================= */

/* HEADER */
.site-header {
  background: rgba(255, 255, 255, .92) !important;
}

.site-header .nav-shell {
  height: 104px !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

.site-header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 360px !important;
  max-width: none !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}

.site-header .brand img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain !important;
  padding: 8px !important;
  background: #06111F !important;
  border: 1px solid rgba(25, 199, 212, .34) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(6, 17, 31, .18) !important;
  margin: 0 !important;
}

.site-header .brand span {
  display: block !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: #06111F !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.site-header .brand small {
  display: block !important;
  margin-top: 8px !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  color: #008F9B !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

.site-header .main-nav {
  margin-left: auto !important;
  gap: 20px !important;
}

.site-header .btn-small {
  flex-shrink: 0 !important;
}

/* FOOTER */
.site-footer .footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.site-footer .footer-brand img {
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 16px !important;
}

.site-footer .footer-brand p {
  margin: 0 !important;
  max-width: 300px !important;
  color: #c8d3df !important;
  line-height: 1.6 !important;
}

@media (min-width: 981px) {
  .footer-grid {
    grid-template-columns: 1.45fr 1fr 1fr 1fr !important;
  }
}

/* TABLET */
@media (max-width: 980px) {
  .site-header .nav-shell {
    height: 84px !important;
  }

  .site-header .brand {
    min-width: auto !important;
    max-width: 300px !important;
    gap: 12px !important;
  }

  .site-header .brand img {
    width: 62px !important;
    height: 62px !important;
    padding: 6px !important;
    border-radius: 17px !important;
  }

  .site-header .brand span {
    display: block !important;
    font-size: 16px !important;
  }

  .site-header .brand small {
    display: block !important;
    font-size: 10px !important;
    margin-top: 5px !important;
  }
}

/* MÓVIL */
@media (max-width: 620px) {
  .site-header .nav-shell {
    height: 78px !important;
    gap: 10px !important;
  }

  .site-header .brand {
    max-width: 240px !important;
    gap: 10px !important;
  }

  .site-header .brand img {
    width: 54px !important;
    height: 54px !important;
    padding: 5px !important;
    border-radius: 15px !important;
  }

  .site-header .brand span {
    display: block !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  .site-header .brand small {
    display: block !important;
    font-size: 8.5px !important;
    letter-spacing: .05em !important;
    white-space: normal !important;
  }

  .site-footer .footer-brand {
    align-items: center !important;
    text-align: center !important;
  }

  .site-footer .footer-brand img {
    width: 190px !important;
  }

  .site-footer .footer-brand p {
    max-width: 100% !important;
  }
}

/* MÓVIL MUY PEQUEÑO */
@media (max-width: 390px) {
  .site-header .brand {
    max-width: 210px !important;
    gap: 8px !important;
  }

  .site-header .brand img {
    width: 48px !important;
    height: 48px !important;
  }

  .site-header .brand span {
    font-size: 12px !important;
  }

  .site-header .brand small {
    font-size: 7.8px !important;
  }
}

/* =========================================================
   AJUSTE DEFINITIVO HEADER + FOOTER
   Logo a la izquierda, texto centrado a la derecha.
   Este bloque debe ir al final para sobrescribir reglas previas.
   ========================================================= */

/* HEADER GENERAL */
.site-header {
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(231, 236, 242, .85) !important;
}

/* Contenedor del header */
.site-header .nav-shell {
  height: 108px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Marca: logo a la izquierda + texto a la derecha */
.site-header .brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  min-width: 430px !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Logo del header */
.site-header .brand img {
  width: 92px !important;
  height: 92px !important;
  object-fit: contain !important;
  padding: 8px !important;
  background: #06111F !important;
  border: 1px solid rgba(25, 199, 212, .34) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(6, 17, 31, .18) !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Texto al lado del logo */
.site-header .brand span {
  display: block !important;
  text-align: center !important;
  font-size: 31px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: #06111F !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

/* Subtexto centrado debajo de RADIADORES */
.site-header .brand small {
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  color: #008F9B !important;
  letter-spacing: .09em !important;
  white-space: nowrap !important;
}

/* Navegación */
.site-header .main-nav {
  margin-left: auto !important;
  gap: 20px !important;
}

.site-header .btn-small {
  flex-shrink: 0 !important;
}

/* FOOTER: logo con descripción debajo */
.site-footer .footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.site-footer .footer-brand img {
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 0 16px !important;
}

.site-footer .footer-brand p {
  margin: 0 !important;
  max-width: 300px !important;
  color: #c8d3df !important;
  line-height: 1.6 !important;
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.coverage-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.coverage-grid h3 {
  margin-bottom: 10px;
}

.coverage-grid p {
  color: var(--muted);
}

@media(max-width:980px) {
  .coverage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:620px) {
  .coverage-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) {
  .footer-grid {
    grid-template-columns: 1.45fr 1fr 1fr 1fr !important;
  }
}

/* TABLET */
@media (max-width: 980px) {
  .site-header .nav-shell {
    height: 88px !important;
    gap: 14px !important;
  }

  .site-header .brand {
    flex-direction: row !important;
    min-width: auto !important;
    max-width: 330px !important;
    gap: 12px !important;
  }

  .site-header .brand img {
    width: 64px !important;
    height: 64px !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }

  .site-header .brand span {
    display: block !important;
    text-align: center !important;
    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-header .brand small {
    display: block !important;
    text-align: center !important;
    margin-top: 5px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .site-header .menu-toggle {
    margin-left: auto !important;
  }
}

/* MÓVIL */
@media (max-width: 620px) {
  .site-header .nav-shell {
    height: 82px !important;
    gap: 10px !important;
  }

  .site-header .brand {
    flex-direction: row !important;
    max-width: 250px !important;
    gap: 10px !important;
  }

  .site-header .brand img {
    width: 56px !important;
    height: 56px !important;
    padding: 5px !important;
    border-radius: 16px !important;
  }

  .site-header .brand span {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-header .brand small {
    display: block !important;
    text-align: center !important;
    font-size: 8px !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
  }

  .site-footer .footer-brand {
    align-items: center !important;
    text-align: center !important;
  }

  .site-footer .footer-brand img {
    width: 190px !important;
  }

  .site-footer .footer-brand p {
    max-width: 100% !important;
  }
}

/* MÓVIL MUY PEQUEÑO */
@media (max-width: 390px) {
  .site-header .brand {
    max-width: 220px !important;
    gap: 8px !important;
  }

  .site-header .brand img {
    width: 50px !important;
    height: 50px !important;
  }

  .site-header .brand span {
    font-size: 12px !important;
  }

  .site-header .brand small {
    font-size: 7.3px !important;
  }
}