/* ═══════════════════════════════════════════════════════════ INTIS Tech — hoja de estilos Dos temas: grafito (predeterminado) y sillar (claro). Las variables cambian de valor según [data-tema] en . ═══════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* ── Movimiento: igual en los dos temas ── */ --paso:clamp(60px,8vw,104px); --dur-rapida:130ms; --dur-base:240ms; --dur-lenta:420ms; --sale:cubic-bezier(.16,1,.3,1); --entra:cubic-bezier(.4,0,1,1); --entre:cubic-bezier(.4,0,.2,1); /* El oro de relleno y el texto que va ENCIMA no cambian con el tema: un botón dorado necesita texto oscuro siempre. */ --oro:#F0B429; --oro-claro:#FFC93F; --sobre-oro:#2A1E02; /* Logotipo: dorado en ambos temas. Un nombre de marca es imagen, no texto de lectura, y está exento del requisito de contraste. */ --marca-oro:#F0B429; } /* ══════════ TEMA OSCURO (el predeterminado) ══════════ */ :root, [data-tema="oscuro"]{ color-scheme:dark; --noche:#12161C; /* grafito */ --piedra:#1B212A; /* superficies elevadas */ --piedra-alta:#232A35; /* al pasar el cursor */ --borde:#2C3542; --tiza:#EAEEF5; /* texto principal */ --niebla:#8B95A5; /* texto secundario */ --apagado:#B4BCD2; /* listas y detalles */ /* Sobre fondo oscuro el oro se lee perfecto como texto */ --oro-hondo:#F0B429; --oro-tenue:rgba(240,180,41,.13); --destacado:#F0B429; --velo:rgba(18,22,28,.87); /* fondo del encabezado */ --rayo-fuerte:.18; /* opacidad de los rayos del sol */ --rayo-suave:.09; --halo:.55; --sombra:none; } /* ══════════ TEMA CLARO ══════════ */ [data-tema="claro"]{ color-scheme:light; /* Blanco puro, igual que la billetera. Con las tarjetas también blancas no se distinguirían del fondo, así que las superficies llevan un gris muy suave más borde: la separación por color sola da 1.08 de contraste, que a plena luz no se ve. */ --noche:#FFFFFF; --piedra:#F4F6F9; --piedra-alta:#EDF1F6; --borde:#E1E5EC; --tiza:#12182B; --niebla:#5A6480; --apagado:#3C4560; /* Aquí está el punto delicado: el oro #F0B429 sobre fondo claro da 1.7 de contraste, ilegible. Cuando el dorado tiene que ser TEXTO, pasa a bronce, que da 4.9 y sigue leyéndose como oro. */ --oro-hondo:#8A6410; --oro-tenue:rgba(240,180,41,.20); --velo:rgba(255,255,255,.9); /* Sobre blanco los rayos dorados ensucian: menos presencia. */ --rayo-fuerte:.16; --rayo-suave:.08; --halo:.22; /* En oscuro la elevación se lee por el color de la superficie; en claro hace falta una sombra o todo se ve plano. */ --sombra:0 1px 2px rgba(18,24,43,.05), 0 4px 14px rgba(18,24,43,.05); } html{scroll-behavior:smooth} body{ background:var(--noche);color:var(--tiza); /* Solo fondo y texto hacen transición: poner "all" haría que cada borde y sombra de la página se anime a la vez y se vea pesado. */ transition:background-color var(--dur-base) var(--entre), color var(--dur-base) var(--entre); font-family:'Inter Tight',system-ui,sans-serif; font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } .env{width:min(1160px,100% - 44px);margin-inline:auto} .display{ font-family:'Archivo',system-ui,sans-serif; font-variation-settings:'wdth' 112,'wght' 800; letter-spacing:-.035em;line-height:.99; } /* Los datos técnicos y los precios en monoespaciada: la página habla el idioma de una ficha técnica, no el de un folleto */ .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums} /* ════════ GRECA ESCALONADA ════════ Geometría andina real. Separa las secciones y es la firma de la página. */ .greca{display:block;height:13px;width:100%;opacity:.55} .hairline{height:1px;background:linear-gradient(90deg,transparent,var(--borde) 14%,var(--borde) 86%,transparent)} /* ════════ ENCABEZADO ════════ */ header{ position:sticky;top:0;z-index:60; background:var(--velo); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--entre); } header.fijo{border-bottom-color:var(--borde)} .nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px} .marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0} .marca img{width:34px;height:34px;object-fit:contain} .marca b{ font-family:'Archivo';font-variation-settings:'wdth' 105,'wght' 800; font-size:16.5px;letter-spacing:-.01em; } /* Logotipo: dorado en ambos temas. Un nombre de marca es imagen, no texto de lectura. */ .marca b i{font-style:normal;color:var(--marca-oro)} .menu{display:flex;gap:27px} .menu a{ color:var(--niebla);text-decoration:none;font-size:14px;font-weight:500; position:relative;padding:4px 0;transition:color var(--dur-rapida) var(--entre); } .menu a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--oro);transform:scaleX(0);transform-origin:left; transition:transform var(--dur-base) var(--sale); } .wa-nav{ display:inline-flex;align-items:center;gap:8px;flex-shrink:0; background:var(--oro);color:var(--sobre-oro); padding:10px 17px;border-radius:8px; font-weight:700;font-size:13.5px;text-decoration:none; transition:background var(--dur-rapida) var(--entre),transform var(--dur-rapida) var(--sale); } @media(hover:hover){.wa-nav:hover{background:var(--oro-claro);transform:translateY(-1px)}} .tema{ display:grid;place-items:center;flex-shrink:0; width:38px;height:38px;border-radius:10px; background:none;border:1px solid var(--borde); color:var(--tiza);cursor:pointer;font-size:18px; transition:border-color var(--dur-rapida) var(--entre), color var(--dur-rapida) var(--entre); } .tema i{transition:rotate var(--dur-base) var(--sale),opacity var(--dur-rapida)} /* Solo se ve el ícono del tema al que vas a cambiar, no el actual: mostrar los dos confunde sobre cuál está activo. */ .tema .sol{display:none} [data-tema="claro"] .tema .sol{display:block} [data-tema="claro"] .tema .luna{display:none} .hamb{display:none;background:none;border:none;color:var(--tiza);font-size:25px;cursor:pointer;padding:4px} /* ════════ PORTADA ════════ */ .portada{position:relative;padding:clamp(52px,8vw,96px) 0 clamp(44px,6vw,80px);overflow:hidden} /* Los rayos van centrados en la moneda, no flotando aparte: antes el logo aparecía fuera de su propio sol. */ .sol-fondo{ position:absolute;top:50%;left:50%;translate:-50% -50%; width:230%;aspect-ratio:1;pointer-events:none;z-index:0; } .portada-rejilla{position:relative;z-index:2;display:grid;grid-template-columns:1.32fr .68fr;gap:38px;align-items:center} .lugar{ display:inline-flex;align-items:center;gap:10px; font-family:'JetBrains Mono',monospace; font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--niebla);margin-bottom:24px; } .lugar::before{content:"";width:26px;height:1px;background:var(--oro)} h1{font-size:clamp(38px,7.2vw,84px);margin-bottom:24px} h1 span{display:block} h1 .oro{color:var(--destacado)} /* La segunda línea va más angosta: crea tensión y rompe el bloque de texto perfectamente rectangular */ h1 .angosta{font-variation-settings:'wdth' 94,'wght' 700} .lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--niebla);max-width:50ch;margin-bottom:30px} .lead b{color:var(--tiza);font-weight:600} .acciones{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:36px} .btn{ display:inline-flex;align-items:center;gap:9px; padding:14px 23px;border-radius:9px; font-weight:600;font-size:14.5px;text-decoration:none; transition:transform var(--dur-rapida) var(--sale),background var(--dur-rapida) var(--entre),border-color var(--dur-rapida) var(--entre); } .btn i{font-size:18px} .btn-oro{background:var(--oro);color:var(--sobre-oro);font-weight:700} .btn-borde{border:1px solid var(--borde);color:var(--tiza)} /* Datos operativos como tira de ficha técnica */ .tira{display:flex;flex-wrap:wrap;border-top:1px solid var(--borde);padding-top:19px} .tira > div{padding-right:25px;margin-right:25px;border-right:1px solid var(--borde)} .tira > div:last-child{border-right:none;margin-right:0;padding-right:0} .tira dt{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--niebla);margin-bottom:5px} .tira dd{font-size:13.8px;font-weight:600} /* ── La moneda gira en 3D: es la pieza que se recuerda ── El escenario tiene medida fija y cuadrada. Antes los anillos vivían en una celda de rejilla más ancha que alta y salían ovalados. */ .medalla{display:grid;place-items:center;perspective:1400px;position:relative;isolation:isolate} /* Halo que respira detrás de la moneda. El desenfoque es ESTÁTICO y solo se anima la opacidad: animar filter:blur() sobre un área grande hunde los cuadros por segundo en celulares. */ .medalla::before{ content:"";position:absolute;inset:14%;z-index:-1;border-radius:50%; background:radial-gradient(circle,rgba(240,180,41,.30) 0%,transparent 68%); filter:blur(46px);opacity:var(--halo); animation:respirar 7s var(--entre) infinite alternate; } @keyframes respirar{to{opacity:calc(var(--halo) * 1.5);scale:1.07}} .escena{ position:relative; width:min(282px,74vw);height:min(282px,74vw); /* cuadrado exacto */ display:grid;place-items:center; transform-style:preserve-3d; transition:transform var(--dur-lenta) var(--sale); } .moneda{ width:100%;height:100%;position:relative; transform-style:preserve-3d; animation:girar-moneda 9s ease-in-out infinite; } .cara{ position:absolute;inset:0; backface-visibility:hidden;-webkit-backface-visibility:hidden; display:grid;place-items:center; } .cara img{width:100%;height:100%;aspect-ratio:1;object-fit:contain; filter:drop-shadow(0 22px 62px rgba(240,180,41,.28))} /* El reverso: la misma cara volteada, como una moneda real vista desde atrás */ .cara-atras{transform:rotateY(180deg)} @keyframes girar-moneda{ 0%,100%{transform:rotateY(-26deg)} 50% {transform:rotateY(26deg)} } /* Los anillos NO giran en 3D con la moneda: se quedan planos de frente, como una órbita alrededor. Si giraran también, se verían aplastados. */ .anillo{ position:absolute;top:50%;left:50%; width:104%;aspect-ratio:1;translate:-50% -50%; border:1px solid var(--oro-tenue);border-radius:50%; animation:rotar 54s linear infinite;pointer-events:none; } .anillo:nth-of-type(2){width:124%;border-style:dashed;animation-duration:82s;animation-direction:reverse;opacity:.5} @keyframes rotar{to{rotate:360deg}} /* ════════ SECCIONES ════════ */ section{padding:var(--paso) 0} .rotulo{ font-family:'JetBrains Mono',monospace; font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--niebla);margin-bottom:13px; } h2{font-size:clamp(26px,4.1vw,45px);margin-bottom:15px} h2 .oro{color:var(--destacado)} .intro{font-size:16px;color:var(--niebla);max-width:56ch;margin-bottom:48px} /* ── Las tres líneas. Sin numerar: no son una secuencia. ── */ .lineas{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:15px;overflow:hiddenbox-shadow:var(--sombra);} .linea{ background:var(--noche);padding:34px 32px; display:grid;grid-template-columns:auto 1fr 1.1fr;gap:26px;align-items:start; transition:background var(--dur-base) var(--entre); } .linea-ico{ width:45px;height:45px;border-radius:11px; background:var(--oro-tenue);border:1px solid var(--oro-tenue); display:grid;place-items:center; } .linea-ico i{font-size:22px;color:var(--oro)} .linea h3{ font-family:'Archivo';font-variation-settings:'wdth' 108,'wght' 700; font-size:22px;letter-spacing:-.02em;margin-bottom:7px; } .linea h3 + p{color:var(--niebla);font-size:14.3px;max-width:30ch} .linea ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px} .linea li{display:flex;gap:9px;font-size:13.8px;color:var(--apagado);line-height:1.4} .linea li i{color:var(--destacado);font-size:13px;margin-top:3px;flex-shrink:0} /* ════════ FOTOS ════════ Las fotos son de trabajos reales, tomadas en el taller. Llevan un tratamiento común (menos saturación, más contraste) para que se vean como un conjunto y no como capturas sueltas de WhatsApp. */ .foto{ position:relative;overflow:hidden;border-radius:14px; background:var(--piedra); } .foto img{ display:block;width:100%;height:100%;object-fit:cover; transition:scale var(--dur-lenta) var(--sale); } /* Velo que funde la foto con el fondo oscuro del sitio */ .foto::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(8,12,24,.75),rgba(8,12,24,.05) 55%); } .foto-pie{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:18px 20px; } .foto-pie b{ display:block;font-family:'Archivo'; font-variation-settings:'wdth' 106,'wght' 700; font-size:16px;letter-spacing:-.01em;margin-bottom:3px; } .foto-pie span{font-size:12.5px;color:var(--apagado)} /* Mosaico de trabajo: una foto grande y dos chicas, sin cuadrícula perfecta — la simetría exacta es lo que hace ver una web plantilla */ .mosaico{ display:grid;grid-template-columns:1.5fr 1fr; grid-template-rows:repeat(2,minmax(190px,1fr)); gap:14px;margin-top:44px; } .mosaico .foto:first-child{grid-row:1/3} /* La foto que acompaña a las tres líneas de negocio */ .linea-foto{ grid-column:1/-1;margin-top:22px;border-radius:12px;overflow:hidden; max-height:220px; } .linea-foto img{width:100%;height:220px;object-fit:cover;display:block;opacity:.88} /* ════════ PRECIOS COMO FICHA TÉCNICA ════════ Catorce tarjetas idénticas es la respuesta de plantilla. Una tienda de tecnología habla en fichas técnicas: se leen de un vistazo y los precios quedan alineados para compararlos. */ .precios-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:30px} .pestanas{display:flex;gap:2px;background:var(--piedra);border:1px solid var(--borde);border-radius:10px;padding:3pxbox-shadow:var(--sombra);} .pes{ background:none;border:none;color:var(--niebla);cursor:pointer; font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500; padding:9px 15px;border-radius:7px;white-space:nowrap; transition:background var(--dur-rapida) var(--entre), color var(--dur-rapida) var(--entre); } .pes[aria-selected="true"]{background:var(--oro);color:var(--sobre-oro);font-weight:700} .ficha{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .serv{ display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:start; background:var(--piedra);border:1px solid var(--borde);border-radius:14px; padding:22px 24px;text-decoration:none;color:inherit; transition:border-color var(--dur-base) var(--entre),transform var(--dur-base) var(--sale),background var(--dur-base) var(--entre); box-shadow:var(--sombra);} .serv-t{font-size:16.5px;font-weight:600;line-height:1.3} .serv-p{ font-family:'JetBrains Mono',monospace;font-weight:700; font-size:22px;color:var(--destacado);font-variant-numeric:tabular-nums; white-space:nowrap;line-height:1.1; } .serv-p sup{font-size:9.5px;font-weight:500;color:var(--niebla); letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:3px} .serv-d{grid-column:1/-1;font-size:13.2px;color:var(--niebla);line-height:1.5} .serv-ir{ grid-column:1/-1;display:inline-flex;align-items:center;gap:6px; font-size:12.5px;color:var(--destacado);font-weight:600;margin-top:4px; opacity:0;translate:-6px 0;transition:opacity var(--dur-base) var(--sale),translate var(--dur-base) var(--sale); } .grupo{display:none} .grupo.abierto{display:block} .nota{ display:flex;gap:12px;align-items:flex-start;margin-top:24px; padding:15px 18px;border:1px solid var(--borde);border-radius:12px; background:var(--piedra); font-size:13.3px;color:var(--niebla);line-height:1.55; box-shadow:var(--sombra);} .nota i{font-size:17px;color:var(--destacado);flex-shrink:0;margin-top:1px} .nota b{color:var(--tiza);font-weight:600} /* ════════ TRABAJOS ════════ */ .obras{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:15px;overflow:hiddenbox-shadow:var(--sombra);} .obra{background:var(--noche);padding:32px 29px;transition:background .3s} .obra-eti{ font-family:'JetBrains Mono',monospace;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--niebla); display:block;margin-bottom:12px; } .obra h3{ font-family:'Archivo';font-variation-settings:'wdth' 108,'wght' 700; font-size:20px;letter-spacing:-.02em;margin-bottom:9px; } .obra p{color:var(--niebla);font-size:14px;line-height:1.6;margin-bottom:15px} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{ font-family:'JetBrains Mono',monospace;font-size:10.5px; color:var(--niebla);border:1px solid var(--borde);border-radius:5px;padding:4px 9px; } /* ════════ PROCESO — aquí SÍ hay secuencia, por eso van numeradas ════════ */ .proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .eta{padding-top:24px;border-top:1px solid var(--borde);transition:border-color .3s} .eta-n{ font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700; color:var(--destacado);display:block;margin-bottom:11px;letter-spacing:.06em; } .eta h4{font-size:16px;font-weight:600;margin-bottom:6px} .eta p{color:var(--niebla);font-size:13.8px;line-height:1.55} /* ════════ BILLETERA ════════ */ .wallet{ border:1px solid var(--borde);border-radius:19px;overflow:hidden; display:grid;grid-template-columns:1.22fr .78fr; background:linear-gradient(135deg,var(--piedra),var(--noche)); box-shadow:var(--sombra);} .wallet-txt{padding:42px 38px} .wallet-txt h2{font-size:clamp(24px,3.1vw,35px);margin-bottom:13px} .wallet-txt > p{color:var(--niebla);font-size:15px;margin-bottom:22px;max-width:44ch} .wallet-lista{list-style:none;display:flex;flex-direction:column;gap:11px} .wallet-lista li{display:flex;gap:11px;align-items:center;font-size:14.2px} .wallet-lista i{color:var(--destacado);font-size:19px;flex-shrink:0} .wallet-vis{display:grid;place-items:center;padding:32px;background:rgba(240,180,41,.04)} .wallet-vis img{ width:min(158px,58%);aspect-ratio:1;height:auto;object-fit:contain; opacity:.92;filter:drop-shadow(0 16px 42px rgba(240,180,41,.22)); } /* ════════ CIERRE ════════ */ .cierre{text-align:center;padding-bottom:calc(var(--paso) * .75)} .cierre .intro{margin:0 auto 32px} .vias{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .horario{ display:inline-flex;align-items:center;gap:11px; font-family:'JetBrains Mono',monospace;font-size:12.5px; border:1px solid var(--borde);border-radius:9px;padding:13px 19px;color:var(--niebla); } .horario i{color:var(--destacado);font-size:17px} .horario b{color:var(--tiza)} footer{border-top:1px solid var(--borde);padding:30px 0} .pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.8px;color:var(--niebla)} .pie a{color:var(--niebla);text-decoration:none} /* ════════ FLOTANTE ════════ */ .flota{ position:fixed;right:20px;bottom:20px;z-index:70; display:flex;align-items:center;gap:9px; background:#25D366;color:#052E16; padding:13px 19px;border-radius:999px; font-weight:700;font-size:14px;text-decoration:none; box-shadow:0 10px 32px rgba(37,211,102,.3); translate:0 88px;opacity:0; transition:translate var(--dur-lenta) var(--sale),opacity var(--dur-base) var(--sale); } .flota.se-ve{translate:0;opacity:1} .flota i{font-size:20px} /* Los estados de hover van juntos y envueltos: en pantalla táctil el hover se queda pegado después de tocar y el elemento parece trabado hasta que tocas otra cosa. */ @media(hover:hover) and (pointer:fine){ .menu a:hover{color:var(--tiza)} .menu a:hover::after{transform:scaleX(1)} .btn-oro:hover{background:var(--oro-claro);transform:translateY(-2px)} .btn-borde:hover{border-color:var(--oro);transform:translateY(-2px)} .linea:hover{background:var(--piedra-alta)} .pes:hover{color:var(--tiza)} .serv:hover{border-color:var(--oro);transform:translateY(-3px);background:var(--piedra-alta)} .serv:hover .serv-ir{opacity:1;translate:0} .obra:hover{background:var(--piedra-alta)} .eta:hover{border-top-color:var(--oro)} .pie a:hover{color:var(--oro)} .foto:hover img{scale:1.04} .fila-btn:hover{background:var(--oro);border-color:var(--oro);color:var(--sobre-oro)} } /* En táctil, el mismo aviso al tocar: sin hover hace falta feedback */ .btn:active,.wa-nav:active{transform:translateY(1px) scale(.985)} .serv:active{transform:scale(.99)} .rev{opacity:0;translate:0 20px;transition:opacity var(--dur-lenta) var(--sale),translate var(--dur-lenta) var(--sale)} .rev.ok{opacity:1;translate:0} :focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:4px} /* En las tarjetas de precio el foco necesita más margen: el borde propio de la tarjeta se come el contorno */ .serv:focus-visible{outline-offset:4px} /* ════════ PANTALLAS CHICAS ════════ */ @media(max-width:960px){ .portada-rejilla{grid-template-columns:1fr;gap:32px} .medalla{order:-1;max-width:220px;margin-inline:auto} .sol-fondo{right:50%;translate:50% -50%;opacity:.5} .linea{grid-template-columns:1fr;gap:17px} .linea ul{grid-template-columns:1fr} .obras{grid-template-columns:1fr} .mosaico{grid-template-columns:1fr;grid-template-rows:none} .mosaico .foto:first-child{grid-row:auto} .mosaico .foto{aspect-ratio:4/3} .proceso{grid-template-columns:1fr 1fr;gap:20px} .wallet{grid-template-columns:1fr} .wallet-vis{padding:26px;order:-1} .wallet-vis img{width:118px;aspect-ratio:1} .menu{display:none} .hamb{display:block} .wa-nav span{display:none} .menu.abre{ display:flex;flex-direction:column;gap:0; position:absolute;top:72px;left:0;right:0; background:var(--piedra);border-bottom:1px solid var(--borde); padding:6px 22px 16px; } .menu.abre a{padding:14px 0;font-size:15.5px;border-bottom:1px solid var(--borde)} .menu.abre a::after{display:none} } @media(max-width:620px){ .proceso{grid-template-columns:1fr} .acciones{flex-direction:column;align-items:stretch} .btn{justify-content:center} .ficha{grid-template-columns:1fr} .serv{padding:19px 20px} .serv-p{font-size:20px} .tira > div{border-right:none;padding-right:0;margin-right:0;min-width:47%;margin-bottom:13px} .wallet-txt{padding:30px 25px} .flota span{display:none} .flota{padding:15px} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } /* Sin giro, la moneda se queda de frente */ .moneda{transform:none!important} .rev{opacity:1;translate:0} }