/* Comfortable section rhythm, consistent iconography and restrained motion. */
:root {
  --section-space: clamp(42px, 4.2vw, 64px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
.section { padding-block: var(--section-space); }
.section h2 { margin-bottom: 26px; }
.eyebrow { margin-bottom: 14px; }
.benefits-grid { padding-block: 30px; }
.products-layout { align-items: center; }
.products h2 { margin-bottom: 0; }
.product-card { padding: 15px 13px 17px; }
.product-card img { margin-bottom: 14px; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 4px; }
.steps { gap: 24px; }
.step { min-height: 202px; padding-top: 25px; padding-bottom: 27px; }
.step h3 { margin-bottom: 11px; }
.step-number { top: 27px; border-width: 1.5px; background: #fcfaf5; }
.steps:before { top: 49px; background: linear-gradient(90deg, #d9c694, #b99141, #d9c694); }
.about-copy { padding-block: 8px; }
.about-copy p:not(.eyebrow) { line-height: 1.6; margin-bottom: 24px; }
.about-features { padding-block: 0; gap: 14px; }
.about-features .card { padding: 19px 17px; }
.warehouse { min-height: 330px; border-radius: 8px; }
.segment-grid .card { padding: 24px 14px; }
.segment-grid p { margin-top: 11px; line-height: 1.45; }
.difference-grid .card { padding: 25px 19px; gap: 17px; }
.difference-grid p { line-height: 1.45; }
.faq h2 { margin-bottom: 12px; }
.faq .button { margin-top: 23px; }
.questions { gap: 10px; }
summary { padding: 13px 17px; align-items: center; }
summary:after { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-right: 1.7px solid var(--gold); border-bottom: 1.7px solid var(--gold); transform: rotate(45deg); margin-right: 3px; transition: transform 220ms var(--ease-out); }
details[open] summary:after { transform: rotate(225deg); }
details[open] { border-color: #cfb77f; background: #fffdf7; }
details p { padding: 0 17px 17px; line-height: 1.55; }
.contact h2 { margin-bottom: 18px; }
.contact-grid { gap: 36px; }
.form-grid { row-gap: 13px; }
form > label { margin-top: 13px; }
input, textarea { padding: 10px 12px; transition: border-color 180ms, box-shadow 180ms; }
form > .button { margin-top: 13px; }
.icon { stroke-width: 1.65; overflow: visible; }
.icon-whatsapp { fill: currentColor; stroke: none; }
.benefits .icon { width: 37px; height: 37px; stroke-width: 1.5; }
.step > .icon { width: 38px; height: 38px; margin-bottom: 13px; }
.about-features .icon { width: 32px; height: 32px; margin-bottom: 11px; }
.segment-grid .icon { box-sizing: content-box; width: 31px; height: 31px; padding: 12px; border-radius: 16px; background: linear-gradient(145deg, #e8d39944, #eee4cc33); margin-bottom: 14px; color: #a17c31; }
.difference-grid .icon { width: 34px; height: 34px; color: #a78033; }
.floating-whatsapp { border: 1px solid #ffffff70; box-shadow: 0 5px 20px #146a3838; }
.floating-whatsapp .icon { width: 29px; height: 29px; }
.card, .product-card { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms; }
.card .icon, .product-card img, .button .icon, .product-card span .icon { transition: transform 350ms var(--ease-out), color 250ms; }
.button { position: relative; isolation: isolate; overflow: hidden; transition: transform 250ms var(--ease-out), box-shadow 250ms, border-color 250ms; }
.button.gold:before { content: ''; position: absolute; inset: -60% auto -60% -70%; width: 35%; pointer-events: none; background: linear-gradient(90deg, transparent, #fff8, transparent); transform: skewX(-20deg); transition: left 650ms var(--ease-out); z-index: -1; }
.header nav a { position: relative; padding-block: 9px; }
.header nav a:after { content: ''; position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease-out); }
.header nav a:hover:after, .header nav a:focus-visible:after { transform: scaleX(1); }
.menu-toggle .icon { transition: transform 250ms var(--ease-out); }
.menu-toggle[aria-expanded=true] .icon { transform: rotate(90deg); }
.product-card:focus-visible { transform: translateY(-4px); border-color: var(--gold); }
.button:focus-visible .icon-arrow { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .card:hover, .product-card:hover { transform: translateY(-5px); border-color: #c9ac68; box-shadow: 0 12px 28px -12px #8a682b35; }
  .card:hover .icon { transform: translateY(-3px); color: #8f6825; }
  .about-features .card:hover .icon-settings { transform: rotate(30deg); }
  .product-card:hover img { transform: scale(1.055); }
  .product-card:hover span .icon, .button:hover .icon-arrow { transform: translateX(4px); }
  .button.gold:hover:before { left: 135%; }
  .button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -7px #84632955; }
  .floating-whatsapp:hover { transform: translateY(-4px) scale(1.04); }
}
.floating-whatsapp { transition: transform 250ms var(--ease-out), box-shadow 250ms; }
@media (max-width: 1050px) {
  .difference-grid .card { padding: 22px 15px; gap: 12px; }
  .contact-grid { gap: 25px; }
  .about-features .card { padding: 16px 13px; }
}
@media (max-width: 850px) {
  .about-copy { padding: 0; }
  .steps { gap: 16px; }
  .about-grid { row-gap: 26px; }
  .section h2 { margin-bottom: 24px; }
  .products h2 { margin-bottom: 4px; }
}
@media (max-width: 560px) {
  :root { --section-space: 40px; }
  .benefits-grid { padding-block: 27px; row-gap: 25px; }
  .benefits .icon { width: 28px; height: 28px; }
  .product-card { padding: 14px; }
  .step { padding: 20px 15px 23px; min-height: 215px; }
  .step-number { top: 21px; }
  .step > .icon { margin-left: 54px; margin-bottom: 17px; }
  .warehouse { min-height: 0; height: 280px; }
  .about-features .card { padding: 20px 16px; }
  .segment-grid .card { padding: 23px 13px; }
  .difference-grid .card { padding: 23px 19px; gap: 18px; }
  .faq-grid { gap: 27px; }
  .contact-grid { gap: 27px; }
  .questions { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .product-card:hover, .card:hover .icon, .product-card:hover img, .button:hover, .floating-whatsapp:hover { transform: none; }
}

/* Small brand signature from the reference and a little more hero breathing room. */
.hero { position: relative; min-height: 464px; padding-block: 12px; }
.hero-signature { position: absolute; right: 30px; bottom: 25px; z-index: 1; color: #f0ebde; text-transform: uppercase; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .17em; text-shadow: 0 1px 5px #000, 0 0 18px #000; }
.hero-signature:before { content: ''; display: block; width: 25px; height: 1px; background: #cba85b; margin-bottom: 11px; }
.hero-signature span { display: block; font-size: 10px; letter-spacing: .025em; }
@media (min-width:1550px) { .hero { min-height: 544px; } }
@media (max-width:1150px) { .hero { min-height: 444px; } .hero-signature { right: 22px; bottom: 20px; } }
@media (max-width:560px) { .hero { min-height: 754px; padding-block: 0; } .hero-copy { padding-top: 45px; } .hero-signature { right: 18px; bottom: 22px; font-size: 11px; } .hero-signature span { font-size: 10px; } }

/* Match the reference's open hero framing instead of cropping the product group. */
@media (min-width: 851px) {
  .hero { min-height: clamp(560px, 39vw, 740px); padding-block: 34px; background-size: cover; background-position: center 65%; }
  .hero-copy { padding-block: 38px; }
  .hero-signature { right: 30px; bottom: 30px; }
}
@media (min-width: 561px) and (max-width: 850px) {
  .hero { min-height: 520px; padding-block: 28px; background-position: 58% 65%; }
}

/* Full-width photo with a small diagonal shade behind the corner signature. */
@media (min-width: 851px) {
  .hero { isolation: isolate; background: #101313 url('assets/hero.png') center 65% / cover no-repeat; }
  .hero:after { content: ''; position: absolute; inset: auto 0 0 auto; width: 250px; height: 175px; z-index: 0; background: linear-gradient(315deg, #0b1012b0 0%, #0b10123d 30%, transparent 65%); pointer-events: none; }
  .hero-signature { right: 25px; bottom: 30px; font-size: 11px; line-height: 1.55; letter-spacing: .15em; }
  .hero-signature span { font-size: 9px; letter-spacing: .015em; }
}

/* Brand caption, kept as readable text over the original warehouse photograph. */
.warehouse-figure { position: relative; margin: 0; min-height: 330px; border-radius: 8px; overflow: hidden; isolation: isolate; }
.warehouse-figure .warehouse { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.warehouse-figure:after { content: ''; position: absolute; inset: auto 0 0; height: 145px; background: linear-gradient(25deg, #111513b3, #11151326 50%, transparent 75%); pointer-events: none; }
.warehouse-signature { position: absolute; left: 19px; bottom: 18px; z-index: 1; color: #f3eee1; font-size: 11px; font-weight: 500; line-height: 1.55; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 4px #0009; }
.warehouse-signature:before { content: ''; display: block; width: 25px; height: 1px; margin-bottom: 9px; background: #cba85b; }
.warehouse-signature span { display: block; font-size: 9px; letter-spacing: .025em; margin-top: 3px; }
@media(max-width:560px) {
  .warehouse-figure { min-height: 0; height: 280px; }
  .warehouse-figure:after { height: 180px; background: linear-gradient(25deg, #0b100fe6 0%, #0b100f99 28%, #0b100f33 53%, transparent 78%); }
}

/* Social links in the footer. Destinations are configured with the official profiles. */
.footer-meta { display: flex; flex-direction: column; gap: 12px; }
.footer-social { display: flex; align-items: center; gap: 12px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid #b7b3a76b; border-radius: 50%; background: transparent; color: #74746d; transition: transform 220ms var(--ease-out), border-color 220ms, background 220ms; }
footer .social-link img { width: 21px; height: 21px; opacity: .52; }
.social-link:disabled { opacity: 1; cursor: default; }
.social-link[href]:hover { transform: translateY(-3px); border-color: var(--gold); background: #ddbe7220; }
.social-link[href]:hover img { opacity: .8; }
@media(max-width:850px) { .footer-meta { grid-column: 1 / -1; } }
.social-link .social-icon { width: 21px; height: 21px; fill: currentColor; }

/* Warmer, slightly darker opening to the quotation banner. */
.quote-banner { background: linear-gradient(100deg, #ddc99f 0%, #e9dcc0 20%, #f4edde 42%, #f7f3e9 65%); }