:root{--brand:#ff5a00;--brand-d:#e24f00;--bg:#f8f8f8;--txt:#222;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--txt);background:#fff;line-height:1.5}
.container{max-width:1100px;margin:auto;padding:24px}
h1,h2,h3{line-height:1.2}
.hero h1{font-size:clamp(28px,4.5vw,54px);margin-bottom:10px}
.hero p.lead{font-size:clamp(24px,2vw,20px);font-weight:600;color:#FF5700;margin-bottom:24px}
.section-title{margin:32px 0 12px;font-weight:700}
hr{border:none;height:1px;background:#eee;margin:24px 0}
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border:2px solid #eee;border-radius:16px;padding:22px;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.badge{display:inline-block;background:#ffe7d9;color:#FF5700;font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:10px}
.label{color:#666;font-weight:700;margin-bottom:4px}
.years{font-size:44px;font-weight:900;margin:6px 0}
.price{color:#FF5700;font-size:22px;font-weight:800;margin:2px 0 14px}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:999px}
.btn:hover{background:var(--brand-d)}
.featured{border-color:var(--brand);box-shadow:0 8px 24px rgba(255,90,0,.18)}
.info-boxes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:40px 0}
.info-box{background:#f4f4f4;border-radius:14px;padding:24px;text-align:center}
.info-icon{font-size:44px;color:var(--brand);margin-bottom:8px}
.accordion{margin:30px 0}
.accordion-item{background:#f4f4f4;border-radius:10px;margin-bottom:10px;overflow:hidden}
.accordion-header{padding:18px 20px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.accordion-header:hover{background:#ececec}
.accordion-content{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease}
.accordion-content.open{padding:16px 20px;max-height:400px;background:#fff}
.plus{color:var(--brand);font-weight:700;font-size:20px}
.regions{margin:40px 0;text-align:center}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.tag{padding:10px 20px;border-radius:30px;font-weight:700;color:#fff}
.tag.orange{background:#FF5700}.tag.purple{background:#6829b6}.tag.green{background:#00a651}
.channels{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:center;margin:50px 0}
.contact{display:flex;flex-direction:column;gap:14px}
.contact p{margin:0}
.highlight{color:var(--brand);font-weight:700}
.whatsapp{color:#008c4a;font-weight:700}
.auto{color:#d69f00;font-weight:700}
img.responsive{width:100%;border-radius:18px}

/* ===== REGIONES ===== */
.regions-section {
margin: 60px 0;
text-align: center;
}

.regions-section h2 {
font-size: clamp(22px, 3vw, 36px);
margin-bottom: 28px;
font-weight: 700;
}

.chips {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 900px;
margin: 0 auto;
}

.chip {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
border-radius: 999px;
font-weight: 800;
color: #fff;
font-size: 18px;
}

.chip.orange { background: #FF5700; }
.chip.purple { background: #652D90; }
.chip.green  { background: #00914E; }
.chip.yellow { background: #FFC700; }

/* ===== Versión Mobile ===== */
@media (max-width: 900px) {
.chips {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.chip {
  height: 54px;
  font-size: 16px;
}
}

@media (max-width: 500px) {
.chips {
  grid-template-columns: 1fr;
  max-width: 300px;
}
.chip {
  font-size: 15px;
  height: 48px;
}
}
/* ===== SECCIÓN CANALES ===== */
.contact-section {

padding: 70px 0;
}

.contact-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: 40px;
align-items: center;
}

@media (max-width: 980px) {
.contact-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}
}

.contact-title {
font-size: clamp(22px, 3vw, 36px);
font-weight: 700;
margin-bottom: 24px;
}

.channels-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 28px 40px;
}

.channel-item {
display: flex;
align-items: center;
gap: 12px;
}

.channel-icon {
font-size: 30px;
line-height: 1;
}

.channel-info {
display: flex;
flex-direction: column;
line-height: 1.2;
}

.channel-label {
font-weight: 700;
color: #333;
}

.channel-value {
font-weight: 700;
}

.channel-tel { color: #FF5700; }
.channel-wsp { color: #00914E; }
.channel-chat { color: #652D90; }
.channel-auto { color: #FFC700; }

/* ===== IMAGEN DERECHA ===== */
.agent {
position: relative;
max-width: 420px;
margin-inline: auto;
border-radius: 28px;
overflow: hidden;
}

.agent .blob {
position: absolute;

bottom: -8%;
width: 78%;
height: 68%;
background: #ffc21a;
border-radius: 40px 40px 140px 140px;
filter: saturate(1.1);
}

.agent img {
position: relative;
display: block;
width: 100%;
height: auto;
object-fit: cover;
}

/* ===== MOBILE ===== */
@media (max-width: 680px) {
.contact-section {
  padding: 50px 0;
}
.channels-layout {
  grid-template-columns: 1fr;
  gap: 18px;
}
.channel-item {
  justify-content: flex-start;
}
}



/* ===== HEADER ===== */
.main-header {
  width: 100%;
  position: relative;
  z-index: 1000;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}

/* Barra superior verde */
.topbar {
  background: #008543;
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* Barra principal */
.navbar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  width: 100%;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* Menú principal */
.menu ul {
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: center;
}

.menu ul li a {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color .2s ease;
}

.menu ul li a:hover {
  color: var(--brand);
}

.search-icon {
  font-size: 18px;
  display: inline-block;
  transform: translateY(1px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .menu ul {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  .logo img {
    height: 40px;
  }
  .nav-container {
    flex-direction: column;
    gap: 12px;
  }
}
/* ===== FOOTER ===== */
.site-footer{
  background:#222;
  color:#ddd;
  width:100%;
  padding-top:48px;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 32px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:36px;
}
.f-col h4{color:#fff;margin:6px 0 12px;font-size:18px}
.f-col h5{color:#fff;margin:18px 0 8px;font-size:16px}
.f-links{list-style:none;display:grid;gap:8px}
.f-links a{color:#ddd;text-decoration:none}
.f-links a:hover{color:#fff}

.f-brand .f-logo img{height:54px;display:block}
.f-desc{margin:14px 0 18px;max-width:420px}

.f-social{list-style:none;display:flex;gap:12px;margin-top:8px}
.f-social li a{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  border:1.8px solid #fff;color:#fff
}
.f-social svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}

.footer-award{
  text-align:center;color:#ddd;opacity:.95;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 24px 18px;
}
.footer-award img{width:78px;height:auto;display:block;filter:saturate(1.1)}

.footer-address{
  max-width:1200px;margin:0 auto;
  padding:0 24px 22px;text-align:center;color:#cfcfcf;font-size:14px;line-height:1.6
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;color:#eaeaea;
  padding:14px 24px;font-weight:700
}


/* Responsive footer */
@media (max-width: 980px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .footer-inner{grid-template-columns:1fr}
  .f-desc{max-width:unset}
  .footer-address{font-size:13px}
}/* ===========================
   HEADER / NAVBAR / MENU BASE
   =========================== */
:root{ --brand:#ff5a00; }

.main-header{ width:100%; position:relative; z-index:1000; }
.topbar{
  background:#008543; color:#fff; text-align:center;
  font-weight:700; font-size:14px; letter-spacing:.2px; padding:6px 10px;
}
.navbar{ background:#fff; width:100%; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.nav-container{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo img{ height:48px; width:auto; display:block; }

/* Lista principal */
.menu > ul{
  list-style:none; display:flex; gap:24px; align-items:center;
}
.menu > ul > li{ position:relative; }
.menu > ul > li > a{
  display:block; padding:14px 10px; text-decoration:none;
  color:#222; font-weight:500; line-height:1;
  transition:color .15s ease;
}
.menu > ul > li > a:hover,
.menu > ul > li > a:focus{ color:var(--brand); outline:0; }

/* ===========================
   MEGA MENÚ (SERVICIOS)
   =========================== */
.menu > ul > li.has-mega{ position:static; }  /* contenedor ancho completo */
.navbar{ position:relative; }

.mega{
  position:absolute; left:0; right:0; top:calc(100% - 2px); /* solapa 2px */
  background:#fff; border-top:1px solid #eee;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
  padding:24px 32px; z-index:999;
}
.mega-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:28px;
}
.mega-col h5{ font-size:16px; font-weight:800; margin:2px 0 10px; }
.mega-col ul{ list-style:none; display:grid; gap:8px; }
.mega-col a{ color:#222; text-decoration:none; font-size:14.5px; }
.mega-col a:hover{ color:var(--brand); }

/* Mantener abierto mientras hay hover/foco (escritorio) */
@media (hover:hover){
  .menu > ul > li.has-mega:hover > a{ color:var(--brand); }
  .menu > ul > li.has-mega:hover .mega,
  .menu > ul > li.has-mega:focus-within .mega,
  .menu > ul > li.has-mega .mega:hover{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}

/* "Puente" de tolerancia bajo y a los lados del trigger para evitar el gap */
.menu > ul > li.has-mega > a{ position:relative; }
.menu > ul > li.has-mega > a::after{
  content:""; position:absolute; left:-16px; right:-16px;
  bottom:-14px; height:14px;
}



/* ===========================
   (Opcional) anti-flicker por clase .open
   =========================== */
.menu > ul > li.has-mega.open .mega{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ===========================
   ACCESIBILIDAD FOCUS
   =========================== */
.menu a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
/* ===== Submenú pequeño: Acceso clientes ===== */
.menu > ul > li.has-sub { position:relative; }

.menu > ul > li.has-sub .sub{
  position:absolute; top:calc(100% + 10px); left:0;
  background:#fff; width:260px;
  border-radius:2px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:1000;
  /* franja negra superior */
  border-top:4px solid #111;
}
.menu > ul > li.has-sub .sub ul{ list-style:none; margin:0; padding:10px 0; }
.menu > ul > li.has-sub .sub li a{
  display:block; padding:12px 18px; color:#222; text-decoration:none;
}
.menu > ul > li.has-sub .sub li a:hover{ background:#f7f7f7; color:#000; }

/* Mostrar en hover (escritorio) */
@media (hover:hover){
  .menu > ul > li.has-sub:hover > a{ color:var(--brand); }
  .menu > ul > li.has-sub:hover .sub{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}

/* “Puente” anti-gap bajo el trigger */
.menu > ul > li.has-sub > a{ position:relative; }
.menu > ul > li.has-sub > a::after{
  content:""; position:absolute; left:-10px; right:-10px;
  bottom:-12px; height:12px;
}
/* Ocultar el menú principal en versión móvil */
@media (max-width: 900px) {
  .menu-desk {
    display: none !important;
  }
}

/* Ocultar el menú móvil en versión escritorio */
@media (min-width: 901px) {
  .menu-mobile {
    display: none !important;
  }
}


.channel-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}