@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2")}

:root{
  --fondo:#F1F3F4;
  --blanco:#FFFFFF;
  --tinta:#12171C;
  --tinta-2:#2B353E;
  --gris:#4A5661;
  --gris-borde:#8A96A1;
  --linea:#CCD3D9;
  --hundido:#E6EAED;
  --acento:#5E2682;
  --acento-osc:#45186A;
  --acento-suave:#C9A8E8;
  --aviso:#9A3412;
  --foco:#C2410C;
  --claro:#C5CED6;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.5}
h1,h2,h3,p,ol,ul,fieldset{margin:0;padding:0}
fieldset{border:0;min-width:0}
legend{padding:0;font-weight:700;margin-bottom:10px}
a{color:var(--acento)}
a:hover{color:var(--acento-osc)}
button,select,input{font-family:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.mono{font-family:var(--mono)}
.chico{font-size:15px;color:var(--gris)}
.chico-oscuro{font-size:15px;color:var(--tinta-2)}
.claro{color:var(--claro)}
.error{color:var(--aviso);font-weight:700}
.error:empty,.archivo-nombre:empty{display:none}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.ancho{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
.seccion{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:28px}
.banda-blanca{background:var(--blanco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.banda-oscura{background:var(--tinta);color:var(--fondo)}
.encabezado{display:flex;flex-direction:column;gap:8px}
.encabezado p{color:var(--gris);max-width:40em}
h2{font-size:34px;line-height:1.15;letter-spacing:-0.01em;text-wrap:balance}

.pila{display:flex;flex-direction:column;gap:22px}
.pila-20{display:flex;flex-direction:column;gap:20px}
.pila-18{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pila-16{display:flex;flex-direction:column;gap:16px}
.pila-6{display:flex;flex-direction:column;gap:6px}
.fila{display:flex;flex-wrap:wrap;gap:12px}
.fila-10{display:flex;flex-wrap:wrap;gap:10px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:4px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-chico{min-height:44px;padding:0 18px;font-size:15px}
.btn-grande{min-height:52px;padding:0 26px}
.btn-bloque{margin-top:8px}
.btn-acento{background:var(--acento);color:#fff}
.btn-acento:hover{background:var(--acento-osc);color:#fff}
.btn-oscuro{background:var(--tinta);color:#fff}
.btn-oscuro:hover{background:var(--tinta-2);color:#fff}
.btn-linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-linea:hover{background:var(--tinta);color:#fff}
.btn-linea-blanca{background:var(--blanco);color:var(--tinta);border-color:var(--tinta)}
.btn-linea-blanca:hover{background:var(--tinta);color:#fff}
.btn-claro{background:var(--fondo);color:var(--tinta)}
.btn-claro:hover{background:#fff;color:var(--tinta)}

/* Barra */
.barra{border-bottom:1px solid var(--linea);background:var(--fondo)}
.barra-in{padding-top:16px;padding-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none}
.marca:hover{color:var(--tinta)}
.marca-texto{font-weight:700;font-size:20px;letter-spacing:0.02em}
.nav{display:flex;flex-wrap:wrap;gap:22px;font-size:15px}
.nav a{color:var(--tinta);text-decoration:none;padding:10px 0}
.nav a:hover{text-decoration:underline}

/* Hero */
.hero{padding-top:64px;padding-bottom:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:48px;align-items:center}
.sobretitulo{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gris)}
h1{font-size:clamp(36px,5vw,58px);line-height:1.04;letter-spacing:-0.02em;text-wrap:balance}
.bajada{font-size:19px;color:var(--tinta-2);max-width:34em}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:6px}
.hero-arte{padding:24px}
.hero-arte svg{display:block;width:100%;height:auto}

/* Cotizador */
.cotizador{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px;align-items:start}
.zona{border:2px dashed var(--gris-borde);border-radius:6px;padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--fondo)}
.zona.sobre{border-color:var(--acento);background:#EFE7F6}
.elegir{align-self:flex-start;position:relative}
.elegir:focus-within{outline:3px solid var(--foco);outline-offset:2px}
.archivo-nombre{color:var(--tinta);overflow-wrap:anywhere}
.visor{position:relative;height:300px;border:1px solid var(--linea);border-radius:6px;background:var(--hundido);overflow:hidden}
.visor-lienzo{position:absolute;inset:0;cursor:grab;touch-action:none}
.visor-lienzo:active{cursor:grabbing}
.visor-lienzo canvas{display:block;width:100%;height:100%}
.visor-texto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--tinta-2);font-size:13px;pointer-events:none}
.medidas{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.medidas-valor{font-size:17px;font-weight:700}
.campo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--tinta)}
.campo select{min-height:44px;padding:0 10px;font-size:15px;color:var(--tinta);background:var(--blanco);border:2px solid var(--gris-borde);border-radius:4px}

.grupo{display:flex;flex-direction:column;gap:8px}
.opcion{min-height:44px;padding:0 16px;background:var(--blanco);color:var(--tinta);border:2px solid var(--gris-borde);border-radius:4px;font-weight:700;font-size:15px}
.opcion[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.contador{display:flex;align-items:center;gap:12px}
.paso{width:44px;height:44px;background:var(--blanco);color:var(--tinta);border:2px solid var(--gris-borde);border-radius:4px;font-weight:700;font-size:20px}
.paso:disabled{opacity:.4;cursor:default}
.contador-valor{font-size:20px;font-weight:700;min-width:2ch;text-align:center}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input{width:20px;height:20px;flex:none;accent-color:var(--acento)}
.recargo{color:var(--aviso);font-weight:700}

.panel{border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:6px}
.panel-suave{border:2px dashed var(--gris-borde);color:var(--tinta-2)}
.panel-precio{border:2px solid var(--tinta)}
.panel-aviso{border:2px solid var(--aviso);gap:8px}
.etiqueta{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gris)}
.precio{font-size:44px;font-weight:700;line-height:1.1}
.por-pieza{font-size:16px;font-weight:700}

/* Piezas a medida */
.dos-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:40px;align-items:start}
.dos-col p{max-width:32em}
.pasos{list-style:none;display:flex;flex-direction:column}
.pasos li{display:flex;gap:18px;padding:20px 0;border-top:1px solid #3A4651}
.pasos li:last-child{border-bottom:1px solid #3A4651}
.pasos div{display:flex;flex-direction:column;gap:4px}
.pasos div span{color:var(--claro)}
.num{font-weight:700;font-size:22px;color:var(--acento-suave)}

/* Materiales */
.tres-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.material{padding:20px;display:flex;flex-direction:column;gap:10px;color:var(--tinta-2)}
.material h3{font-size:20px;color:var(--tinta)}
.colores{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:4px}
.colores li{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.colores i{width:16px;height:16px;border-radius:8px;border:1px solid var(--gris-borde)}
.c-blanco{background:#F5F5F3}.c-negro{background:#17181A}.c-gris{background:#8B9097}.c-rosa{background:#F3A6C0}
.c-rojo{background:#A8322D}.c-morado{background:#6B3FA0}.c-verde{background:#2E9E5B}.c-azul{background:#2563C9}
.c-azul-petg{background:#1F4FBF}.c-amarillo{background:#F2C81E}
.no-imprimo{border:1px solid var(--linea);background:var(--hundido);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:8px}
.no-imprimo span{color:var(--tinta-2);max-width:60em}

/* Cómo funciona */
.cuatro-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:28px}
.regla{display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--tinta);padding-top:14px}
.regla span{color:var(--gris)}

/* Pie */
.pie{padding-top:48px;padding-bottom:48px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.pie-titulo{font-size:26px;font-weight:700;letter-spacing:-0.01em}

@media (max-width:600px){
  .seccion{padding-top:48px;padding-bottom:48px}
  .hero{padding-top:40px;padding-bottom:40px;gap:32px}
  h2{font-size:28px}
  .nav{order:3;width:100%;gap:18px}
  .precio{font-size:38px}
}