/* ==========================================================================
   /webs/ . Hoja propia y autocontenida.

   Los valores de color y la pila tipográfica son los mismos que en
   static/css/style.css, que sigue siendo la referencia del sitio. Están
   copiados aquí en vez de importados para que esta página cargue una sola
   hoja pequeña en lugar de 16 KB de reglas que no usa.

   Si algún día cambias la paleta en style.css, cámbiala también aquí.

   Mobile first de verdad: el diseño base es para 390px y sólo crece desde ahí.
   ========================================================================== */

:root {
  --bg: #faf9f7;
  --surface: #f1efea;
  --fg: #16202e;
  --fg-dim: #55606e;
  --accent: #b45309;
  --accent-ink: #8a3f07;
  --border: #e0dcd4;
  --border-strong: #cfc8bc;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--fg);
  color: var(--bg);
  padding: 0.7rem 1rem;
  z-index: 10;
}
.saltar:focus { left: 0; color: var(--bg); }

.caja {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Cabecera ---------- */

.cabecera {
  padding: 2.5rem 0 2.25rem;
  border-bottom: 1px solid var(--border);
}
.nombre {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.cabecera h1 {
  margin: 0 0 0.9rem;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.entrada {
  margin: 0;
  color: var(--fg-dim);
  font-size: 1.05rem;
}

/* ---------- Botón de WhatsApp ---------- */

.wa {
  display: block;
  margin-top: 1.5rem;
  padding: 0.95rem 1.4rem;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
}
.wa:hover { background: var(--accent-ink); color: #fff; }

/* ---------- Bloques ---------- */

.bloque { padding: 2.5rem 1.25rem; }
.bloque + .bloque { border-top: 1px solid var(--border); }
.bloque h2 {
  margin: 0 0 1.1rem;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.intro { margin: 0 0 1.75rem; color: var(--fg-dim); }

.lista { margin: 0; padding-left: 1.15rem; }
.lista li { margin-bottom: 0.7rem; }
.lista li:last-child { margin-bottom: 0; }

/* ---------- Trabajos ---------- */

.trabajo { margin-bottom: 2.5rem; }
.trabajo:last-child { margin-bottom: 0; }
.trabajo img {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 800;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.trabajo-texto { padding-top: 1rem; }
.trabajo h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.etiqueta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}
.etiqueta-cliente { background: var(--fg); color: var(--bg); }
.etiqueta-propio {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border-strong);
}
.enlace { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--fg-dim); }
.trabajo p { margin: 0 0 0.6rem; }
.para-que { color: var(--fg-dim); margin-bottom: 0; }

/* ---------- Precios ---------- */

.precios { margin-bottom: 1.75rem; }
.precio {
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
}
.precio:last-child { border-bottom: 1px solid var(--border); }
.precio h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.cifra {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.precio p:last-child { margin: 0; color: var(--fg-dim); font-size: 0.95rem; }

.pago-unico {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.nota { margin: 0; color: var(--fg-dim); font-size: 0.95rem; }

/* ---------- Pasos ---------- */

.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1.1rem;
}
.pasos li:last-child { margin-bottom: 0; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 50%;
}

/* ---------- Cierre y pie ---------- */

.cierre { background: var(--surface); }
.cierre p { margin: 0; color: var(--fg-dim); }
.correo { margin-top: 1.1rem !important; font-size: 0.95rem; }

.pie {
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.pie a { color: var(--fg-dim); text-decoration: none; }
.pie a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------- A partir de tablet ---------- */

@media (min-width: 720px) {
  body { font-size: 18px; }
  .cabecera { padding: 3.5rem 0 3rem; }
  .cabecera h1 { font-size: 2.4rem; max-width: 18ch; }
  .entrada { max-width: 56ch; font-size: 1.1rem; }
  .wa { display: inline-block; margin-top: 1.75rem; }
  .bloque { padding: 3.25rem 1.25rem; }
  .bloque h2 { font-size: 1.5rem; }

  .trabajo {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 3rem;
  }
  .trabajo-texto { padding-top: 0; }

  .precios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .precio { border-top: 2px solid var(--accent); }
  .precio:last-child { border-bottom: none; }
}