/* ============================================================ Laguna 3D — Sitio público La portada, la tienda, el muestrario y el seguimiento. ------------------------------------------------------------ Es una hoja aparte de la del sistema de gestión, a propósito: · Lo que el cliente ve no tiene por qué cambiar porque el taller ajuste una pantalla interna, ni al revés. · Aquí no vive nada del comportamiento de la app (barras fijas, freno del rebote, atajos): el scroll y los gestos del navegador se quedan como el cliente los espera. Comparte el tema oscuro y el verde de la marca, pero no el armazón: esto respira más y cada pantalla pide una sola cosa. Se conservan los nombres de clases y variables de la app (.btn, .card, --verde…) para que las páginas no tengan que reescribirse. ============================================================ */ :root { /* --- Base --- */ --bg: #0a0a0a; --superficie: rgba(255, 255, 255, .045); --superficie-suave: rgba(255, 255, 255, .075); /* --- Marca --- */ --verde: #4ade80; --verde-oscuro: #22c55e; --verde-claro: #6ee7a0; --verde-tinte: rgba(74, 222, 128, .10); --verde-borde: rgba(74, 222, 128, .38); --verde-brillo: rgba(74, 222, 128, .30); /* --- Texto --- */ --texto: #ededed; --texto-suave: #9a9a9a; --texto-tenue: #6d6d6d; /* --- Vidrio: relleno translúcido, borde de un píxel, brillo interior --- */ --vidrio: rgba(255, 255, 255, .045); --vidrio-alto: rgba(255, 255, 255, .075); --vidrio-borde: rgba(255, 255, 255, .10); --vidrio-borde-alto: rgba(255, 255, 255, .17); --vidrio-brillo: rgba(255, 255, 255, .07); --chrome: rgba(13, 15, 15, .72); /* --- Semánticos --- */ --rojo: #ff5c5c; --amarillo: #ffd35c; --sombra-vidrio: inset 0 1px 0 var(--vidrio-brillo), 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px rgba(0, 0, 0, .26); --sombra-alta: inset 0 1px 0 rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .55); --radius: 16px; --radius-sm: 12px; --radius-lg: 22px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); /* Las manchas de luz del fondo se salen del borde a propósito. `clip` recorta ese desbordamiento sin volver a un contenedor de scroll, que es lo que rompería las barras fijas. */ overflow-x: clip; } body { background: var(--bg); color: var(--texto); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* El fondo. Dos capas fijas detrás de todo: · la de abajo pone el negro, una rejilla muy tenue que le da textura de plano técnico, y el resplandor de marca en las esquinas; · la de encima son dos manchas de luz que se desplazan muy despacio, para que el negro no se sienta una pared. Se anima con transform, que la tarjeta gráfica resuelve sola y no cuesta al hacer scroll. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .021) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .021) 1px, transparent 1px) 0 0 / 64px 64px, radial-gradient(900px 600px at 8% -8%, rgba(74, 222, 128, .12), transparent 62%), radial-gradient(700px 520px at 96% 4%, rgba(34, 197, 94, .085), transparent 58%), var(--bg); } body::after { content: ''; position: fixed; inset: -30%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(74, 222, 128, .13), transparent 74%) 18% 26% / 44% 44% no-repeat, radial-gradient(closest-side, rgba(34, 197, 94, .10), transparent 74%) 80% 72% / 52% 52% no-repeat; animation: respira 34s ease-in-out infinite alternate; will-change: transform; } @keyframes respira { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.09); } 100% { transform: translate3d(-2%, 5%, 0) scale(1.02); } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } /* Solo mientras hay una ventana abierta encima */ body.ventana-abierta { overflow: hidden; } img { max-width: 100%; } .hidden { display: none !important; } /* ============================================================ Texto ============================================================ */ h1, h2, h3 { line-height: 1.2; } h2.section { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin: 4px 0 14px; } h3.subsection { font-size: 11.5px; font-weight: 700; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 1.2px; margin: 26px 0 10px; } .card-sub { color: var(--texto-suave); font-size: 13.5px; } .card-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; } .verde { color: var(--verde); } .rojo { color: var(--rojo); } /* ============================================================ Tarjetas ============================================================ */ .card { background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radius); box-shadow: var(--sombra-vidrio); padding: 15px 16px; margin-bottom: 10px; } .card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } /* Una tarjeta que es enlace o botón se levanta al tocarla */ button.card { color: inherit; font: inherit; display: block; } a .card, button.card { transition: border-color .18s, background .18s, transform .13s ease; } a:hover .card, button.card:hover { border-color: var(--verde-borde); background: var(--vidrio-alto); box-shadow: var(--sombra-vidrio), 0 0 30px rgba(74, 222, 128, .10); } a:active .card, button.card:active { transform: scale(.988); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .grid-2 > * { min-width: 0; } @media (max-width: 440px) { .grid-2 { grid-template-columns: 1fr; } } /* ============================================================ Botones ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 20px; border: 1px solid var(--vidrio-borde); border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; background: var(--vidrio); color: var(--texto); text-decoration: none; box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 1px 2px rgba(0, 0, 0, .3); transition: background .15s, border-color .15s, filter .15s, transform .13s cubic-bezier(.34, 1.56, .64, 1); } .btn:hover { background: var(--vidrio-alto); border-color: var(--vidrio-borde-alto); } .btn:active { transform: scale(.96); } .btn:disabled { opacity: .5; cursor: default; transform: none; } .btn svg { width: 17px; height: 17px; } .btn-sm { min-height: 38px; padding: 9px 15px; font-size: 13.5px; } /* La acción principal. Sobre verde claro el texto va oscuro: es lo que se lee. */ .btn-primary { background: linear-gradient(180deg, #5cee92, var(--verde-oscuro)); color: #05230e; border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 2px 10px rgba(0, 0, 0, .3), 0 6px 24px var(--verde-brillo); } .btn-primary:hover { filter: brightness(1.07); border-color: rgba(255, 255, 255, .3); } /* La otra acción del mismo peso (WhatsApp) */ .btn-dark-green { background: linear-gradient(180deg, var(--verde-oscuro), #16a34a); color: #fff; border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 10px rgba(0, 0, 0, .3); } .btn-dark-green:hover { filter: brightness(1.08); } .btn-danger { background: var(--rojo); color: #2a0000; border-color: rgba(255, 255, 255, .18); } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .btn-row.igual > .btn, .btn-row.igual > a.btn { flex: 1; min-width: 0; } .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-suave); font-size: 13.5px; font-weight: 500; text-decoration: none; } .back-link:hover { color: var(--texto); } /* ============================================================ Formularios ============================================================ */ label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-suave); margin-bottom: 14px; } input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="date"], input:not([type]), textarea, select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radius-sm); color: var(--texto); font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */ font-family: inherit; font-weight: 500; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--verde-borde); box-shadow: 0 0 0 3px var(--verde-tinte); } input::placeholder, textarea::placeholder { color: var(--texto-tenue); font-weight: 400; } textarea { resize: vertical; line-height: 1.5; } input[type="file"] { display: block; width: 100%; margin-top: 6px; font-size: 13.5px; color: var(--texto-suave); } input[type="file"]::file-selector-button { margin-right: 10px; padding: 9px 14px; border: 1px solid var(--vidrio-borde); border-radius: var(--radius-sm); background: var(--vidrio-alto); color: var(--texto); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } input[type="checkbox"] { accent-color: var(--verde); width: 18px; height: 18px; } /* ============================================================ Montos (seguimiento del pedido) ============================================================ */ .stat-label { font-size: 10.5px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 1px; } .stat-num { font-size: 21px; font-weight: 800; letter-spacing: -.5px; } .montos { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--vidrio-borde); } .montos > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vidrio-borde); } .montos > div:last-child { border-bottom: none; padding-bottom: 0; } .montos .stat-num { font-size: clamp(16px, 4.8vw, 19px); font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============================================================ Muestras de color ============================================================ */ .muestra { display: inline-block; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 2px 5px rgba(255, 255, 255, .28), inset 0 -3px 6px rgba(0, 0, 0, .35); } /* El transparente no es un color plano: se dibuja como vidrio */ .muestra.transparente { background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.06) 45%, rgba(255,255,255,.3)), repeating-conic-gradient(rgba(255,255,255,.14) 0% 25%, transparent 0% 50%) 50% / 9px 9px; } .muestra-grande { width: 40px; height: 40px; } .muestra-mini { width: 16px; height: 16px; } /* ============================================================ Ventana (la usa la tienda para el formulario del pedido) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 40; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); } .modal-box { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 92vh; background: var(--chrome); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--vidrio-borde); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--sombra-alta); overflow: hidden; animation: subir .22s ease; } @keyframes subir { from { transform: translate(-50%, 14px); opacity: 0; } } @media (min-width: 620px) { .modal-box { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: var(--radius-lg); } @keyframes subir { from { transform: translate(-50%, -46%); opacity: 0; } } } .modal-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 18px 20px 14px; border-bottom: 1px solid var(--vidrio-borde); } .modal-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; flex: 1; min-width: 0; } .modal-cerrar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; cursor: pointer; background: var(--vidrio); color: var(--texto-suave); border: 1px solid var(--vidrio-borde); } .modal-cerrar svg { width: 17px; height: 17px; } .modal-cerrar:hover { color: var(--texto); background: var(--vidrio-alto); } .modal-body { flex: 1; min-height: 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ============================================================ Aviso flotante ============================================================ */ .toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; background: rgba(240, 240, 240, .94); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); color: #101010; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); } .toast.error { background: rgba(255, 92, 92, .96); color: #2a0000; border-color: rgba(255, 255, 255, .3); } /* Sin doble-tap-zoom en lo interactivo */ a, button, .btn, label, .card, input, select, textarea { touch-action: manipulation; }