/* Navigation, brand presence and touch layouts. */
@media(min-width:701px) {
  .hero-art { margin-bottom: 32px; }
  .art-caption { bottom: -36px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: .16em; color: #80645c; line-height: 1.7; }
}
html { scroll-padding-top: 110px; }
body { overflow-x: clip; }
section[id] { scroll-margin-top: 20px; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.site-header { background: #faf5eef5; }
.header-symbol { display:block; flex:none; width:43px; height:52px; background:var(--deep); mask:url('/casa-hugo-symbol.png') 50% 49% / 183% 153% no-repeat; -webkit-mask:url('/casa-hugo-symbol.png') 50% 49% / 183% 153% no-repeat; }
.mobile-track-link { display:none; }
.hero { padding-top: 26px; }
.hero-brand-logo { display: block; width: 176px; height: 176px; object-fit: contain; margin: 0 0 22px; }
.hero-copy > .eyebrow { display: block; }
.hero h1 { font-size: clamp(52px,5vw,76px); }
.hero-art { min-width: 0; }
.story-logo { width: min(75%,360px); height: auto; position: relative; filter: drop-shadow(0 14px 24px #17382c12); }
.story-art { background: #eee2d5; }
.story-art > span { display: none; }
footer { background: #17382c; }
footer { padding-top:28px; padding-bottom:14px; }
.footer-main { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; }
.footer-main > div:first-child { min-width:0; }
.footer-brand { gap:10px; }
.footer-brand .brand-name { font-size:22px; line-height:1.12; }
.footer-symbol { width:64px; height:76px; }
.footer-main p { margin:2px 0 0; }
.footer-main nav { display:flex; align-items:center; gap:24px; }
.footer-main nav a,.footer-main nav button { font-size:13px; white-space:nowrap; }
.footer-bottom { margin-top:18px; padding-top:12px; }
.footer-brand .brand-logo { width: 108px; height: 108px; }
.brand-name { font-weight:400; line-height:1.1; }
.footer-brand .brand-name { font-size:22px; line-height:1.2; font-weight:400; }
.footer-symbol { display:block; flex:none; width:64px; height:76px; background:currentColor; mask:url('/casa-hugo-symbol.png') 50% 49% / 183% 153% no-repeat; -webkit-mask:url('/casa-hugo-symbol.png') 50% 49% / 183% 153% no-repeat; }
.brand-logo, .hero-brand-logo, .story-logo { clip-path: circle(46.6% at 50% 50.9%); }
.product-card, .category-tabs button, .outline-button, .main-nav a { transition: color .3s, background .3s, border-color .3s, transform .45s, box-shadow .45s; }
.mobile-dock { display: none; }
.icon-button { width: 44px; height: 44px; flex: none; }
.drawer-scroll, .modal { overscroll-behavior: contain; }
.drawer-scroll { padding-bottom: max(30px,env(safe-area-inset-bottom)); }
.modal { max-height: 90dvh; }
.reveal-pending { opacity: 0; transform: translateY(14px); }
.reveal-section { transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.product-card { animation: catalog-arrive .4s ease both; }
@keyframes catalog-arrive { from { opacity: .3; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media(max-width: 950px) and (min-width: 701px) {
  .site-header { padding-inline: 24px; }
  .main-nav { gap: 16px; }
  .header-actions { gap: 12px; }
  .hero { gap: 16px; }
}
@media(max-width: 700px) {
  html { scroll-padding-top: 88px; }
  #catalogo { scroll-margin-top: 42px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .announcement { min-height: 32px; height: auto; font-size: 10px; letter-spacing: .025em; gap: 8px; }
  .site-header { height: 72px; padding-inline: 20px; }
  .site-header .brand { font-size: 18px; line-height: .95; gap:5px; white-space:nowrap; }
  .site-header .header-symbol { width:34px; height:42px; }
  .site-header .header-actions { gap:8px; }
  .site-header .mobile-track-link { display:inline-flex; font-size:11px; padding:5px 0; white-space:nowrap; }
  .site-header .brand br { display: none; }
  .site-header .brand b::before { content: ' '; }
  .cart-button { min-height: 44px; padding: 10px 13px; font-size: 12px; }
  .hero { padding: 22px 22px 35px; gap: 0; text-align: center; }
  .hero-copy { padding: 0; display: flex; flex-direction: column; align-items: center; }
  .hero-brand-logo { width: 186px; height: 186px; margin: 0 auto 12px; }
  .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(42px,11.7vw,66px); line-height: 1.08; margin: 16px 0; }
  .hero h1 em { padding-inline: .04em; }
  .hero-copy > p { font-size: 14px; line-height: 1.7; margin: 0 0 22px; max-width: 360px; }
  .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
  .hero-actions .primary-button { justify-content: center; min-height: 52px; width: min(100%,340px); border-radius: 8px; }
  .hero-art { order: 0; height: 260px; width: 100%; margin-top: 34px; }
  .hero-blob { inset: 8px 28px; }
  .hero-photo { width: 100%; max-height: 265px; }
  .note-one,.note-two { width: 66px; height: 66px; font-size: 13px; }
  .note-one { top: 0; right: 8px; }
  .note-two { bottom: 18px; left: 3px; }
  .art-caption { font-size: 7px; bottom: -9px; right: 0; left: 0; }
  .benefits { padding: 24px 20px; gap: 24px 16px; }
  .benefits b { font-size: 12px; line-height: 1.3; }
  .benefits small { font-size: 11px; }
  .catalog-section { padding: 58px 16px 60px; }
  .section-intro h2,.how-section h2 { font-size: 39px; line-height: 1.15; }
  .section-intro p { font-size: 13px; line-height: 1.7; padding-inline: 8px; }
  .category-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 4px 0 10px; margin: 24px 0 16px; scrollbar-width: none; }
  .category-tabs button { min-height: 44px; padding: 10px 20px; flex: none; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .product-card { border-radius: 12px; display: flex; flex-direction: column; }
  .product-image { height: 142px; flex: none; }
  .product-body { padding: 14px 12px; display: flex; flex-direction: column; flex: 1; }
  .product-body h3 { font-size: 19px; line-height: 1.2; min-height: 46px; }
  .product-body p { font-size: 12px; min-height: 0; line-height: 1.55; margin: 5px 0 16px; }
  .product-bottom { margin-top: auto; align-items: stretch; flex-direction: column; gap: 10px; }
  .product-bottom b { font-size: 17px; }
  .product-bottom button { min-height: 44px; font-size: 13px; border-radius: 6px; }
  .story-art { min-height: 300px; }
  .story-logo { width: 255px; }
  .story-copy { padding: 42px 24px; }
  .story-copy h2 { font-size: 40px; }
  .how-section { padding: 58px 20px; }
  .steps { margin-top: 28px; }
  .steps > div { padding: 27px 22px; border-radius: 12px; }
  .steps p { font-size: 13px; }
  .mobile-dock { position: fixed; z-index: 25; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3,1fr); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #faf5eef5; border-top: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 -5px 30px #17382c08; }
  .mobile-dock a,.mobile-dock button { min-height: 51px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--deep); font-size: 11px; font-weight: 700; position: relative; border-radius: 8px; }
  .mobile-dock span { font-size: 22px; line-height: 1; }
  .mobile-dock b { position: absolute; right: calc(50% - 26px); top: 0; font-size: 10px; min-width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: white; }
  .mobile-dock a:active,.mobile-dock button:active { background: var(--blush); }
  .drawer { height: 100dvh; width: 100%; }
  .drawer-head { padding: 18px 20px; }
  .drawer-scroll { padding: 16px 20px calc(28px + env(safe-area-inset-bottom)); }
  .cart-line { grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; }
  .cart-emoji { width: 44px; height: 48px; font-size: 28px; }
  .cart-line b { font-size: 12px; }
  .qty { gap: 5px; }
  .qty button { width: 36px; height: 44px; }
  .checkout-form input,.checkout-form select,.checkout-form textarea,.admin-form input,.admin-form select,.admin-form textarea,.track-input { font-size: 16px; min-height: 48px; }
  .choice-row { grid-template-columns: 1fr; }
  .choice-row input { min-height: auto; }
  .checkout-form label,.admin-form label { font-size: 13px; }
  .form-hint { font-size: 12px; }
  .modal,#admin-modal { width: calc(100% - 20px); max-height: calc(100dvh - 32px); border-radius: 16px; }
  .modal-head { padding: 20px; }
  .modal h2 { font-size: 27px; }
  .admin-tabs button { min-height: 48px; }
  .admin-card-head { flex-wrap: wrap; }
  .order-summary > div { gap: 12px; }
  .order-summary > div > span { text-align: right; overflow-wrap: anywhere; }
  .button-small { display: inline-block; min-height: 40px; padding: 12px; margin-top: 5px; }
  #toast { bottom: calc(87px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); width: max-content; }
  footer { padding: 24px 24px calc(18px + env(safe-area-inset-bottom)); }
  .footer-main { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .footer-main > div:first-child { grid-column:auto; }
  .footer-main nav { flex-direction:column; align-items:flex-start; gap:2px; }
  .footer-main nav a,.footer-main nav button { min-height:30px; font-size:12px; }
  .footer-main a,.footer-main button { min-height: 34px; }
}
@media(max-width: 350px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-image { height: 190px; }
  .product-body h3 { min-height: 0; }
  .cart-line { grid-template-columns: minmax(0,1fr) auto; }
  .cart-emoji { display: none; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal-pending { opacity: 1; transform: none; }
}