/*
 * CSXXI – Ajustes UX/UI
 * Paleta tomada de la marca actual; solo se oscurecen los tonos que no
 * alcanzaban el contraste mínimo WCAG AA (4.5:1) para texto.
 */

:root {
  --csx-blue: #0077c8;        /* azul de marca, 4.8:1 con blanco (antes #0086e0, 3.7:1) */
  --csx-blue-dark: #0a5594;
  --csx-teal: #00798a;        /* etiquetas de categoría, 5.2:1 con blanco (antes #00bcd4, 2.1:1) */
  --csx-text: #1f2328;
  --csx-text-soft: #4b5563;   /* metadatos, 7.5:1 */
  --csx-border: #e5e7eb;
  --csx-bg: #f5f7fa;
  --csx-radius: 10px;
  --csx-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --csx-shadow-hover: 0 8px 24px rgba(16, 24, 40, .12);
  --csx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */

body {
  background-color: var(--csx-bg);
  color: var(--csx-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Foco visible para quien navega con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffb703;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Cabecera ---------- */

.elementor-element-e3fa853,
.elementor-element-6dc86b9 {
  background-color: var(--csx-blue) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.ekit-menu-nav-link {
  font-weight: 600 !important;
  letter-spacing: .01em;
  position: relative;
}

@media (min-width: 1025px) {
  .elementskit-navbar-nav > li > .ekit-menu-nav-link::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 22px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--csx-ease);
  }
  .elementskit-navbar-nav > li > .ekit-menu-nav-link:hover::after,
  .elementskit-navbar-nav > li.current-menu-item > .ekit-menu-nav-link::after {
    transform: scaleX(1);
  }
}

/* ---------- Etiquetas de categoría ---------- */

.cat-info-el,
.post-cat-info a {
  background-color: var(--csx-teal) !important;
  color: #fff !important;
  border-radius: 4px;
  letter-spacing: .04em;
  padding: 4px 8px;
}

.cat-info-el:hover,
.post-cat-info a:hover {
  background-color: var(--csx-blue-dark) !important;
}

/* ---------- Tarjetas de noticias ---------- */

.post-wrap,
.post-wrap-blog,
.projectitem {
  border-radius: var(--csx-radius);
  overflow: hidden;
  transition: box-shadow .25s var(--csx-ease), transform .25s var(--csx-ease);
}

.post-wrap-blog {
  background: #fff;
  box-shadow: var(--csx-shadow);
  border: 1px solid var(--csx-border);
}

.post-wrap-blog:hover,
.post-wrap:hover,
.projectitem:hover {
  box-shadow: var(--csx-shadow-hover);
}

.post-wrap-blog:hover {
  transform: translateY(-2px);
}

.post-wrap img.wp-post-image,
.post-wrap-blog img.wp-post-image,
.projectitem img.wp-post-image,
.slider-container img.wp-post-image {
  transition: transform .5s var(--csx-ease);
}

.post-wrap:hover img.wp-post-image,
.post-wrap-blog:hover img.wp-post-image,
.projectitem:hover img.wp-post-image,
.slider-container:hover img.wp-post-image {
  transform: scale(1.04);
}

/* Títulos de tarjetas: más jerarquía y mejor interlineado */
.post-title,
.post-title-link,
.slider-title {
  line-height: 1.3 !important;
  letter-spacing: -.005em;
}

.post-title a,
.post-title-link {
  color: var(--csx-text);
  transition: color .2s;
}

.post-title a:hover,
.post-title-link:hover {
  color: var(--csx-blue);
}

/* Texto sobre fotos del slider: degradado para que se lea siempre */
.slider-container .post-header-outer,
.post-wrap .post-header-outer {
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%);
}

.slider-container .post-title a,
.post-wrap .post-title a,
.slider-container .slider-title a {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Fechas y metadatos legibles */
.meta-info-date,
.post-meta-info,
.entry-meta,
.post-meta-info .date {
  color: var(--csx-text-soft) !important;
}

.slider-container .meta-info-date,
.slider-container .post-meta-info,
.post-wrap .post-meta-info,
.post-wrap .meta-info-date {
  color: rgba(255, 255, 255, .9) !important;
}

/* ---------- Títulos de sección ---------- */

.block-title,
.widget-title {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px !important;
  color: var(--csx-text) !important;
}

/* ---------- Nota individual: lectura cómoda ---------- */

.single-title .entry-title {
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em;
  color: #111 !important;
  margin-bottom: .4em;
}

.single-entry {
  font-size: 18px;
  line-height: 1.75;
  color: var(--csx-text);
}

/* Largo de línea ideal (~70 caracteres) */
.single-entry > p,
.single-entry > ul,
.single-entry > ol,
.single-entry > blockquote,
.single-entry > h2,
.single-entry > h3,
.single-entry > h4 {
  max-width: 70ch;
}

.single-entry p {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--csx-text) !important;
  margin-bottom: 1.25em;
}

.single-entry h2 {
  font-size: clamp(22px, 2.6vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 1.8em 0 .6em !important;
  letter-spacing: -.01em;
}

.single-entry h3 {
  font-size: clamp(19px, 2.2vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 1.5em 0 .5em !important;
}

.single-entry li {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: .4em;
}

/* Los enlaces del texto eran del mismo color que el párrafo: ahora se reconocen */
.single-entry a:not(.wp-block-button__link):not(.cat-info-el) {
  color: var(--csx-blue) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.single-entry a:not(.wp-block-button__link):not(.cat-info-el):hover {
  color: var(--csx-blue-dark) !important;
  text-decoration-thickness: 2px;
}

.single-entry blockquote {
  border-left: 4px solid var(--csx-blue);
  background: #f0f6fc;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.single-entry img {
  border-radius: 8px;
  height: auto;
}

.single-entry figcaption,
.single-entry .wp-caption-text {
  font-size: 14px;
  color: var(--csx-text-soft);
  margin-top: 6px;
}

/* Migas de pan */
.breadcrumbs,
.breadcrumbs a {
  color: var(--csx-text-soft) !important;
}

.breadcrumbs a:hover {
  color: var(--csx-blue) !important;
}

/* ---------- Barra lateral ---------- */

.widget li a,
.widget_recent_entries a {
  color: #374151 !important;
  text-decoration: none !important;
  transition: color .2s;
}

.widget li a:hover,
.widget_recent_entries a:hover {
  color: var(--csx-blue) !important;
}

/* La lista de categorías es muy larga: se muestra en dos columnas */
@media (min-width: 640px) {
  .widget_categories ul:not(.children) {
    column-count: 2;
    column-gap: 16px;
  }
  .widget_categories ul:not(.children) > li {
    break-inside: avoid;
  }
}

/* Buscador */
.search-submit {
  background-color: var(--csx-blue) !important;
  border-radius: 0 6px 6px 0;
  font-weight: 600;
}

.search-field {
  border-radius: 6px 0 0 6px;
}

/* ---------- Pie de página ---------- */

.elementor-element-8c5f37a {
  background-color: var(--csx-blue-dark) !important;
}

.elementor-element-27cd5f9 {
  background-color: #083f6e !important;
}

.elementor-location-footer a {
  transition: opacity .2s;
}

.elementor-location-footer a:hover {
  opacity: .8;
  text-decoration: underline;
}

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
  .single-entry,
  .single-entry p,
  .single-entry li {
    font-size: 17px !important;
  }

  /* Áreas táctiles de al menos 44px */
  .widget li a,
  .breadcrumbs a,
  .elementor-location-footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  .post-wrap-blog:hover {
    transform: none;
  }
}

/* Respetar a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}