/* ========================================================================== Reset global. El original usaba el "preflight" de Tailwind, que normaliza margenes, tamanos de titulo y estilos de formulario. Aqui se reproduce esa base para que el Landing se vea igual sin Tailwind. Los estilos de la pagina viven en src/publico/Landing.css ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid #2a2a2a; } html { -webkit-text-size-adjust: 100%; line-height: 1.5; } body { font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: inherit; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* En el original el contenedor en columna era ; en React ese papel lo cumple #root, que es quien envuelve la barra, el main y el pie. */ #root { min-height: 100vh; display: flex; flex-direction: column; } /* Los titulos toman su tamano de las clases de cada seccion */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button { background-color: transparent; background-image: none; cursor: pointer; } button, [role="button"] { cursor: pointer; } button:disabled { cursor: default; } img, svg, video, canvas { display: block; vertical-align: middle; max-width: 100%; height: auto; } /* Foco visible para navegacion con teclado */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #ff5100; outline-offset: 2px; } /* ========================================================================== Paginas de acceso (Login y Registro). Mismos colores y tipografia que el Landing. ========================================================================== */ .auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background-color: #050505; position: relative; overflow: hidden; } /* Resplandor naranja de fondo */ .auth::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: #ff5100; filter: blur(140px); opacity: 0.16; top: -180px; left: 50%; transform: translateX(-50%); pointer-events: none; } .auth__caja { position: relative; z-index: 1; width: 100%; max-width: 26rem; background-color: #111111; border: 1px solid #2a2a2a; border-radius: 1rem; padding: 1.75rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); animation: authEntrada 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes authEntrada { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .auth__volver { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; color: #6b7280; margin-bottom: 1.25rem; transition: color 0.15s ease; } .auth__volver:hover { color: #ffffff; } .auth__cabecera { text-align: center; margin-bottom: 1.5rem; } .auth__logo { display: inline-block; font-size: 15px; letter-spacing: 0.06em; margin-bottom: 1rem; } .auth__titulo { font-size: 1.375rem; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 0.375rem; } .auth__subtitulo { font-size: 0.75rem; color: #6b7280; line-height: 1.6; } .auth__formulario { display: flex; flex-direction: column; gap: 1rem; } .auth__campo { display: flex; flex-direction: column; gap: 0.375rem; } .auth__etiqueta { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; } .auth__input-grupo { position: relative; } .auth__input { width: 100%; background-color: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 0.75rem 0.875rem; font-size: 0.875rem; color: #ffffff; font-family: inherit; transition: border-color 0.15s ease, background-color 0.15s ease; } .auth__input::placeholder { color: #4b5563; } .auth__input:focus { outline: none; border-color: rgba(255, 81, 0, 0.6); background-color: #0d0d0d; } .auth__input-grupo .auth__input { padding-right: 2.75rem; } .auth__ojo { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 0.875rem; transition: color 0.15s ease; } .auth__ojo:hover { color: #ffffff; } .auth__error, .auth__aviso { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; line-height: 1.5; border-radius: 0.75rem; padding: 0.625rem 0.75rem; } .auth__error { color: #fca5a5; background-color: rgba(220, 38, 38, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); } .auth__aviso { color: #6ee7b7; background-color: rgba(16, 185, 129, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); } .auth__boton { width: 100%; padding: 0.8125rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; color: #ffffff; background: linear-gradient(90deg, #ff5100, #ff7a00); box-shadow: 0 4px 20px rgba(255, 81, 0, 0.25); transition: all 0.25s ease; margin-top: 0.25rem; } .auth__boton:hover:not(:disabled) { background: linear-gradient(90deg, #ff6a00, #ff9500); box-shadow: 0 6px 28px rgba(255, 81, 0, 0.45); transform: translateY(-1px); } .auth__boton:disabled { opacity: 0.6; cursor: default; } .auth__enlace-suave { font-size: 0.75rem; color: #6b7280; transition: color 0.15s ease; } .auth__enlace-suave:hover { color: #ff8c00; } .auth__pie { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; font-size: 0.75rem; color: #6b7280; } .auth__enlace { font-size: 0.75rem; font-weight: 700; color: #ff8c00; transition: color 0.15s ease; } .auth__enlace:hover { color: #ffb347; } /* ========================================================================== Pantalla de carga mientras Firebase resuelve la sesion ========================================================================== */ .cargando { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background-color: #050505; } .cargando__rueda { width: 2.5rem; height: 2.5rem; border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: #ff5100; border-radius: 50%; animation: girar 0.8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .cargando__texto { font-size: 0.75rem; color: #6b7280; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================== Area privada: Mi cuenta ========================================================================== */ .cuenta { min-height: 100vh; padding: 2rem 1rem; background-color: #050505; display: flex; align-items: center; justify-content: center; } .cuenta__caja { width: 100%; max-width: 34rem; background-color: #111111; border: 1px solid #2a2a2a; border-radius: 1rem; padding: 1.75rem; animation: authEntrada 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .cuenta__cabecera { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 1.25rem; } .cuenta__avatar { width: 3.25rem; height: 3.25rem; border-radius: 0.875rem; background-image: linear-gradient(to bottom right, #ff5100, #e62e00); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #ffffff; flex-shrink: 0; box-shadow: 0 8px 20px rgba(255, 81, 0, 0.25); } .cuenta__nombre { font-size: 1.0625rem; font-weight: 700; color: #ffffff; } .cuenta__correo { font-size: 0.75rem; color: #6b7280; margin-top: 0.125rem; word-break: break-all; } .cuenta__datos { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .cuenta__dato { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background-color: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.75rem; padding: 0.75rem 0.875rem; } .cuenta__dato-etiqueta { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; } .cuenta__dato-valor { font-size: 0.75rem; color: #d1d5db; text-align: right; word-break: break-all; } .cuenta__verificado { color: #34d399; font-weight: 600; } .cuenta__pendiente { color: #fbbf24; font-weight: 600; } .cuenta__acciones { display: flex; flex-direction: column; gap: 0.5rem; } .cuenta__boton-tienda { width: 100%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 700; color: #ffffff; background: linear-gradient(90deg, #ff5100, #ff7a00); transition: all 0.25s ease; } .cuenta__boton-tienda:hover { background: linear-gradient(90deg, #ff6a00, #ff9500); } .cuenta__boton-salir { width: 100%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #9ca3af; background-color: #1a1a1a; border: 1px solid #333333; transition: all 0.15s ease; } .cuenta__boton-salir:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.4); } /* ========================================================================== Panel de administracion ========================================================================== */ .aviso__candado { width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: 9999px; background-color: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); display: flex; align-items: center; justify-content: center; color: #fbbf24; font-size: 1.125rem; } .panel { min-height: 100vh; background-color: #050505; padding: 2rem 1rem; } .panel__caja { width: 100%; max-width: 52rem; margin: 0 auto; } .panel__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 1.25rem; } .panel__titulo { font-size: 1.125rem; font-weight: 800; color: #ffffff; display: flex; align-items: center; gap: 0.625rem; } .panel__titulo i { color: #fbbf24; font-size: 0.9375rem; } .panel__subtitulo { font-size: 0.75rem; color: #6b7280; margin-top: 0.375rem; word-break: break-all; } .panel__salir { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: #9ca3af; background-color: #1a1a1a; border: 1px solid #333333; border-radius: 9999px; padding: 0.5rem 0.875rem; white-space: nowrap; transition: all 0.15s ease; } .panel__salir:hover { color: #ffffff; border-color: #6b7280; } .panel__cabecera-acciones { display: flex; gap: 0.5rem; flex-shrink: 0; } .panel__salir--rojo:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.4); } /* Selector de seccion */ .panel__secciones { display: flex; gap: 0.375rem; margin-bottom: 1.25rem; background-color: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 0.875rem; padding: 0.3125rem; overflow-x: auto; } .panel__seccion { flex: 1 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: 0.625rem; font-size: 0.75rem; font-weight: 700; color: #6b7280; white-space: nowrap; transition: all 0.2s ease; } .panel__seccion:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.04); } .panel__seccion--activa { background: linear-gradient(90deg, #ff5100, #ff7a00); color: #ffffff; } .panel__seccion--activa:hover { color: #ffffff; } /* Barra de busqueda / alta */ .panel__barra { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } .panel__buscador { flex: 1 1; min-width: 0; background-color: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; color: #ffffff; font-family: inherit; transition: border-color 0.15s ease; } .panel__buscador::placeholder { color: #4b5563; } .panel__buscador:focus { outline: none; border-color: rgba(255, 81, 0, 0.6); } .panel__conteo { font-size: 0.75rem; color: #6b7280; white-space: nowrap; } .panel__nota { font-size: 0.75rem; color: #9ca3af; line-height: 1.7; background-color: rgba(255, 81, 0, 0.06); border: 1px solid rgba(255, 81, 0, 0.2); border-radius: 0.75rem; padding: 0.75rem 0.875rem; margin-bottom: 1rem; } /* Etiquetas de rol */ .panel__etiqueta { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1875rem 0.4375rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.07); color: #9ca3af; } .panel__etiqueta--admin { background-color: rgba(251, 191, 36, 0.15); color: #fbbf24; } .panel__etiqueta--yo { background-color: rgba(56, 189, 248, 0.15); color: #38bdf8; } .panel__fila-uid { font-size: 9px; color: #374151; margin-top: 0.25rem; word-break: break-all; } /* Botones de orden de categorias */ .panel__orden { display: flex; flex-direction: column; gap: 0.1875rem; } .panel__boton-orden { width: 1.75rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.375rem; background-color: #1a1a1a; border: 1px solid #333333; color: #9ca3af; font-size: 0.625rem; transition: all 0.15s ease; } .panel__boton-orden:hover:not(:disabled) { color: #ffffff; border-color: #6b7280; } .panel__boton-orden:disabled { opacity: 0.35; cursor: default; } .panel__boton--eliminar { background-color: transparent; border: 1px solid rgba(248, 113, 113, 0.3); color: #fca5a5; } .panel__boton--eliminar:hover:not(:disabled) { background-color: rgba(220, 38, 38, 0.15); border-color: rgba(248, 113, 113, 0.6); } .formulario__opcional { color: #4b5563; font-weight: 400; } .panel__pestanas { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .panel__pestana { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: #9ca3af; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.2s ease; } .panel__pestana:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } .panel__pestana--activa { background-color: #ffffff; color: #000000; border-color: transparent; } .panel__contador { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 9999px; background-color: #dc2626; color: #ffffff; font-size: 10px; font-weight: 800; } .panel__aviso, .panel__error { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; line-height: 1.5; border-radius: 0.75rem; padding: 0.625rem 0.875rem; margin-bottom: 1rem; } .panel__aviso { color: #6ee7b7; background-color: rgba(16, 185, 129, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); } .panel__error { color: #fca5a5; background-color: rgba(220, 38, 38, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); } .panel__lista { display: flex; flex-direction: column; gap: 0.75rem; } .panel__vacio { text-align: center; color: #6b7280; font-size: 0.875rem; padding: 3rem 0; } /* ========================================================================== CATALOGO DEL PANEL (categorias y productos) Copia de loadAdminCatalog() de PAGINA WEB.html ========================================================================== */ .admin-catalogo__etiqueta-filtro { display: block; font-size: 11px; color: #9ca3af; font-weight: 600; } .admin-catalogo__filtro { width: 100%; margin: 0.25rem 0 0.75rem; background-color: #050505; border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: #ffffff; letter-spacing: 0.025em; font-family: Montserrat, sans-serif; } .admin-catalogo__filtro:focus { outline: none; border-color: #34d399; } /* Boton plegable que abre el formulario de alta */ .admin-catalogo__toggle { width: 100%; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid rgba(16, 185, 129, 0.25); background-color: rgba(16, 185, 129, 0.05); font-size: 0.875rem; font-weight: 700; color: #34d399; transition: border-color 0.15s ease, background-color 0.15s ease; } .admin-catalogo__toggle:hover { border-color: rgba(16, 185, 129, 0.5); } .admin-catalogo__toggle--abierto { border-color: rgba(16, 185, 129, 0.4); background-color: rgba(16, 185, 129, 0.1); } .admin-catalogo__toggle i { font-size: 0.75rem; color: rgba(52, 211, 153, 0.8); } .admin-catalogo__formulario { margin-bottom: 1.25rem; padding: 1rem; border-radius: 0.75rem; border: 1px solid rgba(16, 185, 129, 0.3); background-color: rgba(16, 185, 129, 0.05); } .admin-catalogo__nota { font-size: 10px; color: #6b7280; margin-bottom: 0.75rem; } .admin-catalogo__label { display: block; font-size: 10px; color: #6b7280; } .admin-catalogo__input { width: 100%; margin: 0.25rem 0 0.5rem; background-color: #050505; border: 1px solid #2a2a2a; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #ffffff; font-family: inherit; transition: border-color 0.15s ease; } .admin-catalogo__input::placeholder { color: #4b5563; } .admin-catalogo__input:focus { outline: none; border-color: rgba(16, 185, 129, 0.6); } .admin-catalogo__input--chico { font-size: 0.75rem; padding: 0.375rem 0.5rem; margin-top: 0.125rem; } .admin-catalogo__input--precio { color: #34d399; } .admin-catalogo__area { resize: vertical; line-height: 1.5; } .admin-catalogo__previa { display: block; margin-bottom: 0.5rem; width: 100%; max-height: 7rem; object-fit: contain; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.4); } .admin-catalogo__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.5rem; gap: 0.5rem; } .admin-catalogo__rejilla--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-catalogo__input--tachado { color: #9ca3af; } .admin-catalogo__input--mayorista { color: #fcd34d; } /* Titulo de grupo dentro del formulario */ .admin-catalogo__grupo { font-size: 10px; font-weight: 700; color: rgba(56, 189, 248, 0.9); margin: 0.75rem 0 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; } .admin-catalogo__ayuda { font-size: 10px; color: #4b5563; margin-bottom: 0.5rem; line-height: 1.5; } .admin-catalogo__check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; -webkit-user-select: none; user-select: none; font-size: 11px; font-weight: 600; color: #38bdf8; } .admin-catalogo__check input { accent-color: #10b981; width: 0.875rem; height: 0.875rem; } /* Bloque de paquetes / iconos */ .admin-catalogo__bloque { margin: 0.75rem 0; padding: 0.625rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.5rem; background-color: rgba(255, 255, 255, 0.02); } .admin-catalogo__fila-repetible { display: grid; grid-template-columns: 1fr 4.5rem 1fr auto; grid-gap: 0.375rem; gap: 0.375rem; align-items: start; } .admin-catalogo__fila-repetible--icono { grid-template-columns: 1fr 2rem auto; align-items: center; } .admin-catalogo__fila-repetible--beneficio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } /* Vista previa del degradado y el icono elegidos */ .admin-catalogo__muestra { height: 3.5rem; border-radius: 0.5rem; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; } .admin-catalogo__muestra i { font-size: 1.5rem; opacity: 0.9; } /* Las etiquetas de codigo dentro de los textos de ayuda */ .admin-catalogo__ayuda code { background-color: rgba(255, 255, 255, 0.06); border-radius: 0.25rem; padding: 0 0.25rem; color: #9ca3af; font-size: 10px; } @media (max-width: 520px) { .admin-catalogo__fila-repetible--beneficio { grid-template-columns: minmax(0, 1fr) auto; } .admin-catalogo__fila-repetible--beneficio input:nth-child(2) { grid-column: 1 / -1; } } .admin-catalogo__quitar { width: 1.75rem; height: 1.75rem; margin-top: 0.25rem; border-radius: 0.375rem; background-color: rgba(220, 38, 38, 0.15); border: 1px solid rgba(248, 113, 113, 0.3); color: #fca5a5; font-size: 0.625rem; flex-shrink: 0; transition: background-color 0.15s ease, color 0.15s ease; } .admin-catalogo__quitar:hover { background-color: rgba(220, 38, 38, 0.35); color: #ffffff; } .admin-catalogo__anadir { font-size: 11px; font-weight: 600; color: #34d399; margin-top: 0.25rem; transition: color 0.15s ease; } .admin-catalogo__anadir:hover { color: #6ee7b7; } /* -------------------------------------------------------------------------- Campo de imagen: subir archivo o pegar URL -------------------------------------------------------------------------- */ .campo-imagen { margin-bottom: 0.5rem; } .campo-imagen__fila { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } .campo-imagen__boton { flex-shrink: 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px dashed rgba(16, 185, 129, 0.45); background-color: rgba(16, 185, 129, 0.08); color: #34d399; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, background-color 0.15s ease; } .campo-imagen__boton:hover { border-color: rgba(16, 185, 129, 0.8); background-color: rgba(16, 185, 129, 0.16); } .campo-imagen__boton--ocupado { opacity: 0.6; pointer-events: none; } .campo-imagen__archivo { display: none; } .campo-imagen__o { flex-shrink: 0; font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; } /* El input de URL ocupa el resto de la fila; el margen vertical del input base sobra aqui porque la fila ya lo aporta */ .campo-imagen__url { flex: 1 1; min-width: 0; margin: 0; } /* En pantallas estrechas la fila se apila para que la URL no quede diminuta */ @media (max-width: 520px) { .campo-imagen__fila { flex-wrap: wrap; } .campo-imagen__url { flex-basis: 100%; } } .admin-catalogo__fallo { font-size: 10px; color: #fca5a5; margin-top: 0.25rem; line-height: 1.5; } .admin-catalogo__icono-previa { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.4); } .admin-catalogo__icono-previa--emoji { display: flex; align-items: center; justify-content: center; font-size: 1.125rem; line-height: 1; } .admin-catalogo__insignia--vip { background-color: rgba(56, 189, 248, 0.15); color: #38bdf8; } .admin-catalogo__publicar { width: 100%; margin-top: 0.5rem; background-color: #059669; color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 0.625rem; border-radius: 0.75rem; transition: background-color 0.15s ease; } .admin-catalogo__publicar:hover:not(:disabled) { background-color: #10b981; } .admin-catalogo__publicar:disabled { opacity: 0.6; cursor: default; } .admin-catalogo__titulo { font-size: 0.75rem; font-weight: 700; color: #9ca3af; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .admin-catalogo__pista { font-size: 10px; color: #6b7280; margin-bottom: 0.75rem; } .admin-catalogo__vacio { color: #6b7280; font-size: 0.75rem; text-align: center; padding: 1rem 0; line-height: 1.6; } /* Ficha en acordeon */ .admin-catalogo__ficha { background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; margin-bottom: 0.5rem; overflow: hidden; transition: border-color 0.15s ease, opacity 0.15s ease; } .admin-catalogo__ficha--abierta { border-color: rgba(255, 81, 0, 0.4); } .admin-catalogo__ficha--ocupada { opacity: 0.5; pointer-events: none; } .admin-catalogo__cabecera { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; text-align: left; transition: background-color 0.15s ease; } .admin-catalogo__cabecera:hover { background-color: rgba(255, 255, 255, 0.03); } .admin-catalogo__miniatura { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .admin-catalogo__miniatura--vacia { background-color: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 0.875rem; } .admin-catalogo__miniatura--grande { width: 3.5rem; height: 3.5rem; } .admin-catalogo__ficha-datos { min-width: 0; flex: 1 1; } .admin-catalogo__ficha-nombre { font-size: 0.875rem; font-weight: 600; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-catalogo__insignia { margin-left: 0.375rem; font-size: 9px; padding: 0.125rem 0.375rem; border-radius: 9999px; background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; font-weight: 600; text-transform: uppercase; } .admin-catalogo__ficha-sub { font-size: 10px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.125rem; } .admin-catalogo__chevron { color: #6b7280; font-size: 0.75rem; flex-shrink: 0; } .admin-catalogo__edicion { padding: 0.75rem 0.75rem 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.05); } .admin-catalogo__edicion-cabecera { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .admin-catalogo__edicion-nombre { min-width: 0; flex: 1 1; } .admin-catalogo__reordenar { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; } .admin-catalogo__boton-orden { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; background-color: #1a1a1a; border: 1px solid #333333; color: #9ca3af; font-size: 0.625rem; transition: color 0.15s ease, border-color 0.15s ease; } .admin-catalogo__boton-orden:hover:not(:disabled) { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } .admin-catalogo__boton-orden:disabled { opacity: 0.35; cursor: default; } .admin-catalogo__acciones { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .admin-catalogo__boton { font-size: 11px; font-weight: 700; padding: 0.5rem; border-radius: 0.5rem; color: #ffffff; transition: background-color 0.15s ease, color 0.15s ease; } .admin-catalogo__boton--guardar { flex: 1 1; background-color: #059669; } .admin-catalogo__boton--guardar:hover { background-color: #10b981; } .admin-catalogo__boton--estado { padding-left: 0.75rem; padding-right: 0.75rem; background-color: #222222; border: 1px solid #333333; color: #9ca3af; font-weight: 500; } .admin-catalogo__boton--estado:hover { color: #ffffff; } .admin-catalogo__boton--eliminar { padding-left: 0.75rem; padding-right: 0.75rem; background-color: rgba(220, 38, 38, 0.8); } .admin-catalogo__boton--eliminar:hover { background-color: #ef4444; } /* ========================================================================== TARJETA DE RESENA EN EL PANEL Copia de reviewAdminCard() y showAdminReviewList() de PAGINA WEB.html ========================================================================== */ .admin-resenas__resumen { font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.75rem; font-weight: 600; text-transform: uppercase; } .admin-resenas__categoria { font-size: 11px; font-weight: 700; color: #ff5100; margin: 0.75rem 0 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.25rem; } .admin-resenas__categoria span { color: #6b7280; font-weight: 400; } .admin-resena { background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 0.75rem; transition: opacity 0.15s ease; } .admin-resena--ocupada { opacity: 0.5; pointer-events: none; } .admin-resena__fila { display: flex; gap: 0.75rem; } .admin-resena__foto { width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .admin-resena__sin-foto { width: 3rem; height: 3rem; border-radius: 0.5rem; background-color: #222222; display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: 10px; flex-shrink: 0; } .admin-resena__datos { flex: 1 1; min-width: 0; } .admin-resena__nombre { font-size: 0.875rem; font-weight: 600; color: #ffffff; } .admin-resena__estrellas { color: #34d399; font-size: 0.75rem; } .admin-resena__categoria { font-size: 9px; color: #ff5100; margin-left: 0.25rem; } .admin-resena__producto { font-size: 10px; color: #6b7280; margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-resena__comentario { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .admin-resena__fecha { font-size: 10px; color: #4b5563; margin-top: 0.25rem; } .admin-resena__acciones { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .admin-resena__boton { flex: 1 1; font-size: 0.75rem; font-weight: 700; padding: 0.5rem; border-radius: 0.5rem; color: #ffffff; transition: background-color 0.15s ease, color 0.15s ease; } .admin-resena__boton:disabled { opacity: 0.6; cursor: default; } .admin-resena__boton--aprobar { background-color: #059669; } .admin-resena__boton--aprobar:hover:not(:disabled) { background-color: #10b981; } .admin-resena__boton--rechazar { background-color: rgba(220, 38, 38, 0.8); } .admin-resena__boton--rechazar:hover:not(:disabled) { background-color: #ef4444; } .admin-resena__boton--quitar { background-color: #222222; border: 1px solid #333333; color: #9ca3af; font-weight: 500; } .admin-resena__boton--quitar:hover:not(:disabled) { color: #ffffff; } .panel__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.875rem; padding: 1rem; transition: opacity 0.15s ease, border-color 0.15s ease; } .panel__fila:hover { border-color: rgba(255, 255, 255, 0.18); } .panel__fila--ocupada { opacity: 0.5; pointer-events: none; } .panel__fila-datos { min-width: 0; flex: 1 1; } .panel__fila-cabecera { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0.375rem; } .panel__fila-nombre { font-size: 0.875rem; font-weight: 700; color: #ffffff; } .panel__fila-estrellas { display: inline-flex; gap: 0.125rem; } .panel__fila-texto { font-size: 0.8125rem; color: #9ca3af; line-height: 1.6; margin-bottom: 0.375rem; overflow-wrap: anywhere; } .panel__fila-fecha { font-size: 10px; color: #4b5563; } .panel__fila-acciones { display: flex; flex-direction: column; gap: 0.375rem; flex-shrink: 0; } .panel__boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 0.625rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; transition: all 0.15s ease; } .panel__boton:disabled { opacity: 0.5; cursor: default; } .panel__boton--aprobar { background-color: #059669; color: #ffffff; } .panel__boton--aprobar:hover:not(:disabled) { background-color: #10b981; } .panel__boton--rechazar { background-color: #1a1a1a; border: 1px solid #333333; color: #9ca3af; } .panel__boton--rechazar:hover:not(:disabled) { color: #fca5a5; border-color: rgba(248, 113, 113, 0.4); } @media (max-width: 560px) { .panel__fila { flex-direction: column; } .panel__fila-acciones { flex-direction: row; width: 100%; } .panel__boton { flex: 1 1; } } /* ========================================================================== Boton de sesion dentro de la barra de navegacion ========================================================================== */ .navbar__sesion { display: flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2.25rem; padding: 0 0.75rem; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #fdba74; background-color: rgba(255, 81, 0, 0.1); border: 1px solid rgba(255, 140, 0, 0.3); white-space: nowrap; transition: all 0.15s ease; } .navbar__sesion:hover { color: #ffffff; border-color: rgba(255, 140, 0, 0.6); background-color: rgba(255, 81, 0, 0.18); } .navbar__sesion-texto { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .navbar__sesion-texto { display: none; } .navbar__sesion { padding: 0 0.625rem; } } /* ========================================================================== TRIHACK STORE - Landing Conversion a CSS puro del diseno de PAGINA WEB.html. El original usaba Tailwind por CDN; aqui cada clase de utilidad se tradujo a su equivalente exacto en CSS (mismos colores, tamanos, espaciados, sombras y puntos de corte responsive). Las fuentes y los iconos se cargan desde los mismos CDN que el original para que la tipografia y los simbolos sean identicos. Indice: 0. Importaciones (fuente e iconos) 1. Bloque \3c style> original, copiado tal cual 2. Animaciones de utilidad (pulse / ping / bounce) 3. Layout general 4. Navbar 5. Hero 6. Como comprar 7. Catalogo y tarjetas de producto 8. Degradados e iconos de producto 9. Resenas 10. Footer 11. Chatbot 12. Modales 13. Responsive ========================================================================== */ /* ========================================================================== 0. FUENTES E ICONOS ========================================================================== */ /* Montserrat y Font Awesome 6.0.0 se cargan con en public/index.html, desde los mismos CDN que usaba PAGINA WEB.html. Se hace alli y no con @import porque @import bloquea el renderizado y duplicaria la descarga. */ /* ========================================================================== 1. BLOQUE \3c style> ORIGINAL (PAGINA WEB.html, lineas 39-322) Copiado sin cambios. ========================================================================== */ body { background-color: #050505; color: #ffffff; overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .gradient-text { background: linear-gradient(90deg, #ff5100, #ff8c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn-gradient { background: linear-gradient(90deg, #ff5100, #ff7a00); transition: all 0.3s ease; } .btn-gradient:hover { background: linear-gradient(90deg, #ff6a00, #ff9500); box-shadow: 0 0 15px rgba(255, 81, 0, 0.5); } /* Hide number arrows */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .modal-overlay { background-color: rgba(0, 0, 0, 0.75); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Animacion y color verde para botones de carrito */ .btn-green-animated { background: linear-gradient(90deg, #10b981, #059669); box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); transition: all 0.3s ease; animation: pulse-green 2s infinite; } .btn-green-animated:hover { background: linear-gradient(90deg, #34d399, #10b981); box-shadow: 0 0 25px rgba(16, 185, 129, 0.7); transform: translateY(-2px); } @keyframes pulse-green { 0% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.8); transform: scale(1.02); } 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); transform: scale(1); } } /* Anti-captura suave en fotos de resenas */ .review-photo-protect { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; } .review-photo-wrap { position: relative; overflow: hidden; } .review-photo-wrap::after { content: '@trihack_store'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: clamp(16px, 5vw, 26px); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.18); text-shadow: 0 1px 2px rgba(0,0,0,0.35); pointer-events: none; -webkit-user-select: none; user-select: none; white-space: nowrap; z-index: 2; } .review-photo-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(28deg, transparent 40%, transparent 40%), linear-gradient(-28deg, transparent 40%, transparent 40%); } .review-photo-wrap .wm-corner { position: absolute; font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: clamp(11px, 3.2vw, 15px); color: rgba(255, 255, 255, 0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.35); pointer-events: none; -webkit-user-select: none; user-select: none; z-index: 3; white-space: nowrap; } .review-photo-wrap .wm-tl { top: 6px; left: 8px; transform: rotate(-28deg); transform-origin: left top; } .review-photo-wrap .wm-tr { top: 6px; right: 8px; transform: rotate(28deg); transform-origin: right top; } .review-photo-wrap .wm-bl { bottom: 6px; left: 8px; transform: rotate(28deg); transform-origin: left bottom; } .review-photo-wrap .wm-br { bottom: 6px; right: 8px; transform: rotate(-28deg); transform-origin: right bottom; } .hero-eyes-img { animation: heroGaze 8s ease-in-out infinite; transform-origin: 50% 48%; will-change: transform; } @keyframes heroGaze { 0%, 100% { transform: scale(1.08) translate(0, 0) rotate(0deg); } 12% { transform: scale(1.095) translate(0.8%, -0.35%) rotate(0.3deg); } 25% { transform: scale(1.11) translate(1.4%, -0.2%) rotate(-0.2deg); } 40% { transform: scale(1.09) translate(-0.9%, 0.45%) rotate(0.15deg); } 55% { transform: scale(1.115) translate(0.5%, 0.25%) rotate(-0.25deg); } 70% { transform: scale(1.1) translate(-1.1%, -0.3%) rotate(0.2deg); } 85% { transform: scale(1.105) translate(0.7%, 0.15%) rotate(-0.1deg); } } .hero-eyes-glow { background: radial-gradient(ellipse 26% 20% at 34% 47%, rgba(255, 40, 40, 0.35), transparent 72%), radial-gradient(ellipse 26% 20% at 63% 47%, rgba(170, 70, 255, 0.32), transparent 72%); animation: eyeGlow 2.4s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events: none; } @keyframes eyeGlow { 0% { opacity: 0.45; } 100% { opacity: 0.98; } } /* Parpadeo lento realista ~ cada 3s */ .hero-blink { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 34%, #050505 45%, #050505 54%, transparent 64%); opacity: 0; animation: blinkLids 3s ease-in-out infinite; pointer-events: none; } @keyframes blinkLids { 0%, 78%, 100% { opacity: 0; } 82% { opacity: 0.55; } 86% { opacity: 0.95; } 90% { opacity: 0.55; } 94% { opacity: 0; } } .hero-accent { background: linear-gradient(105deg, #ffffff 0%, #ff8c42 40%, #ff5100 70%, #ffb347 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: accentFlow 5s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(255, 100, 20, 0.35)); } @keyframes accentFlow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } .hero-title { animation: titleIn 1.1s ease-out both; text-shadow: 0 4px 30px rgba(0,0,0,0.6), 0 0 40px rgba(255,81,0,0.12); } @keyframes titleIn { from { opacity: 0; transform: translateY(18px); letter-spacing: 0.04em; } to { opacity: 1; transform: translateY(0); letter-spacing: -0.02em; } } .hero-badge { animation: badgeIn 0.9s ease-out 0.15s both; box-shadow: 0 0 20px rgba(255, 81, 0, 0.15); } @keyframes badgeIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-sub { animation: titleIn 1.1s ease-out 0.25s both; } .hero-stats { animation: titleIn 1.1s ease-out 0.4s both; } .hero-stats span { transition: color 0.3s ease; } .hero-stats > div:hover span:last-child { color: #fff; } .stat-live { animation: statFloat 3s ease-in-out infinite; } .stat-live:nth-child(2) { animation-delay: 0.4s; } .stat-live:nth-child(3) { animation-delay: 0.8s; } .stat-live:nth-child(4) { animation-delay: 1.2s; } @keyframes statFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .hero-bg { animation: heroBreathe 8s ease-in-out infinite; } @keyframes heroBreathe { 0%, 100% { filter: brightness(1) contrast(1.05) saturate(1.1); } 50% { filter: brightness(1.12) contrast(1.1) saturate(1.2); } } .brand-logo-text { background-image: linear-gradient(90deg, #ffffff 0%, #ffb347 18%, #ff5100 36%, #ff2d55 52%, #a855f7 70%, #38bdf8 86%, #ffffff 100%); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brandShine 4s linear infinite, brandFloat 3.2s ease-in-out infinite; letter-spacing: 0.06em; font-weight: 800; } @keyframes brandShine { 0% { background-position: 0% center; filter: drop-shadow(0 0 6px rgba(255,81,0,0.35)); } 50% { background-position: 50% center; filter: drop-shadow(0 0 14px rgba(168,85,247,0.45)); } 100% { background-position: 100% center; filter: drop-shadow(0 0 10px rgba(56,189,248,0.4)); } } .terms-title-text { display: inline-block; animation: termsTitlePulse 2.8s ease-in-out infinite; letter-spacing: 0.02em; } .terms-title-icon { animation: termsIconBob 2.8s ease-in-out infinite; } @keyframes termsTitlePulse { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0 transparent); } 50% { transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(16,185,129,0.55)); } } @keyframes termsIconBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-6deg); } } @keyframes brandFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } .grupo:hover .brand-logo-text { letter-spacing: 0.1em; filter: drop-shadow(0 0 16px rgba(255,81,0,0.55)); } .review-card-in { animation: reviewIn 0.45s ease-out both; } @keyframes reviewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 2. ANIMACIONES DE UTILIDAD Equivalentes a animate-pulse / animate-ping / animate-bounce de Tailwind. ========================================================================== */ @keyframes tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes tw-ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes tw-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .animar-pulso { animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .oculto { display: none !important; } /* ========================================================================== 3. LAYOUT GENERAL ========================================================================== */ .contenedor-max { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; width: 100%; } .principal { flex-grow: 1; padding-top: 6rem; padding-bottom: 3rem; } /* ========================================================================== 4. NAVBAR ========================================================================== */ .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; background-color: rgba(5, 5, 5, 0.95); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .navbar__fila { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; } .navbar__logo { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; } .navbar__logo-linea { line-height: 1; } .navbar__logo-texto { font-size: 15px; letter-spacing: 0.025em; } .navbar__derecha { display: flex; align-items: center; gap: 0.75rem; } .navbar__menu { display: none; align-items: center; gap: 1.25rem; font-size: 13px; font-weight: 500; letter-spacing: 0.025em; color: #9ca3af; } .navbar__enlace { color: inherit; transition: color 0.15s ease; } .navbar__enlace:hover { color: #ffffff; } .navbar__hamburguesa { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 1.125rem; transition: color 0.15s ease; } .navbar__hamburguesa:hover { color: #ffffff; } .navbar__iconos { display: flex; align-items: center; gap: 1rem; } .navbar__whatsapp { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; color: #22c55e; transition: color 0.15s ease; } .navbar__whatsapp:hover { color: #4ade80; } .navbar__whatsapp i { font-size: 22px; line-height: 1; } .navbar__carrito { position: relative; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; color: #34d399; transition: color 0.15s ease; } .navbar__carrito:hover { color: #6ee7b7; } .navbar__carrito i { font-size: 20px; line-height: 1; } .navbar__badge { position: absolute; top: -0.25rem; right: -0.25rem; background-color: #dc2626; color: #ffffff; font-size: 9px; font-weight: 700; min-width: 16px; height: 1rem; padding: 0 0.25rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; } .navbar__panel-movil { border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(5, 5, 5, 0.98); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .navbar__panel-interior { max-width: 80rem; margin: 0 auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 13px; font-weight: 500; letter-spacing: 0.025em; color: #d1d5db; } .navbar__enlace-movil { text-align: left; padding: 0.625rem 0.5rem; border-radius: 0.5rem; transition: background-color 0.15s ease, color 0.15s ease; } .navbar__enlace-movil:hover { background-color: rgba(255, 255, 255, 0.05); color: #ffffff; } /* ========================================================================== 5. HERO ========================================================================== */ .hero { position: relative; overflow: hidden; margin-left: -1rem; margin-right: -1rem; margin-bottom: 0.5rem; } /* Alias con el nombre de la estructura pedida; recorta el GIF ampliado */ .hero-section { position: relative; overflow: hidden; } /* --- Capa 1: parallax --- */ .hero__parallax { position: absolute; left: 0; right: 0; top: -15%; height: 130%; z-index: 0; will-change: transform; pointer-events: none; } /* --- Capa 2: GIF animado con zoom lento --- */ .hero-bg-gif { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; animation: slowZoom 20s ease-in-out infinite alternate; } @keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.1); } } /* --- Capa 3: overlay oscuro para legibilidad --- */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.6); pointer-events: none; } /* --- Capa 4: degradado que funde el hero con el fondo de la pagina --- */ .hero__velo { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, transparent 0%, rgba(5, 5, 5, 0.35) 60%, #050505 100%); pointer-events: none; } /* --- Capa 5: contenido --- */ .hero-content { animation: heroFadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes heroFadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Si el sistema pide menos movimiento, el fondo queda quieto. El parallax tambien se desactiva desde Hero.js. */ @media (prefers-reduced-motion: reduce) { .hero-bg-gif { animation: none; } .hero-content { animation-duration: 0.01ms; } } .hero__contenido { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5rem; padding: 4rem 1rem; } .hero__insignia { display: inline-block; border-radius: 9999px; padding: 0.375rem 1rem; font-size: 11px; letter-spacing: 0.08em; border: 1px solid rgba(251, 146, 60, 0.3); background-color: rgba(249, 115, 22, 0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fdba74; } .hero__titulo { font-size: 1.875rem; line-height: 1.2; max-width: 48rem; letter-spacing: -0.02em; color: #ffffff; font-weight: 700; } .hero__subtitulo { font-size: 0.875rem; max-width: 32rem; color: rgba(209, 213, 219, 0.9); letter-spacing: 0.025em; } .hero__estadisticas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; font-size: 0.75rem; font-weight: 500; color: #d1d5db; padding-top: 0.25rem; } .hero__estadistica { display: flex; align-items: center; gap: 0.5rem; } .hero__estadistica-icono { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; position: relative; } .hero__estadistica-icono--naranja { background-color: rgba(249, 115, 22, 0.15); } .hero__estadistica-icono--esmeralda { background-color: rgba(16, 185, 129, 0.2); } .hero__estadistica-icono--cielo { background-color: rgba(14, 165, 233, 0.15); } .hero__estadistica-icono--esmeralda-suave { background-color: rgba(16, 185, 129, 0.15); } .hero__punto-vivo { position: absolute; width: 0.5rem; height: 0.5rem; background-color: #34d399; border-radius: 9999px; top: 0; right: 0; animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .hero__estadistica-valor { color: #ffffff; font-weight: 700; } .hero__estadistica-texto-verde { color: rgba(52, 211, 153, 0.9); } .hero__estadistica-numero-verde { font-weight: 700; color: #34d399; } .hero__estadistica-garantia { color: rgba(110, 231, 183, 0.9); } /* ========================================================================== 6. COMO COMPRAR ========================================================================== */ .como-comprar { padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .como-comprar__encabezado { text-align: center; margin-bottom: 1.5rem; } .como-comprar__titulo { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; } .como-comprar__subtitulo { color: #6b7280; font-size: 0.75rem; } .como-comprar__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.75rem; gap: 0.75rem; } .paso { background-color: #111111; padding: 0.75rem; border-radius: 0.75rem; border: 1px solid #2a2a2a; text-align: center; } .paso--destacado { border-color: rgba(6, 182, 212, 0.4); position: relative; overflow: hidden; } .paso__fondo { position: absolute; inset: 0; background-color: rgba(6, 182, 212, 0.05); } .paso__contenido { position: relative; z-index: 10; } .paso__numero { width: 2rem; height: 2rem; margin: 0 auto 0.5rem; background-image: linear-gradient(to bottom right, #22d3ee, #2563eb); border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; box-shadow: 0 0 12px rgba(56, 189, 248, 0.4); } .paso__titulo { font-weight: 600; font-size: 0.75rem; color: #ffffff; margin-bottom: 0.25rem; } .paso__texto { font-size: 10px; color: #6b7280; line-height: 1.375; } /* ========================================================================== 7. CATALOGO Y TARJETAS DE PRODUCTO ========================================================================== */ .catalogo { padding: 3rem 0; } .catalogo__buscador { margin-bottom: 1rem; } .catalogo__buscador-caja { position: relative; width: 100%; max-width: 42rem; margin: 0 auto; } .catalogo__lupa { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 0.75rem; } .catalogo__input { width: 100%; background-color: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; padding: 0.5rem 0.75rem 0.5rem 2.25rem; color: #ffffff; font-size: 0.75rem; font-family: inherit; transition: all 0.15s ease; } .catalogo__input::placeholder { color: #4b5563; } .catalogo__input:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); background-color: #111111; } .catalogo__categorias { display: flex; overflow-x: auto; padding-bottom: 0.75rem; gap: 0.375rem; -ms-overflow-style: none; scrollbar-width: none; } .catalogo__categorias::-webkit-scrollbar { display: none; } .pildora { padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 10px; font-weight: 500; letter-spacing: 0.025em; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: #9ca3af; white-space: nowrap; transition: all 0.3s ease; } .pildora:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } .pildora--activa { background-color: #ffffff; color: #000000; border-color: transparent; box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1); } .pildora--activa:hover { color: #000000; } .catalogo__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.75rem; gap: 0.75rem; } .catalogo__vacio { grid-column: 1 / -1; text-align: center; color: #6b7280; font-size: 0.875rem; padding: 2rem 0; } /* --- Tarjeta --- */ .producto { background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; padding: 0.25rem; transition: all 0.3s ease; } .producto:hover { border-color: rgba(255, 81, 0, 0.6); box-shadow: 0 0 30px rgba(255, 81, 0, 0.3); transform: translateY(-0.25rem); } .producto__interior { padding: 0.75rem; display: flex; flex-direction: column; height: 100%; position: relative; } .badge { position: absolute; top: 0.75rem; right: 0.75rem; font-size: 9px; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 9999px; display: flex; align-items: center; gap: 0.25rem; z-index: 10; } .badge--stock { background-color: rgba(20, 83, 45, 0.7); border: 1px solid rgba(34, 197, 94, 0.6); color: #4ade80; } .badge--sin-stock { background-color: rgba(127, 29, 29, 0.8); border: 1px solid #ef4444; color: #f87171; animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .badge__punto { width: 0.375rem; height: 0.375rem; border-radius: 9999px; } .badge__punto--verde { background-color: #4ade80; animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .badge__punto--rojo { background-color: #f87171; animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .producto__imagen { width: 100%; height: 7rem; border-radius: 0.5rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform 0.3s ease; } .producto:hover .producto__imagen { transform: scale(1.02); } .producto__foto { width: 100%; height: 100%; object-fit: cover; } .producto__icono { font-size: 2.25rem; opacity: 0.9; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); } /* Iconos del producto: URLs o emojis, solo si no hay imagen */ .producto__iconos { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .producto__icono-img { width: 2.25rem; height: 2.25rem; object-fit: contain; } .producto__icono-emoji { font-size: 2rem; line-height: 1; } .producto__duracion { font-size: 10px; color: #fbbf24; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.25rem; } .producto__nombre { font-size: 13px; font-weight: 600; color: #ffffff; margin-bottom: 0.125rem; line-height: 1.375; letter-spacing: -0.025em; } .producto__descripcion { font-size: 10px; color: #6b7280; margin-bottom: 0.625rem; flex-grow: 1; line-height: 1.375; } .producto__precio { display: flex; align-items: baseline; gap: 0.375rem; margin-bottom: 0.75rem; } .precio__valor { font-size: 1rem; font-weight: 600; letter-spacing: 0.025em; color: #34d399; } .precio__antiguo { font-size: 11px; color: rgba(248, 113, 113, 0.9); text-decoration: line-through; -webkit-text-decoration-color: rgba(248, 113, 113, 0.7); text-decoration-color: rgba(248, 113, 113, 0.7); font-weight: 600; margin-left: 0.375rem; } .precio__aviso { font-size: 11px; font-weight: 500; letter-spacing: 0.025em; color: #9ca3af; } .producto__acciones { display: flex; flex-direction: column; gap: 0.375rem; } .boton-carrito { width: 100%; color: #ffffff; font-weight: 600; padding: 0.625rem 0; border-radius: 0.5rem; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .boton-carrito--agotado { background-color: #374151; color: #9ca3af; cursor: not-allowed; opacity: 0.6; } .boton-dudas { width: 100%; background-color: #1a1a1a; border: 1px solid #333333; color: #9ca3af; font-weight: 500; padding: 0.5rem 0; border-radius: 0.5rem; font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 0.375rem; transition: all 0.15s ease; } .boton-dudas:hover { color: #ffffff; border-color: #6b7280; } /* ========================================================================== 8. DEGRADADOS E ICONOS DE PRODUCTO Equivalen a las clases "from-X to-black" y "text-X" del original. ========================================================================== */ .grad-from-red-700-to-black { background-image: linear-gradient(to bottom right, #b91c1c, #000000); } .grad-from-red-800-to-black { background-image: linear-gradient(to bottom right, #991b1b, #000000); } .grad-from-red-900-to-black { background-image: linear-gradient(to bottom right, #7f1d1d, #000000); } .grad-from-orange-700-to-black { background-image: linear-gradient(to bottom right, #c2410c, #000000); } .grad-from-orange-800-to-black { background-image: linear-gradient(to bottom right, #9a3412, #000000); } .grad-from-amber-800-to-black { background-image: linear-gradient(to bottom right, #92400e, #000000); } .grad-from-yellow-800-to-black { background-image: linear-gradient(to bottom right, #854d0e, #000000); } .grad-from-lime-800-to-black { background-image: linear-gradient(to bottom right, #3f6212, #000000); } .grad-from-green-800-to-black { background-image: linear-gradient(to bottom right, #166534, #000000); } .grad-from-emerald-800-to-black { background-image: linear-gradient(to bottom right, #065f46, #000000); } .grad-from-teal-800-to-black { background-image: linear-gradient(to bottom right, #115e59, #000000); } .grad-from-cyan-800-to-black { background-image: linear-gradient(to bottom right, #155e75, #000000); } .grad-from-cyan-900-to-black { background-image: linear-gradient(to bottom right, #164e63, #000000); } .grad-from-sky-800-to-black { background-image: linear-gradient(to bottom right, #075985, #000000); } .grad-from-blue-800-to-black { background-image: linear-gradient(to bottom right, #1e40af, #000000); } .grad-from-blue-900-to-black { background-image: linear-gradient(to bottom right, #1e3a8a, #000000); } .grad-from-indigo-800-to-black { background-image: linear-gradient(to bottom right, #3730a3, #000000); } .grad-from-indigo-900-to-black { background-image: linear-gradient(to bottom right, #312e81, #000000); } .grad-from-violet-800-to-black { background-image: linear-gradient(to bottom right, #5b21b6, #000000); } .grad-from-purple-800-to-black { background-image: linear-gradient(to bottom right, #6b21a8, #000000); } .grad-from-slate-800-to-black { background-image: linear-gradient(to bottom right, #1e293b, #000000); } .grad-from-gray-700-to-black { background-image: linear-gradient(to bottom right, #374151, #000000); } .grad-from-gray-800-to-black { background-image: linear-gradient(to bottom right, #1f2937, #000000); } .icono-text-amber-400 { color: #fbbf24; } .icono-text-blue-300 { color: #93c5fd; } .icono-text-blue-400 { color: #60a5fa; } .icono-text-cyan-400 { color: #22d3ee; } .icono-text-emerald-400 { color: #34d399; } .icono-text-gray-200 { color: #e5e7eb; } .icono-text-gray-300 { color: #d1d5db; } .icono-text-green-400 { color: #4ade80; } .icono-text-indigo-400 { color: #818cf8; } .icono-text-lime-400 { color: #a3e635; } .icono-text-orange-400 { color: #fb923c; } .icono-text-purple-400 { color: #c084fc; } .icono-text-red-400 { color: #f87171; } .icono-text-red-500 { color: #ef4444; } .icono-text-sky-400 { color: #38bdf8; } .icono-text-slate-300 { color: #cbd5e1; } .icono-text-teal-400 { color: #2dd4bf; } .icono-text-violet-400 { color: #a78bfa; } .icono-text-yellow-400 { color: #facc15; } /* ========================================================================== 9. RESENAS ========================================================================== */ .resenas { padding: 3rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .resenas__encabezado { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .resenas__titulo { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; color: #38bdf8; } .resenas__subtitulo { color: #9ca3af; font-size: 0.75rem; margin-top: 0.375rem; font-weight: 500; letter-spacing: 0.025em; line-height: 1.625; max-width: 36rem; } .resenas__botones { display: flex; gap: 0.5rem; } .resenas__boton-anadir { padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background-color: #0284c7; color: #ffffff; box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.25); transition: background-color 0.15s ease; } .resenas__boton-anadir:hover { background-color: #0ea5e9; } .resenas__boton-texto { letter-spacing: 0.12em; font-weight: 800; text-transform: uppercase; margin-left: 0.375rem; } .resenas__boton-admin { padding: 0.5rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: #1a1a1a; border: 1px solid #333333; color: #fbbf24; transition: all 0.15s ease; } .resenas__boton-admin:hover { color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); } .resenas__filtro { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .resenas__filtro-etiqueta { font-size: 0.75rem; color: rgba(56, 189, 248, 0.9); font-weight: 600; white-space: nowrap; } .resenas__select { flex: 1 1; max-width: 20rem; background-color: #111111; border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: #ffffff; letter-spacing: 0.025em; font-family: Montserrat, sans-serif; appearance: none; -webkit-appearance: none; } .resenas__select:focus { outline: none; border-color: #34d399; box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4); } .resenas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.75rem; gap: 0.75rem; } .resenas__vacio { text-align: center; color: #6b7280; font-size: 0.875rem; padding: 2rem 0; } /* Boton "Ver todas las reseñas (N)" bajo la rejilla */ .resenas__ver-todas { display: flex; justify-content: center; margin-top: 0.5rem; } .resenas__ver-todas-boton { padding: 0.625rem 1.25rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background-color: #1a1a1a; border: 1px solid rgba(255, 81, 0, 0.5); color: #ff5100; transition: all 0.15s ease; } .resenas__ver-todas-boton:hover { background-color: #ff5100; color: #ffffff; } .resenas__estado { text-align: center; color: #6b7280; font-size: 0.875rem; padding: 2rem 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .resenas__estado--error { color: #fca5a5; } /* --- Formulario de resena --- */ .modal__caja--resena { max-width: 28rem; max-height: 90vh; } .formulario__titulo { letter-spacing: 0.1em; font-weight: 800; text-transform: uppercase; } .formulario { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; } .formulario__campo { display: flex; flex-direction: column; gap: 0.375rem; position: relative; } .formulario__etiqueta { font-size: 10px; font-weight: 500; letter-spacing: 0.025em; color: #6b7280; } .formulario__input { width: 100%; background-color: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; color: #ffffff; font-family: inherit; transition: border-color 0.15s ease; } .formulario__input::placeholder { color: #4b5563; } .formulario__input:focus { outline: none; border-color: rgba(16, 185, 129, 0.6); } .formulario__area { resize: none; line-height: 1.6; } .formulario__contador { align-self: flex-end; font-size: 10px; color: #4b5563; } .formulario__estrellas { display: flex; gap: 0.5rem; margin-top: 0.25rem; } .formulario__estrella { font-size: 1.5rem; color: #4b5563; transition: color 0.15s ease, transform 0.15s ease; } .formulario__estrella:hover { transform: scale(1.12); } .formulario__estrella--activa { color: #34d399; } .formulario__error { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; line-height: 1.5; color: #fca5a5; background-color: rgba(220, 38, 38, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 0.75rem; padding: 0.625rem 0.75rem; } .formulario__nota { font-size: 10px; color: #4b5563; } .formulario__boton { width: 100%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; color: #ffffff; } .formulario__boton:disabled { opacity: 0.6; cursor: default; animation: none; } /* Selectores compuestos: estos modificadores se declaran antes que las clases base .modal/.modal__caja/.modal__cabecera, asi que necesitan mas especificidad para no quedar pisados por ellas. */ .modal__cabecera.modal__cabecera--resena { padding: 1.25rem; } .modal__titulo.modal__titulo--resena { font-size: 1.125rem; } .formulario__select { font-weight: 600; letter-spacing: 0.025em; font-family: Montserrat, sans-serif; appearance: none; -webkit-appearance: none; } /* Campo de foto: mismo boton gris del original con ::file-selector-button */ .formulario__archivo { width: 100%; font-size: 0.75rem; color: #9ca3af; } .formulario__archivo::-webkit-file-upload-button { margin-right: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 0; background-color: #222222; color: #ffffff; font-size: 0.75rem; font-family: inherit; cursor: pointer; } .formulario__archivo::file-selector-button { margin-right: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 0; background-color: #222222; color: #ffffff; font-size: 0.75rem; font-family: inherit; cursor: pointer; } .formulario__previa { margin-top: 0.5rem; width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.4); } .formulario__quitar-foto { align-self: flex-start; margin-top: 0.5rem; font-size: 0.75rem; color: #9ca3af; transition: color 0.15s ease; } .formulario__quitar-foto:hover { color: #ffffff; } .formulario__pie { padding: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: #0a0a0a; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } /* Aviso flotante de validacion (showFormToast del original) */ .toast-formulario { position: fixed; z-index: 140; padding: 0.625rem 1rem; border-radius: 0.75rem; background-color: #111111; border: 1px solid rgba(245, 158, 11, 0.5); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6); font-size: 0.875rem; font-weight: 600; color: #fcd34d; max-width: min(90vw, 320px); text-align: center; pointer-events: none; } /* --- Modal de exito --- */ .modal__caja.modal__caja--exito { max-width: 24rem; padding: 1.5rem; text-align: center; border-color: rgba(16, 185, 129, 0.3); overflow: hidden; } .exito__degradado { position: absolute; inset: 0; background-image: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), transparent); pointer-events: none; } .exito__circulo { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 9999px; background-color: rgba(16, 185, 129, 0.2); display: flex; align-items: center; justify-content: center; } .exito__circulo i { font-size: 1.875rem; color: #34d399; } .exito__titulo { font-size: 1.125rem; font-weight: 700; color: #ffffff; margin-bottom: 0.5rem; } .exito__texto { font-size: 0.875rem; color: #9ca3af; line-height: 1.625; margin-bottom: 1.25rem; } .exito__boton { width: 100%; padding: 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; color: #ffffff; } /* --- Tarjeta de resena --- */ .resena { background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; padding: 0.75rem; cursor: pointer; transition: border-color 0.15s ease; } .resena:hover { border-color: rgba(16, 185, 129, 0.3); } .resena__foto-caja { margin-bottom: 0.625rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.4); } .resena__foto { width: 100%; max-height: 7rem; object-fit: contain; margin: 0 auto; } .resena__cabecera { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; } .resena__avatar { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background-image: linear-gradient(to bottom right, #f97316, #dc2626); display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2); } .resena__datos { min-width: 0; flex: 1 1; } .resena__linea-nombre { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .resena__nombre { font-size: 0.875rem; font-weight: 600; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .resena__categoria { font-size: 9px; padding: 0.125rem 0.375rem; border-radius: 9999px; background-color: rgba(16, 185, 129, 0.15); color: #34d399; font-weight: 600; } .resena__estrellas { display: flex; gap: 0.125rem; margin-top: 0.125rem; } .estrella--chico { font-size: 10px; } .estrella--grande { font-size: 0.875rem; } .estrella--llena { color: #34d399; } .estrella--apagada { color: #4b5563; } .resena__producto { font-size: 10px; color: #6b7280; margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .resena__comentario { font-size: 0.75rem; color: #9ca3af; line-height: 1.625; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- Modal detalle de resena (#reviewDetailModal) --- */ .modal.modal--alto { z-index: 110; } .modal__caja.modal__caja--detalle { max-width: 32rem; max-height: 92vh; overflow: hidden; } .detalle__cabecera { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .detalle__titulo { font-size: 1rem; font-weight: 700; color: #ffffff; } .detalle__cuerpo { text-align: center; overflow-y: auto; flex: 1 1; } .detalle__foto-caja { width: 100%; background-color: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0.75rem; } .detalle__foto { width: 100%; max-height: 32vh; object-fit: contain; margin: 0 auto; border-radius: 0.5rem; } .detalle__avatar { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; background-image: linear-gradient(to bottom right, #059669, #115e59); display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 1.125rem; margin: 1.25rem auto 0; } .detalle__info { padding: 1.25rem; } .detalle__categoria { display: inline-block; font-size: 10px; padding: 0.125rem 0.5rem; border-radius: 9999px; background-color: rgba(16, 185, 129, 0.15); color: #34d399; font-weight: 600; margin-bottom: 0.5rem; } .detalle__nombre { font-size: 1.125rem; font-weight: 700; color: #ffffff; } .detalle__producto { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; } .detalle__estrellas { display: flex; justify-content: center; gap: 0.25rem; margin: 0.5rem 0; } .detalle__comentario { font-size: 0.875rem; color: #d1d5db; line-height: 1.625; margin-top: 0.75rem; } .detalle__fecha { font-size: 11px; color: #6b7280; margin-top: 1rem; } .detalle__fecha i { margin-right: 0.25rem; } .detalle__pie { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .detalle__boton { width: 100%; background-color: #1a1a1a; border: 1px solid #333333; color: #ffffff; font-size: 0.75rem; font-weight: 600; padding: 0.625rem; border-radius: 0.75rem; transition: border-color 0.15s ease; } .detalle__boton:hover { border-color: #ff5100; } /* --- Modal con todas las resenas (#allReviewsModal) --- */ .modal.modal--pantalla { z-index: 110; align-items: stretch; padding: 0; } .modal__caja.modal__caja--todas { background-color: #0a0a0a; border: none; border-radius: 0; max-width: 64rem; height: 100%; } .todas__cabecera { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; position: -webkit-sticky; position: sticky; top: 0; background-color: #0a0a0a; z-index: 10; flex-shrink: 0; } .todas__titulo { font-size: 1rem; font-weight: 700; color: #ffffff; } .todas__cerrar { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 1.25rem; transition: color 0.15s ease; } .todas__cerrar:hover { color: #ffffff; } .todas__cuerpo { padding: 0.75rem; overflow-y: auto; flex: 1 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.75rem; gap: 0.75rem; align-content: start; } .todas__vacio { color: #6b7280; font-size: 0.875rem; text-align: center; padding: 1.5rem 0; } /* ========================================================================== 10. FOOTER ========================================================================== */ /* ========================================================================== CARRITO Copia de #cartModal / #cartDrawer y del toast #cartToast del original ========================================================================== */ .carrito { position: fixed; inset: 0; z-index: 100; opacity: 0; transition: opacity 0.3s ease; } .carrito--visible { opacity: 1; } .carrito__panel { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; max-width: 28rem; background-color: #050505; border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; } .carrito__panel--visible { transform: translateX(0); } .carrito__cabecera { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .carrito__titulo { font-size: 1.25rem; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 0.5rem; } .carrito__cerrar { color: #9ca3af; font-size: 1.5rem; transition: color 0.15s ease; } .carrito__cerrar:hover { color: #ffffff; } .carrito__lista { flex: 1 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .carrito__vacio { text-align: center; color: #6b7280; margin-top: 2.5rem; } .carrito__vacio i { font-size: 2.25rem; margin-bottom: 0.75rem; display: block; } .carrito__linea { display: flex; align-items: center; gap: 0.75rem; background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; padding: 0.75rem; transition: border-color 0.15s ease; } .carrito__linea:hover { border-color: rgba(16, 185, 129, 0.3); } .carrito__miniatura { width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .carrito__miniatura--icono { background-image: linear-gradient(to bottom right, #1f2937, #000000); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.125rem; } .carrito__icono-img { width: 1.75rem; height: 1.75rem; object-fit: contain; } .carrito__icono-emoji { font-size: 1.25rem; line-height: 1; } .carrito__datos { flex: 1 1; min-width: 0; } .carrito__nombre { font-weight: 600; font-size: 0.875rem; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carrito__precio { color: #34d399; font-weight: 700; font-size: 0.875rem; } .carrito__cantidad { color: #6b7280; font-weight: 500; font-size: 0.75rem; } .carrito__borrar { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; color: #6b7280; flex-shrink: 0; transition: color 0.15s ease, background-color 0.15s ease; } .carrito__borrar:hover { color: #ef4444; background-color: rgba(239, 68, 68, 0.1); } .carrito__pie { padding: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: #0a0a0a; flex-shrink: 0; } .carrito__cliente { background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; } .carrito__cliente-titulo { font-weight: 700; font-size: 11px; letter-spacing: 0.05em; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: #9ca3af; text-transform: uppercase; } .carrito__cliente-titulo i { color: #34d399; } .carrito__input { width: 100%; background-color: #050505; border: 1px solid #2a2a2a; border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; color: #ffffff; font-family: inherit; transition: border-color 0.15s ease; } .carrito__input::placeholder { color: #4b5563; } .carrito__input:focus { outline: none; border-color: #ff5100; } .carrito__total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: 0 0.25rem; } .carrito__total-etiqueta { color: #9ca3af; font-size: 0.875rem; font-weight: 500; } .carrito__total-valor { font-size: 1.25rem; font-weight: 700; color: #34d399; } .carrito__comprar { width: 100%; background-color: #10b981; color: #ffffff; font-weight: 700; padding: 0.875rem; border-radius: 0.75rem; margin-bottom: 0.625rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); transition: all 0.15s ease; } .carrito__comprar:hover { background-color: #059669; box-shadow: 0 0 25px rgba(16, 185, 129, 0.5); } .carrito__comprar i { font-size: 1.125rem; } .carrito__seguir { width: 100%; background-color: #1a1a1a; border: 1px solid #333333; color: #9ca3af; font-weight: 500; padding: 0.75rem; border-radius: 0.75rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.875rem; transition: color 0.15s ease, background-color 0.15s ease; } .carrito__seguir:hover { color: #ffffff; background-color: #222222; } /* Aviso flotante al anadir */ .toast-carrito { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 120; padding: 0.75rem 1rem; border-radius: 0.75rem; background-color: #111111; border: 1px solid rgba(16, 185, 129, 0.4); box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2); font-size: 0.875rem; font-weight: 600; color: #ffffff; display: flex; align-items: center; gap: 0.5rem; max-width: 90vw; } .toast-carrito i { color: #34d399; } /* ========================================================================== FICHAS DE COMPRA (producto, paquetes y VIP) ========================================================================== */ .modal.compra { z-index: 100; } .modal__caja.compra__caja { max-width: 28rem; max-height: 90vh; } .modal__caja.compra__caja--ancha { max-width: 32rem; max-height: 92vh; } .compra__cabecera { padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-shrink: 0; } .compra__titulo { font-size: 1rem; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding-right: 0.5rem; } .compra__titulo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compra__titulo-fa { color: #fb923c; flex-shrink: 0; } .compra__titulo-icono { width: 1.25rem; height: 1.25rem; object-fit: contain; flex-shrink: 0; } .compra__titulo--vip { font-size: 1.125rem; } .compra__titulo--vip i { color: #fbbf24; } /* Caja "⚡ Beneficios" */ .compra__beneficios { background-color: #111111; border: 1px solid #2a2a2a; border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; } .compra__beneficios-titulo { color: #fbbf24; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; } .compra__beneficio { font-size: 13px; line-height: 1.375; color: #d1d5db; } .compra__beneficio strong { color: #ffffff; font-weight: 700; } .compra__beneficio span { color: #9ca3af; } .compra__cuerpo { padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; color: #d1d5db; } .compra__texto { color: #ffffff; font-weight: 500; line-height: 1.625; font-size: 0.875rem; } .compra__resumen { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background-color: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.75rem; padding: 0.75rem 1rem; } .compra__resumen-datos { min-width: 0; } .compra__resumen-etiqueta { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; } .compra__resumen-nombre { color: #ffffff; font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compra__resumen-precio { text-align: right; flex-shrink: 0; } .compra__precio-antiguo { font-size: 11px; color: #6b7280; text-decoration: line-through; } .compra__precio { color: #34d399; font-weight: 700; font-size: 1.25rem; } .compra__seccion { font-size: 11px; color: #9ca3af; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .compra__paquetes { display: flex; flex-direction: column; gap: 0.5rem; } .compra__paquete { width: 100%; text-align: left; padding: 0.875rem 1rem; border-radius: 0.75rem; border: 1px solid #2a2a2a; background-color: #111111; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .compra__paquete:hover { border-color: rgba(16, 185, 129, 0.4); background-color: rgba(16, 185, 129, 0.05); } .compra__paquete--activo { border-color: #10b981; background-color: rgba(16, 185, 129, 0.1); box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.1); } .compra__paquete-izq { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .compra__radio { width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid #6b7280; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .compra__radio--activo { border-color: #34d399; background-color: #34d399; } .compra__radio i { font-size: 8px; color: #000000; } .compra__paquete-nombre { font-size: 0.875rem; color: #ffffff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compra__paquete-cantidad { color: #6b7280; } .compra__paquete-precio { color: #34d399; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; } /* Contador por paquete, para los productos con tieneContador */ .compra__paquete--contador { cursor: default; gap: 0.625rem; } .compra__paquete--contador:hover { border-color: #2a2a2a; background-color: #111111; } .compra__paquete--contador.compra__paquete--activo { border-color: #10b981; background-color: rgba(16, 185, 129, 0.1); } .compra__contador { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; } .compra__contador-boton { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; background-color: #222222; border: 1px solid #333333; color: #ffffff; font-weight: 700; font-size: 1rem; line-height: 1; transition: background-color 0.15s ease; } .compra__contador-boton:hover:not(:disabled) { background-color: #333333; } .compra__contador-boton:disabled { opacity: 0.35; cursor: not-allowed; } .compra__contador-valor { min-width: 1.75rem; text-align: center; color: #ffffff; font-weight: 700; font-size: 0.875rem; } .compra__total-detalle { color: #6b7280; font-weight: 400; } .compra__pie { padding: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: #0a0a0a; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; } .compra__total { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; padding: 0 0.25rem; margin-bottom: 0.25rem; } .compra__total-etiqueta { color: #9ca3af; } .compra__total-valor { color: #34d399; font-weight: 700; font-size: 1.125rem; } .compra__boton { width: 100%; color: #ffffff; font-weight: 700; padding: 0.875rem; border-radius: 0.75rem; font-size: 0.875rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .compra__boton--apagado { background-color: #374151; color: #9ca3af; cursor: not-allowed; opacity: 0.7; animation: none; } .compra__cerrar-boton { width: 100%; background-color: #1a1a1a; border: 1px solid #333333; color: #9ca3af; font-weight: 500; padding: 0.625rem; border-radius: 0.75rem; font-size: 0.75rem; transition: color 0.15s ease; } .compra__cerrar-boton:hover { color: #ffffff; } .pie { border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: #0a0a0a; padding: 2rem 0; } .pie__interior { max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: center; } .pie__boton { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 9999px; background-color: #059669; color: #ffffff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.025em; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4); animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; transition: all 0.15s ease; } .pie__boton:hover { background-color: #10b981; animation: none; } .pie__icono { font-size: 1.125rem; } /* ========================================================================== 11. CHATBOT ========================================================================== */ .bot__boton { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .bot__etiqueta { padding: 0.25rem 0.625rem; border-radius: 9999px; background-color: rgba(10, 10, 10, 0.9); border: 1px solid rgba(16, 185, 129, 0.4); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #34d399; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4); transition: border-color 0.15s ease; } .bot__boton:hover .bot__etiqueta { border-color: #34d399; } .bot__circulo { width: 3.5rem; height: 3.5rem; border-radius: 9999px; background-image: linear-gradient(to bottom right, #10b981, #0d9488); color: #ffffff; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: transform 0.15s ease; } .bot__boton:hover .bot__circulo { transform: scale(1.05); } .bot__panel { position: fixed; bottom: 6rem; right: 1.25rem; z-index: 90; width: min(100vw - 2rem, 340px); background-color: #111111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; } .bot__cabecera { padding: 0.75rem 1rem; background-color: rgba(5, 150, 105, 0.2); border-bottom: 1px solid rgba(16, 185, 129, 0.3); display: flex; align-items: center; justify-content: space-between; } .bot__titulo { font-size: 0.875rem; font-weight: 800; color: #34d399; letter-spacing: 0.025em; } .bot__subtitulo { font-size: 10px; color: #9ca3af; } .bot__cerrar { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: color 0.15s ease; } .bot__cerrar:hover { color: #ffffff; } .bot__mensajes { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; flex: 1 1; font-size: 0.875rem; min-height: 180px; max-height: 320px; } .bot__bienvenida { background-color: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: #d1d5db; } .bot__bienvenida strong { color: #34d399; } .bot__fila-usuario { display: flex; justify-content: flex-end; } .bot__burbuja-usuario { background-color: rgba(5, 150, 105, 0.3); border: 1px solid rgba(16, 185, 129, 0.3); color: #ffffff; font-size: 0.75rem; border-radius: 0.75rem; border-bottom-right-radius: 0.125rem; padding: 0.5rem 0.75rem; max-width: 85%; } .bot__fila-bot { display: flex; justify-content: flex-start; } .bot__burbuja-bot { background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); color: #d1d5db; font-size: 0.75rem; border-radius: 0.75rem; border-bottom-left-radius: 0.125rem; padding: 0.5rem 0.75rem; max-width: 90%; line-height: 1.625; } .bot__burbuja-escribiendo { background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); color: #9ca3af; font-size: 0.75rem; border-radius: 0.75rem; border-bottom-left-radius: 0.125rem; padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.375rem; } .bot__puntos { display: inline-flex; gap: 0.25rem; } .bot__punto { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background-color: #34d399; animation: tw-bounce 1s infinite; } .bot__escribiendo-texto { font-size: 10px; color: #6b7280; } .bot__preguntas { padding: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 0.375rem; background-color: #0a0a0a; } .bot__preguntas-titulo { font-size: 10px; color: #6b7280; margin-bottom: 0.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .bot__pregunta { width: 100%; text-align: left; font-size: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background-color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; transition: border-color 0.15s ease; } .bot__pregunta:hover { border-color: rgba(16, 185, 129, 0.4); } .bot__whatsapp { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background-color: #16a34a; color: #ffffff; margin-top: 0.25rem; transition: background-color 0.15s ease; } .bot__whatsapp:hover { background-color: #22c55e; } /* ========================================================================== 12. MODALES ========================================================================== */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal__caja { background-color: #111111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; width: 100%; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; position: relative; } .modal__caja--terminos { max-width: 42rem; max-height: 80vh; } .modal__caja--dudas { max-width: 28rem; text-align: center; } .modal__cabecera { padding: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .modal__cabecera--centrada { position: relative; justify-content: center; } .modal__titulo { font-size: 1.25rem; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 0.5rem; } .modal__titulo--centrado { justify-content: center; } .modal__icono-verde { color: #34d399; } .modal__titulo-verde { color: #34d399; } .modal__icono-azul { color: #3b82f6; } .modal__cerrar { color: #9ca3af; font-size: 1.5rem; transition: color 0.15s ease; } .modal__cerrar:hover { color: #ffffff; } .modal__cerrar--absoluto { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.25rem; } .modal__cuerpo { padding: 1.5rem; overflow-y: auto; font-size: 0.875rem; color: #d1d5db; display: flex; flex-direction: column; gap: 0.75rem; } .modal__cuerpo--dudas { gap: 1rem; } .clausula { border-radius: 0.75rem; border: 1px solid rgba(16, 185, 129, 0.25); background-color: rgba(16, 185, 129, 0.05); padding: 0.875rem; } .clausula__titulo { color: #34d399; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.025em; margin-bottom: 0.25rem; } .clausula__texto { font-size: 13px; line-height: 1.625; color: #d1d5db; } .clausula__texto strong { color: #ffffff; } .modal__pie--terminos { padding: 1.25rem; border-top: 1px solid rgba(16, 185, 129, 0.2); text-align: right; } .modal__boton-verde { background-color: #059669; color: #ffffff; padding: 0.75rem 2rem; border-radius: 0.75rem; font-weight: 700; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2); transition: background-color 0.15s ease; } .modal__boton-verde:hover { background-color: #10b981; } .dudas__circulo { width: 4rem; height: 4rem; background-color: rgba(34, 197, 94, 0.1); border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; } .dudas__circulo i { font-size: 2.25rem; color: #22c55e; } .dudas__nota { color: #9ca3af; font-size: 0.75rem; } .modal__cuerpo--dudas strong { color: #ffffff; } .modal__pie--dudas { padding: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: #0a0a0a; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .modal__boton-gris { width: 100%; background-color: #222222; border: 1px solid #444444; color: #ffffff; padding: 0.75rem 2rem; border-radius: 0.75rem; font-weight: 700; transition: background-color 0.15s ease; } .modal__boton-gris:hover { background-color: #333333; } /* ========================================================================== 13. RESPONSIVE Puntos de corte de Tailwind: sm 640px, md 768px, lg 1024px. ========================================================================== */ @media (min-width: 640px) { .contenedor-max { padding-left: 1.5rem; padding-right: 1.5rem; } .hero { margin-left: 0; margin-right: 0; } .resenas__encabezado { flex-direction: row; align-items: center; justify-content: space-between; } .resena__foto { max-height: 9rem; } .detalle__foto { max-height: 42vh; } .modal.modal--pantalla { padding: 1rem; } .modal__caja.modal__caja--todas { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; height: auto; max-height: 90vh; } .todas__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .navbar__fila { height: 4rem; } .navbar__logo-texto { font-size: 1.125rem; } .navbar__derecha { gap: 2.5rem; } .navbar__menu { display: flex; } .navbar__hamburguesa { display: none; } .navbar__panel-movil { display: none; } .hero__contenido { padding: 6rem 1rem; } .hero__insignia { font-size: 0.75rem; } .hero__titulo { font-size: 3rem; } .hero__subtitulo { font-size: 1rem; } .hero__estadisticas { gap: 1.75rem; font-size: 0.875rem; } .como-comprar__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .catalogo__buscador { margin-bottom: 1.5rem; } .catalogo__input { padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.875rem; } .pildora { font-size: 11px; } .catalogo__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .resenas__titulo { font-size: 1.5rem; } .resenas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .contenedor-max { padding-left: 2rem; padding-right: 2rem; } .hero__titulo { font-size: 3.75rem; } .catalogo__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .resenas__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }