Preview de mixed.css
/* MIXED CSS PACK */
/* Template: sercaproducciones.com.ar/index.html */
/* Template mtime: 2026-03-06 13:04:55 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Outfit:wght@500;600;700;800;900&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
/* Colores principales - respetando tu paleta */
--violet: #6d28d9;
--violet-dark: #f6c714;
--violet-light: rgba(109, 40, 217, 0.08);
--yellow: #facc15;
--yellow-dark: #e6b310;
--yellow-light: rgba(250, 204, 21, 0.1);
/* Sistema de diseño mejorado */
--text: #111827;
--text-light: #6b7280;
--soft: #f8fafc;
--card: #ffffff;
--border: rgba(17, 24, 39, 0.08);
--border-hover: rgba(109, 40, 217, 0.2);
--radius: 20px;
--radius-lg: 30px;
--radius-sm: 12px;
--shadow: 0 20px 60px rgba(17, 24, 39, 0.08);
--shadow-lg: 0 30px 80px rgba(109, 40, 217, 0.12);
--shadow-yellow: 0 20px 50px rgba(250, 204, 21, 0.15);
/* Gradientes premium */
--gradient-violet: linear-gradient(135deg, var(--violet), var(--violet-dark));
--gradient-yellow: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
--gradient-hero: radial-gradient(ellipse at 20% 30%, rgba(109, 40, 217, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(250, 204, 21, 0.15) 0%, transparent 60%);
/* Transiciones */
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.25s ease;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: var(--text);
background: #fff;
overflow-x: hidden;
line-height: 1.6;
}
/* Tipografía mejorada */
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.2;
}
/* NAVBAR PREMIUM */
.navbar {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border);
padding: 1rem 0;
box-shadow: 0 4px 20px rgba(17, 24, 39, 0.04);
transition: var(--transition-smooth);
}
.navbar.scrolled {
padding: 0.7rem 0;
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}
.brand-container {
display: flex;
align-items: center;
gap: 16px;
}
.brand-badge {
width: 50px;
height: 50px;
border-radius: 16px;
background: var(--gradient-violet);
display: grid;
place-items: center;
color: #fff;
font-weight: 950;
font-size: 1.25rem;
box-shadow: 0 12px 30px rgba(109, 40, 217, 0.25);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.brand-badge::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
}
.brand-badge:hover::after {
animation: shine 0.8s ease;
}
@keyframes shine {
100% { transform: translateX(100%); }
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-name {
font-weight: 980;
font-size: 1.25rem;
background: var(--gradient-violet);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
}
.brand-tagline {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-light);
}
.nav-link {
font-weight: 650;
color: var(--text);
padding: 0.5rem 1rem;
border-radius: 12px;
transition: var(--transition-fast);
position: relative;
}
.nav-link:hover {
color: var(--violet);
background: var(--violet-light);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 1rem;
right: 1rem;
height: 3px;
background: var(--gradient-violet);
border-radius: 3px;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav-link:hover::after {
transform: scaleX(1);
}
.btn-cta {
background: var(--gradient-yellow);
border: 0;
color: var(--text);
font-weight: 750;
border-radius: 50px;
padding: 0.7rem 1.4rem;
box-shadow: var(--shadow-yellow);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.btn-cta:hover {
transform: translateY(-3px);
box-shadow: 0 25px 40px rgba(250, 204, 21, 0.25);
color: var(--text);
}
.btn-cta::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
}
.btn-cta:hover::after {
animation: shine 0.8s ease;
}
/* HERO SECTION - Premium */
.hero {
padding: 120px 0 100px;
background: var(--gradient-hero), #fff;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, var(--violet-light) 0%, transparent 70%);
z-index: 0;
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.85rem;
color: var(--violet);
background: var(--violet-light);
border: 1px solid rgba(109, 40, 217, 0.2);
padding: 0.5rem 1rem;
border-radius: 50px;
margin-bottom: 1.5rem;
transition: var(--transition-fast);
}
.eyebrow:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(109, 40, 217, 0.1);
}
.hero h1 {
font-weight: 1000;
letter-spacing: -0.03em;
font-size: clamp(2.5rem, 5vw, 4rem);
margin: 1rem 0 1.5rem;
line-height: 1.1;
background: linear-gradient(to right, var(--text), var(--violet));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-subtitle {
color: var(--text-light);
font-size: 1.2rem;
max-width: 680px;
margin-bottom: 2.5rem;
font-weight: 450;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.btn-primary-custom {
background: var(--gradient-violet);
border: 0;
font-weight: 700;
border-radius: 50px;
padding: 0.85rem 2rem;
color: white;
box-shadow: 0 20px 40px rgba(109, 40, 217, 0.2);
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.btn-primary-custom:hover {
transform: translateY(-3px);
box-shadow: 0 30px 50px rgba(109, 40, 217, 0.3);
color: white;
}
.btn-primary-custom::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
}
.btn-primary-custom:hover::before {
animation: shine 0.8s ease;
}
.btn-outline-custom {
border-radius: 50px;
padding: 0.85rem 2rem;
font-weight: 700;
border: 2px solid var(--border);
color: var(--text);
background: white;
transition: var(--transition-smooth);
}
.btn-outline-custom:hover {
border-color: var(--violet);
color: var(--violet);
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(109, 40, 217, 0.1);
}
.hero-img-container {
position: relative;
z-index: 2;
}
.hero-img {
width: 100%;
height: clamp(320px, 50vh, 520px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
background: white;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
box-shadow: var(--shadow-lg);
transform: perspective(1000px) rotateY(-5deg);
transition: var(--transition-smooth);
}
.hero-img:hover {
transform: perspective(1000px) rotateY(0deg);
}
.hero-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.6s ease;
}
.hero-img:hover img {
transform: scale(1.05);
}
.social-links {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
}
.social-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
color: var(--violet);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 12px;
transition: var(--transition-fast);
background: var(--violet-light);
}
.social-link:hover {
background: var(--violet);
color: white;
transform: translateY(-2px);
}
/* SECTIONS */
.section {
padding: 100px 0;
position: relative;
}
.section.soft {
background: var(--soft);
position: relative;
}
.section.soft::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--border), transparent);
}
.section-title {
font-weight: 1000;
letter-spacing: -0.02em;
font-size: clamp(2rem, 3.5vw, 3.2rem);
margin: 1.5rem 0 1rem;
background: linear-gradient(to right, var(--text), var(--violet));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-subtitle {
color: var(--text-light);
max-width: 800px;
margin: 0 auto 3rem;
font-size: 1.1rem;
line-height: 1.7;
}
/* CARDS PREMIUM */
.pro-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2rem;
height: 100%;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.pro-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-violet);
opacity: 0;
transition: opacity 0.3s ease;
}
.pro-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--border-hover);
}
.pro-card:hover::before {
opacity: 1;
}
.icon-pill {
width: 56px;
height: 56px;
border-radius: 18px;
display: grid;
place-items: center;
background: var(--violet-light);
border: 1px solid rgba(109, 40, 217, 0.2);
color: var(--violet);
font-size: 1.5rem;
flex: 0 0 auto;
transition: var(--transition-smooth);
}
.pro-card:hover .icon-pill {
background: var(--gradient-violet);
color: white;
transform: scale(1.1) rotate(5deg);
}
.mini-muted {
color: var(--text-light);
line-height: 1.7;
}
/* TABS MEJORADOS */
.nav-pills {
gap: 1rem;
margin-bottom: 3rem;
}
.nav-pills .nav-link {
border-radius: 50px;
font-weight: 700;
padding: 0.8rem 1.5rem;
color: var(--text);
border: 2px solid var(--border);
background: white;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition-smooth);
}
.nav-pills .nav-link:hover {
border-color: var(--violet);
transform: translateY(-2px);
}
.nav-pills .nav-link.active {
background: var(--gradient-violet);
border-color: transparent;
color: white;
box-shadow: 0 20px 40px rgba(109, 40, 217, 0.2);
transform: translateY(-2px);
}
/* ACCORDION PREMIUM */
.accordion-item {
border: 1px solid var(--border);
border-radius: var(--radius) !important;
margin-bottom: 1rem;
overflow: hidden;
background: white;
}
.accordion-button {
font-weight: 700;
padding: 1.5rem;
border-radius: var(--radius) !important;
background: white;
color: var(--text);
border: none;
transition: var(--transition-fast);
}
.accordion-button:not(.collapsed) {
background: var(--violet-light);
color: var(--violet);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(109, 40, 217, 0.15);
border-color: var(--violet);
}
.accordion-body {
padding: 1.5rem;
color: var(--text-light);
line-height: 1.7;
}
/* CONTACT FORM PREMIUM */
.contact-wrap {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 2.5rem;
height: 100%;
position: relative;
overflow: hidden;
}
.contact-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-violet);
}
.form-control, .form-select {
border-radius: var(--radius-sm);
border: 2px solid var(--border);
padding: 0.9rem 1.2rem;
font-size: 1rem;
transition: var(--transition-fast);
background: white;
}
.form-control:focus, .form-select:focus {
border-color: var(--violet);
box-shadow: 0 0 0 0.25rem rgba(109, 40, 217, 0.15);
transform: translateY(-2px);
}
.form-label {
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text);
}
/* FOOTER PREMIUM */
footer {
background: linear-gradient(135deg, #0b0b12, #1a1a2e);
color: rgba(255, 255, 255, 0.9);
padding: 80px 0 40px;
position: relative;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-violet);
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 1000;
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
.footer-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--yellow);
box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.15);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.15); }
50% { box-shadow: 0 0 0 12px rgba(250, 204, 21, 0.1); }
}
footer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: var(--transition-fast);
padding: 0.3rem 0;
display: inline-block;
position: relative;
}
footer a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--yellow);
transition: width 0.3s ease;
}
footer a:hover {
color: var(--yellow);
transform: translateX(5px);
}
footer a:hover::after {
width: 100%;
}
.footer-social a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
margin-bottom: 0.5rem;
}
/* GALERÍA (MANTENIENDO TU CÓDIGO) */
.gal-gallery .carousel { max-width: 980px; margin-inline: auto; position: relative }
.gal-frame {
height: clamp(240px, 50vh, 460px);
background: #fff; border-radius: 16px; overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
display: flex; align-items: center; justify-content: center; padding: 8px;
transition: var(--transition-smooth);
}
.gal-frame:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}
.gal-img {
width: auto !important; max-width: 100%;
height: auto !important; max-height: 100%;
object-fit: contain !important; object-position: center; display: block; cursor: zoom-in;
transition: transform 0.6s ease;
}
.gal-frame:hover .gal-img {
transform: scale(1.05);
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20; width: 50px; height: 50px; top: 50%; transform: translateY(-50%);
opacity: 1; background: var(--gradient-violet); border-radius: 50%; margin: 0 12px;
transition: var(--transition-smooth);
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover {
transform: translateY(-50%) scale(1.1);
}
.gal-gallery .carousel-control-prev { left: 0 }
.gal-gallery .carousel-control-next { right: 0 }
.gal-gallery .gal-ctrl-icon { width: 2.6rem; height: 2.6rem; background-size: 60% 60% }
.gal-gallery .carousel-indicators { z-index: 10; bottom: -50px }
.gal-gallery .carousel-indicators button {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(0,0,0,0.5); border: none; transition: var(--transition-fast);
}
.gal-gallery .carousel-indicators button:hover { background: var(--violet); }
.gal-gallery .carousel-indicators button.active { background: var(--violet); }
.gal-gallery { padding-bottom: 56px }
#galLightbox .modal-content { background: #000 }
#galLightboxImg { max-height: 86vh; width: 100%; height: auto; object-fit: contain; background: #000 }
.gal-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
border: 0; width: 44px; height: 44px; border-radius: 999px;
background: rgba(255,255,255,.18); color: #fff; font-size: 30px; line-height: 44px; text-align: center; z-index: 5; cursor: pointer;
transition: var(--transition-fast);
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.1); }
.gal-lightbox-nav.gal-prev { left: 20px }
.gal-lightbox-nav.gal-next { right: 20px }
@media (max-width: 575.98px) {
.gal-frame { height: clamp(200px, 40vh, 360px) }
}
/* AGENDA SECTION */
.agenda-img {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: var(--transition-smooth);
}
.agenda-img:hover {
transform: translateY(-5px);
}
.agenda-img img {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.agenda-img:hover img {
transform: scale(1.03);
}
/* ANIMACIONES */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
/* RESPONSIVE */
@media (max-width: 768px) {
.section {
padding: 70px 0;
}
.hero {
padding: 100px 0 70px;
}
.hero h1 {
font-size: 2.5rem;
}
.nav-pills {
flex-wrap: wrap;
justify-content: center;
}
.btn-primary-custom,
.btn-outline-custom {
padding: 0.7rem 1.5rem;
}
}
/* SCROLLBAR PERSONALIZADA */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--soft);
}
::-webkit-scrollbar-thumb {
background: var(--gradient-violet);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--violet-dark);
}
/* DECORACIONES */
.floating-shape {
position: absolute;
border-radius: 50%;
background: var(--violet-light);
filter: blur(40px);
z-index: -1;
animation: float 20s infinite linear;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -30px) rotate(120deg); }
66% { transform: translate(-20px, 20px) rotate(240deg); }
}
.shape-1 {
width: 300px;
height: 300px;
top: 10%;
left: 5%;
background: var(--violet-light);
}
.shape-2 {
width: 200px;
height: 200px;
bottom: 20%;
right: 10%;
background: var(--yellow-light);
animation-delay: -5s;
}
/* BADGES */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.4rem 0.8rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
}
.badge-violet {
background: var(--violet-light);
color: var(--violet);
}
.badge-yellow {
background: var(--yellow-light);
color: #7a5b00;
}
/* SEPARADORES */
.section-divider {
height: 4px;
width: 80px;
background: var(--gradient-violet);
margin: 2rem auto;
border-radius: 2px;
}
/* =========================
FIX MOBILE OVERFLOW / COLAPSE
- Evita scroll horizontal (hamburguesa fuera de pantalla)
- Social links del hero: wrap en mobile (TikTok/IG/FB)
========================= */
html, body { max-width: 100%; overflow-x: hidden; }
/* Navbar brand: permitir achique sin empujar el toggler */
.brand-container { min-width: 0; }
.brand-text { min-width: 0; }
@media (max-width: 420px){
.brand-container{ gap:10px; }
.brand-badge{ width:44px; height:44px; }
.brand-name{ font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 180px; }
.brand-tagline{ display:none; }
}
/* Social links hero: que no se corten en phone */
.social-links{ flex-wrap: wrap; }
.social-link{ max-width:100%; }
@media (max-width: 576px){
.social-links{ gap:.75rem; }
.social-link{
flex: 1 1 calc(50% - .75rem);
justify-content:center;
}
}
@media (max-width: 420px){
.social-link{ flex: 1 1 100%; }
}
/* ===== Viaje destacado teaser ===== */
.viaje-teaser-card{
background:
radial-gradient(circle at 20% 20%, rgba(250,204,21,.12), transparent 35%),
radial-gradient(circle at 80% 25%, rgba(109,40,217,.18), transparent 35%),
radial-gradient(circle at 30% 80%, rgba(109,40,217,.10), transparent 30%),
linear-gradient(135deg, #0b1220 0%, #0f1d35 45%, #12233f 100%);
border: 1px solid rgba(255,255,255,.08);
color: #fff;
overflow: hidden;
position: relative;
}
.viaje-teaser-card::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at top left, rgba(250,204,21,.18), transparent 18%),
radial-gradient(circle at bottom right, rgba(109,40,217,.22), transparent 22%);
pointer-events:none;
}
.viaje-teaser-inner{
position:relative;
z-index:2;
}
.viaje-logo{
width: 110px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}
.viaje-teaser-title{
color: var(--yellow);
font-weight: 900;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.05;
text-transform: uppercase;
letter-spacing: -.02em;
text-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.viaje-teaser-card .mini-muted{
color: rgba(255,255,255,.86);
}
.viaje-teaser-boxes{
display:flex;
flex-direction:column;
gap:12px;
}
.viaje-pill{
border: 2px solid rgba(255,255,255,.7);
color: #fff;
border-radius: 999px;
padding: .9rem 1.1rem;
text-align: center;
font-weight: 800;
background: rgba(255,255,255,.04);
backdrop-filter: blur(6px);
box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.viaje-teaser-card .btn-outline-custom{
background: transparent;
border-color: rgba(255,255,255,.5);
color: #fff;
}
.viaje-teaser-card .btn-outline-custom:hover{
background: rgba(255,255,255,.08);
border-color: #fff;
color: #fff;
}
@media (max-width: 767.98px){
.viaje-logo{
width: 90px;
}
.viaje-pill{
font-size: .95rem;
padding: .85rem 1rem;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
.comp-imgbox{
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.comp-img{
width:100%;
height:auto;
max-height:380px;
object-fit:contain;
}
@media (max-width:991px){
.comp-img{ max-height:320px; }
}
@media (max-width:575px){
.comp-img{ max-height:260px; }
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* Imagen competencia: completa (contain) pero con altura máxima responsiva */
.comp-imgbox{
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.comp-img{
width:100%;
height:auto;
max-height: 380px; /* desktop */
object-fit: contain; /* NO corta */
object-position: center;
display:block;
}
@media (max-width: 991.98px){
.comp-img{ max-height: 320px; }
}
@media (max-width: 575.98px){
.comp-img{ max-height: 260px; }
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* Stack flotante */
.float-stack{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
font-family:inherit;
}
.float-btn{
width:54px;
height:54px;
border-radius:999px;
border:none;
display:grid;
place-items:center;
cursor:pointer;
text-decoration:none;
color:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.22);
transition:transform .25s, box-shadow .25s, filter .25s;
font-size:22px;
}
.float-btn:hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 18px 44px rgba(0,0,0,.28);
filter:saturate(1.1);
}
/* Colores redes */
.float-btn.wa{ background:linear-gradient(135deg,#25D366,#128C7E); }
.float-btn.insta{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.float-btn.fb{ background:linear-gradient(135deg,#1877f2,#0f5cc5); }
.float-btn.tiktok{ background:linear-gradient(135deg,#111,#333); }
/* Card WhatsApp */
.wa-card{
position:absolute;
right:0;
bottom:72px;
width:min(360px,92vw);
background:#fff;
border-radius:18px;
border:1px solid rgba(0,0,0,.10);
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.25s ease;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:linear-gradient(135deg,#6d28d9,#4c1d95);
color:#fff;
}
.wa-avatar{
width:40px;height:40px;border-radius:12px;
background:rgba(255,255,255,.18);
display:grid;place-items:center;
font-weight:900;
}
.wa-title{ font-weight:900; }
.wa-status{ font-size:.85rem; opacity:.9; }
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
line-height:1;
}
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f6f7fb;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background:#fff;
border:1px solid rgba(0,0,0,.10);
align-self:flex-start;
}
.wa-user{
background:rgba(109,40,217,.10);
border:1px solid rgba(109,40,217,.22);
align-self:flex-end;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid rgba(0,0,0,.10);
background:#fff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid rgba(0,0,0,.12);
font-family:inherit;
outline:none;
}
.wa-send{
background:linear-gradient(135deg,#6d28d9,#4c1d95);
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{ filter:brightness(1.05); }
@media (max-width:480px){
.float-stack{ right:14px; bottom:14px; }
.wa-card{ width:calc(100vw - 24px); }
}