/* comprarpintura.es · una hoja de estilo para todo el sitio.
   Blanco y negro (la estética de las fichas técnicas de PaintUber), tipografía del sistema
   y un solo acento (azul) para enlaces y foco. Sin fuentes ni recursos externos. */

:root {
  --negro: #000000;
  --tinta: #111111;
  --gris: #5e5e5e;
  --gris-suave: #8a8a8a;
  --linea: #e2e2e2;
  --panel: #f6f6f6;
  --blanco: #ffffff;
  --acento: #1f5fd6;
  --aviso: #fff6d6;
  --ancho: 46rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--acento); text-underline-offset: 2px; }
a:hover { color: var(--negro); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.saltar {
  position: absolute; left: -999px; top: 0;
  background: var(--negro); color: var(--blanco); padding: .5rem 1rem; z-index: 10;
}
.saltar:focus { left: 1rem; }

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* Banda de transparencia (en todas las páginas) */
.declaracion {
  background: var(--negro); color: var(--blanco);
  font-size: .875rem; line-height: 1.45; padding: .55rem 0;
}
.declaracion a { color: var(--blanco); }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--linea); padding: 1rem 0 .75rem; }
.marca {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  text-decoration: none; color: var(--negro);
}
.marca strong { font-size: 1.25rem; letter-spacing: -.01em; }
.marca span { font-size: .85rem; color: var(--gris); }
.menu { margin-top: .6rem; }
.menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem .9rem;
}
.menu a { color: var(--tinta); text-decoration: none; font-size: .95rem; }
.menu a:hover { text-decoration: underline; }
.menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }

/* Contenido */
main { padding: 1.5rem 0 2.5rem; }
h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; margin: .25rem 0 1rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.25rem 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: .35rem; }
.entradilla { font-size: 1.15rem; color: var(--gris); }
.fecha { font-size: .875rem; color: var(--gris); }
small, .nota { font-size: .875rem; color: var(--gris); }

/* Recuadros */
.resumen {
  border-left: 4px solid var(--negro); background: var(--panel);
  padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.resumen > :last-child { margin-bottom: 0; }
.resumen > strong:first-child { display: block; margin-bottom: .25rem; }

.alerta {
  border: 1px solid #e8d48a; background: var(--aviso);
  padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.alerta > :last-child { margin-bottom: 0; }

.producto {
  border: 2px solid var(--negro); padding: 1rem 1.1rem; margin: 1.5rem 0;
}
.producto > :last-child { margin-bottom: 0; }
.etiqueta {
  display: inline-block; background: var(--negro); color: var(--blanco);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .15rem .5rem; margin-bottom: .5rem;
}
.producto h3 { margin-top: .25rem; }
.precios { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.precios li { border-bottom: 1px solid var(--linea); padding: .35rem 0; margin: 0; }
.enlaces-producto { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }

.boton {
  display: inline-block; background: var(--negro); color: var(--blanco);
  text-decoration: none; font-weight: 600; padding: .6rem 1rem; border: 2px solid var(--negro);
}
.boton:hover { background: var(--blanco); color: var(--negro); }
.boton.secundario { background: var(--blanco); color: var(--negro); }
.boton.secundario:hover { background: var(--negro); color: var(--blanco); }

/* Portada: las cuatro preguntas */
.preguntas {
  list-style: none; padding: 0; margin: 1.25rem 0;
  display: grid; gap: .75rem; grid-template-columns: 1fr;
  counter-reset: pregunta;
}
@media (min-width: 40rem) { .preguntas { grid-template-columns: 1fr 1fr; } }
.preguntas li {
  border: 1px solid var(--linea); padding: 1rem; margin: 0;
  counter-increment: pregunta; position: relative;
}
.preguntas li::before {
  content: counter(pregunta);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; background: var(--negro); color: var(--blanco);
  font-weight: 700; margin-bottom: .5rem;
}
.preguntas h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.preguntas p { margin-bottom: .6rem; }

.guias { list-style: none; padding: 0; }
.guias li { border-bottom: 1px solid var(--linea); padding: .6rem 0; margin: 0; }
.guias a { font-weight: 600; }

/* Tablas */
.tabla { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--linea); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--linea); }
thead th { background: var(--negro); color: var(--blanco); font-weight: 600; }
tbody th { font-weight: 700; background: var(--panel); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* En móvil, las tablas anchas se apilan por filas */
@media (max-width: 40rem) {
  .tabla.apilable { border: 0; overflow: visible; }
  .tabla.apilable table, .tabla.apilable tbody, .tabla.apilable tr,
  .tabla.apilable th, .tabla.apilable td { display: block; width: 100%; }
  .tabla.apilable thead { position: absolute; left: -9999px; }
  .tabla.apilable tr { border: 1px solid var(--linea); margin-bottom: .75rem; }
  .tabla.apilable td.num { text-align: left; white-space: normal; }
  .tabla.apilable td::before {
    content: attr(data-col); display: block; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--gris);
  }
}

/* Preguntas frecuentes */
details { border-bottom: 1px solid var(--linea); padding: .6rem 0; }
details:first-of-type { border-top: 1px solid var(--linea); }
summary { cursor: pointer; font-weight: 600; }
details p { margin: .5rem 0 0; }

/* Calculadora */
.calc { border: 2px solid var(--negro); padding: 1rem 1.1rem; margin: 1.25rem 0; }
.calc fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.calc legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .5rem; }
.calc label { display: block; font-size: .95rem; }
.fila { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; }
.fila > label { flex: 1 1 7rem; }
.calc input[type="text"], .calc select {
  display: block; width: 100%; margin-top: .2rem;
  font: inherit; padding: .45rem .5rem; border: 1px solid var(--gris-suave); background: var(--blanco);
  border-radius: 0;
}
.opcion { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.opcion input { margin-top: .35rem; }
.calc button {
  font: inherit; cursor: pointer; background: var(--blanco); color: var(--negro);
  border: 2px solid var(--negro); padding: .4rem .8rem;
}
.calc button:hover { background: var(--negro); color: var(--blanco); }
.calc .quitar { padding: .45rem .6rem; }
.oculto { display: none !important; }
.resultado { background: var(--panel); padding: 1rem 1.1rem; border-left: 4px solid var(--negro); }
.resultado .cifra { font-size: 1.6rem; font-weight: 700; line-height: 1.2; display: block; margin: .25rem 0 .5rem; }
.resultado > :last-child { margin-bottom: 0; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 1.5rem 0 2rem; font-size: .9rem; color: var(--gris); }
.pie p { margin-bottom: .6rem; }
.pie ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.pie a { color: var(--tinta); }

@media (max-width: 30rem) {
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.25rem; }
  body { font-size: 1rem; }
}

@media print {
  .declaracion, .menu, .saltar { display: none; }
  a { color: var(--tinta); }
}