/* ========================================== */
/* COLORES CORPORATIVOS BITEL */
/* ========================================== */
:root {
  --bitel-yellow: #ffea00;      /* Amarillo corporativo */
  --bitel-blue: #003366;        /* Azul corporativo */
  --bitel-gray: #6c757d;        /* Gris neutro */
  --whatsapp-green: #25D366;    /* Verde WhatsApp */
}

/* ========================================== */
/* ESTILOS GENERALES */
/* ========================================== */
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #f8f8f8;

  /* ⚡ Espacio para que el header fijo no tape el contenido */
  padding-top: clamp(160px, 15vh, 200px);
}

/* ========================================== */
/* HEADER FIJO */
/* ========================================== */
.header {
  background-color: var(--bitel-yellow);
  color: var(--bitel-blue);
  padding: 25px 18px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  position: fixed; /* Fija el header arriba */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;   /* Por encima de todo */
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.logo {
  width: 75px;
  height: auto;
}

.title-section {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.title-section h1 {
  margin: 0;
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.title-section p {
  margin: 5px 0 0;
  font-size: clamp(13px, 3.5vw, 16px);
  line-height: 1.2;
}

/* ========================================== */
/* TAGS Y PROMOCIONES – EVITAR SUPERPOSICIÓN */
/* ========================================== */
.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bitel-blue);
  color: white;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 2; /* Encima de tarjeta pero debajo de header */
}

.promo-card {
  position: relative;
}

/* ========================================== */
/* NAVBAR – ESTILO MODERNO */
/* ========================================== */
.navbar {
  display: flex;                     /* Elementos en fila */
  justify-content: flex-start;       /* Comienzan desde la izquierda */
  gap: 12px;                         /* Espacio entre enlaces */
  margin-top: 10px;                  /* Separación con el logo/título */
  position: relative;
  z-index: 10;
  overflow-x: auto;                  /* Scroll horizontal si no caben */
  scrollbar-width: none;             /* Oculta scrollbar Firefox */
  -ms-overflow-style: none;          /* Oculta scrollbar IE/Edge */
}

/* Oculta scrollbar en Chrome/Safari */
.navbar::-webkit-scrollbar {
  display: none;
}

/* ESTILO DE CADA ENLACE */
.navbar a {
  flex: 0 0 auto;                     /* Mantiene ancho natural */
  padding: 8px 18px;                  /* Espacio cómodo */
  text-decoration: none;              /* Sin subrayado */
  color: var(--bitel-blue);           /* Azul corporativo */
  font-weight: 600;                   /* Más visible */
  font-size: 16px;
  border-radius: 25px;                /* Forma de “pill” */
  background-color: rgba(255, 255, 255, 0.206); /* Fondo blanco translúcido */
  white-space: nowrap;                /* No corta el texto */
  text-align: center;
  transition: all 0.3s ease;          /* Animación suave */
}

/* HOVER – EFECTO AL PASAR EL MOUSE */
.navbar a:hover {
  background-color: var(--bitel-yellow); /* Fondo amarillo */
  color: #003366;                        /* Texto azul oscuro */
  transform: translateY(-2px);           /* Leve elevación */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Sombra ligera */
}

/* OPCIONAL – ENLACE ACTIVO */
.navbar a.active {
  background-color: #003366;            /* Azul de fondo */
  color: var(--bitel-yellow);           /* Texto amarillo */
}

/* ========================================== */
/* RESPONSIVE – MÓVIL PARA NAVBAR */
/* ========================================== */
@media (max-width: 480px) {
  .navbar {
    justify-content: flex-start;        /* Siempre en fila */
    gap: 10px;                          /* Menor espacio entre enlaces */
    padding: 0 5px;                     /* Ocupa casi todo el ancho */
  }

  .navbar a {
    font-size: 14px;                    /* Texto más pequeño para móvil */
    padding: 10px 16px;                 /* Más cómodo para los dedos */
  }
}

/* ========================================== */
/* CARRUSEL DE IMÁGENES */
/* ========================================== */
.carousel {
  width: 100%;                            /* Ocupa todo el ancho */
  max-width: 1200px;                      /* Máximo 1200px */
  margin: 25px auto;                      /* Centrado con margen */
  overflow: hidden;                       /* Oculta lo que sobresale */
  border-radius: 10px;                     /* Esquinas redondeadas */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* ========================================== */
/* ESPACIO PARA HEADER FIJO (NO TAPAR CARRUSEL) */
/* ========================================== */
.header-space {
  height: 140px;  /* Ajusta según altura real del header */
}

@media (max-width: 480px) {
  .header-space {
    height: 180px;  /* Altura mayor en móvil */
  }
}

/* Contenedor de las diapositivas */
.slides {
  position: relative;                    /* Permite posicionar las slides de forma absoluta */
  width: 100%; height: 400px;           /* Tamaño fijo del carrusel */
}

/* Cada imagen del carrusel */
.slide {
  position: absolute;                    /* Todas las imágenes en el mismo lugar */
  width: 100%; height: 100%;            /* Ocupan todo el espacio del contenedor */
  opacity: 0;                           /* Inicialmente invisibles */
  transition: opacity 1s ease;          /* Transición suave de 1 segundo */
}

/* Clase para la slide activa (visible) */
.slide.active {
  opacity: 1;                           /* Hace visible la slide activa */
}

/* Imágenes dentro del carrusel */
.slide img {
  width: 100%; height: 100%;            /* Ocupan todo el espacio disponible */
  object-fit: cover;                    /* Recorta la imagen para llenar el espacio */
}

/* ========================================== */
/*  SECCIÓN DE PROMOCIONES */
/* ========================================== */

.promos {
  text-align: center;                    /* Centra todo el texto */
  padding: 50px 20px;                   /* Espacio interno */
  background-color: #fff;               /* Fondo blanco */
}

/* Título de la sección */
.promos h2 {
  font-size: 40px;                       /* Tamaño de fuente muy grande */
  margin-bottom: 40px;                   /* Espacio debajo del título */
  font-weight: normal;                   /* Peso de fuente normal (no negrita) */
}

/* Parte azul del título */
.promos h2 .azul {
  color: var(--bitel-blue);              /* Color azul Bitel */
  font-weight: 700;                      /* Texto en negrita */
}

/* Parte gris del título */
.promos h2 .gris {
  color: var(--bitel-gray);              /* Color gris */
  font-weight: 400;                      /* Texto normal */
}

/* Texto de llamada a la acción */
.cta-text {
  font-size: 40px;                       /* Tamaño grande */
  margin-top: 50px;                      /* Espacio arriba */
  font-weight: normal;                   /* Peso normal */
}

/* Mismos estilos para las partes azul y gris del CTA */
.cta-text .azul {
  color: var(--bitel-blue);
  font-weight: 700;
}

.cta-text .gris {
  color: var(--bitel-gray);
  font-weight: 400;
}

/* Contenedor de las tarjetas de promoción */
.promo-container {
  display: flex;                          /* Tarjetas en fila */
  justify-content: center;               /* Centra las tarjetas */
  flex-wrap: wrap;                       /* Permite que bajen de línea en móviles */
  gap: 30px;                             /* Espacio entre tarjetas */
  margin-bottom: 40px;                   /* Espacio debajo del contenedor */
}

/* ========================================== */
/* 💳 TARJETAS DE PROMOCIÓN */
/* ========================================== */

.promo-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;           /* <-- Impide que la imagen tape el botón */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  padding-bottom: 15px;        /* <-- Asegura espacio para el botón */
}

/* Efecto al pasar el mouse sobre las tarjetas */
.promo-card:hover {
  transform: translateY(-5px);          /* Se eleva 5px */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

/* Imágenes dentro de las tarjetas */
.promo-card img {
  width: 100%;
  height: auto;               /* <-- Evita distorsión */
  display: block;
  object-fit: cover;          /* <-- Se adapta sin desbordarse */
}

/* Etiqueta superior (Postpago/Equipos) */
.tag {
  position: absolute;                    /* Posiciona sobre la imagen */
  top: 10px; left: 50%;                 /* 10px desde arriba, centrado horizontalmente */
  transform: translateX(-50%);          /* Centra exactamente */
  background-color: var(--bitel-blue);  /* Fondo azul */
  color: #fff;                          /* Texto blanco */
  font-weight: bold;                    /* Negrita */
  border-radius: 10px;                  /* Esquinas redondeadas */
  padding: 6px 15px;                    /* Espacio interno */
  font-size: 13px;                      /* Texto pequeño */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Contenido inferior de la tarjeta */
.promo-card-content {
  position: absolute;                    /* Posiciona en la parte inferior */
  bottom: 0;                            /* Pegado al fondo */
  width: 100%;                          /* Ancho completo */
  background: rgba(255, 255, 255, 0.95); /* Fondo blanco semi-transparente */
  padding: 15px;                        /* Espacio interno */
  text-align: center;                   /* Texto centrado */
}

/* Botón "Conocer más" */
.btn-conocer {
  margin-top: 12px;
  padding: 10px 15px;
  width: 85%;                /* <-- Se adapta al móvil */
  margin-left: auto;
  margin-right: auto;
  background-color: #004AAD;
  color: white;
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

a {
  text-decoration: none;  /* Quita la línea */
  color: inherit;         /* Mantiene el color del texto */
}

/* Efecto hover del botón */
.btn-conocer:hover {
  background-color: #002f72;            /* Azul más oscuro al pasar el mouse */
}

/* ========================================== */
/* SECCIÓN PLANES POSTPAGO */
/* ========================================== */

.planes-section {
  padding: 50px 10%;                    /* Espacio interno (10% en laterales) */
  text-align: center;                   /* Texto centrado */
  background-color: #f9fafc;            /* Fondo gris muy claro */
}

.planes-section h2 {
  font-size: 2rem;                      /* Tamaño de fuente (2 veces el tamaño base) */
  color: #002b5c;                       /* Color azul oscuro */
  margin-bottom: 10px;                  /* Pequeño espacio debajo */
}

.planes-section p {
  color: #555;                          /* Color gris para texto secundario */
  margin-bottom: 40px;                  /* Espacio debajo del párrafo */
}

/* Contenedor de las tarjetas de planes */
.planes-container {
  display: flex;                          /* Tarjetas en fila */
  flex-wrap: wrap;                       /* Permite múltiples filas */
  justify-content: center;               /* Centra las tarjetas */
  gap: 25px;                             /* Espacio entre tarjetas */
}

/* ========================================== */
/* TARJETAS INDIVIDUALES DE PLANES */
/* ========================================== */

.plan-card {
  background: white;                     /* Fondo blanco */
  border-radius: 15px;                   /* Esquinas redondeadas */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
  padding: 25px;                         /* Espacio interno */
  width: 300px;                          /* Ancho fijo */
  min-height: 470px;                     /* Altura mínima */
  text-align: left;                      /* Texto alineado a la izquierda */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  display: flex;                         /* Flexbox para organización */
  flex-direction: column;                /* Elementos en columna */
  justify-content: space-between;        /* Espacia los elementos uniformemente */
}

/* Efecto hover de las tarjetas de planes */
.plan-card:hover {
  transform: translateY(-6px);          /* Se eleva 6px */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

/* Título del plan */
.plan-card h3 {
  font-size: 1.1rem;                    /* Tamaño de fuente */
  color: #333;                          /* Color gris oscuro */
}

/* Etiqueta "Plan Recomendado" */
.plan-card .etiqueta {
  background-color: #ffe600;             /* Fondo amarillo */
  color: #000;                          /* Texto negro */
  display: inline-block;                /* Se comporta como bloque pero en línea */
  font-weight: bold;                    /* Negrita */
  padding: 4px 10px;                    /* Espacio interno */
  border-radius: 5px;                   /* Esquinas redondeadas */
  margin: 5px 0 10px;                   /* Márgenes arriba/abajo */
}

/* Precio del plan */
.plan-card .precio {
  font-size: 2.5rem;                    /* Tamaño muy grande */
  color: #00b3b3;                       /* Color turquesa */
  font-weight: bold;                    /* Negrita */
  text-align: center;                   /* Centrado */
  margin: 10px 0;                       /* Márgenes arriba/abajo */
}

/* Detalle del precio */
.plan-card .detalle {
  font-size: 0.9rem;                    /* Texto pequeño */
  color: #666;                          /* Color gris */
  text-align: center;                   /* Centrado */
  margin-bottom: 12px;                  /* Espacio debajo */
}

/* ========================================== */
/* LISTA DE BENEFICIOS */
/* ========================================== */

.caracteristicas {
  list-style: none;                      /* Elimina los puntos de la lista */
  padding: 0;                           /* Sin espacio interno */
  font-size: 0.9rem;                    /* Texto pequeño */
  color: #333;                          /* Color gris oscuro */
  margin: 12px 0;                       /* Márgenes arriba/abajo */
}

.caracteristicas li {
  margin-bottom: 6px;                   /* Espacio entre elementos de la lista */
}

/* ========================================== */
/* BOTÓN "LO QUIERO" */
/* ========================================== */

.btn-lo-quiero {
  display: block;                        /* Ocupa todo el ancho disponible */
  text-align: center;                   /* Texto centrado */
  background-color: var(--bitel-blue);  /* Fondo azul Bitel */
  color: #fff;                          /* Texto blanco */
  font-weight: bold;                    /* Negrita */
  border-radius: 25px;                  /* Bordes muy redondeados (ovalado) */
  padding: 10px;                        /* Espacio interno */
  margin: 10px auto;                    /* Centrado con margen */
  width: 80%;                           /* 80% del ancho de la tarjeta */
  text-decoration: none;                /* Sin subrayado */
  transition: background 0.3s ease;     /* Transición suave del color */
}

/* Efecto hover del botón */
.btn-lo-quiero:hover {
  background-color: #0055aa;            /* Azul más oscuro */
}

/* ========================================== */
/*  APPS INCLUIDAS */
/* ========================================== */

.apps {
  text-align: center;                   /* Contenido centrado */
  padding-top: 12px;                    /* Espacio arriba */
  border-top: 1px solid #e5e5e5;       /* Línea divisoria arriba */
  margin-top: auto;                     /* Empuja esta sección al fondo de la tarjeta */
}

.apps p {
  font-weight: 600;                     /* Texto semi-negrita */
  margin-bottom: 8px;                   /* Espacio debajo */
  color: #333;                          /* Color gris oscuro */
}

.apps img {
  width: 85%;                           /* 85% del ancho disponible */
  max-width: 200px;                     /* Pero no más de 200px */
}

/* ========================================== */
/*  SECCIÓN DE SOPORTE */
/* ========================================== */

.soporte-section {
  text-align: center;                   /* Texto centrado */
  background-color: #fff;               /* Fondo blanco */
  padding: 40px 20px 0;                 /* Espacio interno (sin espacio abajo) */
}

.soporte-texto {
  font-size: 1.8rem;                    /* Tamaño grande */
  color: var(--bitel-gray);             /* Color gris */
  margin: 0;                            /* Sin márgenes */
  font-weight: 500;                     /* Peso de fuente medio */
}

.soporte-texto span {
  color: var(--bitel-blue);             /* Color azul */
  font-weight: 800;                     /* Extra negrita */
  text-transform: uppercase;            /* Texto en mayúsculas */
}

/* ==================== MARCADOR ==================== */
/* ==================== MARCADOR ==================== */
/* ==================== MARCADOR ==================== */

/* ========================================== */
/*  SECCIÓN EJECUTIVOS DE VENTAS */
/* ========================================== */

.ejecutivos-section {
  text-align: center;                   /* Todo centrado */
  padding: 50px 20px;                   /* Espacio interno */
  background-color: #fff;               /* Fondo blanco */
}

.ejecutivos-section h2 {
  font-size: 2rem;                      /* Tamaño grande */
  color: var(--bitel-blue);             /* Azul Bitel */
  margin-bottom: 30px;                  /* Espacio debajo */
}

/* Contenedor de tarjetas de ejecutivos */
.ejecutivos-container {
  display: flex;                          /* Tarjetas en fila */
  justify-content: center;               /* Centradas */
  flex-wrap: wrap;                       /* Múltiples filas en móviles */
  gap: 25px;                             /* Espacio entre tarjetas */
}

/* ========================================== */
/*  TARJETAS DE EJECUTIVOS */
/* ========================================== */

  .ejecutivo-card {
    background: #fff;               /* Fondo blanco limpio */
    border-radius: 15px;            /* Bordes redondeados */
    padding: 18px;                  /* Espaciado interno */
    text-align: center;             /* Centra todo el contenido */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra ligera */
  }

/* Efecto hover de las tarjetas */
.ejecutivo-card:hover {
  transform: translateY(-6px);          /* Se eleva 6px */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

/* Imagen del ejecutivo */
  .ejecutivo-card img {
    width: 100%;         /* Imagen ocupa todo el ancho */
    border-radius: 12px; /* Esquinas redondeadas */
    margin-bottom: 10px; /* Separación respecto al texto */
  }

/* Nombre del ejecutivo */
.ejecutivo-card h3 {
  font-size: 1rem;                      /* Tamaño de fuente */
  color: var(--bitel-blue);             /* Azul Bitel */
  background-color: #e9ecef;            /* Fondo gris claro */
  width: 100%;                          /* Ancho completo */
  text-align: center;                   /* Texto centrado */
  padding: 8px 0;                       /* Espacio interno arriba/abajo */
  margin: 0;                            /* Sin márgenes */
  font-weight: bold;                    /* Negrita */
}

/* Información de contacto */
  .ejecutivo-card p {
    font-weight: bold;   /* Hace que el nombre resalte */
    color: var(--bitel-blue); /* Azul corporativo Bitel */
    margin-bottom: 8px;  /* Espacio debajo del texto */
  }

/* ========================================== */
/*  BOTÓN WHATSAPP */
/* ========================================== */

/* BOTÓN WhatsApp */
.whatsapp-btn {
  background-color: #25D366;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  gap: 8px;                         /* Espacio entre icono y texto */
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto hover del botón WhatsApp */
  .whatsapp-btn:hover {
    transform: translateY(-2px); /* Eleva el botón ligeramente */
    box-shadow: 0 5px 15px rgba(0,0,0,0.25); /* Sombra más fuerte */
  }

/* Icono de WhatsApp */
.whatsapp-btn img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  display: inline-block;
}

/* ========================================== */
/*  SECCIÓN NUESTROS LOCALES */
/* ========================================== */

.locales-section {
  background-color: #f8f9fa;             /* Fondo gris claro */
  padding: 60px 20px;                   /* Espacio interno */
  text-align: center;                   /* Texto centrado */
}

.locales-section h2 {
  color: var(--bitel-blue);             /* Azul Bitel */
  font-size: 2.2rem;                    /* Tamaño muy grande */
  margin-bottom: 40px;                  /* Espacio debajo */
  position: relative;                   /* Para pseudo-elementos (como ::after) */
  font-weight: 700;                     /* Negrita */
}

/* Contenedor grid para las tarjetas de locales */
.locales-container {
  display: grid;                          /* Usa CSS Grid para layout */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
  gap: 25px;                             /* Espacio entre tarjetas */
  max-width: 1200px;                     /* Ancho máximo */
  margin: 0 auto;                        /* Centrado */
}

/* ========================================== */
/*  TARJETAS DE LOCALES (CLICKEABLES) */
/* ========================================== */

.local-card {
  background: white;                     /* Fondo blanco */
  border-radius: 12px;                   /* Esquinas redondeadas */
  padding: 25px;                         /* Espacio interno */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: all 0.3s ease;             /* Transición suave de todas las propiedades */
  border-left: 4px solid var(--bitel-blue); /* Borde azul a la izquierda */
  text-align: left;                      /* Texto alineado a la izquierda */
  text-decoration: none;                 /* Sin subrayado (es un enlace) */
  color: inherit;                        /* Hereda el color del texto */
  display: block;                        /* Se comporta como bloque */
  position: relative;                    /* Para posicionar elementos hijos */
  cursor: pointer;                       /* Cursor de mano al pasar */
}

/* Efecto hover de las tarjetas de locales */
.local-card:hover {
  transform: translateY(-5px);          /* Se eleva 5px */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
  border-left: 4px solid #e53935;       /* Borde rojo al hacer hover */
}

/* Texto "Ver en Google Maps" que aparece al hacer hover */
.local-card::after {
  content: '📍 Ver en Google Maps';     /* Texto con emoji */
  position: absolute;                    /* Posiciona sobre la tarjeta */
  bottom: 15px; right: 15px;            /* Esquina inferior derecha */
  font-size: 0.8rem;                    /* Texto pequeño */
  color: var(--bitel-blue);             /* Color azul */
  font-weight: 600;                     /* Semi-negrita */
  opacity: 0;                           /* Inicialmente invisible */
  transition: opacity 0.3s ease;        /* Aparece/desaparece suavemente */
}

/* Muestra el texto al hacer hover */
.local-card:hover::after {
  opacity: 1;                           /* Hace visible el texto */
}

/* Título de la sucursal */
.local-card h3 {
  color: var(--bitel-blue);             /* Azul Bitel */
  font-size: 1.4rem;                    /* Tamaño grande */
  margin-bottom: 15px;                  /* Espacio debajo */
  border-bottom: 1px solid #eee;       /* Línea divisoria debajo */
  padding-bottom: 10px;                 /* Espacio entre texto y línea */
  font-weight: 600;                     /* Semi-negrita */
  padding-right: 120px;                 /* Espacio para el texto de Google Maps */
}

/* Dirección de la sucursal */
.local-card p {
  color: #555;                          /* Color gris */
  margin: 8px 0;                        /* Márgenes arriba/abajo */
  line-height: 1.5;                     /* Espaciado entre líneas */
  font-size: 0.95rem;                   /* Tamaño de fuente */
}

/* ========================================= */
/*  ANIMACIÓN DE PULSO AL HACER CLIC */
/* ========================================== */

/* Define la animación de pulso */
@keyframes pulse {
  0% { transform: scale(1); }           /* Tamaño normal */
  50% { transform: scale(1.02); }       /* Se agranda un 2% */
  100% { transform: scale(1); }         /* Vuelve al tamaño normal */
}

/* Aplica la animación al hacer clic */
.local-card:active {
  animation: pulse 0.3s ease;           /* Dura 0.3 segundos con easing */
}

/* ========================================== */
/*  PIE DE PÁGINA (FOOTER) */
/* ========================================== */

.footer {
  background: var(--bitel-blue);        /* Fondo azul Bitel */
  padding: 40px 20px 15px;              /* Espacio interno (menos abajo) */
  color: white;                         /* Texto blanco */
  text-align: center;                   /* Texto centrado */
}

/* Contenedor principal del footer */
.footer-content {
  display: flex;                          /* Información y redes en fila */
  justify-content: space-between;       /* Espacio entre las dos columnas */
  align-items: flex-start;               /* Alineadas arriba */
  max-width: 1200px;                     /* Ancho máximo */
  margin: 0 auto 25px;                   /* Centrado con margen abajo */
  flex-wrap: wrap;                       /* En móviles se apilan */
  gap: 30px;                             /* Espacio entre columnas */
}

/* Información de la empresa */
.empresa-info {
  flex: 1;                              /* Ocupa el espacio disponible */
  min-width: 300px;                     /* Ancho mínimo */
  text-align: left;                     /* Texto alineado a la izquierda */
}

.empresa-info h3 {
  font-size: 1.4rem;                    /* Tamaño de fuente */
  margin-bottom: 8px;                   /* Espacio debajo */
  font-weight: 700;                     /* Negrita */
  color: var(--bitel-yellow);           /* Amarillo Bitel */
}

.empresa-info p {
  margin: 6px 0;                        /* Márgenes arriba/abajo */
  font-size: 0.95rem;                   /* Tamaño de fuente */
  line-height: 1.4;                     /* Espaciado entre líneas */
  font-weight: 400;                     /* Peso normal */
}

/* Sección de redes sociales */
.redes-footer {
  flex: 1;                              /* Ocupa el espacio disponible */
  min-width: 300px;                     /* Ancho mínimo */
}

.redes-footer h3 {
  font-size: 1.4rem;                    /* Tamaño de fuente */
  margin-bottom: 15px;                  /* Espacio debajo */
  font-weight: 600;                     /* Semi-negrita */
  color: white;                         /* Texto blanco */
}

/* Contenedor de iconos de redes */
.redes-container {
  display: flex;                          /* Iconos en fila */
  justify-content: center;               /* Centrados */
  flex-wrap: wrap;                       /* Múltiples filas si es necesario */
  gap: 15px;                             /* Espacio entre iconos */
}

/* Cada tarjeta de red social */
.red-social {
  display: flex;                          /* Icono y texto en columna */
  flex-direction: column;                /* Elementos apilados verticalmente */
  align-items: center;                   /* Centrados horizontalmente */
  text-decoration: none;                 /* Sin subrayado */
  color: white;                          /* Texto blanco */
  padding: 12px;                         /* Espacio interno */
  border-radius: 8px;                    /* Esquinas redondeadas */
  background: rgba(255, 255, 255, 0.1); /* Fondo blanco semi-transparente */
  backdrop-filter: blur(10px);           /* Efecto de desenfoque (glassmorphism) */
  transition: all 0.3s ease;             /* Transición suave */
  width: 90px;                           /* Ancho fijo */
}

/* Efecto hover de las redes sociales */
.red-social:hover {
  background: rgba(255, 255, 255, 0.2); /* Fondo más blanco al pasar */
  transform: translateY(-2px);          /* Se eleva 2px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Iconos de redes sociales */
.red-social img {
  width: 30px;                           /* Tamaño del icono */
  height: auto;                          /* Mantiene proporciones */
  margin-bottom: 8px;                    /* Espacio debajo del icono */
  filter: none;                          /* Muestra colores originales */
  object-fit: contain;                   /* Mantiene proporciones sin recortar */
}

/* Texto debajo de los iconos */
.red-social span {
  font-weight: 600;                     /* Semi-negrita */
  font-size: 0.8rem;                    /* Texto pequeño */
}

/* Parte inferior del footer (derechos reservados) */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisoria semi-transparente */
  padding-top: 15px;                    /* Espacio arriba */
  max-width: 1200px;                     /* Ancho máximo */
  margin: 0 auto;                        /* Centrado */
}

.footer-bottom p {
  margin: 0;                            /* Sin márgenes */
  font-size: 0.85rem;                   /* Texto muy pequeño */
  font-weight: 400;                     /* Peso normal */
  opacity: 0.8;                         /* Texto semi-transparente */
}

/* ========================================== */
/*  DISEÑO RESPONSIVE PARA TABLET Y MÓVIL */
/* ========================================== */

/* 
   Breakpoint: TABLETS (pantallas menores a 992px)
  Ajustes generales para pantallas medianas (tablets o laptops pequeñas).
*/
@media (max-width: 992px) {

  /* Aumenta el espacio superior para compensar header fijo */
  body {
    padding-top: 130px;
  }

  /* Centra el contenido del encabezado en pantallas medianas */
  .header-content {
    flex-direction: column;
    text-align: center;
  }

  /* Reduce el tamaño del título principal */
  .header-content h1 {
    font-size: 28px;
  }

  /* Ajusta subtítulo o descripción del header */
  .header-content p {
    font-size: 14px;
  }

  /* Permite que el menú se divida en varias líneas */
  .navbar {
    flex-wrap: wrap;
    gap: 5px;
  }

  /* Reduce separación entre elementos de secciones */
  .promo-container,
  .planes-container,
  .ejecutivos-container {
    gap: 20px;
  }

  /* Ajusta ancho máximo de las tarjetas (promos, planes, ejecutivos) */
  .promo-card,
  .plan-card,
  .ejecutivo-card {
    width: 100%;
    max-width: 360px;
  }

  /* Reduce altura del carrusel para pantallas medianas */
  .slides {
    height: 320px;
  }

  /* Ajusta tamaño de títulos para que no se desborden */
  .promos h2 {
    font-size: 2rem;
  }

  /* Ajusta texto de llamado a la acción */
  .cta-text {
    font-size: 1.6rem;
  }

  /* Centra contenido del footer para tablets */
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  /* Alinea secciones de texto del footer */
  .empresa-info,
  .redes-footer {
    text-align: center;
  }

  /* Centra íconos de redes en el pie */
  .redes-container {
    justify-content: center;
  }

  /* Ajusta tamaño de texto en tarjetas de locales */
  .local-card h3 {
    font-size: 1.2rem;
    padding-right: 60px;
  }
}

/* 
   Breakpoint: MÓVILES (pantallas menores a 768px)
  Adaptaciones visuales para smartphones verticales.
*/
@media (max-width: 768px) {

  /* Reduce espacio superior ya que el header es más pequeño */
  body {
    padding-top: 120px;
  }

  /* Reduce padding del header para optimizar espacio vertical */
  .header {
    padding: 25px 15px;
  }

  /* Ajusta tamaño del logo */
  .logo {
    width: 45px;
    height: 45px;
    margin-right: 10px;
  }

  /* Reduce tamaño del título principal */
  .header-content h1 {
    font-size: 22px;
  }

  /* Ajusta subtítulo o descripción del header */
  .header-content p {
    font-size: 13px;
  }

  /* Reduce tamaño de los enlaces del menú */
  .navbar a {
    padding: 10px 15px;
    font-size: 14px;
  }

  /* Reduce altura del carrusel para móviles */
  .slides {
    height: 250px;
  }

  /* Pone las promociones una debajo de otra */
  .promo-container {
    flex-direction: column;
    align-items: center;
  }

  /* Reduce tamaño del título principal de promociones */
  .promos h2 {
    font-size: 1.6rem;
  }

  /* Ajusta texto principal de llamada a la acción */
  .cta-text {
    font-size: 1.3rem;
  }

  /* Ajusta tamaño de tarjetas promocionales */
  .promo-card {
    height: auto;
    max-width: 320px;
  }

  /* Ajusta tamaño y padding de tarjetas de planes */
  .plan-card {
    width: 90%;
    min-height: auto;
    padding: 20px;
  }

  /* Ajusta tamaño del título de sección de planes */
  .planes-section h2 {
    font-size: 1.6rem;
  }

  /* Ajusta texto descriptivo de la sección planes */
  .planes-section p {
    font-size: 0.95rem;
  }

  /* Reduce texto de características de planes */
  .caracteristicas li {
    font-size: 0.85rem;
  }

  /* Ajusta tarjetas de ejecutivos para móviles */
  .ejecutivo-card {
    width: 90%;
    min-height: 380px;
  }

  /* Ajusta altura de imágenes de ejecutivos */
  .ejecutivo-card img {
    height: 220px;
  }

  /* Hace que la grilla de locales muestre 1 por fila */
  .locales-container {
    grid-template-columns: 1fr;
  }

  /* Ajusta padding en tarjetas de locales */
  .local-card {
    padding: 20px;
  }

  /* Reorganiza el footer en columna */
  .footer-content {
    flex-direction: column;
    gap: 20px;
  }

  /* Reduce títulos de secciones del footer */
  .empresa-info h3,
  .redes-footer h3 {
    font-size: 1.2rem;
  }

  /* Reduce texto del copyright */
  .footer-bottom p {
    font-size: 0.8rem;
  }
}

/* 
   Breakpoint: EXTRA SMALL (pantallas menores a 480px)
  Ajustes finos para teléfonos muy pequeños (320–480px de ancho).
*/
@media (max-width: 480px) {

  /* Reduce el tamaño del título principal */
  .header-content h1 {
    font-size: 20px;
  }

  /* Compacta los botones del menú */
  .navbar a {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Reduce los títulos de promociones y CTA */
  .promos h2,
  .cta-text {
    font-size: 1.2rem;
  }

  /* Ajusta tarjetas de promociones */
  .promo-card {
    width: 100%;
    max-width: 280px;
  }

  /* Ajusta tarjetas de planes */
  .plan-card {
    width: 100%;
    padding: 15px;
  }

  /* Botones ocupan todo el ancho en pantallas pequeñas */
  .btn-lo-quiero,
  .whatsapp-btn {
    width: 100%;
    padding: 8px;
  }

  /* Reduce títulos dentro de tarjetas locales */
  .local-card h3 {
    font-size: 1rem;
  }

  /* Escala imágenes de apps para evitar desbordes */
  .apps img {
    width: 70%;
  }

  /* Ajusta padding general del footer */
  .footer {
    padding: 25px 10px;
  }

  /* Compacta los elementos dentro del footer */
  .footer-content {
    gap: 15px;
  }

  /* Reduce tamaño y padding de los íconos de redes */
  .red-social {
    width: 70px;
    padding: 8px;
  }

  /* Reduce texto de nombre de red social */
  .red-social span {
    font-size: 0.7rem;
  }

  /* Ajusta texto de copyright */
  .footer-bottom p {
    font-size: 0.75rem;
  }
}