/* Direct section navigation and compact desktop overviews. Expanded details remain scrollable. */
html{scroll-behavior:auto;scroll-padding-top:100px}
.commercial-landing{overflow-x:clip}
.commercial-landing section:target{opacity:1!important;transform:none!important}

@media (min-width:1101px){
  #crear{padding-top:28px}
  #crear>.heading{margin-bottom:12px}
  #crear .heading h2{font-size:clamp(31px,2.7vw,39px);margin:10px 0}
  #crear .gallery-bar{margin:2px 0 10px}
  #crear .demo-gallery{gap:12px;margin-bottom:12px}
  #crear .demo-screen{min-height:clamp(108px,15vh,155px)}
  #crear .demo-screen-copy{padding:12px 14px;gap:5px}
  #crear .demo-screen-copy h3{font-size:clamp(15px,1.3vw,19px)}
  #crear .demo-screen-copy small{font-size:7px}
  #crear .demo-screen-cta{padding:5px 8px}
  #crear .model-content{padding:10px 12px 12px}
  #crear .model-content h3{font-size:15px}
  #crear .model-micro{font-size:9px;margin-top:3px}
  #crear .model-content .demo-launch{padding:7px 9px;font-size:9px}
  #crear .demo-compact .compact-photo{height:clamp(88px,12vh,120px);margin-bottom:4px}
  #crear .builder-steps{padding-bottom:10px}

  #proyectos,#planes{padding-top:clamp(23px,3vh,38px);padding-bottom:clamp(23px,3vh,38px)}
  #proyectos{min-height:calc(100dvh - 100px);display:flex;flex-direction:column;justify-content:center}
  #proyectos .heading{margin-bottom:clamp(12px,2vh,20px)}
  #proyectos .heading h2{font-size:clamp(32px,2.8vw,42px);margin:9px 0}
  #proyectos .heading p:not(.eyebrow){margin:4px 0}
  #proyectos .project-top{padding:10px 14px}
  #proyectos .project-image{height:clamp(185px,calc(100dvh - 475px),390px);aspect-ratio:auto}
  #proyectos .project-image img{object-position:center top}
  #proyectos .project-info{padding:15px 18px}
  #proyectos .project-info p{margin:5px 0 9px}

  #planes{min-height:calc(100dvh - 100px);padding-bottom:0;display:flex;flex-direction:column;justify-content:center}
  #planes .plans-heading{margin-bottom:16px}
  #planes .plans-heading h2{font-size:clamp(32px,2.8vw,42px);margin:8px 0}
  #planes .plans-heading>p:last-child{font-size:14px;line-height:1.45;margin:0}
  #planes .plan-card{padding:18px 20px}
  #planes .plan-card .eyebrow{margin:0}
  #planes .plan-card h3{font-size:21px;margin:7px 0}
  #planes .plan-description{font-size:12px;line-height:1.45;min-height:0;margin:0 0 12px}
  #planes .plan-price{padding:10px 0;gap:2px}
  #planes .plan-price strong{font-size:clamp(26px,2.4vw,34px)}
  #planes .plan-care{margin:9px 0 0;padding-top:9px;gap:2px}
  #planes .plan-care b{font-size:18px}
  #planes .plan-includes{margin:9px 0 12px}
  #planes .plan-card .outline{padding:10px 12px;margin-top:auto}
  #planes .plan-conditions-details{margin:10px 0}
  #planes .plan-conditions-details>summary{padding:8px 0}
  #planes .platform-note{margin-top:0;padding:13px 18px;gap:16px}
  #planes .platform-note h3{font-size:16px;margin-bottom:2px}
  #planes .platform-note p{font-size:11px;line-height:1.4}

  #como{min-height:calc(100dvh - 120px);display:flex;flex-direction:column;justify-content:center}
}

.plan-includes{border-top:1px solid #ffffff19;color:#b8c7db}
.plan-includes summary{padding:9px 0;cursor:pointer;font-size:12px;color:#bcd8f8}
.plan-includes summary:hover{color:#fff}
.plan-includes ul{margin:0 0 7px;padding:0;line-height:1.5}
.plan-includes li{font-size:12px;padding:3px 0 3px 20px}
.plan-includes p{font-size:11px;line-height:1.5;color:#aebbd0;margin:6px 0 10px}
.platform-details{border:1px solid #303d54;border-radius:10px;background:#131b28;color:#dce8f8}
.platform-details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:12px 18px;font-size:14px;font-weight:600;list-style:none}
.platform-details>summary::-webkit-details-marker{display:none}
.platform-details>summary span{color:#8dc5ff;font-size:12px;white-space:nowrap}
.platform-details[open]>summary{border-bottom:1px solid #303d54}
.platform-details .platform-note{border:0;border-radius:0;background:transparent}

@media (max-width:1100px){html{scroll-padding-top:90px}}
@media (max-width:760px){html{scroll-padding-top:82px}.plan-includes{margin:12px 0}}

/* Phone layout: give each demo and format room for readable copy. */
@media (max-width:760px){
  #crear .gallery-filters button{font-size:12px;padding:10px 13px}
  #crear .demo-gallery{grid-auto-columns:min(88vw,360px);gap:12px;scrollbar-width:none}
  #crear .demo-gallery::-webkit-scrollbar{display:none}
  #crear .demo-model{min-width:0}
  #crear .demo-screen{min-height:190px}
  #crear .demo-screen-copy{padding:17px;width:82%}
  #crear .demo-screen-copy h3{font-size:21px;line-height:1.12}
  #crear .demo-screen-copy small{font-size:10px;line-height:1.35}
  #crear .demo-screen-cta{font-size:11px;padding:8px 10px}
  #crear .model-content{min-height:100px;align-items:center;padding:13px 14px;gap:10px}
  #crear .model-label{font-size:11px;line-height:1.4;letter-spacing:1px}
  #crear .model-content h3{font-size:19px;line-height:1.15;margin-top:5px}
  #crear .model-micro{font-size:12px;line-height:1.35;margin-top:5px}
  #crear .model-content .demo-launch{font-size:12px;min-height:42px;padding:9px 11px}
  #crear .demo-compact .compact-photo{height:190px;margin-bottom:0}
  #crear .demo-compact .model-content{flex:1 1 auto}
  #crear .template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #crear .template-card{padding:9px;min-height:130px}
  #crear .template-mini{height:70px;padding:9px}
  #crear .template-card>strong{font-size:15px;line-height:1.2;margin:8px 2px 4px}
  #crear .template-card>small{font-size:12px!important;line-height:1.35;margin:0 2px 3px}
  #crear .editor-group summary{font-size:13px}
  #crear .group-content label,#crear .group-content legend{font-size:13px;line-height:1.4}
  #crear .group-content input:not([type=radio]):not([type=checkbox]),
  #crear .group-content textarea,#crear .group-content select{font-size:14px;min-height:42px}
  #crear .builder-steps{font-size:10px}
  #crear .control-hint{font-size:13px!important;line-height:1.5}
  #crear .palette-grid button,#crear .effect-options span{font-size:12px}
}