/* Secciones de contenido: hero (con la hoja de prueba de color), servicios, precios y
   calculadora, galería de trabajos y visor ampliado, contacto y formulario de pedido. */

/* Hero */
.hero{padding-block:clamp(28px,6vw,72px)}
.hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}}
.eyebrow{font:500 .75rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted,var(--muted));
  display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--band-line,var(--accent));flex:none}
.hero h1{margin-top:18px;font:800 clamp(3.4rem,12vw,7.25rem)/.9 var(--display);font-stretch:62%;
  text-transform:uppercase;letter-spacing:-.005em}
.hero h1 span{display:block}
.lead{margin-top:22px;max-width:46ch;font-size:1.1875rem;color:var(--band-muted,var(--muted))}
.cta-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.facts{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  border-top:2px solid var(--band-fg,var(--line));padding-top:18px}
.facts dt{font:500 .6875rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--band-muted,var(--muted))}
.facts dd{margin-top:6px;font:700 1.125rem/1.2 var(--display);font-stretch:85%}
.sheet{display:block;width:100%;max-width:460px;height:auto;margin-inline:auto;isolation:isolate}
.sheet .paper{fill:var(--paper)}
.sheet .cm{stroke:var(--band-fg,var(--fg));stroke-width:1;fill:none}
.sheet .reg{stroke:#16244F;stroke-width:1;fill:none}
.sheet .pm{font-family:var(--mono);font-size:9px;fill:#566170;letter-spacing:.08em}
.plate{mix-blend-mode:multiply;animation:registro 1.6s .15s cubic-bezier(.2,.9,.2,1) both}
.plate-c{fill:var(--c);--dx:-18px;--dy:10px}
.plate-m{fill:var(--m);--dx:16px;--dy:-9px}
.plate-y{fill:var(--y);--dx:3px;--dy:18px}
@keyframes registro{from{transform:translate(var(--dx),var(--dy))}to{transform:translate(0,0)}}

/* Secciones (encabezado común) */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-alt{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:36px;max-width:60ch}
.sec h2{font:800 clamp(2.1rem,5.5vw,3.4rem)/.96 var(--display);font-stretch:68%;text-transform:uppercase;
  text-wrap:balance;color:var(--band-fg,var(--fg))}
.sec-lead{color:var(--band-muted,var(--muted));font-size:1.0625rem}
[id]{scroll-margin-top:76px}

/* Servicios */
.servicios{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.serv{display:flex;flex-direction:column;gap:10px;padding:22px;color:var(--sv-fg,var(--ink));
  border-radius:var(--radius);transition:transform .15s}
.serv:hover{transform:translateY(-3px)}
.serv:nth-child(1){background:#3A9AC2}
.serv:nth-child(2){background:#E06D93}
.serv:nth-child(3){background:#EFBE41}
.serv:nth-child(4){background:#E98346}
.serv:nth-child(5){background:#233466;--sv-fg:#F5F3EE}
.serv:nth-child(6){background:#A33678;--sv-fg:#FFFFFF}
.serv h3{font:700 1.3125rem/1.15 var(--display);font-stretch:90%}
.serv p{font-size:.9688rem}
.serv .spec{margin-top:auto;padding-top:6px;font:500 .75rem/1.4 var(--mono);letter-spacing:.04em}
.serv a{font:700 .9375rem var(--body);text-decoration:none;color:inherit;border-bottom:2px solid currentColor;align-self:flex-start;padding-bottom:1px}
.serv a:hover{border-bottom-style:dashed}

/* Precios */
.precios-grid{display:grid;gap:32px;align-items:start}
@media(min-width:980px){.precios-grid{grid-template-columns:minmax(0,1fr) 380px}.calc{position:sticky;top:84px}}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{min-height:40px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--fg);font:600 .9375rem var(--body);cursor:pointer}
.tab:hover{border-color:var(--fg)}
.tab[aria-pressed="true"]{background:var(--tab-c,var(--fg));color:var(--tab-c-fg,var(--bg));border-color:var(--fg)}
.lista{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row h3{font:700 1.0625rem/1.25 var(--body)}
.row .spec{margin-top:4px;font:400 .75rem/1.45 var(--mono);color:var(--muted)}
.tiers{display:flex}
.tier{min-width:92px;padding:0 14px;border-left:1px solid var(--line)}
.tier:first-child{padding-left:0;border-left:0}
.tier .q{display:block;font:500 .6563rem/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tier strong{font:600 1.125rem/1.4 var(--body);font-variant-numeric:tabular-nums}
.tier:last-child strong{color:var(--accent)}
@media(max-width:700px){.row{grid-template-columns:minmax(0,1fr)}.tier{min-width:0;flex:1}}
.nota{margin-top:14px;font:400 .75rem/1.5 var(--mono);color:var(--band-muted,var(--muted));max-width:70ch}

.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:14px}
.calc input,.calc select{background:var(--bg)}
.calc h3,.pedido h3{font:800 1.6rem/1 var(--display);font-stretch:72%;text-transform:uppercase}
.qty{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
.qty button{min-height:44px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  color:var(--fg);font:500 1.25rem/1 var(--body);cursor:pointer}
.qty button:hover{border-color:var(--fg)}
.qty input{text-align:center;font-variant-numeric:tabular-nums}
.calc-out{display:grid;gap:8px;padding-block:14px;border-block:1px solid var(--line)}
.calc-out div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc-out dt{font-size:.9375rem;color:var(--muted)}
.calc-out dd{font:600 1rem var(--body);font-variant-numeric:tabular-nums}
.calc-out .total{align-items:center;background:var(--y);padding:12px 14px;border-radius:var(--radius)}
.calc-out .total dt{color:var(--ink);font-weight:700}
.calc-out .total dd{font:800 2.25rem/1 var(--display);font-stretch:80%;color:var(--ink)}
.hint{font-size:.875rem;color:var(--muted);min-height:2.6em}
.calc-actions,.actions{display:flex;flex-wrap:wrap;gap:10px}

/* Trabajos */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.galeria{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.work{display:block;width:100%;padding:0;text-align:left;background:var(--surface);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;font:inherit;
  transition:border-color .15s,transform .15s}
.work:hover{border-color:var(--fg);transform:translateY(-2px)}
.work-art{display:block;aspect-ratio:4/3;background:var(--surface-2)}
.work-art img{display:block;width:100%;height:100%;object-fit:cover;isolation:isolate}
.work-cap{display:grid;gap:3px;padding:14px 16px 16px}
.work-name{font:700 1.0625rem/1.25 var(--display);font-stretch:92%}
.work-spec{font:400 .75rem/1.45 var(--mono);color:var(--muted)}
.muestra-nota{margin-top:18px;font:400 .75rem/1.5 var(--mono);color:var(--muted)}

dialog.visor{width:calc(100% - 32px);max-width:880px;padding:0;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--fg)}
dialog.visor::backdrop{background:rgba(8,10,13,.68)}
.visor-body{display:grid;gap:0}
@media(min-width:760px){.visor-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.visor-art{background:var(--surface-2);aspect-ratio:4/3}
.visor-art img{display:block;width:100%;height:100%;object-fit:cover;isolation:isolate}
.visor-info{display:grid;gap:12px;align-content:start;padding:24px;position:relative}
.visor-info h3{font:800 1.75rem/1 var(--display);font-stretch:72%;text-transform:uppercase;padding-right:44px}
.visor-info .spec{font:400 .8125rem/1.45 var(--mono);color:var(--muted)}
.visor-info p{color:var(--muted)}
.visor-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--fg);font:500 1.25rem/1 var(--body);cursor:pointer}
.visor-x:hover{border-color:var(--fg)}

/* Contacto */
.contacto-grid{display:grid;gap:48px;align-items:start}
@media(min-width:900px){.contacto-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px}}
.pasos{display:grid;gap:18px;margin-bottom:32px;counter-reset:paso}
.pasos li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;counter-increment:paso}
.pasos li::before{content:counter(paso);width:36px;height:36px;display:grid;place-items:center;
  background:var(--y);color:var(--ink);border-radius:50%;font:700 .9375rem var(--mono)}
.pasos h3{font:700 1.0625rem/1.3 var(--body);color:var(--band-fg,var(--fg))}
.pasos p{color:var(--band-muted,var(--muted));font-size:.9688rem}
.ficha{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.ficha-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.ficha-k{font:500 .6875rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ficha-v{margin-top:4px;font:600 1.0625rem/1.3 var(--body);overflow-wrap:anywhere}
.ficha-row>div:first-child{min-width:0}
.ficha-btns{display:flex;gap:8px;flex-wrap:wrap}
.horarios{padding:16px 20px;display:grid;gap:6px}
.horarios div{display:flex;justify-content:space-between;gap:16px;font-size:.9688rem}
.horarios dt{color:var(--muted)}
.horarios dd{font-variant-numeric:tabular-nums;text-align:right}
.pedido{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:14px}
.pedido>p{color:var(--muted);font-size:.9688rem}
.pedido input,.pedido select,.pedido textarea{background:var(--bg)}
.preview{padding:12px;border:1px dashed var(--line);border-radius:var(--radius);font:400 .8125rem/1.55 var(--mono);
  color:var(--fg);overflow-wrap:anywhere;white-space:pre-wrap}