/* Capa responsive única: se enlaza en todas las páginas y sobrescribe los estilos inline.
   Mobile-first. Breakpoints:
   base  320-479  móvil pequeño
   480   480-767  móvil grande / phablet
   768   768-1023 tablet
   1024  1024-1279 laptop
   1280  1280+    monitor grande */

:root {
  --fs: 16px;
  --pad: 12px;
  --art-w: 90%;      /* cuadros de las galerías */
  --btn-w: 50%;      /* botones de categorías */
  --nav-w: 64px;     /* flechas anterior/siguiente */
  --icon: 40px;      /* cesta / home / lupa */
  --form-w: 100%;
  --max: 100%;
}

@media (min-width: 480px) {
  :root { --fs: 17px; --art-w: 75%; --nav-w: 80px; --icon: 44px; --pad: 16px; }
}
@media (min-width: 768px) {
  :root { --fs: 18px; --art-w: 50%; --btn-w: 25%; --nav-w: 96px; --icon: 48px; --pad: 24px; --form-w: 500px; }
}
@media (min-width: 1024px) {
  :root { --fs: 20px; --art-w: 36%; --nav-w: 110px; --icon: 50px; --max: 1100px; }
}
@media (min-width: 1280px) {
  :root { --art-w: 28%; --nav-w: 120px; --max: 1280px; }
}

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

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

body {
  text-align: center;
  max-width: var(--max);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

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

/* Botones de categorías */
img[src*="boton_"] {
  width: calc(var(--btn-w) - 8px);
  max-width: 268px;
  margin: 4px !important;
}

/* Iconos de galería y navegación */
img[src$="cesta.jpg"],
img[src$="lupa.jpg"],
img[src$="home.jpg"],
img[src$="home.png"] {
  width: var(--icon) !important;
  margin: 6px 8px !important;
}
img[src$="atras.jpg"],
img[src$="adelante.jpg"] {
  width: var(--nav-w) !important;
  margin: 6px 8px !important;
}

/* Cuadros de las galerías */
img[width="20%"],
img[width="12.5%"] {
  display: block;
  width: var(--art-w) !important;
  margin: 8px auto !important;
}

/* Imagen principal de las fichas */
center > img[src*="/img/"] { width: 100% !important; max-width: 850px; margin-top: 12px !important; }

/* Contenedores con márgenes inline */
div[style*="margin-left"] { margin-left: 0 !important; text-align: center; }
hr { width: 60% !important; margin: 16px auto; }

/* Portada (index) */
body:has(> img[src$="titulo1.png"]) {
  margin: 0 !important;
  max-width: none;
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-size: cover;
}
body > img[src$="titulo1.png"] {
  position: static !important;
  margin: 0 !important;
  width: min(795px, 100%);
}
body > a > center > img[src$="entrar.png"] { width: min(300px, 70vw) !important; margin: 0 !important; }

/* Introducción */
.contenedor { flex-direction: column; align-items: center; }
.contenedor img { width: min(275px, 70%) !important; height: auto !important; margin: 20px 0 0 !important; }
.contenedor p,
div[style*="color: white"] p {
  margin: 0 !important;
  font-size: var(--fs) !important;
}
div[style*="color: white"] { margin: 10px 0 !important; font-size: var(--fs) !important; }
.contenedor p { padding: 0 var(--pad); }
@media (min-width: 768px) {
  .contenedor { flex-direction: row; align-items: center; }
  .contenedor img { width: 275px !important; margin: 30px 0 0 20px !important; }
}

/* Formulario */
form {
  width: 100% !important;
  max-width: var(--form-w);
  margin: 16px auto 0 !important;
  text-align: left;
}
form label {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  text-align: left !important;
}
form label[for="titulo"] { font-size: 28px !important; text-align: center !important; }
form input[type="text"],
form input[type="email"] { width: 100% !important; }
textarea { width: 100% !important; }
form input[type="submit"],
form input[type="reset"] {
  display: inline-block !important;
  width: auto !important;
  min-width: 110px;
  margin: 16px 8px 0 0 !important;
}
@media (min-width: 768px) {
  form label { display: inline-block !important; width: 110px !important; margin-left: 0 !important; }
  form label[for="titulo"] { display: block !important; width: 100% !important; font-size: 40px !important; }
  form label[for="comentario"] { display: block !important; width: 100% !important; }
  form input[type="text"],
  form input[type="email"] { width: calc(100% - 130px) !important; }
}

/* Contador y textos sueltos */
p[style*="margin-top: 8%"] { margin-top: 16px !important; }