/* Estructura compartida de los ejemplos navegables */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible{outline:3px solid currentColor;outline-offset:6px}.demo-bar{background:#20231f;color:#f4f3ec;padding:12px 24px;display:flex;justify-content:space-between;gap:15px;font-size:11px;line-height:1.5}.demo-bar a{text-decoration:underline;text-underline-offset:3px}.container{max-width:1180px;margin:auto;padding-inline:35px}.demo-header{height:100px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--border)}.logo{font-size:30px;font-weight:700;letter-spacing:-2px}.demo-header nav{display:flex;gap:30px;font-size:12px}.hero{padding-block:90px;display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center}.overline{text-transform:uppercase;font-size:10px;letter-spacing:2px;font-weight:700;margin:0 0 28px}h1{font-size:clamp(52px,7vw,88px);font-weight:500;line-height:.99;letter-spacing:-4px;margin:0 0 30px}p{font-size:16px;line-height:1.7}.intro{max-width:440px;margin-bottom:30px}.cta{display:inline-block;background:var(--ink);color:var(--bg);padding:16px 24px;border:1px solid var(--ink);border-radius:3px;font-size:13px}.section{padding-block:65px;border-top:1px solid var(--border)}h2{font-size:42px;letter-spacing:-2px;line-height:1.1;font-weight:500;margin:0 0 25px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.grid article{border-top:1px solid var(--border);padding-top:20px}.grid h3{font-size:22px;letter-spacing:-.7px;font-weight:500}.grid p{font-size:14px}.note{font-size:11px;opacity:.75;max-width:580px}.bottom{padding-block:40px;display:flex;justify-content:space-between;border-top:1px solid var(--border);font-size:12px}.bottom a{text-decoration:underline}.contact-band{background:var(--ink);color:var(--bg);padding:50px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-band h2{margin:0;font-size:36px}.contact-band .cta{background:var(--bg);color:var(--ink);white-space:nowrap}.image-art{height:400px;position:relative;overflow:hidden;border-radius:7px}.cafe{--bg:#eee2cf;--ink:#44382a;--border:#44382a35}.cafe h1,.cafe h2,.cafe .logo{font-family:Georgia,serif}.cafe .image-art{background:#c5c5a6;display:grid;place-items:center}.plate{width:245px;height:245px;background:#dcd5bf;border-radius:50%;box-shadow:20px 20px 30px #36312630;display:grid;place-items:center;transform:rotate(-12deg)}.drink{width:166px;height:166px;background:radial-gradient(ellipse at center,#b88354 4%,#f1d6a7 7%,#b88354 10%,#f1d6a7 15%,#b88354 20%,#f1d6a7 25%,#805337 35%,#4e2f1e 60%,#f6ecd5 62%,#d6c9aa 75%);border-radius:50%;position:relative;box-shadow:5px 12px 13px #31221540}.drink:after{content:"";width:45px;height:25px;position:absolute;top:70px;right:-32px;background:#e4d7b8;border-radius:7px;z-index:-1}.cafe .art-text{position:absolute;bottom:25px;left:25px;font-size:11px;letter-spacing:1px}.menu-item{display:flex;justify-content:space-between;gap:15px;font-size:15px;border-bottom:1px solid var(--border);padding:18px 0}.menu-item span:last-child{font-size:11px;opacity:.7}.studio{--bg:#e7edf3;--ink:#22374c;--border:#22374c35}.studio .image-art{background:#a9bfd5}.arch{width:230px;height:310px;position:absolute;left:60px;bottom:0;border:50px solid #d9e0e7;border-bottom:0;border-radius:130px 130px 0 0;box-shadow:25px 10px 0 #47678450;transform:rotate(-9deg)}.studio .disc{width:90px;height:90px;position:absolute;right:25px;top:35px;border-radius:50%;background:#7694b2}.studio .project{padding:30px;background:#d2dfe9;min-height:180px;border-radius:4px}.studio .project:nth-child(2){background:#d8d8cc}.studio .project:nth-child(3){background:#c5d2df}.oficio{--bg:#f0f0df;--ink:#344625;--border:#34462535}.oficio h1{font-weight:700}.oficio .image-art{background:#cbd69c}.house{position:absolute;left:50%;top:50%;transform:translate(-50%,-35%);width:205px;height:180px;background:#f1f0dc;border-radius:5px;box-shadow:15px 20px 0 #34462520}.house:before{content:"";position:absolute;width:170px;height:170px;background:#5a703e;transform:rotate(45deg);top:-88px;left:17px;border-radius:10px;z-index:-1}.house:after{content:"";position:absolute;bottom:0;left:83px;width:45px;height:90px;background:#aabc7f;border-radius:25px 25px 0 0}.window{position:absolute;left:22px;top:35px;width:38px;height:42px;border:6px solid #acba8f;border-radius:3px}.window.second{left:auto;right:22px}.service-icon{font-size:32px}.oficio .feature-list{list-style:none;padding:0;line-height:2;font-size:15px}.oficio .feature-list li:before{content:"✓ ";margin-right:7px}@media(max-width:760px){.container{padding-inline:22px}.demo-bar{padding-inline:15px;font-size:10px}.demo-header{height:80px}.demo-header nav{gap:18px}.hero{grid-template-columns:1fr;gap:35px;padding-block:50px}h1{font-size:59px;letter-spacing:-3px}.image-art{height:320px}.grid{grid-template-columns:1fr;gap:20px}.section{padding-block:45px}h2{font-size:34px}.contact-band{padding:30px;display:block}.contact-band h2{font-size:32px;margin-bottom:25px}.bottom{gap:25px;font-size:10px}.arch{left:calc(50% - 115px);height:260px;width:210px}.demo-header nav a:last-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Teléfonos: botones y títulos se ajustan al ancho disponible. */
@media (max-width: 600px) {
  .container { padding-inline: 20px; }
  .demo-bar { flex-wrap: wrap; gap: 8px; padding: 12px 20px; }
  .demo-bar a { padding-block: 5px; }
  .demo-header { height: auto; min-height: 80px; flex-wrap: wrap; padding-block: 18px; gap: 14px; }
  .demo-header nav { flex-wrap: wrap; gap: 16px; }
  .hero > *, .grid > * { min-width: 0; }
  h1 { font-size: clamp(40px, 12vw, 60px); letter-spacing: -2px; line-height: 1.06; }
  h2 { font-size: clamp(28px, 8vw, 36px); }
  .cta { max-width: 100%; white-space: normal; line-height: 1.5; min-height: 48px; }
  .contact-band { padding: 24px; }
  .contact-band h2 { font-size: clamp(26px, 7vw, 32px); }
  .contact-band .cta { width: 100%; white-space: normal; padding: 14px 18px; }
  .bottom { flex-wrap: wrap; gap: 14px; line-height: 1.6; }
}