html {
  scroll-behavior: smooth;
}
:root {
  --color-primary: #ff8000;
  --color-primary-hover: #e67300;
  --shadow-default: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-large: 0px 20px 60px rgba(0,0,0,0.5);
  --transition-default: 0.3s ease;
  --header-height: 60px;
}
body {
  overflow-x: hidden;
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
main {
  margin-top: 110px;
  margin-bottom: 40px;
}
section {
  scroll-margin-top: var(--header-height);
}
.pagina-con-margen {
  margin-top: var(--header-height);
  margin-bottom: 0;
}
.card {
  --card-height: 80px;
  height: var(--card-height);
  transition: all var(--transition-default);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nueva-flecha {
  transition: transform 0.3s ease-in-out;
}
#precio3Mensual {
  display: inline-block;
  margin-top: 20px;
}
.imagen-text {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.tipoPlan {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tipoPlan span {
  visibility: hidden;
}
@media (max-width: 640px) {
  :root {
    --header-height: 50px;
  }
  .card {
    --card-height: 60px;
  }
}
@media (max-width: 480px) {
  #main .absolute.inset-0 {
    padding-top: 4rem;
  }
  #main h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  #main p {
    font-size: 0.875rem;
  }
  #main a {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .tarjetas {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .tarjetaPlan {
    width: 90%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .tarjetaPlan .descripcion {
    min-height: 0;
    padding-bottom: 1rem;
  }
  .tarjetaPlan button {
    margin-top: 1rem;
  }
  .tarjetaPlan .titulo {
    margin-top: 1rem !important;
  }
  .tarjetaPlan .tipoPlan {
    margin-bottom: 0.5rem !important;
  }
}

/* =======================================================
   CONGELAR COMPORTAMIENTO NAVBAR (SOLUCIÓN DEFINITIVA)
   ======================================================= */

/* 1. EN ESCRITORIO (Pantallas grandes): Ocultar el desplegable móvil por completo */
@media (min-width: 1024px) {
    .dropdown, .dropdown-content, .dropdown-open {
        display: none !important;
    }
    /* Sobrescribir para el contenedor y menú principal */
    div.dropdown.relative,
    #nav-list {
        display: flex !important;
        position: static !important; /* Forzar que no sea absoluto en desktop */
    }
    /* Forzar ocultar el botón de hamburguesa en desktop */
    #menu-toggle {
        display: none !important;
    }
}

/* 2. EN MÓVIL Y RESPONSIVE (Pantallas pequeñas/medianas): 
   Ocultar los enlaces horizontales de escritorio y hacer flotar el menú hamburguesa */
@media (max-width: 1023px) {
    /* Ocultar la lista de enlaces horizontal que rompe el navbar hacia abajo */
    .navbar-center, 
    .navbar-end .hidden.lg\:flex,
    nav ul:not(.dropdown-content) {
        display: none !important;
    }
    
    /* Forzar que la barra gris recupere su altura fija original sin estirarse */
    .navbar, nav {
        height: 4rem !important; /* Altura estándar de la cabecera */
        overflow: visible !important;
    }

    /* Clavar el bloque blanco del menú hamburguesa en el aire como capa superior absoluta */
    .dropdown .dropdown-content {
        position: absolute !important;
        right: 0 !important;
        top: 100% !important;
        display: none; /* Lo controla el JS al hacer click */
        flex-direction: column !important;
        background-color: #ffffff !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        width: 210px !important;
        z-index: 9999 !important;
    }
    
    /* Mostrar el menú flotante solo cuando tenga la clase activa de DaisyUI o no esté oculto por el JS */
    .dropdown-open .dropdown-content,
    .dropdown:focus-within .dropdown-content,
    .dropdown .dropdown-content:not(.hidden) {
        display: flex !important;
    }
    
    /* Estilo limpio para los enlaces del menú móvil */
    div.dropdown ul li a {
        display: block !important;
        padding: 0.5rem 1rem !important;
        color: #374151 !important;
        text-align: right !important;
    }
}

/* =======================================================
   ESTABILIZACIÓN Y COLOR EXACTO DEL BOTÓN CONTACTO
   ======================================================= */
@media (min-width: 1024px) {
    nav ul li a[href*="formulario.html"],
    .navbar-end a[href*="formulario.html"],
    .navbar-center a[href*="formulario.html"] {
        background-color: #ff8200 !important; /* Naranja idéntico al botón inferior */
        color: #ffffff !important;
        padding: 0.6rem 1.4rem !important; /* Un pelín más estilizado */
        border-radius: 0.5rem !important; /* Redondeado suave a juego */
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        transition: background-color 0.2s ease-in-out !important;
        margin-left: 1rem !important;
        margin-right: 1.5rem !important; /* SEPARACIÓN EXTRA por la derecha con el icono de usuario */
    }

    /* Ajuste de brillo en hover */
    nav ul li a[href*="formulario.html"]:hover,
    .navbar-end a[href*="formulario.html"]:hover {
        background-color: #e07200 !important; /* Variación controlada en hover */
    }
}

div.sections {
    margin-top: 3rem !important; /* Esto es el equivalente al mt-12 de Tailwind y empujará todo hacia abajo */
}