/* ═══════════════════════════════════════════════════════════════════════════
   Capa de armonización de los shortcodes

   Los estilos de estos bloques están repartidos entre tres sitios (css/style.css
   de este plugin, canun-elementor.css de canun-core y styles.css/elements.css del
   tema). En vez de perseguirlos por los tres, esta hoja se carga la última y los
   alinea con el sistema de la ficha de producto:

     tarjeta   fondo #fff · borde 1px #ececec · radio 14px · sin sombra en reposo
     hover     subir 3px · sombra 0 10px 24px rgba(0,0,0,.07) · borde dorado
     imagen    aspect-ratio · object-fit: contain · fondo #f8f7f5
     botón     MAYÚSCULAS · .09em · peso 700 · alto 54px · radio 8px · bronce
     acentos   --trm-oro-fuerte (nunca --canun-brand sobre blanco: se lava)

   Cada bloque lleva su rótulo para poder quitarlo suelto si algo no cuadra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Piezas comunes ──────────────────────────────────────────────────────── */

.wpo-blog-item .wpo-blog-content,
.cc-logo-item {
  border-radius: 14px;
  border-color: #ececec;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-logo-item:hover {
  transform: translateY(-3px);
  border-color: #e0d9cc;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

@supports (border-color: color-mix(in srgb, red 50%, white)) {
  .cc-logo-item:hover {
    border-color: color-mix(in srgb, var(--canun-brand) 55%, #fff);
  }
}

/* Botones: el del tema y el del separador, a la norma de la ficha. */
.theme-btn,
.ButtonImageSeparatorOffers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 8px;
  background: var(--trm-oro-fuerte, #b8933f);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  transition: filter 0.2s ease;
}

.theme-btn:hover,
.ButtonImageSeparatorOffers:hover {
  background: var(--trm-oro-fuerte, #b8933f);
  color: #fff;
  filter: brightness(0.92);
}

/* ── product_listing ─────────────────────────────────────────────────────── */

.custom-product-listing {
  margin: 48px 0;
}

.custom-product-listing .section-title,
.woocommerce .shop-title {
  margin: 0 0 12px;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--neutro2);
  text-transform: none;
}

.custom-product-listing .shop-description,
.woocommerce .shop-description {
  max-width: 760px;
  margin: 0 0 30px;
  color: var(--neutro4);
  line-height: 1.75;
}

/* custom_features usa ahora las clases .trm-garantias, que viven en la hoja del
   tema (contentProduct.css) porque las comparte con la ficha de producto. */

/* ── custom_law_services: rejilla de servicios ───────────────────────────── */

.trm-servicios {
  margin: 48px 0;
}

.trm-servicios__cabecera {
  max-width: 780px;
  margin: 0 0 40px;
}

.trm-servicios__titulo {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 14px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--neutro2);
}

.trm-servicios__titulo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--trm-oro-fuerte, #b8933f);
}

.trm-servicios__bajada {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--neutro4);
}

.trm-servicios__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trm-servicio {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fff;
  list-style: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.trm-servicio:hover {
  transform: translateY(-3px);
  border-color: #e0d9cc;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

@supports (border-color: color-mix(in srgb, red 50%, white)) {
  .trm-servicio:hover {
    border-color: color-mix(in srgb, var(--canun-brand) 55%, #fff);
  }
}

.trm-servicio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #faf6ee;
  color: var(--trm-oro-fuerte, #b8933f);
  font-size: 22px;
  transition: background-color 0.2s ease;
}

.trm-servicio:hover .trm-servicio__icono {
  background: #f4ecdc;
}

.trm-servicio__titulo {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--neutro2);
}

.trm-servicio__texto {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--neutro4);
}

/* El enlace solo se pinta si el servicio lleva uno de verdad. */
.trm-servicio__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--trm-oro-fuerte, #b8933f);
  text-transform: uppercase;
}

.trm-servicio__enlace::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.trm-servicio:hover .trm-servicio__enlace::after {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .trm-servicios {
    margin: 45px 0;
  }

  .trm-servicio {
    padding: 24px 20px;
  }
}
/* ── custom_fun_facts: cifras de redes ───────────────────────────────────── */

.trm-cifras {
  padding: 70px 0;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Tres capas: un resplandor dorado arriba a la izquierda, un tinte cálido en
   diagonal y un oscurecido de base. La foto del fondo se sigue intuyendo por
   debajo, pero deja de competir con las cifras. */
.trm-cifras::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 130% at 18% 0%, rgba(227, 181, 118, 0.22) 0%, transparent 58%),
    linear-gradient(118deg, rgba(38, 26, 18, 0.9) 0%, rgba(13, 11, 9, 0.94) 48%, rgba(26, 18, 14, 0.9) 100%),
    rgba(8, 8, 10, 0.55);
}

/* Un filete dorado arriba y abajo cierra la banda. */
.trm-cifras::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(227, 181, 118, 0.28);
  border-bottom: 1px solid rgba(227, 181, 118, 0.28);
  pointer-events: none;
}

.trm-cifra__numero {
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin:0;
}

.trm-cifras .container {
  position: relative;
  z-index: 1;
}

.trm-cifras__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trm-cifra {
  padding: 6px 20px;
  text-align: center;
  list-style: none;
}

.trm-cifra + .trm-cifra {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* El sitio donde el dorado luce de verdad: cifra grande sobre fondo oscuro. */
.trm-cifra__numero {
  margin: 0 0 6px !important;
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--canun-brand);
  font-variant-numeric: tabular-nums;
}

.trm-cifra__red {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .trm-cifras {
    padding: 45px 0;
  }

  .trm-cifras__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 0;
  }

  /* Con dos columnas, el separador solo va entre las de la misma fila. */
  .trm-cifra + .trm-cifra {
    border-left: 0;
  }

  .trm-cifra:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
}
/* ── DosColumnas ─────────────────────────────────────────────────────────── */

.wpo-about-img img {
  border-radius: 14px;
  object-fit: cover;
}

/* ── custom_slider: cabecera de portada ──────────────────────────────────── */

/* Sin carrusel: una imagen a sangre, un antetítulo con filete dorado, el titular
   en la serif que el tema ya carga (Cormorant Garamond) y dos botones.
   El velo está calculado para que el texto se lea sobre cualquier foto, clara u
   oscura, y para que la sección aguante incluso sin imagen. */

/* A sangre sin barra horizontal: con width:100vw el ancho incluye la barra de
   scroll y sobra. Con márgenes negativos a los dos lados y ancho automático,
   no. Y hay que anular el left/right del .HeadHome viejo, que la desplazaba. */
.trm-portada {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  max-width: none;
  left: auto;
  right: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(440px, 72vh, 680px);
  max-height: none;
  overflow: hidden;
  background: #16130f;
}

.trm-portada__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Acercamiento lentísimo: da vida sin marear ni distraer. */
  animation: trm-portada-zoom 18s ease-out forwards;
}

@keyframes trm-portada-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Dos capas: una de izquierda a derecha para el texto y otra por abajo, que es
   donde la foto suele tener más ruido. */
.trm-portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.86) 0%, rgba(12, 10, 8, 0.55) 42%, rgba(12, 10, 8, 0.12) 78%, transparent 100%),
    linear-gradient(0deg, rgba(12, 10, 8, 0.55) 0%, transparent 45%);
}

.trm-portada--sin-foto .trm-portada__velo {
  background:
    radial-gradient(120% 90% at 15% 30%, #2a2118 0%, #16130f 60%, #100e0b 100%);
}

/* El .container se deja centrado como el resto del sitio, para que el texto
   arranque en la misma vertical que el logo y el menú. Lo que se limita es el
   ancho de cada pieza, no el del contenedor: así queda pegado a la izquierda
   sin salirse de la retícula. */
.trm-portada__contenido {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: 56px;
  color: #fff;
}

.trm-portada__antetitulo,
.trm-portada__titulo,
.trm-portada__texto,
.trm-portada__botones {
  max-width: 640px;
}

/* Antetítulo con filete dorado delante. */
.trm-portada__antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--canun-brand);
  text-transform: uppercase;
}

.trm-portada__antetitulo::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--canun-brand);
}

.trm-portada__titulo {
  margin: 0 0 20px;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.trm-portada__texto {
  max-width: 46ch;
  margin: 0 0 34px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}

.trm-portada__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* El secundario, en línea sobre la foto. */
.trm-portada__secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.trm-portada__secundario:hover {
  border-color: #fff;
  background: #fff;
  color: var(--neutro2);
}

@media (max-width: 767px) {
  .trm-portada {
    min-height: clamp(380px, 62vh, 520px);
  }

  /* En vertical el degradado lateral no ayuda: manda uno de abajo arriba. */
  .trm-portada__velo {
    background: linear-gradient(0deg, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.6) 45%, rgba(12, 10, 8, 0.35) 100%);
  }

  .trm-portada__contenido {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .trm-portada__botones .theme-btn,
  .trm-portada__secundario {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trm-portada__img {
    animation: none;
  }
}
/* ── image_separator: banda de contacto ──────────────────────────────────── */

/* Los 500px fijos de css/style.css dejaban un socavón en pantallas bajas y
   apretaban el texto en las altas. Con min-height se adapta al contenido. */
.imageSeparator {
  height: auto;
  min-height: clamp(340px, 44vh, 460px);
  margin-top: 48px;
  margin-bottom: 48px;
  padding: 64px 2rem;
}

/* El velo plano al 50% apagaba la foto sin llegar a hacer legible el texto.
   Mismo tratamiento que la banda de redes: oscuro por arriba y por abajo, con
   el dorado entrando en diagonal y un resplandor desde el pie. */
.imageSeparator::before {
  background:
    radial-gradient(78% 96% at 50% 50%, transparent 38%, rgba(8, 6, 4, 0.6) 100%),
    linear-gradient(122deg, rgba(120, 86, 30, 0.5) 0%, rgba(184, 147, 63, 0.14) 34%, transparent 56%, rgba(227, 181, 118, 0.28) 100%),
    radial-gradient(88% 62% at 50% 108%, rgba(199, 158, 74, 0.46) 0%, transparent 64%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.78) 0%, rgba(10, 8, 6, 0.58) 45%, rgba(10, 8, 6, 0.86) 100%);
}

/* Filete dorado arriba y abajo, como en cifras y redes. */
.imageSeparator::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-top: 1px solid rgba(227, 181, 118, 0.3);
  border-bottom: 1px solid rgba(227, 181, 118, 0.3);
  pointer-events: none;
}

.imageSeparator .separatorContent {
  max-width: 660px;
}

/* Un rótulo dorado sobre el titular: sitúa la sección antes de leerla. Se pinta
   solo aquí, sin tocar el HTML, porque el texto es siempre el mismo. */
.imageSeparator .separatorContent::before {
  content: "¿Hablamos?";
  display: block;
  margin-bottom: 14px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: var(--canun-brand);
  text-transform: uppercase;
}

.imageSeparator h3 {
  margin: 0 0 14px;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.16;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

.imageSeparator .separatorTexto {
  max-width: 46ch;
  margin: 0 auto 30px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.imageSeparator .ButtonContact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* El segundo botón, en versión secundaria. */
.ButtonImageSeparatorOffers--linea {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.ButtonImageSeparatorOffers--linea:hover {
  background: #fff;
  border-color: #fff;
  color: var(--neutro2);
  filter: none;
}

@media (max-width: 767px) {
  .imageSeparator {
    min-height: 300px;
    margin-top: 36px;
    margin-bottom: 36px;
    padding: 48px 1.25rem;
  }

  .imageSeparator .ButtonContact {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ── CategoriesRelated: categorías relacionadas ──────────────────────────── */

.trm-categorias {
  margin: 48px 0;
}

.trm-categorias__titulo {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 14px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--neutro2);
}

.trm-categorias__titulo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--trm-oro-fuerte, #b8933f);
}

.trm-categorias__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trm-categorias__lista li {
  list-style: none;
}

.trm-categoria {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fff;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.trm-categoria:hover {
  transform: translateY(-3px);
  border-color: #e0d9cc;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

@supports (border-color: color-mix(in srgb, red 50%, white)) {
  .trm-categoria:hover {
    border-color: color-mix(in srgb, var(--canun-brand) 55%, #fff);
  }
}

/* La foto va posicionada, no en flujo. Es la única forma de que no dependa del
   `img { height: auto }` global del tema (elements.css), que anulaba el alto
   100% y dejaba la imagen a su tamaño natural, saliéndose de la caja.
   flex: 0 0 auto para que el flex del padre tampoco la estire ni la encoja. */
.trm-categoria__foto {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--papel-calido);
}

.trm-categoria__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.trm-categoria:hover .trm-categoria__foto img {
  transform: scale(1.05);
}

.trm-categoria__pie {
  display: block;
  padding: 14px 16px 16px;
}

/* Dos líneas siempre reservadas: así todas las tarjetas miden exactamente lo
   mismo y no queda el hueco muerto de antes debajo del enlace. */
.trm-categoria__nombre {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--neutro2);
}

.trm-categoria__enlace {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--trm-oro-fuerte, #b8933f);
  text-transform: uppercase;
}

.trm-categoria__enlace::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.2s ease;
}

.trm-categoria:hover .trm-categoria__enlace::after {
  transform: translateX(4px);
}

/* En móvil, en horizontal: cuatro categorías en columna eran cuatro pantallas
   de scroll. La tarjeta cortada de la derecha avisa de que hay más. */
@media (max-width: 767px) {
  .trm-categorias {
    margin: 36px 0;
  }

  .trm-categorias__lista {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .trm-categorias__lista::-webkit-scrollbar {
    display: none;
  }

  .trm-categorias__lista li {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .trm-categoria__pie {
    padding: 12px 14px 14px;
  }

  .trm-categoria__nombre {
    font-size: 0.9rem;
  }
}

/* ── custom_service_section: contenido taurino ───────────────────────────── */

.trm-contenido {
  padding: 56px 0;
}

.trm-contenido__cabecera {
  max-width: 780px;
  margin: 0 0 38px;
}

.trm-contenido__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--trm-oro-fuerte, #b8933f);
  text-transform: uppercase;
}

.trm-contenido__rotulo::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--trm-oro-fuerte, #b8933f);
}

.trm-contenido__titulo {
  margin: 0 0 14px;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--neutro2);
}

.trm-contenido__bajada {
  max-width: 62ch;
  margin: 0;
  color: var(--neutro4);
  line-height: 1.75;
}

.trm-contenido__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.trm-pieza {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #17130f;
}

.trm-pieza img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.trm-pieza:hover img {
  transform: scale(1.05);
}

.trm-pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.12) 62%, transparent 100%);
}

.trm-pieza__pie {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 24px;
  color: #fff;
}

.trm-pieza__nombre {
  display: block;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: #fff;
}

.trm-pieza__texto {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

.trm-pieza__enlace {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--canun-brand);
  text-transform: uppercase;
}

.trm-pieza__enlace::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.2s ease;
}

.trm-pieza:hover .trm-pieza__enlace::after {
  transform: translateX(4px);
}
/* ── custom_blog_section ─────────────────────────────────────────────────── */

/* Las tarjetas iban en columnas de Bootstrap y cada una medía lo que medía su
   texto. Con rejilla, todas las de una fila miden igual. */
.wpo-blog-section .row,
.wpo-blog-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 0;
}

.wpo-blog-section .row > [class*="col-"],
.wpo-blog-items > [class*="col-"] {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: none;
}

.wpo-blog-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wpo-blog-item .wpo-blog-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wpo-blog-item {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ececec;
  background: #fff;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpo-blog-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}

.wpo-blog-item .wpo-blog-img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* La píldora de categoría venía en azul. */
.wpo-blog-item .wpo-blog-content .thumb,
.wpo-blog-item .thumb a {
  border-radius: 4px;
  background: #faf7f2;
  color: var(--trm-oro-fuerte, #b8933f);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wpo-blog-item .thumb a:hover {
  background: var(--trm-oro-fuerte, #b8933f);
  color: #fff;
}

/* ── Faqs ────────────────────────────────────────────────────────────────── */

/* Aquí no se toca nada más: el acordeón ya estaba bien. Solo se devuelve el
   anillo de foco, que el tema lo mataba con box-shadow:none y quien navega con
   teclado no sabía dónde estaba. Es invisible salvo con el tabulador. */
.theme-accordion .accordion .accordion-button:focus-visible {
  outline: 2px solid var(--trm-oro-fuerte, #b8933f);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .trm-servicio,
  .wpo-blog-item,
  .cc-logo-item,
  .theme-btn,
  .ButtonImageSeparatorOffers {
    transition: none;
  }
}

/* ── social_glasswork: redes ─────────────────────────────────────────────── */

.trm-redes {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  min-height: clamp(340px, 42vh, 460px);
  margin: 48px calc(50% - 50vw);
  padding: 64px 0;
  overflow: hidden;
  background-color: #17130f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Cuatro capas, de arriba abajo según se declaran:
     1. una viñeta que cierra las esquinas y centra la mirada,
     2. un barrido dorado en diagonal, de abajo-izquierda a arriba-derecha,
     3. un resplandor dorado desde el pie, que es donde están los iconos,
     4. la base oscura, para que la foto no le gane nunca al texto.
   La foto se sigue viendo por debajo; lo que no hace es competir. */
.trm-redes__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 96% at 50% 50%, transparent 38%, rgba(8, 6, 4, 0.62) 100%),
    linear-gradient(122deg, rgba(120, 86, 30, 0.55) 0%, rgba(184, 147, 63, 0.16) 34%, transparent 56%, rgba(227, 181, 118, 0.3) 100%),
    radial-gradient(88% 62% at 50% 108%, rgba(199, 158, 74, 0.5) 0%, transparent 64%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.8) 0%, rgba(10, 8, 6, 0.6) 45%, rgba(10, 8, 6, 0.86) 100%);
}

/* Filete dorado arriba y abajo: cierra la banda igual que en las cifras. */
.trm-redes::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(227, 181, 118, 0.3);
  border-bottom: 1px solid rgba(227, 181, 118, 0.3);
  pointer-events: none;
}

.trm-redes--sin-foto .trm-redes__velo {
  background: radial-gradient(120% 100% at 50% 0%, #2f2418 0%, #16130f 62%, #100e0b 100%);
}

.trm-redes__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trm-redes__titulo {
  max-width: 20ch;
  margin: 0 auto 16px;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.16;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

.trm-redes__texto {
  max-width: 46ch;
  margin: 0 auto 36px;
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.trm-redes__iconos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* Sobre una foto llena de gente, un redondel con borde translúcido no se ve.
   Van con fondo propio y borde dorado, que es lo que los despega del fondo. */
.trm-redes__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(227, 181, 118, 0.55);
  border-radius: 50%;
  background: rgba(18, 14, 10, 0.55);
  color: var(--canun-brand);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.trm-redes__icono:hover,
.trm-redes__icono:focus-visible {
  transform: translateY(-3px);
  border-color: var(--canun-brand);
  background: var(--canun-brand);
  color: #17130f;
}

.trm-redes__icono svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .trm-redes {
    min-height: 300px;
    margin: 36px calc(50% - 50vw);
    padding: 48px 0;
  }

  .trm-redes__iconos {
    gap: 14px;
  }

  .trm-redes__icono {
    width: 50px;
    height: 50px;
  }

  .trm-redes__icono svg {
    width: 21px;
    height: 21px;
  }
}
/* ── Faqs ────────────────────────────────────────────────────────────────── */

/* Sin acordeón de Bootstrap: <details> nativo. Se abre y cierra sin JavaScript,
   funciona con teclado de serie, y desaparece el choque de identificadores que
   hacía que dos bloques de FAQ en la misma página se cruzaran. */

/* De borde a borde: se saca del .container con el ancho de la ventana. */
.trm-faqs {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 56px 0;
  background-color: var(--papel-calido);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.trm-faqs__titulo {
  margin: 0 0 34px;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--neutro2);
  text-align: center;
}

.trm-faqs__lista {
  max-width: 840px;
  margin: 0 auto;
}

.trm-faq {
  border-bottom: 1px solid #ececec;
}

.trm-faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--neutro2);
  cursor: pointer;
  list-style: none;
}

.trm-faq__pregunta::-webkit-details-marker {
  display: none;
}

/* La pregunta es un <h4> por jerarquía, pero se lee como parte del desplegable:
   hereda todo del <summary> para que ni el tamaño ni la fuente de los títulos
   del tema se le cuelen. */
.trm-faq__enunciado {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-transform: none;
}

/* La flecha: dos bordes girados, sin fuente de iconos ni SVG. */
.trm-faq__pregunta::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--trm-oro-fuerte, #b8933f);
  border-bottom: 2px solid var(--trm-oro-fuerte, #b8933f);
  transform: rotate(45deg);
  transform-origin: 70% 70%;
  transition: transform 0.25s ease;
}

.trm-faq[open] .trm-faq__pregunta::after {
  transform: rotate(-135deg);
}

.trm-faq__pregunta:focus-visible {
  outline: 2px solid var(--trm-oro-fuerte, #b8933f);
  outline-offset: 4px;
}

.trm-faq__respuesta p {
  margin: 0 0 22px;
  color: var(--neutro4);
  line-height: 1.75;
}

/* ── Pasos ───────────────────────────────────────────────────────────────── */

.trm-pasos {
  --trm-fondo: #fff;
  padding: 56px 0;
}

.trm-pasos__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--trm-oro-fuerte, #b8933f);
  text-transform: uppercase;
}

.trm-pasos__rotulo::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--trm-oro-fuerte, #b8933f);
}

.trm-pasos__titulo {
  margin: 0 0 14px;
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--neutro2);
}

.trm-pasos__texto {
  max-width: 62ch;
  margin: 0;
  color: var(--neutro4);
  line-height: 1.75;
}

.trm-pasos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.trm-paso {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid #ececec;
  counter-increment: paso;
  list-style: none;
}

/* El número monta sobre la línea; el hueco se tapa con el fondo de la sección. */
.trm-paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: -16px;
  left: 0;
  padding-right: 12px;
  background: var(--trm-fondo, #fff);
  font-family: var(--tipo1, "Muli"), sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--trm-oro-fuerte, #b8933f);
}

.trm-paso__titulo {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--neutro2);
}

.trm-paso__texto {
  color: var(--neutro4);
  font-size: 0.96rem;
  line-height: 1.7;
}

.trm-pasos__boton {
  margin-top: 34px;
}