/*
Theme Name: InnovaSound Madrid
Theme URI: https://amadeo.com.es/innova/
Description: Plantilla a medida para InnovaSound Madrid. Child theme de OceanWP con paleta de marca InnovaSound, mejoras de responsive, identidad visual diferenciada y SEO local de Madrid. Creada para eliminar la duplicidad con la web de Barcelona.
Author: InnovaSound
Template: oceanwp
Version: 1.2.0
Text Domain: innovasound-madrid
*/

/* ============================================================
   1. PALETA DE MARCA INNOVASOUND (tokens)
   ============================================================ */
:root {
  --is-primary:      #861a22;   /* granate InnovaSound */
  --is-primary-dark: #5f1218;
  --is-primary-2:    #a11f28;
  --is-accent:       #cd0614;   /* rojo vivo */
  --is-accent-dark:  #a20510;
  --is-neutral:      #cfc9c0;   /* beige */
  --is-neutral-soft: #f5f3ef;
  --is-ink:          #141414;
  --is-ink-soft:     #333333;
  --is-white:        #ffffff;
  --is-grad: linear-gradient(135deg, var(--is-accent) 0%, var(--is-primary) 55%, var(--is-primary-dark) 100%);
  --is-radius: 12px;
  --is-shadow: 0 10px 30px rgba(134,26,34,.14);
  --is-shadow-soft: 0 6px 18px rgba(20,20,20,.08);
}

/* ============================================================
   2. TIPOGRAFÍA FLUIDA (mejor lectura en todos los dispositivos)
   ============================================================ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, .elementor-heading-title { line-height: 1.1; }
h2 { line-height: 1.15; }

/* Escalado fluido solo donde no rompe Elementor (encabezados del tema) */
.entry-title, .page-header .page-header-title {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
}
.single .entry-content, .page .entry-content { font-size: clamp(1rem, 1.05vw + .8rem, 1.075rem); }

/* ============================================================
   3. ENLACES Y ESTADOS DE FOCO (accesibilidad + marca)
   ============================================================ */
a { color: var(--is-primary); }
a:hover, a:focus { color: var(--is-accent); }

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--is-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--is-primary); color: #fff; }

/* ============================================================
   4. BOTONES (marca coherente OceanWP + Elementor)
   ============================================================ */
.theme-button, button.button, input[type="submit"],
.wp-block-button__link {
  background: var(--is-grad);
  border: none;
  border-radius: var(--is-radius);
  font-weight: 700;
  letter-spacing: .3px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.theme-button:hover, button.button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--is-shadow);
  filter: saturate(1.05);
  color: #fff;
}

/* Elementor: solo micro-interacción, respetamos colores del editor */
.elementor-button { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.elementor-button:hover { transform: translateY(-2px); box-shadow: var(--is-shadow); filter: saturate(1.05); }

/* ============================================================
   5. IDENTIDAD VISUAL DIFERENCIADA (distinta de la web BCN)
   ============================================================ */
/* Acento superior de marca en la barra superior */
#top-bar-wrap { border-top: 3px solid var(--is-accent); }

/* Realce de marca bajo los H2 de secciones del tema */
.widget-title:after, .related-post-title:after {
  content: ""; display: block; width: 54px; height: 3px;
  margin-top: 10px; background: var(--is-grad); border-radius: 3px;
}

/* Tarjetas de producto (miniaturas Elementor) con elevación al pasar el ratón */
.elementor-widget-image img { transition: transform .25s ease, box-shadow .25s ease; border-radius: 10px; }
.elementor-widget-image a:hover img { transform: translateY(-4px) scale(1.01); box-shadow: var(--is-shadow); }

/* ============================================================
   6. CABECERA / NAVEGACIÓN
   ============================================================ */
#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a {
  color: var(--is-accent);
}
#site-navigation-wrap .dropdown-menu ul { border-top: 3px solid var(--is-primary); }

/* Logo: corregir tamaño (evita cabecera gigante / espacio en blanco) y
   hacerlo visible sobre la cabecera clara (el PNG original es blanco). */
#site-logo #site-logo-inner a img,
#site-header .custom-logo,
.custom-logo-link img.custom-logo {
  width: auto !important;
  height: auto !important;
  max-height: 50px !important;
  max-width: 200px !important;
  filter: brightness(0);            /* logo blanco -> negro de marca, legible sobre fondo claro */
}
@media (max-width: 768px) {
  #site-logo #site-logo-inner a img,
  #site-header .custom-logo { max-height: 42px !important; }
}

/* ============================================================
   7. FORMULARIOS (Ninja Forms / contacto) coherentes
   ============================================================ */
.nf-form-content input:not([type=button]):focus,
.nf-form-content textarea:focus {
  border-color: var(--is-primary) !important;
  box-shadow: 0 0 0 3px rgba(134,26,34,.15) !important;
}
.nf-form-content .submit-wrap input[type="button"] {
  background: var(--is-grad) !important; border: 0 !important;
  border-radius: var(--is-radius) !important; font-weight: 700 !important;
}

/* ============================================================
   8. PIE DE PÁGINA
   ============================================================ */
#footer-widgets a:hover { color: var(--is-accent); }
.footer-box { border-radius: var(--is-radius); }

/* ============================================================
   9. RESPONSIVE / MÓVIL  (se ve bien en todos los dispositivos)
   ============================================================ */

/* Imágenes y vídeos nunca desbordan */
img, video, iframe { max-width: 100%; height: auto; }

/* Objetivos táctiles cómodos en móvil */
@media (max-width: 768px) {
  .elementor-button, .theme-button, button.button,
  #site-navigation-wrap .dropdown-menu a,
  .oceanwp-mobile-menu-icon a {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Encabezados grandes de Elementor: evitar cortes en pantallas pequeñas */
  .elementor-heading-title { word-break: break-word; hyphens: auto; }

  /* Menú móvil OceanWP más legible y con marca */
  .dropdown-mobile #mobile-menu a { font-size: 1.02rem; padding: 14px 18px; }
  #mobile-menu .current-menu-item > a { color: var(--is-accent); font-weight: 700; }

  /* Reducir espaciados enormes de secciones en móvil */
  .elementor-section.elementor-section-boxed > .elementor-container { padding-left: 6px; padding-right: 6px; }

  /* Grupos de botones de categoría: apilar y ocupar ancho cómodo */
  .elementor-widget-button .elementor-button { width: 100%; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .elementor-heading-title { line-height: 1.12; }
}

/* Evitar scroll horizontal accidental */
html, body { overflow-x: hidden; }

/* ============================================================
   10. BOTÓN WHATSAPP (joinchat) con marca
   ============================================================ */
.joinchat__button { box-shadow: var(--is-shadow) !important; }

/* ============================================================
   11. UTILIDADES DE MARCA (usables desde Elementor con clases)
   ============================================================ */
.is-badge {
  display: inline-block; background: var(--is-grad); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .8rem;
  letter-spacing: .5px; text-transform: uppercase;
}
.is-card {
  background: #fff; border-radius: var(--is-radius);
  box-shadow: var(--is-shadow-soft); padding: 22px;
  border: 1px solid rgba(207,201,192,.5);
}

/* ============================================================
   12. SECCIÓN DE CONTENIDO LOCAL (GEO) — portada
   ============================================================ */
.is-local-seo {
  background: linear-gradient(180deg, var(--is-neutral-soft) 0%, #fff 100%);
  padding: clamp(38px, 6vw, 72px) 16px;
  border-top: 1px solid rgba(207,201,192,.6);
}
.is-local-inner { max-width: 1160px; margin: 0 auto; }
.is-local-seo h2 {
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  color: var(--is-primary-dark);
  margin: 0 0 14px;
}
.is-local-seo h2:after {
  content: ""; display: block; width: 64px; height: 4px; margin: 14px auto 0;
  background: var(--is-grad); border-radius: 4px;
}
.is-local-lead {
  text-align: center; max-width: 820px; margin: 0 auto clamp(26px, 4vw, 40px);
  color: var(--is-ink-soft); font-size: 1.05rem; line-height: 1.6;
}
.is-local-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.is-local-card h3 {
  font-size: 1.12rem; color: var(--is-primary); margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 2px solid rgba(134,26,34,.12);
}
.is-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.is-chips li {
  background: var(--is-neutral-soft); color: var(--is-ink-soft);
  border: 1px solid rgba(207,201,192,.7);
  padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600;
}
.is-chips li:hover { background: var(--is-primary); color: #fff; border-color: var(--is-primary); }
.is-local-list { margin: 0; padding-left: 18px; color: var(--is-ink-soft); line-height: 1.85; }
.is-local-list li::marker { color: var(--is-accent); }
.is-local-cta {
  text-align: center; margin: clamp(26px, 4vw, 38px) auto 0; font-size: 1.08rem;
  color: var(--is-ink);
}
.is-local-cta a { color: var(--is-primary); text-decoration: none; }
.is-local-cta a:hover { color: var(--is-accent); }

@media (max-width: 960px) { .is-local-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .is-local-grid { grid-template-columns: 1fr; } }

/* ============================================================
   13. TESTIMONIOS (prueba social) — portada
   ============================================================ */
.is-testimonials { padding: clamp(38px, 6vw, 68px) 16px 8px; background: #fff; }
.is-testimonials h2 {
  text-align: center; font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  color: var(--is-primary-dark); margin: 0 0 clamp(26px, 4vw, 40px);
}
.is-testimonials h2:after {
  content: ""; display: block; width: 64px; height: 4px; margin: 14px auto 0;
  background: var(--is-grad); border-radius: 4px;
}
.is-testi-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.is-testi {
  position: relative; margin: 0; padding: 40px 26px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.is-testi .is-quote {
  position: absolute; top: 6px; left: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem; line-height: 1; color: var(--is-accent); opacity: .28;
}
.is-testi blockquote {
  margin: 0; padding: 0; border: 0;
  font-size: 1.02rem; line-height: 1.7; color: var(--is-ink-soft); font-style: italic;
}
.is-testi figcaption {
  font-weight: 800; color: var(--is-primary); font-style: normal;
  letter-spacing: .3px; margin-top: auto;
}
.is-testi-note {
  text-align: center; color: #8a8378; font-size: .9rem; margin: 22px 0 0;
}
.is-testi-cta { text-align: center; margin: 14px 0 0; }
.is-testi-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; font-weight: 800; text-decoration: none;
  color: var(--is-primary-dark); background: var(--is-neutral-soft);
  border: 1px solid rgba(207,201,192,.8); transition: all .16s ease;
}
.is-testi-cta a:hover { background: var(--is-grad); color: #fff; border-color: transparent; transform: translateY(-2px); }
@media (max-width: 620px) { .is-testi-grid { grid-template-columns: 1fr; } }

/* ============================================================
   14. FORMULARIO DE CONTACTO (página Contacto)
   ============================================================ */
.is-contact-form {
  padding: clamp(32px, 5vw, 60px) 16px;
  background: linear-gradient(180deg, #fff 0%, var(--is-neutral-soft) 100%);
}
.is-contact-form h2 {
  text-align: center; font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  color: var(--is-primary-dark); margin: 0 0 12px;
}
.is-contact-form h2:after {
  content: ""; display: block; width: 64px; height: 4px; margin: 14px auto 0;
  background: var(--is-grad); border-radius: 4px;
}
.is-contact-sub {
  text-align: center; max-width: 660px; margin: 0 auto clamp(24px, 4vw, 34px);
  color: var(--is-ink-soft); line-height: 1.6;
}
.is-contact-sub a { color: var(--is-primary); text-decoration: none; }
.is-contact-sub a:hover { color: var(--is-accent); }
.is-contact-formwrap {
  max-width: 720px; margin: 0 auto; background: #fff;
  padding: clamp(20px, 4vw, 34px); border-radius: var(--is-radius);
  box-shadow: var(--is-shadow); border: 1px solid rgba(207,201,192,.5);
}
/* Coherencia de marca en los campos del formulario dentro del wrap */
.is-contact-formwrap .nf-form-content input:not([type=button]),
.is-contact-formwrap .nf-form-content textarea {
  border-radius: 8px;
}

/* ============================================================
   15. BANDA DE CAPTACIÓN DE LEAD (landings)
   ============================================================ */
.is-lead {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  background: var(--is-grad);
  color: #fff;
  padding: clamp(34px, 5vw, 56px) 16px;
}
.is-lead-inner {
  position: relative; z-index: 2;
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.is-lead-copy { width: 100%; text-align: center; }
.is-lead-copy p { max-width: 520px; margin-left: auto; margin-right: auto; }
.is-lead-formwrap { width: 100%; }
.is-lead-cta { width: 100%; }
.is-lead-or {
  flex-basis: 100%; text-align: center; color: rgba(255,255,255,.92);
  font-weight: 700; font-size: 14px; margin: 2px 0;
}
.is-lead-copy h2 {
  color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: 0 0 12px;
}
.is-lead-copy p { color: rgba(255,255,255,.92); line-height: 1.6; margin: 0 0 16px; }
.is-lead-trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
}
.is-lead-trust li { position: relative; padding-left: 24px; font-weight: 600; font-size: .95rem; }
.is-lead-trust li:before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  background: #fff; color: var(--is-primary); border-radius: 50%; font-size: .72rem; font-weight: 900;
}
.is-lead-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.is-lead-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-weight: 800; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.is-lead-wa { background: #25D366; color: #0b3d1e; }
.is-lead-tel { background: #fff; color: var(--is-primary-dark); }
.is-lead-cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }

.is-lead-formwrap {
  background: #fff; border-radius: var(--is-radius);
  padding: 24px 26px 22px; box-shadow: 0 14px 34px rgba(0,0,0,.22);
  color: var(--is-ink-soft);
}
.is-lead-formtitle {
  margin: 0 0 6px; font-weight: 800; color: var(--is-primary-dark);
  font-size: 1.05rem; text-align: center;
}
.is-lead-formwrap .nf-form-content { max-width: 100%; padding: 0; margin: 0; }
.is-lead-formwrap .nf-form-fields-required { font-size: 12px; margin: 0 0 12px; opacity: .7; }

/* Textos/etiquetas legibles */
.is-lead-formwrap .nf-form-content,
.is-lead-formwrap label,
.is-lead-formwrap .nf-field-label label,
.is-lead-formwrap .nf-field-element input,
.is-lead-formwrap .nf-field-element textarea,
.is-lead-formwrap .nf-field-element select { color: var(--is-ink) !important; }
.is-lead-formwrap .nf-field-label { margin-bottom: 5px; }
.is-lead-formwrap .nf-field-label label { font-weight: 700; font-size: 14px; line-height: 1.3; margin: 0; }
.is-lead-formwrap ::placeholder { color: #9a938a; }

/* Espaciado homogéneo entre campos (antes 25px) + sin huecos fantasma */
.is-lead-formwrap .nf-field-container { margin-bottom: 14px !important; }
.is-lead-formwrap .nf-before-field,
.is-lead-formwrap .nf-after-field { margin: 0 !important; min-height: 0 !important; }
.is-lead-formwrap nf-section:empty { display: none; }

/* Campos con dimensiones consistentes */
.is-lead-formwrap .nf-field-element input:not([type=button]),
.is-lead-formwrap .nf-field-element textarea {
  border: 1px solid #d9d3ca !important; border-radius: 8px !important;
  background: #fbfaf8 !important; box-shadow: none !important;
  padding: 10px 12px !important; min-height: 44px !important;
  font-size: 14px !important; width: 100% !important;
}
.is-lead-formwrap .nf-field-element textarea { min-height: 92px !important; resize: vertical; }
.is-lead-formwrap .nf-field-element input:not([type=button]):focus,
.is-lead-formwrap .nf-field-element textarea:focus {
  border-color: var(--is-primary) !important; background: #fff !important;
  box-shadow: 0 0 0 3px rgba(134,26,34,.12) !important;
}
.is-lead-formwrap .nf-error-msg { font-size: 12px; margin-top: 4px; }

/* Botón enviar homogéneo */
.is-lead-formwrap .submit-wrap { margin-top: 4px; }
.is-lead-formwrap .submit-wrap input[type="button"],
.is-lead-formwrap input[type="button"] {
  background: var(--is-grad) !important; border: 0 !important; color: #fff !important;
  border-radius: 8px !important; font-weight: 800 !important; min-height: 46px; width: 100%;
  text-transform: uppercase; letter-spacing: .5px;
}
/* Ocultar iconos/tooltip sobrantes que descuadran los campos */
.is-lead-formwrap .nf-help,
.is-lead-formwrap .nf-field-container .extra { display: none !important; }

@media (max-width: 820px) {
  .is-lead-inner { grid-template-columns: 1fr; }
  .is-lead-copy { text-align: center; }
  .is-lead-trust { justify-content: center; }
  .is-lead-cta { justify-content: center; }
}

/* ============================================================
   16. CTA "Pedir presupuesto" en el hero de la portada
   ============================================================ */
.is-hero-cta-wrap { text-align: center; margin: 20px 0 6px; width: 100%; }
.is-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px; border-radius: 25px;
  background: var(--is-grad); color: #fff !important;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  letter-spacing: .3px; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 8px 20px rgba(134,26,34,.35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.is-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(134,26,34,.5); color: #fff !important; }

/* ============================================================
   17. BARRA STICKY DE CONTACTO (solo móvil)
   ============================================================ */
.is-sticky-cta { display: none; }

@media (max-width: 820px) {
  .is-sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    box-shadow: 0 -6px 18px rgba(0,0,0,.16);
  }
  .is-sticky-cta .isc {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 54px; color: #fff; font-weight: 800; font-size: .92rem;
    text-decoration: none; text-align: center;
  }
  .is-sticky-cta .isc:before { font-size: 1.05rem; line-height: 1; }
  .isc-call  { background: var(--is-primary); }
  .isc-call:before  { content: "📞"; }
  .isc-wa    { background: #25D366; color: #06331a; }
  .isc-wa:before    { content: "💬"; }
  .isc-quote { background: var(--is-accent); }
  .isc-quote:before { content: "📩"; }

  /* Dejar hueco para que la barra no tape el pie */
  body { padding-bottom: 54px; }
  /* Ocultar el WhatsApp flotante (joinchat) en móvil: ya está en la barra */
  .joinchat { display: none !important; }
}

/* ============================================================
   18. FRANJA DE MARCAS (confianza)
   ============================================================ */
.is-brands { background: #fff; padding: clamp(26px, 4vw, 44px) 16px; border-top: 1px solid rgba(207,201,192,.5); }
.is-brands-title {
  text-align: center; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: .82rem; font-weight: 700; color: #8a8378; margin: 0 0 20px;
}
.is-brands-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 30px;
}
.is-brands-list li {
  font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--is-ink); letter-spacing: .3px; opacity: .62;
  transition: opacity .2s ease, color .2s ease; white-space: nowrap;
}
.is-brands-list li:hover { opacity: 1; color: var(--is-primary); }

/* ============================================================
   19. MIGAS DE PAN
   ============================================================ */
.is-breadcrumb {
  max-width: 1160px; margin: 0 auto; padding: 14px 16px 2px;
  font-size: .86rem; color: #8a8378; line-height: 1.5;
}
.is-breadcrumb a { color: var(--is-primary); text-decoration: none; }
.is-breadcrumb a:hover { color: var(--is-accent); text-decoration: underline; }
.is-breadcrumb .is-bc-sep { color: #c9c2b8; margin: 0 2px; }
.is-breadcrumb .is-bc-current { color: var(--is-ink-soft); font-weight: 600; }

/* ============================================================
   20. EQUIPOS RELACIONADOS (enlazado interno en fichas)
   ============================================================ */
.is-related { padding: clamp(30px, 4vw, 52px) 16px; background: var(--is-neutral-soft); }
.is-related h2 {
  text-align: center; font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--is-primary-dark); margin: 0 0 clamp(20px, 3vw, 32px);
}
.is-rel-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.is-rel-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border-radius: var(--is-radius); overflow: hidden;
  box-shadow: var(--is-shadow-soft); border: 1px solid rgba(207,201,192,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.is-rel-card:hover { transform: translateY(-4px); box-shadow: var(--is-shadow); }
.is-rel-img {
  display: block; width: 100%; aspect-ratio: 1/1;
  background-size: cover; background-position: center; background-color: #f0ede8;
}
.is-rel-noimg { background: var(--is-grad); }
.is-rel-name {
  padding: 10px 12px 14px; font-size: .86rem; font-weight: 700; line-height: 1.25;
  color: var(--is-ink); text-align: center;
}
.is-rel-card:hover .is-rel-name { color: var(--is-primary); }
@media (max-width: 900px) { .is-rel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .is-rel-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   21. ENLACES A OTRAS CATEGORÍAS
   ============================================================ */
.is-catlinks { padding: clamp(28px, 4vw, 46px) 16px; background: #fff; }
.is-catlinks h2 {
  text-align: center; font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--is-primary-dark); margin: 0 0 22px;
}
.is-catlinks-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 900px; margin: 0 auto; }
.is-catlinks-grid a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px;
  background: var(--is-neutral-soft); border: 1px solid rgba(207,201,192,.7);
  border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--is-ink-soft);
  text-decoration: none; transition: all .16s ease;
}
.is-catlinks-grid a:hover { background: var(--is-grad); color: #fff; border-color: transparent; transform: translateY(-2px); }