/* SEOtécnia — hoja de estilos única. Recreación del diseño original (2007-2011)
   con maquetación fluida. Paleta tomada de las capturas de archivo:
   antracita del logotipo, verde oliva corporativo y crema del cuerpo de texto. */

:root {
  --st-dark:      #2d2d2d;
  --st-dark-soft: #3b3b3b;
  --st-olive:     #a4b81f;
  --st-olive-dk:  #8b9c19;
  --st-cream:     #eef0d5;
  --st-cream-alt: #fdf9e4;
  --st-grey-bar:  #d2d2d2;
  --st-grey-txt:  #6d6d6d;
  --st-text:      #444;
  --st-rule:      #dcdcdc;
  --st-link:      #7d8f10;
  --st-max:       980px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--st-text);
  font: 400 14px/1.65 "Segoe UI", Tahoma, Verdana, Geneva, sans-serif;
}

.st-wrap {
  max-width: var(--st-max);
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ------------------------------------------------------------------ cabecera */
.st-head {
  display: grid;
  grid-template-columns: 260px 1fr 200px;
  align-items: stretch;
  gap: 0;
  margin-top: 22px;
}

.st-logo {
  background: var(--st-dark);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.st-logo svg { display: block; width: 100%; height: auto; max-width: 210px; }

.st-head__claim {
  background: #f4f4f0;
  display: flex;
  align-items: center;
  padding: 0 22px;
  color: var(--st-grey-txt);
  font-size: 13px;
  letter-spacing: .04em;
}

.st-head__mark {
  background: linear-gradient(140deg, var(--st-olive) 0%, var(--st-olive-dk) 55%, #6f7d12 100%);
  min-height: 74px;
}

/* -------------------------------------------------------------------- navegación */
.st-nav {
  background: var(--st-dark-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
}

.st-nav a {
  color: #d9d9d9;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 14px;
  display: block;
  border-bottom: 3px solid transparent;
}

.st-nav a:hover,
.st-nav a:focus { color: #fff; background: #262626; }

.st-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--st-olive);
}

/* ------------------------------------------------------------------------ hero */
.st-hero {
  background: var(--st-olive);
  color: #fff;
  padding: 30px 34px;
  text-align: right;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 300;
}

.st-hero strong { font-weight: 600; }

/* ---------------------------------------------------------------------- cuerpo */
.st-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  margin-top: 26px;
  align-items: start;
}

/* ------------------------------------------------------------------ barra lateral */
.st-aside__title {
  background: linear-gradient(#e4e4e4, var(--st-grey-bar));
  color: var(--st-grey-txt);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 16px;
  margin: 0;
  font-weight: 400;
}

.st-aside__title b { font-weight: 700; color: #4a4a4a; }

.st-services { list-style: none; margin: 0; padding: 20px 16px; border: 1px solid var(--st-rule); border-top: 0; }

.st-services li + li { margin-top: 20px; }

.st-services h3 {
  margin: 0 0 3px;
  font-size: 13px;
  letter-spacing: .09em;
  color: #2f2f2f;
  text-transform: uppercase;
}

.st-services p { margin: 0; font-size: 12.5px; color: #5e5e5e; }

.st-services h3 a { color: inherit; text-decoration: none; }
.st-services h3 a:hover { color: var(--st-link); }

/* Sólo el enlace "más información" va alineado a la derecha; un selector
   `.st-services a` genérico alcanzaba también al enlace del encabezado. */
.st-services__more {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--st-link);
  text-decoration: none;
  margin-top: 2px;
}

.st-services__more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------- contenido */
.st-main { min-width: 0; }

.st-panel {
  background: var(--st-cream);
  padding: 26px 30px;
}

.st-panel--contact {
  background: var(--st-cream-alt);
  text-align: center;
}

.st-panel h1,
.st-panel h2 { margin-top: 0; }

h1 {
  font-size: 22px;
  line-height: 1.3;
  color: #35400a;
  margin: 0 0 14px;
  font-weight: 600;
}

h2 {
  font-size: 16px;
  color: #4a5a10;
  margin: 22px 0 8px;
  font-weight: 600;
}

.st-panel p { margin: 0 0 12px; text-align: justify; font-size: 13.5px; }

.st-panel p:last-child { margin-bottom: 0; }

.st-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.st-brand svg { flex: 0 0 auto; }

.st-brand span { font-size: 13px; color: #5f6b28; line-height: 1.35; }

.st-brand b { display: block; font-size: 15px; color: #46520f; }

/* --------------------------------------------------------------------- contacto */
.st-contact { font-size: 14px; line-height: 1.9; }
.st-contact address { font-style: normal; margin: 0 0 16px; }
.st-contact a { color: var(--st-link); }
.st-contact dt { font-weight: 600; color: #55611a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 14px; }
.st-contact dd { margin: 0; }

/* ------------------------------------------------------------------------- pie */
.st-foot {
  margin-top: 34px;
  border-top: 1px solid var(--st-rule);
  padding-top: 16px;
  font-size: 12px;
  color: #7a7a7a;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  align-items: center;
}

.st-foot a { color: var(--st-link); text-decoration: none; }
.st-foot a:hover { text-decoration: underline; }
.st-foot__links { display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 820px) {
  .st-head { grid-template-columns: 1fr; }
  .st-head__claim { padding: 12px 20px; }
  .st-head__mark { min-height: 12px; }
  .st-body { grid-template-columns: 1fr; }
  .st-hero { text-align: left; font-size: 18px; padding: 24px; }
  .st-panel { padding: 22px 20px; }
  /* En columna estrecha el texto justificado abre "ríos" entre palabras. */
  .st-panel p { text-align: left; }
}

@media (max-width: 420px) {
  .st-nav a { padding: 10px; letter-spacing: .06em; }
}