Inteligencia Artificial

/* 1. FUENTE ROBOTO */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); /* 2. ESTRUCTURA DEL ACORDEÓN */ .osoji-acordeon { list-style: none; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; border-top: 1px solid #f1f1f1; } .mundo-item { border-bottom: 1px solid #f1f1f1; } /* Control de despliegue mediante checkbox oculto */ .acordeon-input { display: none; } /* 3. FILAS PRINCIPALES (MUNDOS) */ .acordeon-label { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; background-color: #ffffff; color: #111111; font-weight: 400; font-size: 15px; transition: all 0.25s ease; } .acordeon-label:hover { background-color: #fafafa; color: #CC3333; } .acordeon-label > a { color: inherit; text-decoration: none; flex-grow: 1; font-weight: inherit; padding-right: 15px; } /* ESTILO EXCLUSIVO PARA EL ENLACE DIRECTO A LA TIENDA */ .tienda-link .acordeon-label { font-weight: 500; } .tienda-link .acordeon-label > a { color: #CC3333; } .tienda-link .acordeon-label:hover { background-color: #FFF5F5; } /* 4. INDICADOR DE EXPANSIÓN (+/-) */ .toggle-icon { font-size: 1.2em; font-weight: 400; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #CC3333; } .acordeon-input:checked + .acordeon-label .toggle-icon::before { content: "–"; } .acordeon-input:not(:checked) + .acordeon-label .toggle-icon::before { content: "+"; } /* 5. CONTENIDO DESPLEGABLE (SUBPRODUCTOS) */ .productos-content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: #fcfcfc; } .acordeon-input:checked ~ .productos-content { max-height: 600px; /* Margen seguro para que despliegue por completo */ } .productos-content ul { list-style: none; padding: 4px 0; margin: 0; } .productos-content ul li { padding: 0; } /* UX: El enlace ocupa todo el ancho y alto de la celda para facilitar el click táctil */ .productos-content ul li a { text-decoration: none; color: #555555; font-size: 14px; font-weight: 400; display: block; padding: 12px 15px 12px 35px; transition: all 0.2s ease; } .productos-content ul li a:hover { background-color: #f5f5f5; color: #CC3333; }