Preview de mixed.css
/* MIXED CSS PACK */
/* Template: sushilovers.com.ar/index.html */
/* Template mtime: 2025-10-16 16:14:03 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--bg: #0a0a0a;
--bg-card: #111111;
--bg-card-light: #1a1a1a;
--fg: #ffffff;
--fg-2: #e6e6e6;
--muted: #b0b0b0;
--accent: #ff4d4d;
--accent-hover: #ff3333;
--accent-light: #ff6b6b;
--line: rgba(255, 255, 255, 0.08);
--btn: #ffffff;
--btn-fg: #000000;
--gradient: linear-gradient(135deg, #ff4d4d 0%, #ff9a3d 100%);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
--radius: 16px;
--radius-lg: 24px;
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
* {
box-sizing: border-box;
}
html, body {
background: var(--bg);
color: var(--fg);
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, .brand {
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
}
a {
color: var(--fg);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--accent-light);
}
.container-narrow {
max-width: 1000px;
}
/* Navbar */
.navbar {
backdrop-filter: blur(10px);
padding: 1rem 0;
transition: var(--transition);
}
.navbar.scrolled {
background: rgba(10, 10, 10, 0.95);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.brand {
font-weight: 700;
letter-spacing: 0.5px;
font-size: 1.5rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-link {
color: var(--fg-2) !important;
opacity: 0.9;
font-weight: 500;
position: relative;
margin: 0 0.5rem;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
}
.nav-link.active, .nav-link:hover {
color: var(--fg) !important;
opacity: 1;
}
.nav-link.active::after, .nav-link:hover::after {
width: 100%;
}
.btn-cta {
background: var(--gradient);
color: var(--btn-fg);
border: none;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: var(--transition);
box-shadow: var(--shadow);
}
.btn-cta:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
color: var(--btn-fg);
}
.btn-ghost {
border: 1px solid var(--line);
color: var(--fg-2);
background: transparent;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: var(--transition);
}
.btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-3px);
}
/* Hero */
.hero {
padding: 150px 0 100px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 50%, rgba(255, 77, 77, 0.1) 0%, transparent 50%);
z-index: -1;
}
.eyebrow {
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.75rem;
color: var(--accent);
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.1;
margin: 0.5rem 0 1.5rem;
background: linear-gradient(to right, #ffffff, #ffcc99);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p.lead {
color: var(--fg-2);
font-size: 1.25rem;
max-width: 600px;
}
.pill {
padding: 0.5rem 1rem;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: 0.9rem;
transition: var(--transition);
}
.pill:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Sections */
section {
padding: 100px 0;
position: relative;
}
.section-title {
margin-bottom: 3rem;
position: relative;
}
.section-title h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: var(--gradient);
border-radius: 3px;
}
.muted {
color: var(--muted);
}
/* Cards */
.card-soft {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: var(--transition);
overflow: hidden;
position: relative;
}
.card-soft::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 77, 77, 0.05) 0%, rgba(255, 154, 61, 0.05) 100%);
opacity: 0;
transition: var(--transition);
}
.card-soft:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: rgba(255, 77, 77, 0.2);
}
.card-soft:hover::before {
opacity: 1;
}
/* Check List */
.check-list {
list-style: none;
padding: 0;
margin: 0;
}
.check-list li {
padding-left: 1.75rem;
position: relative;
margin: 0.75rem 0;
}
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
font-size: 1.1rem;
}
/* Ticker */
.ticker {
position: relative;
}
.ticker-viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
display: flex;
gap: 20px;
padding-bottom: 10px;
scrollbar-width: none;
}
.ticker-viewport::-webkit-scrollbar {
height: 8px;
}
.ticker-viewport::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 8px;
}
.tile {
flex: 0 0 auto;
width: clamp(280px, 45vw, 500px);
height: clamp(280px, 45vw, 500px);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--line);
scroll-snap-align: center;
position: relative;
transition: var(--transition);
}
.tile:hover {
transform: scale(1.03);
box-shadow: var(--shadow-lg);
}
.tile > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(--transition);
}
.tile:hover > img {
transform: scale(1.1);
}
.ticker-controls {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 24px;
}
.ticker-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg-card);
color: var(--fg);
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.ticker-btn:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-3px);
}
/* Form */
.form-control, .form-select {
background: var(--bg-card);
border: 1px solid var(--line);
color: var(--fg);
border-radius: 12px;
padding: 0.75rem 1rem;
transition: var(--transition);
}
.form-control:focus, .form-select:focus {
background: var(--bg-card-light);
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.1);
color: var(--fg);
}
.form-control::placeholder {
color: var(--muted);
}
/* Accordion */
.accordion-button {
background: transparent;
color: var(--fg);
font-weight: 500;
padding: 1.25rem 0;
border: none;
border-bottom: 1px solid var(--line);
}
.accordion-button:not(.collapsed) {
background: transparent;
color: var(--accent);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: var(--accent);
}
.accordion-button::after {
filter: invert(1);
}
.accordion-body {
padding: 0 0 1.25rem 0;
color: var(--muted);
}
/* Footer */
footer {
padding: 60px 0 40px;
background: var(--bg-card);
border-top: 1px solid var(--line);
}
.fine {
font-size: 0.9rem;
color: var(--muted);
}
/* Floating WA */
.wa-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
display: flex;
gap: 10px;
flex-direction: column;
}
.wa-float a {
background: #25D366;
color: #000;
border-radius: 50px;
padding: 0.8rem 1.2rem;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.wa-float a:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
color: #000;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease-out forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Responsive */
@media (min-width: 992px) {
.hero {
padding: 180px 0 120px;
}
section {
padding: 120px 0;
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.section-title h2 {
font-size: 2rem;
}
.wa-float {
flex-direction: row;
bottom: 15px;
right: 15px;
}
.wa-float a {
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
--bg:#ffffff;
--fg:#111111;
--muted:#666666;
--line:rgba(0,0,0,.08);
--card:#f8f9fa;
--accent:#000000;
--accent-2:#2b2b2b;
--btn-fg:#ffffff;
--shadow:0 8px 24px rgba(0,0,0,.08);
--shadow-lg:0 18px 40px rgba(0,0,0,.12);
}
/* 1) BLANCO & NEGRO PURO */
html[data-theme="bn-puro"], .theme-bn-puro{
--bg:#ffffff;
--fg:#000000;
--muted:#4a4a4a;
--line:#0000001a;
--card:#ffffff;
--accent:#000000;
--accent-2:#000000;
--shadow:0 8px 24px #00000014;
--shadow-lg:0 18px 40px #00000020;
}
/* 2) SOFT GRIS (light, limpio) */
html[data-theme="soft-gris"], .theme-soft-gris{
--bg:#f6f7f8;
--fg:#101010;
--muted:#5c5c5c;
--line:#00000014;
--card:#ffffff;
--accent:#151515;
--accent-2:#2a2a2a;
--shadow:0 8px 24px rgba(0,0,0,.06);
--shadow-lg:0 18px 40px rgba(0,0,0,.10);
}
/* 3) DIM (oscuro elegante, no zarpado) */
html[data-theme="dim"], .theme-dim{
--bg:#141414;
--fg:#eeeeee;
--muted:#b5b5b5;
--line:#ffffff1a;
--card:#1b1b1b;
--accent:#f5f5f5;
--accent-2:#d9d9d9;
--btn-fg:#000000;
--shadow:0 8px 24px rgba(0,0,0,.35);
--shadow-lg:0 18px 40px rgba(0,0,0,.45);
}
/* 4) GRIS INDUSTRIAL */
html[data-theme="gris-industrial"], .theme-gris-industrial{
--bg:#eaeaeb;
--fg:#0f0f0f;
--muted:#555;
--line:#0000001f;
--card:#f5f5f6;
--accent:#0f0f0f;
--accent-2:#2f2f2f;
--shadow:0 8px 24px rgba(0,0,0,.08);
--shadow-lg:0 18px 40px rgba(0,0,0,.12);
}
/* Enlazar tokens genéricos a las vars (no interfiere si ya existen) */
body{ background:var(--bg); color:var(--fg); }
.bordered{ border:1px solid var(--line); }
.card, .card-soft{ background:var(--card); color:var(--fg); box-shadow:var(--shadow); border:1px solid var(--line); }
.text-muted, .muted{ color:var(--muted)!important; }
.btn-primary, .btn-cta{ background:var(--accent); color:var(--btn-fg); border:1px solid var(--accent-2); }
.btn-outline, .btn-ghost{ background:transparent; color:var(--fg); border:1px solid var(--line); }
hr{ border-color:var(--line); opacity:1; }
.navbar, footer{ background:var(--card); border-color:var(--line); }
a{ color:var(--fg); }
a:hover{ color:var(--accent); }
.badge, .pill{ border:1px solid var(--line); color:var(--muted); }
input, textarea, select{ background:#fff; color:var(--fg); border:1px solid var(--line); }
input:focus, textarea:focus, select:focus{
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* Opcional: desaturar imágenes si piden B/N estrictamente */
.bn-imagenes img{ filter:grayscale(1); }
/* ===== INLINE <style> BLOCK #3 ===== */
/* Fuerza tipografía legible en fondos claros (cuando algún estilo viejo dejaba texto en blanco) */
html[data-theme="soft-gris"] body,
html[data-theme="gris-industrial"] body{
color:var(--fg);
background:var(--bg);
}
/* Normaliza textos comunes */
html[data-theme="soft-gris"] h1,
html[data-theme="soft-gris"] h2,
html[data-theme="soft-gris"] h3,
html[data-theme="soft-gris"] h4,
html[data-theme="soft-gris"] h5,
html[data-theme="soft-gris"] h6,
html[data-theme="soft-gris"] p,
html[data-theme="soft-gris"] li,
html[data-theme="soft-gris"] blockquote,
html[data-theme="soft-gris"] .lead,
html[data-theme="soft-gris"] .accordion-button,
html[data-theme="soft-gris"] .accordion-body,
html[data-theme="soft-gris"] .nav-link,
html[data-theme="soft-gris"] label,
html[data-theme="soft-gris"] .form-label,
html[data-theme="soft-gris"] .card,
html[data-theme="soft-gris"] section,
html[data-theme="soft-gris"] footer,
html[data-theme="gris-industrial"] h1,
html[data-theme="gris-industrial"] h2,
html[data-theme="gris-industrial"] h3,
html[data-theme="gris-industrial"] h4,
html[data-theme="gris-industrial"] h5,
html[data-theme="gris-industrial"] h6,
html[data-theme="gris-industrial"] p,
html[data-theme="gris-industrial"] li,
html[data-theme="gris-industrial"] blockquote,
html[data-theme="gris-industrial"] .lead,
html[data-theme="gris-industrial"] .accordion-button,
html[data-theme="gris-industrial"] .accordion-body,
html[data-theme="gris-industrial"] .nav-link,
html[data-theme="gris-industrial"] label,
html[data-theme="gris-industrial"] .form-label,
html[data-theme="gris-industrial"] .card,
html[data-theme="gris-industrial"] section,
html[data-theme="gris-industrial"] footer{
color:var(--fg) !important;
}
/* Enlaces con contraste correcto */
html[data-theme="soft-gris"] a,
html[data-theme="gris-industrial"] a{ color:var(--fg) !important; }
html[data-theme="soft-gris"] a:hover,
html[data-theme="gris-industrial"] a:hover{ color:var(--accent) !important; }
/* Botones mantienen color de texto adecuado */
html[data-theme="soft-gris"] .btn,
html[data-theme="gris-industrial"] .btn,
html[data-theme="soft-gris"] .btn-cta,
html[data-theme="gris-industrial"] .btn-cta{
color:var(--btn-fg) !important;
}
/* Inputs y placeholders en oscuro suave */
html[data-theme="soft-gris"] .form-control,
html[data-theme="soft-gris"] .form-select,
html[data-theme="gris-industrial"] .form-control,
html[data-theme="gris-industrial"] .form-select{
color:var(--fg) !important;
background:#fff !important;
border-color:var(--line) !important;
}
html[data-theme="soft-gris"] .form-control::placeholder,
html[data-theme="gris-industrial"] .form-control::placeholder{ color:#8d8d8d !important; }
/* Si había utilidades antiguas tipo .text-white, anulamos en temas claros */
html[data-theme="soft-gris"] .text-white,
html[data-theme="gris-industrial"] .text-white{ color:var(--fg) !important; }
/* Asegura contraste en acordeón y navbar */
html[data-theme="soft-gris"] .accordion-button,
html[data-theme="gris-industrial"] .accordion-button{
background:#fff !important; border-bottom:1px solid var(--line) !important;
}
html[data-theme="soft-gris"] .navbar,
html[data-theme="gris-industrial"] .navbar{
border-bottom:1px solid var(--line) !important;
}
/* Utilidad: si algo quedó blanco, se lo forzás con .force-dark */
.force-dark{ color:var(--fg) !important; }
/* ===== INLINE <style> BLOCK #4 ===== */
/* Extras: aplicar también cuando el atributo data-theme está en <body> (por compat) */
body[data-theme="soft-gris"] *, body[data-theme="gris-industrial"] *{ color: var(--fg) !important; }
body[data-theme="soft-gris"] .accordion-button, body[data-theme="gris-industrial"] .accordion-button{
background:#fff !important; border-bottom:1px solid var(--line) !important; color:var(--fg)!important;
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* FAQ bordeado, sobrio */
#faqs .accordion{
display:block;
}
#faqs .accordion-item{
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
margin-bottom: 14px;
transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
#faqs .accordion-item:hover{
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--fg) 10%, transparent);
transform: translateY(-1px);
}
#faqs .accordion-button{
background: var(--card);
color: var(--fg);
padding: 18px 20px;
font-weight: 600;
}
#faqs .accordion-button::after{ filter: none; } /* chevron oscuro */
#faqs .accordion-button:not(.collapsed){
background: var(--card);
color: var(--fg);
box-shadow: inset 0 -1px 0 var(--line);
}
#faqs .accordion-body{
background: var(--card);
color: var(--muted);
padding: 0 20px 18px 20px;
}
/* Indicador lateral cuando está abierto */
#faqs .accordion-item.active{
border-color: color-mix(in srgb, var(--fg) 18%, transparent);
box-shadow: var(--shadow-lg);
}
#faqs .accordion-item.active .accordion-button{
border-bottom: 1px solid var(--line);
}
/* Línea superior sutil para separar items en móviles si quedan juntos */
@media (max-width: 576px){
#faqs .accordion-item{ margin-bottom: 12px; border-radius: 12px; }
}
/* ===== INLINE <style> BLOCK #6 ===== */
/* ===== NAVBAR NEGRA CON LETRAS BLANCAS ===== */
.navbar{
color:#ffffff !important;
border-bottom:1px solid #111 !important;
box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
}
.navbar.scrolled{ background:#000000 !important; }
.navbar .brand{
background:none !important;
-webkit-text-fill-color:unset !important;
color:#ffffff !important;
}
.navbar .nav-link{
color:#ffffff !important;
opacity:1 !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:#ffffff !important; }
.navbar .nav-link::after{
background:#ffffff !important;
height:2px;
}
/* CTA: borde blanco, texto blanco; hover invertido */
.navbar .btn-cta{
background:transparent !important;
color:#ffffff !important;
border:1px solid #ffffff !important;
}
.navbar .btn-cta:hover{
background:#ffffff !important;
color:#000000 !important;
border-color:#ffffff !important;
}
/* Toggler en blanco */
.navbar .navbar-toggler{
border-color:#444 !important;
}
.navbar .navbar-toggler-icon{
filter: invert(1) grayscale(1) contrast(1.2) !important;
}
/* ===== INLINE <style> BLOCK #7 ===== */
/* ===== FORCE NAVBAR BLACK ===== */
html .navbar.navbar-bn,
html[data-theme] .navbar.navbar-bn{
background:#000000 !important;
color:#ffffff !important;
border-bottom:1px solid #111 !important;
box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
}
html .navbar.navbar-bn.scrolled{ background:#000000 !important; }
html .navbar.navbar-bn .brand{ color:#ffffff !important; -webkit-text-fill-color:unset !important; background:none !important; }
html .navbar.navbar-bn .nav-link{ color:#ffffff !important; opacity:1 !important; }
html .navbar.navbar-bn .nav-link:hover,
html .navbar.navbar-bn .nav-link.active{ color:#ffffff !important; }
html .navbar.navbar-bn .nav-link::after{ background:#ffffff !important; height:2px; }
html .navbar.navbar-bn .btn-cta{ background:transparent !important; color:#ffffff !important; border:1px solid #ffffff !important; }
html .navbar.navbar-bn .btn-cta:hover{ background:#ffffff !important; color:#000000 !important; border-color:#ffffff !important; }
html .navbar.navbar-bn .navbar-toggler{ border-color:#666 !important; }
html .navbar.navbar-bn .navbar-toggler-icon{ filter: invert(1) grayscale(1) contrast(1.2) !important; }
/* ===== INLINE <style> BLOCK #8 ===== */
/* ===== HERO con imagen + texto abajo ===== */
.hero-media{ padding: 120px 0 0; background: transparent; }
.hero-photo{
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--line);
}
.hero-photo img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
aspect-ratio: 16 / 6;
}
.hero-info{ padding: 40px 0 80px; }
@media (max-width: 992px){
.hero-media{ padding-top: 110px; }
.hero-photo img{ aspect-ratio: 16 / 9; }
.hero-info{ padding: 28px 0 64px; }
}
/* ===== INLINE <style> BLOCK #9 ===== */
/* ===== Reset: ocultar botones de WhatsApp anteriores comunes ===== */
.wa-float, .float-whatsapp, .whatsapp-float, .btn-whatsapp-fixed, .whatsapp-fixed, .whatsapp-fijo {
display: none !important;
}
/* ===== WhatsApp FAB real ===== */
.wa-fab-wrap{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1100;
display: grid;
gap: 10px;
}
/* Botón redondo principal */
.wa-fab{
width: 60px; height: 60px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
border: 0;
display: grid; place-items: center;
cursor: pointer;
transition: transform .15s ease, box-shadow .2s ease;
}
.wa-fab:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.32); }
/* Ícono */
.wa-fab svg{ width: 30px; height: 30px; fill: #fff; }
/* Menú de números */
.wa-menu{
display: grid;
gap: 8px;
justify-items: end;
margin-bottom: 6px;
transform-origin: bottom right;
transition: opacity .15s ease, transform .15s ease;
opacity: 0; pointer-events: none; transform: scale(.96);
}
.wa-menu.open{ opacity: 1; pointer-events: auto; transform: scale(1); }
/* Cada opción del menú: botón redondo + etiqueta */
.wa-item{
display: flex; align-items: center; gap: 10px;
}
.wa-chip{
background: #111;
color: #fff;
padding: 6px 10px;
font-weight: 600;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 6px 18px rgba(0,0,0,.2);
white-space: nowrap;
}
.wa-btn{
width: 46px; height: 46px; border-radius: 50%;
background: #25D366; display: grid; place-items: center;
box-shadow: 0 8px 22px rgba(0,0,0,.22);
transition: transform .12s ease;
}
.wa-btn:hover{ transform: translateY(-1px); }
.wa-btn svg{ width: 24px; height: 24px; fill:#fff; }
/* Mobile: acercamos un poco a los bordes */
@media (max-width: 768px){
.wa-fab-wrap{ right: 14px; bottom: 14px; }
.wa-chip{ font-size: .95rem; }
}
/* ===== INLINE <style> BLOCK #10 ===== */
/* ===== WhatsApp botones flotantes (clásicos) ===== */
.wa-fab-col{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1100;
display: grid;
gap: 12px;
}
.wa-fab{
width: 60px; height: 60px;
border-radius: 50%;
display: grid; place-items: center;
background: #25D366;
box-shadow: 0 12px 28px rgba(0,0,0,.28);
transition: transform .15s ease, box-shadow .2s ease;
}
.wa-fab:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.wa-fab img{
width: 30px; height: 30px; display: block;
filter: invert(1); /* simple-icons es negro; lo dejamos blanco */
}
@media (max-width: 768px){
.wa-fab-col{ right: 14px; bottom: 14px; gap: 10px; }
.wa-fab{ width: 56px; height: 56px; }
.wa-fab img{ width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce){
.wa-fab, .wa-fab:hover{ transition: none; transform: none !important; }
}
/* ===== INLINE <style> BLOCK #11 ===== */
/* ===== Tooltip para mostrar número en hover/focus ===== */
.wa-fab-col{ position: fixed; right: 18px; bottom: 18px; z-index: 1100; display: grid; gap: 12px; }
.wa-fab-item{ position: relative; display: grid; justify-items: end; }
.wa-tip{
position: absolute;
right: 70px; /* separada del botón */
top: 50%; transform: translateY(-50%);
background: rgba(17,17,17,.95);
color: #fff;
padding: 6px 10px;
border-radius: 10px;
font-weight: 700;
letter-spacing: .3px;
font-size: 14px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 24px rgba(0,0,0,.3);
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
transform-origin: right center;
}
.wa-fab-item .wa-fab:hover + .wa-tip,
.wa-fab-item .wa-fab:focus-visible + .wa-tip{
opacity: 1; transform: translate(-2px, -50%);
}
.wa-tip::after{
content: "";
position: absolute;
right: -6px; top: 50%; transform: translateY(-50%);
width: 0; height: 0;
border-left: 6px solid rgba(17,17,17,.95);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
@media (max-width: 768px){
.wa-tip{ font-size: 13px; right: 64px; }
}
/* ===== INLINE <style> BLOCK #12 ===== */
.navbar .brand-logo{
display:block;
height:52px; /* ajustá si querés más alto */
width:auto;
}
.navbar .navbar-brand.brand{
font-size:0; /* oculta texto residual si lo hubiera */
line-height:1;
}
/* Si el logo es oscuro y tu navbar es negra, activá esto */
/* .navbar .brand-logo{ filter: invert(1) brightness(1.1); } */
/* ===== INLINE <style> BLOCK #13 ===== */
/* ===== Editorial B/N con bordes fuertes + link “Pedir” elegante ===== */
/* Usa tokens existentes: --card --line --fg --muted --shadow --shadow-lg */
.menu-borders .mb-frame{
background: var(--card);
border: 2px solid color-mix(in srgb, var(--fg) 50%, transparent);
border-radius: 16px;
padding: 18px;
box-shadow: var(--shadow);
}
.menu-borders .mb-head{
display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.menu-borders .mb-eyebrow{
margin:0 0 2px 0; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--fg); opacity:.75;
}
.menu-borders .mb-title{
margin:0; color:var(--fg); font-size:clamp(1.7rem,3vw,2.2rem); line-height:1.1;
}
.menu-borders .mb-note{ margin:0; color:var(--muted); }
.menu-borders .mb-rule{
border:0; height:1px; margin:14px 0;
background: color-mix(in srgb, var(--fg) 35%, transparent);
}
/* Grid */
.menu-borders .mb-grid{
display:grid; gap:16px;
grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){
.menu-borders .mb-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
.menu-borders .mb-grid{ grid-template-columns: 1fr; }
}
/* Cards con borde 2px y líneas internas */
.menu-borders .mb-card{
border:2px solid color-mix(in srgb, var(--fg) 50%, transparent);
border-radius:12px; background:var(--card);
display:flex; flex-direction:column; height:100%;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
outline:none;
}
.menu-borders .mb-card:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--fg) 75%, transparent);
}
.menu-borders .mb-card:focus-visible{
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 25%, transparent);
}
/* Líneas internas */
.menu-borders .mb-card-head{
padding:14px 16px;
border-bottom:1px solid color-mix(in srgb, var(--fg) 40%, transparent);
}
.menu-borders .mb-card-head h3{
margin:0; color:var(--fg); font-size:1.02rem; letter-spacing:.01em;
}
.menu-borders .mb-card-body{
padding:12px 16px;
border-bottom:1px dashed color-mix(in srgb, var(--fg) 30%, transparent);
}
.menu-borders .mb-card-body p{
margin:0; color:var(--muted); line-height:1.6;
}
/* Footer con link editorial “Pedir” */
.menu-borders .mb-card-foot{
padding:12px 16px; display:flex; align-items:center; justify-content:flex-end;
border-top:0;
}
.menu-borders .mb-link{
color:var(--fg); text-decoration:none; font-weight:600; position:relative;
}
.menu-borders .mb-link::after{
content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
background: currentColor; opacity:.5; transform:scaleX(.35); transform-origin:left;
transition: transform .2s ease, opacity .2s ease;
}
.menu-borders .mb-link:hover::after{ transform:scaleX(1); opacity:.9; }
/* Variante “quiet” (recomendada): tipografía protagonista, con flecha */
.menu-borders .mb-link-quiet{
border:0; padding:0; border-radius:0; font-weight:700;
}
.menu-borders .mb-link-quiet .arr{ margin-left:.35rem; }
/* CTA final */
.menu-borders .mb-cta{ display:flex; justify-content:center; padding-top:6px; }
.menu-borders .mb-link-strong{
color:var(--fg); text-decoration:none; font-weight:700; letter-spacing:.01em;
border:2px solid color-mix(in srgb, var(--fg) 55%, transparent);
border-radius:999px; padding:.6rem 1.1rem; display:inline-block;
}
.menu-borders .mb-link-strong:hover{
border-color: color-mix(in srgb, var(--fg) 80%, transparent);
}
@media (prefers-reduced-motion: reduce){
.menu-borders .mb-card, .menu-borders .mb-link::after{ transition:none !important; }
}
/* ===== INLINE <style> BLOCK #14 ===== */
/* ===== Estilos Ticker B/N (con track) ===== */
.trabajos .ticker{ position: relative; margin-top:8px; }
.trabajos .ticker-viewport{
--gap: 14px;
overflow:hidden; /* NO hay scroll del navegador */
padding: 8px 60px; /* espacio para botones */
border:1px solid var(--line); border-radius:16px;
background:var(--card); box-shadow:var(--shadow);
}
.trabajos .ticker-track{
display:flex; gap: var(--gap);
transform: translateX(0);
transition: transform .35s ease;
will-change: transform;
}
.trabajos .tile{
flex:0 0 auto;
width: clamp(220px, 32vw, 360px); /* más anchas */
border:1px solid var(--line); border-radius:12px; overflow:hidden;
background:#000;
}
.trabajos .tile img{
display:block; width:100%; height:100%;
aspect-ratio: 4 / 3; object-fit:cover;
filter:grayscale(1);
transition: transform .25s ease, filter .25s ease, opacity .2s ease;
opacity:.98; cursor: zoom-in;
}
.trabajos .tile:hover img{ transform:scale(1.02); filter:grayscale(0); }
/* Controles por encima del carrusel */
.trabajos .ticker-controls{
position:absolute; inset:0; z-index:5;
display:flex; justify-content:space-between; align-items:center;
padding:0 8px; pointer-events:none;
}
.trabajos .ticker-btn{
pointer-events:auto;
width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
background:var(--card); color:var(--fg); box-shadow:var(--shadow);
display:grid; place-items:center; font-size:20px; line-height:1;
}
.trabajos .ticker-btn:hover{ border-color: color-mix(in srgb, var(--fg) 18%, transparent); }
.trabajos .ticker-btn:disabled{ opacity:.35; cursor:not-allowed; }
@media (max-width:576px){
.trabajos .ticker-viewport{ padding:8px 54px; }
.trabajos .tile{ width: clamp(200px, 75vw, 320px); }
.trabajos .ticker-btn{ width:36px; height:36px; }
}
/* ===== Lightbox / Modal B/N ===== */
.lb[hidden]{ display:none; }
.lb{ position:fixed; inset:0; z-index:1050; }
.lb-backdrop{ position:absolute; inset:0; background: color-mix(in srgb, #000 85%, transparent); backdrop-filter: blur(2px); }
.lb-frame{
position:absolute; inset:0; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr auto;
align-items:center; justify-items:center; padding: clamp(12px, 3vw, 28px);
}
.lb-figure{
grid-column:2; grid-row:2; margin:0; max-width:min(96vw, 1200px); max-height:80vh;
display:grid; align-items:center; justify-items:center; gap:10px;
background:#000; border:1px solid #333; border-radius:12px; padding: clamp(6px, 2vw, 12px);
box-shadow:0 30px 100px rgba(0,0,0,.6);
}
.lb-figure img{ max-width:100%; max-height:70vh; object-fit:contain; border-radius:8px; }
.lb-cap{ color:#d9d9d9; font-size:.92rem; text-align:center; }
.lb-close, .lb-nav{
width:44px; height:44px; border-radius:999px; border:1px solid #444;
background:#000; color:#fff; font-size:24px; line-height:1;
}
.lb-close{ grid-column:3; grid-row:1; align-self:start; justify-self:end; }
.lb-prev{ grid-column:1; grid-row:2; justify-self:start; margin-left: clamp(6px, 2vw, 20px); }
.lb-next{ grid-column:3; grid-row:2; justify-self:end; margin-right:clamp(6px, 2vw, 20px); }
.lb-close:hover, .lb-nav:hover{ border-color:#666; }
@media (max-width:640px){
.lb-figure{ max-height:78vh; }
.lb-figure img{ max-height:64vh; }
}
/* ===== INLINE <style> BLOCK #15 ===== */
/* ===== Contacto B/N ===== */
.contacto-bn .contact-list .ico{
width:22px; height:22px; flex:0 0 22px; display:inline-grid; place-items:center;
border:1px solid var(--line); border-radius:8px; background:var(--card);
}
.contacto-bn .contact-list .ico svg{
width:16px; height:16px; stroke:var(--fg); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.contacto-bn .contact-list a{ text-decoration:none; border-bottom:1px solid transparent; }
.contacto-bn .contact-list a:hover{ border-bottom-color: currentColor; }
/* Mapa en color */
.contacto-bn .map-wrap .map-iframe{ width:100%; height:100%; border:0; }
/* Link bajo el mapa */
.contacto-bn .map-wrap .map-link{
display:inline-block; margin-top:.5rem; color:var(--fg); font-weight:600; text-decoration:none; position:relative;
}
.contacto-bn .map-wrap .map-link::after{
content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor;
opacity:.5; transform:scaleX(.35); transform-origin:left; transition:transform .2s ease, opacity .2s ease;
}
.contacto-bn .map-wrap .map-link:hover::after{ transform:scaleX(1); opacity:.9; }
/* ===== FIX: que el formulario reciba clic/teclado ===== */
.contacto-bn .form-card{
position:relative; z-index:10; /* sobre cualquier overlay cercano */
}
.contacto-bn .form-card :is(input, textarea, select, label, button){
pointer-events:auto !important;
position:relative; z-index:11; /* por si un iframe/overlay se mete encima */
}
/* ===== INLINE <style> BLOCK #16 ===== */
/* ===== Footer base ===== */
.footer-bn{
background:#000;
padding:36px 0 26px;
}
/* Grid */
.footer-bn .fb-grid{
display:grid; grid-template-columns:1.1fr .8fr 1.1fr; gap:28px;
}
@media (max-width:992px){ .footer-bn .fb-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer-bn .fb-grid{ grid-template-columns:1fr; } }
.footer-bn .fb-brand{ font-weight:800; font-size:clamp(1.1rem,2.5vw,1.3rem); display:inline-block; }
.footer-bn .fb-copy{ margin:6px 0 0; }
.footer-bn .fb-h{ margin:0 0 10px; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; }
.footer-bn .fb-list{ list-style:none; padding:0; margin:0; }
.footer-bn .fb-list li{ margin-bottom:10px; }
.footer-bn .fb-contacts li{ display:flex; align-items:flex-start; gap:8px; }
.footer-bn .fb-contacts .ico{
width:22px; height:22px; flex:0 0 22px; display:inline-grid; place-items:center;
border:1px solid rgba(255,255,255,.35); border-radius:8px;
}
.footer-bn .fb-social .social{
display:inline-flex; align-items:center; gap:8px;
border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 10px;
}
.footer-bn .fb-rule{ border:0; height:1px; background:rgba(255,255,255,.28); margin:20px 0; }
.footer-bn .fb-base{ display:flex; justify-content:space-between; gap:12px; }
@media (max-width:640px){ .footer-bn .fb-base{ flex-direction:column; } }
/* ===== FIX: TODO en blanco (sobre-escribe estilos globales) ===== */
.footer-bn,
.footer-bn :is(p, li, a, a:link, a:visited, a:hover, a:active, small, span, strong, em, h1, h2, h3, h4, h5, h6, .muted, .text-muted, .text-body-secondary, .text-secondary){
color:#fff !important;
opacity:1 !important;
text-decoration:none;
}
.footer-bn a:hover{ text-decoration:underline; text-underline-offset:2px; }
.footer-bn .fb-contacts .ico svg,
.footer-bn .fb-social .social svg{
stroke:#fff !important; fill:none !important; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* Por si alguna utilidad agrega opacidad */
.footer-bn [class*="opacity-"]{ opacity:1 !important; }