/* 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/bootstrap@5.3.3/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/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; }
  }