/* Reiniciamos márgenes y padding de todo */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos del cuerpo de la página */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* --------------------------
   1. ESTILOS DE LA NAVBAR
   -------------------------- */
header {
  width: 100%;
  background-color: #3c3c3c;
  /* quitar border-bottom para que no aparezca la línea */
  /* border-bottom: 1px solid #2a2a2a; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 120px;  /* ajusta según midas tu header */
}


.navbar {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  height: 100%; /* que ocupe todo el alto del header */
}

.navbar .logo img {
  height: 165px; /* Ajusta según tu logo */
}

.toggle-menu {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.nav-links li a:hover {
  color: #dddddd;
}

/* Responsive */
@media (max-width: 768px) {
  .toggle-menu {
    display: block;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background: #3c3c3c;
    flex-direction: column;
    width: 200px;
    border: 1px solid #2a2a2a;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  .nav-links.active {
    transform: translateX(0);
  }
  .nav-links li {
    margin: 1rem 0;
    text-align: right;
    padding-right: 1rem;
  }
  .nav-links li a {
    color: #fff;
  }
  .nav-links li a:hover {
    color: #dddddd;
  }
}




/* --------------------------
   3. ESTILOS DE SECCIONES
   -------------------------- */
.seccion {
  padding: 100px 20px 60px;
  max-width: 1000px;
  margin: auto;
}

.planes {
  background: #ffffff;
}

.quienes-somos {
  background: #f0f0f0;
}

.contactenos {
  background: #ffffff;
}

.seccion h2 {
  margin-bottom: 0.75rem;
  color: #222;
}

.seccion p {
  font-size: 1rem;
  color: #555;
}

/* --------------------------
   4. PIE DE PÁGINA (FOOTER)
   -------------------------- */
footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}


/* ==============================
   Sección “Planes” – Grid Animado
   ============================== */
.planes-grid {
  display: grid;
  /* Mínimo 250px por columna, y se ajusta automáticamente */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.9rem;
}

.plan-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.plan-item h3 {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.3;
}

/* Efecto hover: se “eleva” un poco y la sombra se intensifica */
.plan-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ajustes responsivos (opcional) */
@media (max-width: 480px) {
  .plan-item {
    padding: 1rem;
  }
  .plan-item h3 {
    font-size: 1rem;
  }
}

/* ============================
   Estilo para cada detalle de servicio
   ============================ */
.detalle-servicio {
  padding: 100px 20px 60px;   /* Igual que .seccion */
  max-width: 1000px;
  margin: 0 auto 2rem;        /* Centrado y un espacio extra abajo */
  background-color: #fff;     /* Fondo blanco para destacar el texto */
  border-radius: 8px;         /* Bordes redondeados opcional */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detalle-servicio h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  color: #3c3c3c;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.detalle-servicio p {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

.detalle-servicio ul {
  margin: 1rem 0 1.5rem 1.25rem;
  color: #555;
}

.detalle-servicio li {
  margin-bottom: 0.5rem;
}

/* Botón o enlace “Volver a Servicios” */
.volver-arriba {
  display: inline-block;
  margin-top: 1rem;
  color: #3c3c3c;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.volver-arriba:hover {
  color: #000;
}

/* Ajustes responsivos para detalle-servicio */
@media (max-width: 768px) {
  .detalle-servicio {
    padding: 80px 15px 40px;
    max-width: 90%;
  }
  .detalle-servicio h2 {
    font-size: 1.75rem;
  }
  .detalle-servicio p,
  .detalle-servicio li {
    font-size: 0.95rem;
  }
}




/* =====================================================
   1. Sección “Quiénes somos” – Fondo a todo ancho (full-width)
   ===================================================== */
#quienes-somos {
  /* Ocupa todo el ancho de la ventana */
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2 * -1);

  /* Imagen de fondo (reemplaza con la ruta correcta) */
  background: url("Multimedia/quienessomos.png") no-repeat center/cover;

  /* Altura mínima: ajústala según tu diseño */
  min-height: 600px;

  /* Flexbox para centrar contenido vertical y horizontalmente */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: hidden;
  color: #fff; /* color de texto blanco sobre el fondo */
}

/* -----------------------------------------------------
   2. Título grande “Misión” (sobre el fondo, sin cuadro)
   ----------------------------------------------------- */
.quienes-somos-titulo {
  font-family: "Montserrat", sans-serif; /* o la fuente que prefieras */
  font-size: 4rem;                       /* ajusta a tu gusto */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin: 0 auto 1.5rem; /* espacio abajo */
  z-index: 1;            /* para estar sobre el fondo */
}

/* -----------------------------------------------------
   3. Párrafo descriptivo “Misión” (sobre el fondo)
   ----------------------------------------------------- */
.quienes-somos-texto {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;      /* más grande que antes */
  line-height: 1.6;
  max-width: 800px;       /* ancho máximo para mejorar lectura */
  margin: 0 auto;         /* centrado horizontal */
  text-align: center;
  z-index: 1;
  padding: 0 1rem;        /* pequeño padding para adaptarse en móviles */
}

/* -----------------------------------------------------
   4. Opcional: si quieres oscurecer un poco la imagen de fondo
      sin usar un recuadro, agrega un pseudo-elemento:
   ----------------------------------------------------- */
#quienes-somos::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* negro al 30% para contraste */
  z-index: 0;                            /* queda detrás de título y párrafo */
}

/* -----------------------------------------------------
   5. Responsivo para pantallas pequeñas
   ----------------------------------------------------- */
@media (max-width: 768px) {
  .quienes-somos-titulo {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  .quienes-somos-texto {
    font-size: 1.125rem;  /* 18px aprox. en móviles */
    max-width: 90%;
  }
  #quienes-somos {
    min-height: 400px;
  }
}

/* ==============================
   Estilos para el formulario
   ============================== */
.contact-form {
  max-width: 600px;           /* Ancho máximo del formulario */
  margin: 2rem auto 0;        /* Centrado horizontal y separación del título */
  display: flex;
  flex-direction: column;
}

.contact-form .form-group {
  margin-bottom: 1.25rem;     /* Espacio entre cada campo */
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;           /* Permite que el usuario aumente el alto del textarea */
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #3c3c3c;      /* Mismo gris que la navbar */
  box-shadow: 0 0 0 2px rgba(60, 60, 60, 0.2);
}

.contact-form textarea {
  min-height: 150px;
  line-height: 1.5;
}

.contact-form button {
  width: 140px;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  background-color: #3c3c3c;  /* Mismo gris de la navbar para consistencia */
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;     /* Que el botón quede alineado a la izquierda */
  transition: background-color 0.2s ease;
}

.contact-form button:hover {
  background-color: #5a5a5a;  /* Gris más claro al pasar el ratón */
}

/* Responsivo: en pantallas muy pequeñas, ajusta anchos y tamaños */
@media (max-width: 480px) {
  .contact-form {
    margin: 1.5rem auto 0;
  }
  .contact-form button {
    width: 100%;               /* botón a ancho completo en móviles */
    text-align: center;
  }
}


/* ---------------------------------
   A. Hacemos que el <a> no subraye
   ni cambie el color del texto */
.plan-link {
  text-decoration: none;
  color: inherit;
}

/* ---------------------------------
   B. Imagen dentro de cada plan-item */
.plan-img {
  display: block;
  width: 100%;
  height: 180px;             /* Ajusta altura fija para todas las imágenes */
  object-fit: cover;         /* Recorta automáticamente para llenar */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* ---------------------------------
   C. Ajustes para .plan-item (tarjeta) */
.plan-item {
  display: flex;
  flex-direction: column;    /* Imagen arriba, texto abajo */
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;          /* Para que la imagen y el contenido no sobresalgan */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.plan-item h3 {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.3;
  margin: 1rem;              /* Espacio entre imagen y texto */
  text-align: center;
  flex-grow: 1;
}

/* Al pasar el ratón: elevamos la tarjeta */
.plan-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------
   D. Ajustes responsivos (si es necesario) */
@media (max-width: 480px) {
  .plan-img {
    height: 140px;          /* Menos alto en móviles */
  }
  .plan-item h3 {
    font-size: 1rem;
    margin: 0.75rem;
  }
}

/* -----------------------------------------------
   A. Reseteo mínimo (si ya lo tienes en otro CSS, puedes omitirlo aquí)
   ----------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}




/* =========================================
   Layout horizontal para cada fila de servicio seccion de planes pagina aparte 
   ========================================= */
.servicio-row {
  display: flex;
  align-items: center;
  gap: 2rem;              /* Espacio entre texto e imagen */
  margin: 3rem 0;         /* Separación vertical entre filas */
  flex-wrap: wrap;        /* Para que en móviles se apilen */
}

/* Invierte orden en filas impares (o las que tengan clase .reverse) */
.servicio-row.reverse {
  flex-direction: row-reverse;
}

/* Texto de cada servicio */
.texto-servicio {
  flex: 1;                /* Ocupa la mitad (o más) del ancho disponible */
  min-width: 280px;       /* Para que no quede demasiado angosto */
}

/* Título (h3) dentro de texto-servicio */
.texto-servicio h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  color: #3c3c3c;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Párrafo descriptivo */
.texto-servicio p {
  font-family: "Roboto", sans-serif;
  font-size: 1.125rem;    /* Ajusta si quieres más grande */
  line-height: 1.6;
  color: #555;
}

/* Contenedor de la imagen */
.imagen-servicio {
  flex: 1;                /* Ocupa la mitad (o más) del ancho disponible */
  min-width: 280px;       /* Evita que la img colapse demasiado en pantallas pequeñas */
}

/* Imagen responsiva */
.imagen-servicio img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;     /* Opcional: bordes redondeados */
}

/* ============================
   Ajustes responsivos (móviles)
   ============================ */
@media (max-width: 768px) {
  .servicio-row {
    flex-direction: column;     /* Cada fila se apila: primero imagen, luego texto */
    gap: 1.5rem;                /* Menos espacio en vertical */
    margin: 2rem 0;
  }
  /* Si .reverse está presente, en móvil también apila igual, no hace falta override */
}

/* -----------------------------------------------
   Efecto dinámico al hover sobre la imagen
   ----------------------------------------------- */
/* 1. Aseguramos que la imagen tenga transición */
.imagen-servicio img {
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Al pasar el mouse: escalado, brillo y sombra */
.imagen-servicio:hover img {
  transform: scale(1.05);            /* Aumenta ligeramente el tamaño */
  filter: brightness(1.1);           /* Hacerla un poco más luminosa */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Sombra más intensa */
}

/* Opcional: efecto al salir del hover (rebote sutil) */
.imagen-servicio img {
  /* ya tiene transition declarada arriba */
}

/* Reducir el tamaño del título principal de la sección */
.planes > h2 {
  font-size: 2rem;    /* antes 2.5rem, ahora más pequeño */
}

/* Reducir el tamaño de los subtítulos de cada servicio */
.planes .texto-servicio h3 {
  font-size: 1.5rem;  /* antes 2rem, ajusta a tu gusto */
}


/* =====================================
   Sección “Planes Personalizados”
   ===================================== */
.planes-personalizados {
  background: #f9f9f9;
  padding-top: 60px;
}

.planes-personalizados h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  color: #3c3c3c;
  margin-bottom: 2rem;
}

/* Grid de dos columnas */
.planes-personalizados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* Cada tarjeta de plan */
.plan-personalizado {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-personalizado h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  color: #3c3c3c;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.plan-personalizado small {
  font-size: 0.875rem;
  color: #666;
  display: block;
  margin-top: 0.25rem;
}

.plan-personalizado p {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

/* Hover: leve elevación */
.plan-personalizado:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Responsivo: una columna en móvil */
@media (max-width: 768px) {
  .planes-personalizados-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   Botón “Saber más” dentro de Servicios
   =================================== */
.btn-saber-mas {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #3c3c3c;       /* Gris de la navbar */
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-saber-mas:hover {
  background-color: #5a5a5a;       /* Gris más claro */
  transform: translateY(-2px);     /* Levantar ligeramente */
}




/* Grid de tarjetas */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Cada tarjeta */
.plan-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  text-align: center;
}

.plan-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}

.plan-item h3 {
  margin: 1rem 0 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25rem;
  color: #3c3c3c;
}

/* Botón más info */
.btn-mas-info {
  margin-top: auto; /* empuja el botón al final de la tarjeta */
  padding: 0.5rem 1rem;
  background-color: #3c3c3c;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s, transform 0.2s;
}

.btn-mas-info:hover {
  background-color: #5a5a5a;
  transform: translateY(-2px);
}

/* ====================================
   Estilos para la tabla de “Planes Deportia”
   ==================================== */
.tabla-deportia {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
}

.tabla-deportia th,
.tabla-deportia td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  vertical-align: top;
  text-align: center;
}

.tabla-deportia thead th {
  background-color: #054a6a; /* azul oscuro */
  color: #fff;
  font-weight: 600;
}

.tabla-deportia tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* Ajuste para celdas con salto de línea */
.tabla-deportia td {
  line-height: 1.4;
}

/* Responsivo: en móvil, convertir en lista */
@media (max-width: 768px) {
  .tabla-deportia,
  .tabla-deportia thead,
  .tabla-deportia tbody,
  .tabla-deportia th,
  .tabla-deportia td,
  .tabla-deportia tr {
    display: block;
  }
  .tabla-deportia thead {
    display: none;
  }
  .tabla-deportia tr {
    margin-bottom: 1.5rem;
  }
  .tabla-deportia td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border: none;
    border-bottom: 1px solid #ddd;
  }
  .tabla-deportia td::before {
    content: attr(data-label);
    font-weight: 600;
    width: 40%;
    text-align: left;
  }
  .tabla-deportia td:last-child {
    border-bottom: none;
  }
}

/* Centrar texto en las celdas de la tabla */
.tabla-deportia th,
.tabla-deportia td {
  text-align: center;      /* Centrado horizontal */
  vertical-align: middle;  /* Centrado vertical */
}

@media (max-width: 768px) {
  .tabla-deportia,
  .tabla-deportia thead,
  .tabla-deportia tbody,
  .tabla-deportia th,
  .tabla-deportia td,
  .tabla-deportia tr {
    display: block;
  }
  .tabla-deportia thead {
    display: none;
  }
  .tabla-deportia tr {
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
  }
  .tabla-deportia td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid #eee;
  }
  .tabla-deportia td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #333;
    flex: 1;
  }
  .tabla-deportia td:last-child {
    border-bottom: none;
  }
}

.tabla-deportia td::before {
  content: attr(data-label);
  /* … */
}

/* -----------------------------
   Título “Servicios” en Index
   ----------------------------- */
#planes > h2 {
  text-align: center;                         /* Centrado */
  font-family: 'Montserrat', sans-serif;      /* Tipografía llamativa */
  font-size: 3rem;                            /* Tamaño destacado */
  font-weight: 700;                           /* Negrita */
  color: #3c3c3c;                             /* Color base */
  margin-bottom: 1.5rem;                      /* Separación inferior */
  transition: color 0.3s ease, transform 0.3s ease;  /* Suaviza hover */
}

#planes > h2:hover {
  color: #5a5a5a;     /* Gris más claro al pasar el cursor */
  transform: scale(1.05); /* Ligero “zoom” para énfasis */
}

/* Centrar el título de “OTROS SERVICIOS” (y de cualquier .tabla-title) */
.tabla-title {
  text-align: center;
  font-family: "Montserrat", sans-serif;  /* opcional: misma fuente que usas */
  font-size: 1.75rem;                     /* ajústalo a tu gusto */
  margin: 1rem 0;                         /* espacio arriba y abajo */
}


/* Estilo “sobrio pero llamativo” para las casillas de planes */
.servicio-row .texto-servicio .plan {
  background: linear-gradient(135deg, #ffffff 0%, #f5faff 100%);
  border: 1px solid #e1e7ed;       /* borde muy suave */
  border-left: 4px solid #128ACB;  /* acento de color de marca */
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: 
    transform 0.3s ease, 
    box-shadow 0.3s ease, 
    border-color 0.3s ease;
}

/* Título más definido */
.servicio-row .plan h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #128ACB;
}

/* Ítems con un gris neutro para contraste */
.servicio-row .plan ul li {
  margin-bottom: 0.5rem;
  color: #555555;
  line-height: 1.4;
}

/* Hover que “eleva” la tarjeta y refuerza el acento */
.servicio-row .plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: #0f6fa0;
}

/* Layout columna para cualquier sección con class="servicio-column" */
.servicio-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Imagen responsive */
.servicio-column .imagen-servicio img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Espacio texto */
.servicio-column .texto-servicio {
  margin: 1.5rem 0;
  max-width: 600px;
}

/* Planes en fila con scroll en móvil */
.servicio-column .planes {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 1rem;
}

/* Ancho fijo de cada tarjeta */
.servicio-column .plan {
  flex: 0 0 220px;
}

/* Layout columna para cualquier sección con class="servicio-column" */
.servicio-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Imagen responsive */
.servicio-column .imagen-servicio img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Espacio texto */
.servicio-column .texto-servicio {
  margin: 1.5rem 0;
  max-width: 600px;
}

/* Planes en fila con scroll en móvil */
.servicio-column .planes {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 1rem;
}

/* Ancho fijo de cada tarjeta */
.servicio-column .plan {
  flex: 0 0 220px;
}


/* Aplica a todos los planes en cualquier sección de servicios */
.servicio-row .plan,
.servicio-column .plan {
  background: linear-gradient(135deg, #ffffff 0%, #f5faff 100%);
  border: 1px solid #e1e7ed;       
  border-left: 4px solid #128ACB;  
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: 
    transform 0.3s ease, 
    box-shadow 0.3s ease, 
    border-color 0.3s ease;
}

/* Título más definido */
.servicio-row .plan h4,
.servicio-column .plan h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #128ACB;
}

/* Ítems con un gris neutro para contraste */
.servicio-row .plan ul li,
.servicio-column .plan ul li {
  margin-bottom: 0.5rem;
  color: #555555;
  line-height: 1.4;
}

/* Hover que “eleva” la tarjeta y refuerza el acento */
.servicio-row .plan:hover,
.servicio-column .plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: #0f6fa0;
}

/* Grid de 3 columnas para planes */
.servicio-column .planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;              /* espacio entre tarjetas */
  margin-top: 1.5rem;     /* separación del texto */
}

/* Opcional: ajustar en pantallas más pequeñas */
@media (max-width: 900px) {
  .servicio-column .planes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .servicio-column .planes {
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   RESPONSIVE PARA MÓVILES
   ------------------------- */

/* Base: todas las secciones de servicio en columna */
.servicio-row,
.servicio-row.reverse {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
}
.servicio-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Media query para tablets y pantallas medias */
@media (max-width: 900px) {

  /* Convierto filas en columna */
  .servicio-row,
  .servicio-row.reverse {
    flex-direction: column !important;
    text-align: center;
  }
  .servicio-row.reverse {
    /* si era reverse, invierto después del breakpoint */
    flex-direction: column-reverse !important;
  }

  /* Imagen y texto ocupan 100% */
  .servicio-row .imagen-servicio,
  .servicio-row .texto-servicio {
    width: 100%;
  }
  .servicio-row .imagen-servicio img {
    max-width: 100%;
    height: auto;
  }

  /* Ajuste de grid en planes para 2 columnas */
  .servicio-column .planes,
  .servicio-row .planes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Media query para móviles pequeños */
@media (max-width: 600px) {

  /* Texto ligeramente más pequeño */
  .servicio-row .texto-servicio p,
  .servicio-column .texto-servicio p {
    font-size: 0.95rem;
  }

  /* Grid de 1 columna */
  .servicio-column .planes,
  .servicio-row .planes {
    grid-template-columns: 1fr;
  }

  /* Ajuste del gap vertical del contenedor planes */
  .servicio-row .planes,
  .servicio-column .planes {
    padding-bottom: 0;
  }

  /* Máximo ancho de tarjetas */
  .plan {
    margin: 0 auto;
    width: calc(100% - 2rem);
  }
}

/* --------------------------
   2. BANNER A PANTALLA COMPLETA
   -------------------------- */

/* Reemplaza todo lo anterior de .banner-container */
.banner-container {
  position: relative;
  width: 100%;        /* ocupa siempre el 100% del contenedor padre */
  max-width: 100%;
  margin: 0 auto;     /* centrado horizontal */
  overflow: hidden;   /* recorta cualquier sobrante */
  padding: 0;         /* elimina padding extra */
}

/* Asegura que la imagen dentro del banner se ajuste y recorte bien */
.banner-img {
  display: block;       /* quita espacios inline */
  width: 100%;          /* siempre al ancho del contenedor */
  height: auto;         /* mantiene la proporción */
  object-fit: cover;    /* cubre todo el área recortando si es necesario */
  object-position: center center; /* centra la imagen */
}



@media (max-width: 768px) {
  .banner-container,
  .inicio {
    margin-top: 30px;  /* o el nuevo alto de header en móvil */
    padding-top: 30px;
  }
}

/* ——— Botón flotante WhatsApp ——— */
.whatsapp-float {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  width: 56px !important;
  height: 56px !important;
  background-color: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  z-index: 1001 !important;
  text-decoration: none !important;
}

/* asegúrate de que la imagen dentro sea pequeña y centrada */
.whatsapp-float img {
  max-width: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  height: auto !important;
}

/* hover mantiene tamaño del botón pero realza la sombra */
.whatsapp-float:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important;
}