:root {
    --color-fondo: #f8fafc;
    --color-texto: #0f172a;
    --color-texto-suave: #64748b;
    --primario: #4f46e5;
    --primario-hover: #4338ca;
    --secundario: #d946ef;
    --fondo-cristal: rgba(255, 255, 255, 0.75);
    --borde-cristal: rgba(255, 255, 255, 0.6);
    --sombra-cristal: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --fondo-tarjeta: rgba(255, 255, 255, 0.6);
    --color-precio: #334155;
    --fondo-precio: rgba(148, 163, 184, 0.15);
    --borde-precio: rgba(148, 163, 184, 0.3);
    --color-alerta: #ef4444;
    --color-carrito: #0f172a;
}

body.modo-oscuro {
    --color-fondo: #0f172a;
    --color-texto: #f8fafc;
    --color-texto-suave: #94a3b8;
    --fondo-cristal: rgba(15, 23, 42, 0.75);
    --borde-cristal: rgba(255, 255, 255, 0.1);
    --sombra-cristal: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --fondo-tarjeta: rgba(30, 41, 59, 0.6);
    --color-precio: #f8fafc;
    --fondo-precio: rgba(203, 213, 225, 0.1);
    --borde-precio: rgba(203, 213, 225, 0.2);
    --color-alerta: #f87171;
    --color-carrito: #1e293b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Outfit', sans-serif; background-color: var(--color-fondo); color: var(--color-texto); min-height: 100vh; overflow-x: hidden; position: relative; transition: background-color 0.3s, color 0.3s; }

.fondo-animado { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background: radial-gradient(circle at center, var(--color-fondo) 0%, transparent 100%); transition: background 0.3s; }
.burbuja { position: absolute; filter: blur(80px); opacity: 0.6; animation: flotar 20s infinite ease-in-out alternate; }
.burbuja-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: rgba(99, 102, 241, 0.25); animation-delay: 0s; }
.burbuja-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: rgba(217, 70, 239, 0.25); animation-delay: -5s; }
.burbuja-3 { top: 40%; left: 50%; width: 600px; height: 600px; background: rgba(16, 185, 129, 0.2); transform: translateX(-50%); animation-delay: -10s; }

@keyframes flotar { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(100px, 50px) rotate(20deg); } }

.cabecera-cristal { position: sticky; top: 0; z-index: 100; background: var(--fondo-cristal); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde-cristal); box-shadow: var(--sombra-cristal); padding: 1rem 0; transition: all 0.3s; }
.contenedor-cabecera { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 700; background: linear-gradient(to right, var(--color-texto), var(--primario)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; cursor: pointer; transition: transform 0.2s; }
.logo:hover { transform: scale(1.02); }
.logo span { color: var(--primario); -webkit-text-fill-color: var(--primario); }

.navegacion-redes { display: flex; gap: 1rem; }
.btn-red-social { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-texto); text-decoration: none; font-size: 1.2rem; background: var(--fondo-tarjeta); backdrop-filter: blur(4px); border: 1px solid var(--borde-cristal); box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.btn-red-social:hover { transform: translateY(-3px) scale(1.1); color: white; }
.btn-red-social.whatsapp:hover { background: #25D366; border-color: #25D366; }
#botonModoOscuro:hover { background: #facc15; border-color: #facc15; color: #1e293b; }
body.modo-oscuro #botonModoOscuro:hover { background: #f8fafc; border-color: #f8fafc; color: #1e293b; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.principal { text-align: center; margin: 3rem 0; }
.principal h2 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; }
.principal h2 span { background: linear-gradient(135deg, var(--primario), var(--secundario)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.principal p { color: var(--color-texto-suave); font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; transition: color 0.3s; }

.barra-busqueda { position: relative; max-width: 500px; margin: 0 auto; }
.barra-busqueda i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--color-texto-suave); }
.barra-busqueda input { width: 100%; padding: 1rem 1rem 1rem 3rem; border-radius: 50px; background: var(--fondo-tarjeta); border: 1px solid var(--borde-cristal); color: var(--color-texto); font-family: inherit; font-size: 1rem; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.barra-busqueda input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 20px rgba(99, 102, 241, 0.15); }

.filtros-categoria { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 3rem; }
.btn-filtro { background: var(--fondo-tarjeta); border: 1px solid var(--borde-cristal); color: var(--color-texto); padding: 0.5rem 1.2rem; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: 0.9rem; transition: all 0.3s ease; backdrop-filter: blur(4px); }
.btn-filtro:hover { background: var(--primario); color: white; border-color: var(--primario); transform: translateY(-2px); }
.btn-filtro.activo { background: var(--primario); border-color: var(--primario); color: white; font-weight: 600; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }

.cuadricula-servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; }
.tarjeta-categoria { background: var(--fondo-tarjeta); border: 1px solid var(--borde-cristal); border-radius: 16px; padding: 15px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sombra-cristal); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tarjeta-categoria:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 15px rgba(99, 102, 241, 0.1); }

.titulo-categoria { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(150,150,150,0.2); display: flex; align-items: center; gap: 0.75rem; color: var(--color-texto); }
.icono-categoria { color: var(--secundario); font-size: 1.3rem; }
.descripcion-categoria { font-size: 0.95rem; color: var(--color-alerta); font-weight: 700; margin-bottom: 1rem; line-height: 1.5; text-align: center; background: rgba(239, 68, 68, 0.05); padding: 0.75rem; border-radius: 8px; border: 1px dashed rgba(239, 68, 68, 0.3); }

.lista-servicios { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; margin-bottom: 1rem; }
.item-servicio { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: rgba(150, 150, 150, 0.05); border-radius: 8px; transition: all 0.2s ease; border: 1px solid transparent; }
.item-servicio:hover { background: rgba(150, 150, 150, 0.1); border-color: var(--borde-cristal); transform: scale(1.01); }

.info-servicio { display: flex; flex-direction: column; flex: 1; min-width: 0; margin-right: 1rem; }
.nombre-servicio { font-weight: 600; font-size: 0.95rem; white-space: normal; word-wrap: break-word; color: var(--color-texto); }
.nota-servicio { font-size: 0.75rem; color: var(--color-texto-suave); margin-top: 0.2rem; font-style: italic; }

.contenedor-precio-boton { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.precio-servicio { color: var(--color-precio); font-weight: 700; font-size: 1.05rem; background: var(--fondo-precio); padding: 0.3rem 0.7rem; border-radius: 8px; white-space: nowrap; border: 1px solid var(--borde-precio); backdrop-filter: blur(5px); }

.btn-agregar-carrito { background: var(--primario); color: white; border: none; border-radius: 6px; width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background 0.3s, transform 0.2s; font-size: 1rem; }
.btn-agregar-carrito:hover { background: var(--primario-hover); transform: scale(1.1); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); }

/* Animación de Ahorro (Puerquito y Billete) */
.animacion-ahorro { position: fixed; font-size: 2.2rem; pointer-events: none; z-index: 9999; animation: volar-puerquito 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes volar-puerquito {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -80%) scale(1.2); opacity: 1; }
    80% { transform: translate(-50%, -120%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -150%) scale(0.8); opacity: 0; }
}

.carrito-flotante { position: fixed; bottom: 2rem; right: 2rem; width: 65px; height: 65px; border-radius: 50%; background: var(--color-carrito); color: white; border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; z-index: 1000; transition: transform 0.3s, background 0.3s; }
.carrito-flotante:hover { transform: scale(1.1) rotate(-5deg); }
.contador-carrito { position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; font-size: 0.8rem; font-weight: bold; width: 26px; height: 26px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid var(--color-fondo); transition: border-color 0.3s; }

.panel-carrito { position: fixed; top: 0; right: -400px; width: 100%; max-width: 400px; height: 100vh; background: var(--color-fondo); box-shadow: -5px 0 30px rgba(0,0,0,0.1); z-index: 1002; transition: right 0.3s ease, background 0.3s; display: flex; flex-direction: column; }
.panel-carrito.abierto { right: 0; }
.cabecera-carrito { padding: 1.5rem; border-bottom: 1px solid var(--borde-cristal); display: flex; justify-content: space-between; align-items: center; background: var(--fondo-cristal); backdrop-filter: blur(10px); }
.cabecera-carrito h3 { font-size: 1.5rem; margin: 0; color: var(--color-texto); }
.boton-cerrar { background: none; border: none; font-size: 1.5rem; color: var(--color-texto-suave); cursor: pointer; transition: color 0.3s; }
.boton-cerrar:hover { color: #ef4444; }
.contenido-carrito { padding: 1.5rem; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; }
.item-carrito { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--fondo-tarjeta); border: 1px solid var(--borde-cristal); border-radius: 8px; }
.info-item-carrito { flex-grow: 1; padding-right: 1rem; }
.titulo-item-carrito { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; color: var(--color-texto); }
.precio-item-carrito { color: var(--color-precio); font-weight: bold; font-size: 0.9rem; }
.btn-eliminar-item { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; transition: background 0.3s; display: flex; justify-content: center; align-items: center; }
.btn-eliminar-item:hover { background: #ef4444; color: white; }
.carrito-vacio { text-align: center; color: var(--color-texto-suave); margin-top: 2rem; font-style: italic; }

.pie-carrito { padding: 1.5rem; border-top: 1px solid var(--borde-cristal); background: var(--fondo-cristal); backdrop-filter: blur(10px); }
.total-carrito { display: flex; justify-content: space-between; align-items: center; font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--color-texto); }
.nota-impuestos { font-size: 0.8rem; font-style: italic; color: var(--color-texto-suave); font-weight: 400; margin-top: 0.2rem; }
.boton-finalizar { width: 100%; padding: 1rem; border: none; border-radius: 8px; background: #25D366; color: white; font-weight: 600; font-size: 1.1rem; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.3s, transform 0.2s; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
.boton-finalizar:hover { background: #20b858; transform: translateY(-2px); }

.fondo-oscuro-carrito { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 1001; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(3px); }
.fondo-oscuro-carrito.activo { opacity: 1; pointer-events: auto; }

.contenedor-notificaciones { position: fixed; bottom: 2rem; left: 2rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.notificacion { background: var(--fondo-cristal); backdrop-filter: blur(10px); border: 1px solid var(--borde-cristal); color: var(--color-texto); padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 0.75rem; transform: translateX(-100%); opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); font-weight: 600; }
.notificacion.mostrar { transform: translateX(0); opacity: 1; }
.notificacion i { color: #10b981; font-size: 1.2rem; }

.seccion-preguntas { margin-top: 4rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.titulo-preguntas { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: var(--color-texto); font-weight: 700; }
.item-acordeon { background: var(--fondo-tarjeta); border: 1px solid var(--borde-cristal); border-radius: 8px; margin-bottom: 1rem; overflow: hidden; backdrop-filter: blur(10px); }
.boton-acordeon { width: 100%; text-align: left; padding: 1rem 1.5rem; background: none; border: none; font-size: 1.1rem; font-weight: 600; color: var(--color-texto); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; font-family: inherit; }
.boton-acordeon:hover { background: rgba(150, 150, 150, 0.05); }
.boton-acordeon i { transition: transform 0.3s; }
.boton-acordeon.activo i { transform: rotate(180deg); color: var(--primario); }
.contenido-acordeon { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: rgba(150, 150, 150, 0.02); }
.contenido-acordeon p { padding: 0 1.5rem 1rem; color: var(--color-texto-suave); line-height: 1.6; }

.volver-arriba { position: fixed; bottom: 6.5rem; right: 2rem; width: 45px; height: 45px; border-radius: 50%; background: var(--fondo-tarjeta); color: var(--color-texto); border: 1px solid var(--borde-cristal); box-shadow: var(--sombra-cristal); cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; z-index: 900; transition: all 0.3s; backdrop-filter: blur(4px); }
.volver-arriba:hover { background: var(--primario); color: white; border-color: var(--primario); transform: translateY(-3px); }

.oculto { display: none !important; }
footer { text-align: center; padding: 2rem; border-top: 1px solid var(--borde-cristal); margin-top: 4rem; color: var(--color-texto-suave); font-size: 0.9rem; transition: color 0.3s; }

@media (max-width: 768px) {
    .principal h2 { font-size: 2.2rem; }
    .cuadricula-servicios { grid-template-columns: 1fr; }
    .carrito-flotante, .volver-arriba { right: 1rem; }
    .contenedor-notificaciones { left: 1rem; bottom: 1rem; right: 1rem; align-items: center; }
    .notificacion { width: 100%; justify-content: center; transform: translateY(100%); }
    .notificacion.mostrar { transform: translateY(0); }
}