/* Plantilla «oficio». Directa: letra ancha y pesada, el imán en la tapa, nada de adorno.
   Colores: --papel, --tinta, --acento (el imán y la franja de urgencias; lleva tinta encima). */

:root {
  --papel: #FFFFFF;
  --tinta: #1A1A1A;
  --acento: #FFC400;
  --disp: "Archivo", "Arial Black", sans-serif;
  --texto: "Work Sans", system-ui, sans-serif;
  --margen: clamp(16px, 4vw, 48px);
  --ancho: 60rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.1rem;
  line-height: 1.55;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ─── Tapa: el imán de heladera ──────────────────────────────────── */

.tapa {
  padding: clamp(32px, 7vw, 88px) var(--margen) clamp(28px, 5vw, 56px);
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  display: grid;
  gap: 1.8rem;
  align-items: center;
}
@media (min-width: 860px) { .tapa { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }

.iman {
  background: var(--acento);
  color: var(--tinta);
  border: 4px solid var(--tinta);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 40px);
  box-shadow: 10px 10px 0 var(--tinta);
  transform: rotate(-1.5deg);
  display: grid;
  gap: .5rem;
  justify-items: start;
}
.iman-oficio {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.iman-nombre {
  font-family: var(--disp);
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.15;
}
.iman-zona { font-size: 1.05rem; }
.iman-matricula {
  font-weight: 600;
  font-size: .95rem;
  padding: .15rem .6rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
}
.boton {
  margin-top: .6rem;
  display: inline-block;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--acento);
  font-family: var(--disp);
  font-stretch: 110%;
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
}
.lema {
  font-family: var(--disp);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.02;
  max-width: 16ch;
}

/* ─── Urgencias: la franja ───────────────────────────────────────── */

.urgencias {
  background: var(--tinta);
  color: var(--papel);
  padding: 1.2rem var(--margen);
}
.urgencias > * { max-width: var(--ancho); margin-inline: auto; }
.urgencias h2 {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--acento);
}

/* ─── Bloques ────────────────────────────────────────────────────── */

main { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.bloque { padding: clamp(32px, 5vw, 56px) 0; border-bottom: 3px solid var(--tinta); }
.bloque h2 {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1;
  margin-bottom: 1.1rem;
}
.bajada { font-size: 1.2rem; max-width: 38rem; margin-bottom: 1.2rem; }

/* Lo que arreglo: una lista para tildar de un vistazo. */
.lista { list-style: none; padding: 0; display: grid; gap: .9rem 2rem; }
@media (min-width: 680px) { .lista { grid-template-columns: 1fr 1fr; } }
.lista li { display: grid; grid-template-columns: 1.8rem 1fr; column-gap: .7rem; }
.lista li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1.8rem; height: 1.8rem;
  border-radius: 6px;
  background: var(--acento) center / 1.1rem no-repeat;
  border: 2px solid var(--tinta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.lista h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.lista p { font-size: 1rem; }

.lugares { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lugares li {
  padding: .4rem 1rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  font-weight: 600;
}
.nota { margin-top: 1rem; font-size: 1rem; max-width: 38rem; }

.pasos { list-style: none; padding: 0; counter-reset: paso; display: grid; gap: 1rem; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pasos li { counter-increment: paso; display: grid; gap: .5rem; align-content: start; }
.pasos li::before {
  content: counter(paso);
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  -webkit-text-stroke: 2px var(--tinta);
  color: var(--acento);
}
.garantia {
  margin-top: 1.4rem;
  display: inline-block;
  padding: .7rem 1rem;
  background: var(--acento);
  border: 2px solid var(--tinta);
  font-weight: 600;
}

.precios { width: 100%; border-collapse: collapse; }
.precios th, .precios td { padding: .8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 25%, transparent); vertical-align: top; }
.precios tr:last-child th, .precios tr:last-child td { border-bottom: 0; }
.precios th { text-align: left; font-weight: 600; padding-right: 1rem; }
.precios th span { display: block; font-weight: 400; font-size: .95rem; }
.precios td { text-align: right; white-space: nowrap; font-family: var(--disp); font-weight: 800; font-size: 1.15rem; }

.fotos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.fotos figure { margin: 0; }
.fotos .foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--tinta); border-radius: 10px; }
.fotos .foto-hueco {
  display: grid; place-items: center; text-align: center; padding: 1rem;
  font-size: .95rem;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--acento) 45%, transparent) 12px 24px);
}
.fotos figcaption { margin-top: .4rem; font-size: .95rem; }

.preguntas { display: grid; gap: 1.2rem; }
.preguntas dt { font-weight: 600; font-size: 1.15rem; }
.preguntas dd { margin-top: .2rem; max-width: 40rem; }

/* ─── Presupuesto: el cierre ─────────────────────────────────────── */

.presupuesto {
  background: var(--acento);
  color: var(--tinta);
  border-top: 4px solid var(--tinta);
  padding: clamp(40px, 7vw, 80px) var(--margen);
}
.presupuesto > * { max-width: var(--ancho); margin-inline: auto; }
.presupuesto h2 {
  font-family: var(--disp);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  line-height: .95;
  margin-bottom: 1rem;
}
.presupuesto p { font-size: 1.2rem; }
.presupuesto .presupuesto-como { margin-top: .5rem; font-size: 1rem; }

.pie {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 1.8rem var(--margen) 110px;
  display: grid; gap: .3rem;
  font-size: .98rem;
}
.pie-nombre { font-family: var(--disp); font-weight: 800; font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { overflow-x: hidden; }
main > .bloque:last-child { border-bottom: 0; }
@media (max-width: 600px) {
  /* En el celular el imán no se tuerce tanto ni tira tanta sombra: si no, toca el borde. */
  .iman { transform: rotate(-1deg); box-shadow: 6px 6px 0 var(--tinta); margin-right: 8px; }
}