/* PITZO visual pass: one clear route, warm clay surfaces, and consistent card rhythm. */
:root {
  --cream: #fff8ef;
  --paper: #fffdf8;
  --sand: #f2e5d6;
  --orange: #c76d49;
  --orange-deep: #91452d;
  --green: #214a38;
  --green-soft: #e4ebdf;
  --ink: #20372d;
  --muted: #59695f;
  --line: #e6d9ca;
  --clay-shadow: 8px 10px 22px rgba(93, 67, 43, .13), -5px -5px 16px rgba(255,255,255,.88), inset 2px 2px 6px rgba(255,255,255,.95);
  --clay-inset: inset 3px 3px 8px rgba(112, 80, 54, .12), inset -3px -3px 8px rgba(255,255,255,.8);
  --motion-fast: 160ms;
  --motion-standard: 240ms;
}

html { scroll-padding-top: 100px; }
body { background: radial-gradient(ellipse at 14% 5%, #fffdf8 0, var(--cream) 55%, #f9f0e5 100%); color: var(--ink); }
.container { width: min(1200px, calc(100% - 56px)); }
.announcement { min-height: 32px; height: auto; padding: 7px 14px; line-height: 1.4; }
.site-header { background: rgba(255, 250, 242, .94); box-shadow: 0 5px 18px rgba(61, 52, 38, .045); }
.header-inner { height: 82px; gap: clamp(12px, 2vw, 28px); }
.brand { min-width: 174px; gap: 11px; font-size: 25px; }
.brand img { width: 60px; height: 60px; border: 3px solid #fff; box-shadow: 5px 7px 14px rgba(92, 70, 46, .14), -3px -3px 9px #fff; }
.desktop-nav { gap: 3px; padding: 5px; border-radius: 100px; background: #f3e9dd; box-shadow: var(--clay-inset); }
.desktop-nav a { padding: 10px 14px; border-radius: 100px; transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
.desktop-nav a::after { display: none; }
.desktop-nav a:hover { color: var(--green); background: #fffdf8; transform: translateY(-1px); }
.header-actions { gap: 10px; }
.header-cta { min-height: 46px; padding: 11px 17px; font-size: 13px; white-space: nowrap; }
.menu-button { display: none; }
.mobile-nav { display: none; }

.hero { min-height: 570px; padding-top: 38px; padding-bottom: 64px; }
.hero-copy { padding-left: 8px; }
.hero-copy h1 { max-width: 590px; }
.hero-photo-wrap { transform: rotate(2deg); border: 5px solid #fffaf2; }
.hero-photo { transform: scale(1.04) rotate(-2deg); }
.hero-sticker { width: 145px; height: 145px; }
.benefit-grid { gap: 12px; }
.benefit-grid > div { min-height: 68px; font-size: 12px; }

.section { padding-top: 82px; padding-bottom: 82px; }
.section-heading { position: relative; margin-bottom: 32px; }
.section-heading::after { content: ""; position: absolute; z-index: -1; right: 5%; bottom: -8px; width: 118px; aspect-ratio: 1; background: url("assets/espiral-pitzo.svg") center / contain no-repeat; opacity: .08; pointer-events: none; }
.catalog-grid { gap: 20px; }
.product-card { border: 3px solid rgba(255,255,255,.96); border-radius: 26px; background: linear-gradient(145deg, #fffefa, #f5e9dc); box-shadow: var(--clay-shadow); }
.product-card:hover { transform: translateY(-5px); box-shadow: 10px 15px 25px rgba(91,67,45,.18), -5px -5px 16px rgba(255,255,255,.9); }
.product-media { height: auto; aspect-ratio: 1.16; padding: 9px; }
.product-media img { width: 100%; height: 100%; border: 3px solid #fffaf3; border-radius: 20px; object-fit: cover; box-shadow: none; }
#temporadas .product-media img { object-fit: contain; }
.card-index { top: 18px; left: 18px; padding: 7px 10px; border-radius: 100px; background: rgba(255,253,248,.92); color: #214a38; }
.media-badge { background: rgba(255,253,248,.95); color: #214a38; }
.product-content { min-height: 218px; padding: 19px 18px 18px; }
.product-content h3 { line-height: 1.2; }
.product-content p { color: #53645a; }
.product-foot { padding-top: 18px; }
.circle-button { width: 46px; height: 46px; min-width: 46px; min-height: 46px; border: 2px solid #fff; background: #e8ecdf; box-shadow: 4px 5px 11px rgba(79,75,53,.12), inset 1px 1px 3px #fff; }
.circle-button:hover { color: #fff; background: var(--green); }
.special-banner { grid-template-columns: 144px minmax(0,1fr) auto; gap: 28px; padding: 25px; border: 3px solid rgba(255,255,255,.3); border-radius: 28px; box-shadow: 10px 14px 25px rgba(31,55,43,.17), inset 2px 2px 8px rgba(255,255,255,.12); }
.special-visual { min-width: 0; position: relative; }
.special-visual img { width: 144px; height: 126px; object-fit: cover; border: 3px solid #fffaf3; border-radius: 21px; box-shadow: 5px 7px 13px rgba(13,34,24,.2); }
.special-visual span { position: absolute; left: 9px; bottom: 8px; padding: 5px 8px; border-radius: 100px; background: #fffaf3; color: var(--green); font-size: 10px; font-weight: 800; }
.special-banner h3 { line-height: 1.22; }
.special-banner p { max-width: 56ch; line-height: 1.6; }
#temporadas { padding-top: 20px; }
#temporadas .product-card { background: linear-gradient(145deg,#fffefa,#f3eadf); }
.studio-invite { gap: 44px; border-radius: 32px; box-shadow: var(--clay-shadow); }
.studio-invite img { aspect-ratio: 1.25; object-fit: cover; }
.steps-grid { gap: 18px; }
.step { min-width: 0; }
.step p { color: #53645a; }
.story-section { background: linear-gradient(135deg,#e8eddf,#f3e8dc); }
.story-photo { border: 5px solid #fffaf3; box-shadow: var(--clay-shadow); }
.faq-list details { border: 2px solid #fffaf3; box-shadow: 5px 6px 13px rgba(96,70,48,.09), -3px -3px 8px #fff; }
.service-grid > button { border-width: 3px; border-radius: 25px; }
.about-page .service-note { border: 3px solid #fffaf3; border-radius: 26px; background: linear-gradient(145deg,#fffdf8,#f5ebdf); box-shadow: var(--clay-shadow); }
.footer { background: linear-gradient(135deg,#244d3b,#183d2e); }
.footer-col a, .footer-col button { min-height: 40px; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #a84f31; outline-offset: 3px; }

@media (max-width: 1060px) {
  .container { width: min(100% - 40px, 900px); }
  .desktop-nav { gap: 0; }
  .desktop-nav a { padding-inline: 10px; }
  .brand { min-width: 150px; }
  .header-inner { gap: 10px; }
}
@media (max-width: 980px) {
  .site-header { position: sticky; }
  .header-inner { height: 76px; }
  .desktop-nav { display: none; }
  .header-cta { display: none; }
  .menu-button { display: grid; }
  .mobile-nav:not([hidden]) { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 14px max(20px, calc((100vw - 900px)/2)); border-top: 1px solid #e8ddce; background: rgba(255,250,242,.98); box-shadow: 0 14px 24px rgba(44,49,38,.13); }
  .mobile-nav a { min-height: 46px; display: flex; align-items: center; padding: 10px 13px; border: 2px solid #fff; border-radius: 15px; background: linear-gradient(145deg,#fffdf8,#f2e8dc); box-shadow: 4px 5px 10px rgba(93,67,43,.1), inset 1px 1px 4px #fff; font-size: 13px; }
  .mobile-nav .mobile-nav-cta { grid-column: 1 / -1; justify-content: center; gap: 8px; color: #fff; border-color: #4a725b; background: linear-gradient(145deg,#32654d,#1d4936); }
  .special-banner { grid-template-columns: 120px minmax(0,1fr); }
  .special-visual img { width: 120px; height: 112px; }
  .special-banner > .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 800px) {
  :root { --section-space: 60px; }
  .hero { min-height: 0; padding-top: 38px; }
  .hero-visual { min-height: 430px; }
  .hero-photo-wrap { height: 390px; }
  .benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .benefit-grid > div { justify-content: flex-start; }
  .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .studio-invite { padding: 30px; }
  .about-hero { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  html { scroll-padding-top: 82px; }
  .container { width: calc(100% - 32px); }
  .announcement { font-size: 10px; }
  .announcement-sep { display: none; }
  .header-inner { height: 68px; gap: 10px; }
  .brand { min-width: 0; gap: 8px; font-size: 22px; }
  .brand img { width: 49px; height: 49px; border-radius: 16px; }
  .brand small { font-size: 9px; }
  .header-actions { gap: 7px; }
  .cart-button, .menu-button { width: 44px; height: 44px; }
  .mobile-nav:not([hidden]) { padding: 12px 16px 16px; gap: 7px; }
  .mobile-nav a { min-height: 44px; font-size: 12px; }
  .hero { padding-top: 31px; padding-bottom: 32px; gap: 5px; }
  .hero-copy h1 { font-size: clamp(41px, 11vw, 52px); margin: 18px 0 15px; }
  .hero-copy p { font-size: 16px; line-height: 1.65; }
  .hero-actions { flex-wrap: wrap; gap: 17px; margin-top: 22px; }
  .hero-proof { margin-top: 22px; }
  .hero-visual { min-height: 348px; }
  .hero-photo-wrap { width: 88%; height: 320px; border-radius: 145px 145px 28px 28px; }
  .hero-sticker { width: 96px; height: 96px; top: 4%; left: 0; border-width: 4px; }
  .benefit-strip { padding-top: 4px; }
  .benefit-grid { gap: 8px; }
  .benefit-grid > div { min-height: 64px; padding: 10px; gap: 8px; border-radius: 15px; font-size: 11px; }
  .benefit-grid > div svg { width: 18px; height: 18px; }
  .section { padding-top: 58px; padding-bottom: 58px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 24px; }
  .section-heading h2 { font-size: 34px; margin: 11px 0 10px; }
  .section-heading p { font-size: 15px; line-height: 1.6; }
  .section-link { margin: 2px 0 0; }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .product-card { border-width: 2px; border-radius: 20px; }
  .product-media { aspect-ratio: .96; padding: 6px; }
  .product-media img { border-width: 2px; border-radius: 15px; }
  .card-index { top: 10px; left: 10px; padding: 5px 7px; font-size: 8px; }
  .media-badge { left: 8px; bottom: 8px; padding: 5px 7px; font-size: 9px; }
  .product-content { min-height: 214px; padding: 12px 11px; }
  .product-content h3, #temporadas .product-content h3 { font-size: 17px; }
  .product-content p { font-size: 12px; line-height: 1.5; }
  .product-foot { padding-top: 13px; }
  .product-foot strong { font-size: 15px; }
  .product-foot small { font-size: 9px; }
  .circle-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  #temporadas { padding-top: 14px; }
  #temporadas .product-content { min-height: 238px; }
  .special-banner { grid-template-columns: 1fr; gap: 16px; padding: 19px; border-radius: 22px; }
  .special-visual img { width: 100%; height: 175px; }
  .special-banner > .button { grid-column: auto; width: 100%; }
  .studio-invite { padding: 22px; gap: 20px; border-width: 3px; }
  .studio-invite img { aspect-ratio: 1.15; }
  .steps-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 27px; }
  .step { padding: 17px; }
  .step-line { margin: 14px 0; }
  .story-grid { padding-top: 54px; padding-bottom: 54px; }
  .story-photo { height: 330px; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 20px; padding-top: 48px; padding-bottom: 44px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 90px; height: 90px; }
  .footer-bottom { flex-direction: column; font-size: 11px; }
  .about-page { padding-top: 24px; }
  .about-hero { grid-template-columns: 1fr; }
  .about-hero img { aspect-ratio: 1.2; }
  .about-values { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .header-inner { gap: 6px; }
  .brand { font-size: 20px; }
  .brand img { width: 44px; height: 44px; }
  .cart-button, .menu-button { width: 41px; height: 41px; }
  .catalog-grid { gap: 9px; }
  .product-content { padding: 10px 9px; }
  .product-content h3, #temporadas .product-content h3 { font-size: 15px; }
  .product-foot strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .product-card:hover, .button:hover { transform: none; }
}