Preview de mixed.css
/* MIXED CSS PACK */
/* Template: irumajoyas.com.ar/index.html */
/* Template mtime: 2025-10-24 15:19:01 */
/* 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.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
/* Paleta refinada para joyería */
--gold: #D4AF37;
--gold-light: #E8D9A0;
--gold-dark: #B8860B;
--silver: #C0C0C0;
--silver-light: #E8E8E8;
--silver-dark: #A0A0A0;
--dark: #1A1A1A;
--dark-light: #2D2D2D;
--text: #333333;
--text-light: #666666;
--bg: #FAFAFA;
--bg-light: #FFFFFF;
--accent: #8B4513; /* Marrón cálido para contraste */
}
/* Scroll: sin smooth global (evita choques con animaciones/JS) */
html { scroll-behavior: auto; }
body {
font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
}
.serif-font { font-family: 'Playfair Display', serif; }
/* ===== NAVBAR (optimizada sin blur) ===== */
.navbar {
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
padding: 1rem 0;
will-change: background-color, box-shadow, padding;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
padding: 0.5rem 0;
}
.navbar-brand {
font-weight: 600;
font-size: 1.4rem;
color: var(--dark);
}
/* Asegurar que el toggler sea visible */
.navbar .navbar-toggler { border: none; box-shadow: none !important; }
.navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26,26,26,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.brand-badge {
width: 50px;
height: 50px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
color: white;
font-size: 1.2rem;
transition: transform 0.2s ease;
will-change: transform;
}
.navbar .nav-link {
color: var(--text);
font-weight: 500;
position: relative;
margin: 0 0.5rem;
transition: color 0.2s ease;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--gold); }
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: -5px; left: 0; width: 0; height: 2px;
background: var(--gold);
transition: width 0.2s ease;
}
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: 100%; }
.btn-cta {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
color: white;
font-weight: 600;
border: none;
border-radius: 30px;
padding: 0.6rem 1.5rem;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); color: white; }
.btn-outline-light {
border: 1px solid var(--gold);
color: var(--gold);
border-radius: 30px;
padding: 0.6rem 1.5rem;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline-light:hover { background: var(--gold); color: white; }
/* ===== HERO ===== */
.hero {
position: relative;
overflow: hidden;
color: var(--dark);
background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
padding: 150px 0 100px;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero::before {
content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(212,175,55,0.03)"/></svg>');
background-size: cover;
}
.hero-h1 { font-weight: 700; font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.2; }
.hero-lead { color: var(--text-light); font-size: 1.2rem; margin-bottom: 2rem; line-height: 1.6; }
.bubble {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.6rem 1.2rem; border-radius: 30px;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.2);
color: var(--gold-dark); font-size: 0.9rem; font-weight: 500; margin-bottom: 1.5rem;
}
.hero-image-container {
position: relative; border-radius: 20px; overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transition: transform 0.35s ease, box-shadow 0.35s ease;
will-change: transform;
}
.hero-image-container:hover { transform: translateY(-2px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); }
@media (max-width: 768px) {
.hero-h1 { font-size: 2.5rem; }
.hero-lead { font-size: 1rem; }
.hero-image-container { margin-top: 2rem; transform: none !important; }
}
/* ===== SECTION BASE ===== */
.section { padding: 100px 0; position: relative; }
.section-title {
font-weight: 700; margin-bottom: 1rem; color: var(--dark);
position: relative; display: inline-block;
}
.section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50px; height: 3px; background: var(--gold); }
.section-sub { color: var(--text-light); margin-bottom: 2rem; font-size: 1.1rem; }
/* ===== CARDS ===== */
.card-soft {
background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden; position: relative; will-change: transform;
}
.card-soft::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
}
.card-soft:hover::before { transform: scaleX(1); }
.card-soft:hover { transform: translateY(-6px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.09); }
.icon-circle {
width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(184, 134, 11, 0.1) 100%);
border: 1px solid rgba(212, 175, 55, 0.2); color: var(--gold);
font-size: 1.5rem; margin-bottom: 1.5rem;
}
/* ===== TICKER ===== */
.ticker-wrap { position: relative; padding: 20px 0; }
.ticker-viewport {
overflow: auto; scroll-snap-type: x mandatory; display: flex; gap: 20px;
padding: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ticker-viewport::-webkit-scrollbar { display: none; }
.ticker-slide {
flex: 0 0 auto; width: min(400px, 85vw); aspect-ratio: 1/1; scroll-snap-align: center;
position: relative; background: var(--bg-light); border-radius: 15px; overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}
.ticker-slide:hover { transform: scale(1.03); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }
.ticker-slide img { width: 100%; height: 100%; object-fit: cover; }
.ticker-controls {
position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center;
pointer-events: none; padding: 0 10px;
}
.ticker-btn {
pointer-events: auto; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
border: none; background: rgba(255, 255, 255, 0.9); color: var(--dark);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, background 0.2s ease;
}
.ticker-btn:hover { background: var(--gold); color: white; transform: scale(1.08); }
/* ===== FAQ ===== */
.accordion-button {
background: var(--bg-light); color: var(--dark); font-weight: 500; padding: 1.2rem 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 10px !important; margin-bottom: 10px; box-shadow: none;
}
.accordion-button:not(.collapsed) { color: var(--gold); background: rgba(212, 175, 55, 0.05); border-color: rgba(212, 175, 55, 0.2); }
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D4AF37'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-item { background: transparent; border: none; }
.accordion-body {
padding: 1rem 1.5rem; background: var(--bg-light); border-radius: 0 0 10px 10px;
border: 1px solid rgba(0, 0, 0, 0.05); border-top: none;
}
/* ===== CONTACTO ===== */
.contact-card .form-control {
background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.1); color: var(--text);
border-radius: 10px; padding: 0.8rem 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-card .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.15); }
/* ===== FOOTER ===== */
footer { background: var(--dark); color: white; padding: 60px 0 30px; }
.footer-mini { color: rgba(255, 255, 255, 0.7); }
/* Helpers */
.text-muted-2 { color: var(--text-light); }
.link-soft { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.link-soft:hover { color: var(--gold); }
.link-light { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s ease; }
.link-light:hover { color: var(--gold-light); }
/* Animaciones */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.delay-1 { animation-delay: 0.15s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.45s; }
/* Shine */
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::before {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s; z-index: 1;
}
.shine-effect:hover::before { left: 100%; }
/* Respeto a reduced-motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* ===== INLINE <style> BLOCK #2 ===== */
#trabajos .ticker-wrap{position:relative;}
#trabajos .ticker-viewport{
display:grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 8px 8px 16px;
}
#trabajos .ticker-viewport::-webkit-scrollbar{display:none}
#trabajos .ticker-slide{scroll-snap-align:start}
#trabajos .img-box{
border-radius:16px;
background:#111;
border:1px solid rgba(212,175,55,.15);
box-shadow:0 10px 24px rgba(0,0,0,.08);
aspect-ratio:1/1;
display:grid; place-items:center;
}
#trabajos .img-box img{
width:100%; height:100%; object-fit:contain; border-radius:14px;
}
/* Controles */
#trabajos .ticker-controls{
position:absolute; inset:auto 0 4px 0; display:flex; justify-content:space-between; pointer-events:none;
}
#trabajos .ticker-btn{
pointer-events:auto; border:0; background:rgba(17,17,17,.55); color:#fff;
width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
backdrop-filter:saturate(1.2) blur(2px);
}
/* Tamaños responsivos de columna */
@media (min-width: 1400px){
#trabajos .ticker-viewport{grid-auto-columns:minmax(380px, 1fr);}
}
@media (max-width: 991.98px){
#trabajos .ticker-viewport{grid-auto-columns:minmax(320px, 1fr);}
}
@media (max-width: 575.98px){
#trabajos .ticker-viewport{grid-auto-columns:100%;}
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ===== Overrides v3: 2 grandes en desktop, sin fondo negro ===== */
#trabajos .ticker-viewport{ gap:24px; padding: 8px 8px 20px; }
/* 2 por vista en desktop (columnas anchas) */
@media (min-width: 992px){
#trabajos .ticker-viewport{ grid-auto-columns: minmax(520px, 1fr); }
}
/* 1-1.5 cards en tablets */
@media (max-width: 991.98px) and (min-width: 576px){
#trabajos .ticker-viewport{ grid-auto-columns: minmax(380px, 1fr); }
}
/* 1 card en phone */
@media (max-width: 575.98px){
#trabajos .ticker-viewport{ grid-auto-columns: 100%; }
}
#trabajos .img-box{
background: transparent; /* sin contenedor negro */
border: none;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
aspect-ratio: 1/1;
}
#trabajos .img-box img{
width:100%; height:100%;
object-fit: cover; /* llena el cuadro sin barras */
border-radius:16px;
}
/* Botones un poco más grandes para las imágenes grandes */
#trabajos .ticker-btn{ width:48px; height:48px; }
/* ===== INLINE <style> BLOCK #4 ===== */
/* ===== Ticker v4: infinito real (DOM recycle), BIG slides, sin fondo negro ===== */
#trabajos .ticker-wrap{ position:relative; overflow:hidden; }
#trabajos .ticker-viewport{
display:flex; gap:24px; padding:10px 12px 20px;
will-change: transform;
transform: translateX(0);
}
#trabajos .ticker-slide{ flex:0 0 auto; width:640px; }
@media (max-width: 1199.98px){ #trabajos .ticker-slide{ width:520px; } }
@media (max-width: 991.98px){ #trabajos .ticker-slide{ width:420px; } }
@media (max-width: 575.98px){ #trabajos .ticker-slide{ width:100%; } }
#trabajos .img-box{
aspect-ratio: 1/1;
border-radius:18px;
background: transparent;
border: none;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
display:grid; place-items:center;
}
#trabajos .img-box img{
width:100%; height:100%; object-fit: contain; /* ver según contenido, sin recortes */
border-radius:16px;
background: transparent;
}
#trabajos .ticker-controls{ position:absolute; inset:auto 0 6px 0; display:flex; justify-content:space-between; pointer-events:none; }
#trabajos .ticker-btn{ pointer-events:auto; border:0; background:rgba(17,17,17,.55); color:#fff; width:50px; height:50px; border-radius:999px; display:grid; place-items:center; }
/* ===== INLINE <style> BLOCK #5 ===== */
/* ===== Ticker v5: infinito CSS (marquee), tiles GRANDES, sin fondo negro ===== */
#trabajos .ticker-stage{ position:relative; overflow:hidden; }
#trabajos .marquee{
display:flex; gap:24px; padding:10px 12px 20px;
width:max-content;
animation: marquee-linear 40s linear infinite;
}
/* Pausa al hover */
#trabajos .ticker-stage:hover .marquee{ animation-play-state: paused; }
@keyframes marquee-linear {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Cada slide */
#trabajos .slide{ flex:0 0 auto; width:640px; }
@media (max-width: 1199.98px){ #trabajos .slide{ width:520px; } }
@media (max-width: 991.98px){ #trabajos .slide{ width:420px; } }
@media (max-width: 575.98px){ #trabajos .slide{ width:100%; } }
#trabajos .img-box{
aspect-ratio: 1/1; border-radius:18px; background:transparent; border:none;
box-shadow:0 10px 24px rgba(0,0,0,.08); display:grid; place-items:center;
}
#trabajos .img-box img{ width:100%; height:100%; object-fit:contain; border-radius:16px; background:transparent; }
/* Controles: opcionales para saltar en bloques (no afectan el loop) */
#trabajos .ticker-controls{ position:absolute; inset:auto 0 6px 0; display:flex; justify-content:space-between; pointer-events:none; }
#trabajos .ticker-btn{ pointer-events:auto; border:0; background:rgba(17,17,17,.55); color:#fff; width:50px; height:50px; border-radius:999px; display:grid; place-items:center; }
/* ===== INLINE <style> BLOCK #6 ===== */
/* ===== Mobile/overflow fixes ===== */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; }
/* Avoid accidental 100vw overflow inside sections */
.container, .container-fluid, .row { overflow-x: clip; }
/* Navbar: ensure hamburger doesn't require horizontal scroll */
.navbar .navbar-brand img { height: 32px; width: auto; }
.navbar .navbar-brand { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar .navbar-collapse { width: 100%; flex-grow: 1; }
@media (max-width: 991.98px) {
.navbar { padding-left: 0.5rem; padding-right: 0.5rem; }
.navbar .container, .navbar .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
.navbar .navbar-collapse.show { max-height: 80vh; overflow-y: auto; }
}
/* Hero text sizing for small screens */
@media (max-width: 575.98px) {
.hero-h1 { font-size: 1.95rem !important; line-height: 1.15 !important; }
.hero-lead { font-size: 0.98rem !important; }
}
/* Tickers & tracks should never push the layout */
#trabajos .ticker-container,
#trabajos .ticker-wrap,
#trabajos .ticker-stage,
#trabajos .ticker-viewport { overflow-x: hidden; }
#trabajos .ticker-track { will-change: transform; }
/* Tienda embed: avoid page-level horizontal scroll in normal (non-FS) mode */
#tienda .store-frame-wrap { width: 100%; }
#tienda .store-frame-viewport { width: 100%; }
/* ===== INLINE <style> BLOCK #7 ===== */
:root{
--font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-head: 'Outfit', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body{ font-family: var(--font-body) !important; font-feature-settings: "ss01" on, "cv01" on; }
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,
.navbar-brand .brand-text,
.hero-h1{ font-family: var(--font-head) !important; letter-spacing: -0.015em; }
/* Subtle weight tuning for luxury feel */
h1,.hero-h1{ font-weight: 700; }
h2,h3{ font-weight: 600; }
.btn, .nav-link{ font-weight: 600; letter-spacing: .01em; }
/* ===== INLINE <style> BLOCK #8 ===== */
/* ====== Ticker Espectacular ====== */
#trabajos .ticker-container{
position:relative;width:100%;overflow:hidden;margin:44px 0;padding:10px 0
}
#trabajos .ticker-track{
display:flex;gap:28px;transition:transform .5s ease;will-change:transform
}
/* Cards un poco más grandes */
#trabajos .ticker-item{
flex:0 0 auto;width:360px;height:360px;border-radius:18px;background:#fff;
border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 28px rgba(0,0,0,.06);
overflow:hidden;display:grid;place-items:center;cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease
}
#trabajos .ticker-item:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 36px rgba(0,0,0,.12)}
#trabajos .ticker-item img{width:100%;height:100%;object-fit:contain;display:block}
/* Controles del ticker */
#trabajos .ticker-controls{
display:flex;justify-content:center;gap:16px;margin-top:18px
}
#trabajos .ticker-btn{
width:48px;height:48px;border-radius:50%;background:rgba(212,175,55,.10);
border:1px solid rgba(212,175,55,.30);display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .25s ease
}
#trabajos .ticker-btn:hover{background:rgba(212,175,55,.18);transform:scale(1.06)}
#trabajos .ticker-btn i{font-size:1.2rem;color:#333}
/* Responsive */
@media (max-width: 992px){
#trabajos .ticker-item{width:320px;height:320px}
}
@media (max-width: 768px){
#trabajos .ticker-item{width:280px;height:280px}
}
@media (max-width: 576px){
#trabajos .ticker-item{width:240px;height:240px}
}
/* Modal Galería (único) */
#galleryModal .modal-content{
background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;overflow:hidden
}
#galleryModal .modal-body{padding:0;position:relative;background:#fff}
#galleryModal .btn-close{
position:absolute;right:14px;top:14px;z-index:5;background-color:rgba(255,255,255,.9);
border-radius:50%;padding:10px
}
#galleryModal .modal-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(0,0,0,.52);
border:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
transition:all .25s ease
}
#galleryModal .modal-nav:hover{background:rgba(0,0,0,.72);transform:translateY(-50%) scale(1.06)}
#galleryModal .modal-nav.prev{left:10px}
#galleryModal .modal-nav.next{right:10px}
#galleryModal .modal-nav i{font-size:1.5rem;color:#fff}
#galleryModal .ratio{background:#fff}
#galleryModal #galleryImage{width:100%;height:100%;object-fit:contain}
/* ===== INLINE <style> BLOCK #9 ===== */
:root{
--accent:#d4af37;
--accent-20: rgba(212,175,55,.20);
--card:#ffffff;
--ink:#222;
--line:rgba(0,0,0,.08);
--shadow:0 10px 24px rgba(0,0,0,.06);
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
}
#tienda .store-frame-wrap{
border:1px solid var(--line);
border-radius:18px;
background:var(--card);
box-shadow:var(--shadow);
overflow:hidden;
position:relative;
isolation:isolate;
}
#tienda .store-toolbar{
display:flex;gap:.75rem;align-items:center;justify-content:space-between;
padding:12px;border-bottom:1px solid var(--line);background:#fff;
position:sticky;top:0;z-index:3;
}
#tienda .btn-store{
display:inline-flex;align-items:center;gap:.5rem;
padding:.52rem .95rem;border-radius:12px;border:1px solid var(--line);
background:#fff; color:var(--ink); font-size:.95rem; cursor:pointer; text-decoration:none;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
touch-action: manipulation;
}
#tienda .btn-store.primary{ background:var(--accent); border-color:var(--accent); color:#111 }
#tienda .btn-store:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08) }
#tienda .btn-store:active{ transform:none }
#tienda .store-frame-viewport{
position:relative; width:100%;
height:1200px; /* desktop base */
background:#fff;
}
#tienda iframe#storeIframe{
position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#fff;
touch-action: pan-x pan-y;
}
#tienda .store-loader{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg,#fff,rgba(255,255,255,.94));
z-index:2;
}
#tienda .spinner{
width:22px;height:22px;border-radius:50%;
border:3px solid var(--accent-20); border-top-color:var(--accent);
animation:spin 1s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
#tienda .store-fallback{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
background:repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f6f6f6 10px, #f6f6f6 20px);
border-top:1px dashed var(--line);
z-index:1;
}
/* ========= FULLSCREEN REAL (portaleado al <body>) ========= */
.tienda-portal-backdrop{
position:fixed; inset:0; z-index:9998; background:#fff;
}
.tienda-portal-wrap{
position:fixed; inset:0; z-index:9999; background:#fff; border:0; border-radius:0; box-shadow:none;
margin:0; padding:0;
display:flex; flex-direction:column;
}
.tienda-portal-wrap .store-toolbar{
position:relative; top:0; left:0; right:0; border-bottom:1px solid var(--line);
padding:12px 14px; padding-top: calc(12px + var(--safe-t)); background:#fff; z-index:2;
}
.tienda-portal-wrap .store-frame-viewport{
position:relative; flex:1 1 auto; width:100%;
/* 100dvh cubre viewport dinámico en navegadores modernos */
min-height: calc(100dvh - 56px - var(--safe-t) - var(--safe-b));
height: auto;
background:#fff;
}
.tienda-portal-wrap iframe#storeIframe{
position:absolute; inset:0; width:100%; height:100%;
}
/* MÓVIL: botones apilados */
@media (max-width: 576px){
#tienda .store-toolbar{ flex-direction: column; align-items: stretch; gap: .75rem; }
#tienda .left-tools, #tienda .right-tools{ display: grid; grid-template-columns: 1fr; gap: .6rem; }
#tienda .btn-store{ width:100%; justify-content:center; padding:.9rem 1rem; border-radius:16px; font-size:1rem; }
}
/* ===== INLINE <style> BLOCK #10 ===== */
:root{
/* WhatsApp */
--wa: #25D366; --wa-dark: #128C7E;
/* Redes Sociales */
--ig: #E4405F; --ig-dark: #C13584;
--fb: #1877F2; --fb-dark: #166FE5;
/* Paleta del sitio */
--brand: #207a58; --accent: #e0b600;
/* Tarjeta clara */
--wa-card-bg: #ffffff; --wa-card-text:#0f172a; --wa-muted:#64748b; --wa-stroke:#e7e9ee;
}
/* WhatsApp Styles */
.wa-float{ position: fixed; right: 18px; bottom: 18px; z-index: 1050; font-family: inherit; }
.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(2,6,23,.18);
cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
}
.wa-btn::after{ content:""; position:absolute; inset:0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
opacity:0; transition:opacity .3s;
}
.wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(2,6,23,.28); }
.wa-btn:hover::after{ opacity:1; }
.wa-card{
position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
background: var(--wa-card-bg); color: var(--wa-card-text); border-radius:18px; overflow:hidden;
box-shadow: 0 18px 60px rgba(15,23,42,.22); border:1px solid var(--wa-stroke);
transform: translateY(10px); opacity:0; transition: transform .28s ease, opacity .28s ease;
}
.wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
.wa-head{ display:flex; align-items:center; gap:12px; padding:14px; background: linear-gradient(180deg, #ffffff, #f7f9fb); border-bottom:1px solid var(--wa-stroke); }
.wa-avatar{ width:40px; height:40px; border-radius:8px; background:#fff; display:grid; place-items:center; border:1px solid var(--wa-stroke); overflow:hidden; }
.wa-title{ font-weight:700; font-size:1.05rem; }
.wa-status{ font-size:.85rem; color:var(--wa-muted); display:flex; align-items:center; gap:6px; }
.wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
.wa-close{ margin-left:auto; background:transparent; color:#111; border:0; font-size:22px; cursor:pointer; opacity:.6; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
.wa-close:hover{ opacity:1; background:#f1f5f9; }
.wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background:#fff; 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 2px 8px rgba(2,6,23,.08); animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.wa-bot{ background:#f7fafc; border:1px solid var(--wa-stroke); align-self:flex-start; border-bottom-left-radius:4px; }
.wa-user{ background: #eafff3; border:1px solid #c9f6de; align-self:flex-end; border-bottom-right-radius:4px; }
.wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:#fff; border-top:1px solid var(--wa-stroke); }
.wa-compose textarea{ resize:none; border-radius:12px; padding:10px 12px; border:1px solid var(--wa-stroke); background:#fff; color:#0f172a; outline:none; min-height:44px; font-family:inherit; transition:.2s; }
.wa-compose textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 2px rgba(32,122,88,.12); }
.wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.wa-send:hover{ background: var(--wa-dark); transform: translateY(-1px); }
/* Social Floats Styles */
.social-float{ position: fixed; right: 18px; z-index: 1040; font-family: inherit; }
.instagram-float{ bottom: 90px; }
.facebook-float{ bottom: 150px; }
.social-btn{
color:#fff; border:0; width:50px; height:50px; border-radius:50%;
display:grid; place-items:center; box-shadow:0 8px 25px rgba(2,6,23,.15);
cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
text-decoration: none;
}
.social-btn::after{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
opacity:0; transition:opacity .3s;
}
.social-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(2,6,23,.25); }
.social-btn:hover::after{ opacity:1; }
.instagram-btn{ background: linear-gradient(135deg, var(--ig), var(--ig-dark)); }
.facebook-btn{ background: linear-gradient(135deg, var(--fb), var(--fb-dark)); }
/* Scrollbar */
.wa-body::-webkit-scrollbar{ width:6px; } .wa-body::-webkit-scrollbar-track{ background:#f1f5f9; border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px; } .wa-body::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }
/* Responsive */
@media (max-width: 480px){
.wa-float, .social-float{ right:12px; bottom:12px; }
.instagram-float{ bottom: 74px; }
.facebook-float{ bottom: 128px; }
.wa-card{ width: calc(100vw - 24px); right:0; }
.social-btn{ width:48px; height:48px; }
}