.section-distribuidor{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
  
    background-color: #f2f3f5;
  
    /* Patrón SVG de camioncito de delivery moderno (plomo oscuro) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120' viewBox='0 0 200 120'%3E%3Cg fill='none' stroke='%235e6673' stroke-opacity='.28' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3E%3C!-- Caja principal de carga --%3E%3Crect x='20' y='25' width='95' height='55' rx='8' fill='%235e6673' fill-opacity='.15'/%3E%3C!-- Cabina del conductor --%3E%3Cpath d='M115 35h25l15 20v25h-15V65h-25V35z' fill='%235e6673' fill-opacity='.15'/%3E%3C!-- Ventana de la cabina --%3E%3Cpath d='M120 40h15l10 15h-25V40z' fill='%235e6673' fill-opacity='.08'/%3E%3C!-- Paquete con bookmark en la caja --%3E%3Crect x='35' y='35' width='25' height='25' rx='2' fill='%235e6673' fill-opacity='.2'/%3E%3Cpath d='M45 35v12l3-2 3 2V35' fill='%235e6673' fill-opacity='.3'/%3E%3C!-- Línea decorativa en el paquete --%3E%3Cpath d='M40 52h15'/%3E%3C!-- Rueda trasera --%3E%3Ccircle cx='45' cy='95' r='15' fill='%235e6673' fill-opacity='.1'/%3E%3Ccircle cx='45' cy='95' r='8'/%3E%3Ccircle cx='45' cy='95' r='4' fill='%235e6673' fill-opacity='.3'/%3E%3C!-- Rueda delantera --%3E%3Ccircle cx='135' cy='95' r='15' fill='%235e6673' fill-opacity='.1'/%3E%3Ccircle cx='135' cy='95' r='8'/%3E%3Ccircle cx='135' cy='95' r='4' fill='%235e6673' fill-opacity='.3'/%3E%3C!-- Base del camión --%3E%3Cpath d='M20 80h135'/%3E%3C!-- Parachoques trasero --%3E%3Crect x='15' y='75' width='8' height='8' rx='2' fill='%235e6673' fill-opacity='.2'/%3E%3C!-- Manija puerta cabina --%3E%3Ccircle cx='150' cy='55' r='2' fill='%235e6673' fill-opacity='.4'/%3E%3C!-- Línea decorativa cabina --%3E%3Cpath d='M120 60h20'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 90px 50px; /* ajusta el tamaño del patrón */
    background-position: 0 0;
}
.container-distribuidor {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
max-width: 1200px;
width: 100%;
display: flex;
flex-wrap: wrap;
height: auto; /* Altura automática para ser más flexible */
position: relative;
margin-top: 40px;
}
.image-section-distribuidor {
flex: 1;
min-width: 300px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow: hidden;
}
.image-section-distribuidor::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: float-distribuidor 6s ease-in-out infinite;
}
@keyframes float-distribuidor {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.character-container-distribuidor {
position: relative;
z-index: 1;
text-align: center;

}
.character-distribuidor {
width: auto;
height: auto;
background: #fff;
border-radius: 20px;
position: relative;
overflow: hidden;
animation: bounce-distribuidor 2s ease-in-out infinite;
}
@keyframes bounce-distribuidor {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.content-section-distribuidor {
flex: 1;
min-width: 300px;
padding: 20px 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: white;
}
.logo-distribuidor {
margin-bottom: 30px;
}
.logo-distribuidor h1 {
font-size: 2.5rem;
font-weight: 700;
background: #1e5631;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo-distribuidor p {
color: #666;
font-size: 1rem;
margin-top: 5px;
}
.title-distribuidor {
font-size: 2.2rem;
font-weight: 600;
color: #333;
margin-bottom: 10px;
line-height: 1.2;
}
.subtitle-distribuidor {
font-size: 1.2rem;
color: #666;
margin-bottom: 10px;
line-height: 1.6;
}
.benefits-distribuidor {
margin-bottom: 10px;
}
.benefit-item-distribuidor {
display: flex;
align-items: center;
margin-bottom: 15px;
opacity: 0;
transform: translateX(-20px);
animation: slideIn-distribuidor 0.5s forwards;
}
.benefit-item-distribuidor:nth-child(1) { animation-delay: 0.1s; }
.benefit-item-distribuidor:nth-child(2) { animation-delay: 0.2s; }
.benefit-item-distribuidor:nth-child(3) { animation-delay: 0.3s; }
@keyframes slideIn-distribuidor {
to {
opacity: 1;
transform: translateX(0);
}
}
.benefit-item-distribuidor i {
color: #4ade80;
font-size: 1.2rem;
margin-right: 15px;
width: 25px;
}
.benefit-item-distribuidor span {
color: #555;
font-size: 1rem;
}
.whatsapp-btn-distribuidor {
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
color: white;
border: none;
padding: 18px 40px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
text-decoration: none;
position: relative;
overflow: hidden;
width: 320px;
left: 12%;
}
.whatsapp-btn-distribuidor::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.whatsapp-btn-distribuidor:hover::before {
width: 300px;
height: 300px;
}
.whatsapp-btn-distribuidor:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
}
.whatsapp-btn-distribuidor:active {
transform: translateY(-1px);
}
.whatsapp-btn-distribuidor i {
font-size: 1.3rem;
}
.loading-distribuidor {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-align: center;
    }
    .loading-distribuidor i {
    font-size: 3rem;
    color: #25d366;
    animation: spin-distribuidor 1s linear infinite;
    }
    @keyframes spin-distribuidor {
    to { transform: rotate(360deg); }
    }
    .overlay-distribuidor {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    }
/* ======= Teléfonos (≤600px) ======= */
/* ======= Teléfonos (≤600px) ======= */
@media (max-width: 600px) {
    .section-distribuidor{
      padding: 32px 14px !important;
      background-size: 64px 36px !important;
      background-position: center top !important;
    }
  
    .container-distribuidor{
      flex-direction: column !important;
      border-radius: 16px !important;
      margin-top: 20px !important;
      box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
    }
  
    .content-section-distribuidor{
      order: 1 !important;
      padding: 20px !important;
      text-align: left !important;
    }
  
    .image-section-distribuidor{
      order: 2 !important;
      min-width: 100% !important;
      min-height: 260px !important;
      padding: 16px !important;
    }
  
    .image-section-distribuidor::before{
      opacity: .08 !important;
      animation-duration: 10s !important;
    }
  
    .character-distribuidor{
      width: auto !important;
      height: auto !important;
      animation-duration: 2.8s !important;
    }
  
    .logo-distribuidor h1{ font-size: 1.6rem !important; }
    .logo-distribuidor p{ font-size: .9rem !important; }
  
    .title-distribuidor{ font-size: 1.5rem !important; line-height: 1.25 !important; }
    .subtitle-distribuidor{ font-size: .95rem !important; line-height: 1.5 !important; }
  
    .benefits-distribuidor{ margin-bottom: 6px !important; }
    .benefit-item-distribuidor{ margin-bottom: 10px !important; }
    .benefit-item-distribuidor i{
      font-size: 1rem !important;
      margin-right: 10px !important;
      width: 22px !important;
    }
    .benefit-item-distribuidor span{ font-size: .95rem !important; }
  
    .whatsapp-btn-distribuidor{
      width: 100% !important;
      max-width: 100% !important;
      left: 0 !important;
      align-self: stretch !important;
      justify-content: center !important;
      padding: 14px 20px !important;
      border-radius: 14px !important;
      font-size: 1rem !important;
      gap: 8px !important;
      box-shadow: 0 10px 20px rgba(37,211,102,.28) !important;
    }
  }
  
  /* ======= Tablets en general (601px–1024px) ======= */
  @media (min-width: 601px) and (max-width: 1024px) {
    .section-distribuidor{
      padding: 56px 24px !important;
      background-size: 80px 44px !important;
    }
  
    .container-distribuidor{
      flex-direction: row !important;
      border-radius: 18px !important;
    }
  
    .image-section-distribuidor{
      min-width: 45% !important;
      padding: 24px !important;
      min-height: 360px !important;
    }
  
    .character-distribuidor{
      width: auto !important;
      height: auto !important;
    }
  
    .content-section-distribuidor{
      padding: 32px !important;
    }
  
    .logo-distribuidor h1{ font-size: 2rem !important; }
    .title-distribuidor{ font-size: 2rem !important; }
    .subtitle-distribuidor{ font-size: 1.05rem !important; }
  
    .benefit-item-distribuidor{ margin-bottom: 12px !important; }
    .benefit-item-distribuidor i{
      font-size: 1.1rem !important;
      width: 24px !important;
    }
  
    .whatsapp-btn-distribuidor{
      width: 280px !important;
      left: 0 !important;
      align-self: flex-start !important;
      padding: 16px 28px !important;
      border-radius: 18px !important;
      font-size: 1.05rem !important;
    }
  }
  
  /* ======= Tablets en vertical (768px–1024px con orientación portrait) ======= */
  @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .container-distribuidor {
      flex-direction: row !important; /* igual que en escritorio */
      align-items: center !important;
    }
  
    .image-section-distribuidor {
      min-width: 3dvb !important; /* un poco más reducido */
      padding: 20px !important;
    }
  
    .container-distribuidor img {
      max-width: 80% !important; /* imagen más pequeña */
      height: auto !important;
      display: block !important;
      margin: 0 auto !important;
    }
  
    .content-section-distribuidor {
      flex: 1 !important;
      padding: 28px !important;
    }
  
    .title-distribuidor {
      font-size: 1.9rem !important;
    }
  
    .subtitle-distribuidor {
      font-size: 1rem !important;
    }
  }