Álbum de páginas – nodo25

/* ═══════════════════════════════════════
       VARIABLES & RESET
    ═══════════════════════════════════════ */
    :root {
      --accent:   #efb208;
      --accent-dark: #c99a00;
      --accent-glow: rgba(252,197,1,.18);
      --ink:      #0b0b0b;
      --muted:    #5d5d5d;
      --line:     #e8e8e8;
      --soft:     #f8f8f8;
      --white:    #ffffff;
      --shadow:   0 20px 60px rgba(0,0,0,.09);
      --shadow-xl:0 32px 80px rgba(0,0,0,.13);
      --radius:   10px;
      --radius-lg:18px;
      --font-display: 'Barlow Condensed', sans-serif;
      --font-body:    'DM Sans', sans-serif;
      --nav-h: 70px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; display: block; }
    a   { color: inherit; text-decoration: none; }

    /* ═══════════════════════════════════════
       NAVBAR
    ═══════════════════════════════════════ */
    .site-navbar {
      height: var(--nav-h);
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid rgba(0,0,0,.06);
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.04);
      transition: box-shadow .3s;
    }

    .site-navbar .container {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: .7rem;
      font-family: var(--font-body);
      font-weight: 700;
      color: var(--ink);
      flex-shrink: 0;
    }

    .brand-logo {
      height: 40px;
      width: auto;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .brand-text {
      font-size: .82rem;
      line-height: 1.2;
      max-width: 240px;
      font-weight: 600;
      letter-spacing: -.01em;
    }

    .navbar-toggler {
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      padding: .42rem .6rem;
      background: transparent;
      margin-left: auto;
    }

    .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-glow); outline: none; }

    .navbar-nav { gap: .1rem; }

    .nav-link {
      color: var(--ink);
      font-weight: 600;
      font-size: .9rem;
      padding: .5rem .9rem !important;
      border-radius: 6px;
      transition: background .18s, color .18s;
      letter-spacing: -.01em;
    }

    .nav-link:hover { background: var(--soft); color: var(--ink); }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .55rem 1.15rem !important;
      background: var(--accent);
      color: var(--ink) !important;
      border-radius: var(--radius);
      font-weight: 800;
      font-size: .88rem;
      border: 1.5px solid var(--accent-dark);
      letter-spacing: -.01em;
      transition: background .18s, transform .18s, box-shadow .18s;
      margin-left: .4rem;
    }

    .nav-cta:hover {
      background: #ffd633;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(252,197,1,.35);
    }

    /* ═══════════════════════════════════════
       SHARED SECTION
    ═══════════════════════════════════════ */
    .section {
      padding: 96px 0;
      scroll-margin-top: var(--nav-h);
    }

    .section-soft { background: var(--soft); }

    /* ═══════════════════════════════════════
       EYEBROW
    ═══════════════════════════════════════ */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      color: #7a5e00;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: .9rem;
    }

    .eyebrow::before {
      content: "";
      display: block;
      width: 28px;
      height: 2.5px;
      background: var(--accent);
      border-radius: 99px;
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════════
       SECTION HEADINGS
    ═══════════════════════════════════════ */
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      font-weight: 900;
      line-height: 1.0;
      letter-spacing: -.01em;
      color: var(--ink);
      text-transform: uppercase;
    }

    .section-subtitle {
      max-width: 680px;
      margin: 1rem auto 0;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.7;
    }

    /* ═══════════════════════════════════════
       HERO
    ═══════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      padding-top: calc(var(--nav-h) + 64px);
      padding-bottom: 80px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: #fff;
    }

    /* subtle grain */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: .4;
    }

    .hero .container { position: relative; z-index: 1; }

    /* accent stripe top */
    .hero-stripe {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--accent);
      color: var(--ink);
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      padding: .38rem .85rem;
      border-radius: 99px;
      margin-bottom: 1.4rem;
    }

    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 7.5vw, 6.2rem);
      line-height: .95;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -.02em;
      text-transform: uppercase;
      margin-bottom: 1.4rem;
    }

    .hero-title em {
      font-style: normal;
      color: var(--accent);
      -webkit-text-stroke: 0;
    }

    .hero-lead {
      max-width: 580px;
      color: #2c2c2c;
      font-size: clamp(1rem, 1.4vw, 1.12rem);
      margin-bottom: .85rem;
      line-height: 1.7;
    }

    .hero-support {
      max-width: 560px;
      color: var(--muted);
      font-size: .96rem;
      margin-bottom: 2.2rem;
      line-height: 1.65;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .9rem;
      align-items: ce
/* ...cortado... */

:root {
    --wa: #25D366;
    --wa-dark: #1fb85a;
    --wa-light-bg: #ffffff;
    --wa-soft: #f6f8f7;
    --wa-border: #dde4df;
    --wa-text: #1c1f1d;
    --wa-muted: #6c756f;
  }

  .wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    font-family: inherit;
  }

  .wa-btn {
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--wa);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(0,0,0,.26);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    animation: waPulse 2.8s ease-out infinite;
  }

  .wa-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 42px rgba(0,0,0,.32);
    filter: brightness(.98);
  }

  @keyframes waPulse {
    0% {
      box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 0 rgba(37,211,102,.42);
    }
    70% {
      box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 14px rgba(37,211,102,0);
    }
    100% {
      box-shadow: 0 12px 34px rgba(0,0,0,.26), 0 0 0 0 rgba(37,211,102,0);
    }
  }

  .wa-card {
    position: absolute;
    right: 0;
    bottom: 78px;
    width: min(360px, 92vw);
    background: var(--wa-light-bg);
    color: var(--wa-text);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
    border: 1px solid var(--wa-border);
    transform: translateY(10px);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    z-index: 10000;
  }

  .wa-card[aria-modal="true"] {
    transform: translateY(0);
    opacity: 1;
  }

  .wa-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ffffff, #ecf6f0);
    border-bottom: 1px solid var(--wa-border);
  }

  .wa-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e9f7ef;
    display: grid;
    place-items: center;
    border: 1px solid #cfeeda;
    overflow: hidden;
    flex: 0 0 auto;
  }

  .wa-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
  }

  .wa-meta {
    min-width: 0;
  }

  .wa-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--wa-text);
    line-height: 1.15;
  }

  .wa-status {
    font-size: .84rem;
    color: var(--wa-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }

  .wa-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wa);
    flex: 0 0 auto;
  }

  .wa-close {
    margin-left: auto;
    background: transparent;
    color: var(--wa-muted);
    border: 0;
    font-size: 25px;
    cursor: pointer;
    opacity: .75;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, opacity .2s ease;
  }

  .wa-close:hover {
    opacity: 1;
    background: rgba(0,0,0,.05);
  }

  .wa-body {
    padding: 13px 14px;
    max-height: 40vh;
    overflow: auto;
    background: var(--wa-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .wa-bubble {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 14px;
    line-height: 1.35;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
    animation: waFadeIn .25s ease;
    font-size: .9rem;
  }

  @keyframes waFadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .wa-bot {
    background: #ffffff;
    border: 1px solid var(--wa-border);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
  }

  .wa-user {
    background: var(--wa);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
  }

  .wa-compose {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    background: #ffffff;
    border-top: 1px solid var(--wa-border);
  }

  .wa-compose textarea {
    resize: none;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid var(--wa-border);
    background: #f9fbfa;
    color: var(--wa-text);
    outline: none;
    min-height: 44px;
    font-family: inherit;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .wa-compose textarea:focus {
    border-color: var(--wa);
    box-shadow: 0 0 0 2px rgba(37,211,102,.15);
    background: #ffffff;
  }

  .wa-send {
    background: var(--wa);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
  }

  .wa-send:hover {
    background: var(--wa-dark);
    transform: scale(1.04);
  }

  .wa-body::-webkit-scrollbar {
    width: 6px;
  }

  .wa-body::-webkit-scrollbar-track {
    background: rgba(0,0,0,.03);
    border-radius: 3px;
  }

  .wa-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.14);
    border-radius: 3px;
  }

  @media (max-width: 480px) {
    .wa-float {
      right: 12px;
      bottom: 12px;
    }

    .wa-btn {
      width: 58px;
      height: 58px;
    }

    .wa-card {
      width: calc(100vw - 24px);
      right: 0;
      bottom: 72px;
    }
  }

:root {
      --accent:       #cc2132;
      --accent-dark:  #551b20;
      --accent-glow:  rgba(198, 74, 26, .18);
      --ink:          #0d0f12;
      --ink-mid:      #1c1f24;
      --muted:        #5a5f6a;
      --line:         #e4e7ed;
      --line-strong:  #cdd1d9;
      --soft:         #f4f5f8;
      --soft-2:       #eceef2;
      --white:        #ffffff;
      --radius:       10px;
      --radius-lg:    16px;
      --radius-xl:    22px;
      --shadow-sm:    0 2px 8px rgba(13,15,18,.06);
      --shadow-md:    0 8px 24px rgba(13,15,18,.09);
      --shadow-lg:    0 20px 50px rgba(13,15,18,.11);
      --shadow-xl:    0 32px 72px rgba(13,15,18,.14);
      --transition:   .22s cubic-bezier(.4,0,.2,1);
      --font-display: 'Barlow Condensed', sans-serif;
      --font-body:    'Barlow', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }

    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }

    /* ─── TYPOGRAPHY ─── */
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 4.5vw, 3.2rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -.01em;
      margin: 0 0 1rem;
    }

    .section-subtitle {
      color: var(--muted);
      font-size: 1.06rem;
      line-height: 1.72;
      max-width: 720px;
      margin: 0 auto;
    }

    .text-block {
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.82;
    }

    .text-block p + p { margin-top: .9rem; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      color: var(--accent);
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: .9rem;
    }

    .eyebrow::before {
      content: "";
      width: 24px;
      height: 2.5px;
      background: var(--accent);
      border-radius: 999px;
      flex: 0 0 24px;
    }

    /* ─── SECTIONS ─── */
    .section { padding: 96px 0; }
    .section-soft { background: var(--soft); }
    .section-soft-2 { background: var(--soft-2); }

    /* ─── BUTTONS ─── */
    .btn-accent {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--accent);
      --bs-btn-border-color: var(--accent);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: var(--accent-dark);
      --bs-btn-hover-border-color: var(--accent-dark);
      --bs-btn-active-color: #fff;
      --bs-btn-active-bg: var(--accent-dark);
      --bs-btn-active-border-color: var(--accent-dark);
      border-radius: var(--radius);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: .03em;
      padding: .8rem 1.6rem;
      transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
      box-shadow: 0 4px 16px rgba(198,74,26,.25);
    }

    .btn-accent:hover {
      box-shadow: 0 6px 22px rgba(198,74,26,.38);
      transform: translateY(-1px);
    }

    .btn-outline-accent {
      --bs-btn-color: var(--accent);
      --bs-btn-border-color: rgba(198,74,26,.4);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: var(--accent);
      --bs-btn-hover-border-color: var(--accent);
      border-radius: var(--radius);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: .03em;
      padding: .8rem 1.6rem;
      background: var(--white);
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    }

    .btn-outline-accent:hover { transform: translateY(-1px); }

    /* ─── NAVBAR ─── */
    .navbar {
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: box-shadow var(--transition);
      padding-top: .6rem;
      padding-bottom: .6rem;
    }

    .navbar.scrolled {
      box-shadow: var(--shadow-md);
    }

    .navbar-brand {
      gap: .7rem;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .brand-logo {
      width: auto;
      height: 42px;
      object-fit: contain;
    }

    .navbar-nav .nav-link {
      color: var(--ink-mid);
      font-family: var(--font-body);
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: .01em;
      padding-inline: .75rem;
      padding-block: .45rem;
      border-radius: 6px;
      transition: color var(--transition), background var(--transition);
      position: relative;
    }

    .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      bottom: 2px;
      left: .75rem;
      right: .75rem;
      height: 2px;
      background: var(--accent);
      border-radius: 999px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition);
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
      color: var(--accent);
      background: var(--accent-glow);
    }

    .navbar-nav .nav-link:hover::after { transform: scaleX(1); }

    .navbar-toggler {
      border: 1.5px solid var(--line-strong);
      border-radius: var(--radius);
      padding: .42rem .55rem;
    }

    /* ─── HERO ─── */
    .hero {
      padding: 64px 0 0;
      background: var(--white);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse 60% 50% at 95% 10%, rgba(198,74,26,.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 5% 80%, rgba(198,74,26,.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-inner {
      padding-bottom: 82px;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 6vw, 5.2rem);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.02em;
      margin-bottom: 1.1rem;
    }

    .hero h1 em {
      color: var(--accent);
      font-style: normal;
    }

    .hero-subtitle {
      color: var(--ink-mid);
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2.2vw, 1.38rem);
      font-weight: 600;
      letter-spacing: .01em;
      margin-bottom: 1rem;
    }

    .hero-text {
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.78;
      max-width: 600px;
      margin-bottom: 2rem;
    }

    .hero-media {
      position: relative;
      border-radius: var(--radius-xl);
      background: var(--soft);
      box-shadow: var(--shadow-xl);
      overflow: hidden;
      min-height: clamp(320px, 44vw, 560px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-media::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1.5px solid rgba(255,255,255,.6);
      z-index: 2;
      pointer-events: none;
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 5px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
      z-index: 3;
    }

    .hero-
/* ...cortado... */

.text-muted-small {
  font-size: 0.99rem;
  color: #999;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  text-align: center; /* centrado */
}

:root{
    --wa:#25D366;
    --wa-dark:#1fb85a;
    --wa-bg:#ffffff;
    --wa-soft:#f6f8f7;
    --wa-border:#dde4df;
    --wa-text:#1c1f1d;
    --wa-muted:#6c756f;
  }

  .wa-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    font-family:inherit;
  }

  .wa-btn{
    width:60px;
    height:60px;
    border:0;
    border-radius:50%;
    background:var(--wa);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }

  .wa-btn:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 14px 36px rgba(0,0,0,.28);
    filter:brightness(.98);
  }

  .wa-card{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px,92vw);
    background:var(--wa-bg);
    color:var(--wa-text);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    border:1px solid var(--wa-border);
    transform:translateY(10px);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
  }

  .wa-card[aria-modal="true"]{
    transform:translateY(0);
    opacity:1;
  }

  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:linear-gradient(135deg, #ffffff, #ecf6f0);
    border-bottom:1px solid var(--wa-border);
  }

  .wa-avatar{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#e9f7ef;
    display:grid;
    place-items:center;
    border:1px solid #cfeeda;
    overflow:hidden;
    flex:0 0 auto;
  }

  .wa-avatar img{
    width:28px;
    height:28px;
    object-fit:contain;
    display:block;
  }

  .wa-title{
    font-weight:800;
    font-size:1rem;
    color:var(--wa-text);
    line-height:1.1;
  }

  .wa-status{
    font-size:.84rem;
    color:var(--wa-muted);
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:2px;
  }

  .wa-status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--wa);
  }

  .wa-close{
    margin-left:auto;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--wa-muted);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
  }

  .wa-close:hover{
    background:rgba(0,0,0,.05);
    color:var(--wa-text);
  }

  .wa-body{
    padding:12px 14px;
    max-height:40vh;
    overflow:auto;
    background:var(--wa-soft);
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .wa-bubble{
    max-width:88%;
    padding:9px 11px;
    border-radius:14px;
    line-height:1.35;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    font-size:.9rem;
  }

  .wa-bot{
    background:#ffffff;
    border:1px solid var(--wa-border);
    align-self:flex-start;
    border-bottom-left-radius:4px;
  }

  .wa-user{
    background:var(--wa);
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px 12px;
    background:#ffffff;
    border-top:1px solid var(--wa-border);
  }

  .wa-compose textarea{
    resize:none;
    min-height:44px;
    max-height:120px;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid var(--wa-border);
    background:#f9fbfa;
    color:var(--wa-text);
    outline:none;
    font-family:inherit;
    font-size:.9rem;
    transition:.2s ease;
  }

  .wa-compose textarea:focus{
    border-color:var(--wa);
    box-shadow:0 0 0 2px rgba(37,211,102,.15);
    background:#ffffff;
  }

  .wa-send{
    border:0;
    border-radius:12px;
    background:var(--wa);
    color:#ffffff;
    padding:0 16px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s ease;
  }

  .wa-send:hover{
    background:var(--wa-dark);
    transform:scale(1.04);
  }

  .wa-body::-webkit-scrollbar{
    width:6px;
  }

  .wa-body::-webkit-scrollbar-track{
    background:rgba(0,0,0,.03);
    border-radius:3px;
  }

  .wa-body::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.14);
    border-radius:3px;
  }

  @media (max-width:480px){
    .wa-float{
      right:12px;
      bottom:12px;
    }

    .wa-btn{
      width:56px;
      height:56px;
    }

    .wa-card{
      width:calc(100vw - 24px);
      right:0;
      bottom:70px;
    }
  }

@font-face {
      font-family: 'Ziggurat';
      src:
        local('Ziggurat'),
        local('Ziggurat HTF'),
        local('Ziggurat HTF Black'),
        local('Ziggurat-HTF-Black'),
        url('fonts/Ziggurat.woff2') format('woff2'),
        url('fonts/Ziggurat.woff') format('woff'),
        url('fonts/Ziggurat.ttf') format('truetype'),
        url('fonts/ziggurat.woff2') format('woff2'),
        url('fonts/ziggurat.woff') format('woff'),
        url('fonts/ziggurat.ttf') format('truetype');
      font-weight: 400 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --accent: #feda00;
      --accent-strong: #d0b200;
      --dark: #1b171b;
      --ink: #111111;
      --paper: #ffffff;
      --soft: #f6f3ee;
      --muted: #666666;
      --line: rgba(27,23,27,.12);
      --nav-h: 76px;
      --display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
      --original-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
      --ziggurat: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
      --body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
      --mono: 'SFMono-Regular', Consolas, monospace;
      --ease: cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: var(--body); color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    h1, h2, h3, h4, h5, h6,
    .brand-text,
    .nav-link,
    .btn-accent,
    .btn-outline-dark-brand,
    .btn-submit,
    .service-card h3,
    .why-card h3,
    .featured-product-title,
    .footer-brand-name,
    .footer-list a {
      font-family: var(--display);
    }

    p,
    .lead-copy,
    .section-subtitle,
    .hero-lead,
    .hero-secondary,
    .service-card p,
    .why-card p,
    .accordion-body,
    .contact-detail,
    .footer-tagline {
      font-family: var(--body);
    }

    .brand-text,
    .nav-link,
    .btn-accent,
    .btn-outline-dark-brand,
    .btn-submit,
    .hero-title,
    .section-title,
    .service-card h3,
    .why-card h3,
    .featured-product-title,
    .footer-brand-name {
      font-weight: 400 !important;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9998;
      opacity: .022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 256px;
    }

    .site-nav {
      min-height: var(--nav-h);
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      border-bottom: 1px solid var(--line);
      transition: background .25s var(--ease), box-shadow .25s var(--ease);
      z-index: 1040;
    }

    .site-nav.is-scrolled {
      background: rgba(255,255,255,.98);
      box-shadow: 0 2px 0 var(--line), 0 12px 34px rgba(27,23,27,.08);
    }

    .navbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .brand-logo { height: 42px; width: auto; object-fit: contain; flex: 0 0 auto; }
    .brand-text { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .035em; line-height: 1; color: var(--dark); text-transform: uppercase; white-space: nowrap; }

    .navbar-toggler {
      width: 44px;
      height: 44px;
      border: 1.5px solid var(--dark);
      border-radius: 4px;
      padding: 0;
      background: transparent;
      box-shadow: none !important;
      display: grid;
      place-items: center;
    }

    .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(254,218,0,.28) !important; }
    .toggler-bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
    .toggler-bars span { display: block; height: 1.5px; background: var(--dark); }

    .nav-link {
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .055em;
      text-transform: uppercase;
      color: var(--dark);
      padding: .6rem .72rem !important;
      transition: color .18s var(--ease);
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: .72rem;
      right: .72rem;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .22s var(--ease);
    }

    .nav-link:hover { color: var(--accent-strong); }
    .nav-link:hover::after { transform: scaleX(1); }

    .btn-accent, .btn-outline-dark-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 22px;
      border-radius: 0;
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
    }

    .btn-accent {
      background: var(--dark);
      color: #fff !important;
      border: 1px solid var(--dark);
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
    }

    .btn-accent:hover { background: var(--accent); border-color: var(--accent); color: var(--dark) !important; transform: translateY(-1px); }

    .btn-outline-dark-brand {
      color: var(--dark);
      border: 1.5px solid var(--dark);
      background: transparent;
    }

    .btn-outline-dark-brand:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); transform: translateY(-1px); }

    .hero {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: stretch;
      padding: var(--nav-h) 0 0;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #030303;
      color: #fff;
    }

    .hero::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(190px, 28vh, 310px);
      background: linear-gradient(180deg, rgba(3,3,3,0), #030303 34%, #030303 100%);
      z-index: -1;
    }

    .hero-shell {
      min-height: calc(100vh - var(--nav-h));
      min-height: calc(100svh - var(--nav-h));
      align-items: stretch;
      row-gap: 0;
    }

    .hero-copy {
      max-width: 650px;
      min-height: calc(100vh - var(--nav-h));
      min-height: calc(100svh - var(--nav-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(48px, 6vw, 86px) 0;
      position: relative;
      z-index: 2;
    }

    .hero .eyebrow { color: var(--accent); }
    .hero .eyebrow::before { background: var(--accent); }

    .hero-title {
      font-family: var(--display);
      font-size: clamp(68px, 9.6vw, 148px);
      font-weight: 700;
      line-height: .84;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: #fff;
      margin: 0 0 22px;
      text-wrap: balance;
    }

    .hero-lead {
      max-width: 610px;
      font-size: clamp(17px, 1.55vw, 20px);
      line-height: 1.65;
      color: rgba(255,255,255,.86);
      font-weight: 400;
      margin-bottom: 18px;
  
/* ...cortado... */

.hero {
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: var(--nav-h) 0 0;
      background: #030303;
      color: #fff;
    }

    .hero::before { display: none; }

    .hero-video-wrap {
      position: relative;
      z-index: 0;
      width: 100%;
      height: clamp(420px, 58vh, 680px);
      margin-top: 0;
      overflow: hidden;
      pointer-events: none;
      background: #181f20;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover !important;
      object-position: center center;
      transform: none;
      filter: contrast(1.04) saturate(1.02);
      background: #181f20;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.03) 56%, rgba(3,3,3,.62) 86%, #030303 100%);
      pointer-events: none;
    }

    .hero-noise {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      background-size: 200px;
      opacity: .45;
      pointer-events: none;
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 100%;
      max-width: none;
      min-height: clamp(225px, 30vh, 350px);
      margin-top: clamp(4px, 1.2vw, 18px);
      padding: clamp(24px, 3.2vw, 42px) 24px clamp(30px, 3.8vw, 52px);
      background: #030303;
      box-shadow: 0 -18px 54px rgba(0,0,0,.7);
      text-align: center;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .hero-kicker::before,
    .hero-kicker::after {
      content: '';
      width: 28px;
      height: 1px;
      background: rgba(254,218,0,.7);
    }

    .hero-title {
      width: 100%;
      max-width: 100%;
      font-family: var(--display);
      font-size: clamp(90px, 19vw, 255px);
      font-weight: 700;
      line-height: .76;
      letter-spacing: .02em;
      text-transform: uppercase;
      text-align: center;
      color: #fff;
      margin: 0;
      overflow-wrap: normal;
      white-space: nowrap;
      text-shadow: none;
    }

    .hero-title.is-looping { animation: fadeUpLoop 5s cubic-bezier(.22,1,.36,1) infinite; will-change: transform,opacity; }
    .hero-title .char { display: inline-block; opacity: 1; filter: blur(0); transform: none; will-change: transform,opacity,filter; }
    .hero-title.is-looping .char { animation: charInLoop 5s cubic-bezier(.22,1,.36,1) infinite; }
    .hero-title .word { display: inline-block; white-space: nowrap; }
    .hero-title .space { display: inline-block; width: .12em; }

    .hero-line {
      width: clamp(70px, 7vw, 124px);
      height: 3px;
      background: var(--accent);
      margin: 16px auto 0;
    }

    .hero-scroll {
      margin-top: 18px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.44);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hero-scroll::before {
      content: '';
      width: 36px;
      height: 1px;
      background: rgba(255,255,255,.2);
    }

    @keyframes fadeUpLoop { 0% { opacity: .001; transform: translateY(40px); } 18%, 100% { opacity: 1; transform: none; } }
    @keyframes charInLoop { 0% { opacity: .001; filter: blur(12px); transform: translateY(12px); } 14%, 100% { opacity: 1; filter: blur(0); transform: none; } }

    @media (min-width: 1400px) {
      .hero-video-wrap {
        width: 100%;
        height: clamp(470px, 59vh, 720px);
        margin-top: 0;
      }

      .hero-content {
        min-height: 330px;
        padding-bottom: 50px;
      }

      .hero-title { font-size: clamp(170px, 16vw, 285px); }
    }

    @media (max-width: 1199.98px) {
      .hero-video-wrap {
        width: 100%;
        height: clamp(330px, 52vh, 560px);
        margin-top: 0;
      }

      .hero-content { min-height: clamp(205px, 30vh, 310px); }
      .hero-title { font-size: clamp(86px, 18vw, 190px); }
    }

    @media (max-width: 767.98px) {
      .hero {
        min-height: auto;
        padding: var(--nav-h) 0 0;
      }

      .hero-video-wrap {
        width: 100%;
        height: clamp(285px, 48vh, 430px);
        margin-top: 0;
      }

      .hero-img {
        object-fit: cover !important;
        object-position: center center;
        background: #181f20;
      }

      .hero-overlay {
        height: auto;
        background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.04) 62%, rgba(3,3,3,.68) 92%, #030303 100%);
      }

      .hero-content {
        min-height: auto;
        margin-top: 0;
        padding: 12px 16px 26px;
        box-shadow: 0 -10px 34px rgba(0,0,0,.68);
      }

      .hero-kicker {
        font-size: 9px;
        letter-spacing: .14em;
        margin-bottom: 9px;
      }

      .hero-kicker::before,
      .hero-kicker::after { width: 18px; }

      .hero-title {
        font-size: clamp(78px, 25vw, 116px);
        line-height: .8;
        letter-spacing: .03em;
      }

      .hero-line { margin-top: 10px; }
      .hero-scroll { margin-top: 12px; font-size: 9px; }
    }

    @media (max-width: 390px) {
      .hero-video-wrap { height: clamp(260px, 45vh, 360px); }
      .hero-title { font-size: clamp(68px, 24vw, 96px); letter-spacing: .025em; }
    }

#servicios,
    #contacto {
      background: #181f20 !important;
      color: #fff;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #servicios::before,
    #contacto::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 12% 10%, rgba(254,218,0,.16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(254,218,0,.09), transparent 30%),
        linear-gradient(180deg, #181f20 0%, #121819 100%);
      pointer-events: none;
    }

    #servicios::after,
    #contacto::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .22;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
    }

    #servicios .eyebrow,
    #contacto .eyebrow,
    #contacto .form-label {
      color: var(--accent);
    }

    #servicios .eyebrow::before,
    #contacto .eyebrow::before {
      background: var(--accent);
    }

    #servicios .section-title,
    #contacto .section-title {
      color: #fff;
      text-shadow: 0 16px 42px rgba(0,0,0,.28);
    }

    #servicios .section-subtitle,
    #contacto .section-subtitle {
      color: rgba(255,255,255,.72);
    }

    #servicios .service-card {
      background: rgba(255,255,255,.045);
      color: #fff;
      border-color: rgba(254,218,0,.46);
      box-shadow: 0 18px 46px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #servicios .service-card::after {
      box-shadow: 5px 5px 0 rgba(254,218,0,.34);
    }

    #servicios .service-card h3 {
      color: #fff;
    }

    #servicios .service-card p {
      color: rgba(255,255,255,.68);
    }

    #servicios .service-num {
      color: rgba(254,218,0,.2);
    }

    #servicios .service-card:hover {
      background: var(--accent);
      color: var(--dark);
      border-color: var(--accent);
      box-shadow: 0 24px 56px rgba(0,0,0,.24);
    }

    #servicios .service-card:hover h3 {
      color: var(--dark);
    }

    #servicios .service-card:hover p {
      color: rgba(27,23,27,.78);
    }

    #servicios .service-card:hover .service-num {
      color: rgba(27,23,27,.18);
    }

    #contacto .contact-big-label {
      color: rgba(254,218,0,.08);
    }

    #contacto .contact-details {
      gap: 12px;
    }

    #contacto .contact-detail {
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.9);
      border-left-color: var(--accent);
      border-top: 1px solid rgba(254,218,0,.18);
      border-right: 1px solid rgba(254,218,0,.18);
      border-bottom: 1px solid rgba(254,218,0,.18);
      box-shadow: 0 14px 34px rgba(0,0,0,.16);
    }

    #contacto .contact-detail strong {
      color: var(--accent);
    }

    #contacto .contact-detail a {
      color: #fff;
      transition: color .18s var(--ease);
    }

    #contacto .contact-detail a:hover {
      color: var(--accent);
    }

    #contacto .contact-panel {
      background: rgba(3,3,3,.36);
      border: 1px solid rgba(254,218,0,.35);
      box-shadow: 8px 8px 0 rgba(254,218,0,.86), 0 26px 70px rgba(0,0,0,.24);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    #contacto .form-control,
    #contacto .form-select {
      background: rgba(255,255,255,.075);
      border-color: rgba(255,255,255,.2);
      color: #fff;
    }

    #contacto .form-control::placeholder {
      color: rgba(255,255,255,.38);
    }

    #contacto .form-control:focus,
    #contacto .form-select:focus {
      border-color: var(--accent);
      background: rgba(255,255,255,.12);
      color: #fff;
    }

    #contacto .form-select option {
      background: #181f20;
      color: #fff;
    }

    #contacto .btn-submit {
      background: var(--accent);
      color: #181f20;
      box-shadow: none;
    }

    #contacto .btn-submit:hover {
      background: #fff;
      color: #181f20;
      box-shadow: 4px 4px 0 rgba(254,218,0,.45);
    }

    @media (max-width: 575.98px) {
      #contacto .contact-panel {
        box-shadow: 6px 6px 0 rgba(254,218,0,.86), 0 18px 46px rgba(0,0,0,.22);
      }
    }

#destacados.featured-products {
      background: #181f20 !important;
      color: #fff !important;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #destacados.featured-products::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 14% 8%, rgba(254,218,0,.15), transparent 34%),
        radial-gradient(circle at 86% 22%, rgba(254,218,0,.09), transparent 30%),
        linear-gradient(180deg, #181f20 0%, #121819 100%);
      pointer-events: none;
    }

    #destacados.featured-products::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .22;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 92%);
    }

    #destacados .eyebrow,
    #destacados .featured-product-kicker {
      color: var(--accent) !important;
    }

    #destacados .eyebrow::before,
    #destacados .featured-product-kicker::before {
      background: var(--accent) !important;
    }

    #destacados .section-title,
    #destacados .featured-product-title {
      color: #fff !important;
      text-shadow: 0 16px 42px rgba(0,0,0,.28);
    }

    #destacados .featured-products-head p,
    #destacados .featured-product-desc {
      color: rgba(255,255,255,.72) !important;
    }

    #destacados .featured-product-row {
      border-top-color: rgba(254,218,0,.22) !important;
    }

    #destacados .featured-chip {
      background: rgba(255,255,255,.055) !important;
      border-color: rgba(254,218,0,.34) !important;
      color: rgba(255,255,255,.92) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    #destacados .featured-product-link {
      background: var(--accent) !important;
      color: #181f20 !important;
      box-shadow: 0 14px 34px rgba(0,0,0,.2);
    }

    #destacados .featured-product-link:hover {
      background: #fff !important;
      color: #181f20 !important;
      transform: translateY(-2px);
    }

    #destacados .featured-product-frame {
      background: #101617 !important;
      border-color: rgba(254,218,0,.28) !important;
      box-shadow: 14px 14px 0 rgba(254,218,0,.86), 0 24px 70px rgba(0,0,0,.38) !important;
    }

    #destacados .featured-product-img-wrap,
    #destacados .featured-product-img {
      background: #101617 !important;
    }

    #destacados.featured-products .carousel-control-prev,
    #destacados.featured-products .carousel-control-next {
      background: rgba(254,218,0,.86) !important;
      box-shadow: 0 10px 28px rgba(0,0,0,.26);
    }

    #destacados.featured-products .carousel-control-prev:hover,
    #destacados.featured-products .carousel-control-next:hover {
      background: #fff !important;
    }

    #destacados.featured-products .carousel-indicators button {
      background: rgba(254,218,0,.48) !important;
    }

    #destacados.featured-products .carousel-indicators button.active {
      background: #fff !important;
    }

    @media (max-width: 991.98px) {
      #destacados .featured-product-frame {
        box-shadow: 10px 10px 0 rgba(254,218,0,.86), 0 18px 48px rgba(0,0,0,.34) !important;
      }
    }

.hero-title,
    .section-title,
    .featured-product-title,
    .contact-big-label,
    .footer-bg-text {
      font-weight: 800;
      letter-spacing: .006em;
    }

    .brand-text,
    .nav-link,
    .btn-accent,
    .btn-outline-dark-brand,
    .btn-submit,
    .featured-product-link,
    .featured-chip,
    .service-card h3,
    .why-card h3,
    .accordion-button,
    .footer-brand-name,
    .footer-list a {
      letter-spacing: .045em;
    }

    .hero-kicker,
    .eyebrow,
    .featured-product-kicker,
    .form-label,
    .footer-col-title {
      font-family: var(--mono);
    }

#inicio .hero-title {
      font-family: var(--original-display) !important;
      font-weight: 700 !important;
      letter-spacing: .045em;
    }

    .site-nav .brand-text {
      font-family: var(--original-display) !important;
      font-weight: 700 !important;
      letter-spacing: .035em;
    }

    #quienes-somos .section-title,
    #quienes-somos .quote-line,
    #quienes-somos .fact-card {
      font-family: var(--original-display) !important;
      font-weight: 700 !important;
    }

    #quienes-somos .section-title,
    #quienes-somos .quote-line {
      letter-spacing: .018em;
    }

    #quienes-somos .ziggurat-phrase-title {
      font-family: var(--ziggurat) !important;
      font-weight: 800 !important;
      font-size: clamp(42px, 5.15vw, 72px);
      line-height: .94;
      letter-spacing: .006em;
      max-width: 520px;
      margin-bottom: 30px;
    }

    #quienes-somos .fact-card {
      letter-spacing: .06em;
    }

#quienes-somos .row {
      align-items: center !important;
    }

    #quienes-somos .about-copy-stack {
      width: 100%;
      max-width: 620px;
      margin-left: clamp(0px, 1vw, 18px);
    }

    #quienes-somos .about-media-wrap {
      width: min(100%, 380px);
      margin: 0 0 24px;
    }

    #quienes-somos .about-fade-ticker {
      position: relative;
      width: 100%;
      height: 218px;
      overflow: hidden;
      background: #181f20;
      border: 1px solid rgba(27,23,27,.14);
      box-shadow: 7px 7px 0 var(--accent), 0 16px 38px rgba(27,23,27,.11);
      isolation: isolate;
    }

    #quienes-somos .about-fade-ticker::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: radial-gradient(circle at 18% 18%, rgba(254,218,0,.12), transparent 36%);
    }

    #quienes-somos .about-fade-ticker::after {
      content: '';
      position: absolute;
      inset: 9px;
      z-index: 4;
      border: 1px solid rgba(255,255,255,.16);
      pointer-events: none;
    }

    #quienes-somos .about-fade-ticker img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      opacity: 0;
      padding: 16px;
      transform: scale(.985);
      filter: contrast(1.03) saturate(1.02);
      animation: aboutImageDissolve 12s infinite;
    }

    #quienes-somos .about-fade-ticker img:nth-child(1) { animation-delay: 0s; }
    #quienes-somos .about-fade-ticker img:nth-child(2) { animation-delay: 4s; }
    #quienes-somos .about-fade-ticker img:nth-child(3) { animation-delay: 8s; }

    #quienes-somos .about-fade-caption {
      display: flex;
      align-items: center;
      min-height: 34px;
      margin-top: 8px;
      padding: 0 12px;
      background: #1b171b;
      color: #fff;
      border-left: 4px solid var(--accent);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .105em;
      line-height: 1.2;
      text-transform: uppercase;
      box-shadow: 4px 4px 0 rgba(254,218,0,.22);
    }

    #quienes-somos .lead-copy {
      max-width: 620px;
    }

    #quienes-somos .lead-copy p {
      margin-bottom: 22px;
    }

    @keyframes aboutImageDissolve {
      0% { opacity: 0; transform: scale(.98); }
      9% { opacity: 1; transform: scale(1); }
      32% { opacity: 1; transform: scale(1); }
      42% { opacity: 0; transform: scale(1.01); }
      100% { opacity: 0; transform: scale(.98); }
    }

    @media (max-width: 991.98px) {
      #quienes-somos .about-copy-stack {
        max-width: 100%;
        margin-left: 0;
      }

      #quienes-somos .about-media-wrap {
        width: min(100%, 420px);
        margin-top: 0;
      }

      #quienes-somos .about-fade-ticker {
        height: clamp(200px, 38vw, 255px);
        box-shadow: 7px 7px 0 var(--accent), 0 14px 34px rgba(27,23,27,.11);
      }

      #quienes-somos .ziggurat-phrase-title {
        max-width: 620px;
      }
    }

    @media (max-width: 575.98px) {
      #quienes-somos .ziggurat-phrase-title {
        font-size: clamp(40px, 13vw, 58px);
        line-height: .96;
        margin-bottom: 24px;
      }

      #quienes-somos .about-media-wrap {
        width: min(100%, 340px);
        margin: 0 auto 24px;
      }

      #quienes-somos .about-fade-ticker {
        height: 205px;
        box-shadow: 6px 6px 0 var(--accent), 0 12px 28px rgba(27,23,27,.12);
      }

      #quienes-somos .about-fade-ticker img { padding: 14px; }
      #quienes-somos .about-fade-ticker::after { inset: 8px; }

      #quienes-somos .about-fade-caption {
        min-height: 32px;
        font-size: 8.2px;
        letter-spacing: .08em;
        padding-inline: 10px;
      }
    }

@media (max-width: 991.98px) {
      .site-nav {
        max-width: 100vw;
        overflow-x: clip;
      }

      .site-nav > .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .site-nav .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 56px);
        margin-right: 8px;
      }

      .site-nav .brand-logo {
        flex: 0 0 auto;
      }

      .site-nav .brand-text {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 142px) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .site-nav .navbar-toggler {
        flex: 0 0 44px;
        width: 44px;
        margin-left: auto;
      }

      .site-nav .navbar-collapse {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }

      .site-nav .navbar-collapse.collapse:not(.show) {
        display: none;
      }

      .site-nav .navbar-collapse.collapsing {
        height: 0;
        overflow: hidden;
      }

      .site-nav .navbar-nav {
        width: 100%;
        align-items: stretch !important;
      }

      .site-nav .navbar-nav .nav-link,
      .site-nav .navbar-nav .nav-cta {
        width: 100%;
      }
    }

    @media (max-width: 390px) {
      .site-nav .brand-text {
        font-size: 15px !important;
        letter-spacing: .025em !important;
        max-width: calc(100vw - 132px) !important;
      }
    }

@media (max-width: 575.98px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      main,
      section,
      footer,
      .container,
      .row,
      [class*="col-"] {
        min-width: 0;
      }

      .section-title,
      .featured-product-title,
      #quienes-somos .ziggurat-phrase-title,
      .service-card h3,
      .why-card h3,
      .accordion-button,
      .contact-detail strong,
      .footer-brand-name,
      .footer-list a,
      .featured-chip,
      .featured-product-link,
      .btn-accent,
      .btn-outline-dark-brand,
      .btn-submit {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
      }

      .section-title {
        font-size: clamp(34px, 10.4vw, 46px) !important;
        line-height: 1;
        letter-spacing: .004em;
      }

      #servicios .section-title,
      #destacados .section-title,
      #trabajos .section-title,
      #contacto .section-title {
        font-size: clamp(32px, 9.8vw, 42px) !important;
        line-height: 1.03;
      }

      #quienes-somos .ziggurat-phrase-title {
        font-size: clamp(36px, 11.2vw, 50px) !important;
        line-height: .98;
        letter-spacing: .002em;
      }

      .featured-product-copy,
      .featured-product-media,
      .featured-product-row,
      .featured-products-head {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .featured-product-title {
        font-size: clamp(34px, 10.6vw, 44px) !important;
        line-height: .98;
        letter-spacing: .002em;
        text-wrap: balance;
      }

      .featured-product-desc,
      .featured-products-head p,
      .section-subtitle,
      .lead-copy {
        max-width: 100%;
        overflow-wrap: break-word;
      }

      .featured-product-meta {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .featured-chip {
        min-width: 0;
        max-width: 100%;
        min-height: 32px;
        padding: 8px 11px;
        font-size: 11.5px;
        line-height: 1.15;
        letter-spacing: .04em !important;
        text-align: center;
      }

      .featured-product-link,
      .btn-accent,
      .btn-outline-dark-brand,
      .btn-submit {
        min-width: 0;
        line-height: 1.18;
        text-align: center;
      }

      .featured-product-link {
        padding: 13px 14px;
        letter-spacing: .045em !important;
      }

      .service-card h3,
      .why-card h3 {
        font-size: 18px;
        line-height: 1.16;
        letter-spacing: .025em !important;
      }

      .accordion-button {
        gap: 8px;
        line-height: 1.18;
      }

      .faq-num {
        flex: 0 0 auto;
      }
    }

    @media (max-width: 390px) {
      .section-title {
        font-size: clamp(30px, 9.5vw, 38px) !important;
      }

      #servicios .section-title,
      #destacados .section-title,
      #trabajos .section-title,
      #contacto .section-title {
        font-size: clamp(29px, 9.2vw, 36px) !important;
      }

      .featured-product-title {
        font-size: clamp(30px, 9.7vw, 38px) !important;
        line-height: 1;
      }

      #quienes-somos .ziggurat-phrase-title {
        font-size: clamp(32px, 10.5vw, 44px) !important;
      }

      .featured-chip {
        font-size: 11px;
        letter-spacing: .032em !important;
        padding-inline: 9px;
      }
    }

:root {
  --accent: #feda00;
  --accent-strong: #d0b200;
  --dark: #050505;
  --ink: #111111;
  --paper: #ffffff;
  --soft: #f7f7f2;
  --muted: #5d5d5d;
  --line: rgba(5,5,5,.12);
}
body {
  background: #fff;
  color: #111;
}
.site-nav {
  background: rgba(255,255,255,.94);
}
.brand-logo,
.footer-logo {
  height: 42px;
}
.brand-text {
  font-size: 18px;
}
.hero {
  background: #050505;
}
.hero-video-wrap {
  background: #050505;
}
.hero-img {
  object-fit: cover !important;
  object-position: center center;
  background: #050505;
}
.hero-content {
  background: #050505;
}
.hero-kicker,
.eyebrow,
#servicios .eyebrow,
#contacto .eyebrow,
.featured-product-kicker {
  color: var(--accent) !important;
}
.hero-kicker::before,
.hero-kicker::after,
.eyebrow::before,
.featured-product-kicker::before {
  background: var(--accent) !important;
}
.hero-intro {
  width: min(100%, 820px);
  margin: 18px auto 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.7;
  font-family: var(--body);
}
.hero-actions-centered {
  justify-content: center;
  margin-top: 24px;
}
.hero-actions-centered .btn-outline-dark-brand {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.hero-actions-centered .btn-outline-dark-brand:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #050505;
}
#servicios,
#contacto {
  background: #ffffff !important;
  color: #111111 !important;
}
#servicios::before,
#servicios::after,
#contacto::before,
#contacto::after {
  display: none !important;
}
#servicios .section-title,
#contacto .section-title {
  color: #050505 !important;
  text-shadow: none !important;
}
#servicios .section-subtitle,
#contacto .section-subtitle {
  color: var(--muted) !important;
}
#servicios .service-card {
  background: #fff !important;
  color: #111 !important;
  border-color: #050505 !important;
  box-shadow: none !important;
}
#servicios .service-card h3 {
  color: #050505 !important;
}
#servicios .service-card p {
  color: var(--muted) !important;
}
#servicios .service-card::after {
  box-shadow: 5px 5px 0 #050505 !important;
}
#servicios .service-card:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #050505 !important;
}
#destacados.featured-products {
  background: #050505 !important;
}
#destacados .featured-product-frame {
  background: #101010 !important;
  border-color: rgba(254,218,0,.32) !important;
  box-shadow: 14px 14px 0 rgba(254,218,0,.86), 0 24px 70px rgba(0,0,0,.38) !important;
}
.featured-product-img {
  object-fit: contain !important;
  background: #101010;
}
#contacto .contact-panel {
  background: #050505 !important;
  border: 1px solid rgba(254,218,0,.55) !important;
  box-shadow: 8px 8px 0 var(--accent), 0 26px 70px rgba(0,0,0,.18) !important;
}
#contacto .contact-detail {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--accent) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.06) !important;
}
#contacto .contact-detail strong {
  color: #050505 !important;
}
#contacto .contact-detail a {
  color: #111 !important;
}
#contacto .contact-detail a:hover {
  color: #c2a600 !important;
}
#contacto .form-label {
  color: var(--accent) !important;
}
.footer {
  background: var(--accent);
}
.footer-brand-name {
  font-size: 20px;
}
.footer-tagline,
.footer-list li:not(:has(a)),
.footer-list a,
.footer-bottom,
.footer-bottom a {
  color: rgba(5,5,5,.86);
}
.footer-list a:hover,
.footer-bottom a:hover {
  color: #fff;
}
.wa-avatar img {
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .brand-logo { height: 38px; }
  .brand-text { font-size: 16px; }
  .hero-intro { font-size: 14.5px; line-height: 1.58; }
  .hero-actions-centered {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 420px);
  }
}

/* FIX FINAL HERO: no agrandar/cortar la imagen principal */
  #inicio.hero {
    min-height: auto !important;
    padding-top: var(--nav-h) !important;
    background: #050505 !important;
    overflow: hidden !important;
  }

  #inicio .hero-video-wrap {
    position: relative !important;
    width: 100% !important;
    height: clamp(430px, 54vh, 640px) !important;
    max-height: calc(100vh - var(--nav-h) - 255px) !important;
    min-height: 390px !important;
    overflow: hidden !important;
    background: #050505 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #inicio .hero-video-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: -34px !important;
    z-index: 0 !important;
    background-image:
      linear-gradient(90deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.22) 26%, rgba(5,5,5,.22) 74%, rgba(5,5,5,.86) 100%),
      url('img/hero.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    filter: blur(18px) saturate(1.04) contrast(1.04) !important;
    transform: scale(1.06) !important;
    opacity: .46 !important;
  }

  #inicio .hero-img {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: min(100%, 1420px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: clamp(12px, 1.5vw, 22px) !important;
    background: transparent !important;
    transform: none !important;
    filter: contrast(1.04) saturate(1.04) !important;
  }

  #inicio .hero-overlay {
    z-index: 3 !important;
    background:
      linear-gradient(180deg, rgba(5,5,5,.04) 0%, rgba(5,5,5,0) 48%, rgba(5,5,5,.48) 84%, #050505 100%),
      linear-gradient(90deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 18%, rgba(5,5,5,0) 82%, rgba(5,5,5,.55) 100%) !important;
  }

  #inicio .hero-noise { z-index: 4 !important; opacity: .28 !important; }

  #inicio .hero-content {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: clamp(20px, 2.4vw, 34px) 20px clamp(30px, 3vw, 42px) !important;
    background: #050505 !important;
    box-shadow: 0 -18px 54px rgba(0,0,0,.72) !important;
  }

  #inicio .hero-title {
    font-size: clamp(76px, 12.2vw, 172px) !important;
    line-height: .86 !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  #inicio .hero-kicker { margin-bottom: 10px !important; }
  #inicio .hero-line { margin-top: 14px !important; }
  #inicio .hero-intro { margin-top: 16px !important; }
  #inicio .hero-actions-centered { margin-top: 20px !important; }
  #inicio .hero-scroll { display: none !important; }

  @media (min-width: 1400px) {
    #inicio .hero-video-wrap {
      height: clamp(480px, 55vh, 660px) !important;
      max-height: calc(100vh - var(--nav-h) - 280px) !important;
    }
    #inicio .hero-title { font-size: clamp(120px, 11vw, 180px) !important; }
  }

  @media (max-width: 991.98px) {
    #inicio .hero-video-wrap {
      height: clamp(330px, 48vh, 500px) !important;
      max-height: none !important;
      min-height: 300px !important;
    }
    #inicio .hero-img { max-width: min(100%, 980px) !important; padding: 10px !important; }
    #inicio .hero-title { font-size: clamp(66px, 16vw, 126px) !important; }
  }

  @media (max-width: 767.98px) {
    #inicio.hero { padding-top: var(--nav-h) !important; }
    #inicio .hero-video-wrap {
      height: clamp(250px, 42vh, 360px) !important;
      min-height: 245px !important;
    }
    #inicio .hero-video-wrap::before {
      inset: -22px !important;
      filter: blur(14px) saturate(1.03) contrast(1.03) !important;
      opacity: .54 !important;
    }
    #inicio .hero-img {
      object-fit: contain !important;
      object-position: center center !important;
      padding: 8px !important;
    }
    #inicio .hero-overlay {
      background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,.22) 70%, #050505 100%) !important;
    }
    #inicio .hero-content { padding: 14px 16px 28px !important; }
    #inicio .hero-title {
      font-size: clamp(54px, 18vw, 90px) !important;
      line-height: .9 !important;
      letter-spacing: .028em !important;
    }
    #inicio .hero-intro { font-size: 14.5px !important; line-height: 1.56 !important; }
  }

  @media (max-width: 420px) {
    #inicio .hero-video-wrap { height: clamp(220px, 38vh, 320px) !important; min-height: 220px !important; }
    #inicio .hero-title { font-size: clamp(46px, 17vw, 72px) !important; }
    #inicio .hero-kicker { font-size: 8.5px !important; letter-spacing: .11em !important; }
  }

:root {
    --accent: #c89500;
    --accent-bright: #f4c313;
    --accent-strong: #725500;
    --accent-rgb: 200, 149, 0;
    --dark: #0d1314;
    --dark-2: #151c1d;
    --ink: #111314;
    --paper: #fbf8ef;
    --soft: #eee7d9;
    --muted: #585858;
    --line: rgba(13,19,20,.14);
  }

  html,
  body {
    background: var(--paper) !important;
    color: var(--ink) !important;
  }

  body::after { opacity: .018 !important; }

  .site-nav {
    background: rgba(251,248,239,.94) !important;
    border-bottom-color: rgba(13,19,20,.12) !important;
  }

  .site-nav.is-scrolled {
    background: rgba(251,248,239,.985) !important;
    box-shadow: 0 2px 0 rgba(13,19,20,.10), 0 14px 38px rgba(13,19,20,.10) !important;
  }

  .navbar-collapse { background: var(--paper) !important; }

  .navbar-toggler:focus,
  .accordion-button:focus,
  .form-control:focus,
  .form-select:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .24) !important;
  }

  .nav-link:hover,
  .eyebrow,
  .featured-product-kicker { color: var(--accent-strong) !important; }

  .nav-link::after,
  .eyebrow::before,
  .featured-product-kicker::before,
  .hero-line,
  .fact-card::before,
  .why-card::before { background: var(--accent) !important; }

  .btn-accent,
  .btn-outline-dark-brand:hover,
  .fact-card:hover,
  .service-card:hover,
  .featured-product-link,
  .btn-submit {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--dark) !important;
  }

  .btn-accent:hover,
  .featured-product-link:hover,
  .btn-submit:hover {
    background: var(--dark) !important;
    border-color: var(--dark) !important;
    color: #fff !important;
  }

  .section,
  #quienes-somos,
  #por-que-elegirnos,
  #faqs {
    background:
      radial-gradient(circle at 8% 10%, rgba(var(--accent-rgb), .055), transparent 30%),
      linear-gradient(180deg, var(--paper) 0%, #f7f2e7 100%) !important;
  }

  .section-paper,
  #trabajos.section-paper {
    background:
      radial-gradient(circle at 92% 0%, rgba(var(--accent-rgb), .075), transparent 28%),
      linear-gradient(180deg, var(--soft) 0%, #e9dfce 100%) !important;
  }

  .section-title,
  .featured-product-title,
  .service-card h3,
  .why-card h3,
  .accordion-button,
  .brand-text { color: var(--dark) !important; }

  .section-subtitle,
  .lead-copy,
  .service-card p,
  .why-card p,
  .accordion-body,
  .featured-product-desc,
  .featured-products-head p { color: rgba(17,19,20,.72) !important; }

  .quote-line,
  .service-card,
  .why-card,
  .accordion-item,
  .accordion-button,
  .gal-frame,
  .contact-detail {
    background: #fffdf7 !important;
    border-color: rgba(13,19,20,.16) !important;
  }

  .quote-line {
    border-left-color: var(--accent) !important;
    box-shadow: 5px 5px 0 rgba(var(--accent-rgb), .24) !important;
  }

  .fact-card,
  .icon-mark {
    background: var(--dark) !important;
    color: #fff !important;
  }

  .why-card:hover { border-color: rgba(var(--accent-rgb), .45) !important; }
  .why-card:hover .icon-mark { background: var(--accent) !important; color: var(--dark) !important; }
  .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--accent) !important; }
  .accordion-button:not(.collapsed) { box-shadow: inset 0 -2px 0 var(--accent) !important; }
  .faq-num { color: rgba(var(--accent-rgb), .72) !important; }

  #inicio.hero,
  #inicio .hero-content,
  #inicio .hero-video-wrap,
  .hero,
  .hero-content,
  .hero-video-wrap { background: #050708 !important; }

  #inicio .hero-video-wrap::before {
    background-image:
      linear-gradient(90deg, rgba(5,7,8,.88) 0%, rgba(5,7,8,.18) 26%, rgba(5,7,8,.18) 74%, rgba(5,7,8,.88) 100%),
      url('img/hero.png') !important;
  }

  #inicio .hero-overlay {
    background:
      linear-gradient(180deg, rgba(5,7,8,.04) 0%, rgba(5,7,8,0) 48%, rgba(5,7,8,.56) 84%, #050708 100%),
      linear-gradient(90deg, rgba(5,7,8,.58) 0%, rgba(5,7,8,0) 18%, rgba(5,7,8,0) 82%, rgba(5,7,8,.58) 100%) !important;
  }

  .hero-kicker,
  #inicio .hero-kicker,
  .hero .eyebrow,
  #inicio .eyebrow { color: var(--accent-bright) !important; }

  .hero-kicker::before,
  .hero-kicker::after,
  .hero .eyebrow::before,
  #inicio .eyebrow::before,
  #inicio .hero-line { background: var(--accent-bright) !important; }

  .hero .btn-accent,
  #inicio .btn-accent {
    background: var(--accent-bright) !important;
    border-color: var(--accent-bright) !important;
    color: #050708 !important;
  }

  .hero .btn-accent:hover,
  #inicio .btn-accent:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #050708 !important;
  }

  .hero .btn-outline-dark-brand,
  #inicio .btn-outline-dark-brand {
    color: #fff !important;
    border-color: rgba(255,255,255,.52) !important;
  }

  .hero .btn-outline-dark-brand:hover,
  #inicio .btn-outline-dark-brand:hover {
    background: var(--accent-bright) !important;
    border-color: var(--accent-bright) !important;
    color: #050708 !important;
  }

  #servicios,
  #destacados.featured-products,
  #contacto {
    background:
      radial-gradient(circle at 14% 8%, rgba(244,195,19,.135), transparent 34%),
      radial-gradient(circle at 86% 18%, rgba(244,195,19,.08), transparent 30%),
      linear-gradient(180deg, #111819 0%, #080c0d 100%) !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  #servicios::before,
  #destacados.featured-products::before,
  #contacto::before {
    background:
      radial-gradient(circle at 12% 10%, rgba(244,195,19,.16), transparent 34%),
      radial-gradient(circle at 88% 18%, rgba(244,195,19,.075), transparent 30%),
      linear-gradient(180deg, #111819 0%, #080c0d 100%) !important;
  }

  #servicios::after,
  #destacados.featured-products::after,
  #contacto::after {
    opacity: .16 !important;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  }

  #servicios .eyebrow,
  #destacados .eyebrow,
  #destacados .featured-product-kicker,
  #contacto .eyebrow,
  #contacto .form-label { color: var(--accent-bright) !important; }

  #servicios .eyebrow::before,
  #destacados .eyebrow::before,
  #destacados .featured-product-kicker::before,
  #contacto .eyebrow::before { background: var(--accent-bright) !important; }

  #servicios .section-title,
  #destacados .section-title,
  #destacados .featured-product-title,
  #contacto .section-title {
    color: #fff !important;
    text-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
  }

  #servicios .section-subtitle,
  #destacados .featured-products-head p,
  #destacados .featured-product-desc,
  #contacto .section-subtitle { color: rgba(255,255,255,.74) !important; }

  #servicios .service-card,
  #destacados .featured-chip,
  #contacto .contact-detail {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
    border-color: rgba(244,195,19,.34) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.23) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #servicios .service-card::after { box-shadow: 5px 5px 0 rgba(244,195,19,.32) !important; }
  #servicios .service-card h3,
  #contacto .contact-detail strong { color: #fff !important; }
  #servicios .service-card p,
  #contacto .contact-detail,
  #contacto .contact-detail a { color: rgba(255,255,255,.74) !important; }
  #servicios .service-num { color: rgba(244,195,19,.24) !important; }

  #servicios .service-card:hover {
    background: var(--accent-bright) !important;
    border-color: var(--ac
/* ...cortado... */

.featured-products {
          background: #fff;
          color: #1b171b;
          overflow: hidden;
        }
    
        .featured-products-head {
          max-width: 780px;
          margin: 0 auto 64px;
          text-align: center;
        }
    
        .featured-products-head p {
          margin: 18px auto 0;
          max-width: 660px;
          font-size: 17px;
          line-height: 1.75;
          color: #666;
        }
    
        .featured-product-row {
          display: grid;
          grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
          gap: clamp(28px, 5vw, 72px);
          align-items: center;
          padding: clamp(42px, 5vw, 76px) 0;
          border-top: 1px solid rgba(27,23,27,.12);
        }
    
        .featured-product-row:first-of-type {
          border-top: 0;
          padding-top: 0;
        }
    
        .featured-product-row:nth-of-type(even) .featured-product-copy {
          order: 2;
        }
    
        .featured-product-row:nth-of-type(even) .featured-product-media {
          order: 1;
        }
    
        .featured-product-kicker {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 14px;
          font-family: var(--mono, monospace);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: #d0b200;
        }
    
        .featured-product-kicker::before {
          content: "";
          width: 24px;
          height: 2px;
          background: #feda00;
        }
    
        .featured-product-title {
          font-family: var(--display, system-ui, sans-serif);
          font-size: clamp(44px, 7vw, 92px);
          line-height: .9;
          letter-spacing: .02em;
          text-transform: uppercase;
          color: #1b171b;
          margin: 0 0 18px;
        }
    
        .featured-product-desc {
          max-width: 560px;
          font-size: 16px;
          line-height: 1.78;
          color: #565656;
          margin: 0 0 24px;
        }
    
        .featured-product-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-bottom: 28px;
        }
    
        .featured-chip {
          display: inline-flex;
          align-items: center;
          min-height: 36px;
          padding: 0 14px;
          border: 1px solid rgba(27,23,27,.16);
          background: #f6f3ee;
          color: #1b171b;
          font-family: var(--display, system-ui, sans-serif);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: .08em;
          text-transform: uppercase;
        }
    
        .featured-product-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 44px;
          padding: 0 22px;
          background: #1b171b;
          color: #fff;
          font-family: var(--display, system-ui, sans-serif);
          font-size: 14px;
          font-weight: 700;
          letter-spacing: .09em;
          text-transform: uppercase;
          transition: transform .2s ease, background .2s ease, color .2s ease;
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
        }
    
        .featured-product-link:hover {
          background: #feda00;
          color: #1b171b;
          transform: translateY(-2px);
        }
    
        .featured-product-frame {
          background: #181f20;
          padding: clamp(10px, 1.8vw, 18px);
          box-shadow: 14px 14px 0 #feda00, 0 24px 70px rgba(27,23,27,.18);
          border: 1px solid rgba(27,23,27,.12);
          overflow: hidden;
        }
    
        .featured-product-img-wrap {
          width: 100%;
          aspect-ratio: 4 / 5.55;
          background: #181f20;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }
    
        .featured-product-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          display: block;
          background: #181f20;
        }
    
        .featured-products .carousel-control-prev,
        .featured-products .carousel-control-next {
          width: 46px;
          height: 46px;
          top: 50%;
          transform: translateY(-50%);
          opacity: 1;
          background: rgba(27,23,27,.72);
          border-radius: 999px;
          margin: 0 10px;
        }
    
        .featured-products .carousel-control-prev-icon,
        .featured-products .carousel-control-next-icon {
          width: 2rem;
          height: 2rem;
          background-size: 60% 60%;
        }
    
        .featured-products .carousel-indicators {
          bottom: 12px;
          margin-bottom: 0;
        }
    
        .featured-products .carousel-indicators button {
          width: 9px;
          height: 9px;
          border-radius: 50%;
          border: 0;
          background: rgba(255,255,255,.62);
        }
    
        .featured-products .carousel-indicators button.active {
          background: #fff;
        }
    
        @media (max-width: 991.98px) {
          .featured-product-row {
            grid-template-columns: 1fr;
            gap: 30px;
          }
    
          .featured-product-row:nth-of-type(even) .featured-product-copy,
          .featured-product-row:nth-of-type(even) .featured-product-media {
            order: initial;
          }
    
          .featured-product-frame {
            box-shadow: 10px 10px 0 #feda00, 0 18px 48px rgba(27,23,27,.16);
          }
        }
    
        @media (max-width: 575.98px) {
          .featured-products-head {
            margin-bottom: 42px;
          }
    
          .featured-product-row {
            padding: 46px 0;
          }
    
          .featured-product-title {
            font-size: clamp(42px, 15vw, 62px);
          }
    
          .featured-product-desc {
            font-size: 15px;
          }
    
          .featured-product-link {
            width: 100%;
          }
    
          .featured-product-img-wrap {
            aspect-ratio: 4 / 5.6;
          }
    
          .featured-products .carousel-control-prev,
          .featured-products .carousel-control-next {
            width: 40px;
            height: 40px;
            margin: 0 6px;
          }
        }

@font-face {
      font-family: 'Ziggurat';
      src:
        local('Ziggurat'),
        local('Ziggurat HTF'),
        local('Ziggurat HTF Black'),
        local('Ziggurat-HTF-Black'),
        url('fonts/Ziggurat.woff2') format('woff2'),
        url('fonts/Ziggurat.woff') format('woff'),
        url('fonts/Ziggurat.ttf') format('truetype'),
        url('fonts/ziggurat.woff2') format('woff2'),
        url('fonts/ziggurat.woff') format('woff'),
        url('fonts/ziggurat.ttf') format('truetype');
      font-weight: 400 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --accent: #b9a887;
      --accent-strong: #9f8d6c;
      --dark: #1b171b;
      --ink: #111111;
      --paper: #ffffff;
      --soft: #f6f3ee;
      --muted: #666666;
      --line: rgba(27,23,27,.12);
      --nav-h: 76px;
      --display: 'BioRhyme', 'Barlow', ui-serif, Georgia, serif;
      --original-display: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
      --ziggurat: 'Ziggurat', 'Barlow Condensed', 'Barlow', ui-serif, Georgia, serif;
      --body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
      --mono: 'SFMono-Regular', Consolas, monospace;
      --ease: cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: var(--body); color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    h1, h2, h3, h4, h5, h6,
    .brand-text,
    .nav-link,
    .btn-accent,
    .btn-outline-dark-brand,
    .btn-submit,
    .service-card h3,
    .why-card h3,
    .muon-product-title,
    .footer-brand-name,
    .footer-list a {
      font-family: var(--display);
    }

    p,
    .lead-copy,
    .section-subtitle,
    .hero-lead,
    .hero-secondary,
    .service-card p,
    .why-card p,
    .accordion-body,
    .contact-detail,
    .footer-tagline {
      font-family: var(--body);
    }

    .brand-text,
    .nav-link,
    .btn-accent,
    .btn-outline-dark-brand,
    .btn-submit,
    .hero-title,
    .section-title,
    .service-card h3,
    .why-card h3,
    .muon-product-title,
    .footer-brand-name {
      font-weight: 400 !important;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9998;
      opacity: .022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 256px;
    }

    .site-nav {
      min-height: var(--nav-h);
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
      border-bottom: 1px solid var(--line);
      transition: background .25s var(--ease), box-shadow .25s var(--ease);
      z-index: 1040;
    }

    .site-nav.is-scrolled {
      background: rgba(255,255,255,.98);
      box-shadow: 0 2px 0 var(--line), 0 12px 34px rgba(27,23,27,.08);
    }

    .navbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .brand-logo { height: 42px; width: auto; object-fit: contain; flex: 0 0 auto; }
    .brand-text { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .035em; line-height: 1; color: var(--dark); text-transform: uppercase; white-space: nowrap; }

    .navbar-toggler {
      width: 44px;
      height: 44px;
      border: 1.5px solid var(--dark);
      border-radius: 4px;
      padding: 0;
      background: transparent;
      box-shadow: none !important;
      display: grid;
      place-items: center;
    }

    .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(185,168,135,.28) !important; }
    .toggler-bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
    .toggler-bars span { display: block; height: 1.5px; background: var(--dark); }

    .nav-link {
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .055em;
      text-transform: uppercase;
      color: var(--dark);
      padding: .6rem .72rem !important;
      transition: color .18s var(--ease);
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: .72rem;
      right: .72rem;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .22s var(--ease);
    }

    .nav-link:hover { color: var(--accent-strong); }
    .nav-link:hover::after { transform: scaleX(1); }

    .btn-accent, .btn-outline-dark-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 22px;
      border-radius: 0;
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
    }

    .btn-accent {
      background: var(--dark);
      color: #fff !important;
      border: 1px solid var(--dark);
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
    }

    .btn-accent:hover { background: var(--accent); border-color: var(--accent); color: var(--dark) !important; transform: translateY(-1px); }

    .btn-outline-dark-brand {
      color: var(--dark);
      border: 1.5px solid var(--dark);
      background: transparent;
    }

    .btn-outline-dark-brand:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); transform: translateY(-1px); }

    .hero {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: stretch;
      padding: var(--nav-h) 0 0;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #030303;
      color: #fff;
    }

    .hero::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(190px, 28vh, 310px);
      background: linear-gradient(180deg, rgba(3,3,3,0), #030303 34%, #030303 100%);
      z-index: -1;
    }

    .hero-shell {
      min-height: calc(100vh - var(--nav-h));
      min-height: calc(100svh - var(--nav-h));
      align-items: stretch;
      row-gap: 0;
    }

    .hero-copy {
      max-width: 650px;
      min-height: calc(100vh - var(--nav-h));
      min-height: calc(100svh - var(--nav-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(48px, 6vw, 86px) 0;
      position: relative;
      z-index: 2;
    }

    .hero .eyebrow { color: var(--accent); }
    .hero .eyebrow::before { background: var(--accent); }

    .hero-title {
      font-family: var(--display);
      font-size: clamp(68px, 9.6vw, 148px);
      font-weight: 700;
      line-height: .84;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: #fff;
      margin: 0 0 22px;
      text-wrap: balance;
    }

    .hero-lead {
      max-width: 610px;
      font-size: clamp(17px, 1.55vw, 20px);
      line-height: 1.65;
      color: rgba(255,255,255,.86);
      font-weight: 400;
      margin-bottom: 18px;
    }

    .hero-secondary
/* ...cortado... */

.hero {
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: var(--nav-h) 0 0;
      background: #030303;
      color: #fff;
    }

    .hero::before { display: none; }

    .hero-video-wrap {
      position: relative;
      z-index: 0;
      width: 100%;
      height: clamp(420px, 58vh, 680px);
      margin-top: 0;
      overflow: hidden;
      pointer-events: none;
      background: #181f20;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover !important;
      object-position: center center;
      transform: none;
      filter: contrast(1.04) saturate(1.02);
      background: #181f20;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.03) 56%, rgba(3,3,3,.62) 86%, #030303 100%);
      pointer-events: none;
    }

    .hero-noise {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      background-size: 200px;
      opacity: .45;
      pointer-events: none;
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 100%;
      max-width: none;
      min-height: clamp(225px, 30vh, 350px);
      margin-top: clamp(4px, 1.2vw, 18px);
      padding: clamp(24px, 3.2vw, 42px) 24px clamp(30px, 3.8vw, 52px);
      background: #030303;
      box-shadow: 0 -18px 54px rgba(0,0,0,.7);
      text-align: center;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 12px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .hero-kicker::before,
    .hero-kicker::after {
      content: '';
      width: 28px;
      height: 1px;
      background: rgba(185,168,135,.7);
    }

    .hero-title {
      width: 100%;
      max-width: 100%;
      font-family: var(--display);
      font-size: clamp(90px, 19vw, 255px);
      font-weight: 700;
      line-height: .76;
      letter-spacing: .02em;
      text-transform: uppercase;
      text-align: center;
      color: #fff;
      margin: 0;
      overflow-wrap: normal;
      white-space: nowrap;
      text-shadow: none;
    }

    .hero-title.is-looping { animation: fadeUpLoop 5s cubic-bezier(.22,1,.36,1) infinite; will-change: transform,opacity; }
    .hero-title .char { display: inline-block; opacity: 1; filter: blur(0); transform: none; will-change: transform,opacity,filter; }
    .hero-title.is-looping .char { animation: charInLoop 5s cubic-bezier(.22,1,.36,1) infinite; }
    .hero-title .word { display: inline-block; white-space: nowrap; }
    .hero-title .space { display: inline-block; width: .12em; }

    .hero-line {
      width: clamp(70px, 7vw, 124px);
      height: 3px;
      background: var(--accent);
      margin: 16px auto 0;
    }

    .hero-scroll {
      margin-top: 18px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.44);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hero-scroll::before {
      content: '';
      width: 36px;
      height: 1px;
      background: rgba(255,255,255,.2);
    }

    @keyframes fadeUpLoop { 0% { opacity: .001; transform: translateY(40px); } 18%, 100% { opacity: 1; transform: none; } }
    @keyframes charInLoop { 0% { opacity: .001; filter: blur(12px); transform: translateY(12px); } 14%, 100% { opacity: 1; filter: blur(0); transform: none; } }

    @media (min-width: 1400px) {
      .hero-video-wrap {
        width: 100%;
        height: clamp(470px, 59vh, 720px);
        margin-top: 0;
      }

      .hero-content {
        min-height: 330px;
        padding-bottom: 50px;
      }

      .hero-title { font-size: clamp(170px, 16vw, 285px); }
    }

    @media (max-width: 1199.98px) {
      .hero-video-wrap {
        width: 100%;
        height: clamp(330px, 52vh, 560px);
        margin-top: 0;
      }

      .hero-content { min-height: clamp(205px, 30vh, 310px); }
      .hero-title { font-size: clamp(86px, 18vw, 190px); }
    }

    @media (max-width: 767.98px) {
      .hero {
        min-height: auto;
        padding: var(--nav-h) 0 0;
      }

      .hero-video-wrap {
        width: 100%;
        height: clamp(285px, 48vh, 430px);
        margin-top: 0;
      }

      .hero-img {
        object-fit: cover !important;
        object-position: center center;
        background: #181f20;
      }

      .hero-overlay {
        height: auto;
        background: linear-gradient(180deg, rgba(24,31,32,0) 0%, rgba(24,31,32,.04) 62%, rgba(3,3,3,.68) 92%, #030303 100%);
      }

      .hero-content {
        min-height: auto;
        margin-top: 0;
        padding: 12px 16px 26px;
        box-shadow: 0 -10px 34px rgba(0,0,0,.68);
      }

      .hero-kicker {
        font-size: 9px;
        letter-spacing: .14em;
        margin-bottom: 9px;
      }

      .hero-kicker::before,
      .hero-kicker::after { width: 18px; }

      .hero-title {
        font-size: clamp(78px, 25vw, 116px);
        line-height: .8;
        letter-spacing: .03em;
      }

      .hero-line { margin-top: 10px; }
      .hero-scroll { margin-top: 12px; font-size: 9px; }
    }

    @media (max-width: 390px) {
      .hero-video-wrap { height: clamp(260px, 45vh, 360px); }
      .hero-title { font-size: clamp(68px, 24vw, 96px); letter-spacing: .025em; }
    }

#cervezas,
    #contacto {
      background: #181f20 !important;
      color: #fff;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #cervezas::before,
    #contacto::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 12% 10%, rgba(185,168,135,.16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(185,168,135,.09), transparent 30%),
        linear-gradient(180deg, #181f20 0%, #121819 100%);
      pointer-events: none;
    }

    #cervezas::after,
    #contacto::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .22;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
    }

    #cervezas .eyebrow,
    #contacto .eyebrow,
    #contacto .form-label {
      color: var(--accent);
    }

    #cervezas .eyebrow::before,
    #contacto .eyebrow::before {
      background: var(--accent);
    }

    #cervezas .section-title,
    #contacto .section-title {
      color: #fff;
      text-shadow: 0 16px 42px rgba(0,0,0,.28);
    }

    #cervezas .section-subtitle,
    #contacto .section-subtitle {
      color: rgba(255,255,255,.72);
    }

    #cervezas .service-card {
      background: rgba(255,255,255,.045);
      color: #fff;
      border-color: rgba(185,168,135,.46);
      box-shadow: 0 18px 46px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #cervezas .service-card::after {
      box-shadow: 5px 5px 0 rgba(185,168,135,.34);
    }

    #cervezas .service-card h3 {
      color: #fff;
    }

    #cervezas .service-card p {
      color: rgba(255,255,255,.68);
    }

    #cervezas .service-num {
      color: rgba(185,168,135,.2);
    }

    #cervezas .service-card:hover {
      background: var(--accent);
      color: var(--dark);
      border-color: var(--accent);
      box-shadow: 0 24px 56px rgba(0,0,0,.24);
    }

    #cervezas .service-card:hover h3 {
      color: var(--dark);
    }

    #cervezas .service-card:hover p {
      color: rgba(27,23,27,.78);
    }

    #cervezas .service-card:hover .service-num {
      color: rgba(27,23,27,.18);
    }

    #contacto .contact-big-label {
      color: rgba(185,168,135,.08);
    }

    #contacto .contact-details {
      gap: 12px;
    }

    #contacto .contact-detail {
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.9);
      border-left-color: var(--accent);
      border-top: 1px solid rgba(185,168,135,.18);
      border-right: 1px solid rgba(185,168,135,.18);
      border-bottom: 1px solid rgba(185,168,135,.18);
      box-shadow: 0 14px 34px rgba(0,0,0,.16);
    }

    #contacto .contact-detail strong {
      color: var(--accent);
    }

    #contacto .contact-detail a {
      color: #fff;
      transition: color .18s var(--ease);
    }

    #contacto .contact-detail a:hover {
      color: var(--accent);
    }

    #contacto .contact-panel {
      background: rgba(3,3,3,.36);
      border: 1px solid rgba(185,168,135,.35);
      box-shadow: 8px 8px 0 rgba(185,168,135,.86), 0 26px 70px rgba(0,0,0,.24);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    #contacto .form-control,
    #contacto .form-select {
      background: rgba(255,255,255,.075);
      border-color: rgba(255,255,255,.2);
      color: #fff;
    }

    #contacto .form-control::placeholder {
      color: rgba(255,255,255,.38);
    }

    #contacto .form-control:focus,
    #contacto .form-select:focus {
      border-color: var(--accent);
      background: rgba(255,255,255,.12);
      color: #fff;
    }

    #contacto .form-select option {
      background: #181f20;
      color: #fff;
    }

    #contacto .btn-submit {
      background: var(--accent);
      color: #181f20;
      box-shadow: none;
    }

    #contacto .btn-submit:hover {
      background: #fff;
      color: #181f20;
      box-shadow: 4px 4px 0 rgba(185,168,135,.45);
    }

    @media (max-width: 575.98px) {
      #contacto .contact-panel {
        box-shadow: 6px 6px 0 rgba(185,168,135,.86), 0 18px 46px rgba(0,0,0,.22);
      }
    }

/* Corrección: la sección completa de estilos/productos también queda oscura */
    #estilos.muon-products {
      background: #181f20 !important;
      color: #fff !important;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    #estilos.muon-products::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 14% 8%, rgba(185,168,135,.15), transparent 34%),
        radial-gradient(circle at 86% 22%, rgba(185,168,135,.09), transparent 30%),
        linear-gradient(180deg, #181f20 0%, #121819 100%);
      pointer-events: none;
    }

    #estilos.muon-products::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .22;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 92%);
    }

    #estilos .eyebrow,
    #estilos .muon-product-kicker {
      color: var(--accent) !important;
    }

    #estilos .eyebrow::before,
    #estilos .muon-product-kicker::before {
      background: var(--accent) !important;
    }

    #estilos .section-title,
    #estilos .muon-product-title {
      color: #fff !important;
      text-shadow: 0 16px 42px rgba(0,0,0,.28);
    }

    #estilos .muon-products-head p,
    #estilos .muon-product-desc {
      color: rgba(255,255,255,.72) !important;
    }

    #estilos .muon-product-row {
      border-top-color: rgba(185,168,135,.22) !important;
    }

    #estilos .muon-chip {
      background: rgba(255,255,255,.055) !important;
      border-color: rgba(185,168,135,.34) !important;
      color: rgba(255,255,255,.92) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    #estilos .muon-product-link {
      background: var(--accent) !important;
      color: #181f20 !important;
      box-shadow: 0 14px 34px rgba(0,0,0,.2);
    }

    #estilos .muon-product-link:hover {
      background: #fff !important;
      color: #181f20 !important;
      transform: translateY(-2px);
    }

    #estilos .muon-product-frame {
      background: #101617 !important;
      border-color: rgba(185,168,135,.28) !important;
      box-shadow: 14px 14px 0 rgba(185,168,135,.86), 0 24px 70px rgba(0,0,0,.38) !important;
    }

    #estilos .muon-product-img-wrap,
    #estilos .muon-product-img {
      background: #101617 !important;
    }

    #estilos.muon-products .carousel-control-prev,
    #estilos.muon-products .carousel-control-next {
      background: rgba(185,168,135,.86) !important;
      box-shadow: 0 10px 28px rgba(0,0,0,.26);
    }

    #estilos.muon-products .carousel-control-prev:hover,
    #estilos.muon-products .carousel-control-next:hover {
      background: #fff !important;
    }

    #estilos.muon-products .carousel-indicators button {
      background: rgba(185,168,135,.48) !important;
    }

    #estilos.muon-products .carousel-indicators button.active {
      background: #fff !important;
    }

    @media (max-width: 991.98px) {
      #estilos .muon-product-frame {
        box-shadow: 10px 10px 0 rgba(185,168,135,.86), 0 18px 48px rgba(0,0,0,.34) !important;
      }
    }

/* Ajuste tipográfico: BioRhyme da imprenta/slab old school sin caer en western */
    .hero-title,
    .section-title,
    .muon-product-title,
    .contact-big-label,
    .footer-bg-text {
      font-weight: 800;
      letter-spacing: .006em;
    }

    .brand-text,
    .nav-link,
    .btn-accent,
    .btn-outline-dark-brand,
    .btn-submit,
    .muon-product-link,
    .muon-chip,
    .service-card h3,
    .why-card h3,
    .accordion-button,
    .footer-brand-name,
    .footer-list a {
      letter-spacing: .045em;
    }

    .hero-kicker,
    .eyebrow,
    .muon-product-kicker,
    .form-label,
    .footer-col-title {
      font-family: var(--mono);
    }

/* Excepciones tipográficas solicitadas:
       BioRhyme queda como base general, pero el hero y Quienes somos conservan la fuente original. */
    #inicio .hero-title {
      font-family: var(--original-display) !important;
      font-weight: 700 !important;
      letter-spacing: .045em;
    }

    .site-nav .brand-text {
      font-family: var(--original-display) !important;
      font-weight: 700 !important;
      letter-spacing: .035em;
    }

    #quienes-somos .section-title,
    #quienes-somos .quote-line,
    #quienes-somos .fact-card {
      font-family: var(--original-display) !important;
      font-weight: 700 !important;
    }

    #quienes-somos .section-title,
    #quienes-somos .quote-line {
      letter-spacing: .018em;
    }

    /* Solo esta frase usa Ziggurat dentro de Quienes somos */
    #quienes-somos .ziggurat-phrase-title {
      font-family: var(--ziggurat) !important;
      font-weight: 800 !important;
      font-size: clamp(42px, 5.15vw, 72px);
      line-height: .94;
      letter-spacing: .006em;
      max-width: 520px;
      margin-bottom: 30px;
    }

    #quienes-somos .fact-card {
      letter-spacing: .06em;
    }

/* Fade/ticker visual para Quienes somos: compacto, sin deformar imágenes y con zócalo fuera de la foto */
    #quienes-somos .row {
      align-items: center !important;
    }

    #quienes-somos .about-copy-stack {
      width: 100%;
      max-width: 620px;
      margin-left: clamp(0px, 1vw, 18px);
    }

    #quienes-somos .about-media-wrap {
      width: min(100%, 380px);
      margin: 0 0 24px;
    }

    #quienes-somos .about-fade-ticker {
      position: relative;
      width: 100%;
      height: 218px;
      overflow: hidden;
      background: #181f20;
      border: 1px solid rgba(27,23,27,.14);
      box-shadow: 7px 7px 0 var(--accent), 0 16px 38px rgba(27,23,27,.11);
      isolation: isolate;
    }

    #quienes-somos .about-fade-ticker::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: radial-gradient(circle at 18% 18%, rgba(185,168,135,.12), transparent 36%);
    }

    #quienes-somos .about-fade-ticker::after {
      content: '';
      position: absolute;
      inset: 9px;
      z-index: 4;
      border: 1px solid rgba(255,255,255,.16);
      pointer-events: none;
    }

    #quienes-somos .about-fade-ticker img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      opacity: 0;
      padding: 16px;
      transform: scale(.985);
      filter: contrast(1.03) saturate(1.02);
      animation: aboutImageDissolve 12s infinite;
    }

    #quienes-somos .about-fade-ticker img:nth-child(1) { animation-delay: 0s; }
    #quienes-somos .about-fade-ticker img:nth-child(2) { animation-delay: 4s; }
    #quienes-somos .about-fade-ticker img:nth-child(3) { animation-delay: 8s; }

    #quienes-somos .about-fade-caption {
      display: flex;
      align-items: center;
      min-height: 34px;
      margin-top: 8px;
      padding: 0 12px;
      background: #1b171b;
      color: #fff;
      border-left: 4px solid var(--accent);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .105em;
      line-height: 1.2;
      text-transform: uppercase;
      box-shadow: 4px 4px 0 rgba(185,168,135,.22);
    }

    #quienes-somos .lead-copy {
      max-width: 620px;
    }

    #quienes-somos .lead-copy p {
      margin-bottom: 22px;
    }

    @keyframes aboutImageDissolve {
      0% { opacity: 0; transform: scale(.98); }
      9% { opacity: 1; transform: scale(1); }
      32% { opacity: 1; transform: scale(1); }
      42% { opacity: 0; transform: scale(1.01); }
      100% { opacity: 0; transform: scale(.98); }
    }

    @media (max-width: 991.98px) {
      #quienes-somos .about-copy-stack {
        max-width: 100%;
        margin-left: 0;
      }

      #quienes-somos .about-media-wrap {
        width: min(100%, 420px);
        margin-top: 0;
      }

      #quienes-somos .about-fade-ticker {
        height: clamp(200px, 38vw, 255px);
        box-shadow: 7px 7px 0 var(--accent), 0 14px 34px rgba(27,23,27,.11);
      }

      #quienes-somos .ziggurat-phrase-title {
        max-width: 620px;
      }
    }

    @media (max-width: 575.98px) {
      #quienes-somos .ziggurat-phrase-title {
        font-size: clamp(40px, 13vw, 58px);
        line-height: .96;
        margin-bottom: 24px;
      }

      #quienes-somos .about-media-wrap {
        width: min(100%, 340px);
        margin: 0 auto 24px;
      }

      #quienes-somos .about-fade-ticker {
        height: 205px;
        box-shadow: 6px 6px 0 var(--accent), 0 12px 28px rgba(27,23,27,.12);
      }

      #quienes-somos .about-fade-ticker img { padding: 14px; }
      #quienes-somos .about-fade-ticker::after { inset: 8px; }

      #quienes-somos .about-fade-caption {
        min-height: 32px;
        font-size: 8.2px;
        letter-spacing: .08em;
        padding-inline: 10px;
      }
    }

/* FIX puntual navbar mobile: no toca containers/rows/secciones del sitio */
    @media (max-width: 991.98px) {
      .site-nav {
        max-width: 100vw;
        overflow-x: clip;
      }

      .site-nav > .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .site-nav .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 56px);
        margin-right: 8px;
      }

      .site-nav .brand-logo {
        flex: 0 0 auto;
      }

      .site-nav .brand-text {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 142px) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .site-nav .navbar-toggler {
        flex: 0 0 44px;
        width: 44px;
        margin-left: auto;
      }

      .site-nav .navbar-collapse {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }

      .site-nav .navbar-collapse.collapse:not(.show) {
        display: none;
      }

      .site-nav .navbar-collapse.collapsing {
        height: 0;
        overflow: hidden;
      }

      .site-nav .navbar-nav {
        width: 100%;
        align-items: stretch !important;
      }

      .site-nav .navbar-nav .nav-link,
      .site-nav .navbar-nav .nav-cta {
        width: 100%;
      }
    }

    @media (max-width: 390px) {
      .site-nav .brand-text {
        font-size: 15px !important;
        letter-spacing: .025em !important;
        max-width: calc(100vw - 132px) !important;
      }
    }

/* FIX mobile fino: textos largos sin ensanchar el sitio */
    @media (max-width: 575.98px) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      main,
      section,
      footer,
      .container,
      .row,
      [class*="col-"] {
        min-width: 0;
      }

      .section-title,
      .muon-product-title,
      #quienes-somos .ziggurat-phrase-title,
      .service-card h3,
      .why-card h3,
      .accordion-button,
      .contact-detail strong,
      .footer-brand-name,
      .footer-list a,
      .muon-chip,
      .muon-product-link,
      .btn-accent,
      .btn-outline-dark-brand,
      .btn-submit {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
      }

      .section-title {
        font-size: clamp(34px, 10.4vw, 46px) !important;
        line-height: 1;
        letter-spacing: .004em;
      }

      #cervezas .section-title,
      #estilos .section-title,
      #trabajos .section-title,
      #contacto .section-title {
        font-size: clamp(32px, 9.8vw, 42px) !important;
        line-height: 1.03;
      }

      #quienes-somos .ziggurat-phrase-title {
        font-size: clamp(36px, 11.2vw, 50px) !important;
        line-height: .98;
        letter-spacing: .002em;
      }

      .muon-product-copy,
      .muon-product-media,
      .muon-product-row,
      .muon-products-head {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .muon-product-title {
        font-size: clamp(34px, 10.6vw, 44px) !important;
        line-height: .98;
        letter-spacing: .002em;
        text-wrap: balance;
      }

      .muon-product-desc,
      .muon-products-head p,
      .section-subtitle,
      .lead-copy {
        max-width: 100%;
        overflow-wrap: break-word;
      }

      .muon-product-meta {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .muon-chip {
        min-width: 0;
        max-width: 100%;
        min-height: 32px;
        padding: 8px 11px;
        font-size: 11.5px;
        line-height: 1.15;
        letter-spacing: .04em !important;
        text-align: center;
      }

      .muon-product-link,
      .btn-accent,
      .btn-outline-dark-brand,
      .btn-submit {
        min-width: 0;
        line-height: 1.18;
        text-align: center;
      }

      .muon-product-link {
        padding: 13px 14px;
        letter-spacing: .045em !important;
      }

      .service-card h3,
      .why-card h3 {
        font-size: 18px;
        line-height: 1.16;
        letter-spacing: .025em !important;
      }

      .accordion-button {
        gap: 8px;
        line-height: 1.18;
      }

      .faq-num {
        flex: 0 0 auto;
      }
    }

    @media (max-width: 390px) {
      .section-title {
        font-size: clamp(30px, 9.5vw, 38px) !important;
      }

      #cervezas .section-title,
      #estilos .section-title,
      #trabajos .section-title,
      #contacto .section-title {
        font-size: clamp(29px, 9.2vw, 36px) !important;
      }

      .muon-product-title {
        font-size: clamp(30px, 9.7vw, 38px) !important;
        line-height: 1;
      }

      #quienes-somos .ziggurat-phrase-title {
        font-size: clamp(32px, 10.5vw, 44px) !important;
      }

      .muon-chip {
        font-size: 11px;
        letter-spacing: .032em !important;
        padding-inline: 9px;
      }
    }

.muon-products {
          background: #fff;
          color: #1b171b;
          overflow: hidden;
        }
    
        .muon-products-head {
          max-width: 780px;
          margin: 0 auto 64px;
          text-align: center;
        }
    
        .muon-products-head p {
          margin: 18px auto 0;
          max-width: 660px;
          font-size: 17px;
          line-height: 1.75;
          color: #666;
        }
    
        .muon-product-row {
          display: grid;
          grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
          gap: clamp(28px, 5vw, 72px);
          align-items: center;
          padding: clamp(42px, 5vw, 76px) 0;
          border-top: 1px solid rgba(27,23,27,.12);
        }
    
        .muon-product-row:first-of-type {
          border-top: 0;
          padding-top: 0;
        }
    
        .muon-product-row:nth-of-type(even) .muon-product-copy {
          order: 2;
        }
    
        .muon-product-row:nth-of-type(even) .muon-product-media {
          order: 1;
        }
    
        .muon-product-kicker {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 14px;
          font-family: var(--mono, monospace);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .18em;
          text-transform: uppercase;
          color: #9f8d6c;
        }
    
        .muon-product-kicker::before {
          content: "";
          width: 24px;
          height: 2px;
          background: #b9a887;
        }
    
        .muon-product-title {
          font-family: var(--display, system-ui, sans-serif);
          font-size: clamp(44px, 7vw, 92px);
          line-height: .9;
          letter-spacing: .02em;
          text-transform: uppercase;
          color: #1b171b;
          margin: 0 0 18px;
        }
    
        .muon-product-desc {
          max-width: 560px;
          font-size: 16px;
          line-height: 1.78;
          color: #565656;
          margin: 0 0 24px;
        }
    
        .muon-product-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-bottom: 28px;
        }
    
        .muon-chip {
          display: inline-flex;
          align-items: center;
          min-height: 36px;
          padding: 0 14px;
          border: 1px solid rgba(27,23,27,.16);
          background: #f6f3ee;
          color: #1b171b;
          font-family: var(--display, system-ui, sans-serif);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: .08em;
          text-transform: uppercase;
        }
    
        .muon-product-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 44px;
          padding: 0 22px;
          background: #1b171b;
          color: #fff;
          font-family: var(--display, system-ui, sans-serif);
          font-size: 14px;
          font-weight: 700;
          letter-spacing: .09em;
          text-transform: uppercase;
          transition: transform .2s ease, background .2s ease, color .2s ease;
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
        }
    
        .muon-product-link:hover {
          background: #b9a887;
          color: #1b171b;
          transform: translateY(-2px);
        }
    
        .muon-product-frame {
          background: #181f20;
          padding: clamp(10px, 1.8vw, 18px);
          box-shadow: 14px 14px 0 #b9a887, 0 24px 70px rgba(27,23,27,.18);
          border: 1px solid rgba(27,23,27,.12);
          overflow: hidden;
        }
    
        .muon-product-img-wrap {
          width: 100%;
          aspect-ratio: 4 / 5.55;
          background: #181f20;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }
    
        .muon-product-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          display: block;
          background: #181f20;
        }
    
        .muon-products .carousel-control-prev,
        .muon-products .carousel-control-next {
          width: 46px;
          height: 46px;
          top: 50%;
          transform: translateY(-50%);
          opacity: 1;
          background: rgba(27,23,27,.72);
          border-radius: 999px;
          margin: 0 10px;
        }
    
        .muon-products .carousel-control-prev-icon,
        .muon-products .carousel-control-next-icon {
          width: 2rem;
          height: 2rem;
          background-size: 60% 60%;
        }
    
        .muon-products .carousel-indicators {
          bottom: 12px;
          margin-bottom: 0;
        }
    
        .muon-products .carousel-indicators button {
          width: 9px;
          height: 9px;
          border-radius: 50%;
          border: 0;
          background: rgba(255,255,255,.62);
        }
    
        .muon-products .carousel-indicators button.active {
          background: #fff;
        }
    
        @media (max-width: 991.98px) {
          .muon-product-row {
            grid-template-columns: 1fr;
            gap: 30px;
          }
    
          .muon-product-row:nth-of-type(even) .muon-product-copy,
          .muon-product-row:nth-of-type(even) .muon-product-media {
            order: initial;
          }
    
          .muon-product-frame {
            box-shadow: 10px 10px 0 #b9a887, 0 18px 48px rgba(27,23,27,.16);
          }
        }
    
        @media (max-width: 575.98px) {
          .muon-products-head {
            margin-bottom: 42px;
          }
    
          .muon-product-row {
            padding: 46px 0;
          }
    
          .muon-product-title {
            font-size: clamp(42px, 15vw, 62px);
          }
    
          .muon-product-desc {
            font-size: 15px;
          }
    
          .muon-product-link {
            width: 100%;
          }
    
          .muon-product-img-wrap {
            aspect-ratio: 4 / 5.6;
          }
    
          .muon-products .carousel-control-prev,
          .muon-products .carousel-control-next {
            width: 40px;
            height: 40px;
            margin: 0 6px;
          }
        }

.contact-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.12);
}

.contact-icon svg {
  width: 16px;
  height: 16px;
  stroke: #000;
}
    /* ─── Design Tokens ─── */
    :root {
      --accent:       #ffa90f;
      --accent-deep:  #db8d00;
      --accent-soft:  #fff3d6;
      --accent-glow:  rgba(255,169,15,.18);
      --text:         #111111;
      --muted:        #5f5f5f;
      --muted-lt:     #8a8a8a;
      --line:         #ece7de;
      --surface:      #ffffff;
      --surface-soft: #faf7f1;
      --surface-warm: #f5f0e8;
      --shadow-xs:    0 2px 8px rgba(17,17,17,.05);
      --shadow-sm:    0 8px 24px rgba(17,17,17,.07);
      --shadow-md:    0 16px 40px rgba(17,17,17,.09);
      --shadow-lg:    0 28px 72px rgba(17,17,17,.12);
      --shadow-xl:    0 40px 100px rgba(17,17,17,.15);
      --shadow-accent: 0 16px 40px rgba(255,169,15,.30);
      --radius:       28px;
      --radius-sm:    18px;
      --radius-xs:    12px;
      --container:    1240px;
      --ease-out:     cubic-bezier(.16,1,.3,1);
      --ease-in-out:  cubic-bezier(.45,0,.55,1);
    }

    /* ─── Reset & Base ─── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: hidden; }

    body {
      margin: 0;
      font-family: "Manrope", sans-serif;
      color: var(--text);
      background: #fff;
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      width: 100%;
      position: relative;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    .container-xl { max-width: var(--container); }

    /* ─── Section base ─── */
    .section { padding: 108px 0; }

    /* ─── Eyebrow ─── */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .42rem 1rem .42rem .65rem;
      border-radius: 999px;
      background: var(--accent-soft);
      border: 1.5px solid rgba(255,169,15,.25);
      color: #8a5c00;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    /* ─── Section Heading ─── */
    .section-heading { max-width: 780px; margin-bottom: 4rem; }
    .section-title {
      margin: .9rem 0 1rem;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(2.4rem, 4.5vw, 4rem);
      line-height: 1.05;
      letter-spacing: -.02em;
      font-weight: 700;
    }
    .section-title em { font-style: italic; color: var(--accent-deep); }
    .section-subtitle {
      margin: 0;
      font-size: 1.06rem;
      color: var(--muted);
      max-width: 640px;
      line-height: 1.7;
    }

    /* ─── TOPBAR / NAVBAR ─── */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 1040;
      padding: 14px 0;
      transition: background .3s, box-shadow .3s;
    }
    .topbar.scrolled {
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(20px) saturate(1.8);
      -webkit-backdrop-filter: blur(20px) saturate(1.8);
      box-shadow: 0 1px 0 rgba(17,17,17,.06), var(--shadow-sm);
    }
    .navbar { padding: 0; }

    .navbar-shell {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      padding: 10px 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.96);
      box-shadow: var(--shadow-md);
      border: 1.5px solid rgba(255,255,255,.9);
      outline: 1px solid rgba(17,17,17,.04);
    }

    .navbar, .navbar > .container, .navbar > .container-fluid { max-width: 100%; }
    .navbar-brand, .brand-name { min-width: 0; }
    .navbar-collapse { min-width: 0; }

    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      flex-shrink: 0;
    }
    .brand-logo { height: 42px; width: auto; object-fit: contain; }
    .brand-name {
      font-size: .92rem;
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.2;
      color: var(--text);
    }
    .brand-name span {
      display: block;
      font-size: .72rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .01em;
    }

    .navbar-nav { gap: .15rem; margin: 0 auto; }
    .nav-link {
      color: var(--muted);
      font-size: .88rem;
      font-weight: 600;
      padding: .6rem .9rem !important;
      border-radius: 999px;
      transition: all .2s ease;
      letter-spacing: -.01em;
    }
    .nav-link:hover, .nav-link.active-link {
      background: var(--accent-soft);
      color: var(--text);
    }

    .navbar-toggler {
      border: 1.5px solid var(--line);
      box-shadow: none !important;
      padding: .45rem .6rem;
      border-radius: 12px;
      background: var(--surface-soft);
      transition: all .2s;
    }
    .navbar-toggler:hover { background: var(--accent-soft); border-color: rgba(255,169,15,.3); }

    /* ─── BUTTONS ─── */
    .btn {
      border-radius: 999px;
      padding: .88rem 1.6rem;
      font-weight: 700;
      font-size: .92rem;
      letter-spacing: -.01em;
      border-width: 1.5px;
      transition: all .25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
    .btn::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.15);
      opacity: 0;
      transition: opacity .2s;
      border-radius: inherit;
    }
    .btn:hover::after { opacity: 1; }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }

    .btn-accent {
      background: var(--accent);
      border-color: var(--accent);
      color: #111;
      box-shadow: var(--shadow-accent);
    }
    .btn-accent:hover, .btn-accent:focus {
      background: var(--accent-deep);
      border-color: var(--accent-deep);
      color: #111;
      box-shadow: 0 20px 50px rgba(219,141,0,.35);
    }
    .btn-outline-dark {
      border-color: rgba(17,17,17,.15);
      color: var(--text);
      background: rgba(255,255,255,.8);
      backdrop-filter: blur(8px);
    }
    .btn-outline-dark:hover, .btn-outline-dark:focus {
      background: #111;
      border-color: #111;
      color: #fff;
    }
    .btn-dark-soft { background: #111; border-color: #111; color: #fff; }
    .btn-dark-soft:hover { background: #000; color: #fff; border-color: #000; }
    .btn-light-soft { background: rgba(255,255,255,.7); border-color: rgba(17,17,17,.12); color: #111; }
    .btn-light-soft:hover { background: #fff; color: #111; }

    /* ─── HERO ─── */
    .hero {
      padding: 48px 0 96px;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: "";
      position: absolute;
      top: -20%;
      right: -10%;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,169,15,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: -5%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,169,15,.07) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 3rem;
      align-items: center
/* ...cortado... */

:root{
      --wa:#25D366;
      --wa-dark:#1fb85a;
      --wa-darker:#189a4a;
      --light-bg:#ffffff;
      --light-bg-soft:#f6f8f7;
      --light-border:#dde4df;
      --dark-text:#1c1f1d;
      --muted-text:#6c756f;
    }
  
    .wa-float{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:9999;
      font-family:inherit;
    }
  
    .wa-btn{
      background:var(--wa);
      color:#fff;
      border:0;
      width:60px;
      height:60px;
      border-radius:50%;
      display:grid;
      place-items:center;
      box-shadow:0 10px 30px rgba(0,0,0,.22);
      cursor:pointer;
      transition:transform .3s, box-shadow .3s, filter .3s;
      position:relative;
      overflow:hidden;
      z-index:9999;
    }
  
    .wa-btn:hover{
      transform:translateY(-3px) scale(1.05);
      box-shadow:0 14px 36px rgba(0,0,0,.28);
      filter:brightness(.98);
    }
  
    .wa-card{
      position:absolute;
      right:0;
      bottom:74px;
      width:min(360px,92vw);
      background:var(--light-bg);
      color:var(--dark-text);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 18px 60px rgba(0,0,0,.25);
      border:1px solid var(--light-border);
      transform:translateY(10px);
      opacity:0;
      transition:transform .3s, opacity .3s;
      z-index:10000;
    }
  
    .wa-card[aria-modal="true"]{
      transform:translateY(0);
      opacity:1;
    }
  
    .wa-head{
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 16px;
      background:linear-gradient(135deg, #ffffff, #ecf6f0);
      border-bottom:1px solid var(--light-border);
    }
  
    .wa-avatar{
      width:40px;
      height:40px;
      border-radius:10px;
      background:#e9f7ef;
      display:grid;
      place-items:center;
      border:1px solid #cfeeda;
      overflow:hidden;
    }
  
    .wa-title{
      font-weight:800;
      font-size:1.02rem;
      color:var(--dark-text);
    }
  
    .wa-status{
      font-size:.85rem;
      color:var(--muted-text);
      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:var(--muted-text);
      border:0;
      font-size:24px;
      cursor:pointer;
      opacity:.75;
      width:32px;
      height:32px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.2s;
    }
  
    .wa-close:hover{
      opacity:1;
      background:rgba(0,0,0,.04);
    }
  
    .wa-body{
      padding:12px 14px;
      max-height:40vh;
      overflow:auto;
      background:var(--light-bg-soft);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
  
    .wa-bubble{
      max-width:88%;
      padding:9px 11px;
      border-radius:14px;
      line-height:1.35;
      box-shadow:0 3px 10px rgba(0,0,0,.06);
      animation:fadeIn .25s ease;
      font-size:.9rem;
    }
  
    @keyframes fadeIn{
      from{opacity:0;transform:translateY(5px)}
      to{opacity:1;transform:none}
    }
  
    .wa-bot{
      background:#ffffff;
      border:1px solid var(--light-border);
      align-self:flex-start;
      border-bottom-left-radius:4px;
    }
  
    .wa-user{
      background:var(--wa);
      color:#fff;
      align-self:flex-end;
      border-bottom-right-radius:4px;
    }
  
    .wa-compose{
      display:grid;
      grid-template-columns:1fr auto;
      gap:8px;
      padding:10px 12px;
      background:#ffffff;
      border-top:1px solid var(--light-border);
    }
  
    .wa-compose textarea{
      resize:none;
      border-radius:12px;
      padding:10px 12px;
      border:1px solid var(--light-border);
      background:#f9fbfa;
      color:var(--dark-text);
      outline:none;
      min-height:44px;
      font-family:inherit;
      font-size:.9rem;
      transition:.2s;
    }
  
    .wa-compose textarea:focus{
      border-color:var(--wa);
      box-shadow:0 0 0 2px rgba(37,211,102,.15);
      background:#ffffff;
    }
  
    .wa-send{
      background:var(--wa);
      color:#ffffff;
      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:scale(1.04);
    }
  
    .wa-body::-webkit-scrollbar{width:6px}
    .wa-body::-webkit-scrollbar-track{background:rgba(0,0,0,.03);border-radius:3px}
    .wa-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}
    .wa-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
  
    @media (max-width:480px){
      .wa-float{
        right:12px;
        bottom:12px;
      }
      .wa-card{
        width:calc(100vw - 24px);
        right:0;
      }
    }

/* ─── TOKENS ─────────────────────────────────────────────────── */
    :root {
      --accent:   #d86248;
      --accent2:  #1a4a7a;
      --gold:     #c9a84c;
      --text:     #0d0d0d;
      --muted:    #5a5a6a;
      --soft:     #f4f6f9;
      --line:     #e2e6ee;
      --white:    #ffffff;
      --shadow-xs: 0 2px 8px rgba(10,43,74,.06);
      --shadow-sm: 0 8px 24px rgba(10,43,74,.09);
      --shadow-md: 0 20px 52px rgba(10,43,74,.13);
      --shadow-lg: 0 32px 80px rgba(10,43,74,.18);
      --r-xl: 28px;
      --r-lg: 20px;
      --r-md: 14px;
      --container: 1240px;
      scroll-behavior: smooth;
    }

    /* ─── RESET & BASE ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { overflow-x: hidden; }

    body {
      margin: 0;
      font-family: "DM Sans", sans-serif;
      color: var(--text);
      background: #ffffff;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container { max-width: var(--container); }

    /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
    .display-font { font-family: "Playfair Display", serif; }

    /* ─── EYEBROW ────────────────────────────────────────────────── */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .42rem 1rem;
      border-radius: 999px;
      background: rgba(10,43,74,.07);
      border: 1px solid rgba(10,43,74,.12);
      color: var(--accent);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
    }

    /* ─── SECTION ────────────────────────────────────────────────── */
    .section { padding: 100px 0; position: relative; }

    .section-title {
      margin: .9rem 0 1rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1.08;
      letter-spacing: -.02em;
      font-weight: 700;
      color: var(--text);
    }

    .section-subtitle {
      margin: 0;
      max-width: 640px;
      color: var(--muted);
      font-size: 1.05rem;
    }

    /* ─── HEADER / NAVBAR ────────────────────────────────────────── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1040;
      padding: 0;
      backdrop-filter: saturate(200%) blur(20px);
      background: rgba(255,255,255,.88);
      border-bottom: 1px solid rgba(10,43,74,.07);
      transition: box-shadow .3s;
    }
    .site-header.scrolled {
      box-shadow: 0 4px 24px rgba(10,43,74,.10);
    }

    .navbar { padding: 16px 0; }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: .85rem;
    }
    .brand img {
      width: 40px; height: 40px;
      object-fit: contain;
    }
    .brand-mark { display: flex; flex-direction: column; }
    .brand-name {
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.15;
      color: var(--accent);
    }
    .brand-sub {
      font-size: .70rem;
      color: var(--muted);
      line-height: 1.2;
    }

    .navbar-toggler { border: none; padding: .4rem .25rem; box-shadow: none!important; }

    .navbar-nav { gap: .1rem; }
    .nav-link {
      color: var(--text)!important;
      font-size: .92rem;
      font-weight: 500;
      padding: .65rem .95rem!important;
      border-radius: 999px;
      transition: background .2s, color .2s;
      position: relative;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      bottom: 4px; left: 50%; right: 50%;
      height: 2px;
      background: var(--gold);
      border-radius: 2px;
      transition: left .25s, right .25s;
    }
    .nav-link:hover::after,
    .nav-link:focus::after { left: 18%; right: 18%; }
    .nav-link:hover,
    .nav-link:focus { color: var(--accent)!important; background: rgba(10,43,74,.05); }

    /* ─── BUTTONS ────────────────────────────────────────────────── */
    .btn {
      border-radius: 999px;
      padding: .82rem 1.55rem;
      font-weight: 600;
      font-size: .94rem;
      letter-spacing: -.005em;
      transition: transform .22s, box-shadow .22s, background .22s, border-color .22s, color .22s;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }

    .btn-accent {
      color: #fff;
      background: var(--accent);
      border: 1.5px solid var(--accent);
      box-shadow: 0 8px 24px rgba(10,43,74,.28), inset 0 1px 0 rgba(255,255,255,.10);
    }
    .btn-accent:hover, .btn-accent:focus {
      color: #fff;
      background: #0d3560;
      border-color: #0d3560;
      box-shadow: 0 14px 34px rgba(10,43,74,.38);
    }

    .btn-outline-dark {
      border: 1.5px solid rgba(10,43,74,.22);
      color: var(--text);
      background: transparent;
    }
    .btn-outline-dark:hover, .btn-outline-dark:focus {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      box-shadow: var(--shadow-sm);
    }

    /* ─── HERO ───────────────────────────────────────────────────── */
    .hero {
      padding: 70px 0 100px;
      position: relative;
      overflow: hidden;
    }

    /* Decorative background shapes */
    .hero::before {
      content: "";
      position: absolute;
      top: -120px; right: -120px;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(10,43,74,.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: "";
      position: absolute;
      bottom: -80px; left: -60px;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-eyebrow-wrap { margin-bottom: 1.4rem; }

    .hero-title {
      font-family: "Playfair Display", serif;
      font-size: clamp(2.6rem, 6vw, 5rem);
      line-height: 1.02;
      letter-spacing: -.03em;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 1.3rem;
    }
    .hero-title em {
      font-style: italic;
      color: var(--accent);
    }

    .hero-text {
      font-size: 1.07rem;
      color: var(--muted);
      max-width: 560px;
      margin: 0 0 2rem;
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      margin-bottom: 2.2rem;
    }

    .hero-stats {
      display: flex;
      gap: 2.4rem;
      flex-wrap: wrap;
      padding-top: 1.8rem;
      border-top: 1px solid var(--line);
/* ...cortado... */

:root{
  --wa:#25D366;
  --wa-dark:#1fb85a;
  --light-bg:#ffffff;
  --light-bg-soft:#f6f8f7;
  --light-border:#dde4df;
  --dark-text:#1c1f1d;
  --muted-text:#6c756f;
}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:9999;font-family:inherit}
.wa-btn{
  background:var(--wa);color:#fff;border:0;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.22);
  cursor:pointer;transition:transform .3s,box-shadow .3s,filter .3s;position:relative;overflow:hidden;z-index:9999
}
.wa-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 36px rgba(0,0,0,.28);filter:brightness(.98)}
.wa-card{
  position:absolute;right:0;bottom:74px;width:min(360px,92vw);background:var(--light-bg);
  color:var(--dark-text);border-radius:18px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.25);
  border:1px solid var(--light-border);transform:translateY(10px);opacity:0;transition:transform .3s,opacity .3s;z-index:10000
}
.wa-card[aria-modal="true"]{transform:translateY(0);opacity:1}
.wa-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#ffffff,#ecf6f0);border-bottom:1px solid var(--light-border)}
.wa-avatar{width:40px;height:40px;border-radius:10px;background:#e9f7ef;display:grid;place-items:center;border:1px solid #cfeeda;overflow:hidden}
.wa-title{font-weight:800;font-size:1.02rem;color:var(--dark-text)}
.wa-status{font-size:.85rem;color:var(--muted-text);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:var(--muted-text);border:0;font-size:24px;cursor:pointer;opacity:.75;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
.wa-close:hover{opacity:1;background:rgba(0,0,0,.04)}
.wa-body{padding:12px 14px;max-height:40vh;overflow:auto;background:var(--light-bg-soft);display:flex;flex-direction:column;gap:8px}
.wa-bubble{max-width:88%;padding:9px 11px;border-radius:14px;line-height:1.35;box-shadow:0 3px 10px rgba(0,0,0,.06);font-size:.9rem}
.wa-bot{background:#ffffff;border:1px solid var(--light-border);align-self:flex-start;border-bottom-left-radius:4px}
.wa-user{background:var(--wa);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.wa-compose{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px;background:#ffffff;border-top:1px solid var(--light-border)}
.wa-compose textarea{resize:none;border-radius:12px;padding:10px 12px;border:1px solid var(--light-border);background:#f9fbfa;color:var(--dark-text);outline:none;min-height:44px;font-family:inherit;font-size:.9rem;transition:.2s}
.wa-compose textarea:focus{border-color:var(--wa);box-shadow:0 0 0 2px rgba(37,211,102,.15);background:#ffffff}
.wa-send{background:var(--wa);color:#ffffff;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:scale(1.04)}
@media (max-width:480px){
  .wa-float{right:12px;bottom:12px}
  .wa-card{width:calc(100vw - 24px);right:0}
}