/* Correcciones generales y adaptación completa para celular */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}
.site-header{position:fixed;z-index:40;inset:0 0 auto;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:10px 5vw;background:rgba(16,16,15,.94);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px)}
.site-header nav{display:flex;align-items:center;gap:32px;margin-left:auto}
.site-header .header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;background:#d38344;color:#17120e;font-weight:700;white-space:nowrap}
.hero{isolation:isolate}
.hero:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,9,.94),rgba(10,10,9,.7) 42%,rgba(10,10,9,.08) 76%),linear-gradient(0deg,rgba(10,10,9,.48),transparent 42%)}
.hero-copy{z-index:2}
dialog{overscroll-behavior:contain}
dialog[open]{display:block}
.tumbler-modal,.pen-modal,.agenda-modal{overflow-x:hidden;overflow-y:auto}
.tumbler-shell,.pen-shell,.agenda-shell{min-width:0}
.tumbler-slide,.pen-content,.agenda-content{min-width:0}
.tumbler-visual img,.pen-visual img,.agenda-visual img{object-fit:contain}

@media(max-width:760px){
  body{font-size:15px}
  .site-header{min-height:68px;height:auto;padding:8px 14px;gap:10px}
  .site-header .brand{min-width:0;flex:1}
  .site-header .brand img{width:118px;height:38px}
  .site-header nav{display:none}
  .site-header .header-cta{flex:0 0 auto;min-height:38px;padding:8px 12px;font-size:.78rem}

  .hero{width:100%;height:auto;min-height:100svh;padding:104px 20px 42px;align-items:flex-end}
  .hero>img{width:100%;height:100%;object-fit:cover;object-position:63% center}
  .hero:after{background:linear-gradient(0deg,rgba(10,10,9,.98) 4%,rgba(10,10,9,.82) 45%,rgba(10,10,9,.12) 82%)}
  .hero-copy{width:100%;max-width:540px}
  .hero .eyebrow{margin-bottom:14px;font-size:.65rem;line-height:1.4}
  .hero h1{max-width:100%;font-size:clamp(2.65rem,14vw,4.3rem);line-height:.96;overflow-wrap:anywhere}
  .hero-copy>p:not(.eyebrow){margin:18px 0;font-size:.96rem;line-height:1.55}
  .hero .button{width:100%;max-width:260px}

  .section{padding:64px 18px}
  .products-heading{margin:42px 0 24px;padding-top:36px}
  .products-heading h3{font-size:clamp(1.8rem,9vw,2.55rem)}
  .products-grid{grid-template-columns:1fr;gap:16px}
  .product-card img{aspect-ratio:4/3;object-fit:contain}
  .product-info{padding:19px}
  footer{padding:28px 18px}

  .tumbler-modal,.pen-modal,.agenda-modal{width:calc(100% - 10px);max-width:none;height:auto;max-height:calc(100dvh - 10px);margin:auto;border-radius:3px}
  .tumbler-shell,.pen-shell,.agenda-shell{width:100%;padding:23px 14px 20px}
  .tumbler-header,.pen-header,.agenda-header{padding-right:38px;margin-bottom:18px}
  .tumbler-header h2,.pen-header h2,.agenda-header h2{font-size:clamp(1.75rem,9vw,2.45rem);line-height:1.03;overflow-wrap:anywhere}
  .pen-header>p:last-child{font-size:.86rem;line-height:1.45}
  .modal-close{position:absolute;right:8px;top:8px;width:38px;height:38px}

  .tumbler-slide,.pen-content,.agenda-content{display:grid;grid-template-columns:1fr;min-height:0}
  .tumbler-visual,.pen-visual,.agenda-visual{width:100%;height:min(43dvh,340px);min-height:260px;background:#e3dfd8}
  .tumbler-visual img,.pen-visual img,.agenda-visual img{width:100%;height:100%;object-fit:contain}
  .tumbler-specs,.pen-details,.agenda-details{padding:22px 18px;min-width:0}
  .tumbler-specs h3,.pen-details h3,.agenda-details h3{font-size:1.45rem;overflow-wrap:anywhere}
  .tumbler-specs ul,.pen-details ul,.agenda-details ul{margin:16px 0 20px}
  .tumbler-specs li,.pen-details li,.agenda-details li{padding:8px 0}
  .pen-pricing{grid-template-columns:1fr 1fr;gap:8px}
  .pen-pricing>div{min-height:96px;padding:12px}
  .pen-pricing strong{font-size:1.55rem}
  .executive-price,.tumbler-price,.agenda-price{margin-top:10px;padding:15px 16px}

  .carousel-arrow,.pen-arrow{top:calc(18px + min(21.5dvh,170px));width:42px;height:42px;font-size:1.9rem}
  .carousel-arrow.prev,.pen-arrow.prev{left:3px}
  .carousel-arrow.next,.pen-arrow.next{right:3px}
  .tumbler-dots,.pen-dots{padding:12px 0;margin:0}

  .color-palette,.pen-palette,.agenda-colors{display:grid;grid-template-columns:1fr;gap:13px;margin-top:10px;padding-top:16px}
  .swatches,.pen-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .swatches button,.pen-swatches button{min-width:0;padding:6px 4px;font-size:.72rem;overflow-wrap:anywhere}
  .swatches i,.pen-swatches i{flex-basis:25px;width:25px;height:25px}
  .agenda-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .agenda-swatches button{justify-content:flex-start}
}

@media(max-width:380px){
  .site-header .brand img{width:96px}
  .site-header .header-cta{padding:7px 9px;font-size:.7rem}
  .hero{padding-left:16px;padding-right:16px}
  .hero h1{font-size:2.55rem}
  .tumbler-shell,.pen-shell,.agenda-shell{padding-left:10px;padding-right:10px}
  .tumbler-visual,.pen-visual,.agenda-visual{height:285px;min-height:240px}
  .pen-pricing{grid-template-columns:1fr}
  .swatches,.pen-swatches{grid-template-columns:1fr 1fr}
}