/* ============================================================
   RODAMIENTOS CUYO — cat-rodamientos.css
   Página interna: Rodamientos
   ============================================================ */

/* ---- Layout ---- */
.cr-page {
  background: var(--bg);
  min-height: 100vh;
}

.cr-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.cr-wrap {
  /* Separación entre bloques de la página interna (marcas, industrias,
     preguntas frecuentes y cotización). */
  padding: 72px 0 0;
}
.cr-wrap:last-child {
  padding-bottom: 56px;
}
/* La sección de industrias no usa .cr-wrap, así que le damos el mismo aire. */
.industries-wrap {
  margin-top: 72px;
}

/* Card base — igual que las secciones del home */
.cr-card {
  background: var(--white);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: var(--r-hero);
  box-shadow: 0 20px 60px -15px rgba(10,27,51,.08), 0 0 0 1px rgba(255,255,255,.9) inset;
  overflow: hidden;
}

.cr-card--advisory {
  background: linear-gradient(135deg, #f0f5ff 0%, #f7f9ff 100%);
  border-color: rgba(27,83,212,.12);
}

.cr-card--cta {
  background: var(--dark);
  border-color: transparent;
  box-shadow: 0 32px 80px -16px rgba(10,27,51,.28);
}

/* ---- Breadcrumb ---- */
.cr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  padding: 32px 32px 0;
}
.cr-breadcrumb a {
  color: var(--muted);
  transition: color .15s;
}
.cr-breadcrumb a:hover { color: var(--blue); }
.cr-breadcrumb svg { color: var(--muted); flex-shrink: 0; }
.cr-breadcrumb span { color: var(--dark); font-weight: 600; }
.cr-breadcrumb--standalone { padding: 24px 0 0; }


/* ---- Section header pattern ---- */
.cr-section-head {
  margin-bottom: 40px;
}
.cr-section-head--center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.cr-eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
/* Trazo naranja debajo del texto, ancho exacto del eyebrow */
.cr-eyebrow::after {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
}
.cr-eyebrow::before { display: none; }

/* El span suelto ya no se necesita */
.cr-accentbar { display: none; }

.cr-section-title {
  font-family: var(--font);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.cr-section-title em {
  font-style: normal;
  color: var(--blue);
}
.cr-section-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
}
.cr-section-head--center .cr-section-desc {
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   HERO — título en texto real + los rodamientos como imágenes
   independientes (antes era una sola imagen plana).
   Las medidas se derivan de --hc (alto útil del hero) para que la
   composición se mantenga igual en cualquier alto de pantalla.
   ============================================================ */
.rod-hero{
  /* Se resta el alto de la fila de confianza (SKF/años/sucursales) para
     que el título y las piezas, que se anclan al piso del hero, nunca
     crezcan lo suficiente como para meterse debajo de esa fila en
     pantallas más bajas. */
  --hc: calc(100vh - var(--nav-h) - 130px);
  position: relative;
  height: 100vh;
  padding-top: calc(var(--nav-h) + 130px);
  background: #fff;
  overflow: hidden;
}
@supports (height: 100svh){
  .rod-hero{ --hc: calc(100svh - var(--nav-h) - 130px); height: 100svh; }
}

/* Fila de confianza (SKF / años / sucursales): posicionada aparte, no
   entra en el flujo bottom-anchored de .rod-hero__stage (esa altura está
   calibrada en píxeles contra el diseño de referencia y no debe tocarse). */
.rod-hero__badges{
  position: absolute;
  top: calc(var(--nav-h) + 116px);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 44px;
  padding: 0 24px;
}
.rod-hero__badge{
  display: flex;
  align-items: center;
  gap: 16px;
}
.rod-hero__badge-logo{
  display: block;
  width: auto;
  height: 72px;
  border-radius: 6px;
}
.rod-hero__badge-icon{ color: var(--blue); flex-shrink: 0; width: 36px; height: 36px; }
.rod-hero__badge-num{
  font-family: var(--font);
  font-weight: 800;
  font-size: 46px;
  color: #041635;
  letter-spacing: -.01em;
}
.rod-hero__badge-text{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #041635;
}
.rod-hero__badges-divider{
  width: 1px;
  height: 46px;
  background: rgba(4,22,53,.15);
}

/* Entrada escalonada: cada badge y divisor aparece con un pequeño
   deslizamiento hacia abajo, uno después del otro. */
@keyframes rod-badge-in{
  from{ opacity: 0; transform: translateY(-14px); }
  to{ opacity: 1; transform: translateY(0); }
}
.rod-hero__badge,
.rod-hero__badges-divider{
  opacity: 0;
  animation: rod-badge-in 1.1s var(--ease) forwards;
}
.rod-hero__badge:nth-child(1){ animation-delay: .25s; }
.rod-hero__badges-divider:nth-child(2){ animation-delay: .45s; }
.rod-hero__badge:nth-child(3){ animation-delay: .55s; }
.rod-hero__badges-divider:nth-child(4){ animation-delay: .75s; }
.rod-hero__badge:nth-child(5){ animation-delay: .85s; }
@media (prefers-reduced-motion: reduce){
  .rod-hero__badge, .rod-hero__badges-divider{ animation: none; opacity: 1; }
}

.rod-hero__stage{
  /* alto de referencia de las piezas: manda el ancho de pantalla, con
     tope por alto para que nunca se salgan de la sección. */
  --pieza: min(20.7vw, calc(var(--hc) * .41));
  position: relative;
  height: var(--hc);
  padding: 0 4.3vw calc(var(--hc) * .18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* La regla azul va en el flujo, arriba del título: así el hueco entre las
   dos es siempre el mismo (5,2% del alto útil, como en la referencia) en
   cualquier proporción de pantalla. Los 5,5vw compensan lo que el título
   sobresale por encima de su caja al estirarse en vertical. */
.rod-hero__line{
  display: block;
  width: 100%;
  height: 2px;
  background: var(--blue);
  margin-bottom: calc(var(--hc) * .052 + 5.5vw);
}

.rod-hero__title{
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .82;
  text-align: center;
  color: #041635;
  /* Medido contra el diseño de referencia: ahí las letras tienen
     ancho/alto = 6,53 y el asta vertical es 0,167 del alto de la mayúscula.
     Inter Black (900) a 12,5vw estirado 1,535 en vertical da 6,53 y 0,174:
     es lo más parecido sin sumar una tipografía nueva al sitio. */
  font-size: min(12.5vw, calc(var(--hc) * .26));
  transform: scaleY(1.535);
  transform-origin: 50% 100%;
  transition: opacity .1s linear;
}

/* "Instrumentos" es más largo que los títulos de una palabra de otras
   categorías (Soportes, Lubricación): al tamaño por defecto no entra en
   una línea. Se achica lo justo para que quepa sin partirse. */
#rod-hero-title{
  font-size: min(10.2vw, calc(var(--hc) * .22));
  white-space: nowrap;
}

/* Fila de piezas: todas apoyadas en la misma línea de piso y
   montadas sobre la parte baja de las letras. */
.rod-hero__row{
  position: relative;
  z-index: 2;
  margin-top: calc(var(--pieza) * -.105);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4vw;
  transform-origin: 50% 100%;
}

/* Entrada escalonada: cada pieza sube desde abajo con fade-in, una
   después de la otra, en el mismo orden en que están montadas. */
@keyframes rod-piece-in{
  from{ opacity: 0; transform: translateY(50px); }
  to{ opacity: 1; transform: translateY(0); }
}
.rod-hero__piece{
  width: auto;
  flex-shrink: 0;
  pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(6,42,89,.13));
  opacity: 0;
  animation: rod-piece-in 1s var(--ease) forwards;
}
@media (prefers-reduced-motion: reduce){
  .rod-hero__piece{ animation: none; opacity: 1; }
}

/* Alturas casi iguales a propósito: como todas apoyan en la misma línea de
   piso, si una es mucho más baja no llega a tapar las letras. */
.rod-hero__piece--termometro    { height: calc(var(--pieza) * 1.01); animation-delay: .3s; }
.rod-hero__piece--tacometro     { height: calc(var(--pieza) * 1.05); animation-delay: .42s; }

/* El estroboscopio se ve de frente, más ancho que las otras piezas: va
   parado en la fila igual que las demás, pero con una altura menor para
   que el ancho que le sale no se coma a las otras piezas. */
.rod-hero__piece--estroboscopio{ height: calc(var(--pieza) * .92); animation-delay: .54s; }

/* Las chapas calibradas se ven de costado, casi cuadradas: igual que el
   estroboscopio, con una altura menor para que no se coman a las demás. */
.rod-hero__piece--chapas{ height: calc(var(--pieza) * .8); animation-delay: .66s; }

.rod-hero__cue{
  position: absolute;
  left: 50%;
  bottom: calc(var(--hc) * .035);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.rod-hero__cue span:first-child{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
}
.rod-hero__arrow{
  display: flex;
  justify-content: center;
  color: var(--blue);
  animation: rod-arrow-bounce 1.8s ease-in-out infinite;
}
@keyframes rod-arrow-bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@media (prefers-reduced-motion: reduce){ .rod-hero__arrow{ animation: none } }


/* ============================================================
   BÚSQUEDA RÁPIDA
   ============================================================ */
.cr-search-section {
  padding: 52px 0 48px;
}

.cr-search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.cr-search-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.cr-search-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,27,51,.10);
  border-color: rgba(27,83,212,.2);
}
.cr-search-card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,83,212,.08);
  border-radius: 12px;
  color: var(--blue);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.cr-search-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}
.cr-search-card__text {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}
.cr-search-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 4px;
  transition: gap .18s var(--ease);
}
.cr-search-card__link:hover { gap: 10px; }

.cr-cta-row {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}


/* ============================================================
   FAMILIAS DE RODAMIENTOS
   ============================================================ */
.cr-families-inner {
  padding: 52px 32px 48px;
}

.cr-fam-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cr-fam-card {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10,27,51,.04);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.cr-fam-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(10,27,51,.11);
  border-color: rgba(27,83,212,.28);
}

/* Zona de imagen: blanco puro, overflow hidden para contener el scale */
.cr-fam-card__photo-wrap {
  height: 220px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(148,163,184,.12);
}

/* PNG transparente: ocupa todo el espacio disponible con scale suave */
.cr-fam-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(0.82);
  transition: transform .3s var(--ease);
}

.cr-fam-card:hover .cr-fam-card__photo {
  transform: scale(0.88);
}

.cr-fam-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  background: #ffffff;
}

/* Ícono oculto: la imagen cumple ese rol visual */
.cr-fam-card__icon { display: none; }

.cr-fam-card__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.cr-fam-card__text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}
.cr-fam-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 2px;
  transition: gap .18s var(--ease);
}
.cr-fam-card__link:hover { gap: 9px; }


/* ============================================================
   APLICACIONES ESPECIALES
   ============================================================ */
.cr-apps-section {
  padding: 52px 0 48px;
}

.cr-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cr-app-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cr-app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10,27,51,.09);
}
.cr-app-card__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,83,212,.07);
  border-radius: 9px;
  color: var(--blue);
  flex-shrink: 0;
}
.cr-app-card__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dark);
}
.cr-app-card__text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}
.cr-app-card__note {
  font-size: 11.5px;
  color: var(--blue);
  font-weight: 500;
  margin-top: auto;
  padding-top: 4px;
}


/* ============================================================
   BLOQUE ASESORAMIENTO TÉCNICO
   ============================================================ */
.cr-advisory-inner {
  padding: 52px 32px 48px;
}

.cr-advisory-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.cr-advisory__lead {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 28px;
}

.cr-advisory-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cr-advisory-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cr-advisory-item__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,83,212,.1);
  border-radius: 9px;
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
}
.cr-advisory-item__body strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.cr-advisory-item__body p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Right visual side */
.cr-advisory-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: end;
  padding-top: 40px;
}
.cr-advisory-stat {
  background: rgba(27,83,212,.06);
  border: 1.5px solid rgba(27,83,212,.12);
  border-radius: 16px;
  padding: 20px 22px;
}
.cr-advisory-stat__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.cr-advisory-stat__text {
  font-size: 14px;
  color: var(--dark);
  line-height: 1.6;
}

.cr-advisory-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}


/* ============================================================
   TABLA COMPARATIVA
   ============================================================ */
.cr-table-inner {
  padding: 52px 32px 48px;
}

.cr-table-scroll {
  overflow-x: auto;
  border-radius: 12px;
  border: 1.5px solid var(--border);
}

.cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cr-table th {
  background: rgba(10,27,51,.04);
  color: var(--mid);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.cr-table td {
  padding: 14px 18px;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.cr-table tr:last-child td { border-bottom: none; }
.cr-table tr:hover td { background: rgba(27,83,212,.03); }
.cr-table td:first-child {
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
}
.cr-table td .cr-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--blue);
  background: rgba(27,83,212,.07);
  border-radius: 100px;
  padding: 2px 10px;
}

/* Mobile: hide table, show cards */
.cr-table-cards { display: none; }


/* ============================================================
   INDUSTRIAS
   ============================================================ */
.cr-ind-section {
  padding: 52px 0 48px;
}

.cr-ind-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cr-ind-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mid);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 10px 18px;
  transition: all .2s var(--ease);
}
.cr-ind-tag svg { color: var(--blue); flex-shrink: 0; }
.cr-ind-tag:hover {
  border-color: rgba(27,83,212,.3);
  background: rgba(27,83,212,.05);
  color: var(--dark);
  transform: translateY(-2px);
}


/* ============================================================
   MARCAS
   ============================================================ */
.cr-brands-inner {
  padding: 48px 32px 44px;
}
.cr-brands-inner .brands {
  margin-top: 32px;
}


/* ============================================================
   FAQ
   ============================================================ */
.cr-faq-inner {
  padding: 52px 32px 48px;
}

.cr-faq-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
}

.cr-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}
.cr-faq-eyebrow-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  flex-shrink: 0;
}
.cr-faq-eyebrow-line {
  width: 26px; height: 1.5px;
  background: var(--blue);
  flex-shrink: 0;
}

.cr-faq-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cr-faq-dots {
  flex-shrink: 0;
  color: rgba(27,83,212,.28);
  margin-top: 4px;
}
.cr-faq-title {
  margin: 0;
  font-family: 'Anton', var(--font), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .96;
}
.cr-faq-title-a {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--blue);
}
.cr-faq-title-b {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--dark);
}
.cr-faq-title-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin: 18px 0 22px;
  background: var(--blue);
  border-radius: 2px;
}

.cr-faq-side__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.cr-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cr-faq-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 22px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.cr-faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--blue);
  opacity: 0;
  transition: opacity .2s;
}
.cr-faq-item.open {
  border-color: rgba(27,83,212,.35);
  background: rgba(27,83,212,.045);
}
.cr-faq-item.open::before { opacity: 1; }

.cr-faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
  transition: color .15s;
}
.cr-faq-item__q:hover { color: var(--blue); }
.cr-faq-item.open .cr-faq-item__q { color: var(--blue); }

.cr-faq-item__icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(27,83,212,.4);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--blue);
}
.cr-faq-item__icon-v {
  transform-origin: center;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.cr-faq-item.open .cr-faq-item__icon-v {
  transform: scaleY(0);
  opacity: 0;
}

.cr-faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease), padding .3s var(--ease);
}
.cr-faq-item.open .cr-faq-item__a {
  max-height: 260px;
}
.cr-faq-item__a p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  padding: 0 0 12px;
}

.cr-faq-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.cr-faq-wa:hover {
  background: #1fb958;
  transform: translateY(-1px);
}
.cr-faq-wa svg { flex-shrink: 0; }


/* ============================================================
   CTA FINAL — "Contanos qué rodamiento necesitás"
   ============================================================ */
.cr-quote{ padding: clamp(28px, 4vw, 44px); }

.cr-quote__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cr-quote__brand{ display: flex; align-items: center; gap: 18px; }
.cr-quote__logo{
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: left center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(27,83,212,.08);
}
.cr-quote__title{
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--dark);
}
.cr-quote__title-accent{ color: var(--blue); }

.cr-quote__trust{ display: flex; align-items: center; gap: clamp(20px, 2.6vw, 34px); }
.cr-quote__trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-left: clamp(20px, 2.6vw, 34px);
  border-left: 1px solid rgba(10,27,51,.1);
  text-align: center;
}
.cr-quote__trust-item:first-child{ padding-left: 0; border-left: 0; }
.cr-quote__trust-item svg{ width: 26px; height: 26px; color: var(--blue); }
.cr-quote__trust-item span{ font-size: 11px; font-weight: 700; line-height: 1.35; color: var(--muted); }

.cr-quote__subtitle{
  margin: 26px 0 34px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.cr-quote__subtitle strong{
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 2px;
}

.cr-quote__body{
  display: grid;
  grid-template-columns: 1fr minmax(280px, 320px);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

/* ---- Formulario ---- */
.cr-quote__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.cr-quote__col{
  border: 1px solid rgba(148,163,184,.4);
  border-radius: 18px;
  padding: 22px 22px 6px;
}
.cr-quote__col-title{
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
  padding: 0 0 16px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(148,163,184,.35);
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.cr-quote__col-title-text{
  background: rgba(27,83,212,.1);
  color: var(--blue);
  padding: 4px 10px;
  border-radius: 6px;
}
.cr-quote__col-title em{
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  margin-left: 2px;
  text-transform: none;
  letter-spacing: normal;
}
.cr-quote__col-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  flex-shrink: 0;
}
.cr-quote__col-icon svg{ width: 16px; height: 16px; }

.cr-quote__field{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.cr-quote__field-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--blue);
  flex-shrink: 0;
}
.cr-quote__field-icon svg{ width: 16px; height: 16px; }
.cr-quote__field-body{
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}
.cr-quote__field-label{ font-size: 12px; font-weight: 700; color: var(--dark); }
.cr-quote__required{ font-style: normal; color: #e0442f; }
.cr-quote__field-label em{ font-style: normal; font-weight: 500; color: var(--muted); }
.cr-quote__field-extra{ margin-top: 8px; }
.cr-quote__field-body input,
.cr-quote__field-body select,
.cr-quote__field-body textarea{
  width: 100%;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--dark);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color .15s, background .15s;
}
.cr-quote__field-body input:focus,
.cr-quote__field-body select:focus,
.cr-quote__field-body textarea:focus{
  outline: none;
  border-color: rgba(27,83,212,.45);
  background: var(--white);
}
.cr-quote__field-body select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.cr-quote__field-body textarea{ resize: none; }
.cr-quote__field--area .cr-quote__field-icon{ margin-top: 2px; }

.cr-quote__submit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s;
}
.cr-quote__submit:hover{ background: #1644b8; transform: translateY(-1px); }
.cr-quote__privacy{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- Banner "Estamos para ayudarte" ---- */
.cr-quote__help{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 128px;
  margin-top: 26px;
  padding: 22px 160px 22px 24px;
  border-radius: 16px;
  background: linear-gradient(120deg, #eef4ff 0%, #f5f8ff 100%);
  overflow: hidden;
}
.cr-quote__help-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  flex-shrink: 0;
}
.cr-quote__help-icon svg{ width: 20px; height: 20px; }
.cr-quote__help-copy strong{ display: block; font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.cr-quote__help-copy p{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cr-quote__help-dots{ position: absolute; top: 10px; right: 120px; color: rgba(27,83,212,.14); }
.cr-quote__help-img{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 155px;
  height: 100%;
  object-fit: cover;
  object-position: 45% 18%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
  pointer-events: none;
}

/* ---- Mockup de celular con WhatsApp ---- */
.cr-quote__phone{ display: flex; justify-content: center; }
.cr-quote__phone-device{
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 18.5;
  display: flex;
  flex-direction: column;
  background: #0b1220;
  border-radius: 34px;
  padding: 8px;
  box-shadow: 0 30px 70px -20px rgba(10,27,51,.35);
  overflow: hidden;
}
.cr-quote__phone-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
  background: #08403a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 22px 22px 0 0;
}
.cr-quote__phone-bar-icons{ display: flex; align-items: center; gap: 5px; }
.cr-quote__phone-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 12px;
  background: #08403a;
  color: #fff;
}
.cr-quote__phone-head svg:first-child{ flex-shrink: 0; opacity: .9; }
.cr-quote__phone-avatar{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: left center; background: #fff; }
.cr-quote__phone-who{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.cr-quote__phone-who strong{ font-size: 13.5px; font-weight: 700; }
.cr-quote__phone-who em{ font-style: normal; font-size: 10.5px; opacity: .75; }
.cr-quote__phone-head svg:nth-last-child(-n+2){ flex-shrink: 0; opacity: .9; }

.cr-quote__phone-chat{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 10px;
  background: #e9e2d8;
  overflow-y: auto;
}
.cr-quote__bubble{
  max-width: 90%;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.45;
  color: #111;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.cr-quote__bubble p{ margin: 0; }
.cr-quote__bubble--out{ align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.cr-quote__bubble--in{ align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.cr-quote__preview-fields{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-quote__preview-field{ display: flex; align-items: flex-start; gap: 5px; transition: opacity .2s ease; }
.cr-quote__preview-field--sep{ margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,.09); }
.cr-quote__preview-field--empty{ opacity: .45; }
.cr-quote__preview-value{ transition: opacity .2s ease; }
.cr-quote__preview-field--empty .cr-quote__preview-value{ font-style: italic; }
.cr-quote__preview-icon{ display: flex; margin-top: 1px; color: #3a5f4a; flex-shrink: 0; }
.cr-quote__preview-icon svg{ width: 11px; height: 11px; }
.cr-quote__bubble-time{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 9.5px;
  color: rgba(0,0,0,.45);
}
.cr-quote__bubble--out .cr-quote__bubble-time{ color: #5b9d5b; }

.cr-quote__phone-input{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f0f2f5;
  color: #8a8f95;
  border-radius: 0 0 26px 26px;
}
.cr-quote__phone-input span{ flex: 1 1 auto; font-size: 11.5px; }
.cr-quote__phone-input svg{ flex-shrink: 0; }
.cr-quote__phone-mic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #25d366;
  flex-shrink: 0;
}


/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 1024px) {
  .cr-fam-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .cr-container { padding: 0 24px; }

  .cr-why__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cr-why__dots { display: none; }

  .cr-search-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-fam-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cr-app-grid { grid-template-columns: repeat(2, 1fr); }

  .cr-advisory-layout { grid-template-columns: 1fr; gap: 28px; }
  .cr-advisory-visual { display: none; }

  .cr-faq-layout { grid-template-columns: 1fr; }
  .cr-faq-side { display: none; }

  .cr-quote__body { grid-template-columns: 1fr; }
  .cr-quote__phone { display: none; }

  .cr-table { display: none; }
  .cr-table-cards { display: flex; flex-direction: column; gap: 12px; }
  .cr-table-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
  }
  .cr-table-card__name {
    font-size: 14px; font-weight: 700; color: var(--dark);
    margin-bottom: 8px;
  }
  .cr-table-card__row {
    display: flex; gap: 8px; margin-bottom: 4px;
    font-size: 13px;
  }
  .cr-table-card__row span:first-child {
    color: var(--muted); min-width: 100px; flex-shrink: 0;
  }
  .cr-table-card__row span:last-child { color: var(--dark); }
}

@media (max-width: 600px) {
  .cr-card { border-radius: 24px; }
  .cr-families-inner,
  .cr-advisory-inner,
  .cr-table-inner,
  .cr-brands-inner,
  .cr-faq-inner { padding: 36px 18px 32px; }
  .cr-quote { padding: 28px 18px 26px; }

  .cr-breadcrumb { padding: 20px 18px 0; }

  .cr-search-grid { grid-template-columns: 1fr; gap: 12px; }
  .cr-fam-grid { grid-template-columns: 1fr; gap: 12px; }
  .cr-app-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cr-fam-card__photo-wrap { height: 160px; }
  .cr-fam-card__photo { max-height: 120px; }

  .cr-section-title { font-size: 1.55rem; }

  .cr-quote__head { flex-direction: column; align-items: flex-start; }
  .cr-quote__trust { padding-left: 0; }
  .cr-quote__cols { grid-template-columns: 1fr; gap: 14px; }
  .cr-quote__help { flex-direction: column; align-items: flex-start; padding: 20px; }
  .cr-quote__help-dots, .cr-quote__help-img { display: none; }

  .cr-ind-tag { font-size: 13px; padding: 9px 15px; }
}


/* ============================================================
   RODAMIENTOS DE ALTO RENDIMIENTO — clon adaptado de la franja
   "Why Apple is the best place to buy Mac." de apple.com, con el
   contenido reemplazado por las familias de producto reales del
   sitio (mismos datos que la sección "Familias de rodamientos"
   más abajo en esta página).
   Grilla estática de 6 tarjetas (3 arriba, 3 abajo), sin carrusel.
   ============================================================ */
.cr-why{
  background: #f5f5f7;
  padding: 96px 0;
}
.cr-why__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 40px;
}
.cr-why__mark{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cr-why__mark-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  flex-shrink: 0;
}
.cr-why__mark-line{
  width: 110px; height: 1.5px;
  background: var(--blue);
  flex-shrink: 0;
}
.cr-why__title-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cr-why__dots{
  flex-shrink: 0;
  color: rgba(27,83,212,.28);
  margin-top: 6px;
}
.cr-why__title{
  font-family: 'Anton', var(--font), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: .94;
  margin: 0;
}
.cr-why__title-a{ display: block; color: var(--dark); }
.cr-why__title-b{ display: block; color: var(--dark); }
.cr-why__title-b em{ font-style: normal; color: var(--blue); }
.cr-why__title-rule{
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  background: var(--blue);
  border-radius: 2px;
}
.cr-why__catlink{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
  transition: gap .2s var(--ease);
}
.cr-why__catlink:hover{ gap: 9px; }

.cr-why__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cr-why__card{
  position: relative;
  height: 590px;
  background: var(--white);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 28px;
  box-shadow: 0 20px 60px -15px rgba(10,27,51,.07);
  padding: 40px 32px 64px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cr-why__pattern{
  position: absolute;
  top: 22px;
  right: 22px;
  color: rgba(27,83,212,.14);
  pointer-events: none;
}
.cr-why__head-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.cr-why__icon{
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-why__rule{
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue);
  margin: 10px 0 14px;
}
.cr-why__headline-accent{ color: var(--blue); }
.cr-why__wa{
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37,211,102,.1);
  color: #1da851;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cr-why__wa svg{ flex: 0 0 auto; width: 11px; height: 11px; }
.cr-why__wa:hover{
  background: #25d366;
  color: #fff;
}
.cr-why__headline{
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0;
  min-height: 3.84em;
}
.cr-why__body{
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  min-height: 11em;
}


/* La pieza flota sobre el costado derecho de la mitad inferior de la
   tarjeta, con la sombra puesta por CSS (drop-shadow), nunca horneada
   en la imagen. */
.cr-why__img{
  margin: auto 0 0 auto;
  max-width: 72%;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(10,27,51,.16));
}
.cr-why__img--center{
  margin: auto auto 0 auto;
  max-width: 84%;
}
.cr-why__img--lg{
  max-width: 100%;
  max-height: 205px;
  margin-bottom: 18px;
}

.cr-why__img-group{
  margin: auto 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  max-width: 100%;
  width: 100%;
  justify-content: center;
}
.cr-why__img-group--wide{
  gap: 22px;
}
.cr-why__img-group .cr-why__img{
  margin: 0;
  max-width: none;
  max-height: 178px;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}


/* Pie de la grilla: aviso ("hay más modelos") + CTA de asesoramiento
   por WhatsApp, uno al lado del otro debajo de las 6 cards, mismo
   formato y tamaño entre los dos. */
.cr-why__foot{
  margin-top: 44px;
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}
.cr-why__note,
.cr-why__askwa{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 380px;
  border-radius: 16px;
  padding: 20px 24px;
}
.cr-why__note{
  background: #fef6e6;
  border: 1px solid #f2d489;
  border-left: 4px solid #e8a723;
}
.cr-why__askwa{
  background: rgba(37,211,102,.08);
  border: 1px solid rgba(37,211,102,.25);
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cr-why__askwa:hover{
  background: rgba(37,211,102,.14);
  border-color: rgba(37,211,102,.4);
}
.cr-why__note-icon,
.cr-why__askwa-icon{
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-why__note-icon{
  background: #f5b83d;
  color: #7a4a04;
}
.cr-why__askwa-icon{
  background: #25d366;
  color: #fff;
}
.cr-why__askwa-icon svg{ width: 17px; height: 17px; }
.cr-why__note p{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #7a4a04;
  text-align: left;
  line-height: 1.4;
}
.cr-why__note p span{
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: #8a5c12;
  margin-top: 2px;
}
.cr-why__note-link{
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #a3690c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cr-why__note-link:hover{ color: #7a4a04; }
.cr-why__askwa-text{
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.cr-why__askwa-text strong{
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.cr-why__hl{
  color: #1da851;
  font-weight: 800;
}
.cr-why__askwa-arrow{
  flex-shrink: 0;
  color: #1da851;
}


/* ============================================================
   CONFÍAN EN NOSOTROS — usa .cr-wrap/.cr-card (igual que la
   sección de MARCAS más abajo) para ocupar todo el ancho de la
   página. El marquee en sí (.brands/.brands__track/.brand-card)
   ya existe en style.css (usado en el hero de index.html); acá
   solo se agrega el encabezado. Sin bordes redondeados: al ir de
   punta a punta de la pantalla, el radio dejaba ver el fondo gris
   asomando en las esquinas. */
.cr-trust__card{ border-radius: 0; border-left: 0; border-right: 0; }
.cr-trust__head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  padding: 28px 40px;
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.cr-trust__intro{ flex: 0 1 auto; }
.cr-trust__eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 18px;
}
.cr-trust__eyebrow-line{
  width: 32px;
  height: 2px;
  background: var(--blue);
  opacity: .5;
}
.cr-trust__eyebrow-dots{ color: rgba(27,83,212,.16); margin-left: 6px; }
.cr-trust__title{
  font-family: 'Archivo Black', var(--font), sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0;
}
.cr-trust__title-accent{ color: var(--blue); }
.cr-trust__wa{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px 10px 10px;
  max-width: 340px;
  background: rgba(27,83,212,.06);
  border: 1px solid rgba(27,83,212,.2);
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dark);
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cr-trust__wa:hover{
  background: rgba(27,83,212,.12);
  border-color: rgba(27,83,212,.35);
}
.cr-trust__wa-icon{
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(27,83,212,.12);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cr-trust__title-rule{
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue);
  margin-top: 16px;
}
.cr-trust__visual{
  flex: 0 1 auto;
  width: 430px;
  max-width: 100%;
  height: 255px;
  margin: 0;
  overflow: hidden;
}
.cr-trust__visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Variante con tres piezas: la principal y dos más chicas al lado, todas
   centradas como grupo dentro del mismo recuadro. */
.cr-trust__visual--trio{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cr-trust__visual--trio img{
  width: auto;
  height: auto;
  max-height: 100%;
}
.cr-trust__visual-main{
  max-height: 52% !important;
  align-self: center;
}
.cr-trust__visual-small{
  max-height: 62% !important;
  align-self: center;
}
.cr-trust__divider{
  position: relative;
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: rgba(148,163,184,.3);
}
.cr-trust__divider::before{
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.cr-trust__brand{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
  flex: 1 1 auto;
}
.cr-trust__badge{
  height: 150px;
  width: auto;
  border-radius: 8px;
}
.cr-trust__iso{
  height: 134px;
  width: auto;
}
.cr-trust__marquee.brands{ margin-top: 0; padding: 14px 0 24px; }

/* Footer de ancho completo con fondo gris clarito, sólo en las páginas
   internas de categoría. La card blanca original quedaba con el mismo tono
   que el fondo de la página detrás, así que no se notaba ningún cambio:
   ahora se quita el recuadro blanco flotante y el gris cubre de borde a
   borde, con el contenido centrado adentro por padding. */
.footer-outer{
  max-width: none;
  padding: 0;
  background: var(--bg);
}
.footer-card{
  max-width: none;
  margin: 0;
  background: var(--bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 56px max(24px, calc((100% - 1400px) / 2)) 0;
}

@media (max-width: 900px){
  .footer-card{ padding-top: 40px; }
}
@media (max-width: 580px){
  .footer-card{ padding-top: 32px; }
}