/* artilexprecio.com: ajustes sobre Pico CSS (classless). Azul profundo + ámbar, sans-serif del sistema. */
:root {
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-primary: #b45309;
  --pico-primary-hover: #92400e;
  --pico-primary-background: #b45309;
  --pico-primary-hover-background: #92400e;
  --pico-background-color: #fbfbfd;
  --pico-color: #172033;
  --pico-h1-color: #172033;
  --pico-h2-color: #1e3a5f;
  --pico-border-radius: 10px;
  --pico-spacing: .9rem;
  --pico-typography-spacing-vertical: .9rem;
}
/* Pico pose ses couleurs sous [data-theme=light] : les nôtres doivent avoir la même spécificité. */
:root[data-theme=light] { --pico-primary: #b45309; --pico-primary-background: #b45309; --pico-primary-border: #b45309; --pico-primary-hover: #92400e; --pico-primary-hover-background: #92400e; --pico-primary-hover-border: #92400e; --pico-primary-inverse: #fff; --pico-primary-focus: rgba(180, 83, 9, .35); }
body > header { background: #1e3a5f; color: #fff; padding: .55rem 0; }
body > header nav a, body > header nav strong { color: #fff; }
body > header nav strong { font-size: 1.15rem; letter-spacing: .01em; }
main { padding-top: 1rem; }
#precio h1 { font-size: clamp(1.55rem, 4.8vw, 2.3rem); line-height: 1.2; margin-bottom: .4rem; }
#precio hgroup p { color: #4b5563; margin-bottom: .6rem; font-size: .95rem; }
.monto { font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 800; color: #b45309; letter-spacing: -.02em; line-height: 1; margin: .2rem 0 .1rem; }
.monto + p { font-size: .95rem; color: #4b5563; }
#orden { border: 2px solid #b45309; box-shadow: none; padding: 1rem 1.1rem; }
#orden header { font-weight: 700; font-size: 1.1rem; margin-bottom: .3rem; padding: 0; background: none; }
#orden small { display: block; color: #4b5563; margin-bottom: .6rem; }
#orden fieldset { margin-bottom: .4rem; }
#orden button { width: 100%; font-weight: 700; }
#orden .fila { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
#orden output { display: block; color: #92400e; font-weight: 600; min-height: 1.3em; }
.trampa { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden; }
.foto { float: right; width: min(30%, 130px); margin: 0 0 .4rem .8rem; }
body > header nav ul:last-child { display: none; }
.pasos { display: grid; gap: .6rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.pasos li { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: .8rem 1rem; }
.pasos li b { color: #1e3a5f; }
.nota { background: #fff7ed; border: 1px solid #fdba74; border-radius: 10px; padding: .8rem 1rem; }
table td:first-child { font-weight: 600; color: #1e3a5f; width: 40%; }
footer { font-size: .9rem; color: #4b5563; padding-bottom: 5.5rem; }
.flotante { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e7eb; padding: .55rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .8rem; z-index: 9; }
.flotante b { color: #b45309; font-size: 1.2rem; }
.flotante a[role=button] { margin: 0; padding: .55rem .9rem; white-space: nowrap; }
@media (min-width: 768px) {
  .flotante { display: none; }
  body > header nav ul:last-child { display: flex; }
  footer { padding-bottom: 2rem; }
  #precio .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: start; }
  .foto { float: none; width: 100%; max-width: 300px; margin: 0 auto; }
}