:root {
  --ink: #10242c;
  --muted: #627178;
  --brand: #0c625e;
  --brand-dark: #0a2935;
  --accent: #c6a15b;
  --cream: #f5f1e8;
  --bg: #f3f5f6;
  --card: #ffffff;
  --line: #d8e0e3;
  --shadow: 0 20px 55px rgba(7, 35, 45, .11);
  --soft-shadow: 0 9px 26px rgba(7, 35, 45, .07);
}

body { letter-spacing: -.005em; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 11px 15px; border-radius: 6px; background: #fff; color: #082b38; font-weight: 900; box-shadow: 0 8px 26px rgba(0,0,0,.22); transform: translateY(-160%); transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid #d2b36f; outline-offset: 3px; }
main section[id] { scroll-margin-top: 124px; }
.purchase-guide,#beneficios,.faq-section,.tracking-section,#contacto,footer { content-visibility: auto; contain-intrinsic-size: auto 680px; }
.announcement { padding: 10px 16px; background: #071f2a; letter-spacing: .35px; }
header { border-bottom-color: #d6dfe2; box-shadow: 0 5px 22px rgba(6, 35, 45, .05); }
.nav { min-height: 78px; }
.brand-copy strong { color: #10394f; letter-spacing: .65px; }
.brand-copy small { color: #557078; font-weight: 700; }
.navlinks { color: #2f474f; }
.header-search { background: #f5f7f8; border-radius: 8px; }
.accountbtn,.cartbtn { border-radius: 8px; }
.cartbtn { background: #0a3543; box-shadow: none; }

.hero { padding-top: 32px; }
.hero-shell { min-height: 430px; border-radius: 12px; background: linear-gradient(118deg,#082b38 0%,#0b4d50 62%,#15635b 100%); box-shadow: 0 26px 70px rgba(7, 38, 48, .22); }
.hero-shell:before { width: 420px; height: 420px; right: -120px; top: -160px; border: 1px solid rgba(255,255,255,.13); background: transparent; }
.hero-copy { padding: 58px 34px 58px 60px; }
.eyebrow { border-radius: 4px; background: rgba(255,255,255,.08); letter-spacing: 1.25px; }
.hero h1 { margin-top: 20px; max-width: 690px; font-size: clamp(39px,4.5vw,60px); line-height: 1.04; letter-spacing: -1.8px; }
.hero h1 span { color: #dfc17e; }
.hero p { max-width: 590px; color: #dfe9eb; line-height: 1.65; }
.cta { min-height: 47px; border-radius: 7px; letter-spacing: .1px; }
.cta.primary { background: #d2b36f; color: #162a30; }
.cta.primary:hover { background: #e1c786; }
.cta.secondary { background: transparent; }
.hero-product { width: min(370px,90%); border-radius: 9px; padding: 13px; transform: none; box-shadow: 0 24px 58px rgba(0,0,0,.3); }
.hero-product:hover,.hero-product:focus-visible { transform: translateY(-4px); }
.hero-product-image { border-radius: 6px; }
.hero-product-info .hero-product-cta { border-radius: 4px; background: #edf3f2; }

.trustbar { padding-top: 15px; }
.trust-item { border-radius: 8px; padding: 15px 17px; }
.trust-icon { border-radius: 6px; background: #eaf1f1; color: #0b5c5a; font-size: 16px; font-weight: 900; }
.section { padding: 42px 0; }
.section-kicker { color: #0d625e; letter-spacing: 1.35px; }
.section h2 { color: #102c38; letter-spacing: -.45px; }
.cat { border-radius: 8px; }
.cat .ic { color: #0b5b59; font-size: 18px; font-weight: 900; }
.catalog-search,.sort { border-radius: 7px; }
.product { border-radius: 8px; box-shadow: 0 3px 12px rgba(8, 35, 44, .035); }
.product:hover { transform: translateY(-3px); }
.badge,.stock-badge { border-radius: 4px; letter-spacing: .25px; }
.details-btn,.add { border-radius: 6px; }
.add.consult { background: #0b5f5d; }
.pic:after { border-radius: 4px; }

.tracking-shell { border-radius: 10px; background: linear-gradient(125deg,#092c39,#0e5d59); }
.tracking-card { border-radius: 7px; }
.tracking-form input,.tracking-submit { border-radius: 6px; }
.promo { border-radius: 10px; background: linear-gradient(120deg,#0a2c3b,#124c5d 68%,#17665f); }
.promo-art div { font-size: 64px; filter: grayscale(1); opacity: .65; }
.value-card { border-radius: 8px; padding: 27px; }
.value-card .icon { border-radius: 6px; background: #eaf1f1; color: #0a5c59; font-size: 16px; font-weight: 900; }
.faq-section { scroll-margin-top: 124px; background: linear-gradient(180deg,#f7f9f9 0%,#eef3f3 100%); border-top: 1px solid #e0e7e8; border-bottom: 1px solid #dce5e6; }
.faq-shell { display: grid; grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr); gap: 52px; align-items: start; }
.faq-intro { position: sticky; top: 112px; }
.faq-intro h2 { max-width: 460px; margin: 8px 0 12px; }
.faq-intro p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.65; }
.faq-help { margin-top: 22px; border-color: #97b5b5; color: #0a5154; }
.faq-help:hover { border-color: #0a5154; background: #fff; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { overflow: hidden; border: 1px solid #d2dfe1; border-radius: 8px; background: #fff; box-shadow: 0 5px 16px rgba(8,35,44,.035); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 64px; padding: 17px 20px; color: #17333e; font-weight: 900; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #eaf2f1; color: #0b5c5a; font-size: 20px; font-weight: 500; transition: transform .2s ease, background .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); background: #0b5c5a; color: #fff; }
.faq-list details p { margin: 0; padding: 0 20px 19px; color: #586970; line-height: 1.65; }
.faq-list summary:focus-visible { outline: 3px solid rgba(12,98,94,.25); outline-offset: -3px; }
.detail-wa { cursor: pointer; }
.contact { border-radius: 9px; background: #eef3f3; border-color: #d4e0e0; }
.wa-button { border: 0; border-radius: 6px; background: #0a5154; cursor: pointer; }
footer { background: #071e29; }
.footbrand img { border-radius: 6px; }
.drawer,.product-modal,.payment-modal,.account-modal { border-radius: 8px 0 0 8px; }
.product-modal,.payment-modal,.account-modal { border-radius: 9px; }
.checkout,.detail-actions button,.detail-actions a { border-radius: 6px; }
.checkout.wa { background: #0a5154; }
.whatsapp { display: none; }

.support-fab { position: fixed; right: 20px; bottom: 20px; z-index: 42; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: #092f3c; color: #fff; font-weight: 900; box-shadow: 0 16px 36px rgba(5,35,45,.26); cursor: pointer; }
.support-fab-icon { width: 25px; height: 22px; display: grid; place-items: center; border: 1px solid #b7d0d2; border-radius: 4px; font-size: 12px; }
.support-modal { width: min(720px,100%); max-height: calc(100dvh - 32px); overflow: hidden; display: flex; flex-direction: column; border-radius: 9px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.support-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); background: #092f3c; color: #fff; }
.support-head h2 { margin: 3px 0 4px; font-size: 24px; }
.support-head p { margin: 0; color: #cbdadd; font-size: 12px; }
.support-head .close { color: #fff; background: rgba(255,255,255,.1); }
.support-kicker { color: #dfc17e; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
.support-body { min-height: 430px; overflow: auto; padding: 23px 24px 25px; }
.support-start { display: grid; gap: 14px; }
.support-start[hidden],.support-thread[hidden] { display: none; }
.support-intro { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 5px; }
.support-proof { padding: 11px; border: 1px solid #dae3e5; border-radius: 6px; background: #f7f9f9; font-size: 11px; color: #52636a; }
.support-proof b { display: block; margin-bottom: 3px; color: #16343f; font-size: 12px; }
.support-field { display: grid; gap: 6px; font-size: 12px; font-weight: 850; color: #263d46; }
.support-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.support-field input,.support-field select,.support-field textarea { width: 100%; padding: 12px 13px; border: 1px solid #ccd8dc; border-radius: 6px; outline: none; background: #fff; color: var(--ink); }
.support-field textarea { min-height: 108px; resize: vertical; }
.support-field input:focus,.support-field select:focus,.support-field textarea:focus { border-color: #397f7d; box-shadow: 0 0 0 3px rgba(12,98,94,.1); }
.support-submit { min-height: 45px; border: 0; border-radius: 6px; background: #0b5c5a; color: #fff; font-weight: 900; cursor: pointer; }
.support-submit:disabled { background: #98a6aa; cursor: wait; }
.support-privacy { margin: 0; color: #68777d; font-size: 10px; line-height: 1.5; }
.support-feedback { min-height: 18px; color: var(--danger); font-size: 12px; font-weight: 800; }
.support-thread-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.support-thread-head b { display: block; }
.support-thread-head span { color: var(--muted); font-size: 11px; }
.support-status { padding: 6px 9px; border-radius: 4px; background: #e7f4ed; color: #176344!important; font-weight: 900; }
.support-status.resolved { background: #eef1f2; color: #5e6a6e!important; }
.support-messages { min-height: 230px; max-height: 350px; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 18px 2px; }
.support-message { max-width: 82%; padding: 11px 13px; border: 1px solid #d8e1e3; border-radius: 7px; background: #f5f7f7; color: #1c343d; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-message.admin { justify-self: end; border-color: #bcd6d3; background: #e8f2f1; }
.support-message small { display: block; margin-top: 6px; color: #718086; font-size: 9px; }
.support-reply { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.support-reply textarea { min-height: 66px; max-height: 120px; resize: vertical; padding: 11px 12px; border: 1px solid #ccd8dc; border-radius: 6px; }
.support-reply .support-submit { align-self: stretch; padding: 0 17px; }

@media(max-width:720px) {
  .hero-copy { padding: 39px 27px 34px; }
  .hero-shell,.tracking-shell,.promo { border-radius: 8px; }
  .support-fab { right: 12px; bottom: 12px; padding: 0 13px; }
  .support-fab-label { display: none; }
  .support-modal { max-height: calc(100dvh - 16px); }
  .support-head { padding: 18px; }
  .support-body { min-height: 0; padding: 18px; }
  .support-intro { grid-template-columns: 1fr; }
  .support-fields { grid-template-columns: 1fr; }
  .support-reply { grid-template-columns: 1fr; }
  .support-reply .support-submit { min-height: 43px; }
  .faq-shell { grid-template-columns: 1fr; gap: 24px; }
  .faq-intro { position: static; }
  .faq-list summary { min-height: 58px; padding: 15px 16px; }
  .faq-list details p { padding: 0 16px 17px; }
}