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

 :root {
     --gold: #B8922A;
     --dark: #1A1208;
     --mid: #4A3F2F;
     --light: #F5F4F1;
     --border: #DDD9D0;
     --white: #FFFFFF;
     --text: #2C2416;
     --muted: #7A7060;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     background-color: var(--light);
     color: var(--text);
     min-height: 100vh;
 }

 /* ── PAGE WRAPPER ── */
 .page-wrapper {
     max-width: 480px;
     margin: 0 auto;
     background-color: var(--white);
     position: relative;
     overflow: hidden;
     min-height: 100vh;
 }

 /* Blueprint background */
 .page-wrapper::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url('images/bg.png');
     background-size: cover;
     background-position: center top;
     background-repeat: no-repeat;
     pointer-events: none;
     z-index: 0;
 }

 /* All sections above bg */
 .lang-bar,
 .hero,
 .cta-list,
 .solutions,
 .tagline-footer,
 .copyright {
     position: relative;
     z-index: 1;
 }

 /* ── LANGUAGE BAR ── */
 .lang-bar {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     padding: 18px 28px 0;
 }

 .lang-bar a {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.08em;
     color: var(--muted);
     text-decoration: none;
     padding: 0 10px;
     transition: color 0.2s;
 }

 .lang-bar a:hover {
     color: var(--gold);
 }

 .lang-bar a.active {
     color: var(--dark);
     font-weight: 600;
 }

 .lang-bar .sep {
     width: 1px;
     height: 12px;
     background: var(--border);
     display: inline-block;
     vertical-align: middle;
 }

 /* ── HERO ── */
 .hero {
     text-align: center;
     padding: 32px 32px 24px;
 }

 .logo-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 24px;
 }

 .logo-img {
     width: 260px;
     height: auto;
     display: block;
 }

 .hero-tagline {
     font-family: 'Cormorant Garamond', serif;
     font-size: 18px;
     font-weight: 400;
     line-height: 1.65;
     color: var(--mid);
     max-width: 280px;
     margin: 0 auto;
 }

 /* ── CTA BUTTONS ── */
 .cta-list {
     padding: 12px 24px 32px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .cta-btn {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 16px 20px;
     border: 1.5px solid var(--border);
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.88);
     backdrop-filter: blur(4px);
     text-decoration: none;
     color: var(--text);
     transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
 }

 .cta-btn:hover {
     border-color: var(--gold);
     box-shadow: 0 2px 14px rgba(184, 146, 42, 0.13);
     background: rgba(253, 251, 247, 0.96);
 }

 .cta-btn .btn-icon {
     width: 28px;
     height: 28px;
     flex-shrink: 0;
     color: var(--dark);
     opacity: 0.7;
 }

 .cta-btn .btn-label {
     flex: 1;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.13em;
     color: var(--dark);
 }

 .cta-btn .btn-arrow {
     color: var(--muted);
     font-size: 18px;
     line-height: 1;
     opacity: 0.5;
     transition: opacity 0.2s, transform 0.2s;
 }

 .cta-btn:hover .btn-arrow {
     opacity: 1;
     transform: translateX(3px);
     color: var(--gold);
 }

 /* ── SOLUTIONS ── */
 .solutions {
     padding: 0 20px 36px;
 }

 .section-title {
     text-align: center;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.3em;
     color: var(--muted);
     margin-bottom: 20px;
     position: relative;
 }

 .section-title::before,
 .section-title::after {
     content: '';
     position: absolute;
     top: 50%;
     width: 44px;
     height: 1px;
     background: var(--border);
 }

 .section-title::before {
     right: calc(50% + 198px);
 }

 .section-title::after {
     left: calc(50% + 196px);
 }

 .solutions-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 }

 .sol-card {
     background: rgba(245, 244, 241, 0.90);
     backdrop-filter: blur(4px);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 20px 10px 14px;
     text-align: center;
     text-decoration: none;
     color: var(--text);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 9px;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .sol-card:hover {
     border-color: var(--gold);
     box-shadow: 0 2px 14px rgba(184, 146, 42, 0.13);
 }

 .sol-icon {
     width: 34px;
     height: 34px;
     color: var(--gold);
     flex-shrink: 0;
 }

 .sol-title {
     font-size: 8.5px;
     font-weight: 700;
     letter-spacing: 0.07em;
     color: var(--dark);
     line-height: 1.4;
 }

 .sol-desc {
     font-size: 8px;
     color: var(--muted);
     line-height: 1.55;
 }

 .sol-arrow {
     color: var(--gold);
     font-size: 15px;
     margin-top: 2px;
 }

 /* ── TAGLINE FOOTER ── */
 .tagline-footer {
     text-align: center;
     padding: 32px 32px 24px;
     border-top: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.78);
     backdrop-filter: blur(6px);
 }

 .tagline-footer p {
     font-family: 'Cormorant Garamond', serif;
     font-size: 16px;
     color: var(--mid);
     line-height: 1.7;
 }

 .social-row {
     display: flex;
     justify-content: center;
     gap: 24px;
     margin-top: 20px;
 }

 .social-row a {
     color: var(--dark);
     opacity: 0.65;
     transition: opacity 0.2s, color 0.2s;
     display: flex;
     align-items: center;
 }

 .social-row a:hover {
     opacity: 1;
     color: var(--gold);
 }

 .social-row svg {
     width: 22px;
     height: 22px;
 }

 /* ── COPYRIGHT ── */
 .copyright {
     text-align: center;
     padding: 14px 24px 28px;
     font-size: 9px;
     color: var(--muted);
     letter-spacing: 0.02em;
     line-height: 1.6;
     background: rgba(255, 255, 255, 0.65);
 }

 .copyright a {
     color: var(--gold);
     text-decoration: none;
 }

 .copyright a:hover {
     text-decoration: underline;
 }

 /* ══════════════════════════════════════
     DESKTOP (≥ 769px)
     Centro + sidebar ampliado
  ══════════════════════════════════════ */
 @media (min-width: 769px) {
     body {
         background: var(--light);
     }

     .page-wrapper {
         max-width: 820px;
         margin: 40px auto;
         border-radius: 8px;
         box-shadow: 0 8px 48px rgba(0, 0, 0, 0.10);
         min-height: auto;
     }

     /* Language bar */
     .lang-bar {
         padding: 24px 40px 0;
     }

     /* Hero */
     .hero {
         padding: 40px 60px 32px;
     }

     .logo-img {
         width: 320px;
     }

     .hero-tagline {
         font-size: 21px;
         max-width: 360px;
     }

     /* CTA — two columns */
     .cta-list {
         padding: 8px 40px 40px;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 12px;
     }

     /* Last button if odd spans full width */
     .cta-btn:last-child:nth-child(odd) {
         grid-column: 1 / -1;
     }

     .cta-btn {
         padding: 18px 24px;
     }

     .cta-btn .btn-icon {
         width: 32px;
         height: 32px;
     }

     .cta-btn .btn-label {
         font-size: 12px;
     }

     /* Solutions */
     .solutions {
         padding: 0 40px 48px;
     }

     .section-title {
         font-size: 11px;
         margin-bottom: 28px;
     }

     .section-title::before {
         right: calc(50% + 88px);
     }

     .section-title::after {
         left: calc(50% + 88px);
     }

     .solutions-grid {
         gap: 14px;
     }

     .sol-card {
         padding: 24px 16px 18px;
         gap: 12px;
     }

     .sol-icon {
         width: 40px;
         height: 40px;
     }

     .sol-title {
         font-size: 10px;
     }

     .sol-desc {
         font-size: 9.5px;
     }

     .sol-arrow {
         font-size: 17px;
     }

     /* Tagline footer */
     .tagline-footer {
         padding: 40px 60px 32px;
     }

     .tagline-footer p {
         font-size: 18px;
     }

     /* Copyright */
     .copyright {
         padding: 16px 40px 32px;
         font-size: 10px;
     }
 }

 /* ══════════════════════════════════════
     MOBILE SMALL (≤ 380px)
  ══════════════════════════════════════ */
 @media (max-width: 380px) {
     .logo-img {
         width: 200px;
     }

     .hero-tagline {
         font-size: 16px;
     }

     .cta-btn .btn-label {
         font-size: 10px;
         letter-spacing: 0.09em;
     }

     .solutions-grid {
         grid-template-columns: 1fr 1fr;
     }

     .section-title::before,
     .section-title::after {
         display: none;
     }
 }