/**
 * CMS FO — Smart Materials 3D (child Hummingbird)
 *
 * Base tipográfica CMS + layouts «Nuestra filosofía» y «Distribuidores».
 * Iconos filosofía: máscaras CSS (data-URI Heroicons Outline). Sin <svg> en el HTML
 * del CMS (TinyMCE los elimina). Filtros distribuidores: cms-distributors.js.
 */

/* -------------------------------------------------------------------------
   Tokens locales (scoped)
   ------------------------------------------------------------------------- */

.page-content--cms {
  --sm-cms-dark: var(--sm-footer-bg);
  --sm-cms-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  --sm-cms-blue: #4a90d9;
  --sm-cms-pink: #e07a9a;
  --sm-cms-lime: #7cb342;
  --sm-cms-soft-blue: #e8f1fb;
  --sm-cms-soft-orange: #fff0e6;
  --sm-cms-soft-green: var(--sm-green-soft);
  --sm-cms-soft-pink: #fce8ef;
  --sm-cms-soft-lime: #eef6e4;
  --sm-cms-stat: #a8d5ce;

  /* Heroicons Outline 24 — máscaras (stroke negro → currentColor vía mask) */
  --sm-mask-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5'/%3E%3C/svg%3E");
  --sm-mask-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
  --sm-mask-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'/%3E%3C/svg%3E");
  --sm-mask-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z'/%3E%3C/svg%3E");
  --sm-mask-cog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183.582.495.644.869l.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
  --sm-mask-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z'/%3E%3C/svg%3E");
  --sm-mask-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z'/%3E%3C/svg%3E");
  --sm-mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Base CMS (legal, condiciones, etc.)
   ------------------------------------------------------------------------- */

.page-content--cms.rich-text {
  color: var(--sm-ink);
  font-family: var(--sm-font);
  font-size: var(--sm-fs-base);
  line-height: var(--lh-body-lg);
}

.page-content--cms.rich-text > :first-child {
  margin-top: 0;
}

.page-content--cms.rich-text h2,
.page-content--cms.rich-text h3 {
  margin: var(--sm-space-xl) 0 var(--sm-space-md);
  color: var(--sm-ink);
  font-family: var(--sm-font);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.page-content--cms.rich-text h2 {
  font-size: var(--sm-fs-xl);
}

.page-content--cms.rich-text h3 {
  font-size: var(--sm-fs-lg);
}

.page-content--cms.rich-text p {
  margin: 0 0 var(--sm-space-md);
}

.page-content--cms.rich-text a {
  color: var(--sm-green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-content--cms.rich-text a:hover,
.page-content--cms.rich-text a:focus {
  color: var(--sm-green-hover);
}

.page-content--cms.rich-text ul,
.page-content--cms.rich-text ol {
  margin: 0 0 var(--sm-space-md);
  padding-left: var(--space-4);
}

.page-content--cms.rich-text li + li {
  margin-top: var(--sm-space-xs);
}

/* Filosofía: el bloque aporta su propio ritmo (anula tipografía genérica) */
.page-content--cms-philosophy.rich-text {
  padding-inline: 0;
  padding-bottom: var(--sm-space-xl);
}

.page-content--cms-philosophy.rich-text .sm-philosophy h1,
.page-content--cms-philosophy.rich-text .sm-philosophy h2,
.page-content--cms-philosophy.rich-text .sm-philosophy h3,
.page-content--cms-philosophy.rich-text .sm-philosophy p,
.page-content--cms-philosophy.rich-text .sm-philosophy ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content--cms-philosophy.rich-text > .sm-philosophy {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Nuestra filosofía
   ------------------------------------------------------------------------- */

.sm-philosophy {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-xl);
  color: var(--sm-ink);
  font-family: var(--sm-font);
}

.sm-philosophy__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sm-space-md);
}

@media (min-width: 768px) {
  .sm-philosophy {
    gap: var(--space-8);
  }

  .sm-philosophy__inner {
    padding-inline: var(--sm-space-lg);
  }
}

/* --- Hero (full-bleed). También si TinyMCE dejó solo __hero-inner --------- */

.sm-philosophy__hero,
.sm-philosophy > .sm-philosophy__hero-inner {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: var(--sm-space-xl) 0;
  background-color: var(--sm-cms-dark);
  background-image: url("/img/cms/bg-bloque-filamentos-3d.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--sm-white);
  overflow: hidden;
}

/* Overlay oscuro: legibilidad del texto blanco sobre la foto */
.sm-philosophy__hero::before,
.sm-philosophy > .sm-philosophy__hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(28, 28, 28, 0.72);
  pointer-events: none;
}

.sm-philosophy__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sm-space-md);
}

.sm-philosophy > .sm-philosophy__hero-inner {
  /* el propio bloque ya es full-bleed; el padding horizontal lo aporta él */
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .sm-philosophy__hero,
  .sm-philosophy > .sm-philosophy__hero-inner {
    padding: var(--space-8) 0 var(--space-8);
  }

  .sm-philosophy__hero-inner,
  .sm-philosophy > .sm-philosophy__hero-inner {
    padding-inline: var(--sm-space-lg);
  }
}

.sm-philosophy__badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--sm-space-md);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: rgba(218, 234, 232, 0.15);
  color: var(--sm-cms-stat);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: normal;
  line-height: var(--lh-h2);
  text-transform: none;
}

.sm-philosophy__title {
  margin: 0 0 var(--sm-space-md) !important;
  color: var(--sm-white);
  font-size: var(--sm-fs-2xl);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-h2);
}

.sm-philosophy__lead {
  margin: 0 0 var(--sm-space-xl) !important;
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--sm-fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
}

.sm-philosophy__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm-space-lg) var(--sm-space-md);
  margin: 0 !important;
  padding: var(--sm-space-lg) 0 0 !important;
  list-style: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .sm-philosophy__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sm-space-md);
  }
}

.sm-philosophy__stat {
  margin: 0 !important;
}

.sm-philosophy__stat-value {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--sm-cms-stat);
  font-size: var(--sm-fs-xl);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-h2);
}

.sm-philosophy__stat-label {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--sm-fs-sm);
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--lh-h2);
  text-transform: none;
}

/* --- Section headers ---------------------------------------------------- */

.sm-philosophy__eyebrow {
  margin: 0 0 var(--sm-space-sm) !important;
  color: var(--sm-green);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: normal;
  line-height: var(--lh-h2);
  text-transform: none;
}

.sm-philosophy__heading {
  margin: 0 0 var(--sm-space-lg) !important;
  color: var(--sm-ink);
  font-size: var(--sm-fs-xl);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-h2);
}

/* --- Mission / Vision --------------------------------------------------- */

.sm-philosophy__mv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-md);
}

@media (min-width: 768px) {
  .sm-philosophy__mv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sm-space-lg);
  }
}

.sm-philosophy__card {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-sm);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  background-color: var(--sm-white);
  box-shadow: var(--sm-cms-shadow);
}

.sm-philosophy__card-title {
  margin: 0 !important;
  color: var(--sm-ink);
  font-size: var(--sm-fs-lg);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-philosophy__card-text {
  margin: 0 !important;
  color: var(--sm-ink);
  font-size: var(--sm-fs-sm);
  font-weight: 400;
  line-height: var(--lh-body-lg);
  text-align: left;
}

.sm-philosophy__card-text + .sm-philosophy__card-text {
  margin-top: var(--sm-space-sm) !important;
}

/* Iconos: círculo + glifo por máscara CSS (sin SVG en el CMS) */
.sm-philosophy__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.sm-philosophy__icon::before {
  content: "";
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  background-color: currentColor;
  -webkit-mask: var(--sm-icon-mask) center / contain no-repeat;
  mask: var(--sm-icon-mask) center / contain no-repeat;
}

.sm-philosophy__icon--mission {
  --sm-icon-mask: var(--sm-mask-flag);
  background-color: var(--sm-cms-soft-blue);
  color: var(--sm-cms-blue);
}

.sm-philosophy__icon--vision {
  --sm-icon-mask: var(--sm-mask-eye);
  background-color: var(--sm-cms-soft-orange);
  color: var(--sm-sale);
}

.sm-philosophy__icon--rdi {
  --sm-icon-mask: var(--sm-mask-rocket);
  background-color: var(--sm-cms-soft-green);
  color: var(--sm-green);
}

.sm-philosophy__icon--quality {
  --sm-icon-mask: var(--sm-mask-badge);
  background-color: var(--sm-cms-soft-lime);
  color: var(--sm-cms-lime);
}

.sm-philosophy__icon--efficiency {
  --sm-icon-mask: var(--sm-mask-cog);
  background-color: var(--sm-cms-soft-green);
  color: var(--sm-green);
}

.sm-philosophy__icon--warmth {
  --sm-icon-mask: var(--sm-mask-heart);
  background-color: var(--sm-cms-soft-pink);
  color: var(--sm-cms-pink);
}

.sm-philosophy__icon--team {
  --sm-icon-mask: var(--sm-mask-users);
  background-color: var(--sm-cms-soft-orange);
  color: var(--sm-sale);
}

.sm-philosophy__icon--europe {
  --sm-icon-mask: var(--sm-mask-star);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--sm-white);
}

/* --- Fabricación propia ------------------------------------------------- */

.sm-philosophy__factory {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-lg);
  align-items: center;
  padding: var(--sm-space-xl) var(--sm-space-lg);
  border-radius: var(--radius-md);
  background-color: var(--sm-cms-dark);
  color: var(--sm-white);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.03) 10px,
    rgba(255, 255, 255, 0.03) 11px
  );
  overflow: hidden;
}

@media (min-width: 992px) {
  .sm-philosophy__factory {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    padding: var(--space-7) var(--space-7);
    gap: var(--sm-space-xl);
  }
}

.sm-philosophy__factory .sm-philosophy__badge {
  background-color: rgba(218, 234, 232, 0.15);
  color: var(--sm-cms-stat);
}

/* Títulos en bloques oscuros: ganan a .rich-text h2/h3 (color ink) */
.page-content--cms.rich-text .sm-philosophy__factory-title,
.sm-philosophy__factory-title {
  margin: 0 0 var(--sm-space-md) !important;
  color: var(--sm-white) !important;
  font-size: var(--sm-fs-xl);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-h2);
}

.page-content--cms.rich-text .sm-philosophy__factory-text,
.sm-philosophy__factory-text {
  margin: 0 0 var(--sm-space-lg) !important;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body-lg);
}

.sm-philosophy__factory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm-space-md);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sm-philosophy__factory-stat-value {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--sm-cms-stat);
  font-size: var(--sm-fs-lg);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-philosophy__factory-stat-label {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--sm-fs-sm);
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--lh-h2);
  text-transform: none;
}

.sm-philosophy__bars {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-3);
  height: 12rem;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

@media (min-width: 992px) {
  .sm-philosophy__bars {
    display: flex;
  }
}

.sm-philosophy__bar {
  width: 2.5rem;
  border-radius: var(--radius-pill);
}

.sm-philosophy__bar--1 {
  height: 55%;
  background-color: var(--sm-sale);
}

.sm-philosophy__bar--2 {
  height: 100%;
  background-color: var(--sm-green);
}

.sm-philosophy__bar--3 {
  height: 72%;
  background-color: var(--sm-cms-blue);
}

/* --- Valores ------------------------------------------------------------ */

.sm-philosophy__values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-space-md);
}

@media (min-width: 576px) {
  .sm-philosophy__values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .sm-philosophy__values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sm-space-lg);
  }
}

.sm-philosophy__value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sm-space-sm);
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  background-color: var(--sm-white);
  box-shadow: var(--sm-cms-shadow);
  min-height: 100%;
}

.sm-philosophy__value-num {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  font-weight: 600;
  letter-spacing: normal;
  line-height: var(--lh-h2);
}

.sm-philosophy__value-title {
  margin: 0 !important;
  color: var(--sm-ink);
  font-size: var(--sm-fs-base);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-philosophy__value-text {
  margin: 0 !important;
  color: var(--sm-ink);
  font-size: var(--sm-fs-sm);
  font-weight: 400;
  line-height: var(--lh-body-lg);
}

.sm-philosophy__value-text + .sm-philosophy__value-text {
  margin-top: var(--sm-space-xs) !important;
}

.sm-philosophy__value--featured {
  background-color: var(--sm-cms-dark);
  border-color: transparent;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.03) 10px,
    rgba(255, 255, 255, 0.03) 11px
  );
}

.sm-philosophy__value--featured .sm-philosophy__value-num {
  color: rgba(255, 255, 255, 0.35);
}

.page-content--cms.rich-text .sm-philosophy__value--featured .sm-philosophy__value-title,
.sm-philosophy__value--featured .sm-philosophy__value-title {
  color: var(--sm-white) !important;
}

.page-content--cms.rich-text .sm-philosophy__value--featured .sm-philosophy__value-text,
.sm-philosophy__value--featured .sm-philosophy__value-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* --- Equipo ------------------------------------------------------------- */

.sm-philosophy__team {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sm-space-md);
  padding: var(--sm-space-lg);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  background-color: var(--sm-white);
  box-shadow: var(--sm-cms-shadow);
}

@media (min-width: 768px) {
  .sm-philosophy__team {
    flex-direction: row;
    align-items: center;
    gap: var(--sm-space-lg);
    padding: var(--space-5) var(--space-6);
  }
}

.sm-philosophy__avatars {
  display: flex;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sm-philosophy__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  border: 3px solid var(--sm-white);
  margin: 0 0 0 -var(--space-3) !important;
  font-size: 0;
  line-height: 0;
}

.sm-philosophy__avatar:first-child {
  margin-left: 0 !important;
}

.sm-philosophy__avatar--1 {
  background-color: var(--sm-cms-blue);
}

.sm-philosophy__avatar--2 {
  background-color: var(--sm-sale);
}

.sm-philosophy__avatar--3 {
  background-color: var(--sm-green);
}

.sm-philosophy__avatar--4 {
  background-color: var(--sm-cms-pink);
}

.sm-philosophy__team-body {
  min-width: 0;
}

.sm-philosophy__team-title {
  margin: 0 0 var(--space-1) !important;
  color: var(--sm-ink);
  font-size: var(--sm-fs-lg);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-philosophy__team-text {
  margin: 0 !important;
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body);
}

@media (prefers-reduced-motion: reduce) {
  .sm-philosophy__factory,
  .sm-philosophy__value--featured {
    background-image: none;
  }
}

/* -------------------------------------------------------------------------
   Distribuidores (id_cms=20)
   Misma voz que contacto: columna de la página, tokens de custom.css.
   ------------------------------------------------------------------------- */

.page-content--cms-distributors.rich-text {
  padding: 0 0 var(--space-7);
  color: var(--sm-text);
}

.page-content--cms-distributors.rich-text .sm-distributors ul,
.page-content--cms-distributors.rich-text .sm-distributors li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content--cms-distributors.rich-text > .sm-distributors {
  margin: 0;
}

.page-content--cms-distributors.rich-text .sm-distributors a {
  text-decoration: none;
}

.sm-distributors {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: 0;
  color: var(--sm-text);
  font-family: var(--sm-font-base);
}

@media (min-width: 768px) {
  .sm-distributors {
    gap: var(--space-8);
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__inner {
  width: 100%;
}

.page-content--cms-distributors.rich-text .sm-distributors__hero {
  position: relative;
  width: auto;
  margin: 0;
  padding: var(--space-5) 0 var(--space-5);
  background: none;
  text-align: left;
}

.page-content--cms-distributors.rich-text .sm-distributors__hero::before,
.page-content--cms-distributors.rich-text .sm-distributors__hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.page-content--cms-distributors.rich-text .sm-distributors__hero::before {
  background-color: color-mix(in srgb, var(--sm-teal-light) 58%, var(--sm-white));
  background-image: url("/img/cms/bobinas.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.page-content--cms-distributors.rich-text .sm-distributors__hero::after {
  background: color-mix(in srgb, var(--sm-white) 84%, var(--sm-teal-light));
}

.page-content--cms-distributors.rich-text .sm-distributors__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  text-align: left;
}

@media (min-width: 992px) {
  .page-content--cms-distributors.rich-text .sm-distributors__hero {
    padding: var(--space-7) 0 var(--space-6);
  }

  .page-content--cms-distributors.rich-text .sm-distributors__hero::before {
    background-position: right center;
    background-size: cover;
  }

  .page-content--cms-distributors.rich-text .sm-distributors__hero::after {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--sm-white) 94%, var(--sm-teal-light)) 0%,
      color-mix(in srgb, var(--sm-white) 92%, var(--sm-teal-light)) 52%,
      color-mix(in srgb, var(--sm-white) 72%, transparent) 68%,
      transparent 88%
    );
  }

  .page-content--cms-distributors.rich-text ul.sm-distributors__stats {
    padding-right: 22rem;
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--sm-teal-light);
  color: var(--sm-teal-dark);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
  line-height: var(--lh-body);
}

.page-content--cms-distributors.rich-text .sm-distributors__title {
  margin: 0;
  max-width: 14em;
  color: var(--sm-ink);
  font-size: var(--sm-fs-h1-sm);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

@media (min-width: 768px) {
  .page-content--cms-distributors.rich-text .sm-distributors__title {
    font-size: var(--sm-fs-3xl);
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__lead {
  margin: 0;
  max-width: 38rem;
  color: var(--sm-muted);
  font-size: var(--sm-fs-md);
  line-height: var(--lh-body-lg);
}

.page-content--cms-distributors.rich-text ul.sm-distributors__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
}

@media (min-width: 768px) {
  .page-content--cms-distributors.rich-text ul.sm-distributors__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__stat {
  padding: 0;
  background: none;
  text-align: left;
}

.page-content--cms-distributors.rich-text .sm-distributors__stat-value {
  display: block;
  color: var(--sm-teal-dark);
  font-size: var(--sm-fs-xl);
  font-weight: var(--sm-fw-semibold);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: var(--lh-h2);
}

.page-content--cms-distributors.rich-text .sm-distributors__stat-label {
  display: block;
  margin-top: var(--space-1);
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body);
}

.page-content--cms-distributors.rich-text .sm-distributors__section {
  text-align: left;
}

.page-content--cms-distributors.rich-text .sm-distributors__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--sm-teal-dark);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
  line-height: var(--lh-body);
}

.page-content--cms-distributors.rich-text .sm-distributors__heading {
  margin: 0 0 var(--space-2);
  color: var(--sm-ink);
  font-size: var(--sm-fs-h2-sm);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

@media (min-width: 768px) {
  .page-content--cms-distributors.rich-text .sm-distributors__heading {
    font-size: var(--sm-fs-xl);
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__section-lead {
  margin: 0 0 var(--space-5);
  max-width: 36rem;
  color: var(--sm-muted);
  font-size: var(--sm-fs-md);
  line-height: var(--lh-body-lg);
}

.page-content--cms-distributors.rich-text .sm-distributors__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--sm-ink);
}

@media (min-width: 768px) {
  .page-content--cms-distributors.rich-text .sm-distributors__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6);
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__cta-body {
  min-width: 0;
  text-align: left;
}

.page-content--cms-distributors.rich-text .sm-distributors__cta-title {
  margin: 0 0 var(--space-2);
  color: var(--sm-white);
  font-size: var(--sm-fs-title);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body);
}

.page-content--cms-distributors.rich-text .sm-distributors__cta-text {
  margin: 0;
  max-width: 40rem;
  color: var(--sm-panel);
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body);
}

.page-content--cms-distributors.rich-text .sm-distributors__cta-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--sm-tap);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--sm-teal);
  color: var(--sm-white);
  font-size: var(--sm-fs-label);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
  text-align: center;
  transition: background-color var(--sm-dur) var(--sm-ease);
}

@media (min-width: 768px) {
  .page-content--cms-distributors.rich-text .sm-distributors__cta-btn {
    align-self: center;
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__cta-btn:hover,
.page-content--cms-distributors.rich-text .sm-distributors__cta-btn:focus-visible {
  background: var(--sm-teal-dark);
  color: var(--sm-white);
}

.page-content--cms-distributors.rich-text .sm-distributors__cta-btn:focus-visible {
  outline: 2px solid var(--sm-white);
  outline-offset: 3px;
}

.page-content--cms-distributors.rich-text .sm-distributors__controls {
  margin: 0 0 var(--space-5);
}

.page-content--cms-distributors.rich-text .sm-distributors__continents,
.page-content--cms-distributors.rich-text .sm-distributors__regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-2);
}

.page-content--cms-distributors.rich-text .sm-distributors__continents {
  margin-bottom: var(--space-3);
}

.page-content--cms-distributors.rich-text .sm-distributors__regions.is-hidden,
.page-content--cms-distributors.rich-text .sm-distributors__empty.is-hidden,
.page-content--cms-distributors.rich-text .sm-distributors__card.is-hidden {
  display: none !important;
}

.page-content--cms-distributors.rich-text .sm-distributors__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sm-tap);
  padding: 0 var(--space-4);
  border: 1.5px solid var(--sm-line);
  border-radius: var(--radius-md);
  background: var(--sm-white);
  color: var(--sm-ink);
  font-family: var(--sm-font-base);
  font-size: var(--sm-fs-control);
  font-weight: var(--sm-fw-medium);
  line-height: var(--lh-body);
  cursor: pointer;
  transition:
    border-color var(--sm-dur) var(--sm-ease),
    background-color var(--sm-dur) var(--sm-ease),
    color var(--sm-dur) var(--sm-ease);
}

.page-content--cms-distributors.rich-text .sm-distributors__pill:hover {
  border-color: var(--sm-line-strong);
  color: var(--sm-ink);
}

.page-content--cms-distributors.rich-text .sm-distributors__pill:focus-visible {
  outline: 2px solid var(--sm-teal);
  outline-offset: 2px;
}

.page-content--cms-distributors.rich-text .sm-distributors__pill.is-active,
.page-content--cms-distributors.rich-text .sm-distributors__pill.is-active:hover,
.page-content--cms-distributors.rich-text .sm-distributors__pill.is-active:focus-visible {
  border-color: var(--sm-teal);
  background: var(--sm-teal-light);
  color: var(--sm-teal-dark);
}

.page-content--cms-distributors.rich-text .sm-distributors__empty {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--sm-panel);
  color: var(--sm-text);
  font-size: var(--sm-fs-md);
  line-height: var(--lh-body-lg);
}

.page-content--cms-distributors.rich-text .sm-distributors__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  text-align: left;
}

@media (min-width: 768px) {
  .page-content--cms-distributors.rich-text .sm-distributors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 992px) {
  .page-content--cms-distributors.rich-text .sm-distributors__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .page-content--cms-distributors.rich-text .sm-distributors__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-content--cms-distributors.rich-text .sm-distributors__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-4);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  background: var(--sm-white);
  color: var(--sm-ink);
  text-align: left;
  transition: border-color var(--sm-dur) var(--sm-ease);
}

.page-content--cms-distributors.rich-text .sm-distributors__card:hover {
  border-color: var(--sm-line-hover);
  color: var(--sm-ink);
}

.page-content--cms-distributors.rich-text .sm-distributors__card:focus-visible {
  outline: none;
  border-color: var(--sm-teal);
  box-shadow: var(--sm-ring);
  color: var(--sm-ink);
}

.page-content--cms-distributors.rich-text .sm-distributors__card--nolink {
  cursor: default;
}

.page-content--cms-distributors.rich-text .sm-distributors__avatar {
  display: inline-flex;
  flex: 0 0 var(--space-8, 3.5rem);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-8, 3.5rem);
  height: var(--space-8, 3.5rem);
  max-width: var(--space-8, 3.5rem);
  border-radius: var(--radius-md);
  background: var(--sm-teal);
  color: var(--sm-white);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
  overflow: hidden;
}

.page-content--cms-distributors.rich-text .sm-distributors__avatar--logo {
  background: var(--sm-panel);
  border: 1px solid var(--sm-line);
  padding: var(--space-2);
}

.page-content--cms-distributors.rich-text .sm-distributors__avatar--logo .sm-distributors__initials {
  display: none;
}

.page-content--cms-distributors.rich-text .sm-distributors__avatar.is-fallback {
  background: var(--sm-teal);
  border-color: transparent;
  padding: 0;
  color: var(--sm-white);
}

.page-content--cms-distributors.rich-text .sm-distributors__avatar.is-fallback .sm-distributors__logo {
  display: none;
}

.page-content--cms-distributors.rich-text .sm-distributors__avatar.is-fallback .sm-distributors__initials {
  display: inline;
}

.page-content--cms-distributors.rich-text .sm-distributors__logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.page-content--cms-distributors.rich-text .sm-distributors__initials {
  display: inline;
}

.page-content--cms-distributors.rich-text .sm-distributors__meta {
  display: flex;
  width: auto;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
}

.page-content--cms-distributors.rich-text .sm-distributors__name {
  color: var(--sm-ink);
  font-size: var(--sm-fs-label);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
}

.page-content--cms-distributors.rich-text .sm-distributors__place {
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body);
}

@media (prefers-reduced-motion: reduce) {
  .page-content--cms-distributors.rich-text .sm-distributors__pill,
  .page-content--cms-distributors.rich-text .sm-distributors__card,
  .page-content--cms-distributors.rich-text .sm-distributors__cta-btn {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   CMS documento (layout corporativo global)
   Default en page.tpl para todas las CMS salvo filosofía (4) y distribuidores (20).
   Markup: .sm-legal en el contenido. «Otras páginas legales» solo en ids legales.
   ------------------------------------------------------------------------- */

.sm-legal-frame,
.page-header--legal,
.page-content--cms-legal {
  --sm-legal-max: 72rem;
  --sm-legal-analytics: #9a5b12;
  --sm-legal-analytics-bg: #fdf1e3;
  --sm-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  --sm-mask-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
}

.sm-legal-frame .breadcrumb__wrapper > .container {
  max-width: var(--sm-legal-max);
}

.page-header--legal,
.page-content--cms-legal {
  width: min(100%, var(--sm-legal-max));
  max-width: var(--sm-legal-max);
  margin-inline: auto;
}

.page-header--legal {
  margin-bottom: var(--space-5);
}

.page-header--legal .page-title-section {
  margin: 0;
}

.page-content--cms-legal.rich-text {
  padding-top: 0;
}

.page-content--cms-legal.rich-text a {
  color: var(--sm-teal-dark);
}

.page-content--cms-legal.rich-text a:hover,
.page-content--cms-legal.rich-text a:focus {
  color: var(--sm-teal);
}

.page-content--cms-legal.rich-text .sm-legal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-6);
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body);
}

.sm-legal__meta > * + *::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--sm-soft);
}

.page-content--cms-legal.rich-text .sm-legal__meta a {
  color: var(--sm-teal-dark);
  font-weight: var(--sm-fw-medium);
  text-underline-offset: 0.15em;
}

.page-content--cms-legal.rich-text .sm-legal__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-5);
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--sm-teal-light);
}

.sm-legal__summary-copy {
  flex: 1 1 18rem;
  min-width: 0;
}

.page-content--cms-legal.rich-text .sm-legal__kicker {
  margin: 0 0 var(--space-4);
  color: var(--sm-ink);
  font-size: var(--sm-fs-md);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body);
}

.page-content--cms-legal.rich-text .sm-legal__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content--cms-legal.rich-text .sm-legal__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  color: var(--sm-text);
  font-size: var(--sm-fs-md);
  line-height: var(--lh-body);
}

.sm-legal__tick {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  background-color: var(--sm-teal);
  -webkit-mask: var(--sm-mask-check) center / contain no-repeat;
  mask: var(--sm-mask-check) center / contain no-repeat;
}

.sm-legal__summary-action {
  flex: 0 0 auto;
  margin: 0;
}

.page-content--cms-legal.rich-text a.sm-legal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sm-tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--sm-line-strong);
  border-radius: var(--radius-md);
  background: var(--sm-white);
  color: var(--sm-ink);
  font-size: var(--sm-fs-md);
  font-weight: var(--sm-fw-medium);
  line-height: var(--lh-body);
  text-decoration: none;
  white-space: nowrap;
}

.page-content--cms-legal.rich-text a.sm-legal__btn:hover,
.page-content--cms-legal.rich-text a.sm-legal__btn:focus {
  border-color: var(--sm-teal);
  color: var(--sm-teal-dark);
}

.sm-legal__layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.page-content--cms-legal.rich-text .sm-legal__toc-label {
  margin: 0 0 var(--space-4);
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: normal;
  line-height: var(--lh-body);
  text-transform: none;
}

.page-content--cms-legal.rich-text .sm-legal__toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content--cms-legal.rich-text .sm-legal__toc li {
  margin: 0;
}

.page-content--cms-legal.rich-text .sm-legal__toc a {
  color: var(--sm-text);
  font-size: var(--sm-fs-nav);
  line-height: var(--lh-body);
  text-decoration: none;
}

.page-content--cms-legal.rich-text .sm-legal__toc a:hover,
.page-content--cms-legal.rich-text .sm-legal__toc a:focus,
.page-content--cms-legal.rich-text .sm-legal__toc a[aria-current="location"] {
  color: var(--sm-teal-dark);
  font-weight: var(--sm-fw-semibold);
}

.page-content--cms-legal.rich-text .sm-legal__content > :first-child {
  margin-top: 0;
}

.page-content--cms-legal.rich-text .sm-legal__content h2 {
  margin: var(--space-8) 0 var(--space-5);
  color: var(--sm-ink);
  font-size: var(--sm-fs-title);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body);
  scroll-margin-top: calc(var(--sm-s-10) + var(--space-4));
}

.page-content--cms-legal.rich-text .sm-legal__content > h2:first-child {
  margin-top: 0;
}

.page-content--cms-legal.rich-text .sm-legal__content h3 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--sm-fs-lg);
}

.page-content--cms-legal.rich-text .sm-legal__content p,
.page-content--cms-legal.rich-text .sm-legal__content li {
  color: var(--sm-text);
  font-size: var(--sm-fs-md);
  line-height: var(--lh-body-lg);
}

.page-content--cms-legal.rich-text .sm-legal__content p,
.page-content--cms-legal.rich-text .sm-legal__content ul,
.page-content--cms-legal.rich-text .sm-legal__content ol {
  margin: 0 0 var(--space-4);
}

.page-content--cms-legal.rich-text .sm-legal__content li + li {
  margin-top: var(--space-2);
}

.page-content--cms-legal.rich-text .sm-legal__content blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-left: 3px solid var(--sm-teal);
  border-radius: var(--radius-md);
  background: var(--sm-panel);
}

.page-content--cms-legal.rich-text .sm-legal__content blockquote p:last-child {
  margin-bottom: 0;
}

.sm-legal__table-wrap {
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  background: var(--sm-white);
}

.sm-legal__table {
  width: 100%;
  min-width: 40rem;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--sm-fs-sm);
}

.sm-legal__table th,
.sm-legal__table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
}

.sm-legal__table th {
  background: var(--sm-panel);
  color: var(--sm-muted);
  font-size: var(--sm-fs-xs);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body);
}

.sm-legal__table td {
  border-top: 1px solid var(--sm-line);
  color: var(--sm-text);
  line-height: var(--lh-body);
}

.sm-legal__cookie {
  color: var(--sm-ink);
  font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-medium);
}

.sm-legal__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--sm-fs-xs);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body);
  white-space: nowrap;
}

.sm-legal__badge--tech {
  background: var(--sm-teal-light);
  color: var(--sm-teal-dark);
}

.sm-legal__badge--analytics {
  background: var(--sm-legal-analytics-bg);
  color: var(--sm-legal-analytics);
}

.sm-legal__badge--ads {
  background: var(--sm-hs-bg);
  color: var(--sm-warn);
}

.sm-legal__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
  line-height: var(--lh-body);
}

.sm-legal__note-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  background-color: var(--sm-teal);
  -webkit-mask: var(--sm-mask-info) center / contain no-repeat;
  mask: var(--sm-mask-info) center / contain no-repeat;
}

.page-content--cms-legal.rich-text .sm-legal__note p {
  margin: 0;
  color: var(--sm-muted);
  font-size: var(--sm-fs-sm);
}

.sm-legal__related {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--sm-line);
}

.page-content--cms-legal.rich-text .sm-legal__related-title {
  margin: 0 0 var(--space-4);
  color: var(--sm-ink);
  font-size: var(--sm-fs-md);
  font-weight: var(--sm-fw-semibold);
}

.page-content--cms-legal.rich-text .sm-legal__related-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content--cms-legal.rich-text .sm-legal__related-list li {
  margin: 0;
}

.page-content--cms-legal.rich-text .sm-legal__related-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--sm-tap);
  padding: var(--space-4);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  background: var(--sm-white);
  color: var(--sm-ink);
  font-size: var(--sm-fs-md);
  font-weight: var(--sm-fw-medium);
  line-height: var(--lh-body);
  text-decoration: none;
}

.page-content--cms-legal.rich-text .sm-legal__related-list a:hover,
.page-content--cms-legal.rich-text .sm-legal__related-list a:focus {
  border-color: var(--sm-teal);
  color: var(--sm-teal-dark);
}

.sm-legal__related-icon {
  color: var(--sm-teal);
}

@media (min-width: 768px) {
  .page-content--cms-legal.rich-text .sm-legal__related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .sm-legal__layout {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    column-gap: var(--space-7);
  }

  .sm-legal__toc {
    position: sticky;
    top: var(--sm-s-10);
    max-height: calc(100vh - var(--sm-s-10) - var(--space-4));
    overflow: auto;
  }

  .page-content--cms-legal.rich-text .sm-legal__related-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media print {
  #header,
  #footer,
  .sm-legal-frame,
  .sm-legal__toc,
  .sm-legal__related,
  .sm-legal__summary-action,
  .sm-legal__meta a {
    display: none;
  }

  .sm-legal__layout,
  .page-header--legal,
  .page-content--cms-legal {
    display: block;
    max-width: none;
    width: auto;
  }
}

/* -------------------------------------------------------------------------
   Fórmula personalizada (CMS id 76)
   ------------------------------------------------------------------------- */

.page-content--cms-formula.rich-text {
  padding: 0;
  max-width: none;
  width: 100%;
}

.page-content--cms-formula.rich-text .sm-formula h1,
.page-content--cms-formula.rich-text .sm-formula h2,
.page-content--cms-formula.rich-text .sm-formula p,
.page-content--cms-formula.rich-text .sm-formula ul,
.page-content--cms-formula.rich-text .sm-formula ol,
.page-content--cms-formula.rich-text .sm-formula li,
.page-content--cms-formula.rich-text .sm-formula figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content--cms-formula.rich-text > .sm-formula {
  margin: 0;
}

.page-content--cms-formula.rich-text .sm-formula a.btn {
  text-decoration: none;
}

.page-content--cms-formula.rich-text .sm-formula a.btn-primary,
.page-content--cms-formula.rich-text .sm-formula a.sm-formula__hero-cta {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--sm-white);
}

.page-content--cms-formula.rich-text .sm-formula a.btn-primary:hover,
.page-content--cms-formula.rich-text .sm-formula a.btn-primary:focus-visible,
.page-content--cms-formula.rich-text .sm-formula a.sm-formula__hero-cta:hover,
.page-content--cms-formula.rich-text .sm-formula a.sm-formula__hero-cta:focus-visible {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--sm-white);
}

.sm-formula {
  color: var(--sm-ink);
  font-family: var(--sm-font);
}

.sm-formula__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .sm-formula__inner {
    padding-inline: var(--gutter);
  }
}

.sm-formula__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--sm-teal-dark);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sm-formula__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--sm-teal);
  flex-shrink: 0;
}

.sm-formula__eyebrow--center {
  justify-content: center;
  width: 100%;
}

.sm-formula__accent {
  color: var(--sm-teal-dark);
}

.sm-formula__icon.sm-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.sm-formula__icon--sm.sm-icon {
  width: 1rem;
  height: 1rem;
}

.sm-formula__cta-icon.sm-icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-start: var(--space-2);
}

/* --- Hero --------------------------------------------------------------- */

.sm-formula__hero {
  position: relative;
  overflow: hidden;
  background-color: var(--sm-surface, #f3f6f5);
}

.sm-formula__hero-media {
  position: absolute;
  inset: 0;
  background-image: var(--sm-formula-hero);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.sm-formula__hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.9) 38%,
    rgba(255, 255, 255, 0.45) 62%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

.sm-formula__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--section-pad-mobile) var(--gutter-mobile);
}

.sm-formula__hero-copy {
  max-width: 34rem;
}

.sm-formula__hero-title {
  margin: 0 0 var(--space-4);
  color: var(--sm-ink);
  font-size: clamp(1.75rem, 4vw, var(--fs-display));
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}

.page-content--cms-formula.rich-text .sm-formula .sm-formula__hero-lead,
.sm-formula__hero-lead {
  margin: 0 0 var(--space-7);
  color: var(--sm-muted);
  font-size: var(--fs-body-lg);
  font-weight: var(--sm-fw-regular);
  line-height: var(--lh-body-lg);
  max-width: 46ch;
}

.sm-formula__hero-cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--sm-white);
}

.sm-formula__hero-cta:hover,
.sm-formula__hero-cta:focus-visible {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--sm-white);
}

@media (min-width: 768px) {
  .sm-formula__hero-inner {
    padding: var(--section-pad) var(--gutter);
    min-height: 22rem;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .sm-formula__hero-media {
    background-position: 70% center;
  }

  .sm-formula__hero-media::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.92) 55%,
      rgba(255, 255, 255, 0.72) 100%
    );
  }
}

/* --- Highlights bar ----------------------------------------------------- */

.sm-formula__highlights {
  background-color: var(--sm-white);
  border-block: 1px solid var(--sm-line);
  padding-block: var(--space-4);
}

.sm-formula__highlights-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-formula__highlight {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  padding-block: var(--space-4);
}

.sm-formula__highlight + .sm-formula__highlight {
  border-top: 0;
}

.sm-formula__highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sm-teal);
}

.sm-formula__highlight-icon .sm-formula__icon.sm-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.sm-formula__highlight-label {
  color: var(--sm-ink);
  font-size: var(--fs-body);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
  max-width: none;
}

@media (min-width: 768px) {
  .sm-formula__highlights {
    padding-block: var(--space-5);
  }

  .sm-formula__highlights-list {
    flex-direction: row;
    align-items: stretch;
  }

  .sm-formula__highlight {
    flex: 1 1 0;
    min-width: 0;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
  }

  .sm-formula__highlight + .sm-formula__highlight {
    border-top: 0;
    border-left: 0;
  }

  .sm-formula__highlight:first-child {
    padding-inline-start: 0;
  }

  .sm-formula__highlight:last-child {
    padding-inline-end: 0;
  }
}

/* --- Develop + form ----------------------------------------------------- */

.sm-formula__develop {
  --sm-formula-lattice-h: 6.5rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-pad-mobile);
  padding-bottom: calc(var(--section-pad-mobile) + var(--sm-formula-lattice-h));
  background-color: var(--color-bg-alt, var(--sm-panel, #f3f5f4));
  background-image: var(--sm-formula-lattice);
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  border-radius: 0;
}

/* Capa gris superior con máscara curva: deja ver el trozo inferior de la imagen. */
section.sm-formula__develop::before {
  content: "";
  bottom: 80%;
  position: absolute;
  inset: 0 0 var(--sm-formula-lattice-h);
  z-index: 0;
  background-color: var(--color-bg-alt, var(--sm-panel, #f3f5f4));
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M 0,0 L 1000,0 L 1000,80 Q 500,20 0,80 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M 0,0 L 1000,0 L 1000,80 Q 500,30 0,100 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 120% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  height: 95%;
}

.sm-formula__develop-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sm-formula__develop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.sm-formula__develop-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sm-formula__section-title {
  color: var(--sm-ink);
  font-size: var(--fs-h2);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-formula__section-title--center {
  text-align: center;
}

.sm-formula__text {
  color: var(--sm-muted);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  max-width: 48ch;
}

.sm-formula__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sm-formula__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--sm-ink);
  font-size: var(--fs-body);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-body-lg);
}

.sm-formula__check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--sm-teal) 16%, var(--sm-white));
  color: var(--sm-teal-dark);
}

.sm-formula__form-card {
  background-color: var(--sm-white);
  border: 1px solid var(--sm-line);
  border-radius: var(--radius-md);
  box-shadow: var(--sm-shadow-sm);
  padding: var(--space-5);
}

.sm-formula__form-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.sm-formula__form-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--sm-teal);
  color: var(--sm-white);
}

.sm-formula__form-title {
  color: var(--sm-ink);
  font-size: var(--fs-h3, 1.125rem);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-formula__form-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  padding: var(--space-5);
  border: 1px dashed color-mix(in srgb, var(--sm-teal) 45%, var(--sm-line));
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--sm-teal-light) 28%, var(--sm-white));
}

.sm-formula__form-slot-text {
  margin: 0;
  color: var(--sm-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body-lg);
  text-align: center;
  max-width: 28ch;
}

@media (min-width: 768px) {
  .sm-formula__develop {
    --sm-formula-lattice-h: 8.5rem;
  }
}

@media (min-width: 992px) {
  .sm-formula__develop {
    --sm-formula-lattice-h: 9.5rem;
    padding-block: var(--section-pad);
    padding-bottom: calc(var(--section-pad) + var(--sm-formula-lattice-h));
  }

  .sm-formula__develop-inner {
    gap: var(--space-7);
  }

  .sm-formula__develop-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-7);
  }

  .sm-formula__form-card {
    padding: var(--space-6);
    position: sticky;
    top: var(--space-5);
  }
}

/* --- Process ------------------------------------------------------------ */

.sm-formula__process {
  padding-block: var(--section-pad-mobile);
  background-color: var(--sm-white);
}

.sm-formula__process-header {
  margin-bottom: var(--space-6);
  text-align: center;
}

.sm-formula__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  justify-items: center;
}

.sm-formula__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  max-width: 12rem;
}

/* En móvil/tablet: ocultar flechas para dejar 2×2 limpio. */
.sm-formula__step--arrow {
  display: none;
}

.sm-formula__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--sm-teal) 14%, var(--sm-white));
  color: var(--sm-teal-dark);
}

.sm-formula__step-label {
  color: var(--sm-ink);
  font-size: var(--fs-body);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.sm-formula__step-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sm-teal);
  height: 4rem;
}

@media (min-width: 768px) {
  .sm-formula__process {
    padding-block: var(--section-pad);
  }
}

@media (min-width: 992px) {
  .sm-formula__steps {
    grid-template-columns: auto auto auto auto auto auto auto;
    align-items: start;
    justify-content: center;
    gap: var(--space-3);
  }

  .sm-formula__step--arrow {
    display: flex;
  }
}

/* --- Bottom CTA --------------------------------------------------------- */

.sm-formula__cta-banner {
  padding-block: 0 var(--section-pad-mobile);
  background-color: var(--sm-white);
}

.sm-formula__cta-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--sm-white);
  padding: var(--space-4);
  padding-top: calc(8rem + var(--space-4));
  background-color: var(--sm-teal);
  background-image:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--sm-teal) 35%, transparent) 55%,
      var(--sm-teal) 100%
    ),
    var(--sm-formula-cta);
  background-position: left top, left top;
  background-size: 100% 8rem, 100% 8rem;
  background-repeat: no-repeat;
}

.sm-formula__cta-eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--sm-fs-sm);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: var(--lh-h2);
  color: color-mix(in srgb, var(--sm-white) 88%, var(--sm-teal-light));
}

.sm-formula__cta-text {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--lh-h2);
}

.page-content--cms-formula.rich-text .sm-formula a.sm-formula__cta-btn,
.sm-formula__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background-color: var(--sm-panel, #f4f7f6);
  border-color: var(--sm-panel, #f4f7f6);
  color: var(--sm-ink);
}

.page-content--cms-formula.rich-text .sm-formula a.sm-formula__cta-btn:hover,
.page-content--cms-formula.rich-text .sm-formula a.sm-formula__cta-btn:focus-visible,
.sm-formula__cta-btn:hover,
.sm-formula__cta-btn:focus-visible {
  background-color: color-mix(in srgb, var(--sm-panel, #f4f7f6) 82%, var(--sm-ink));
  border-color: color-mix(in srgb, var(--sm-panel, #f4f7f6) 82%, var(--sm-ink));
  color: var(--sm-ink);
}

@media (min-width: 768px) {
  .sm-formula__cta-banner {
    padding-block: 0 var(--section-pad);
  }

  .sm-formula__cta-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    min-height: 7.5rem;
    padding: var(--space-4) var(--space-5) var(--space-4) calc(12rem + var(--space-5));
    background-image:
      linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--sm-teal) 25%, transparent) 45%,
        var(--sm-teal) 78%,
        var(--sm-teal) 100%
      ),
      var(--sm-formula-cta);
    background-position: left center, left center;
    background-size: 14rem 100%, 12rem 100%;
  }
}