/* =========================================================
   TECNOFORENSE — hoja de estilos propia (independiente de Peritos Badajoz)
   Paleta: azul tecnológico + naranja de acento
   ========================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-v38-latin/fraunces-v38-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-v23-latin/ibm-plex-sans-v23-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-v23-latin/ibm-plex-sans-v23-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --blue: #1086d6;
  --blue-dark: #0b5f9c;
  --blue-deep: #072744;
  --orange: #ff7a1a;
  --orange-dark: #d8600a;
  --bg: #f4f8fb;
  --card: #ffffff;
  --line: #dbe6ef;
  --text: #14202b;
  --text-muted: #55697a;
  --text-on-blue: #eaf4ff;
  --text-on-blue-muted: #a9cbe6;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

img {
  /*max-width: 100%; */
  display: block;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Cabecera + menú fijos ----------
   Cabecera y navbar viven dentro del mismo contenedor "sticky", así que
   se quedan pegados arriba como un único bloque: el menú ya no se separa
   de la cabecera al hacer scroll ni se superpone al contenido de debajo,
   porque el navegador reserva su hueco en el flujo normal de la página. */
.tf-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.tf-header {
    background: var(--blue-deep);
  border-bottom: 3px solid var(--orange);
    padding: 16px 0;
  box-shadow: 0 2px 16px rgba(201, 106, 58, 0.3);
}
.tf-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Contacto en la cabecera (apilado) */
.tf-header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.tf-header-contact a {
  color: #ffffff; /* Ajusta el color según el fondo de tu cabecera */
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.2s ease;
}

.tf-header-contact a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* --- BARRA DE NAVEGACIÓN PRINCIPAL --- */
.tf-navbar {
  background-color: #082542; /* Azul marino corporativo */
  border-bottom: 2px solid #d96b27; /* Línea de acento naranja */
  position: relative;
}
.tf-navbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tf-nav-collapse {
  width: 100%;
}
/* Reset de listas nativas de Joomla */
.tf-navbar ul,
.tf-navbar ul.mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.tf-navbar li {
  position: relative;
  display: flex;
  align-items: center;
}
.tf-navbar a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Hover y enlace activo */
.tf-navbar a:hover,
.tf-navbar li.active > a,
.tf-navbar li:hover > a {
  background-color: #0e3a63; /* Azul ligeramente más claro */
  color: #ff9d54; /* Texto naranja en hover */
}
/* --- PRIMER NIVEL DE SUBMENÚ (Despliegue hacia abajo) --- */
/* --- SUBMENÚS DESPLEGABLES (Escritorio) --- */
.tf-navbar li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: #051b30; /* Azul muy oscuro para contraste */
  border-top: 3px solid #d96b27; /* Borde naranja superior */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  flex-direction: column;
  z-index: 1000;
}
/* Mostrar submenú al hacer hover */
.tf-navbar li:hover > ul {
  display: flex;
}
.tf-navbar li ul a {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
}
/* --- SEGUNDO NIVEL Y POSTERIORES (Despliegue lateral a la derecha) --- */
.tf-navbar li ul li ul {
  top: 0;
  left: 100%;
  border-top: none;
  border-left: 3px solid #d96b27;
}
/* --- OPCIÓN PARA DESPLEGAR HACIA LA IZQUIERDA ---
   Si un elemento del menú está muy a la derecha de la pantalla,
   puedes añadirle la clase 'drop-left' desde el panel de Joomla */
.tf-navbar li.drop-left > ul,
.tf-navbar li ul li.drop-left > ul {
  left: auto;
  right: 100%;
}
/* Estilo para el botón de la flecha */
.tf-navbar .mod-menu__toggle-sub {
  display: none !important;
}
/* --- BOTÓN HAMBURGUESA (Móvil) --- */
.tf-menu-toggle {
  display: none; /* Oculto en escritorio */
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 12px 0;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}
.tf-hamburger-icon {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 2px;
  background-color: #ffffff;
  transition: background-color 0.2s ease;
}

.tf-hamburger-icon::before,
.tf-hamburger-icon::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: #ffffff;
  left: 0;
  transition: transform 0.3s ease, top 0.3s ease;
}

.tf-hamburger-icon::before { top: -6px; }
.tf-hamburger-icon::after { top: 6px; }

/* 1. Transformar el botón a formato cuadrado con fondo rojo */
.tf-menu-toggle.is-active {
  background-color: #dc3545; /* Rojo de cierre/alerta */
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 4px; /* Forma cuadrada levemente suavizada */
  gap: 0;
}
/* Animación a 'X' del botón al abrir */
.tf-hamburger-icon {
}
/* 2. Ocultar la palabra "Menú" al abrir */
.tf-menu-toggle.is-active .tf-menu-label {
  display: none;
}
.tf-menu-toggle.is-active .tf-hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.tf-menu-toggle.is-active .tf-hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}
/* 3. Centrar las líneas de la 'X' dentro del cuadrado rojo */
.tf-menu-toggle.is-active .tf-hamburger-icon {
  background-color: transparent;
  margin: 0;
}

.tf-menu-toggle.is-active .tf-hamburger-icon::before,
.tf-menu-toggle.is-active .tf-hamburger-icon::after {
  background-color: #ffffff; /* Asegura contraste blanco sobre el rojo */
}


/* --- ADAPTACIÓN RESPONSIVE (Móviles <= 768px) --- */
@media (max-width: 768px) {
  .tf-menu-toggle {
    display: flex; /* Mostrar botón hamburguesa en móviles */
  }
  .tf-nav-collapse {
    display: none; /* Ocultar el menú en móvil por defecto */
    width: 100%;
  }
  .tf-nav-collapse.is-active {
    display: block; /* Desplegar al pulsar el botón */
  }
  .tf-navbar ul,
  .tf-navbar ul.mod-menu {
    flex-direction: column;
    padding: 8px 0;
  }
  .tf-navbar a {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Submenús en versión móvil */
  .tf-navbar li ul {
    position: static;
    border-top: none;
    box-shadow: none;
    background-color: #031221; /* Fondo aún más oscuro para distinguir niveles */
    padding-left: 15px;
  }
  .tf-navbar li:hover > ul {
    display: flex;
  }
}


.tf-contact-label {
  font-weight: 600;
  margin-right: 4px;
  opacity: 0.8;
}
.tf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.tf-brand img { height: 48px; width: auto; }
.tf-brand span.accent { color: var(--orange); }
.tf-nav a {
  display: flex;
  align-items: center;
}
.tf-nav img {
  height: 28px;
  width: auto;
  display: block;
  vertical-align: middle;
}
.tf-nav a:hover { color: #fff; }

/* ---------- Hero ---------- */
.tf-hero {
  background: linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-dark) 55%, var(--blue) 100%);
  color: var(--text-on-blue);
  padding: 10px 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tf-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,0.35) 0%, rgba(255,122,26,0) 70%);
}
.tf-hero .eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  max-width: 52ch;
}
.tf-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 64px);
  margin: 16px 0 18px;
}
.tf-hero p {
  margin: 0 auto;
  color: var(--text-on-blue-muted);
  font-size: 17px;
}
/* ---------- Barra de contacto + explicación ---------- */
.tf-intro-bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 1px 0;
}
.tf-intro-bar .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.tf-intro-bar p {
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0;
  font-size: 15px;
}
.tf-intro-bar .tf-contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  justify-items: center;
  margin: 0 auto;
}
.tf-intro-bar .tf-contact-info a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--blue-deep);
  font-weight: 700;
  font-size: 28px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
  width: 100%;
}
.tf-intro-bar .tf-contact-info a[href^="mailto"] {
  font-size: 22px;
}
.tf-intro-bar .tf-contact-info a[href^="tel"] {
  font-size: 38px;
}
.tf-intro-bar .tf-contact-info a:first-child {
  padding-top: 0;
  border-top: none;
}
.tf-intro-bar .tf-contact-info a span.label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange-dark);
  font-weight: 600;
  margin-bottom: 6px;
}
.tf-nav img {
  height: 48px;
  width: auto;
  display: block;
}
/* ---------- Grid de especialidades ---------- */
.tf-specialties {
  padding: 72px 0 48px;
}
.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}
.section-head .eyebrow {
  color: var(--orange-dark);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
  margin: 10px 0 12px;
  color: var(--blue-deep);
}
.section-head p {
  color: var(--text-muted);
}
.tf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
/* ---------- Bloque "Ver más especialidades" ---------- */
/* El contenido permanece en el HTML (buscadores lo indexan);
   solo se oculta visualmente hasta que el usuario pulsa el botón. */
.tf-grid-extra {
  display: none;
  margin-top: 24px;
}
.tf-grid-extra.tf-grid-extra--visible {
  display: grid;
}
.tf-ver-mas-wrap {
  text-align: center;
  margin-top: 40px;
}
.tf-btn-outline {
  background: transparent;
  color: var(--blue-deep);
  border: 2px solid var(--blue);
}
.tf-btn-outline:hover {
  background: var(--blue);
  color: #fff;
}
.tf-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(16, 134, 214, 0.14);
  border-color: var(--blue);
}
.tf-card .tf-card-media {
  height: 160px;
  background: var(--blue-deep);
  position: relative;
  overflow: hidden;
}
.tf-card .tf-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-card .tf-card-num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}
.tf-card .tf-card-body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tf-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--blue-deep);
}
.tf-card p {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 0 16px;
  flex: 1;
}
.tf-card a.tf-link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.tf-card a.tf-link:hover {
   color: var(--orange);
}

/* ---------- Bloque "Módulo con últimos artículos del BLOG (o de la categoría que sea..." ---------- */
/* Cuadrícula flexible: tantas columnas de ~260px como quepan */
.ib-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin: 24px 0;
}
.ib-article-card {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(7, 39, 68, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ib-article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(16, 134, 214, 0.16);
  border-color: var(--blue);
}
/* Imagen en grande arriba, con degradado para que la categoría/fecha resalten */
.ib-card-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--blue-deep);
}
.ib-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 39, 68, 0.55) 0%, rgba(7, 39, 68, 0) 45%);
  pointer-events: none;
}
.ib-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ib-article-card:hover .ib-card-media img {
  transform: scale(1.06);
}
/* Chip de categoría, superpuesto sobre la imagen */
.ib-card-category {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--orange);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
/* Cuerpo de la tarjeta */
.ib-card-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ib-card-meta {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.ib-card-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.35;
}
.ib-card-title a {
  color: var(--blue-deep);
  text-decoration: none;
  font-weight: 600;
}
.ib-card-title a:hover {
  color: var(--orange-dark);
}
.ib-card-excerpt {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
  /* recorta el extracto a 3 líneas para que todas las tarjetas midan igual */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ib-card-readmore {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.ib-card-readmore:hover {
  color: var(--orange);
}
.ib-card-readmore .fa-arrow-right {
  font-size: 11px;
  transition: transform .18s ease;
}
.ib-article-card:hover .ib-card-readmore .fa-arrow-right {
  transform: translateX(3px);
}
/* ---------- Módulo núcleo "Artículos - Categoría" en la página del Blog ---------- */
/* Clases reales que genera mod_articles_category (formato lista con <ul>/<li>) */
ul.mod-articles-category {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
li.mod-articles-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
li.mod-articles-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(16, 134, 214, 0.14);
  border-color: var(--blue);
}
.mod-articles-item-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* La imagen sale antes que el título en pantalla aunque en el HTML
   venga después (el título es el h4, la imagen es el figure) */
.mod-articles-item-content figure.mod-articles-image {
  order: -1;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-deep);
}
.mod-articles-item-content figure.mod-articles-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
li.mod-articles-item:hover .mod-articles-item-content figure.mod-articles-image img {
  transform: scale(1.05);
}
.mod-articles-item-content h4.mod-articles-title {
  margin: 0;
  padding: 18px 20px 22px;
  font-size: 1.05rem;
  line-height: 1.35;
}
.mod-articles-item-content h4.mod-articles-title a.mod-articles-link {
  color: var(--blue-deep);
  text-decoration: none;
  font-weight: 600;
}
.mod-articles-item-content h4.mod-articles-title a.mod-articles-link:hover {
  color: var(--orange-dark);
}
@media (max-width: 576px) {
  ul.mod-articles-category {
    grid-template-columns: 1fr;
  }
}

/* Placeholder cuando un artículo no tiene imagen destacada */
.ib-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-dark) 100%);
}
/* Adaptación responsive */
@media (max-width: 992px) {
  .ib-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .ib-articles-grid {
    grid-template-columns: 1fr;
  }
}



@media (prefers-reduced-motion: reduce) {
  .tf-card { transition: none; }
}
/* ---------- Bloque "Servicios relacionados" ---------- */
.tf-related-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  text-align: center;
  color: var(--blue-deep);
  margin: 0 0 24px;
}
.tf-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.tf-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--blue-deep);
  font-size: 14.5px;
  font-weight: 600;
}
.tf-related-item:hover {
  border-color: var(--blue);
}
.tf-related-arrow {
  color: var(--orange-dark);
  font-weight: 700;
  flex-shrink: 0;
}
.tf-related-block {
  background: linear-gradient(135deg, rgba(16, 134, 214, 0.06) 0%, rgba(16, 134, 214, 0.02) 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 14px;
}
.tf-cta-final {
  text-align: center;
  margin-top: 48px;
  padding: 40px 32px;
  background: var(--card);
  border: 2px solid var(--orange);
  border-radius: 16px;
}
.tf-cta-final p {
  color: var(--orange-dark);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 10px;
}
.tf-cta-final h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--blue-deep);
  margin: 0 0 28px;
}

/* ---------- Sedes ---------- */

.tf-locations{
    background:var(--blue-deep);
    padding:70px 0;
}

.tf-locations .section-head{
    text-align:center;
}

.tf-locations .section-head h2{
    color:#fff;
    font-family:var(--font-display);
    font-size:clamp(28px,4vw,38px);
}

.tf-locations .section-head .eyebrow{
    color:var(--orange);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:13px;
    font-weight:600;
}

.tf-locations .section-head p{
    color:var(--text-on-blue-muted);
}

.tf-location-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}


.tf-location-card{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:16px;
    text-decoration:none;
    height:220px;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    width: 220px;
    flex: 0 1 220px;
}

.tf-location-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.tf-location-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.15));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    transition:.35s;
}

.tf-location-overlay h3{
    margin:0;
    color:#fff;
    font-family:var(--font-display);
    font-size:26px;
}

.tf-location-overlay span{
    margin-top:8px;
    color:#fff;
    opacity:.85;
    font-size:14px;
    transform:translateY(12px);
    transition:.35s;
}

.tf-location-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.tf-location-card:hover img{
    transform:scale(1.08);
}

.tf-location-card:hover .tf-location-overlay{
    background:linear-gradient(to top,
        rgba(7,39,68,.92),
        rgba(7,39,68,.25));
}

.tf-location-card:hover span{
    transform:translateY(0);
    color:var(--orange);
}

/* En móvil, las sedes se apilan en una sola columna a ancho completo
   para que el nombre de cada sede se lea bien */
@media (max-width: 640px) {
  .tf-location-grid {
    flex-direction: column;
    align-items: center;
  }
  .tf-location-card {
    width: 100%;
    max-width: 320px;
    flex: 0 1 auto;
  }
}
/* ---------- Formulario de contacto ---------- */
.tf-contact-section {
  padding: 80px 0 96px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.tf-form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.tf-field { margin-bottom: 20px; }
.tf-field label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.tf-field input,
.tf-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
}
.tf-field input:focus,
.tf-field textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.tf-field textarea { min-height: 130px; resize: vertical; }

.tf-captcha-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.tf-captcha-challenge {
  background: var(--bg);
  border: 1px dashed var(--line);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-deep);
  white-space: nowrap;
}
.tf-captcha-row .tf-field { flex: 1; min-width: 160px; margin-bottom: 0; }

.tf-hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tf-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.tf-btn:hover { background: var(--orange-dark); }

.tf-form-msg { margin-top: 16px; font-size: 14px; }
.tf-form-msg.ok { color: #2f6f4f; }
.tf-form-msg.err { color: #b23b2c; }
/* ---------- Footer ---------- */
.tf-footer {
  background: #061a2c;
  color: var(--text-on-blue-muted);
  padding: 28px 0;
  font-size: 13px;
}
.tf-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.tf-footer a { color: var(--orange); text-decoration: none; font-weight: 600; }
.tf-footer a:hover { color: #fff; }

/* ============================================================
   ARTÍCULO COMPLETO (vista de un solo artículo del blog)
   ============================================================ */

/* Contenedor general del artículo: centra el contenido y le da
   un ancho de lectura cómodo, en vez de ocupar todo el .wrap. */
.item-page {
  max-width: 780px;
  margin: 0 auto;
}

/* ---------- Imagen de cabecera ("Imagen para mostrar el artículo
   completo"). Joomla la añade automáticamente como el primer
   elemento del artículo, con su tamaño original (a veces enorme).
   Aquí se limita su altura y se le da un tratamiento de tarjeta. ---------- */
.item-page > p:first-child:has(> img:only-child) {
  margin: 0 0 32px;
}
.item-page > p:first-child:has(> img:only-child) img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(7, 39, 68, 0.18);
}
/* Red de seguridad: cualquier imagen del artículo, la tenga
   Joomla donde la tenga, nunca debe desbordar el contenedor
   aunque el navegador no soporte :has(). */
.item-page img {
  max-width: 100%;
  height: auto;
}
/* Por si Joomla usa aquí la misma <figure class="item-image"> que en
   el listado, en vez del <p><img></p> visto en el feed RSS. */
.item-page .item-image {
  float: none;
  margin: 0 0 32px;
}
.item-page .item-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(7, 39, 68, 0.18);
}

/* ---------- Cabecera del artículo: título, fecha, categoría ---------- */
.item-page .page-header,
.item-page h1.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--blue-deep);
  margin: 0 0 8px;
  line-height: 1.25;
}
.item-page .article-info,
.item-page dl.article-info {
  color: var(--text-muted);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0 0 24px;
}
.item-page .article-info a {
  color: var(--orange-dark);
  text-decoration: none;
}

/* ============================================================
   LISTADO "BLOG" (vista nativa de Joomla: categoría en modo blog,
   la que muestra todos los artículos publicados uno tras otro)
   ============================================================ */

/* Ancho de lectura y separación entre artículos, a juego con la
   vista de un solo artículo. */
.com-content-category-blog__items {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Cada artículo es ahora una tarjeta propia, con fondo, borde y sombra:
   así se ve claramente dónde acaba uno y empieza el siguiente. */
.com-content-category-blog__item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 6px 20px rgba(7, 39, 68, 0.06);
}
.com-content-category-blog__item:first-child { padding-top: 36px; }

/* Solo se ven los 4 primeros artículos; el resto los revela el botón
   "Ver más artículos" de 4 en 4. El contenido entero sigue en el HTML
   (bueno para SEO), solo se oculta visualmente. */
.com-content-category-blog__item.tf-blog-item-oculto {
  display: none;
}
.tf-blog-vermas-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 40px;
}
.tf-blog-vermas-wrap.tf-oculto {
  display: none;
}

/* Título de cada artículo: mucho más presente, con una marca de color
   naranja delante a modo de acento y mayor tamaño. */
.com-content-category-blog__item .page-header {
  margin: 0 0 16px;
}
.com-content-category-blog__item .page-header h2 {
  margin: 0;
  padding-left: 18px;
  border-left: 5px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.28;
}
.com-content-category-blog__item .page-header h2 a {
  color: var(--blue-deep);
  text-decoration: none;
}
.com-content-category-blog__item .page-header h2 a:hover {
  color: var(--orange-dark);
}

/* Metadatos (autor, categoría, fecha, visitas): en vez de la lista
   "Detalles" en bruto de Joomla, se muestran como una fila de
   etiquetas discretas separadas por un punto. */
.com-content-category-blog__item dl.article-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 22px;
  padding: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
/* La etiqueta "Detalles" es puramente visual y redundante: se oculta
   a la vista mantenimiento accesible para lectores de pantalla. */
.com-content-category-blog__item dl.article-info dt.article-info-term {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.com-content-category-blog__item dl.article-info dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.com-content-category-blog__item dl.article-info dd:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--line);
  font-weight: 700;
}
.com-content-category-blog__item dl.article-info a {
  color: var(--orange-dark);
  text-decoration: none;
}
.com-content-category-blog__item dl.article-info a:hover { color: var(--orange); }
/* Los iconos propios de Joomla necesitan una fuente de iconos que esta
   plantilla no carga, así que se ocultan para no dejar huecos vacíos. */
.com-content-category-blog__item dl.article-info [class*="icon-"] {
  display: none;
}

/* Imagen destacada en el listado ("Imagen de introducción"). Joomla la
   envuelve en <figure class="left item-image"> pensada para flotar a la
   izquierda a tamaño original (a veces enorme). Aquí se convierte en una
   imagen de cabecera a todo el ancho, recortada y con estilo de tarjeta,
   igual que en la vista de un solo artículo. */
.com-content-category-blog__item .item-image {
  float: none;
  margin: 0 0 22px;
}
.com-content-category-blog__item .item-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(7, 39, 68, 0.16);
}
.com-content-category-blog__item .item-content img {
  max-width: 100%;
  height: auto;
}

/* Enlace "Leer más", por si algún día se muestra solo la introducción */
.com-content-category-blog__item .readmore a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
}
.com-content-category-blog__item .readmore a:hover { color: var(--orange); }

/* ---------- Cuerpo del texto: tipografía cuidada, colorida y
   estructurada para que cada artículo nuevo salga bien "de serie".
   Se aplica tanto si el texto está envuelto en <div class="tf-article-body">
   (vista de un solo artículo) como al cuerpo del listado "Blog"
   (.item-content, elementos directos para no tocar el título/metadatos). ---------- */
.tf-article-body,
.item-content {
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.8;
}
.tf-article-body > *:first-child { margin-top: 0; }

.tf-article-body p,
.item-content > p {
  margin: 0 0 22px;
}

.tf-article-body h2,
.item-content > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 3vw, 27px);
  color: var(--blue-deep);
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.tf-article-body h3,
.item-content > h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--blue-dark);
  margin: 32px 0 14px;
}

.tf-article-body strong,
.item-content strong {
  color: var(--blue-deep);
  font-weight: 600;
}
.tf-article-body em,
.item-content em { color: var(--text-muted); }

.tf-article-body a,
.item-content > p a,
.item-content > ul a,
.item-content > ol a {
  color: var(--orange-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 1px;
}
.tf-article-body a:hover,
.item-content a:hover { color: var(--orange); }

/* Listas con marcadores en el color de acento en vez del punto plano */
.tf-article-body ul,
.tf-article-body ol,
.item-content > ul,
.item-content > ol {
  margin: 0 0 24px;
  padding-left: 4px;
  list-style: none;
}
.tf-article-body ul li,
.tf-article-body ol li,
.item-content > ul li,
.item-content > ol li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}
.tf-article-body ul li::before,
.item-content > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.tf-article-body ol,
.item-content > ol {
  counter-reset: tf-ol;
}
.tf-article-body ol li::before,
.item-content > ol li::before {
  counter-increment: tf-ol;
  content: counter(tf-ol);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cita destacada: franja de color a la izquierda sobre fondo suave */
.tf-article-body blockquote,
.item-content > blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(16, 134, 214, 0.07) 0%, rgba(16, 134, 214, 0.02) 100%);
  border-left: 4px solid var(--orange);
  border-radius: 0 12px 12px 0;
  color: var(--blue-deep);
  font-style: italic;
}
.tf-article-body blockquote p:last-child,
.item-content > blockquote p:last-child { margin-bottom: 0; }

/* Código en línea, para términos técnicos (dominios, cabeceras, etc.) */
.tf-article-body code,
.item-content code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.9em;
  color: var(--blue-dark);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* Imágenes que aparezcan sueltas dentro del propio cuerpo del texto */
.tf-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 12px auto 28px;
  box-shadow: 0 8px 20px rgba(7, 39, 68, 0.1);
}

@media (max-width: 640px) {
  .tf-article-body,
  .item-content { font-size: 15.5px; }
  .com-content-category-blog__item { padding: 26px 22px; }
}

/* ---------- Navegación "Artículo anterior / Artículo siguiente" ----------
   Joomla genera estos enlaces sin ningún estilo propio (por eso salían
   pegados como texto plano). Los convertimos en dos botones a juego con
   la paleta de la web, uno a cada lado. */
.pager,
.item-page .pager {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  list-style: none;
}
/* Red de seguridad por si Joomla no envuelve los enlaces en .pager:
   agrupa igualmente cualquier contenedor que tenga directamente
   los dos enlaces rel="prev" / rel="next" como hijos. */
*:has(> a[rel="prev"]):has(> a[rel="next"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.pager .page-previous,
.pager .page-next,
.pager a,
a[rel="prev"],
a[rel="next"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.pager a:hover,
a[rel="prev"]:hover,
a[rel="next"]:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
  transform: translateY(-2px);
}
/* Flechitas de dirección en el color de acento */
a[rel="prev"]::before {
  content: "←";
  font-weight: 700;
  color: var(--orange);
  flex-shrink: 0;
}
a[rel="next"]::after {
  content: "→";
  font-weight: 700;
  color: var(--orange);
  flex-shrink: 0;
}
a[rel="prev"]:hover::before,
a[rel="next"]:hover::after { color: #fff; }

/* El enlace "siguiente" se alinea a la derecha aunque no exista el "anterior" */
.pager .page-next { margin-left: auto; }
.pager .page-next a { flex-direction: row-reverse; text-align: right; }

@media (max-width: 560px) {
  .pager,
  *:has(> a[rel="prev"]):has(> a[rel="next"]) {
    flex-direction: column;
  }
  .pager .page-next { margin-left: 0; }
  .pager a,
  a[rel="prev"],
  a[rel="next"] {
    width: 100%;
    justify-content: center;
  }
}