<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portal de Colaboradores - Principios de Higiene | B'VIDA</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.card {
@apply bg-white/70 backdrop-blur-sm border border-slate-200/80 rounded-xl shadow-md transition-all duration-300;
}
.hover-effect {
@apply hover:shadow-xl hover:border-cyan-300/50 hover:-translate-y-1;
}
.section-title {
@apply text-4xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-600;
}
.accordion-content {
display: none;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.gradient-text {
@apply text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-600;
}
</style>
</head>
<body class="bg-slate-50 text-slate-700">
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<span class="text-xl font-bold text-slate-800">BONI SERVICIOS S.A.C.</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#generalidades" class="text-slate-600 hover:text-cyan-600 transition-colors">Generalidades</a>
<a href="#instalaciones" class="text-slate-600 hover:text-cyan-600 transition-colors">Instalaciones</a>
<a href="#procesos" class="text-slate-600 hover:text-cyan-600 transition-colors">Procesos</a>
<a href="#procedimientos" class="text-slate-600 hover:text-cyan-600 transition-colors">Procedimientos</a>
<a href="#registros" class="text-slate-600 hover:text-cyan-600 transition-colors">Registros</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-slate-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</nav>
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4 space-y-2">
<a href="#generalidades" class="block py-2 text-slate-600 hover:bg-cyan-50 rounded-md px-3">Generalidades</a>
<a href="#instalaciones" class="block py-2 text-slate-600 hover:bg-cyan-50 rounded-md px-3">Instalaciones</a>
<a href="#procesos" class="block py-2 text-slate-600 hover:bg-cyan-50 rounded-md px-3">Procesos</a>
<a href="#procedimientos" class="block py-2 text-slate-600 hover:bg-cyan-50 rounded-md px-3">Procedimientos</a>
<a href="#registros" class="block py-2 text-slate-600 hover:bg-cyan-50 rounded-md px-3">Registros</a>
</div>
</header>
<main class="container mx-auto px-6 py-16">
<section class="text-center mb-24">
<h1 class="text-5xl md:text-7xl font-extrabold text-slate-800 mb-4">Portal de <span class="gradient-text">Colaboradores</span></h1>
<p class="text-xl text-slate-500 max-w-3xl mx-auto">Principios de Higiene y Buenas Prácticas de Manufactura (BPM)</p>
<div class="mt-8 text-left bg-blue-50 border-l-4 border-cyan-500 text-slate-700 p-6 rounded-lg max-w-4xl mx-auto">
<p class="font-semibold text-cyan-700">Introducción</p>
<p class="mt-2">Nuestra empresa es consciente de que la inocuidad de los alimentos contribuye a proteger la salud de la población. Este portal detalla nuestro Programa de Buenas Prácticas de Manufactura (BPM), diseñado para garantizar la calidad e inocuidad en el almacenamiento, transporte, procesamiento y distribución de nuestros productos, asegurando que lleguen al consumidor final en óptimas condiciones.</p>
</div>
</section>
<section id="generalidades" class="mb-24">
<h2 class="section-title">I. Generalidades</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-3 text-cyan-600">Objetivo General</h3>
<p>Asegurar las condiciones sanitarias óptimas en cada uno de los procesos, siguiendo los lineamientos establecidos para garantizar la inocuidad del agua desde la captación hasta el embotellado final.</p>
</div>
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-3 text-cyan-600">Alcance</h3>
<p>Aplicable a todas las áreas de la Empresa: Recepción de Materia Prima, Purificación, Llenado, Pre Lavado, Almacenes de Producto Terminado e Insumos, Servicios Higiénicos y Vestuarios.</p>
</div>
<div class="card md:col-span-2 p-6 hover-effect">
<h3 class="text-xl font-semibold mb-3 text-cyan-600">Política de Inocuidad y Compromiso Gerencial</h3>
<p>El compromiso de BONI SERVICIOS S.A.C. es ofrecer al consumidor un agua de mesa inocua para satisfacer plenamente sus necesidades. Con este propósito, adoptamos y aplicamos los principios generales de higiene para las buenas prácticas de manufactura, cumpliendo con el decreto supremo de la calidad de agua para consumo humano.</p>
</div>
</div>
<div class="mt-8">
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>Definiciones Clave</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6">
<ul class="space-y-3 list-disc list-inside text-slate-600 pt-4 border-t border-slate-200">
<li><strong class="text-slate-700">Inocuidad de los alimentos:</strong> La garantía de que los alimentos no causarán daño al consumidor.</li>
<li><strong class="text-slate-700">Buenas prácticas de manufactura (BPM):</strong> Conjunto de condiciones para asegurar la calidad sanitaria e inocuidad de los alimentos.</li>
<li><strong class="text-slate-700">Contaminación cruzada:</strong> Proceso por el cual los microorganismos son trasladados de una zona sucia a una limpia.</li>
<li><strong class="text-slate-700">Limpieza vs. Desinfección:</strong> La limpieza elimina la suciedad visible, mientras que la desinfección reduce los microorganismos a un nivel seguro.</li>
<li><strong class="text-slate-700">PEPS:</strong> "Primero que Entra, Primero que Sale", sistema de rotación de productos para asegurar su frescura.</li>
</ul>
</div>
</div>
</div>
</section>
<section id="comite-bpm" class="mb-24">
<h2 class="section-title">Comité de Buenas Prácticas de Almacenamiento</h2>
<p class="mb-8 max-w-3xl text-slate-600">Responsable de garantizar el cumplimiento de las disposiciones sanitarias contenidas en el Manual.</p>
<div class="card p-8">
<h3 class="text-3xl font-bold text-center text-slate-800 mb-8">Organigrama del <span class="gradient-text">Equipo BPM</span></h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-4 bg-cyan-50/50 rounded-lg border border-cyan-200/80">
<h4 class="font-bold text-cyan-700">Gerente General</h4>
<p class="text-sm text-slate-700">Yony Richard LIZARRAGA QUISPE</p>
<p class="mt-2 text-xs text-slate-500">Preside el equipo, provee recursos y asegura la vigencia del programa.</p>
</div>
<div class="p-4 bg-cyan-50/50 rounded-lg border border-cyan-200/80">
<h4 class="font-bold text-cyan-700">Jefe de Control de Calidad</h4>
<p class="text-sm text-slate-700">Roger Edson PINO SILVA</p>
<p class="mt-2 text-xs text-slate-500">Responsable directo de la calidad, aplicación de procedimientos y supervisión.</p>
</div>
<div class="p-4 bg-cyan-50/50 rounded-lg border border-cyan-200/80">
<h4 class="font-bold text-cyan-700">Asistente de Saneamiento</h4>
<p class="text-sm text-slate-700">Wenceslao LIZARRAGA QUISPE</p>
</div>
<div class="p-4 bg-cyan-50/50 rounded-lg border border-cyan-200/80">
<h4 class="font-bold text-cyan-700">Responsable de Limpieza</h4>
<p class="text-sm text-slate-700">Nelly VIAMONTE PERALTA</p>
</div>
<div class="p-4 bg-cyan-50/50 rounded-lg border border-cyan-200/80">
<h4 class="font-bold text-cyan-700">Responsable de Mantenimiento</h4>
<p class="text-sm text-slate-700">Yonathan Fidel MAMANI QUISPE</p>
</div>
</div>
</div>
</section>
<section id="instalaciones" class="mb-24">
<h2 class="section-title">II. Instalaciones y Equipos</h2>
<div class="space-y-8">
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-3 text-cyan-600">Ubicación de la Planta</h3>
<p>Nuestra planta de producción se encuentra en Jr. Manuel Acosta Nº 225, Urbanización 3 de Octubre, Juliaca. Las instalaciones están diseñadas para que todas las operaciones se realicen en condiciones higiénicas, sin generar riesgos de contaminación cruzada.</p>
</div>
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-3 text-cyan-600">Plano de la Planta</h3>
<p>El diseño de la planta asegura un flujo lógico de producción, separando adecuadamente las áreas para evitar contaminación.</p>
</div>
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-3 text-cyan-600">Estructura y Servicios</h3>
<ul class="space-y-3 list-disc list-inside text-slate-600">
<li><strong class="text-slate-700">Paredes y Pisos:</strong> Materiales lisos, no absorbentes, lavables y de fácil desinfección.</li>
<li><strong class="text-slate-700">Iluminación y Ventilación:</strong> Adecuadas para el tipo de trabajo, con protecciones en luminarias.</li>
<li><strong class="text-slate-700">Abastecimiento de Agua:</strong> Procedente de la red pública, almacenada en tanques desinfectados periódicamente.</li>
<li><strong class="text-slate-700">Instalaciones Sanitarias:</strong> Vestuarios y servicios higiénicos diferenciados, equipados y en buen estado de conservación.</li>
<li><strong class="text-slate-700">Seguridad:</strong> Contamos con botiquín de primeros auxilios y extintores contra incendios vigentes y señalizados.</li>
</ul>
</div>
</div>
</section>
<section id="procesos" class="mb-24">
<h2 class="section-title">Proceso de Producción de Agua de Mesa</h2>
<div class="relative">
<div class="hidden md:block border-l-2 border-dashed border-cyan-200 absolute h-full top-0 left-1/2 -translate-x-1/2"></div>
<div class="space-y-16">
<div class="md:grid md:grid-cols-2 md:gap-12 items-center">
<div class="flex justify-center md:justify-end md:pr-12">
<div class="bg-gradient-to-br from-cyan-400 to-blue-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-4xl font-bold shadow-lg shadow-cyan-500/30 mb-4 md:mb-0">1</div>
</div>
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-2 text-cyan-600">Recepción de Materia Prima</h3>
<p>Recepción y almacenaje del "agua dura" proveniente de la red pública en un tanque de 1200 litros, ubicado fuera de la planta para evitar contaminación.</p>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-12 items-center">
<div class="md:order-2 flex justify-center md:justify-start md:pl-12">
<div class="bg-gradient-to-br from-cyan-400 to-blue-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-4xl font-bold shadow-lg shadow-cyan-500/30 mb-4 md:mb-0">2</div>
</div>
<div class="card p-6 hover-effect md:order-1 md:text-right">
<h3 class="text-xl font-semibold mb-2 text-cyan-600">Área de Purificación (Ósmosis Inversa)</h3>
<p>Sistema automático de cinco etapas de filtración que elimina sedimentos, cloro, olores, bacterias y virus, garantizando agua pura, rica en oxígeno y de excelente sabor.</p>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-12 items-center">
<div class="flex justify-center md:justify-end md:pr-12">
<div class="bg-gradient-to-br from-cyan-400 to-blue-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-4xl font-bold shadow-lg shadow-cyan-500/30 mb-4 md:mb-0">3</div>
</div>
<div class="card p-6 hover-effect">
<h3 class="text-xl font-semibold mb-2 text-cyan-600">Área de Llenado</h3>
<p>Incluye el enjuagado, llenado mecánico, taponado y etiquetado de envases, asegurando la integridad y presentación del producto final.</p>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-12 items-center">
<div class="md:order-2 flex justify-center md:justify-start md:pl-12">
<div class="bg-gradient-to-br from-cyan-400 to-blue-500 text-white w-20 h-20 rounded-full flex items-center justify-center text-4xl font-bold shadow-lg shadow-cyan-500/30 mb-4 md:mb-0">4</div>
</div>
<div class="card p-6 hover-effect md:order-1 md:text-right">
<h3 class="text-xl font-semibold mb-2 text-cyan-600">Almacenamiento</h3>
<p>Los insumos (tapones, etiquetas, botellas) y el producto terminado se almacenan en áreas designadas, limpias y ordenadas, listos para su comercialización.</p>
</div>
</div>
</div>
</div>
</section>
<section id="procedimientos" class="mb-24">
<h2 class="section-title">Procedimientos Operativos Estándar</h2>
<div class="space-y-4">
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>III. Formación del Personal</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6 text-slate-600">
<div class="pt-4 border-t border-slate-200">
<p><strong class="text-slate-700">Objetivo:</strong> Capacitar y entrenar continuamente al personal en temas de Inocuidad Alimentaria (BPM, PHS, ETA's) para fortalecer sus conocimientos y habilidades.</p>
<p class="mt-2"><strong class="text-slate-700">Frecuencia:</strong> Trimestral y/o cada vez que ingrese nuevo personal. Todo el personal recibe una capacitación inicial y se realizan evaluaciones para asegurar la comprensión.</p>
</div>
</div>
</div>
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>IV. Evaluación y Selección de Proveedores</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6 text-slate-600">
<div class="pt-4 border-t border-slate-200">
<p><strong class="text-slate-700">Objetivo:</strong> Garantizar que los productos e insumos se obtengan de proveedores de confianza que cumplan con nuestras especificaciones técnicas y sanitarias.</p>
<p class="mt-2"><strong class="text-slate-700">Procedimiento:</strong> Se solicita documentación legal y sanitaria (RUC, HACCP, registros sanitarios) y se evalúa a cada proveedor según criterios de calidad, tiempo de entrega y precio. Los proveedores aprobados son monitoreados periódicamente.</p>
</div>
</div>
</div>
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>V. Recepción y Almacenamiento de Productos</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6 text-slate-600">
<div class="pt-4 border-t border-slate-200">
<p><strong class="text-slate-700">Objetivo:</strong> Asegurar la correcta recepción y almacenamiento de productos para mantener su calidad e inocuidad.</p>
<ul class="mt-2 list-disc list-inside space-y-2">
<li><strong class="text-slate-700">Recepción:</strong> Se verifica la limpieza del vehículo de transporte, la documentación, la cantidad y la integridad de los productos. No se aceptan productos dañados o sobre el suelo.</li>
<li><strong class="text-slate-700">Almacenamiento (Estiba):</strong> Los productos se apilan en parihuelas, respetando espacios libres (piso: 0.20m, techo: 0.60m, pared: 0.50m) para permitir la circulación de aire y la limpieza.</li>
<li><strong class="text-slate-700">Rotación:</strong> Se aplica el sistema PVPS ("primero en vencer, primero en salir") o PEPS.</li>
<li><strong class="text-slate-700">Control:</strong> Se monitorea y registra diariamente la temperatura y humedad del almacén.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>VI. Liberación de Productos</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6 text-slate-600">
<div class="pt-4 border-t border-slate-200">
<p><strong class="text-slate-700">Objetivo:</strong> Garantizar la calidad de los productos durante toda su vida útil, asegurando que no produzcan daño al consumidor.</p>
<p class="mt-2"><strong class="text-slate-700">Procedimiento:</strong> El Jefe de Control de Calidad verifica la documentación y realiza un muestreo final antes de la distribución. Se registra la liberación de cada lote. Si un producto no cumple, se trata como "Producto No Conforme".</p>
</div>
</div>
</div>
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>VII. Producto No Conforme</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6 text-slate-600">
<div class="pt-4 border-t border-slate-200">
<p><strong class="text-slate-700">Objetivo:</strong> Identificar y controlar productos que no cumplen con los estándares para prevenir su uso o entrega no intencional.</p>
<p class="mt-2"><strong class="text-slate-700">Procedimiento:</strong> Cualquier producto no conforme detectado en llenado, almacén o distribución es reportado y registrado. El producto se separa en un área de "Cuarentena" para determinar si será devuelto o desechado.</p>
</div>
</div>
</div>
<div class="accordion-item card">
<button class="accordion-header w-full text-left p-6 font-semibold text-lg text-slate-800 flex justify-between items-center">
<span>VIII. Atención de Quejas de Usuarios</span>
<svg class="w-5 h-5 transform transition-transform text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="accordion-content px-6 pb-6 text-slate-600">
<div class="pt-4 border-t border-slate-200">
<p><strong class="text-slate-700">Objetivo:</strong> Establecer un canal formal para que los consumidores presenten quejas, reclamos y sugerencias.</p>
<p class="mt-2"><strong class="text-slate-700">Procedimiento:</strong> Toda queja se documenta en el registro correspondiente. El Jefe de Control de Calidad investiga la causa, verifica el producto sospechoso y determina las acciones correctivas. El objetivo es dar una solución efectiva y aprender de cada caso.</p>
</div>
</div>
</div>
</div>
</section>
<section id="registros" class="mb-16">
<h2 class="section-title">Listado de Registros</h2>
<p class="mb-8 max-w-3xl text-slate-600">La documentación es clave para el control y la mejora continua. A continuación se listan todos los formatos utilizados en nuestro sistema BPM.</p>
<div class="card p-8">
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-01: Condiciones de las instalaciones.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-02: Formación del personal.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-03: Proveedores seleccionados.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-04: Evaluación de proveedor.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-05: Control de productos al ingreso.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-06: Kardex del Almacén.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-07: Control de temperatura y humedad.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-08: Liberación de productos.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-09: Reporte de producto no conforme.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-10: Registro de productos no conformes.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-11: Quejas de usuarios.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-12: Mantenimiento de equipos.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-13: Control de visitantes.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-14: Autoinspección del manual BPM.</li>
<li class="p-4 bg-slate-100/80 rounded-md border border-slate-200">F-BPM-15: Ensayo de trazabilidad.</li>
</ul>
</div>
</section>
</main>
<footer class="bg-white/50 border-t border-slate-200">
<div class="container mx-auto px-6 py-6 text-center text-slate-500">
<p>© 2024 BONI SERVICIOS S.A.C. | Todos los derechos reservados.</p>
</div>
</footer>
<script>
// Lógica para el menú móvil
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Lógica para los acordeones
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
const icon = header.querySelector('svg');
const isOpening = content.style.display !== 'block';
// Cerrar todos los demás
document.querySelectorAll('.accordion-content').forEach(item => {
if (item !== content) {
item.style.maxHeight = null;
// Pequeño delay para que la transición de altura termine antes de ocultar
setTimeout(() => {
item.style.display = 'none';
}, 500);
item.previousElementSibling.querySelector('svg').classList.remove('rotate-180');
}
});
// Abrir o cerrar el actual
if (isOpening) {
content.style.display = 'block';
content.style.maxHeight = content.scrollHeight + "px";
icon.classList.add('rotate-180');
} else {
content.style.maxHeight = null;
setTimeout(() => {
content.style.display = 'none';
}, 500);
icon.classList.remove('rotate-180');
}
});
});
</script>
</body>
</html>