/* framework.interfaz.digital — showcase-only styling. Framework geometry and
   motion come from ix-saas-shell.css / ix-motion.css and are not redefined here. */
.fw-page{padding-bottom:12px}
.fw-hero{padding:28px 0 18px}
.fw-hero h1{font-size:clamp(38px,6vw,76px);line-height:.94;letter-spacing:-.06em;margin:12px 0 16px;font-weight:820}
.fw-hero h1 em{font-style:normal;color:var(--ix-accent)}
.fw-hero p,.fw-lead{max-width:680px;font-size:17px;line-height:1.6;color:var(--ix-muted)}
.fw-hero-sm h1{font-size:clamp(32px,4.6vw,56px)}
.fw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fw-section{margin-top:46px}
.fw-section h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.045em;margin:10px 0 12px}
.fw-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.fw-section[data-ix-reveal-group]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fw-tile{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:#fff;border:1px solid var(--ix-line);border-radius:22px;padding:20px;text-align:left;font:inherit;color:inherit;text-decoration:none}
.fw-tile b{font-size:17px;letter-spacing:-.02em}.fw-tile p{margin:0;color:var(--ix-muted);line-height:1.5;font-size:14px}
.fw-link{cursor:pointer}.fw-link span{margin-top:auto;font-size:12px;font-weight:800;color:var(--ix-accent)}
code{font-size:.9em;background:#ecebe5;border-radius:6px;padding:1px 5px}
.fw-curves i{display:block;width:100%;height:6px;border-radius:9px;background:#ecebe5;position:relative;overflow:hidden}
.fw-curves i::after{content:"";position:absolute;inset:0;width:30%;border-radius:inherit;background:var(--ix-accent);animation:fwCurve 1.8s var(--e) infinite alternate}
@keyframes fwCurve{to{transform:translateX(233%)}}
.fw-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:10px}
.fw-card{display:block;background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit}
.fw-card[hidden]{display:none}
.fw-media{display:block;aspect-ratio:1/1;border-radius:18px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 42%),linear-gradient(145deg,var(--tone,#d9cbb8),color-mix(in srgb,var(--tone,#d9cbb8) 70%,#6b5a48))}
.fw-card .fw-media{border-radius:0}
.fw-card-body{display:grid;gap:4px;padding:12px 14px 16px}.fw-card-body small{color:var(--ix-muted)}
.fw-quick{padding:0;overflow:hidden}.fw-quick-media{aspect-ratio:16/10;border-radius:0}.fw-quick-body{display:grid;gap:6px;padding:20px 22px 22px}.fw-quick-body p{color:var(--ix-muted);margin:6px 0 0;line-height:1.5}
.fw-pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:16px;padding-top:6px}
.fw-gallery{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start}.fw-media-xl{grid-column:1/-1;aspect-ratio:4/3}
.fw-panel{background:#fff;border-radius:26px;padding:24px;align-self:start}
.fw-panel h1{font-size:clamp(34px,4.4vw,56px);line-height:.95;letter-spacing:-.055em;margin:10px 0 8px}
.fw-price{font-size:21px;font-weight:800;margin:0 0 8px}.fw-panel>p{color:var(--ix-muted);line-height:1.55}
.fw-options{display:flex;gap:7px;margin:16px 0}.fw-option{border:1px solid var(--ix-line);background:#fff;border-radius:13px;padding:10px 14px;font:inherit;cursor:pointer}.fw-option.is-selected{background:var(--ix-ink);color:#fff}
.fw-specs{margin-top:16px;display:grid;gap:8px}.fw-detail{border-top:1px solid var(--ix-line);padding-top:12px}.fw-detail summary{font-weight:800;cursor:pointer}.fw-detail p{color:var(--ix-muted)}
.fw-sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.fw-sheet-head b{font-size:28px;letter-spacing:-.04em}
.fw-close{width:42px;height:42px;border:0;border-radius:50%;background:#ecebe5;font-size:22px;cursor:pointer}
.fw-menu{display:grid;gap:4px}.fw-menu-link{display:block;padding:14px 12px;border-radius:14px;font-size:20px;font-weight:750;letter-spacing:-.02em;text-decoration:none}.fw-menu-link[aria-current="page"],.fw-menu-link:hover{background:#ecebe5}
.fw-note{color:var(--ix-muted);font-size:12px;line-height:1.5;margin-top:22px}
.fw-cart-items{display:grid;gap:8px;margin-bottom:18px}.fw-cart-item{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:8px}.fw-cart-item small{display:block;color:var(--ix-muted);margin-top:4px}
.fw-stack{display:grid;gap:8px;margin:16px 0}
.fw-rules{display:grid;gap:10px;padding-left:20px;line-height:1.55;max-width:760px}
/* "Mostrar bandas": paints the occlusion bands over the window for teaching. */
.fw-bands .ix-viewport::before{content:"";position:absolute;inset:0;z-index:2900;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,64,64,.28) 0,rgba(255,64,64,.28) var(--ix-occlude-top),rgba(255,170,0,.25) var(--ix-occlude-top),rgba(255,170,0,.25) calc(var(--ix-occlude-top) + var(--ix-occlude-fade)),transparent calc(var(--ix-occlude-top) + var(--ix-occlude-fade)),transparent calc(100% - var(--ix-occlude-bottom) - var(--ix-occlude-fade)),rgba(255,170,0,.25) calc(100% - var(--ix-occlude-bottom) - var(--ix-occlude-fade)),rgba(255,170,0,.25) calc(100% - var(--ix-occlude-bottom)),rgba(255,64,64,.28) calc(100% - var(--ix-occlude-bottom)))}
@media(max-width:900px){.fw-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fw-pdp{grid-template-columns:1fr}}
@media(max-width:760px){.fw-grid-3,.fw-section[data-ix-reveal-group]{grid-template-columns:1fr}.fw-hero p,.fw-lead{font-size:15px}}
.fw-products-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}