/* SISTENET — Ajustes específicos de WordPress.
   El sistema de diseño sigue en estilo.css; aquí solo lo que añade el paso a WP. */

/* ─── Barra de administración (solo usuarios con sesión iniciada) ─── */
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .cabecera { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .cabecera { top: 0; }
}

/* ─── Contacto (antes en <style> dentro de contacto.html) ─── */
.contacto__hero {
  background: linear-gradient(160deg, var(--marino), var(--marino-2));
  color: var(--blanco);
  padding: calc(var(--s-9) + var(--header-h)) 0 var(--s-9);
  text-align: center;
}
.contacto__hero h1 { color: var(--blanco); }
.contacto__hero p { color: rgba(255,255,255,.8); font-size: var(--fs-lg); max-width: 640px; margin: 0 auto; }

.contacto__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-8);
  align-items: flex-start;
}
@media (max-width: 900px) { .contacto__grid { grid-template-columns: 1fr; } }
.contacto__intro { color: var(--gris); margin-bottom: var(--s-6); }
.contacto__intro .req { color: var(--alerta); }

.datos__panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.datos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.datos__lista li { display: flex; gap: var(--s-4); align-items: flex-start; }
.datos__lista .icono {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: rgba(30,95,191,.1); color: var(--corporativo);
  display: grid; place-items: center; flex-shrink: 0;
}
.datos__lista .icono svg { width: 20px; height: 20px; }
.datos__lista strong { display: block; color: var(--grafito); font-size: var(--fs-sm); }
.datos__lista a { color: var(--corporativo); font-weight: 500; }
.datos__texto { color: var(--gris); }
.datos__wa { margin-top: var(--s-5); display: block; width: 100%; }

/* Campo trampa anti-spam: fuera de pantalla, nunca display:none (algunos bots lo detectan). */
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__aviso-error {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--alerta);
  background: rgba(220, 38, 38, .06);
  color: var(--grafito);
}
.form__info-legal {
  font-size: var(--fs-xs);
  color: var(--gris);
  line-height: 1.5;
  margin: var(--s-4) 0 var(--s-5);
}

/* ─── Blog ─── */
/* Títulos largos en móvil: permite partir palabras como "mantenimiento". */
.articulo__hero h1, .blog__hero h1, .legal h1, .entrada h3 { overflow-wrap: break-word; hyphens: auto; }
.btn--sobre-cta { background: var(--blanco); color: var(--marino); }
.btn--sobre-cta:hover { background: var(--hueso); color: var(--marino); }
.entrada__img img { width: 100%; height: 100%; object-fit: cover; }

.pagination { margin-top: var(--s-8); }
.pagination .nav-links { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  color: var(--grafito);
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--corporativo); border-color: var(--corporativo); color: var(--blanco); }

/* ─── Contenido del editor de WordPress ─── */
.articulo img, .legal img { max-width: 100%; height: auto; }
/* Tablas anchas (comparativas, cookies): se desplazan dentro en móvil sin romper la página. */
.articulo table, .legal table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal td { overflow-wrap: anywhere; }
.legal .btn, .articulo .btn { white-space: normal; max-width: 100%; text-align: center; }
.alignleft { float: left; margin: 0 var(--s-5) var(--s-4) 0; }
.alignright { float: right; margin: 0 0 var(--s-4) var(--s-5); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: var(--fs-sm); color: var(--gris); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}