body { animation: pageIn .5s ease forwards; }
    @keyframes pageIn { from{opacity:0;} to{opacity:1;} }

    /* ── Intro productos ────────────────────────────────── */
    .productos-intro {
      padding: clamp(5rem,10vh,9rem) clamp(1.5rem,5vw,4rem);
      background: #080808;
    }

    .productos-intro-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(4rem,7vw,8rem);
      align-items: center;
    }

    .prod-intro-text .label { margin-bottom: 1.5rem; }
    .prod-intro-text .display-lg { color: #f5f2ee; margin-bottom: 1rem; }
    .prod-intro-text .divider { margin: 1.5rem 0; }
    .prod-intro-text .body-text { margin-bottom: 1.25rem; }

    .prod-intro-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.3rem,2vw,1.8rem);
      font-weight: 300;
      font-style: italic;
      color: rgba(245,242,238,.5);
      line-height: 1.7;
      border-left: 2px solid rgba(184,147,86,.4);
      padding-left: 2rem;
    }

    /* ── Productos grid ─────────────────────────────────── */
    .productos-catalog {
      padding: clamp(5rem,10vh,9rem) clamp(1.5rem,5vw,4rem);
      background: #0e0c0a;
    }

    .productos-catalog-header {
      max-width: 1400px;
      margin: 0 auto 3rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .productos-note {
      font-size: .7rem;
      font-weight: 300;
      color: rgba(245,242,238,.35);
      letter-spacing: .05em;
      max-width: 280px;
      text-align: right;
    }

    .productos-catalog-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
    }

    /* Product card styles already in styles.css as .product-card */
    /* Additional overrides */
    .product-card {
      background: #111010;
    }

    .product-card-cta {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .6rem;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #b89356;
      margin-top: .75rem;
      transition: gap .3s;
    }

    .product-card-cta::after { content: '→'; }
    .product-card:hover .product-card-cta { gap: .75rem; }

    .product-card.inactive .product-card-cta { display: none; }

    /* ── Cómo funciona ──────────────────────────────────── */
    .como-funciona {
      padding: clamp(5rem,10vh,9rem) clamp(1.5rem,5vw,4rem);
      background: #f5f2ee;
    }

    .como-grid {
      max-width: 1400px;
      margin: 3rem auto 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(0,0,0,.08);
    }

    .como-item {
      background: #f5f2ee;
      padding: clamp(2rem,3.5vw,3rem);
      transition: background .3s;
    }

    .como-item:hover { background: #ede9e3; }

    .como-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3rem;
      font-weight: 300;
      color: rgba(138,109,63,.2);
      line-height: 1;
      margin-bottom: 1rem;
    }

    .como-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 400;
      color: #0a0908;
      margin-bottom: .5rem;
    }

    .como-desc {
      font-size: .78rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(0,0,0,.55);
    }

    /* ── Panel note ─────────────────────────────────────── */
    .panel-note {
      max-width: 1400px;
      margin: 3rem auto 0;
      padding: 2rem 2.5rem;
      border: 1px solid rgba(184,147,86,.25);
      background: rgba(184,147,86,.04);
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .panel-note-icon {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      color: rgba(184,147,86,.6);
      flex-shrink: 0;
      line-height: 1;
    }

    .panel-note-text {
      font-size: .8rem;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(245,242,238,.55);
    }

    .panel-note-text strong {
      color: #b89356;
      font-weight: 400;
    }

    @media (max-width: 1000px) {
      .productos-intro-inner { grid-template-columns: 1fr; }
      .productos-catalog-grid { grid-template-columns: repeat(2, 1fr); }
      .como-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      .productos-catalog-grid { grid-template-columns: 1fr; }
      .como-grid { grid-template-columns: 1fr; }
    }