/* diaztavora.net · hoja única. Replica el aspecto de la web Joomla (plantilla JSN Epic Pro):
   barra oscura arriba, cabecera blanca con logo y escudo, menú negro, pie gris degradado,
   todo sobre fondo azul noche. Sin JavaScript: el menú del móvil es un checkbox. */

@font-face {
  font-family: "Nobile";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/nobile-400-latin.woff2") format("woff2");
}

:root {
  --fondo: #18212f;
  --papel: #fff;
  --tinta: #1d1d1d;
  --tinta-suave: #555;
  --oscuro: #2a2a2a;
  --oscuro-borde: #111;
  --oscuro-hover: #444;
  --verde: #4a7c59;      /* aro del logo */
  --azul-dt: #2d3561;    /* letras del logo */
  --enlace: #1b7fae;
  --gris-pie-1: #f4f4f4;
  --gris-pie-2: #d9d9d9;
  --borde: #c8c8c8;
  --ancho: 1200px;
  --titulos: "Nobile", "Trebuchet MS", Arial, sans-serif;
  --texto: Arial, Helvetica, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.65 var(--texto);
}

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

a { color: var(--enlace); }
a:hover { color: var(--azul-dt); }
a:focus-visible, .menu-abrir:focus-visible + .menu-boton {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 16px;
  top: 8px;
  z-index: 10;
  padding: 6px 12px;
  background: var(--papel);
}

.pagina {
  max-width: var(--ancho);
  margin: 0 auto;
  background: var(--papel);
  border-left: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
}

/* ── Barra superior ───────────────────────────────────────── */
.barra-sup {
  background: var(--oscuro);
  color: #bbb;
  font-size: 12px;
  text-align: right;
  padding: 3px 16px;
}
.barra-sup a { color: #ddd; text-decoration: none; }
.barra-sup a:hover { color: #fff; text-decoration: underline; }

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 2px 32px 2px 2px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #111;
  text-decoration: none;
  min-width: 0;
}
.marca:hover { color: #111; }
.marca img { width: 112px; flex: none; }
.marca span {
  font: 46px/1.15 var(--texto);
}
.escudo {
  width: auto;
  height: 100px;
  margin-left: auto;
  margin-right: 12%;
}

/* ── Menú ─────────────────────────────────────────────────── */
.menu {
  position: relative;
  background: var(--oscuro);
  border-top: 2px solid var(--oscuro-borde);
  border-bottom: 2px solid var(--oscuro-borde);
}
.menu-abrir {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.menu-boton {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.hamburguesa,
.hamburguesa::before,
.hamburguesa::after {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
}
.hamburguesa { position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; }
.hamburguesa::before { top: -6px; }
.hamburguesa::after { top: 6px; }

.menu-lista, .sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-lista {
  display: flex;
  flex-wrap: wrap;
}
.menu-lista > li { position: relative; }
.menu-lista a {
  display: block;
  color: #eee;
  text-decoration: none;
}
.menu-lista > li > a {
  padding: 11px 18px;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.menu-lista > li > a:hover,
.menu-lista > li:focus-within > a {
  background: var(--oscuro-hover);
  color: #fff;
}
.menu-lista > li > a[aria-current],
.menu-lista > li.activo > a { border-bottom-color: var(--verde); color: #fff; }
.con-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  vertical-align: 3px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
}
.sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 260px;
  background: var(--oscuro);
  border: 1px solid var(--oscuro-borde);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.con-sub:hover > .sub,
.con-sub:focus-within > .sub { display: block; }
.sub a {
  padding: 9px 18px;
  font-size: 14px;
  border-top: 1px solid #383838;
}
.sub li:first-child a { border-top: 0; }
.sub a:hover, .sub a:focus-visible { background: var(--oscuro-hover); color: #fff; }
.sub a[aria-current] { color: #fff; box-shadow: inset 3px 0 var(--verde); }

/* ── Cuerpo ───────────────────────────────────────────────── */
.banner {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  border-bottom: 1px solid #e3e3e3;
}
.banner img { display: block; margin: 0 auto; }

.contenido {
  padding: 18px 32px 36px;
  min-height: 46vh;
}
.contenido h2 {
  margin: 4px 0 16px;
  font: 400 24px/1.3 var(--titulos);
  color: #222;
}
.miga {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tinta-suave);
}
.miga a { color: var(--tinta-suave); }
.contenido p { margin: 0 0 12px; }

/* fichas técnicas */
.ficha { max-width: 760px; }
.ficha h3 {
  margin: 26px 0 10px;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ficha h3:first-child {
  margin-top: 0;
  text-decoration: none;
  letter-spacing: .02em;
  color: var(--azul-dt);
}
.ficha table {
  border-collapse: collapse;
  margin: 0 0 8px;
  min-width: min(420px, 100%);
}
.ficha td {
  border: 1px solid #333;
  padding: 3px 14px;
  text-align: center;
}
.ficha td:first-child { min-width: 170px; }
.ficha figure { margin: 0 0 20px; }
.ficha figure img { display: block; border: 1px solid #ddd; }

/* listados de categoría */
.productos {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
}
.productos a {
  display: block;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-left: 3px solid var(--verde);
  margin-bottom: 8px;
  color: var(--tinta);
  text-decoration: none;
}
.productos a:hover { background: #f5f7f5; color: var(--azul-dt); }

/* ── Pie ──────────────────────────────────────────────────── */
.pie {
  background: linear-gradient(var(--gris-pie-1), var(--gris-pie-2));
  border-top: 3px solid #cfcfcf;
  border-bottom: 4px solid var(--oscuro);
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
}
.pie p { margin: 0; }
.pie .sep { color: #888; }

/* ── Móvil y tableta ──────────────────────────────────────── */
@media (max-width: 900px) {
  .menu-boton { display: flex; }
  .menu-lista {
    display: none;
    flex-direction: column;
    border-top: 1px solid #383838;
  }
  .menu-abrir:checked ~ .menu-lista { display: flex; }
  .menu-lista > li > a { padding: 11px 16px; border-bottom: 0; }
  .menu-lista > li > a[aria-current],
  .menu-lista > li.activo > a { box-shadow: inset 3px 0 var(--verde); }
  .con-sub > a::after { display: none; }
  .sub {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: #232323;
  }
  .sub a { padding: 8px 16px 8px 34px; }
  .sub li:first-child a { border-top: 1px solid #383838; }

  .cabecera { padding: 6px 16px; gap: 12px; }
  .marca img { width: 76px; }
  .marca span { font-size: 30px; }
  .escudo { height: 72px; margin-right: 0; }
  .contenido { padding: 16px 16px 28px; }
}

@media (max-width: 560px) {
  .barra-sup { text-align: center; }
  .marca img { width: 60px; }
  .marca span { font-size: 22px; }
  .escudo { height: 56px; }
  .contenido h2 { font-size: 21px; }
  .ficha td { padding: 3px 8px; }
  .ficha td:first-child { min-width: 0; }
  .pie .sep { display: none; }
  .pie .dato { display: block; }
}