/* ============================================================
HALLOWEEN — capa temporal sobre styles.css
------------------------------------------------------------
Para QUITARLO: borra la línea de
index.html y catalogo.html. Nada más. Este archivo no modifica
styles.css, solo lo pisa mientras está enlazado.
La idea: la tienda de noche. El verde y el cian de la marca
siguen ahí, pero como fósforo encendido sobre oscuro, igual que
un rótulo de neón. El ámbar de calabaza es el único color nuevo.
============================================================ */
:root{
/* Marca, en versión nocturna */
--verde: #9FE33F; /* el lima de siempre, subido a fósforo */
--verde-osc: #76B82A;
--cian: #22C8FF;
--azul: #7B4BD8; /* el azul cede el sitio al morado */
--azul-osc: #1A1030;
--turquesa: #17C7B4;
/* Calabaza: el acento de la temporada */
--calabaza: #FF8A1F;
--calabaza-2:#FFB45C;
/* Neutros de noche */
--tinta: #EDE6F7; /* ahora es el color del TEXTO */
--gris: #B6A9CE;
--gris-2: #9A8ABF; /* subido para que el texto pequeno pase 4.5:1 */
--nube: #1F1638;
--nube-2: #2A1F4A;
--blanco: #1A1230; /* el "papel" pasa a ser el panel oscuro */
--linea: #352A57;
--t-verde: #23311A;
--t-cian: #142C3C;
--t-azul: #271A43;
--t-turquesa: #13302E;
--t-tinta: #241B3C;
--sombra: 0 18px 40px -24px rgba(0,0,0,.8);
--sombra-alta: 0 26px 60px -28px rgba(0,0,0,.9);
--glow: 0 0 0 4px rgba(159,227,63,.18);
}
body{ background:#0D0A17; color:var(--tinta); }
/* Fondo general: un velo morado muy tenue, para que el negro no sea plano */
body::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(ellipse 70% 50% at 15% 0%, rgba(123,75,216,.20), transparent 60%),
radial-gradient(ellipse 60% 45% at 92% 12%, rgba(255,138,31,.11), transparent 60%);
}
body > *{ position:relative; z-index:1; }
/* ---------- Cabecera ---------- */
.topbar{
background:linear-gradient(90deg, #1A1030, #4A2270 40%, #B5541A 75%, var(--calabaza));
}
header.site{
background:rgba(13,10,23,.90);
border-bottom:1px solid var(--linea);
}
.buscador form{ background:#241B3C; border-color:var(--linea); }
.buscador input{ color:var(--tinta); }
.buscador input::placeholder{ color:var(--gris-2); }
.logo__txt span{ color:var(--verde); }
/* ---------- El rótulo: aquí es donde se gasta el efecto ----------
El sitio ya ponía un degradado en el del titular. Aquí pasa a
ser un tubo de neón encendido, con su halo y su parpadeo de arranque. */
.hero h1 em{
background:none; -webkit-background-clip:initial; background-clip:initial;
color:#E8FFC9;
text-shadow:
0 0 6px rgba(159,227,63,.95),
0 0 18px rgba(159,227,63,.75),
0 0 40px rgba(118,184,42,.55),
0 0 80px rgba(118,184,42,.35);
animation:neon-arranque 7s steps(1) 1;
}
@keyframes neon-arranque{
0%, 4% { opacity:.25; }
5%, 7% { opacity:1; }
8%, 10% { opacity:.3; }
11%, 16% { opacity:1; }
17% { opacity:.45; }
18%, 100%{ opacity:1; }
}
/* ---------- Portada ---------- */
.hero{ background:transparent; }
.hero::before{
opacity:.5;
background-image:
linear-gradient(rgba(159,227,63,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(159,227,63,.11) 1px, transparent 1px);
}
.blob--1{ background:#7B4BD8; opacity:.34; }
.blob--2{ background:var(--calabaza); opacity:.22; }
.blob--3{ background:var(--turquesa); opacity:.2; }
.hero__lead{ color:var(--gris); }
.hero__art svg{ filter:drop-shadow(0 26px 46px rgba(123,75,216,.4)); }
.facts div{ background:#201739; border-color:var(--linea); }
.facts div:nth-child(2)::after{ background:var(--calabaza); }
.facts div:nth-child(1) strong{ color:var(--verde); }
.facts div:nth-child(2) strong{ color:var(--calabaza); }
.facts div:nth-child(3) strong{ color:var(--cian); }
.facts span{ color:var(--gris-2); }
/* ---------- Botones ---------- */
.btn--solid{ /* la llamada principal, en calabaza */
background:linear-gradient(100deg, var(--calabaza), #FF6A00);
color:#2A1400; border-color:transparent;
}
.btn--solid:hover{ box-shadow:0 12px 32px -10px rgba(255,138,31,.7); }
.btn--verde{ /* WhatsApp se queda verde a propósito */
background:linear-gradient(100deg, var(--verde), #6FB81F); color:#16250A;
}
.btn--banner{ background:#fff; color:#2A1400; }
.btn--line{ background:#241B3C; border-color:var(--linea); color:var(--tinta); }
.btn--line:hover{ border-color:var(--verde); color:var(--verde); }
.btn--ghost{ border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.12); }
/* El logo lleva un 24% de trazos oscuros: sobre fondo de noche se perdía.
Un halo claro detrás lo despega sin tocar el archivo del logo. */
.logo__img{ filter:drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 0 7px rgba(255,255,255,.45)); }
/* ---------- Secciones y tarjetas ---------- */
.sec--nube{ background:var(--nube); }
.card, .caja, .panel{ background:#201739; border-color:var(--linea); }
/* Las fotos de producto conservan fondo claro a propósito: muchos
móviles son negros y sobre oscuro desaparecerían. */
.prod{ background:#201739; border-color:var(--linea); }
.prod__img{ background:#F6F2FA; }
.prod h3{ color:var(--tinta); }
.prod p{ color:var(--gris); }
.prod__cat{ background:var(--t-azul); color:var(--verde); }
.prod:hover .prod__img::after{ background:rgba(13,10,23,.88); }
.badge--out{ background:#0D0A17; color:#fff; }
.ficha__foto{ background:#F6F2FA; border-color:var(--linea); }
.tirafotos__b{ background:#F6F2FA; border-color:var(--linea); }
.banner__foto img{ filter:drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
/* Carrusel: degradados de noche, pero sin llegar a negro, para que
un móvil oscuro siga recortándose contra el fondo. */
.banner--1{ background:linear-gradient(120deg, #2B1550, #6B2FA8 55%, #A24BD8); }
.banner--2{ background:linear-gradient(120deg, #3A1A08, #A2500F 45%, var(--calabaza)); }
.banner--3{ background:linear-gradient(120deg, #10203A, #2E6AA8 55%, var(--cian)); }
.banner--4{ background:linear-gradient(120deg, #4A2270, #B5541A 60%, var(--calabaza-2)); }
/* ---------- Formularios ----------
Los campos tenían casi el mismo color que su tarjeta y el formulario
parecía vacío. Van más oscuros que el panel y con borde visible. */
input, textarea, select{
background:#120D21; color:var(--tinta); border:1.5px solid #3D2F66;
}
input:focus, textarea:focus, select:focus{ border-color:var(--verde); }
input::placeholder, textarea::placeholder{ color:var(--gris-2); }
.buscador form{ background:#241B3C; border-color:var(--linea); }
.buscador form input{ background:transparent; border:0; }
.variantes button, .colores button{ background:#241B3C; border-color:var(--linea); color:var(--gris); }
.variantes button[aria-pressed="true"], .colores button[aria-pressed="true"]{
background:var(--t-verde); border-color:var(--verde); color:var(--verde);
}
/* ---------- Pie ---------- */
footer.site{ background:#120D21; color:#A294C4; border-top:1px solid var(--linea); }
footer.site h4{ color:var(--verde); }
footer.site a:hover{ color:var(--calabaza); }
/* ---------- Accesibilidad ---------- */
:focus-visible{ outline:3px solid var(--verde); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
.hero h1 em{ animation:none; }
.blob{ animation:none; }
}
/* ============================================================
DECORACIÓN
Las figuras las dibuja halloween.js en SVG. Aquí van su sitio,
su color y su movimiento. Toda la capa ignora el ratón, así que
ninguna figura puede taparte un botón ni el carrito.
============================================================ */
.hw-capa{
position:fixed; inset:0; z-index:2; overflow:hidden;
pointer-events:none; contain:strict;
}
.hw-capa svg, .hero svg.hw-nada{ display:block; width:100%; height:100%; }
.hw-fantasma, .hw-murcielago, .hw-telarana, .hw-calabaza, .hw-arana{ pointer-events:none; }
.hw-fantasma svg, .hw-murcielago svg, .hw-telarana svg,
.hw-calabaza svg, .hw-arana svg{ width:100%; height:100%; display:block; overflow:visible; }
/* ---------- Fantasmas ---------- */
.hw-fantasma{ position:absolute; opacity:.5; }
.hw-fantasma .hw-cuerpo{
fill:#DDF3C4;
filter:drop-shadow(0 0 10px rgba(159,227,63,.5)) drop-shadow(0 0 26px rgba(159,227,63,.3));
}
.hw-fantasma .hw-ojo, .hw-fantasma .hw-boca{ fill:#2A1F4A; }
.hw-f1{ width:72px; height:90px; left:3%; top:22%;
animation:hw-vagar-1 19s ease-in-out infinite; }
.hw-f2{ width:54px; height:68px; right:7%; top:30%; opacity:.4;
animation:hw-vagar-2 24s ease-in-out infinite; }
.hw-f3{ width:44px; height:55px; left:9%; bottom:34%; opacity:.34;
animation:hw-vagar-3 21s ease-in-out 2s infinite; }
/* Cada uno da su propia vuelta, para que no vayan todos a la vez */
@keyframes hw-vagar-1{
0%,100%{ transform:translate3d(0,0,0) rotate(-4deg); }
20% { transform:translate3d(68px,-46px,0) rotate(4deg); }
40% { transform:translate3d(132px,14px,0) rotate(-3deg); }
62% { transform:translate3d(74px,64px,0) rotate(5deg); }
82% { transform:translate3d(-18px,34px,0) rotate(-2deg); }
}
@keyframes hw-vagar-2{
0%,100%{ transform:translate3d(0,0,0) rotate(3deg); }
24% { transform:translate3d(-86px,38px,0) rotate(-5deg); }
48% { transform:translate3d(-128px,-30px,0) rotate(2deg); }
70% { transform:translate3d(-52px,-72px,0) rotate(-4deg); }
88% { transform:translate3d(16px,-24px,0) rotate(4deg); }
}
@keyframes hw-vagar-3{
0%,100%{ transform:translate3d(0,0,0) rotate(-2deg); }
26% { transform:translate3d(58px,-56px,0) rotate(5deg); }
52% { transform:translate3d(108px,-8px,0) rotate(-4deg); }
76% { transform:translate3d(44px,48px,0) rotate(3deg); }
}
/* El que acompaña al puntero. Lo coloca el guion, así que aquí solo
va su aspecto: aparece al mover el ratón y se apaga cuando pasas
por encima de algo pulsable, para no estorbar. */
.hw-sigue{
width:50px; height:62px; top:0; left:0; opacity:0;
transition:opacity .45s ease;
will-change:transform;
}
.hw-sigue--on{ opacity:.42; }
.hw-sigue--tenue{ opacity:.12; }
/* ---------- Murciélagos ---------- */
.hw-murcielago{ position:absolute; width:58px; height:24px; opacity:.55; }
.hw-murcielago .hw-ala path, .hw-murcielago .hw-torso, .hw-murcielago .hw-oreja{
fill:#6E4BB0;
}
.hw-murcielago .hw-ala{ transform-origin:70px 28px; animation:hw-aletear .5s ease-in-out infinite; }
.hw-murcielago .hw-ala--der{ animation-delay:.05s; }
@keyframes hw-aletear{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.45); } }
.hw-m1{ top:14%; animation:hw-cruzar 26s linear infinite; }
.hw-m2{ top:40%; width:40px; height:17px; opacity:.4; animation:hw-cruzar 38s linear 6s infinite; }
@keyframes hw-cruzar{
0% { transform:translate(-12vw, 0); }
25% { transform:translate(28vw, -40px); }
50% { transform:translate(58vw, 20px); }
75% { transform:translate(84vw, -30px); }
100%{ transform:translate(114vw, 10px); }
}
/* ---------- Telarañas ---------- */
.hw-telarana{ position:absolute; width:150px; height:150px; opacity:.3; z-index:3; }
.hw-telarana .hw-hilo path{ fill:none; stroke:#C9B8E8; stroke-width:1.6; stroke-linecap:round; }
.hw-tel-izq{ top:0; left:0; }
.hw-tel-der{ top:0; right:0; transform:scaleX(-1); }
@media(max-width:860px){ .hw-tel-der{ display:none; } }
/* ---------- Calabazas ---------- */
.hw-calabaza{ position:absolute; width:104px; height:94px; z-index:3; }
.hw-calabaza .hw-piel{ fill:#F07A14; }
.hw-calabaza .hw-veta{ fill:none; stroke:#C25B07; stroke-width:3.5; stroke-linecap:round; }
.hw-calabaza .hw-rabo{ fill:#6B8F2E; }
.hw-calabaza .hw-hoja{ fill:#85B33A; }
.hw-calabaza .hw-cara path{
fill:#FFE49B;
filter:drop-shadow(0 0 7px rgba(255,196,60,.95)) drop-shadow(0 0 20px rgba(255,150,20,.75));
animation:hw-vela 3.4s ease-in-out infinite; /* la vela de dentro */
}
@keyframes hw-vela{
0%,100%{ opacity:1; }
18% { opacity:.72; }
26% { opacity:1; }
54% { opacity:.8; }
62% { opacity:1; }
80% { opacity:.66; }
}
.hw-c1{ left:2.5%; bottom:7%; animation:hw-asomar 7s ease-in-out infinite; }
.hw-c2{ right:4%; bottom:14%; width:74px; height:67px;
animation:hw-asomar 9s ease-in-out 1.5s infinite; }
.hw-c-pie{ right:4%; top:-34px; width:62px; height:56px; transform:rotate(-8deg); }
@keyframes hw-asomar{
0%,100%{ transform:translateY(0) rotate(-2deg); }
50% { transform:translateY(-9px) rotate(2deg); }
}
@media(max-width:860px){ .hw-c2{ display:none; } }
/* ---------- Araña colgando ---------- */
.hw-arana{ position:absolute; top:0; left:66%; width:44px; height:112px; z-index:3; opacity:.75;
transform-origin:top center; animation:hw-bajar 9s ease-in-out infinite; }
.hw-arana .hw-hilo-arana{ fill:none; stroke:#C9B8E8; stroke-width:1.4; }
.hw-arana .hw-patas path{ fill:none; stroke:#2B1B4A; stroke-width:3.4; stroke-linecap:round; }
.hw-arana .hw-cuerpo-arana{ fill:#241238; }
.hw-arana .hw-ojo-arana{ fill:#FF8A1F; }
@keyframes hw-bajar{
0%,100%{ transform:translateY(-26px) rotate(-2deg); }
50% { transform:translateY(16px) rotate(2deg); }
}
@media(max-width:700px){ .hw-arana{ display:none; } }
/* En pantallas pequeñas se queda lo justo: un fantasma y una calabaza */
@media(max-width:620px){
.hw-f2, .hw-f3, .hw-murcielago{ display:none; }
.hw-f1{ width:52px; height:65px; opacity:.4; }
.hw-calabaza.hw-c1{ width:72px; height:65px; }
}
/* Quien tenga activado reducir animaciones ve la decoración quieta */
@media (prefers-reduced-motion: reduce){
.hw-fantasma, .hw-murcielago, .hw-calabaza, .hw-arana,
.hw-murcielago .hw-ala, .hw-calabaza .hw-cara path{ animation:none; }
.hw-m1{ transform:translate(20vw,0); }
.hw-m2{ transform:translate(66vw,0); }
}