/* ROXI / RESPONSIVE — estilos específicos */
@media(max-width:1120px) {
  .container {
    width:min(100% - 42px,1140px)
  }
  .hero h1 {
    font-size:var(--font-size-62)
  }
  .hero-art {
    height:430px
  }
  .prod-media {
    height:225px
  }
  .product-grid {
    gap:14px
  }
  .category-photo {
    height:146px;
    width:146px
  }
  .editorial h3 {
    font-size:var(--font-size-27)
  }
  .footer-grid {
    gap:26px
  }
  .mini-contact {
    display:none
  }
}
@media(max-width:780px) {
  .container {
    width:calc(100% - 36px)
  }
  html {
    scroll-padding-top:120px
  }
  .demo-note {
    font-size:var(--font-size-9)
  }
  .announcement {
    font-size:var(--font-size-10);
    min-height:29px
  }
  .announcement .sep {
    display:none
  }
  .header-main {
    min-height:66px;
    grid-template-columns:44px 1fr auto;
    gap:6px
  }
  .mobile-only {
    display:grid
  }
  .desktop-search,.header-nav,.account-btn,.header-right .fav-btn {
    display:none
  }
  .header-main>.logo {
    justify-self:center;
    font-size:var(--font-size-36)
  }
  .header-main>.logo small {
    font-size:var(--font-size-6);
    top:36px;
    left:2px
  }
  .header-main>.logo b {
    font-size:var(--font-size-15);
    top:-15px
  }
  .mobile-search {
    display:block;
    padding-bottom:11px
  }
  .mobile-search .searchbox {
    max-width:100%;
    height:43px;
    border-radius:12px
  }
  .mobile-search .searchbox input {
    font-size:var(--font-size-11)
  }
  .site-header {
    box-shadow:0 3px 12px var(--swatch-ceacc021)
  }
  .mobile-menu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--color-white);
    padding:15px 21px 22px;
    box-shadow:0 18px 23px var(--swatch-4123371f)
  }
  .mobile-menu.active {
    display:grid;
    gap:4px
  }
  .mobile-menu button,.mobile-menu a {
    text-align:left;
    padding:13px 3px;
    border:0;
    border-bottom:1px solid var(--swatch-faf0f3);
    background:none;
    color:var(--ink);
    font-size:var(--font-size-13);
    font-weight:800
  }
  .hero-inner {
    grid-template-columns:1fr;
    gap:0;
    min-height:0
  }
  .hero-copy {
    padding:50px 0 0
  }
  .hero h1 {
    font-size:clamp(48px,9vw,73px);
    max-width:600px
  }
  .hero p {
    max-width:530px
  }
  .hero-visual {
    min-height:400px
  }
  .hero-art {
    height:395px;
    width:390px
  }
  .hero-sticker {
    right:8%;
    top:38px
  }
  .hero-label {
    bottom:60px;
    left:11%
  }
  .hero-dots {
    bottom:8px
  }
  .trust-inner {
    grid-template-columns:repeat(2,1fr);
    min-height:110px;
    padding:15px 0;
    gap:15px
  }
  .trust-item {
    justify-content:flex-start
  }
  .category-grid {
    gap:8px
  }
  .category-photo {
    width:120px;
    height:120px
  }
  .category h3 {
    font-size:var(--font-size-12)
  }
  .category p {
    font-size:var(--font-size-10)
  }
  .product-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .prod-media {
    height:280px
  }
  .editorial-grid {
    grid-template-columns:1fr
  }
  .editorial {
    height:265px
  }
  .editorial h3 {
    font-size:var(--font-size-32)
  }
  .builder-copy {
    padding:38px 27px
  }
  .builder-photo {
    min-height:370px
  }
  .builder-photo img {
    width:350px;
    height:340px
  }
  .how-list {
    gap:12px
  }
  .inspo-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .faq-wrap {
    gap:30px
  }
  .newsletter-inner {
    flex-direction:column;
    align-items:flex-start
  }
  .newsletter form {
    width:100%
  }
  .footer-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-brand {
    grid-column:1/-1
  }
  .quick-whatsapp {
    bottom:88px;
    width:49px;
    height:49px;
    right:16px
  }
  .mobile-nav {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:50;
    background:var(--color-white);
    justify-content:space-around;
    border-top:1px solid var(--swatch-f0e3e9);
    box-shadow:0 -6px 21px var(--swatch-af77871a);
    min-height:69px;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .mobile-nav button {
    background:none;
    border:none;
    min-width:20%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    color:var(--swatch-897987);
    font-size:var(--font-size-10);
    font-weight:750;
    position:relative
  }
  .mobile-nav button.active {
    color:var(--pink)
  }
  .mobile-nav svg {
    width:20px;
    height:20px
  }
  .mobile-nav .count {
    position:absolute;
    top:5px;
    right:24%;
    border-radius:50%;
    background:var(--pink);
    color:var(--color-white);
    min-width:15px;
    height:15px;
    display:grid;
    place-items:center;
    font-size:var(--font-size-9)
  }
  .legal {
    padding-bottom:95px
  }
}
@media(max-width:540px) {
  .container {
    width:calc(100% - 30px)
  }
  .section {
    padding-top:61px
  }
  .h2 {
    font-size:var(--font-size-31)
  }
  .sec-head {
    margin-bottom:21px
  }
  .sec-head p {
    font-size:var(--font-size-11)
  }
  .eyebrow {
    font-size:var(--font-size-9);
    letter-spacing:1.8px
  }
  .view-link {
    font-size:var(--font-size-11)
  }
  .announcement {
    padding:7px 9px;
    line-height:1.5
  }
  .hero {
    background:linear-gradient(145deg,var(--color-surface-soft),var(--swatch-ffe6ee))
  }
  .hero-copy {
    padding-top:30px
  }
  .hero-pill {
    font-size:var(--font-size-8);
    padding:8px 10px;
    letter-spacing:.9px
  }
  .hero h1 {
    font-size:clamp(41px,10.9vw,59px);
    letter-spacing:-2.65px;
    margin:17px 0 12px
  }
  .hero p {
    font-size:var(--font-size-12);
    line-height:1.7;
    margin-bottom:21px;
    max-width:360px
  }
  .hero-actions {
    gap:8px
  }
  .btn {
    font-size:var(--font-size-11);
    padding:13px 18px
  }
  .hero-proof {
    font-size:var(--font-size-9);
    margin-top:18px;
    gap:13px
  }
  .hero-proof svg {
    width:16px;
    height:16px
  }
  .hero-visual {
    min-height:340px
  }
  .hero-art {
    width:340px;
    height:330px
  }
  .hero-sticker {
    width:87px;
    height:87px;
    right:5px;
    top:24px;
    font-size:var(--font-size-13)
  }
  .hero-sticker small {
    font-size:var(--font-size-7)
  }
  .hero-label {
    left:2px;
    bottom:40px;
    font-size:var(--font-size-9);
    padding:10px 11px
  }
  .halo {
    inset:30px 10px
  }
  .hero-dots {
    bottom:4px
  }
  .trust-inner {
    gap:16px;
    padding:18px 0
  }
  .trust-item {
    gap:8px
  }
  .trust-item svg {
    width:23px;
    height:23px
  }
  .trust-item b {
    font-size:var(--font-size-10)
  }
  .trust-item span {
    font-size:var(--font-size-9);
    line-height:1.35
  }
  .category-grid {
    display:flex;
    overflow-x:auto;
    gap:14px;
    padding:3px 0 12px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin-right:-15px
  }
  .category-grid::-webkit-scrollbar {
    display:none
  }
  .category {
    min-width:102px;
    width:102px;
    scroll-snap-align:start;
    padding:0
  }
  .category-photo {
    width:92px;
    height:92px
  }
  .category h3 {
    font-size:var(--font-size-11);
    margin:11px 0 3px
  }
  .category p {
    font-size:var(--font-size-9)
  }
  .tabs {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    margin-right:-15px;
    scrollbar-width:none
  }
  .tabs::-webkit-scrollbar {
    display:none
  }
  .tab {
    font-size:var(--font-size-10);
    padding:9px 12px;
    white-space:nowrap
  }
  .product-grid {
    gap:10px
  }
  .prod-media {
    height:185px
  }
  .badge {
    top:8px;
    left:8px;
    padding:6px 8px;
    font-size:var(--font-size-8)
  }
  .heart {
    top:7px;
    right:7px;
    width:28px;
    height:28px
  }
  .heart svg {
    width:15px;
    height:15px
  }
  .prod-info {
    padding:11px 10px 12px
  }
  .prod-type {
    font-size:var(--font-size-8);
    letter-spacing:.6px
  }
  .prod-name {
    font-size:var(--font-size-13);
    min-height:34px;
    margin:6px 0 5px
  }
  .prod-desc {
    font-size:var(--font-size-10);
    min-height:45px;
    margin-bottom:11px
  }
  .price {
    font-size:var(--font-size-17)
  }
  .price small {
    font-size:var(--font-size-8)
  }
  .add {
    font-size:var(--font-size-10);
    padding:8px 10px
  }
  .builder-feature {
    grid-template-columns:1fr;
    margin-top:65px;
    border-radius:22px
  }
  .builder-photo {
    min-height:284px;
    order:2
  }
  .builder-photo img {
    height:277px;
    width:284px
  }
  .builder-photo .sticker {
    top:13px;
    left:17px;
    font-size:var(--font-size-8)
  }
  .builder-copy {
    order:1;
    padding:32px 23px 30px
  }
  .builder-copy h2 {
    font-size:var(--font-size-36);
    margin:11px 0
  }
  .builder-copy p {
    font-size:var(--font-size-11);
    margin-bottom:18px
  }
  .builder-copy .steps {
    font-size:var(--font-size-9);
    gap:12px;
    margin-bottom:19px
  }
  .editorial-grid {
    gap:12px
  }
  .editorial {
    height:220px;
    padding:19px;
    border-radius:18px
  }
  .editorial>img {
    width:63%;
    right:-30px;
    bottom:-22px;
    height:110%
  }
  .editorial .content {
    max-width:56%
  }
  .editorial small {
    font-size:var(--font-size-8)
  }
  .editorial h3 {
    font-size:var(--font-size-24);
    margin:11px 0
  }
  .editorial p {
    font-size:var(--font-size-10)
  }
  .editorial a,.editorial button {
    font-size:var(--font-size-9);
    padding:9px 11px
  }
  .occasion-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px
  }
  .occasion {
    min-height:130px;
    padding:20px 8px
  }
  .occasion .emoji {
    font-size:var(--font-size-28);
    margin-bottom:11px
  }
  .occasion strong {
    font-size:var(--font-size-13)
  }
  .occasion small {
    font-size:var(--font-size-9)
  }
  .how {
    margin-top:65px;
    padding:60px 0
  }
  .how-list {
    grid-template-columns:1fr;
    gap:29px;
    margin-top:35px
  }
  .how-card {
    display:grid;
    grid-template-columns:53px 1fr;
    grid-template-rows:auto auto;
    column-gap:14px;
    text-align:left;
    align-items:center;
    padding:0 6px
  }
  .how-icon {
    width:51px;
    height:51px;
    border-radius:16px;
    grid-row:1/3;
    margin:0
  }
  .how-icon svg {
    width:23px;
    height:23px
  }
  .how-card h3 {
    font-size:var(--font-size-15);
    margin:0
  }
  .how-card p {
    font-size:var(--font-size-11);
    margin:4px 0 0;
    max-width:100%
  }
  .inspo-grid {
    gap:10px
  }
  .inspo {
    height:190px;
    border-radius:13px
  }
  .inspo label {
    font-size:var(--font-size-9);
    padding:6px 9px;
    bottom:8px;
    left:8px
  }
  .faq-section {
    padding:65px 0
  }
  .faq-wrap {
    grid-template-columns:1fr;
    gap:25px
  }
  .faq-intro p {
    font-size:var(--font-size-12)
  }
  .faq-item summary {
    font-size:var(--font-size-12);
    padding:19px 0
  }
  .newsletter-inner {
    padding:34px 0;
    gap:18px
  }
  .newsletter h2 {
    font-size:var(--font-size-26)
  }
  .newsletter p {
    font-size:var(--font-size-11)
  }
  .newsletter button {
    padding:12px 16px;
    font-size:var(--font-size-10)
  }
  .footer-grid {
    gap:31px 16px
  }
  .footer-col h4 {
    font-size:var(--font-size-14);
    margin-bottom:11px
  }
  .footer-col a,.footer-col button,.footer-col span {
    font-size:var(--font-size-11)
  }
  .footer-brand p {
    font-size:var(--font-size-11)
  }
  .legal {
    flex-direction:column;
    gap:8px;
    margin-top:34px
  }
  .modal-inner,.detail-modal .modal-inner {
    grid-template-columns:1fr;
    padding:13px 17px 22px;
    gap:13px
  }
  .modal-header {
    padding:16px 18px 12px
  }
  .modal-header h2 {
    font-size:var(--font-size-21)
  }
  .modal-preview,.detail-modal .modal-preview {
    height:175px;
    min-height:0
  }
  .modal-preview img {
    object-fit:contain
  }
  .modal-form h3 {
    font-size:var(--font-size-18)
  }
  .form-label {
    margin:10px 0 6px
  }
  .chip {
    font-size:var(--font-size-10);
    padding:9px
  }
  .builder-total {
    margin:12px 0
  }
  .modal-form .btn {
    padding:13px
  }
  .detail-title {
    font-size:var(--font-size-25)
  }
  .detail-modal .detail-desc {
    font-size:var(--font-size-12);
    margin:8px 0
  }
  .detail-modal ul {
    font-size:var(--font-size-11)
  }
  .quick-whatsapp {
    bottom:84px
  }
  .toast {
    bottom:83px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}