/* ───────────────────────────────────────────────────────────────
   Santely — hoja propia del sitio estático.
   Sólo añade lo que el WordPress no cubría: la portada de «Quiénes
   somos», la maquetación de los artículos del blog y el aviso del
   formulario. Los tokens replican el kit de Elementor del sitio.
   ─────────────────────────────────────────────────────────────── */
:root{
  --santely-primario:#016A72;
  --santely-oscuro:#014146;
  --santely-acento:#01ABB8;
  --santely-texto:#8E8E8E;
  --santely-tinta:#12333A;
  --santely-ancho:1140px;
}

/* ── Héroe de «Quiénes somos» (hereda el estilo de /diseno/) ── */
.pag-quienes-somos .elementor-19 .elementor-element.elementor-element-a6079bc:not(.elementor-motion-effects-element-type-background){
  background-image:url("/assets/img/image27.png");
  background-position:center 60%;
}

/* ── Menú: cabe un ítem más («Quiénes somos») sin que salte de línea ── */
@media (min-width:1025px){
  .elementor-382 .elementor-element.elementor-element-774ca38{--width:56%;}
  .elementor-382 .elementor-element.elementor-element-9e6b9ee
    .elementor-nav-menu--layout-horizontal .elementor-nav-menu{flex-wrap:nowrap;}
  .elementor-382 .elementor-element.elementor-element-9e6b9ee
    .elementor-nav-menu--main .elementor-item{
      padding-left:10px;padding-right:10px;white-space:nowrap;
  }
}

/* ── Aviso del formulario de contacto ── */
.santely-form-msg{
  margin:0 0 16px;padding:14px 16px;border-radius:6px;
  font-family:"Roboto",sans-serif;font-size:16px;line-height:1.5;
}
.santely-form-msg[hidden]{display:none!important;}
.santely-form-msg--ok{background:#E6F4F3;border:1px solid var(--santely-primario);color:var(--santely-oscuro);}
.santely-form-msg--error{background:#FDECEC;border:1px solid #C0392B;color:#8E2A20;}

/* ── Artículos del blog ────────────────────────────────────── */
/* En las entradas del blog no hay héroe oscuro detrás de la cabecera, así que
   el menú (que es blanco) quedaba invisible sobre fondo blanco. Se le da fondo
   propio y se saca del posicionamiento absoluto. */
/* Vale para CUALQUIER entrada del blog. Antes listaba los tres slugs
   originales a mano y las nueve entradas nuevas quedaron sin cabecera:
   el logotipo y el menú caían encima del título del artículo. */
[class*="pag-blog-"] .elementor-382 .elementor-element.elementor-element-865b0bc{
  --position:relative;
  --margin-top:0px;
  --padding-top:16px;
  --padding-bottom:16px;
  background:linear-gradient(180deg,#00272A 0%,var(--santely-primario) 100%);
}

[class*="pag-blog-"] .page-header{
  max-width:var(--santely-ancho);margin:0 auto;padding:52px 24px 0;
}
.santely-articulo,
.page-header h1.entry-title{
  font-family:"Roboto",sans-serif;
}
.page-header h1.entry-title{
  font-size:clamp(30px,4.4vw,48px);line-height:1.15;font-weight:700;
  color:var(--santely-oscuro);margin:0;
}
.santely-articulo{
  max-width:760px;margin:0 auto;padding:0 24px 72px;
  font-size:18px;line-height:1.72;color:#4A5A5E;
}
.santely-articulo .articulo-meta{
  margin:14px 0 34px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--santely-texto);
}
.santely-articulo .entradilla{
  font-size:21px;line-height:1.6;color:var(--santely-oscuro);font-weight:500;
  border-left:4px solid var(--santely-acento);padding-left:20px;margin:0 0 36px;
}
.santely-articulo h2{
  font-size:28px;line-height:1.25;font-weight:700;color:var(--santely-oscuro);
  margin:46px 0 14px;
}
.santely-articulo h3{
  font-size:21px;line-height:1.3;font-weight:700;color:var(--santely-primario);
  margin:32px 0 10px;
}
.santely-articulo p{margin:0 0 18px;}
.santely-articulo ul{margin:0 0 22px;padding-left:22px;}
.santely-articulo li{margin:0 0 10px;}
.santely-articulo strong{color:var(--santely-tinta);}
.santely-articulo a{color:var(--santely-primario);text-decoration:underline;}
.santely-articulo a:hover{color:var(--santely-acento);}
.santely-articulo .cta-inline{
  margin:34px 0 0;padding:18px 20px;background:#F3F7F8;border-radius:8px;font-size:17px;
}

/* CTA de cierre de artículo */
.articulo-cta{
  margin:52px 0 28px;padding:34px 32px;border-radius:10px;
  background:linear-gradient(135deg,var(--santely-oscuro) 0%,var(--santely-primario) 100%);
  color:#fff;
}
.articulo-cta h2{margin:0 0 10px;color:#fff;font-size:25px;}
.articulo-cta p{margin:0 0 8px;color:rgba(255,255,255,.9);}
.articulo-cta__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px!important;}
.btn-santely{
  display:inline-block;padding:12px 26px;border-radius:4px;
  background:var(--santely-acento);color:#fff!important;text-decoration:none!important;
  font-weight:500;font-size:16px;transition:background .2s,color .2s;
}
.btn-santely:hover{background:#fff;color:var(--santely-oscuro)!important;}
.btn-santely--linea{background:transparent;border:1px solid rgba(255,255,255,.7);}
.btn-santely--linea:hover{background:#fff;color:var(--santely-oscuro)!important;}
.articulo-volver{margin:0;font-size:16px;}
.articulo-volver a{color:var(--santely-primario);text-decoration:none;}
.articulo-volver a:hover{text-decoration:underline;}

@media (max-width:767px){
  [class*="pag-blog-"] .page-header{padding-top:36px;}
  .santely-articulo{font-size:17px;}
  .articulo-cta{padding:26px 22px;}
}

/* ── Accesibilidad: foco visible en toda la navegación ── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--santely-acento);outline-offset:2px;
}

/* ── Tarjetas de cifras del inicio ──────────────────────────────
   Antes eran tres imágenes PNG con los números incrustados en el arte.
   Ahora son HTML: se pueden actualizar sin rehacer el diseño, se ven
   nítidas en pantallas retina y caben cuatro. Los iconos son los mismos,
   recortados del PNG original. */
.santely-cifra{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;padding:26px 16px 24px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,#02A2AE 0%,#02575E 100%);
  box-shadow:0 12px 34px -22px rgba(0,0,0,.55);
  min-height:250px;
}
.santely-cifra__icono{
  width:auto;height:96px;object-fit:contain;margin:6px 0 4px;
}
.santely-cifra__numero{
  margin:0;font-family:"Roboto",sans-serif;font-weight:700;color:#fff;
  font-size:clamp(26px,2.6vw,38px);line-height:1.05;letter-spacing:-.01em;
}
.santely-cifra__pie{
  margin:0;font-family:"Roboto",sans-serif;font-weight:400;color:rgba(255,255,255,.92);
  font-size:14px;line-height:1.3;
}
/* la fila del inicio pasa de tres a cuatro tarjetas */
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;
}
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner > .e-con{
  --width:calc(25% - 15px);flex:1 1 200px;max-width:260px;
}
@media (max-width:1024px){
  .pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner > .e-con{
    --width:calc(50% - 10px);flex:1 1 40%;
  }
}
/* En móvil van dos por fila y más bajas. Una debajo de otra eran cuatro
   pantallas de scroll para leer cuatro números. */
@media (max-width:767px){
  .pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner{
    gap:12px;padding-left:16px;padding-right:16px;
  }
  .pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner > .e-con{
    --width:calc(50% - 6px);flex:0 0 calc(50% - 6px);max-width:none;
  }
  .santely-cifra{
    height:auto;min-height:0;padding:18px 12px 16px;gap:6px;border-radius:12px;
  }
  .santely-cifra__marco{height:62px;flex:0 0 62px;}
  .santely-cifra__numero{
    font-size:clamp(20px,6.2vw,26px);margin-top:6px;
  }
  .santely-cifra__pie{
    font-size:12.5px;line-height:1.25;min-height:32px;
  }
}
@media (max-width:360px){
  .santely-cifra{padding:14px 8px 13px;}
  .santely-cifra__marco{height:52px;flex:0 0 52px;}
  .santely-cifra__pie{font-size:11.5px;}
}

/* ── Botón de WhatsApp ──────────────────────────────────────────
   Sustituye al plugin NinjaTeam (160 KB de CSS y JS de terceros para
   abrir un enlace). Esto es el enlace oficial wa.me y nada más. */
/* Medidas tomadas del botón que ponía el plugin, para que quede idéntico:
   56 px de diámetro, 30 px de separación a los bordes y verde #2DB742. */
.santely-wa{
  position:fixed;right:30px;bottom:30px;z-index:9998;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#2DB742;color:#fff;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.26);
  transition:transform .18s ease, box-shadow .18s ease;
}
.santely-wa svg{width:32px;height:32px;display:block;}
.santely-wa:hover,.santely-wa:focus-visible{
  transform:scale(1.07);box-shadow:0 10px 24px rgba(0,0,0,.34);color:#fff;
}
@media (max-width:520px){
  .santely-wa{right:20px;bottom:20px;}
}

/* las cuatro tarjetas de cifras, a la misma altura */
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner{
  align-items:stretch;
}
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner > .e-con,
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 .elementor-widget-image,
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 .elementor-widget-container{
  display:flex;height:100%;
}
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 .elementor-widget-image{
  margin-block-end:0;width:100%;
}
.santely-cifra{width:100%;height:100%;}
.santely-cifra__icono{height:100px;}
.santely-cifra__numero{margin-top:auto;}

/* misma altura en las cuatro, gane quien gane en especificidad */
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner{
  align-items:stretch !important;
}
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner > .e-con{
  align-self:stretch !important;
}
.santely-cifra{min-height:258px;}
.santely-cifra__pie{min-height:36px;display:flex;align-items:center;justify-content:center;}

/* altura fija: así los números quedan a la misma línea en las cuatro */
.santely-cifra{height:268px;min-height:0;justify-content:flex-start;}
.santely-cifra__marco{
  height:112px;width:100%;display:flex;align-items:center;justify-content:center;flex:0 0 112px;
}
.santely-cifra__icono{height:auto;max-height:100%;max-width:74%;width:auto;margin:0;}

/* ═══════════════════════════════════════════════════════════════
   CATÁLOGO
   Mismo lenguaje visual que el resto del sitio, medido sobre él:
   tarjetas #F5F5F5 con esquina RECTA y sombra 0 12px 38px -26px,
   títulos 48/32 px en #016A72, texto 18 px #8E8E8E,
   botones #01ABB8 con 3 px de radio y 12/24 de relleno.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --cat-tarjeta:#F5F5F5;
  --cat-sombra:0 12px 38px -26px rgba(0,0,0,.5);
  --cat-borde:#E3E9EA;
}
.tienda-pagina{
  max-width:var(--santely-ancho);margin:0 auto;padding:120px 24px 90px;
  font-family:"Roboto",sans-serif;color:var(--santely-texto);font-size:18px;line-height:1.5;
}
.pag-catalogo .elementor-382 .elementor-element.elementor-element-865b0bc,
[class*="pag-catalogo-"] .elementor-382 .elementor-element.elementor-element-865b0bc{
  --position:relative;--margin-top:0px;--padding-top:16px;--padding-bottom:16px;
  background:linear-gradient(180deg,#00272A 0%,var(--santely-primario) 100%);
}
.pag-catalogo .tienda-pagina,[class*="pag-catalogo-"] .tienda-pagina{padding-top:56px;}

/* botón del sitio, exacto */
.ficha-btn,.tienda-cta__botones .btn-santely{
  display:inline-block;background:var(--santely-acento);color:#fff!important;
  font:500 15px/1 "Roboto",sans-serif;padding:12px 24px;border-radius:3px;
  text-decoration:none!important;transition:background .2s;
}
.ficha-btn:hover{background:var(--santely-primario);}
.ficha-btn--linea{
  background:transparent;color:var(--santely-primario)!important;
  border:1px solid var(--santely-acento);
}
.ficha-btn--linea:hover{background:var(--santely-acento);color:#fff!important;}

/* ── listado ── */
.tienda__intro{max-width:820px;margin:0 0 40px;}
.tienda__intro h1{font:700 clamp(34px,4.6vw,48px)/1 "Roboto",sans-serif;
  color:var(--santely-primario);margin:0 0 18px;}
.tienda__bajada{font-size:18px;line-height:27px;color:var(--santely-texto);margin:0 0 10px;}
.tienda__nota{font-size:14px;color:#A9B3B4;margin:0;}

.tienda-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px;}
.tienda-chip{
  border:1px solid var(--cat-borde);background:#fff;color:var(--santely-primario);
  border-radius:3px;padding:10px 18px;font:500 14px/1 "Roboto",sans-serif;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.tienda-chip:hover{border-color:var(--santely-acento);}
.tienda-chip.is-activo{background:var(--santely-primario);border-color:var(--santely-primario);color:#fff;}

.tienda-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.tienda-card{
  display:flex;flex-direction:column;background:var(--cat-tarjeta);
  border-radius:0;box-shadow:var(--cat-sombra);overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.tienda-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -24px rgba(0,0,0,.55);}
.tienda-card__foto{display:block;background:#fff;padding:24px;}
.tienda-card__foto img{width:100%;height:190px;object-fit:contain;display:block;}
.tienda-card__cuerpo{display:flex;flex-direction:column;gap:6px;padding:24px 26px 28px;flex:1;}
.tienda-card__marca{margin:0;font:700 11px/1 "Roboto",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--santely-acento);}
.tienda-card__titulo{margin:2px 0 0;font:700 19px/1.28 "Roboto",sans-serif;}
.tienda-card__titulo a{color:var(--santely-primario);text-decoration:none;}
.tienda-card__titulo a:hover{color:var(--santely-oscuro);}
.tienda-card__sku{margin:0;font-size:13px;color:#A9B3B4;}
.tienda-card__precio{margin:10px 0 0;font:700 24px/1 "Roboto",sans-serif;color:var(--santely-oscuro);}
.tienda-card__precio span{display:block;font:400 12px/1.4 "Roboto",sans-serif;color:#A9B3B4;margin-top:4px;}
.tienda-card__precio--consultar{font-size:17px;}
.tienda-card__enlace{margin-top:auto;padding-top:16px;font:500 14px/1 "Roboto",sans-serif;
  color:var(--santely-acento);text-decoration:none;}
.tienda-card__enlace:hover{color:var(--santely-primario);text-decoration:underline;}

.tienda-cta{margin:64px 0 0;padding:50px;border-radius:0;color:#fff;
  background:linear-gradient(135deg,var(--santely-oscuro) 0%,var(--santely-primario) 100%);
  box-shadow:var(--cat-sombra);}
.tienda-cta h2{margin:0 0 10px;color:#fff;font:700 32px/1.1 "Roboto",sans-serif;}
.tienda-cta p{margin:0;color:rgba(255,255,255,.88);font-size:18px;line-height:27px;}
.tienda-cta__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px!important;}
.tienda-cta__botones .btn-santely--linea{background:transparent;border:1px solid rgba(255,255,255,.65);}

/* ── ficha de producto ── */
.ficha-miga{font-size:14px;color:#A9B3B4;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:8px;}
.ficha-miga a{color:var(--santely-primario);text-decoration:none;}
.ficha-miga a:hover{text-decoration:underline;}

.ficha-alto{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:start;}

/* galería: miniaturas en columna y foto grande que se desliza */
.ficha-galeria{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;}
.ficha-galeria:only-child,.ficha-galeria.sin-minis{grid-template-columns:minmax(0,1fr);}
.ficha-minis{display:flex;flex-direction:column;gap:10px;}
.ficha-mini{width:88px;height:88px;padding:8px;background:#fff;cursor:pointer;
  border:1px solid var(--cat-borde);border-radius:0;transition:border-color .18s;}
.ficha-mini.is-activa{border-color:var(--santely-primario);}
.ficha-mini img{width:100%;height:100%;object-fit:contain;display:block;}
.ficha-visor{position:relative;background:#fff;border:1px solid var(--cat-borde);
  padding:34px;min-height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ficha-diapo{position:absolute;inset:34px;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(22px);transition:opacity .32s ease,transform .32s ease;pointer-events:none;}
.ficha-diapo.is-activa{opacity:1;transform:none;pointer-events:auto;position:relative;inset:auto;}
.ficha-diapo img{max-width:100%;max-height:420px;object-fit:contain;display:block;}
.ficha-flecha{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);
  border:1px solid var(--cat-borde);color:var(--santely-primario);cursor:pointer;
  transition:background .18s,color .18s;}
.ficha-flecha:hover{background:var(--santely-primario);color:#fff;}
.ficha-flecha svg{width:20px;height:20px;}
.ficha-flecha--izq{left:10px;} .ficha-flecha--der{right:10px;}

.ficha-linea{margin:0 0 8px;font:700 12px/1 "Roboto",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--santely-acento);}
.ficha-datos h1{margin:0 0 14px;font:700 clamp(26px,3.2vw,32px)/1.18 "Roboto",sans-serif;
  color:var(--santely-primario);}
.ficha-resumen{margin:0 0 24px;font-size:18px;line-height:27px;color:var(--santely-texto);}
.ficha-precio{margin:0;font:700 36px/1 "Roboto",sans-serif;color:var(--santely-oscuro);}
.ficha-precio span{display:block;font:400 13px/1.4 "Roboto",sans-serif;color:#A9B3B4;margin-top:6px;}
.ficha-precio--consultar{font-size:24px;}
.ficha-precio__neto{margin:6px 0 0;font-size:14px;color:#A9B3B4;}
.ficha-disponible{display:flex;align-items:center;gap:9px;margin:18px 0 26px;font-size:15px;
  color:var(--santely-oscuro);}
.ficha-disponible span{width:9px;height:9px;border-radius:50%;background:#2DB742;flex:0 0 auto;}
.ficha-disponible--bajo span{background:#E8A33D;}
.ficha-botones{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px;}
.ficha-datos__tabla{margin:0;border-top:1px solid var(--cat-borde);}
.ficha-dato{display:flex;justify-content:space-between;gap:20px;padding:13px 0;
  border-bottom:1px solid var(--cat-borde);}
.ficha-dato dt{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#A9B3B4;}
.ficha-dato dd{margin:0;font-size:15px;font-weight:500;color:var(--santely-oscuro);text-align:right;}
.ficha-verificado{margin:16px 0 0;font-size:13px;color:#A9B3B4;}
.ficha-verificado a{color:var(--santely-primario);}

/* pestañas */
.ficha-pestanas{display:flex;flex-wrap:wrap;gap:0;margin:64px 0 0;border-bottom:1px solid var(--cat-borde);}
.ficha-pestana{background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;
  padding:15px 26px;font:500 16px/1 "Roboto",sans-serif;color:var(--santely-texto);
  transition:color .18s,border-color .18s;}
.ficha-pestana:hover{color:var(--santely-primario);}
.ficha-pestana.is-activa{color:var(--santely-primario);border-bottom-color:var(--santely-acento);font-weight:700;}
.ficha-panel{display:none;padding:34px 0 0;font-size:17px;line-height:1.7;color:#5A6A6C;}
.ficha-panel.is-activa{display:block;}
.ficha-panel h3{font:700 19px/1.3 "Roboto",sans-serif;color:var(--santely-primario);margin:26px 0 10px;}
.ficha-panel p{margin:0 0 15px;}
.ficha-panel ul{margin:0 0 18px;padding-left:22px;}
.ficha-panel li{margin:0 0 9px;}
.ficha-panel strong{color:var(--santely-oscuro);}

.ficha-tabla{overflow-x:auto;}
.ficha-tabla table{width:100%;border-collapse:collapse;font-size:15px;}
.ficha-tabla td{padding:12px 16px;border-bottom:1px solid var(--cat-borde);}
.ficha-tabla tr:first-child td{background:var(--santely-oscuro);color:#fff;font-weight:600;}
.ficha-tabla tr:not(:first-child) td:first-child{color:var(--santely-oscuro);font-weight:500;width:52%;}
.ficha-tabla tr:nth-child(even):not(:first-child){background:#FAFCFC;}

.ficha-docs{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));}
.ficha-doc{display:flex;align-items:center;gap:14px;padding:18px 20px;text-decoration:none;
  background:var(--cat-tarjeta);border:1px solid var(--cat-borde);
  transition:border-color .18s,background .18s;}
.ficha-doc:hover{background:#fff;border-color:var(--santely-primario);}
.ficha-doc__icono{flex:0 0 auto;color:var(--santely-acento);}
.ficha-doc__icono svg{width:26px;height:26px;display:block;}
.ficha-doc__texto{flex:1;display:flex;flex-direction:column;gap:3px;}
.ficha-doc__texto strong{font:700 11px/1 "Roboto",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--santely-acento);}
.ficha-doc__texto span{font-size:14px;color:var(--santely-oscuro);line-height:1.35;}
.ficha-doc__baja{color:var(--santely-primario);font-size:19px;font-weight:700;}

.ficha-relacionados{margin:72px 0 0;}
.ficha-relacionados h2{font:700 32px/1.1 "Roboto",sans-serif;color:var(--santely-primario);margin:0 0 26px;}
.ficha-rel__fila{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.ficha-rel{display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--cat-tarjeta);box-shadow:var(--cat-sombra);padding:0 0 20px;
  transition:transform .2s;}
.ficha-rel:hover{transform:translateY(-3px);}
.ficha-rel__foto{display:block;background:#fff;padding:18px;}
.ficha-rel__foto img{width:100%;height:130px;object-fit:contain;display:block;}
.ficha-rel__titulo{padding:0 18px;font:500 14px/1.35 "Roboto",sans-serif;color:var(--santely-primario);}
.ficha-rel__precio{padding:0 18px;font:700 17px/1 "Roboto",sans-serif;color:var(--santely-oscuro);}
.ficha-volver{margin:56px 0 0;font-size:16px;}
.ficha-volver a{color:var(--santely-primario);text-decoration:none;}
.ficha-volver a:hover{text-decoration:underline;}

@media (max-width:980px){
  .ficha-alto{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:767px){
  .tienda-pagina{padding-left:18px;padding-right:18px;}
  .pag-catalogo .tienda-pagina,[class*="pag-catalogo-"] .tienda-pagina{padding-top:36px;}
  .tienda-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px;}
  .tienda-card__foto{padding:14px;} .tienda-card__foto img{height:128px;}
  .tienda-card__cuerpo{padding:16px 16px 20px;}
  .tienda-cta{padding:30px 24px;}
  .ficha-galeria{grid-template-columns:minmax(0,1fr);}
  .ficha-minis{flex-direction:row;order:2;overflow-x:auto;}
  .ficha-visor{min-height:280px;padding:20px;}
  .ficha-diapo{inset:20px;}
  .ficha-pestana{padding:13px 16px;font-size:15px;}
}

/* ── Aviso normativo dentro de un artículo ── */
.santely-articulo .aviso-norma{
  margin:30px 0;padding:20px 24px;border-radius:10px;
  background:#EAF4F5;border-left:4px solid var(--santely-primario);
}
.santely-articulo .aviso-norma h3{
  margin:0 0 8px;font-size:17px;color:var(--santely-oscuro);
}
.santely-articulo .aviso-norma p{margin:0;font-size:16px;}

/* ── Lecturas relacionadas ── */
.articulo-relacionados{margin:48px 0 0;padding:22px 24px;border:1px solid #E6EDEE;border-radius:10px;}
.articulo-relacionados h2{margin:0 0 12px;font-size:19px;color:var(--santely-oscuro);}
.articulo-relacionados ul{margin:0;padding-left:20px;}
.articulo-relacionados li{margin:0 0 8px;}
.articulo-relacionados a{color:var(--santely-primario);}

/* ── Listas numeradas de los artículos ── */
.santely-articulo ol{margin:0 0 22px;padding-left:22px;}
.santely-articulo ol li{margin:0 0 10px;}

/* El tema trae enlaces en rosa (#CC3366) y estilos propios de <button>.
   Dentro del catálogo mandan los del sitio, no los del tema. */
.tienda-pagina a{text-decoration:none;}
.tienda-pagina a:hover{text-decoration:none;}
.ficha-rel,.ficha-rel:visited{color:var(--santely-primario);text-decoration:none;}
.ficha-rel:hover .ficha-rel__titulo{color:var(--santely-oscuro);}
.ficha-doc,.ficha-doc:visited{color:inherit;text-decoration:none;}
.tienda-card__titulo a:visited{color:var(--santely-primario);}
.ficha-pestana,
.ficha-pestana:hover,
.ficha-pestana:focus,
.ficha-pestana:active,
.ficha-pestana.is-activa{
  background:transparent!important;box-shadow:none;border-radius:0;
  border-top:none;border-left:none;border-right:none;
}
.ficha-pestana:focus{outline:none;}
.ficha-pestana:focus-visible{outline:2px solid var(--santely-acento);outline-offset:-2px;}
.ficha-panel a{color:var(--santely-primario);text-decoration:underline;}
.ficha-miga a:hover{text-decoration:underline;}
.tienda-card__enlace:hover,.ficha-volver a:hover{text-decoration:underline;}

/* Puntos de posición del carrusel: se ve de un golpe cuántas fotos hay */
.ficha-puntos{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:2;
}
.ficha-punto{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(1,106,114,.28);transition:background .2s,transform .2s;
}
.ficha-punto.is-activo{background:var(--santely-primario);transform:scale(1.25);}

/* ── Portada del catálogo ─────────────────────────────────────────
   Misma receta que la de las demás páginas, medida sobre ellas:
   foto a pantalla, velo en degradado #01ABB8 → #014146 al 22 %,
   contenido abajo, título de 48 px y texto de 18 en blanco. */
.cat-portada{
  position:relative;display:flex;align-items:flex-end;
  min-height:62vh;padding:0 0 64px;margin:0 0 56px;overflow:hidden;
  background:url("/assets/img/bg-Santely.jpg") center/cover no-repeat;
}
.cat-portada::before{
  content:"";position:absolute;inset:0;opacity:.62;
  background:linear-gradient(180deg,#01ABB8 0%,#014146 100%);
}
.cat-portada__interior{
  position:relative;z-index:1;width:100%;max-width:var(--santely-ancho);
  margin:0 auto;padding:0 24px;
}
.cat-portada h1{
  margin:0 0 22px;font:700 clamp(34px,5vw,48px)/1 "Roboto",sans-serif;color:#fff;
}
.cat-portada__caja{
  max-width:640px;background:rgba(0,39,42,.42);backdrop-filter:blur(2px);
  border-left:3px solid var(--santely-acento);padding:20px 24px;
}
.cat-portada__caja p{margin:0;font:400 18px/27px "Roboto",sans-serif;color:#fff;}
.cat-portada__botones{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;}
.ficha-btn--claro{
  background:transparent;border:1px solid rgba(255,255,255,.75);color:#fff!important;
}
.ficha-btn--claro:hover{background:#fff;color:var(--santely-oscuro)!important;}

/* la página del catálogo ya no necesita el relleno superior del héroe */
.pag-catalogo .tienda-pagina{padding-top:0;}
.pag-catalogo .cat-portada{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;}

/* ── Filtros agrupados por línea ── */
.cat-filtros{display:flex;flex-direction:column;gap:14px;margin:0 0 24px;}
.cat-filtros__grupo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.cat-filtros__eti{
  font:700 11px/1 "Roboto",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#A9B3B4;min-width:132px;flex:0 0 auto;
}
.cat-chip{
  border:1px solid var(--cat-borde);background:#fff;color:var(--santely-primario);
  border-radius:3px;padding:9px 16px;font:500 14px/1 "Roboto",sans-serif;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.cat-chip:hover{border-color:var(--santely-acento);}
.cat-chip.is-activo{background:var(--santely-primario);border-color:var(--santely-primario);color:#fff;}

@media (max-width:767px){
  .cat-portada{min-height:52vh;padding-bottom:36px;margin-bottom:34px;}
  .cat-portada__interior{padding:0 18px;}
  .cat-portada__caja{padding:16px 18px;}
  .cat-portada__caja p{font-size:16px;line-height:24px;}
  .cat-filtros__eti{min-width:100%;margin-bottom:-4px;}
  .cat-chip{padding:8px 13px;font-size:13px;}
}

/* ── Cifras del inicio en móvil ────────────────────────────────────
   Va al final a propósito: la altura fija de 268 px que iguala las
   tarjetas en escritorio pisaba cualquier ajuste anterior. */
@media (max-width:767px){
  .pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner{
    gap:12px !important;padding-left:16px;padding-right:16px;
  }
  /* Elementor da a cada contenedor un ancho propio; aquí tienen que medir
     lo mismo o las tarjetas quedan de tamaños distintos. */
  .pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 > .e-con-inner > .e-con{
    --width:calc(50% - 6px) !important;
    width:calc(50% - 6px) !important;
    flex:0 0 calc(50% - 6px) !important;
    max-width:calc(50% - 6px) !important;min-width:0 !important;padding:0 !important;
  }
  .santely-cifra{
    height:auto !important;min-height:172px !important;
    padding:18px 10px 16px;gap:4px;border-radius:12px;
  }
  .santely-cifra__marco{height:58px !important;flex:0 0 58px !important;}
  .santely-cifra__icono{max-width:64%;}
  .santely-cifra__numero{font-size:clamp(19px,5.8vw,25px);margin-top:8px;}
  .santely-cifra__pie{font-size:12px;line-height:1.25;min-height:30px;}
}
@media (max-width:360px){
  .santely-cifra{min-height:158px !important;padding:14px 8px 13px;}
  .santely-cifra__marco{height:48px !important;flex:0 0 48px !important;}
  .santely-cifra__pie{font-size:11px;}
}

/* La cadena de contenedores de Elementor (widget → container) llevaba anchos
   propios y las tarjetas salían de tamaños distintos. Se igualan todos. */
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 .elementor-widget,
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 .elementor-widget-container,
.pag-inicio .elementor-11 .elementor-element.elementor-element-dc14ae9 .elementor-widget-image{
  width:100% !important;max-width:100% !important;
  --container-widget-width:100% !important;
}
.santely-cifra{width:100% !important;box-sizing:border-box;}

/* ═══════════════════════════════════════════════════════════════
   USABILIDAD
   Correcciones medidas con 16_auditoria_ux.py sobre el propio sitio.
   ═══════════════════════════════════════════════════════════════ */

/* 1. La página no se mueve de lado. El slider del inicio dibuja sus
      diapositivas 50 px más anchas que la ventana y arrastraba el scroll. */
html,body{overflow-x:hidden;max-width:100%;}
.bdt-ps-slide-img,
.elementor-11 .elementor-element.elementor-element-277ca32{max-width:100% !important;}

/* 2. Contraste. El gris del sitio (#8E8E8E) da 3,28:1 sobre blanco y el
      mínimo legible según WCAG AA es 4,5:1. Se probó #767676, que sobre
      blanco puro da 4,54:1, pero buena parte de este texto no cae sobre
      blanco puro sino sobre las tarjetas grises (#F3F7F8) y ahí bajaba a
      4,17:1. #5F6C6E da 6,1:1 sobre la tarjeta y 6,5:1 sobre blanco, y a
      simple vista sigue siendo el mismo gris suave. */
body,.elementor-kit-5{--e-global-color-text:#5F6C6E;}
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.tienda__bajada,.tienda-card__sku,.ficha-resumen,.santely-articulo{color:#5F6C6E;}
.tienda__nota,.ficha-verificado,.ficha-precio span,.tienda-card__precio span,
.ficha-precio__neto,.ficha-miga,.articulo-meta{color:#5F6C6E;}
.ficha-dato dt,.cat-filtros__eti{color:#5F6C6E;}

/* 3. Zonas táctiles. En móvil, cualquier cosa que se toque necesita 44 px
      de alto (Apple HIG y WCAG 2.5.5). «Cotizar» medía 39, «Ver ficha
      técnica» 18 y «Leer más» 21. */
@media (max-width:767px){
  .elementor-button,
  .ficha-btn,.btn-santely,.tienda-chip,.cat-chip,
  .elementor-post__read-more,
  .tienda-card__enlace,.ficha-volver a,.articulo-volver a,
  .elementor-nav-menu .elementor-item{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .elementor-button{padding-top:12px;padding-bottom:12px;}
  .elementor-post__read-more,.tienda-card__enlace{padding:11px 0;}
  .ficha-mini{width:56px;height:56px;}          /* 88 era cómodo, 56 sigue por encima del mínimo */
  .ficha-flecha{width:48px;height:48px;}
  .ficha-doc{min-height:56px;}
  .santely-wa{width:56px;height:56px;}
}

/* 4. Tamaño de texto. Por debajo de 14 px el móvil obliga a hacer zoom. */
@media (max-width:767px){
  .tienda-card__sku,.tienda__nota,.ficha-verificado,.ficha-miga,
  .articulo-meta,.tienda-card__precio span,.ficha-precio span,
  .elementor-post__meta-data,.elementor-post-date{font-size:14px !important;}
  .tienda-card__marca,.ficha-linea,.ficha-doc__texto strong,
  .cat-filtros__eti{font-size:12px !important;}
}

/* 5. Longitud de línea. Un párrafo de más de 75 caracteres cansa;
      los artículos ya están limitados, el resto se acota aquí. */
.tienda__bajada,.ficha-resumen,.tienda-cta p{max-width:68ch;}
.ficha-panel p,.ficha-panel li{max-width:74ch;}

/* 6. Contraste del turquesa. #01ABB8 con texto blanco da 2,79:1, muy por
      debajo del mínimo. Se oscurece a #017E88 (4,84:1) SOLO donde lleva texto
      blanco encima —botones—; como color decorativo (bordes, subrayados,
      etiquetas pequeñas) se conserva el de la marca. */
.elementor-button,
.ficha-btn,.btn-santely,
.tienda-chip.is-activo,.cat-chip.is-activo{
  background-color:#017E88 !important;
}
.elementor-button:hover,.ficha-btn:hover{background-color:#016A72 !important;}
.ficha-btn--linea,.btn-santely--linea,.ficha-btn--claro{background-color:transparent !important;}
.ficha-btn--linea:hover{background-color:#017E88 !important;}

/* el gris sobre las tarjetas claras necesita un punto más de profundidad */
/* Ojo: el pie de las tarjetas de cifras va sobre el turquesa, no sobre
   blanco. Meterlo aquí lo dejó gris oscuro sobre fondo oscuro, ilegible. */
.tienda-card__sku,.tienda-card__precio span,
.ficha-doc__texto span{color:#6E6E6E;}
.tienda-card .tienda-card__sku{color:#6E6E6E;}

/* 7. El botón de WhatsApp no debe quedar pisado por nada del pie. */
.santely-wa{z-index:10000;}

/* «Ver ficha técnica» iba en cian #00FFFC: 3,85:1 sobre su fondo, ilegible
   para mucha gente. Pasa al turquesa oscuro de la marca. */
.elementor-button-text,
a.elementor-button .elementor-button-text{color:inherit;}
.elementor-widget-button a[href*=".pdf"] .elementor-button-text,
.elementor-button[style*="00FFFC"],
[style*="color:#00FFFC"],[style*="color: #00FFFC"]{color:#FFFFFF !important;}

/* El texto de las tarjetas de cifras va sobre el degradado turquesa: blanco. */
.santely-cifra__numero{color:#fff !important;}
.santely-cifra__pie{color:rgba(255,255,255,.95) !important;}

/* Las fechas de las tarjetas del blog iban en #ADADAD a 12 px sobre blanco:
   2,3:1 de contraste y por debajo del tamaño mínimo legible. */
.elementor-post__meta-data,
.elementor-post-date,
.elementor-post__meta-data span{color:#6E6E6E !important;font-size:14px !important;}

/* ═══════════════════════════════════════════════════════════════
   PORTADAS Y ESPACIADO
   ═══════════════════════════════════════════════════════════════ */

/* A. El texto del héroe va sobre fotografía: BLANCO. La regla de contraste
      que puso el gris #767676 en el texto general lo alcanzó y lo dejó
      ilegible sobre la foto. */
/* OJO: esto va sólo en los héroes, que llevan fotografía de fondo. Escrito
   como «cualquier contenedor con background» pintaba de blanco también el
   texto de las tarjetas claras y lo dejaba invisible. */
.elementor-19 .elementor-element-a6079bc .elementor-widget-text-editor,
.elementor-19 .elementor-element-a6079bc .elementor-widget-text-editor p,
.elementor-19 .elementor-element-a6079bc .elementor-widget-text-editor span,
.elementor-15 .elementor-element-221f4edc .elementor-widget-text-editor,
.elementor-15 .elementor-element-221f4edc .elementor-widget-text-editor p,
.elementor-15 .elementor-element-221f4edc .elementor-widget-text-editor span,
.elementor-17 .elementor-element-41889bf7 .elementor-widget-text-editor,
.elementor-17 .elementor-element-41889bf7 .elementor-widget-text-editor p,
.elementor-17 .elementor-element-41889bf7 .elementor-widget-text-editor span,
.elementor-location-header .elementor-widget-text-editor{color:#fff !important;}
.bdt-slider-excerpt,.bdt-slider-excerpt p,
.bdt-prime-slider .elementor-widget-text-editor p{color:#fff !important;}

/* B. Los héroes miden una pantalla completa y el contenido va abajo: en el
      móvil eso deja entre 267 y 445 px de vacío entre el logotipo y el
      título. Se acortan y el contenido sube. */
@media (max-width:767px){
  .elementor-19 .elementor-element.elementor-element-a6079bc,
  .elementor-15 .elementor-element.elementor-element-221f4edc,
  .elementor-17 .elementor-element.elementor-element-41889bf7,
  .e-con.e-parent[class*="elementor-element-"]{
    --min-height:auto;
  }
  /* sólo los que son portada: los que tienen fotografía de fondo */
  .pag-quienes-somos .elementor-19 .elementor-element-a6079bc,
  .pag-suministro   .elementor-15 .elementor-element-221f4edc,
  .pag-diseno       .elementor-19 .elementor-element-a6079bc,
  .pag-instalacion  .elementor-17 .elementor-element-41889bf7{
    --min-height:66vh !important;
    --padding-top:96px !important;
    --padding-bottom:38px !important;
    --justify-content:flex-end !important;
  }
}

/* C. Contacto no tiene portada, así que la cabecera —que va superpuesta—
      se montaba encima del título «¿Tienes un proyecto en mente?». */
.pag-contacto .elementor-382 .elementor-element.elementor-element-865b0bc{
  --position:relative;--margin-top:0px;--padding-top:16px;--padding-bottom:16px;
  background:linear-gradient(180deg,#00272A 0%,var(--santely-primario) 100%);
}

/* D. El blog abría con 439 px de turquesa plano. Lleva fotografía, como el
      resto de páginas. */
.pag-blog .elementor-1038 .e-con.e-parent:first-of-type,
.pag-blog .elementor-location-single .e-con.e-parent:first-of-type,
.pag-blog .page-content > .e-con:first-child{
  background-image:linear-gradient(180deg,rgba(1,65,70,.72) 0%,rgba(1,106,114,.72) 100%),
                   url("/assets/img/image27-1536x852.png") !important;
  background-size:cover !important;background-position:center !important;
}

/* El índice del blog tampoco tiene portada con foto, así que la cabecera
   superpuesta se montaba sobre su título. Mismo tratamiento que en Contacto
   y en las entradas. */
.pag-blog .elementor-382 .elementor-element.elementor-element-865b0bc{
  --position:relative;--margin-top:0px;--padding-top:16px;--padding-bottom:16px;
  background:linear-gradient(180deg,#00272A 0%,var(--santely-primario) 100%);
}

/* Los enlaces del tema son rosa (#CC3366). En el contenido del sitio van en
   el color de la marca: se veía en los teléfonos y el correo de Contacto. */
.elementor-widget-text-editor a,
.elementor-widget-text-editor a:visited,
.page-content a:not(.btn-santely):not(.ficha-btn),
.elementor-location-footer a:not(.elementor-item){
  color:var(--santely-primario);
}
.elementor-widget-text-editor a:hover{color:var(--santely-acento);}

/* Los enlaces del bloque de contacto van sobre fondo turquesa oscuro: en el
   color de marca quedaban oscuro sobre oscuro. Ahí van en claro. */
.pag-contacto .elementor-widget-text-editor a,
.elementor-widget-text-editor[data-widget_type] a[href^="tel:"],
.elementor-widget-text-editor a[href^="mailto:"],
.elementor-widget-text-editor a[href*="wa.me"]{
  color:#8FE9F0 !important;text-decoration:underline;text-underline-offset:3px;
}
.pag-contacto .elementor-widget-text-editor a:hover{color:#fff !important;}

/* La etiqueta de marca sobre las tarjetas y fichas (OTROS, HIPERCOAX, DAHUA…)
   iba en el turquesa claro: 2,6:1 sobre blanco, casi invisible. */
.tienda-card__marca,.ficha-linea,
.ficha-doc__texto strong{color:#017E88;}

/* En el móvil, la ficha abría con la galería y el título quedaba a 700 px:
   se entraba a un producto y solo se veía una foto. El nombre, el precio y
   los botones van primero; la galería, debajo. */
@media (max-width:900px){
  .ficha-alto{display:flex;flex-direction:column;}
  .ficha-datos{order:1;}
  .ficha-galeria{order:2;}
}

/* Texto que el sitio original dejaba en blanco sobre fondos claros y por tanto
   invisible: la llamada del bloque de presupuesto y la descripción de las
   tarjetas de servicios. */
.elementor-element-6c788a1 p,.elementor-element-6c788a1 span,
.elementor-element-4d249c6f p,.elementor-element-4d249c6f span,
.elementor-element-7216c356 p,.elementor-element-7216c356 span,
.elementor-element-7764373 p,.elementor-element-7764373 span,
.elementor-element-0ef3741 p,.elementor-element-0ef3741 span,
.elementor-element-4e12680 p,.elementor-element-4e12680 span,
.elementor-element-42148304 p,.elementor-element-42148304 span,
.elementor-element-532ace92 p,.elementor-element-532ace92 span,
.elementor-element-79de3fc7 p,.elementor-element-79de3fc7 span,
.elementor-element-9d76ffd p,.elementor-element-9d76ffd span,
.elementor-element-258e14e4 p,.elementor-element-258e14e4 span,
.elementor-element-49e34e76 p,.elementor-element-49e34e76 span{
  color:#5A6A6C !important;
}

/* --- Botones: texto blanco sobre el fondo teal del kit ---------------------
   El WordPress dejó tres grupos de botones ilegibles: los "Más información"
   del inicio y el "Cotizar" del blog heredaban el teal primario (#016A72)
   sobre el teal del botón (#017E88), y los "Ver ficha tecnica" del suministro
   usaban cian (#00FFFC). Contraste 1.1:1 y 3.8:1. El resto del sitio ya usa
   blanco, así que se unifica. -------------------------------------------- */
.elementor-button,
.elementor-button:visited,
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-content-wrapper{ color:#fff !important; }
.elementor-button:hover,.elementor-button:focus-visible{ color:#fff !important; }
.elementor-button svg,.elementor-button .elementor-button-icon{ fill:#fff !important; }

/* --- La cabecera flota sobre el héroe: el texto debe empezar por debajo -----
   El logo del encabezado (contenedor 865b0bc, position:absolute) baja hasta
   los 117 px. Los héroes traían padding-top:96px del WordPress, así que en
   móvil y tablet el H1 quedaba por detrás del logo — medido en 360, 390 y
   768 px de ancho en /diseno/, /suministro/, /quienes-somos/ e /inicio/.
   140px = 117 del logo + 23 de aire; ni un pixel más, que el hueco entre
   logo y titular ya se había corregido una vez por quedar demasiado grande. */
@media (max-width:1024px){
  .elementor-element-a6079bc.e-con,
  .elementor-element-221f4edc.e-con,
  .elementor-element-41889bf7.e-con,
  .elementor-element-d2ed243.e-con{ padding-top:140px !important; }
}
/* El titular del carrusel del inicio choca con el logo en tablet (768-1024). */
@media (min-width:768px) and (max-width:1024px){
  .bdt-prime-slider-content{ padding-top:70px; }
}

/* --- Ficha de producto: datos cotejados y conformidad ----------------------
   El aviso explica por qué un dato de pantalla no coincide con la web de
   Riverline, y la pestaña Conformidad muestra lo que declara el certificado
   sin obligar a abrir el PDF. -------------------------------------------- */
.ficha-aviso{
  margin:0 0 18px;padding:14px 16px;border-radius:8px;font-size:14.5px;line-height:1.6;
  background:#FFF6E8;border-left:4px solid #C98A22;color:#4A3A1E;
}
.ficha-aviso strong{color:#8A5E10;}
.ficha-aviso span{display:block;margin-top:6px;font-size:13px;opacity:.8;}
.ficha-conf__intro{margin:0 0 16px;font-size:15px;line-height:1.65;color:#5A6A6C;}
.ficha-lista{margin:8px 0 20px;padding-left:20px;font-size:15px;line-height:1.9;color:#33474A;}
.ficha-lista li{margin:0;}
.ficha-conf .rvl-ficha td:first-child{width:42%;}

/* Con cuatro pestañas la fila ya no cabe en 360 px: se deja desplazar sola
   en vez de romper el bloque. */
.ficha-pestanas{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.ficha-pestanas::-webkit-scrollbar{height:3px;}
.ficha-pestanas::-webkit-scrollbar-thumb{background:#CBD8D9;border-radius:3px;}
@media (max-width:520px){ .ficha-pestana{white-space:nowrap;flex:0 0 auto;} }

/* --- Filtros del blog ---------------------------------------------------- */
.blog-filtros{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin:0 0 26px;padding:16px 18px;border-radius:10px;
  background:#F3F7F8;border:1px solid #E1EAEB;
}
.blog-filtros__temas{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 340px;}
.blog-chip{
  appearance:none;border:1px solid #CBD8D9;background:#fff;color:#33474A;
  font:inherit;font-size:14px;font-weight:600;line-height:1;
  padding:11px 15px;border-radius:999px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.blog-chip:hover{border-color:var(--santely-primario,#017E88);color:var(--santely-primario,#017E88);}
.blog-chip:active{transform:scale(.97);}
.blog-chip.is-activo{background:var(--santely-primario,#017E88);border-color:var(--santely-primario,#017E88);color:#fff;}
.blog-chip:focus-visible{outline:3px solid #017E88;outline-offset:2px;}
.blog-filtros__orden{display:flex;align-items:center;gap:8px;font-size:14px;color:#5A6A6C;}
.blog-filtros__orden select{
  font:inherit;font-size:14px;padding:10px 12px;border-radius:8px;
  border:1px solid #CBD8D9;background:#fff;color:#33474A;cursor:pointer;min-height:44px;
}
.blog-filtros__conteo{margin:0;font-size:13.5px;color:#6B7B7D;flex-basis:100%;}
@media (max-width:600px){
  .blog-filtros{gap:12px;padding:14px;}
  .blog-filtros__orden{flex:1 1 100%;}
  .blog-filtros__orden select{flex:1;}
}

/* --- Preguntas frecuentes del artículo ----------------------------------- */
.articulo-faq{margin:46px 0 0;}
.articulo-faq h2{margin:0 0 6px;}
.articulo-faq__intro{margin:0 0 18px;color:#5A6A6C;font-size:15.5px;}
.faq-item{
  border:1px solid #E1EAEB;border-radius:10px;background:#fff;margin:0 0 10px;
  transition:border-color .15s,box-shadow .15s;
}
.faq-item[open]{border-color:#B9D2D4;box-shadow:0 2px 12px rgba(1,106,114,.07);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
  font-weight:700;color:#1F3A3D;font-size:16.5px;line-height:1.5;min-height:24px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;
  border-right:2px solid #017E88;border-bottom:2px solid #017E88;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-item summary:focus-visible{outline:3px solid #017E88;outline-offset:-3px;border-radius:10px;}
.faq-item__cuerpo{padding:0 18px 16px;}
.faq-item__cuerpo p{margin:0;color:#3E5457;line-height:1.75;}

/* --- Comentarios --------------------------------------------------------- */
.articulo-comentarios{margin:46px 0 0;padding-top:34px;border-top:1px solid #E1EAEB;}
.articulo-comentarios h2{margin:0 0 8px;}
.comentarios-estado{margin:0 0 18px;color:#6B7B7D;font-size:15px;}
.comentarios-lista{list-style:none;margin:0 0 30px;padding:0;}
.comentario{
  border:1px solid #E1EAEB;border-radius:10px;background:#fff;
  padding:16px 18px;margin:0 0 12px;
}
.comentario__cabecera{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;}
.comentario__cabecera strong{color:#1F3A3D;font-size:15.5px;}
.comentario__cabecera span{color:#5F6C6E;font-size:13.5px;}
.comentario__texto{margin:0;color:#3E5457;line-height:1.75;white-space:pre-wrap;}
.comentario__respuesta{
  margin:14px 0 0;padding:14px 16px;border-radius:8px;
  background:#F3F7F8;border-left:3px solid #017E88;
}
.comentario__respuesta .comentario__cabecera strong{color:#016A72;}

.comentarios-form{background:#F3F7F8;border:1px solid #E1EAEB;border-radius:10px;padding:22px;}
.comentarios-form h3{margin:0 0 6px;font-size:19px;color:#1F3A3D;}
.comentarios-form__nota{margin:0 0 18px;color:#6B7B7D;font-size:14px;line-height:1.6;}
.comentarios-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.comentarios-form label{display:block;font-size:14px;font-weight:600;color:#33474A;margin:0 0 14px;}
.comentarios-form label span{font-weight:400;color:#5F6C6E;}
.comentarios-form input,.comentarios-form textarea{
  display:block;width:100%;box-sizing:border-box;margin-top:6px;
  font:inherit;font-size:15.5px;font-weight:400;padding:12px 14px;min-height:46px;
  border:1px solid #CBD8D9;border-radius:8px;background:#fff;color:#243B3E;
}
.comentarios-form textarea{resize:vertical;line-height:1.6;}
.comentarios-form input:focus,.comentarios-form textarea:focus{
  outline:none;border-color:#017E88;box-shadow:0 0 0 3px rgba(1,126,136,.15);
}
.comentarios-trampa{position:absolute!important;left:-9999px!important;}
.comentarios-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:4px 0 0;}
.comentarios-aviso{font-size:14.5px;line-height:1.5;}
.comentarios-aviso--ok{color:#1B6E3C;}
.comentarios-aviso--error{color:#A33131;}
@media (max-width:600px){
  .comentarios-campos{grid-template-columns:1fr;gap:0;}
  .comentarios-form{padding:18px;}
}
.blog-leido{
  position:absolute;left:14px;top:14px;z-index:2;
  background:#F0B429;color:#3B2C05;font-size:12px;font-weight:700;
  letter-spacing:.02em;padding:6px 11px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.elementor-post__card{position:relative;}

/* --- Repaso de usabilidad, agosto 2026 -----------------------------------
   Medido sobre las 62 páginas ya construidas, en 390 y 1440 px. Lo que
   quedaba por debajo del mínimo AA y la jerarquía de encabezados. -------- */

/* El aviso de derechos del pie iba en gris sobre el teal oscuro: 2,5:1.
   Blanco al 72 % da 6,6:1 y sigue leyéndose como una nota secundaria. */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
footer .elementor-widget-text-editor p{ color:rgba(255,255,255,.78) !important; }

/* Los grises secundarios de las tarjetas y del blog. */
.santely-articulo p,.santely-articulo li,
.elementor-post__excerpt p{ color:#4E5C5E; }
.elementor-post-date,.articulo-meta{ color:#5F6C6E; }

/* Los textos de las tarjetas del blog sobre fondo blanco. */
.elementor-post__excerpt{ color:#4E5C5E; }
/* El resumen de las tarjetas del blog lo pinta Elementor con un selector muy
   específico (.elementor-NNN .elementor-element-XXX .elementor-post__excerpt p)
   y ganaba: quedaba en #777777, 4,48:1. */
.elementor-post__excerpt p,
.elementor-widget-posts .elementor-post__excerpt p{ color:#4E5C5E !important; }
.blog-filtros__conteo{ color:#5F6C6E; }
/* La línea «Publicado el …» del artículo la pintaba Elementor en #8E8E8E. */
.santely-articulo .articulo-meta{ color:#5F6C6E !important; }

/* --- Filtros del blog en móvil: una tira que se desliza -------------------
   Los diez temas apilados ocupaban cuatro filas y empujaban los artículos
   fuera de la primera pantalla. En una tira horizontal caben en una sola. */
@media (max-width:700px){
  .blog-filtros{
    display:block;padding:14px 0 12px;background:transparent;border:0;
    margin-bottom:18px;border-bottom:1px solid #E1EAEB;
  }
  .blog-filtros__temas{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding:2px 16px 12px;margin:0 -16px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .blog-filtros__temas::-webkit-scrollbar{display:none;}
  .blog-chip{flex:0 0 auto;scroll-snap-align:start;}
  .blog-filtros__orden{margin:12px 16px 0;}
  .blog-filtros__conteo{margin:10px 16px 0;}
}

/* --- Movimiento -----------------------------------------------------------
   Lo justo para que la página responda al dedo y al cursor: las tarjetas se
   levantan un poco, el contenido aparece al entrar en pantalla y los botones
   ceden al pulsarlos. Nada que distraiga de leer, y todo se apaga si el
   sistema pide menos movimiento. -------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .elementor-post__card,.tienda-card,.ficha-rel,.comentario{
    transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
  }
  .elementor-post__card:hover,.tienda-card:hover,.ficha-rel:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(1,58,63,.13);
  }
  .elementor-post__card:active,.tienda-card:active{transform:translateY(-1px);}

  .btn-santely,.ficha-btn,.elementor-button{
    transition:transform .14s ease, filter .18s ease, box-shadow .18s ease;
  }
  .btn-santely:hover,.ficha-btn:hover,.elementor-button:hover{
    filter:brightness(1.07);box-shadow:0 6px 18px rgba(1,106,114,.28);
  }
  .btn-santely:active,.ficha-btn:active,.elementor-button:active{transform:scale(.975);}

  .ficha-mini,.ficha-flecha,.ficha-punto{transition:opacity .18s, transform .18s, border-color .18s;}
  .ficha-mini:hover{transform:scale(1.05);}

  /* Aparición al entrar en pantalla. Sólo bloques grandes, un desplazamiento
     corto y una sola vez: es un acento, no una animación. */
  [data-aparece]{opacity:0;transform:translateY(14px);}
  [data-aparece].esta-visible{
    opacity:1;transform:none;
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  }

  .faq-item__cuerpo{animation:faq-abre .22s ease both;}
  @keyframes faq-abre{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
}

/* Sin movimiento: todo llega ya puesto. */
@media (prefers-reduced-motion: reduce){
  [data-aparece]{opacity:1;transform:none;}
}

/* Nota de fuentes al pie del artículo: dice de dónde salen los datos. */
.santely-articulo .fuente-articulo{
  /* 14px con el ancho del artículo da 102 caracteres por línea; el máximo
     cómodo de lectura está en 75-95. Se acota la caja, no la letra. */
  max-width:62ch;
  margin:34px 0 0;padding:14px 16px;border-radius:8px;font-size:14px;line-height:1.65;
  background:#F3F7F8;border-left:3px solid #CBD8D9;color:#5F6C6E;
}
.santely-articulo .fuente-articulo strong{color:#33474A;}

/* Precio en las tarjetas de /suministro/. La página enseñaba dieciséis
   productos sin un solo número y remataba en un botón «Cotizar»: ni un
   comprador ni un modelo de lenguaje podían saber cuánto cuesta nada.
   El número va sobre la fotografía del producto, y las fotos van de la antena
   negra al mástil claro: heredar el color del título dejaba ilegible la mitad
   de las tarjetas. Se le pone su propio fondo, que funciona sobre cualquiera. */
.sum-precio{
  display:inline-block;margin:8px 0 2px;padding:3px 10px;border-radius:6px;
  font:700 18px/1.3 "Roboto",sans-serif;color:#fff;
  background:rgba(20,38,41,.74);
}