Preview de mixed.css
/* MIXED CSS PACK */
/* Template: asdsadasds.com.ar/index.html */
/* Template mtime: 2026-03-30 15:25:35 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
/* Only change the font stack; keep everything else intact */
body{font-family:'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;}
h1,h2,h3,h4,h5,h6,.brand,.navbar-brand{font-family:'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;}
/* Ícono junto a la marca */
.navbar .brand-icon{
height: 28px; width: 28px; /* mantiene proporción con width/height del tag */
object-fit: contain; display: block;
}
/* Ajuste responsive si querés un poco más chico en phone */
@media (max-width: 576px){
.navbar .brand-icon{ height: 24px; width: 24px; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
.portrait{ aspect-ratio: 4 / 5; }
.portrait img{ height: 100%; width: 100%; object-fit: cover; }
/* ===== INLINE <style> BLOCK #3 ===== */
/* ===== Ticker ===== */
.ticker-wrap{
width: 100vw; margin-left: 50%; transform: translateX(-50%);
--alto: min(42vh, 360px); /* altura del ticker: se ven grandes sin recortar */
--gap: 14px; --vel: 36s;
position: relative; overflow: hidden;
}
.ticker{
display: flex; align-items: center; gap: var(--gap);
width: max-content; padding: 4px var(--gap);
animation: ticker-scroll var(--vel) linear infinite;
}
.ticker:hover{ animation-play-state: paused; } /* pausa al hover */
.ticker::before, .ticker::after{
content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none;
}
/* Fade edges (ajustá color si tu fondo no es oscuro) */
.ticker::before{ left:0; background: linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,0)); }
.ticker::after{ right:0; background: linear-gradient(to left, rgba(0,0,0,.25), rgba(0,0,0,0)); }
.ticker .item{
display:block; flex: 0 0 auto; border-radius: 14px; overflow: hidden;
box-shadow: var(--shadow-lg, 0 6px 24px rgba(0,0,0,.18));
transition: transform .2s ease, box-shadow .2s ease;
}
.ticker .item:hover{ transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,.28); }
.ticker img{
height: var(--alto); width: auto; display:block; object-fit: contain; /* sin recorte */
background: rgba(255,255,255,.04);
}
@keyframes ticker-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); } /* como duplicamos pista, -50% cierra el loop */
}
@media (max-width: 576px){
.ticker-wrap{ --alto: 42vh; --vel: 28s; --gap: 10px; }
}
/* ===== Lightbox modal ===== */
#lightboxModal .modal-content{ border:0; background:#000; }
#lightboxModal .lightbox-prev,
#lightboxModal .lightbox-next{
position:absolute; top:50%; transform:translateY(-50%);
background: rgba(255,255,255,.16); color:#fff; border:0;
width:52px; height:68px; border-radius:.8rem; font-size:2rem; line-height:1;
display:flex; align-items:center; justify-content:center; cursor:pointer;
transition: background .2s ease;
}
#lightboxModal .lightbox-prev:hover,
#lightboxModal .lightbox-next:hover{ background: rgba(255,255,255,.28); }
#lightboxModal .lightbox-prev{ left:12px; }
#lightboxModal .lightbox-next{ right:12px; }
/* Fallback (cuando no hay Bootstrap): estilos para backdrop */
.modal-backdrop.fallback{ position: fixed; inset: 0; background: rgba(0,0,0,.5); }
/* ===== INLINE <style> BLOCK #4 ===== */
.brandline-icon{
width:22px; height:22px; object-fit:contain; display:block;
}
/* si el fondo es muy oscuro y el ícono también */
.footer-dark .brandline-icon{ border-radius:6px; background:rgba(255,255,255,.06); }
@media (max-width:576px){
.brandline-icon{ width:20px; height:20px; }
}
/* ===== INLINE <style> BLOCK #5 ===== */
.footer-dark.footer-xl{
--gold: var(--gold, #d4af37);
background:#000; color:#fff;
padding: 56px 0; /* más grande */
position:relative; isolation:isolate;
}
/* Glow superior */
.footer-dark.footer-xl::before{
content:""; position:absolute; inset:0 0 auto 0; height:2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity:.9;
}
/* Top row */
.footer-top{ margin-bottom: 28px; }
.footer-dark .brandline{
font-weight:800; font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.6rem);
letter-spacing:.01em;
}
.footer-dark .gold{ color: var(--gold); }
.footer-dark .tag{ color: rgba(255,255,255,.65); margin-top: .25rem; }
/* Nav */
.footer-mid{
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
padding: 18px 0; margin: 18px 0 24px;
}
.footer-nav{
display:flex; flex-wrap:wrap; gap: 18px 24px;
justify-content:center;
}
.footer-nav a{
color:#fff; text-decoration:none; font-weight:600;
transition: color .2s ease;
}
.footer-nav a:hover{ color: var(--gold); }
/* Redes */
.footer-dark .socials .soc{
--size: 46px;
width:var(--size); height:var(--size);
display:inline-flex; align-items:center; justify-content:center;
border-radius:50%;
border:1px solid rgba(255,255,255,.22);
color:#fff; background:transparent; text-decoration:none;
transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.footer-dark .socials .soc i{ font-size:1.1rem; line-height:1; }
.footer-dark .socials .soc:hover{
color:var(--gold); border-color:var(--gold); background: rgba(212,175,55,.08);
transform: translateY(-1px);
}
/* Bottom */
.footer-bottom .copy{ color: rgba(255,255,255,.65); }
.footer-bottom .legal-links a{
color: rgba(255,255,255,.8); text-decoration:none;
transition: color .2s ease;
}
.footer-bottom .legal-links a:hover{ color: var(--gold); }
.footer-bottom .legal-links .sep{ color: rgba(255,255,255,.35); margin: 0 8px; }
/* Responsive tweaks */
@media (max-width: 767.98px){
.footer-dark.footer-xl{ padding: 40px 0; }
.footer-top{ text-align:left; }
.socials{ justify-content:flex-start !important; }
.footer-bottom{ text-align:left; }
}
/* ===== INLINE <style> BLOCK #6 ===== */
:root{
--wa: #25D366;
--wa-dark: #128C7E;
--wa-darker: #075E54;
--gold: #d4af37;
--dark-bg: #0b0b0b;
--darker-bg: #050505;
--light-text: #ffffff;
--muted-text: rgba(255,255,255,.6);
}
.wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wa-btn{
background: linear-gradient(135deg, var(--wa), var(--wa-dark));
color: #fff;
border: 0;
width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
cursor: pointer;
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
outline: none;
position: relative;
overflow: hidden;
}
.wa-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.wa-btn:hover{
transform: translateY(-3px) scale(1.05);
box-shadow: 0 14px 36px rgba(0,0,0,.3);
}
.wa-btn:hover::after {
opacity: 1;
}
.wa-card{
position: absolute;
right: 0;
bottom: 74px;
width: min(360px, 92vw);
background: var(--dark-bg);
color: var(--light-text);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 60px rgba(0,0,0,.5);
border: 1px solid rgba(255,255,255,.08);
transform: translateY(10px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.wa-card[aria-modal="true"] {
transform: translateY(0);
opacity: 1;
}
.wa-head{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
background: linear-gradient(180deg, #111, var(--darker-bg));
border-bottom: 1px solid rgba(255,255,255,.06);
}
.wa-avatar{
width: 40px;
height: 40px;
border-radius: 50%;
background: #1e1e1e;
display: grid;
place-items: center;
font-weight: 700;
border: 1px solid rgba(255,255,255,.08);
}
.wa-title{
font-weight: 700;
font-size: 1.1rem;
}
.wa-status{
font-size: .85rem;
color: var(--muted-text);
display: flex;
align-items: center;
gap: 4px;
}
.wa-status::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--wa);
}
.wa-close{
margin-left: auto;
background: transparent;
color: #fff;
border: 0;
font-size: 24px;
cursor: pointer;
opacity: .7;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.wa-close:hover{
opacity: 1;
background: rgba(255,255,255,0.1);
}
.wa-body{
padding: 12px 14px;
max-height: 40vh;
overflow: auto;
background: var(--dark-bg);
display: flex;
flex-direction: column;
gap: 8px;
}
.wa-bubble{
max-width: 88%;
padding: 10px 12px;
border-radius: 14px;
line-height: 1.35;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.wa-bot{
background: #151515;
border: 1px solid rgba(255,255,255,.06);
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.wa-user{
background: var(--wa-darker);
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.wa-compose{
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px;
background: var(--dark-bg);
border-top: 1px solid rgba(255,255,255,.08);
}
.wa-compose textarea{
resize: none;
border-radius: 12px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.12);
background: #101010;
color: var(--light-text);
outline: none;
min-height: 44px;
font-family: inherit;
transition: all 0.2s ease;
}
.wa-compose textarea:focus{
border-color: var(--wa);
box-shadow: 0 0 0 2px rgba(37,211,102,.15);
}
.wa-send{
background: var(--wa);
color: var(--dark-bg);
border: 0;
border-radius: 12px;
padding: 0 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.wa-send:hover{
background: var(--wa-dark);
transform: scale(1.05);
}
/* Scrollbar personalizado */
.wa-body::-webkit-scrollbar {
width: 6px;
}
.wa-body::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 3px;
}
.wa-body::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 3px;
}
.wa-body::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
/* Responsive */
@media (max-width: 480px) {
.wa-float {
right: 12px;
bottom: 12px;
}
.wa-card {
width: calc(100vw - 24px);
right: 0;
}
}