<!-----codigo ----->
/* Contenedor del buscador */
.search-container {
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 500px;
    margin: 40px auto;
    padding: 10px;
}

/* Formulario modificado */
.search-form {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos bajen si no hay espacio */
    gap: 10px;
    align-items: center;
    background: #ffffff;
    padding: 6px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.search-form:focus-within {
    border-color: #007bff;
    box-shadow: 0 4px 20px rgba(0, 123, 255, 0.15);
}

/* Grupo del input modificado */
.input-group {
    display: flex;
    align-items: center;
    flex: 1 1 300px; /* Crece, se encoge y define un ancho mínimo base */
    padding-left: 15px;
}

.search-icon {
    color: #888;
    font-size: 16px;
    margin-right: 10px;
}

/* Input de texto */
#usernameInput {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: #333;
    background: transparent;
}

#usernameInput::placeholder {
    color: #aaa;
}

/* Botón de búsqueda modificado */
#searchButton {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 26px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    flex: 1 1 auto; /* Permite al botón adaptarse en pantallas chicas */
    text-align: center;
}

#searchButton:hover {
    background: #0056b3;
}

#searchButton:active {
    transform: scale(0.98);
}


/* Globo de notificación (Tooltip de error) */
.error-tooltip {
    display: none; /* Oculto al inicio */
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff3838;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(255, 56, 56, 0.3);
    z-index: 100;
    animation: fadeIn 0.3s ease;
    white-space: nowrap;
}

/* Triángulo del globo */
.error-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #ff3838 transparent;
}

/* Animación de aparición */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50__, 10px); }
    to { opacity: 1; transform: translate(-50__, 0); }
}


    /* Centra todo el contenido horizontalmente en la pantalla */
    .contenedor-principal {
      display: flex;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
    }

    /* Caja contenedora de las dos columnas */
    .bloque-columnas {
      display: flex;
      width: 90%;       /* Ancho total que ocupará el bloque en la pantalla */
      max-width: 1200px; /* Límite máximo de ancho para pantallas grandes */
      gap: 20px;         /* Espacio de separación entre las dos columnas */
    }

    /* ======================================================= */
    /* CONFIGURACIÓN DE ANCHOS (Modifica estos dos porcentajes) */
    /* Nota: La suma de ambos porcentajes debe ser igual a 100% */
    /* ======================================================= */
    
    .columna-1 {
      width: 35%; /* Modifica este valor para cambiar el ancho izquierdo */
      background-color: #e2e8f0;
      padding: 20px;
      border-radius: 8px;
    }

    .columna-2 {
      width: 65%; /* Modifica este valor para cambiar el ancho derecho */
      background-color: #cbd5e1;
      padding: 20px;
      border-radius: 8px;
    }


        /* codigo precios */
.seccion-precios-whatsapp {
    /* Tamaños de texto configurables */
    --spw-tamano-precio: 34px; 
    --spw-tamano-descripcion-precio: 13px;
    --spw-tamano-servicio: 14px;
    --spw-tamano-boton: 14px;

    /* Colores */
    --spw-color-gris-suave: #f4f4f4;
    --spw-color-blanco: #ffffff;
    --spw-color-texto: #333333;
    --spw-color-whatsapp: #25d366;
    --spw-color-whatsapp-hover: #20ba5a;

    /* Configuración de Ancho y Separación */
    --spw-ancho-cuadro: 280px; 
    --spw-separacion-lateral: 16px; 
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 20px auto; /* Ahora este margen sí se respetará */
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* Reseteo interno estricto corregido: solo afecta a lo que está ADENTRO de la sección */
.seccion-precios-whatsapp * , 
.seccion-precios-whatsapp *::before, 
.seccion-precios-whatsapp *::after {
    box-sizing: border-box !important;
    margin: 0; /* Se quitó el !important para no romper márgenes heredados necesarios */
    padding: 0;
}

/* Estructura de cada Tarjeta */
.seccion-precios-whatsapp .spw-tarjeta {
    background-color: var(--spw-color-blanco);
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    width: var(--spw-ancho-cuadro) !important; 
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Control estricto de bordes y desborde */
.seccion-precios-whatsapp .spw-bloque-vertical {
    padding: 18px var(--spw-separacion-lateral) !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* 1. Sección Superior (Precio) */
.seccion-precios-whatsapp .spw-superior {
    background-color: var(--spw-color-gris-suave);
    border-bottom: 1px solid #e0e0e0 !important;
}

.seccion-precios-whatsapp .spw-monto {
    font-size: var(--spw-tamano-precio) !important;
    font-weight: bold !important;
    color: var(--spw-color-texto) !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important; /* Ahora este margen inferior sí funcionará */
}

.seccion-precios-whatsapp .spw-texto-precio {
    font-size: var(--spw-tamano-descripcion-precio) !important;
    color: #666666 !important;
}

/* 2. Sección Central (Descripción Servicio) */
.seccion-precios-whatsapp .spw-central {
    background-color: var(--spw-color-blanco);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seccion-precios-whatsapp .spw-texto-servicio {
    font-size: var(--spw-tamano-servicio) !important;
    color: var(--spw-color-texto) !important;
    line-height: 1.5 !important;
}

/* 3. Sección Inferior (Botón WhatsApp) */
.seccion-precios-whatsapp .spw-inferior {
    background-color: var(--spw-color-gris-suave);
    border-top: 1px solid #e0e0e0 !important;
}

.seccion-precios-whatsapp .spw-btn-wa {
    display: inline-block !important;
    background-color: var(--spw-color-whatsapp) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    font-size: var(--spw-tamano-boton) !important;
    font-weight: bold !important;
    width: 100% !important;
    transition: background-color 0.3s ease !important;
    text-align: center !important;
}

.seccion-precios-whatsapp .spw-btn-wa:hover {
    background-color: var(--spw-color-whatsapp-hover) !important;
}


        /* -----globo----- */
        #notification-container {
            position: fixed;
            bottom: 30px;
            left: 20px;
            z-index: 9999;
        }

        /* Diseño del globo de conversación */
        .speech-bubble {
            position: relative;
            background: #000000;
            border: 3px solid #800080;
            border-radius: 15px;
            padding: 15px 20px;
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            font-weight: 500;
            max-width: 280px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            text-align: center; 
            
            /* Animación de entrada y salida */
            opacity: 0;
            transform: translateY(20px) scale(0.9);
            transition: all 0.5s ease-in-out;
            
            /* Habilitamos interacción del mouse con todo el globo */
            pointer-events: auto; 
        }

        /* Cambia el cursor al pasar por encima del globo */
        .speech-bubble:hover {
            cursor: pointer;
        }

        /* Clase para activar la aparición */
        .speech-bubble.show {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Estilos específicos para los enlaces dentro del globo */
        .speech-bubble a {
            color: #da70d6; 
            text-decoration: underline;
            font-weight: bold;
        }

        .speech-bubble a:hover {
            color: #ffffff; 
        }

        /* Triángulo del globo (Cola de la conversación centrada simétricamente) */
        .speech-bubble::after, .speech-bubble::before {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 15px 15px 0 15px;
            border-style: solid;
            display: block;
            width: 0;
        }

        /* Color de fondo interno del triángulo */
        .speech-bubble::after {
            border-color: #000000 transparent transparent transparent;
            bottom: -11px;
        }

        /* Color del borde del triángulo */
        .speech-bubble::before {
            border-color: #800080 transparent transparent transparent;
        }
		
		#buscador {
    scroll-margin-top: 400px; /* <--- AQUÍ SE APLICA */
}