/* =========================================================
   SINTEC — estilos propios
   Reemplaza los 5 bloques <style> que se repetían en header.php
   ========================================================= */

:root {
  --sintec-azul:       #2B86C5;
  --sintec-azul-medio: #1B6CE5;
  --sintec-azul-osc:   #0F3D8A;
  --sintec-gris:       #4c4c4d;
}

/* ---- Botones sociales flotantes ---- */
.social-float,
.social-float-left {
  position: fixed;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.social-float      { right: 20px; bottom: 90px; flex-direction: column; }
.social-float-left { left: 20px;  bottom: 20px; flex-direction: row; }

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  background-color: var(--sintec-gris);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  transition: background-color .25s ease, transform .25s ease;
}

.float-btn:hover,
.float-btn:focus-visible {
  color: #fff;
  transform: translateY(-3px);
}

.float-wa { width: 58px; height: 58px; font-size: 28px; background-color: var(--sintec-azul); }
.float-wa:hover { background-color: #128C7E; }
.float-ig:hover { background-color: #cb2184; }
.float-fb:hover { background-color: #0766ff; }
.float-li:hover { background-color: #0a66c2; }
.float-tt:hover { background-color: #000; }

@media (max-width: 767px) {
  .social-float-left { display: none; }
  .social-float { right: 14px; bottom: 14px; }
}

/* Respeta a quien pidió menos movimiento (accesibilidad WCAG 2.1) */
@media (prefers-reduced-motion: reduce) {
  .float-btn { transition: none; }
  .float-btn:hover { transform: none; }
}

/* ---- Redes en el footer ---- */
.footer-social-inline {
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.footer-social-inline a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(43, 134, 197, .12);
  color: var(--sintec-azul);
  transition: background .25s ease, color .25s ease;
}

.footer-social-inline a:hover {
  background: var(--sintec-azul);
  color: #fff;
}

/* ---- Accesibilidad: foco visible ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sintec-azul);
  outline-offset: 2px;
}

/* ---- Ítem activo del menú ---- */
.template-main-menu > ul > li.active > a { color: var(--sintec-azul); }

/* ---- Video de fondo del home ---- */
.video-bg-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Página 404 ---- */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 20px 80px;
}

.error-404 .codigo {
  font-size: clamp(72px, 14vw, 160px);
  font-weight: 700;
  line-height: 1;
  color: var(--sintec-azul);
  margin-bottom: 10px;
}

.error-404 .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* ---- Casos sin imagen todavía: placa con el nombre ---- */
.caso-placa {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--sintec-azul-osc), var(--sintec-azul-medio));
  color: #fff;
  text-align: center;
  padding: 16px;
}

.caso-placa span {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ---- Etiquetas de servicio en las tarjetas de caso ---- */
.caso-sector { font-size: 13px; font-weight: 600; color: var(--sintec-azul); margin-bottom: 6px; }
.caso-servicios { margin-bottom: 8px; }
.caso-servicios .tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  border-radius: 12px;
  background: rgba(43, 134, 197, .12);
  color: var(--sintec-azul-osc);
}
.caso-resumen { font-size: 14px; line-height: 1.5; }

/* ---- Tarjetas de plataforma propia ---- */
.producto-claim { font-weight: 600; color: var(--sintec-azul); margin-bottom: 12px; }

/* ---- Banner del home: los <h3> decorativos ahora son <p> ---- */
.banner-eyebrow {
  color: #fff;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .9;
}

.banner-lead {
  color: #fff;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 24px;
}

/* ---- Tarjetas de plataforma en el home ---- */
.service-box-layout2 .item-claim {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 12px;
}

.heading-sub-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  margin-bottom: 8px;
}

/* ---- Razones para elegirnos ---- */
.razon-box {
  padding: 22px;
  height: 100%;
  background: rgba(255, 255, 255, .95);
  border-radius: 8px;
  margin-bottom: 20px;
}

.razon-box .item-label {
  font-weight: 700;
  color: var(--sintec-azul-osc);
  margin-bottom: 8px;
  font-size: 16px;
}

.razon-box p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   AJUSTES DE LA SEGUNDA REVISIÓN DEL HOME
   ========================================================= */

/* ---- 1. Tarjetas de servicio a la misma altura --------------------
   Antes cada tarjeta medía según su texto y quedaban desalineadas.
   La regla se limita a las columnas que contienen tarjetas: aplicarla
   a TODA columna convertía también los encabezados en contenedores
   flex y dejaba el título y el párrafo uno al lado del otro.        */
.service-wrap-layout2 .row {
  align-items: stretch;
}

.service-wrap-layout2 .row > [class*="col-"]:not(.encabezado-bloque) {
  display: flex;
  margin-bottom: 30px;
}

.service-wrap-layout2 .row > [class*="col-"]:not(.encabezado-bloque) > div {
  width: 100%;
}

/* El encabezado de bloque se queda como texto normal, centrado */
.encabezado-bloque {
  display: block !important;
  text-align: center;
}

.encabezado-bloque .heading-sub-title,
.encabezado-bloque p {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.encabezado-bloque p {
  max-width: 640px;
}

.service-box-layout2 {
  display: flex;
  flex-direction: column;
  align-items: center;   /* en columna flex, text-align:center ya no centra */
  height: 100%;
}

/* El enlace "Ver más" se pega abajo para que todos queden a la misma altura */
.service-box-layout2 .item-btn {
  margin-top: auto;
}

/* El título ocupa un alto mínimo para que los iconos queden alineados */
.service-box-layout2 .item-title {
  min-height: 3.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* El icono NO lleva width:100%: la plantilla lo define como 80x80 con
   border-radius 50%, y estirarlo lo convierte en elipse. El centrado
   ya lo da el align-items:center del contenedor.                     */
.service-box-layout2 > p {
  width: 100%;
  text-align: center;
}

/* ---- Menú comprimido en portátiles (992px a 1400px) ---------------
   El menú tenía el mismo tamaño que en pantallas grandes y se
   amontonaba. Se reduce tipografía y separación en ese rango.       */
@media (min-width: 992px) and (max-width: 1400px) {
  .template-main-menu > ul > li > a {
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .temp-logo img {
    max-width: 140px;
  }
  .header-action-items .item-btn {
    font-size: 13px;
    padding: 10px 16px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .template-main-menu > ul > li > a {
    font-size: 13px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ---- 2. Logos de plataformas propias ---- */
.plataforma-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  width: 100%;
  margin-bottom: 18px;
}

.plataforma-logo img {
  max-height: 100px;
  max-width: 280px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .plataforma-logo     { height: 90px; }
  .plataforma-logo img { max-height: 80px; max-width: 220px; }
}

.plataforma-nombre {
  font-size: 34px;
  font-weight: 700;
  color: var(--sintec-azul-osc);
  height: 110px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* ---- 3. Tarjetas de "¿Por qué elegirnos?" ---- */
.feature-wrap-layout1 .text-white { color: #fff !important; }

.subtitulo-claro {
  max-width: 720px;
  margin: 0 auto;
  opacity: .92;
}

.razon-card {
  height: 100%;
  padding: 30px 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(2px);
  text-align: center;
  transition: background .25s ease, transform .25s ease;
}

.razon-card:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-4px);
}

.razon-icono {
  font-size: 40px;
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
}

.razon-titulo {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.razon-texto {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .razon-card { transition: none; }
  .razon-card:hover { transform: none; }
}

/* ---- 4. Logos de clientes a color -------------------------------
   La plantilla les aplicaba grayscale(100%) y solo se veían a color
   al pasar el mouse, lo que en móvil no ocurre nunca.              */
.brand-box-layout1,
.brand-box-layout1 img {
  -webkit-filter: none !important;
          filter: none !important;
  opacity: 1 !important;
}

.brand-box-layout1 img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  transition: transform .25s ease;
}

.brand-box-layout1:hover img {
  transform: scale(1.06);
}

/* ---- 5. Checkbox de autorización de datos -----------------------
   Heredaba .form-control de la plantilla, que fuerza width:100% y
   una altura fija: por eso salía como un cuadro enorme.            */
.check-datos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
  margin: 0;
}

.check-datos input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  flex-shrink: 0;
  accent-color: var(--sintec-azul);
}

.check-datos span { flex: 1; }

/* ---- 6. Sin botón "volver arriba": WhatsApp baja a su sitio ---- */
.social-float { bottom: 24px; }

@media (max-width: 767px) {
  .social-float { right: 16px; bottom: 16px; }
}


/* =========================================================
   AJUSTES DE LA QUINTA REVISIÓN
   ========================================================= */

/* ---- Banner: los textos quedaron descentrados --------------------
   La plantilla trae .main-banner-box-layout1 p { width: 80% } sin
   márgenes automáticos. Antes esos textos eran <h3> (ancho completo)
   y la regla nunca aplicaba; al pasarlos a <p> se activó y quedaron
   pegados a la izquierda dentro de un contenedor centrado.          */
.main-banner-box-layout1 p,
.banner-eyebrow,
.banner-lead {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.banner-eyebrow {
  width: 100%;
  max-width: none;
  margin-bottom: 10px !important;
}

.banner-lead {
  max-width: 700px;
  margin-bottom: 30px !important;
}

/* ---- Tarjetas de servicio más compactas -------------------------
   La plantilla usa padding 50px 30px; se reduce y se ajustan los
   espacios internos para bajar la altura sin apretar el contenido. */
.service-wrap-layout2 .service-box-layout2 {
  padding: 34px 22px 28px;
}

.service-wrap-layout2 .service-box-layout2 .item-icon {
  margin-bottom: 18px;
}

.service-wrap-layout2 .service-box-layout2 .item-title {
  min-height: 0;
  margin-bottom: 16px;
  font-size: 19px;
  line-height: 1.35;
}

.service-wrap-layout2 .service-box-layout2 .item-btn {
  margin-top: auto;
  padding-top: 6px;
}

/* ---- Logos de plataformas: otro escalón más ---- */
.plataforma-logo {
  height: 130px;
  margin-bottom: 14px;
}

.plataforma-logo img {
  max-height: 120px;
  max-width: 330px;
}

.plataforma-nombre {
  height: 130px;
  font-size: 40px;
}

@media (max-width: 767px) {
  .plataforma-logo     { height: 100px; }
  .plataforma-logo img { max-height: 90px; max-width: 250px; }
  .plataforma-nombre   { height: 100px; font-size: 32px; }
}

/* La tarjeta de plataforma también más baja */
.service-wrap-layout2 .row.mt-4 .service-box-layout2 {
  padding: 26px 22px 24px;
}

.service-wrap-layout2 .service-box-layout2 .item-claim {
  margin-bottom: 16px;
}


/* =========================================================
   AJUSTES DE LA SEXTA REVISIÓN
   ========================================================= */

/* ---- Menú: "Sobre / Nosotros" y "Casos de / Éxito" se partían ----
   En pantallas de portátil el ancho disponible no alcanzaba y el
   navegador quebraba el texto. Se impide el salto de línea y se
   ajusta la separación para que los 5 ítems quepan en una fila.   */
.template-main-menu > ul > li > a,
.template-main-menu > ul > li > a > span {
  white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1600px) {
  .template-main-menu > ul > li > a {
    font-size: 14px;
    padding-left: 11px;
    padding-right: 11px;
  }
  .temp-logo img { max-width: 135px; }
  .header-action-items .item-btn {
    font-size: 13px;
    padding: 9px 16px;
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1299px) {
  .template-main-menu > ul > li > a {
    font-size: 13px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .temp-logo img { max-width: 120px; }
  .header-action-items .item-btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ---- Logos de plataformas: mismo tamaño visual los tres ---------
   `max-height` no agranda una imagen: solo la limita. Con `height`
   los tres llenan el mismo alto sin importar su tamaño original.  */
.plataforma-logo {
  height: 120px;
  margin-bottom: 16px;
}

.plataforma-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 767px) {
  .plataforma-logo { height: 95px; }
}

/* =========================================================
   SOBRE NOSOTROS
   ========================================================= */

/* ---- Contadores más grandes ---- */
.about-wrap-layout7 .progress-box-layout4 .counting-text {
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 700;
  line-height: 1;
  color: var(--sintec-azul);
  margin-bottom: 6px;
}

.about-wrap-layout7 .progress-box-layout4 .item-label {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--sintec-gris);
}

.about-wrap-layout7 .progress-box-layout4 {
  text-align: center;
  padding: 0 10px;
}

@media (max-width: 767px) {
  .about-wrap-layout7 .progress-box-layout4 { margin-bottom: 26px; }
}

/* ---- Credencial bajo el cargo, en las fichas del equipo ---- */
.team-box-layout1 .credencial {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(43, 134, 197, .12);
  color: var(--sintec-azul-osc);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

/* ---- Frase que aparece sobre la foto ---- */
.team-box-layout1 .frase-equipo {
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  padding: 0 14px;
}

.texto-justificado { text-align: justify; }

/* ---- Reemplazo de los atributos align= obsoletos ---- */
.texto-justify { text-align: justify; }
.texto-left    { text-align: left; }
.texto-right   { text-align: right; }
.texto-center  { text-align: center; }

/* =========================================================
   CASOS DE ÉXITO — caso en profundidad
   ========================================================= */
.caso-detalle { padding-right: 20px; }

.caso-etiqueta {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(43, 134, 197, .12);
  color: var(--sintec-azul-osc);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.caso-nombre {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--sintec-azul-osc);
}

.caso-subtitulo {
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--sintec-azul);
}

.caso-detalle p { line-height: 1.65; margin-bottom: 0; }

.caso-imagen img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15, 61, 138, .16);
}

@media (max-width: 991px) {
  .caso-detalle  { padding-right: 0; margin-bottom: 34px; }
}

/* ---- Casos alternados: separación y orden en móvil ---- */
.caso-bloque {
  margin-bottom: 70px;
}

.caso-bloque:last-child {
  margin-bottom: 0;
}

/* En móvil la imagen siempre va primero, sin importar el orden en escritorio */
@media (max-width: 991px) {
  .caso-bloque { flex-direction: column-reverse; margin-bottom: 50px; }
  .caso-bloque .caso-imagen { margin-bottom: 28px; }
}

.caso-detalle .list-item-layout1 li {
  line-height: 1.55;
  margin-bottom: 7px;
}

/* ---- Placa para casos en detalle que aún no tienen captura ---- */
.caso-placa-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sintec-azul-osc), var(--sintec-azul-medio));
  box-shadow: 0 14px 40px rgba(15, 61, 138, .16);
}

.caso-placa-grande span {
  color: #fff;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- Fichas de caso: sin lupa, con botón al sitio ----------------
   OJO: la plantilla posiciona .item-content en absolute, centrado
   verticalmente, como capa sobre la imagen. Por eso NO se le puede
   poner display:flex ni margin-top:auto al botón: se sale de la
   ficha. El botón va en el flujo normal, centrado como el resto.  */
.gallery-box-layout2 .item-figure.sin-zoom,
.gallery-box-layout2 .item-figure.sin-zoom img {
  cursor: default;
}

/* La plantilla oculta cada hijo de .item-content por separado y lo
   revela en :hover. El botón es un <a> que no coincide con ninguno
   de esos selectores, así que hay que darle el mismo tratamiento. */
.gallery-box-layout2 .caso-boton {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .3s ease-in-out;
}

/* :focus-within lo revela también al navegar con teclado */
.gallery-box-layout2:hover .caso-boton,
.gallery-box-layout2:focus-within .caso-boton {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all .3s ease-in-out;
}

.caso-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 9px 20px;
  border-radius: 22px;
  background: var(--sintec-azul);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.gallery-box-layout2 .caso-boton:hover,
.gallery-box-layout2 .caso-boton:focus-visible {
  background: var(--sintec-azul-osc);
  color: #fff !important;
  text-decoration: none;
}

.caso-boton i { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .gallery-box-layout2 .caso-boton,
  .gallery-box-layout2:hover .caso-boton { transition: none; transform: none; }
}

/* =========================================================
   SOLUCIONES — tarjetas de plataforma y piezas de marca
   ========================================================= */

/* ---- Plataformas propias: el logo manda, no el texto ---- */
.tarjeta-plataforma {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 26px;
  margin-bottom: 30px;
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15, 61, 138, .06);
  transition: box-shadow .25s ease, transform .25s ease;
}

.tarjeta-plataforma:hover {
  box-shadow: 0 14px 40px rgba(15, 61, 138, .13);
  transform: translateY(-4px);
}

.plataforma-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef2f7;
}

.plataforma-cabecera img {
  height: 100%;
  max-height: 58px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.plataforma-texto {
  font-size: 30px;
  font-weight: 700;
  color: var(--sintec-azul-osc);
}

.plataforma-claim {
  font-weight: 600;
  color: var(--sintec-azul);
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 18px;
}

.plataforma-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}

.plataforma-lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.5;
}

.plataforma-lista li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sintec-azul);
}

.plataforma-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  align-items: center;
}

.btn-secundario {
  font-size: 13px;
  font-weight: 600;
  color: var(--sintec-azul);
  text-decoration: none;
}

.btn-secundario:hover { color: var(--sintec-azul-osc); text-decoration: underline; }

/* ---- Piezas de identidad de marca ---- */
.pieza-marca {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 24px 24px;
  margin-bottom: 30px;
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.pieza-marca:hover {
  border-color: var(--sintec-azul);
  box-shadow: 0 12px 34px rgba(15, 61, 138, .1);
  transform: translateY(-4px);
}

.pieza-destacada {
  border-color: var(--sintec-azul);
  box-shadow: 0 10px 30px rgba(43, 134, 197, .14);
}

.pieza-etiqueta {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 12px;
  background: var(--sintec-azul);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pieza-icono {
  font-size: 40px;
  line-height: 1;
  color: var(--sintec-azul);
  margin-bottom: 14px;
}

.pieza-nombre {
  font-size: 17px;
  font-weight: 700;
  color: var(--sintec-azul-osc);
  margin-bottom: 10px;
  line-height: 1.35;
}

.pieza-detalle {
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
}

.pieza-precio {
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.pieza-precio .desde {
  display: block;
  font-size: 12px;
  color: #7c8798;
  margin-bottom: 2px;
}

.pieza-precio strong {
  font-size: 26px;
  font-weight: 700;
  color: var(--sintec-azul-osc);
}

.pieza-precio .iva {
  font-size: 12px;
  color: #7c8798;
  margin-left: 4px;
}

.pieza-cotizar {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 20px;
  background: var(--sintec-azul);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pieza-cotizar:hover { background: var(--sintec-azul-osc); text-decoration: none; }

.nota-precios {
  font-size: 13px;
  color: #7c8798;
  margin: 10px 0 24px;
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-plataforma, .pieza-marca { transition: none; }
  .tarjeta-plataforma:hover, .pieza-marca:hover { transform: none; }
}