/* V10 – same visuals, ensure no top gap */ 
:root{--bg:#fff;--text:#0c0c0d;--muted:#5a5f6a;--primary:#FF5A00;--primary-700:#e14f00;--dark:#211715;--alt:#FFF7F2;--border:#efe3dc;--shadow:0 10px 24px rgba(0,0,0,.08)}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
h1,h2,h3,p{margin:0} img{max-width:100%;display:block} a{color:var(--primary);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center}.row.gap{gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;border:1px solid transparent;font-weight:800;cursor:pointer;transition:.2s}
.btn-pill{border-radius:999px}.btn:hover{transform:translateY(-1px)}.btn-lg{padding:14px 18px}.btn.full{width:100%}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(255,90,0,.25)}.btn-primary:hover{background:var(--primary-700)}
.btn-secondary{background:#25D366;color:#fff;box-shadow:0 6px 16px rgba(37,211,102,.25)}.btn-secondary:hover{background:#1da851}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:70}
.header__topnote{display:flex;justify-content:center;align-items:center;height:30px;color:#e8eaff;background:#0f122b;font-size:.82rem}
.header__bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo img{height:30px}.nav{display:none;gap:18px}.header-cta{display:flex;align-items:center;gap:12px}
.promo-ribbon{background:#211715;color:#fff;padding:8px 12px;border-radius:999px;font-weight:900;font-size:.8rem;letter-spacing:.5px}
.header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.06)}
/* === Botón amarillo de teléfono en el header === */
.btn-call {
  background: #FFDE59;
  color: #211715;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 222, 89, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.btn-call:hover {
  background: #ffd500;
  transform: translateY(-1px);
}

.btn-call .btn-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0);
}

/* === Ajustes móviles === */
@media (max-width: 768px) {
  /* Compacta disposición general */
  .header-cta {
    gap: 6px !important;
    justify-content: center;
  }

  /* Botón marrón (ribbon) */
  .promo-ribbon {
    font-size: 0.8rem;
    padding: 6px 10px;
    white-space: nowrap;
  }

  .ribbon-text-desktop {
    display: none;
  }
  .ribbon-text-mobile {
    display: inline;
    font-weight: 900;
  }

  /* Botón amarillo (solo número) */
  .btn-call {
    justify-content: center;
    text-align: center;
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  .btn-call .btn-icon,
  .btn-call #phone-label {
    display: none;
  }

  /* Botón naranja (solo “WhatsApp”) */
  .whatsapp-text-desktop {
    display: none;
  }

  .whatsapp-text-mobile {
    display: inline;
    font-weight: 800;
  }

  #cta-whatsapp-header {
    font-size: 0.9rem;
    padding: 8px 12px;
    white-space: nowrap;
  }
}
/* === RESTAURA TEXTOS EN DESKTOP === */
@media (min-width: 769px) {
  .ribbon-text-desktop {
    display: inline;
  }
  .ribbon-text-mobile {
    display: none;
  }

  .whatsapp-text-desktop {
    display: inline;
  }
  .whatsapp-text-mobile {
    display: none;
  }
}

.sticky-cta{position:sticky;top:94px;background:#0f122b;color:#e8eaff;padding:8px 0;z-index:69;transform:translateY(-110%);transition:transform .25s}
.sticky-cta.show{transform:translateY(0)} .sticky-row{display:flex;align-items:center;justify-content:space-between}
/* === Corrige el hueco blanco causado por el sticky-cta === */
.sticky-cta {
  position: fixed !important; /* evita que empuje el hero */
  top: 94px;
  left: 0;
  width: 100%;
  background: #0f122b;
  color: #e8eaff;
  padding: 8px 0;
  z-index: 69;
  transform: translateY(-110%);
  transition: transform .25s ease-in-out;
}

.sticky-cta.show {
  transform: translateY(0);
}


/* === HERO BASE CON FONDO CORPORATIVO (ajustado) === */
#inicio.hero.hero-split {
  position: relative;
  width: 100%;
  
  background-color: #FF5A00; /* fallback naranja */
  background-image: url('../img/DesktopBannerBase.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex; /* centramos el contenedor interior */
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

/* Mantiene tus estilos de hero */
.hero {
  margin: 0;
  padding: 0;
}
.header + .hero {
  margin-top: 0;
}

/* === HERO INNER CENTRADO Y ESTRUCTURADO 80% === */
.hero-inner {
  position: relative;
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 75% 25%; /* más coherente con la proporción visual */
  align-items: end; /* ancla todo al fondo del bloque */
  justify-content: center; /* centra el grid dentro del 80% */
  gap: 0%; /* eliminamos el espacio entre columnas */
  padding: 40px 0; /* altura visual más natural */
}

/* --- HERO LEFT dividido internamente (Paco + oferta) --- */
.hero-left {
  display: grid;
  grid-template-columns: 33% 67%; /* 20% + 40% relativos al 60% total */
  align-items: center;
  justify-content: start;
  gap: 1rem;
}

/* Imagen del chico */
.hero-left img.hero-photo,
.paco img {
  width: 30%;
  height: auto;
  object-fit: contain;
  display: block;
  position: absolute;
  bottom: 0;
  transform: translateY(0%); /* le da ese efecto de “tocar el suelo” */
}

/* Bloque central con la oferta (infomono) */
.infomono {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* centra horizontalmente */
  text-align: center;  /* centra el texto si lo hubiera */
  color: #fff;
  transform: translateY(-20%); /* súbelo un poco, ajustable */
}

.infomono img {
  width: 75%;
  height: auto;
  object-fit: contain;
  margin: 0 auto; /* asegura centrado en navegadores antiguos */
  display: block;
}

/* --- HERO RIGHT: bloque formulario --- */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
}

/* Contenido del formulario (sin fondo ni sombra) */
.hero-offer {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 20px;
  color: #fff; /* texto blanco sobre el fondo naranja */
}

/* Título de hero */
.hero-title {
  font-size: 2.6rem;
  line-height: 1.1;
  margin-bottom: 10px;
  color: #fff;
  text-align: left;
}

/* === VERSIÓN RESPONSIVE (móviles) === */
@media (max-width: 768px) {
  /* Imagen móvil (SinPacoBanner) */
  .hero-left picture,
  .hero-left picture img {
    position: static !important;   /* saca la imagen del flujo absoluto */
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
    z-index: 1; /* debajo del formulario */
  }

  /* Asegura que el formulario se muestre encima */
  .hero-right {
    position: relative;
    z-index: 5;
  }

  /* Reestructura el layout vertical */
  .hero-inner {
    width: 100%;
    grid-template-columns: 1fr; /* 1 sola columna */
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;
    padding: 20px 10px 40px;
    text-align: center;
  }

  /* --- HERO LEFT: apilar verticalmente en móvil --- */
  .hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .hero-left img.hero-photo {
    width: 80%;
    max-width: 260px;
    transform: none;
  }

  /* --- Ajuste del bloque infomono --- */
  .infomono {
    order: 2; /* aparece debajo de la imagen móvil */
  }

  .infomono img {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    margin-top: 5%;
  }

  /* --- Ajuste del bloque formulario --- */
  .hero-right {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .hero-offer {
    max-width: 95%;
    padding: 16px;
    background: #fff;
    color: #0c0c0d;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  /* Ajustes visuales del fondo */
  #inicio {
    background-position: center top;
    background-size: cover;
  }

  /* Reduce tamaño de textos para equilibrio */
  .hero-title {
    font-size: 1.8rem;
  }
}

/* === RESTAURAR DISEÑO DESKTOP === */
@media (min-width: 769px) {
  .hero-inner {
    display: grid !important;
    grid-template-columns: 75% 25% !important;
    align-items: end !important;
    justify-content: center !important;
    padding: 40px 0 !important;
  }

  .hero-left {
    display: grid !important;
    grid-template-columns: 33% 67% !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 1rem !important;
  }

  .hero-left img.hero-photo {
    position: absolute !important;
    width: 30% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important; 
    bottom: 0 !important;    
    left: 0%;
    transform: translateY(2%) !important;
    display: block !important;
  }

  .infomono {
    transform: translateY(-20%) !important;
  }

  .hero-right {
    justify-content: flex-end !important;
    align-items: center !important;
  }
}

/* === PILL AMARILLO SOBRE FORMULARIO (mejor centrado y más grande) === */
.hero-offer .pill.yellow {
  display: inline-block;
  background: #FFDE59;
  color: #211715;
  font-weight: 900;
  padding: 10px 22px; /* más grande */
  border-radius: 999px;
  font-size: 1.1rem;
  text-align: center;
  margin: 0 auto 16px auto; /* centrado horizontal y separación inferior */
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* centra el pill sobre el formulario */
}

/* Corrige el centrado del pill amarillo en móvil */
@media (max-width: 768px) {
  .hero-offer .pill.yellow {
    position: static; /* elimina el left/translate */
    transform: none;
    margin: 0 auto 14px auto; /* centrado natural por margin */
    font-size: 1rem; /* un poco más compacto */
    padding: 8px 18px;
  }
}



.pill{display:inline-block;background:#111;color:#fff;padding:8px 14px;border-radius:999px;font-weight:900;margin:12px 0}
/*.pill.yellow{background:#FFDE59;color:#211715}.pill.sm{padding:6px 10px;font-size:.85rem}*/
.offer-card{display:flex;gap:0;align-items:stretch;background:#fff;color:#211715;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #ffd7c5;margin:14px 0 18px}
.offer-col{padding:14px 16px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.offer-col .old-speed{font-weight:800;color:#b7a8a2;text-decoration:line-through}.offer-col .speed .n{font-size:2.6rem;font-weight:900}.offer-col .speed .u{font-weight:900}
.sep{width:1px;background:#ffe5d8}.price-side .promo-note{font-size:.82rem;font-weight:800;text-transform:uppercase;color:#211715}
.price{display:flex;align-items:flex-end;gap:6px}.price .cur{font-weight:900}.price .big{font-size:2.6rem;font-weight:900;line-height:.9}.price .dec{font-size:1.2rem;font-weight:900}.price .price-text{font-size:1rem;font-weight:800;margin-left:4px}.price-sub{font-size:.9rem}.muted{color:#5a5f6a}
.lead-card{background:#fff;color:#0c0c0d;border-radius:18px;padding:18px;border:1px solid #ffd7c5;box-shadow:0 10px 24px rgba(0,0,0,.12);max-width:520px;margin-top:0}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}.field input{padding:14px 12px;border:1px solid #ffd7c5;border-radius:12px;font-size:1rem}.field input:focus{outline:2px solid #ffe8de}
.checkbox{display:flex;gap:8px;align-items:flex-start;margin:8px 0}.checkbox input{margin-top:4px}.error{min-height:1em;color:#c20017;font-size:.85rem}
.section{padding:56px 0}.section.alt{background:#FFF7F2}.grid{display:grid;gap:18px}
.section-title{position:relative;font-size:1.9rem;line-height:1.1;margin-bottom:22px;font-weight:900}
.section-title::before{content:'';position:absolute;left:0;bottom:-8px;width:56px;height:6px;border-radius:4px;background:var(--primary)}
.plans{grid-template-columns:repeat(3,1fr);display:grid;gap:18px}
.card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 22px rgba(0,0,0,.06);padding:18px}
.plan-ribbon{position:relative}.ribbon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#211715;color:#fff;padding:5px 5px;border-radius:999px;font-weight:900;letter-spacing:.5px}
.speed-line .n{font-size:2.4rem;font-weight:900}.speed-line .u{font-weight:900}.old-speed{color:#b7a8a2;text-decoration:line-through;font-weight:800}
.combo{font-weight:800;text-transform:uppercase;color:#211715;margin-top:8px}.badge{width:240px;height:56px;object-fit:cover;border-radius:10px;margin:10px auto;border:1px solid #ffe1d1}
.badge-text{display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:900;font-size:0.9rem;text-align:center;line-height:1.2}
.price-line{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:6px 0 0 0}.price-line .cur{font-weight:900}.price-line .big{font-size:2rem;font-weight:900}.price-line .dec{font-size:1.1rem;font-weight:900}.price-line .x{font-weight:800}
.full{width:100%;margin-top:12px}.muted.tiny{font-size:.78rem;text-align:center;color:#6d6f75;margin-top:6px}.plan.featured{border:2px solid var(--primary);background-color: #FFCC80;}
.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}.dots span{width:8px;height:8px;border-radius:999px;background:#e6e6e6}.dots .active{background:#FF5A00}

/* === Centra textos del header en las cards === */
.plan header {
  text-align: center;
}

.plan .combo,
.plan .speed-line {
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* === Ajuste del bloque .badge === */
.plan .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 56px;
  margin: 10px auto;
  border: 1px solid #ffe1d1; /* marco naranja solo por defecto */
  border-radius: 12px; /* borde redondeado */
  overflow: hidden; /* recorta el contenido dentro del borde */
  background: #fff;
  box-shadow: var(--shadow);
  padding: 0; /* sin espacio interno */
}

/* Texto centrado con respiración dentro del mismo bloque */
.plan .badge.badge-text p {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  color: var(--primary);
  font-weight: 900;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* === Imagen ocupa 100% exacto y sin borde naranja === */
.plan .badge img {
  min-width: 100%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-top:  3%;
  border: none;         /* quita el borde naranja */
  box-shadow: none;     /* sin sombra */
  background: transparent; /* elimina fondo blanco */
}

/* Quita el borde solo cuando dentro del badge hay imagen */
.plan .badge:has(img) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === Ajuste visual de las imágenes scorecard === */
.plan-header img {
  max-width: 100%;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  display: inline-block; /* permite centrado sin romper flujo */
}

/* === Swiper de planes === */
#planes .plans-swiper {
  padding: 8px 8px 28px;
}

#planes .swiper-slide {
  height: auto;
}

#planes .swiper-slide .card {
  height: 100%;
}

/* Botones */
#planes .swiper-button-prev,
#planes .swiper-button-next {
  color: var(--primary);
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

#planes .swiper-button-prev:after,
#planes .swiper-button-next:after {
  font-size: 16px;
  font-weight: 800;
}

/* Paginación */
#planes .swiper-pagination-bullet {
  background: #e6e6e6;
  opacity: 1;
}

#planes .swiper-pagination-bullet-active {
  background: var(--primary);
}

.benefits-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:#fff;border:1px solid #efe3dc;border-radius:16px;box-shadow:var(--shadow);padding:18px}
.benefit{display:flex;gap:12px;align-items:flex-start}.icon-56{width:40px;height:40px}
.faq-list{display:grid;gap:10px}.faq{border:1px solid #efe3dc;border-radius:12px;background:#fff;overflow:hidden}
.faq > summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;display:flex;align-items:center;justify-content:space-between}
.faq > summary::-webkit-details-marker{display:none}.faq[open] .icon{transform:rotate(45deg)} .faq .icon{transition:transform .2s}
.faq-body{padding:0 16px 16px 16px;color:#333}
.footer{background:#0f122b;color:#e8eaff;padding:28px 0;margin-top:32px}.footer .footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.wa-floating{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;border-radius:999px;padding:14px 18px;box-shadow:0 10px 24px rgba(0,0,0,.08);z-index:80}
.wa-floating img{filter:brightness(0) invert(1)}
.form-buttons{display:flex;gap:12px;margin-top:16px}
.form-buttons .btn{font-size:1rem}
.btn-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;filter:brightness(0) invert(1)}
@media (min-width:1025px){.nav{display:flex}}
@media (max-width: 768px) {.hero.hero-split {flex-direction: column;padding: 0; /* opcional: eliminar padding extra */margin-top:-15%}
  .hero-left {width: 100%; margin: 0 auto;}
  .hero-left img.hero-photo {width: 100%;height: auto;display: block;  }
  .hero-right {padding: 16px;}
}
@media (max-width:960px){.sticky-cta{top:94px}.hero-split{grid-template-columns:1fr; margin-top:-15%}.hero-right{padding:24px 0}.hero-offer{max-width:680px}.lead-card{max-width:100%}.plans{grid-template-columns:1fr}.benefits-panel{grid-template-columns:1fr}}