/*
 * Web nueva de Fisionexa (layouts/web.blade.php + landing/inicio.blade.php).
 * Sin Bootstrap: todo lo que se ve está aquí, con prefijo w-.
 */

:root {
  --w-tinta: #0b1f1d;
  --w-tinta-2: #2b403d;
  --w-gris: #5d706d;
  --w-linea: #e3ebe9;
  --w-fondo: #ffffff;
  --w-suave: #f4f8f7;
  --w-marca: #00b8a9;
  --w-marca-oscura: #00786e;
  --w-marca-suave: #e0f6f3;
  --w-violeta: #6d5dfc;
  --w-violeta-suave: #efedff;
  --w-verde: #1fae5b;
  --w-noche: #06181a;
  --w-radio: 22px;
  --w-sombra: 0 1px 2px rgba(11, 31, 29, .06), 0 24px 60px -28px rgba(11, 31, 29, .28);
  --w-contenedor: 1200px;
  --w-seccion: clamp(4.5rem, 9vw, 8rem);
  --w-titulo: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

.w-body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--w-tinta);
  background: var(--w-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.w-body.w-sin-scroll {
  overflow: hidden;
}

.w-body img,
.w-body svg {
  display: block;
  max-width: 100%;
}

.w-body h1,
.w-body h2,
.w-body h3,
.w-body p,
.w-body ul,
.w-body ol {
  margin: 0;
}

.w-body ul,
.w-body ol {
  padding: 0;
  list-style: none;
}

.w-body a {
  color: inherit;
}

.w-body :focus-visible {
  outline: 3px solid var(--w-marca);
  outline-offset: 3px;
  border-radius: 6px;
}

.w-saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .625rem 1rem;
  border-radius: 10px;
  background: var(--w-tinta);
  color: #fff !important;
}

.w-saltar:focus {
  top: 1rem;
}

.w-contenedor {
  width: min(var(--w-contenedor), 100% - 2 * clamp(1.125rem, 4vw, 2rem));
  margin-inline: auto;
}

/* --- Tipografía ---------------------------------------------------------- */

.w-h1 {
  font-family: var(--w-titulo);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.w-h2 {
  font-family: var(--w-titulo);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.w-parrafo {
  margin-top: 1.25rem !important;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--w-gris);
  max-width: 60ch;
}

.w-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w-marca-oscura);
}

.w-etiqueta::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.w-etiqueta-oscura {
  color: #9be8df;
}

.w-cabecera {
  max-width: 50rem;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.w-cabecera .w-parrafo {
  margin-inline: auto;
}

.w-cabecera .w-etiqueta {
  justify-content: center;
}

.w-cabecera-fila {
  max-width: none;
  text-align: left;
}

.w-enlace {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--w-marca-oscura);
  text-decoration: none;
}

.w-enlace i {
  transition: transform .2s ease;
}

/* --- Botones ------------------------------------------------------------- */

.w-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.w-botones-centro {
  justify-content: center;
}

.w-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.w-boton:hover {
  transform: translateY(-2px);
}

.w-boton-sm {
  min-height: 40px;
  padding: .5rem 1.125rem;
  font-size: .875rem;
}

.w-boton-lg {
  min-height: 56px;
  padding: .875rem 1.75rem;
  font-size: 1rem;
}

.w-body .w-boton-principal {
  background: var(--w-tinta);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(11, 31, 29, .6);
}

.w-body .w-boton-principal:hover {
  background: #14332f;
  color: #fff;
  box-shadow: 0 16px 36px -14px rgba(11, 31, 29, .7);
}

.w-body .w-boton-fantasma {
  border-color: var(--w-linea);
  background: rgba(255, 255, 255, .7);
  color: var(--w-tinta);
  backdrop-filter: blur(6px);
}

.w-body .w-boton-fantasma:hover {
  border-color: var(--w-tinta);
}

.w-body .w-boton-claro {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.w-body .w-boton-claro:hover {
  border-color: #fff;
  color: #fff;
}

.w-seccion-oscura .w-boton-principal,
.w-cierre .w-boton-principal {
  background: var(--w-marca) !important;
  color: #03201d !important;
  box-shadow: 0 12px 34px -12px rgba(0, 184, 169, .7) !important;
}

/* --- Cabecera ------------------------------------------------------------ */

.w-top {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding: .875rem clamp(.75rem, 3vw, 1.5rem);
  transition: padding .25s ease;
}

.w-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1240px, 100%);
  margin-inline: auto;
  padding: .5rem .625rem .5rem 1.125rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.w-top.is-scroll .w-nav {
  border-color: rgba(227, 235, 233, .9);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 40px -20px rgba(11, 31, 29, .35);
  backdrop-filter: saturate(160%) blur(16px);
}

.w-logo {
  display: flex;
  align-items: center;
  flex: none;
}

.w-logo img {
  max-height: 40px;
  width: auto;
}

.w-nav-menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.w-nav-enlaces {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-inline: auto !important;
}

.w-nav-enlace {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .875rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--w-tinta-2);
  text-decoration: none;
  cursor: pointer;
}

.w-nav-enlace:hover,
.w-nav-desplegable.is-abierto .w-nav-enlace {
  background: var(--w-suave);
  color: var(--w-tinta);
}

.w-nav-enlace .fa-chevron-down {
  font-size: .625rem;
  transition: transform .2s ease;
}

.w-nav-desplegable.is-abierto .fa-chevron-down {
  transform: rotate(180deg);
}

.w-nav-acciones {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.w-nav-entrar {
  padding: .5rem .5rem;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

/* Mega menú de funciones. */
.w-nav-desplegable {
  position: relative;
}

.w-mega {
  position: absolute;
  top: calc(100% + .875rem);
  left: 50%;
  width: min(44rem, 90vw);
  padding: .75rem;
  border: 1px solid var(--w-linea);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(11, 31, 29, .4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.w-nav-desplegable.is-abierto .w-mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (hover: hover) and (min-width: 1024px) {
  .w-nav-desplegable:hover .w-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .w-nav-desplegable::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 1rem;
  }
}

.w-mega-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
}

.w-mega-enlace {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: .75rem;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color .15s ease;
}

.w-mega-enlace:hover {
  background: var(--w-suave);
}

.w-mega-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--w-marca-suave);
  color: var(--w-marca-oscura);
}

.w-mega-enlace strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
}

.w-mega-enlace span span {
  display: block;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--w-gris);
}

.w-mega-todas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: var(--w-suave);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.w-nav-hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--w-linea);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.w-nav-hamburguesa span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--w-tinta);
  transition: transform .2s ease, opacity .2s ease;
}

.w-nav-hamburguesa[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.w-nav-hamburguesa[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.w-nav-hamburguesa[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023.98px) {
  /* Sin backdrop-filter: crea un bloque contenedor y el menú a pantalla
     completa (position: fixed) quedaría encerrado dentro de la barra. */
  .w-nav,
  .w-top.is-scroll .w-nav {
    padding-left: .875rem;
    background: #fff;
    border-color: var(--w-linea);
    backdrop-filter: none;
  }

  .w-nav-hamburguesa {
    display: flex;
  }

  .w-nav-menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 7.5rem 1.5rem 2rem;
    overflow-y: auto;
    background: #fff;
  }

  .w-nav-menu.is-abierto {
    display: flex;
  }

  .w-nav-enlaces {
    flex-direction: column;
    align-items: stretch;
    margin: 0 !important;
  }

  .w-nav-enlace {
    width: 100%;
    justify-content: space-between;
    padding: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .w-mega {
    position: static;
    display: none;
    width: 100%;
    padding: .25rem;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .w-nav-desplegable.is-abierto .w-mega {
    display: block;
    transform: none;
  }

  .w-mega-rejilla {
    grid-template-columns: 1fr;
  }

  .w-nav-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .w-nav-acciones .w-boton {
    min-height: 52px;
  }

  .w-nav-entrar {
    text-align: center;
  }
}

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

.w-hero {
  position: relative;
  padding-block: clamp(8rem, 14vw, 10.5rem) clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}

.w-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40rem 26rem at 88% 8%, rgba(109, 93, 252, .14), transparent 65%),
    radial-gradient(46rem 30rem at 70% 60%, rgba(0, 184, 169, .16), transparent 65%),
    linear-gradient(180deg, #f6fbfa 0%, #fff 70%);
}

.w-hero-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 31, 29, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 29, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60rem 30rem at 50% 20%, #000 30%, transparent 75%);
}

.w-hero-rejilla {
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 1080px) {
  .w-hero-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.w-aviso {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.75rem;
  padding: .375rem .875rem .375rem .375rem;
  border: 1px solid var(--w-linea);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  font-size: .875rem;
  font-weight: 500;
  color: var(--w-tinta-2);
  text-decoration: none;
  box-shadow: 0 4px 18px -10px rgba(11, 31, 29, .3);
}

.w-aviso-chip {
  padding: .125rem .625rem;
  border-radius: 999px;
  background: var(--w-violeta);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

.w-aviso i {
  font-size: .75rem;
  color: var(--w-gris);
}

.w-hero-parrafo {
  margin: 1.75rem 0 2.25rem !important;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--w-gris);
}

.w-garantias {
  margin-top: 1.25rem !important;
  font-size: .875rem;
  color: var(--w-gris);
}

.w-prueba-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem 1rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--w-linea);
  font-size: .9375rem;
  color: var(--w-gris);
}

.w-prueba-social strong {
  color: var(--w-tinta);
}

.w-estrellas {
  display: flex;
  gap: .125rem;
  color: #f5b301;
}

/* Maqueta del producto. */
.w-maqueta {
  position: relative;
  padding: 1.5rem 0 3rem 2.5rem;
}

@media (max-width: 575.98px) {
  .w-maqueta {
    padding: 0 0 7rem;
  }
}

.w-ventana {
  overflow: hidden;
  border: 1px solid var(--w-linea);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 50px 100px -40px rgba(11, 31, 29, .45), 0 0 0 8px rgba(255, 255, 255, .5);
  transform: perspective(1600px) rotateY(-6deg) rotateX(3deg);
  transform-origin: left center;
}

@media (max-width: 1079.98px) {
  .w-ventana {
    transform: none;
  }
}

.w-ventana-barra {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--w-linea);
  background: #fbfdfc;
}

.w-ventana-barra span {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: #e2e8e7;
}

.w-ventana-barra strong {
  margin-left: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--w-tinta-2);
}

.w-agenda {
  display: grid;
  gap: .625rem;
  padding: 1.125rem;
}

.w-cita {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: .25rem .875rem;
  align-items: center;
  padding: .75rem .875rem;
  border-left: 3px solid var(--c);
  border-radius: 6px 12px 12px 6px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
}

.w-cita time {
  grid-row: span 2;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--w-tinta-2);
  font-variant-numeric: tabular-nums;
}

.w-cita strong {
  display: block;
  font-size: .9375rem;
}

.w-cita span {
  display: block;
  font-size: .8125rem;
  color: var(--w-gris);
}

.w-cita em {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  justify-self: start;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: #fff;
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  color: color-mix(in srgb, var(--c) 70%, #000);
}

.w-cita-verde { --c: #1fae5b; }
.w-cita-azul { --c: #2f7cf6; }
.w-cita-violeta { --c: #6d5dfc; }
.w-cita-ambar { --c: #e39a0c; }

.w-dolor b {
  font-weight: 800;
}

.w-dolor .fa-arrow-right {
  font-size: .625rem;
}

.w-chat {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: min(19rem, 78%);
  padding: 1rem;
  border: 1px solid var(--w-linea);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(11, 31, 29, .45);
}

@media (max-width: 575.98px) {
  .w-chat {
    right: .5rem;
    bottom: 0;
  }
}

.w-chat-cabecera {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--w-gris);
}

.w-chat-cabecera i {
  font-size: 1rem;
  color: var(--w-verde);
}

.w-burbuja {
  width: fit-content;
  max-width: 90%;
  margin-bottom: .5rem !important;
  padding: .5rem .75rem;
  border-radius: 14px;
  font-size: .8125rem;
  line-height: 1.45;
  opacity: 0;
  animation: w-aparecer .5s ease forwards;
}

.w-burbuja-paciente {
  border-bottom-left-radius: 4px;
  background: #eef2f1;
}

.w-burbuja-ia {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--w-violeta);
  color: #fff;
}

.w-burbuja:nth-of-type(1) { animation-delay: .4s; }
.w-burbuja:nth-of-type(2) { animation-delay: 1.3s; }
.w-burbuja:nth-of-type(3) { animation-delay: 2.2s; }

.w-chat-hecho {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--w-verde);
  opacity: 0;
  animation: w-aparecer .5s ease 3s forwards;
}

@keyframes w-aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.w-flotante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem .75rem .75rem;
  border: 1px solid var(--w-linea);
  border-radius: 16px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 20px 50px -24px rgba(11, 31, 29, .45);
  font-size: .75rem;
  line-height: 1.35;
  color: var(--w-gris);
  backdrop-filter: blur(8px);
  animation: w-flotar 6s ease-in-out infinite;
}

.w-flotante strong {
  display: block;
  font-size: .8125rem;
  color: var(--w-tinta);
}

.w-flotante-llamada {
  top: -.5rem;
  right: 1rem;
}

.w-flotante-factura {
  left: 0;
  bottom: 1.5rem;
  animation-delay: -3s;
}

@media (max-width: 575.98px) {
  .w-flotante-llamada {
    top: auto;
    bottom: -1rem;
    left: .5rem;
    right: auto;
  }

  .w-flotante-factura {
    display: none;
  }
}

@keyframes w-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.w-flotante-icono,
.w-tile-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--w-marca-suave);
  color: var(--w-marca-oscura);
  font-size: 1.0625rem;
}

.w-icono-violeta {
  background: var(--w-violeta-suave);
  color: var(--w-violeta);
}

.w-icono-verde {
  background: #e4f7ec;
  color: var(--w-verde);
}

/* --- Cifras -------------------------------------------------------------- */

.w-cifras {
  border-block: 1px solid var(--w-linea);
}

.w-cifras-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .w-cifras-rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.w-cifras-rejilla div {
  display: grid;
  gap: .25rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

.w-cifras-rejilla div + div {
  border-left: 1px solid var(--w-linea);
}

@media (max-width: 767.98px) {
  .w-cifras-rejilla div:nth-child(3) {
    border-left: 0;
  }

  .w-cifras-rejilla div:nth-child(n + 3) {
    border-top: 1px solid var(--w-linea);
  }
}

.w-cifras strong {
  font-family: var(--w-titulo);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.w-cifras small {
  font-size: .5em;
  color: var(--w-gris);
}

.w-cifras span {
  font-size: .875rem;
  color: var(--w-gris);
}

/* --- Secciones ----------------------------------------------------------- */

.w-seccion {
  position: relative;
  padding-block: var(--w-seccion);
}

.w-seccion-suave {
  background: var(--w-suave);
}

/* Problema. */
.w-problema {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .w-problema {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }
}

.w-problema-visual {
  position: relative;
  padding: 2rem;
  border-radius: 28px;
  background: var(--w-suave);
}

.w-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem !important;
}

.w-herramientas li {
  padding: .5rem .875rem;
  border: 1px dashed #c8d4d2;
  border-radius: 999px;
  background: #fff;
  font-size: .875rem;
  color: var(--w-gris);
  text-decoration: line-through;
  text-decoration-color: rgba(214, 67, 67, .55);
  transform: rotate(calc((var(--i) - 3) * .6deg));
}

.w-solucion {
  padding: 1.5rem;
  border-radius: 20px;
  background: var(--w-tinta);
  color: rgba(255, 255, 255, .75);
  box-shadow: 0 30px 60px -30px rgba(11, 31, 29, .7);
}

.w-solucion-icono {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--w-marca);
  color: #03201d;
  font-size: 1.125rem;
}

.w-solucion h3 {
  margin-bottom: .375rem !important;
  font-family: var(--w-titulo);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
}

.w-solucion p {
  font-size: .9375rem;
}

/* Bento de funciones. */
.w-bento {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .w-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .w-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .w-tile-ia {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.w-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 1.75rem;
  overflow: hidden;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

a.w-tile:hover {
  border-color: transparent;
  box-shadow: var(--w-sombra);
  transform: translateY(-4px);
}

a.w-tile:hover .w-enlace i,
a.w-tile:hover + .w-enlace i {
  transform: translateX(3px);
}

.w-tile h3 {
  margin-top: .5rem !important;
  font-family: var(--w-titulo);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.w-tile p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--w-gris);
}

.w-tile-ia {
  display: grid;
  gap: 2rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 0;
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgba(109, 93, 252, .35), transparent 60%),
    radial-gradient(24rem 18rem at 0% 100%, rgba(0, 184, 169, .28), transparent 60%),
    var(--w-noche);
  color: rgba(255, 255, 255, .78);
}

.w-tile-ia h3 {
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  color: #fff;
}

.w-tile-ia p {
  max-width: 34rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .72);
}

.w-tile-ia .w-enlace {
  margin-top: .5rem;
  color: #9be8df;
}

.w-tile-ia .w-tile-icono {
  background: rgba(109, 93, 252, .2);
  color: #c6bfff;
}

.w-mini {
  margin-top: auto;
}

.w-mini-onda {
  align-self: end;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}

.w-mini-onda p {
  margin-top: 1rem !important;
  font-size: .875rem !important;
  color: #b6f0e8 !important;
}

.w-onda {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
}

.w-onda span {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #9d93ff, #00d2c4);
  animation: w-onda 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.09s);
}

@keyframes w-onda {
  0%, 100% { transform: scaleY(.45); }
  50% { transform: scaleY(1); }
}

.w-mini-calendario {
  display: grid;
  gap: .375rem;
  padding-top: .75rem;
}

.w-mini-calendario div {
  display: flex;
  gap: .375rem;
}

.w-mini-calendario span {
  height: 12px;
  border-radius: 4px;
  background: var(--w-marca-suave);
}

.w-mini-calendario div:nth-child(2) span:first-child,
.w-mini-calendario div:nth-child(4) span:last-child {
  background: var(--w-marca);
}

.w-mini-calendario div:nth-child(3) span:last-child {
  background: #c8c0ff;
}

.w-mini-burbujas {
  display: grid;
  gap: .375rem;
  padding-top: .5rem;
}

.w-mini-burbujas p {
  width: fit-content;
  max-width: 92%;
  padding: .5rem .75rem;
  border-radius: 12px 12px 12px 4px;
  background: #e8f7ee !important;
  font-size: .8125rem !important;
  color: var(--w-tinta-2) !important;
}

.w-mini-burbujas .w-mini-respuesta {
  margin-left: auto;
  border-radius: 12px 12px 4px 12px;
  background: var(--w-verde) !important;
  color: #fff !important;
  font-weight: 600;
}

.w-mini-dolor {
  display: grid;
  gap: .5rem;
  padding-top: .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--w-gris);
}

.w-dolor-barra {
  height: 8px;
  border-radius: 8px;
  background: #eef2f1;
}

.w-dolor-barra i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.w-dolor-bien i {
  background: linear-gradient(90deg, #00b8a9, #1fae5b);
}

.w-mini-firma {
  width: 100%;
  height: 56px;
  padding-top: .25rem;
  color: var(--w-tinta);
}

.w-mini-factura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border: 1px dashed #c8d4d2;
  border-radius: 12px;
  font-size: .8125rem;
}

.w-mini-factura b {
  font-family: var(--w-titulo);
  font-size: 1.125rem;
}

.w-mini-factura em {
  font-style: normal;
  font-weight: 700;
  color: var(--w-verde);
}

/* Un día en la clínica. */
.w-dia {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .w-dia {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }

  .w-dia-intro {
    position: sticky;
    top: 7rem;
  }
}

.w-dia-intro .w-boton {
  margin-top: 2rem;
}

.w-linea {
  position: relative;
  display: grid;
  gap: 1rem;
}

.w-linea::before {
  content: '';
  position: absolute;
  left: 2.25rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(180deg, var(--w-marca), var(--w-violeta));
  opacity: .35;
}

.w-linea li {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.w-linea time {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 2.25rem;
  margin-top: 1.25rem;
  border-radius: 999px;
  background: var(--w-tinta);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.w-linea li:last-child time {
  background: var(--w-violeta);
}

.w-linea div {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--w-linea);
  border-radius: 18px;
  background: #fff;
}

.w-linea h3 {
  margin-bottom: .25rem !important;
  font-family: var(--w-titulo);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.w-linea p {
  font-size: .9375rem;
  color: var(--w-gris);
}

/* Sección oscura de la IA. */
.w-seccion-oscura {
  overflow: hidden;
  background: var(--w-noche);
  color: rgba(255, 255, 255, .75);
}

.w-seccion-oscura .w-h2 {
  color: #fff;
}

.w-seccion-oscura .w-parrafo {
  color: rgba(255, 255, 255, .7);
}

.w-ia-brillo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 26rem at 90% 10%, rgba(109, 93, 252, .3), transparent 60%),
    radial-gradient(36rem 24rem at 0% 100%, rgba(0, 184, 169, .22), transparent 60%);
}

.w-ia {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .w-ia {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }
}

.w-check {
  display: grid;
  gap: .75rem;
  margin-top: 2rem !important;
}

@media (min-width: 640px) {
  .w-check {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.w-check li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-weight: 500;
}

.w-check i {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .0625rem;
  border-radius: 50%;
  background: var(--w-marca-suave);
  color: var(--w-marca-oscura);
  font-size: .6875rem;
}

.w-check-oscuro li {
  color: #fff;
}

.w-check-oscuro i {
  background: rgba(0, 184, 169, .2);
  color: #7ff0e3;
}

.w-ia-nota {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.75rem !important;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55);
}

.w-ia-panel {
  display: grid;
  gap: 1rem;
}

.w-llamada {
  display: grid;
  justify-items: center;
  gap: .375rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

.w-llamada-avatar {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--w-violeta), var(--w-marca));
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 0 0 10px rgba(109, 93, 252, .15), 0 0 0 20px rgba(109, 93, 252, .07);
}

.w-llamada strong {
  color: #fff;
}

.w-llamada > span:not(.w-llamada-avatar) {
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.w-onda-grande {
  width: 100%;
  height: 64px;
  margin-top: 1rem;
}

.w-prueba-ia {
  padding: 1.75rem;
  border-radius: 24px;
  background: #fff;
  color: var(--w-gris);
}

.w-prueba-ia h3 {
  font-family: var(--w-titulo);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--w-tinta);
}

.w-prueba-ia p {
  margin: .25rem 0 1.25rem !important;
  font-size: .9375rem;
}

.w-prueba-ia .w-boton {
  flex: 1 1 14rem;
}

.w-prueba-ia .w-boton-principal {
  background: var(--w-tinta) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.w-prueba-ia .w-boton-claro {
  border-color: var(--w-verde);
  background: var(--w-verde);
  color: #fff;
}

/* Comparativa. */
.w-tabla {
  overflow: hidden;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
}

.w-tabla-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  font-size: .9375rem;
}

.w-tabla-fila > span {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--w-linea);
}

.w-tabla-cabeza > span {
  border-top: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--w-gris);
}

.w-tabla-fila > span:first-child {
  font-weight: 600;
}

.w-tabla-sin {
  color: var(--w-gris);
}

.w-tabla-sin i {
  margin-right: .375rem;
  color: #d14343;
}

.w-tabla-con,
.w-tabla-marca {
  background: var(--w-marca-suave);
  font-weight: 600;
}

.w-tabla-marca {
  color: var(--w-marca-oscura) !important;
}

.w-tabla-con i {
  margin-right: .375rem;
  color: var(--w-marca-oscura);
}

@media (max-width: 767.98px) {
  .w-tabla-cabeza {
    display: none;
  }

  .w-tabla-fila {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--w-linea);
  }

  .w-tabla-fila:nth-child(2) {
    border-top: 0;
  }

  .w-tabla-fila > span {
    border-top: 0;
    padding: .5rem 1.25rem;
  }

  .w-tabla-fila > span:first-child {
    padding-top: 1rem;
  }

  .w-tabla-con {
    margin: 0 .75rem .75rem;
    border-radius: 10px;
  }
}

/* Tarjetas genéricas. */
.w-rejilla-3 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .w-rejilla-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .w-rejilla-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.w-tarjeta {
  padding: 1.75rem;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
}

.w-tarjeta h3 {
  margin: 1.125rem 0 .375rem !important;
  font-family: var(--w-titulo);
  font-size: 1.1875rem;
  font-weight: 700;
}

.w-tarjeta p {
  font-size: .9375rem;
  color: var(--w-gris);
}

/* Módulos. */
.w-modulos {
  display: grid;
  gap: .75rem;
}

@media (min-width: 768px) {
  .w-modulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.w-modulos a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--w-linea);
  border-radius: 18px;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.w-modulos a:hover {
  border-color: var(--w-marca);
  box-shadow: 0 16px 36px -24px rgba(0, 184, 169, .8);
}

.w-modulos strong {
  display: block;
  font-weight: 600;
}

.w-modulos span span {
  display: block;
  font-size: .875rem;
  color: var(--w-gris);
}

.w-modulos-flecha {
  margin-left: auto;
  color: var(--w-gris);
  transition: transform .2s ease;
}

.w-modulos a:hover .w-modulos-flecha {
  color: var(--w-marca-oscura);
  transform: translateX(3px);
}

/* Pasos. */
.w-pasos {
  display: grid;
  gap: 1rem;
  counter-reset: paso;
}

@media (min-width: 768px) {
  .w-pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.w-pasos li {
  counter-increment: paso;
  position: relative;
  padding: 1.75rem;
  border-radius: var(--w-radio);
  background: #fff;
  border: 1px solid var(--w-linea);
}

.w-pasos li::after {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--w-titulo);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--w-marca-suave);
}

.w-pasos h3 {
  margin: 1.125rem 0 .375rem !important;
  font-family: var(--w-titulo);
  font-size: 1.1875rem;
  font-weight: 700;
}

.w-pasos p {
  font-size: .9375rem;
  color: var(--w-gris);
}

/* Guía. */
.w-guia {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .w-guia {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  .w-guia-intro {
    position: sticky;
    top: 7rem;
  }
}

.w-guia-lista {
  counter-reset: criterio;
  display: grid;
}

.w-guia-lista li {
  counter-increment: criterio;
  position: relative;
  padding: 1.75rem 0 1.75rem 3.5rem;
  border-top: 1px solid var(--w-linea);
}

.w-guia-lista li:last-child {
  border-bottom: 1px solid var(--w-linea);
}

.w-guia-lista li::before {
  content: counter(criterio);
  position: absolute;
  left: 0;
  top: 1.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--w-linea);
  font-weight: 700;
  font-size: .9375rem;
}

.w-guia-lista h3 {
  margin-bottom: .5rem !important;
  font-family: var(--w-titulo);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.w-guia-lista p {
  margin-bottom: .75rem !important;
  color: var(--w-gris);
}

/* Preguntas. */
.w-faq-rejilla {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .w-faq-rejilla {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  }
}

.w-faq {
  display: grid;
  gap: .75rem;
}

.w-faq details {
  border: 1px solid var(--w-linea);
  border-radius: 18px;
  background: #fff;
  transition: box-shadow .2s ease;
}

.w-faq details[open] {
  box-shadow: var(--w-sombra);
  border-color: transparent;
}

.w-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  list-style: none;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
}

.w-faq summary::-webkit-details-marker {
  display: none;
}

.w-faq summary::after {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--w-tinta), var(--w-tinta)) center / 10px 2px no-repeat,
    linear-gradient(var(--w-tinta), var(--w-tinta)) center / 2px 10px no-repeat,
    var(--w-suave);
  transition: transform .2s ease;
}

.w-faq details[open] summary::after {
  transform: rotate(45deg);
}

.w-faq details p {
  padding: 0 1.5rem 1.5rem;
  line-height: 1.7;
  color: var(--w-gris);
}

/* Demo y formulario. */
.w-demo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .w-demo {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
}

.w-demo-pasos {
  counter-reset: demo;
  display: grid;
  gap: 1rem;
  margin-top: 2rem !important;
}

.w-demo-pasos li {
  counter-increment: demo;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
}

.w-demo-pasos li::before {
  content: counter(demo);
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--w-tinta);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
}

.w-demo-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem !important;
  color: var(--w-gris);
}

.w-demo-alt a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 700;
  color: var(--w-verde);
  text-decoration: none;
}

.w-formulario {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--w-linea);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--w-sombra);
}

.w-formulario > h3 {
  font-family: var(--w-titulo);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.w-formulario > p {
  margin: .25rem 0 1.5rem !important;
  color: var(--w-gris);
}

/* Lo que el formulario de siempre tomaba de Bootstrap. */
:is(.w-formulario, .campana-form) .lead-form .form-control {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--w-linea);
  border-radius: 12px;
  background: var(--w-suave);
  font: inherit;
  color: var(--w-tinta);
}

:is(.w-formulario, .campana-form) .lead-form .form-control:focus {
  outline: none;
  border-color: var(--w-marca);
  background: #fff;
  box-shadow: 0 0 0 4px var(--w-marca-suave);
}

:is(.w-formulario, .campana-form) .lead-form .form-control.is-invalid {
  border-color: #d14343;
}

:is(.w-formulario, .campana-form) .lead-form .invalid-feedback {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  color: #c0392b;
}

:is(.w-formulario, .campana-form) .lead-form .form-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 600;
}

:is(.w-formulario, .campana-form) .lead-form .form-check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  color: var(--w-gris);
}

:is(.w-formulario, .campana-form) .lead-form .form-check-input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  accent-color: var(--w-marca-oscura);
}

:is(.w-formulario, .campana-form) .lead-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  font: inherit;
  cursor: pointer;
}

:is(.w-formulario, .campana-form) .lead-form .btn-enviar {
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  background: var(--w-tinta);
  color: #fff;
  font-weight: 600;
}

:is(.w-formulario, .campana-form) .lead-form .btn-enviar:hover {
  background: #14332f;
}

:is(.w-formulario, .campana-form) .lead-form .btn-link {
  background: none;
  color: var(--w-marca-oscura);
  font-weight: 600;
}

:is(.w-formulario, .campana-form) .lead-form .text-end {
  text-align: right;
}

:is(.w-formulario, .campana-form) .lead-form .spinner-border {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: w-girar .7s linear infinite;
}

@keyframes w-girar {
  to { transform: rotate(360deg); }
}

/* Cierre. */
.w-cierre {
  padding: clamp(1rem, 3vw, 2rem);
}

.w-cierre-caja {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: 36px;
  background:
    radial-gradient(40rem 20rem at 50% -20%, rgba(0, 184, 169, .45), transparent 65%),
    radial-gradient(30rem 20rem at 100% 100%, rgba(109, 93, 252, .35), transparent 60%),
    var(--w-noche);
  text-align: center;
  color: rgba(255, 255, 255, .72);
}

.w-cierre-caja .w-h2 {
  max-width: 44rem;
  margin-inline: auto;
  color: #fff;
}

.w-cierre-caja p {
  margin: 1.25rem auto 2rem !important;
  max-width: 36rem;
  font-size: 1.125rem;
}

/* --- Pie ----------------------------------------------------------------- */

.w-pie {
  padding-top: clamp(4rem, 7vw, 5.5rem);
  background: var(--w-fondo);
  color: var(--w-gris);
  font-size: .9375rem;
}

.w-pie-sellos {
  padding-block: 1.5rem;
  border-top: 1px solid var(--w-linea);
}

.w-pie-rejilla {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .w-pie-rejilla {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}

.w-pie-marca img {
  max-height: 44px;
  width: auto;
}

.w-pie-marca p {
  margin: 1rem 0 1.25rem !important;
  max-width: 30ch;
}

.w-pie-marca .w-pie-direccion {
  margin-top: -.5rem !important;
  font-size: .875rem;
}

.w-pie-direccion i {
  margin-right: .375rem;
  color: var(--w-marca-oscura);
}

.w-pie-titulo-siguiente {
  margin-top: 2rem !important;
}

.w-pie-titulo {
  margin-bottom: 1rem !important;
  font-family: var(--w-titulo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--w-tinta);
}

.w-pie-lista {
  display: grid;
  gap: .625rem;
}

.w-pie-lista a {
  text-decoration: none;
}

.w-pie-lista a:hover {
  color: var(--w-tinta);
}

.w-pie-lista i {
  width: 1.125rem;
  color: var(--w-marca-oscura);
}

.w-pie-paises {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--w-linea);
  font-size: .875rem;
}

.w-pie-paises a {
  font-weight: 600;
  text-decoration: none;
}

.w-pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--w-linea);
  font-size: .8125rem;
}

.w-pie-legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.w-pie-legal a {
  text-decoration: none;
}

/* La barra del total de la calculadora ocupa el borde inferior en móvil. */
.pc-bar-visible .w-whatsapp-flotante {
  bottom: calc(var(--pc-bar-height, 72px) + .75rem);
}

/* WhatsApp flotante. */
.w-whatsapp-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  font-size: 1.75rem;
  text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(18, 140, 74, .7);
  transition: transform .2s ease;
}

.w-whatsapp-flotante:hover {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .w-burbuja,
  .w-chat-hecho {
    opacity: 1;
  }
}

/* Redes sociales del pie. */
.w-redes {
  display: flex;
  gap: .5rem;
}

.w-body .w-red {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--w-linea);
  border-radius: 50%;
  color: var(--w-tinta-2);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.w-body .w-red:hover {
  border-color: var(--w-marca);
  color: var(--w-marca-oscura);
}

/* Capacidades en la tarjeta de IA. */
.w-ia-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .5rem;
}

.w-ia-chips li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .875rem;
  color: #fff;
}

.w-ia-chips i {
  font-size: .75rem;
  color: #7ff0e3;
}

/* --- Páginas interiores (características, blog, empresa) ----------------- */

.w-hero-interior {
  padding-block: clamp(7.5rem, 12vw, 9rem) clamp(3.5rem, 7vw, 5.5rem);
}

.w-h1-interior {
  font-size: clamp(2.375rem, 4.8vw, 3.75rem);
  line-height: 1.02;
}

.w-migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  font-size: .875rem;
  color: var(--w-gris);
}

.w-migas a {
  text-decoration: none;
}

.w-migas a:hover {
  color: var(--w-tinta);
}

.w-migas i {
  font-size: .5625rem;
  opacity: .6;
}

.w-migas [aria-current] {
  font-weight: 600;
  color: var(--w-tinta);
}

.w-check-una {
  grid-template-columns: 1fr !important;
}

.w-hero-interior .w-check {
  margin: 0 0 2rem !important;
}

.w-captura {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--w-linea);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 50px 100px -40px rgba(11, 31, 29, .45), 0 0 0 8px rgba(255, 255, 255, .5);
}

.w-captura img {
  width: 100%;
  height: auto;
}

.w-tarjeta-problema .w-tile-icono {
  background: #fdeee4;
  color: #c2410c;
}

/* --- Blog ---------------------------------------------------------------- */

.w-visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.w-blog-cabecera {
  max-width: 52rem;
  text-align: center;
}

.w-blog-cabecera .w-hero-parrafo {
  margin-inline: auto !important;
}

.w-blog-cabecera .w-migas {
  justify-content: center;
}

.w-buscador {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 36rem;
  margin: 0 auto;
  padding: .375rem .375rem .375rem 1.25rem;
  border: 1px solid var(--w-linea);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 40px -24px rgba(11, 31, 29, .4);
}

.w-buscador i {
  color: var(--w-gris);
}

.w-buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--w-tinta);
  outline: none;
}

.w-blog-categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
}

.w-blog-categorias a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .9375rem;
  border: 1px solid var(--w-linea);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}

.w-blog-categorias a span {
  font-size: .75rem;
  color: var(--w-gris);
}

.w-blog-categorias a:hover,
.w-blog-categorias a.is-activa {
  border-color: var(--w-tinta);
  background: var(--w-tinta);
  color: #fff;
}

.w-blog-categorias a.is-activa span,
.w-blog-categorias a:hover span {
  color: rgba(255, 255, 255, .7);
}

.w-blog-seccion {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.w-blog-destacado {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.w-blog-subtitulo {
  margin-bottom: 1.75rem !important;
  font-family: var(--w-titulo);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.w-posts {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .w-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .w-posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.w-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}

.w-post:hover {
  box-shadow: var(--w-sombra);
  transform: translateY(-3px);
}

.w-post-portada {
  position: relative;
  display: grid;
  place-items: end start;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 1.25rem;
  background:
    radial-gradient(20rem 12rem at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%),
    linear-gradient(135deg, var(--w-noche), color-mix(in srgb, var(--c) 35%, var(--w-noche)));
  text-decoration: none;
}

.w-post-portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-post-portada-texto {
  font-family: var(--w-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
}

.w-post-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .625rem;
  padding: 1.5rem;
}

.w-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
  font-size: .8125rem;
  color: var(--w-gris);
}

.w-post-categoria {
  padding: .1875rem .625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: color-mix(in srgb, var(--c) 70%, #000);
  font-weight: 600;
  text-decoration: none;
}

.w-post h3 {
  font-family: var(--w-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.w-post h3 a {
  text-decoration: none;
}

.w-post h3 a:hover {
  color: var(--w-marca-oscura);
}

.w-post p {
  font-size: .9375rem;
  color: var(--w-gris);
}

.w-post time {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .8125rem;
  color: var(--w-gris);
}

@media (min-width: 900px) {
  .w-post-grande {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }

  .w-post-grande .w-post-portada {
    aspect-ratio: auto;
    min-height: 22rem;
    padding: 2rem;
  }

  .w-post-grande .w-post-portada-texto {
    font-size: 2.25rem;
  }

  .w-post-grande .w-post-cuerpo {
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 3rem);
  }

  .w-post-grande h3 {
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  }

  .w-post-grande p {
    font-size: 1.0625rem;
  }
}

.w-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  font-weight: 600;
}

.w-paginacion a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--w-linea);
  border-radius: 50%;
  text-decoration: none;
}

.w-paginacion a:hover {
  border-color: var(--w-tinta);
}

/* Artículo. */
.w-articulo-estrecho {
  max-width: 46rem;
}

.w-h1-articulo {
  font-size: clamp(2.125rem, 4.4vw, 3.25rem);
  line-height: 1.06;
}

.w-articulo-cabecera {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.w-articulo-cabecera .w-hero-parrafo {
  margin-bottom: 1.5rem !important;
}

.w-articulo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--w-linea);
  font-size: .875rem;
  color: var(--w-gris);
}

.w-articulo-meta i {
  margin-right: .25rem;
}

.w-articulo-imagen {
  width: 100%;
  margin-bottom: 2.5rem;
  border-radius: var(--w-radio);
}

.w-prosa {
  padding-bottom: clamp(3rem, 6vw, 5rem);
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--w-tinta-2);
}

.w-prosa > * + * {
  margin-top: 1.25em !important;
}

.w-prosa h2 {
  margin-top: 2.25em !important;
  font-family: var(--w-titulo);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--w-tinta);
}

.w-prosa h3 {
  margin-top: 1.75em !important;
  font-family: var(--w-titulo);
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--w-tinta);
}

.w-prosa ul,
.w-prosa ol {
  padding-left: 1.25rem;
  list-style: revert;
}

.w-prosa li + li {
  margin-top: .5em;
}

.w-prosa li::marker {
  color: var(--w-marca-oscura);
  font-weight: 700;
}

.w-prosa a {
  color: var(--w-marca-oscura);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.w-prosa strong {
  color: var(--w-tinta);
}

.w-prosa blockquote {
  margin: 1.75em 0 !important;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--w-marca);
  border-radius: 0 16px 16px 0;
  background: var(--w-suave);
  font-size: 1.125rem;
  color: var(--w-tinta);
}

.w-articulo-etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-bottom: clamp(3rem, 6vw, 4rem);
  font-size: .875rem;
  color: var(--w-gris);
}

.w-etiqueta-tag {
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--w-suave);
}

/* --- Compatibilidad: páginas con estilos propios dentro del layout nuevo --
 * Nosotros, Equipo y Solicitar demo traen su CSS (paginas-marca.css y el de
 * la campaña), escrito con los nombres de color de landing-fisio.css. Aquí
 * esos nombres apuntan a la paleta nueva, y los titulares toman la tipografía
 * nueva: así esas páginas se ven como el resto sin reescribirlas.
 */
.w-body {
  --fisio-primary: #00b8a9;
  --fisio-primary-rgb: 0, 184, 169;
  --fisio-secondary: #00786e;
  --fisio-secondary-rgb: 0, 120, 110;
  --fisio-accent: #00d2c4;
  --fisio-accent-rgb: 0, 210, 196;
  --text-primary: var(--w-tinta);
  --text-secondary: var(--w-gris);
  --border-color: var(--w-linea);
  --bg-primary: #ffffff;
  --bg-secondary: var(--w-suave);
  --card-bg: #ffffff;
  --card-radius: 20px;
  --navbar-bg: rgba(255, 255, 255, .92);
  --hero-gradient: linear-gradient(180deg, #f6fbfa 0%, #ffffff 80%);
  --dark-color: var(--w-noche);
}

.w-body .container {
  width: min(var(--w-contenedor), 100% - 2 * clamp(1.125rem, 4vw, 2rem));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.w-body .text-center { text-align: center; }
.w-body .mt-3 { margin-top: 1rem !important; }
.w-body .mt-5 { margin-top: 3rem !important; }
.w-body .ms-2 { margin-left: .5rem !important; }

.w-body .marca-eyebrow,
.w-body .marca-display,
.w-body .marca-cierre,
.w-body .marca-titulo,
.w-body .eje__nodo,
.w-body .eje__anio,
.w-body .eje__titulo,
.w-body .cifra__valor,
.w-body .principio__titulo,
.w-body .ficha__iniciales,
.w-body .ficha__rol,
.w-body .ficha__nombre {
  font-family: var(--w-titulo) !important;
}

.w-body .marca-display {
  letter-spacing: -.035em;
}

.w-body .btn-hero-primary,
.w-body .btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease;
}

.w-body .btn-hero-primary {
  background: var(--w-tinta);
  color: #fff;
}

.w-body .btn-hero-secondary {
  border: 1px solid var(--w-linea);
  background: #fff;
  color: var(--w-tinta);
}

.w-body .btn-hero-primary:hover,
.w-body .btn-hero-secondary:hover {
  transform: translateY(-2px);
}

/* Botones de la campaña: pastilla como en el resto de la web. */
.w-body .campana-boton {
  border-radius: 999px;
}

.w-body .campana-boton-principal {
  border-color: var(--w-tinta);
  background: var(--w-tinta);
  color: #fff;
}

.w-body .campana-boton-principal:hover {
  border-color: #14332f;
  background: #14332f;
  color: #fff;
}

.w-body .campana-cierre .campana-boton-principal,
.w-body .barra-embudo .campana-boton-principal {
  border-color: var(--w-marca);
  background: var(--w-marca);
  color: #03201d;
}

.w-body .campana-form,
.w-body .campana-tarjeta,
.w-body .campana-captura {
  border-radius: 22px;
}

/* --- Modo embudo (landing de anuncios): cabecera y pie mínimos ----------- */

.w-top-embudo .w-nav {
  border-color: var(--w-linea);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: none;
}

.w-nav-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid #bfe9cf;
  border-radius: 999px;
  font-weight: 600;
  color: #128c4a !important;
  text-decoration: none;
}

.w-pie-embudo {
  padding-top: 0;
}

.w-pie-embudo .w-pie-legal {
  border-top: 0;
}

.w-body .marca-hero {
  background: linear-gradient(180deg, #f6fbfa 0%, #ffffff 85%);
}

@media (max-width: 991.98px) {
  .w-pie-embudo {
    padding-bottom: 5.5rem;
  }
}

/* --- Páginas legales --------------------------------------------------- */

.w-legal-hero {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.w-legal-seccion {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.w-legal {
  display: grid;
  gap: 2.5rem;
}

.w-legal-lateral {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.w-legal-enlaces {
  display: grid;
  gap: .25rem;
}

.w-legal-enlaces a {
  padding: .625rem .875rem;
  border-radius: 12px;
  color: var(--w-tinta-2);
  font-weight: 500;
  text-decoration: none;
}

.w-legal-enlaces a:hover {
  background: var(--w-suave);
}

.w-legal-enlaces a.is-activa {
  background: var(--w-marca-suave);
  color: var(--w-marca-oscura);
  font-weight: 600;
}

.w-legal-empresa {
  display: grid;
  gap: .125rem;
  padding: 1rem;
  border: 1px solid var(--w-linea);
  border-radius: 16px;
  font-size: .875rem;
  color: var(--w-gris);
}

.w-legal-empresa strong {
  color: var(--w-tinta);
}

.w-legal-texto {
  min-width: 0;
  max-width: 760px;
}

.w-legal-texto table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.w-legal-texto th,
.w-legal-texto td {
  padding: .625rem .75rem;
  border: 1px solid var(--w-linea);
  text-align: left;
  vertical-align: top;
}

.w-legal-texto thead th {
  background: var(--w-suave);
}

@media (max-width: 767.98px) {
  .w-legal-texto table {
    display: block;
    overflow-x: auto;
  }
}

@media (min-width: 992px) {
  .w-legal {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4rem;
  }

  .w-legal-lateral {
    position: sticky;
    top: 6.5rem;
  }
}

.w-nav-whatsapp {
  white-space: nowrap;
}

@media (max-width: 479.98px) {
  .w-nav-whatsapp span {
    display: none;
  }

  .w-nav-whatsapp {
    padding: .625rem;
    font-size: 1.25rem;
  }
}

/* Desplegable de idioma dentro del menú de la web. */
.w-idioma .idioma-selector__boton {
  min-height: 38px;
  border-color: var(--w-linea);
  background: #fff;
  color: var(--w-tinta);
  font-size: .875rem;
}

@media (max-width: 1023.98px) {
  .w-nav-acciones .w-idioma {
    align-self: flex-start;
  }

  .w-nav-acciones .w-idioma .idioma-selector__menu {
    left: 0;
    right: auto;
  }
}

/* Palabras largas (alemán, rumano…) en titulares: se parten con guion en vez de desbordar. */
.w-h1,
.w-h2,
.w-h1-interior {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Menú en idiomas con textos largos -------------------------------------
 * En francés, portugués y alemán las etiquetas son más largas que en español
 * y el menú no cabía: los enlaces se partían en dos líneas y los botones se
 * salían por la derecha. Ningún texto del menú salta de línea, y en esos
 * idiomas el menú se compacta un poco.
 */
@media (min-width: 1024px) {
  .w-nav-enlace,
  .w-nav-acciones .w-boton {
    white-space: nowrap;
  }

  :is(html[lang="fr"], html[lang="pt"], html[lang="de"]) .w-nav-enlaces {
    gap: 0;
  }

  :is(html[lang="fr"], html[lang="pt"], html[lang="de"]) .w-nav-enlace {
    padding-inline: .625rem;
    font-size: .875rem;
  }

  :is(html[lang="fr"], html[lang="pt"], html[lang="de"]) .w-nav-acciones {
    gap: .5rem;
  }

  :is(html[lang="fr"], html[lang="pt"], html[lang="de"]) .w-nav-acciones .w-boton-sm {
    padding-inline: .875rem;
    font-size: .8125rem;
  }
}

/* Entre 1024 y 1279 px el menú va justo en todos los idiomas. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .w-nav {
    gap: .5rem;
  }

  .w-nav-menu {
    gap: .5rem;
  }

  .w-nav-enlace {
    padding-inline: .5rem;
    font-size: .875rem;
  }

  .w-nav-acciones {
    gap: .375rem;
  }

  .w-nav-acciones .w-boton-sm {
    padding-inline: .75rem;
    font-size: .8125rem;
  }

  .w-logo .logo-container {
    max-width: 150px !important;
  }

  /* El desplegable de idioma se queda en la bandera. */
  .w-idioma .idioma-selector__boton > span,
  .w-idioma .idioma-selector__flecha {
    display: none;
  }

  .w-idioma .idioma-selector__boton {
    padding-inline: .625rem;
  }

  :is(html[lang="fr"], html[lang="pt"], html[lang="de"]) .w-nav-enlace {
    padding-inline: .375rem;
    font-size: .8125rem;
  }

  /* El icono de "Ver demo" es lo primero que sobra. */
  :is(html[lang="fr"], html[lang="pt"], html[lang="de"]) .w-nav-acciones .w-boton-fantasma i {
    display: none;
  }
}

.w-idioma .idioma-selector__boton {
  gap: .375rem;
}

/* --- Botón "Habla con nuestro agente comercial de IA" (portada) --------- */
.w-agente-ia {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  margin-top: 1.25rem;
  padding: .625rem 1.125rem .625rem .625rem;
  border: 1px solid var(--w-linea);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  text-align: left;
  color: var(--w-tinta);
  cursor: pointer;
  box-shadow: 0 10px 30px -18px rgba(11, 31, 29, .35);
  transition: transform .2s ease, border-color .2s ease;
}

.w-agente-ia:hover {
  transform: translateY(-2px);
  border-color: var(--w-marca);
}

.w-agente-ia-icono {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--w-marca), var(--w-marca-oscura));
  color: #fff;
}

.w-agente-ia-icono::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--w-marca);
  border-radius: 50%;
  opacity: 0;
  animation: w-agente-pulso 2s ease-out infinite;
}

@keyframes w-agente-pulso {
  from { transform: scale(.9); opacity: .6; }
  to { transform: scale(1.35); opacity: 0; }
}

.w-agente-ia strong {
  display: block;
  font-size: .9375rem;
}

.w-agente-ia span span {
  display: block;
  font-size: .8125rem;
  color: var(--w-gris);
}

.w-agente-ia > .fa-arrow-right {
  font-size: .8125rem;
  color: var(--w-marca-oscura);
}

@media (prefers-reduced-motion: reduce) {
  .w-agente-ia-icono::after { animation: none; }
}

/* --- Calculadora de precios --------------------------------------------- */
/*
 * El componente .pc es idéntico en Fisionexa y Dental y hereda la fuente del
 * cuerpo. Aquí solo se le pone la voz de esta web: títulos y cifras con la
 * fuente de titulares y la etiqueta de sección como las demás (.w-etiqueta).
 * Los colores siguen saliendo de los tokens del componente (claro y oscuro).
 */
.pricing-calculator .pc-title,
.pricing-calculator .pc-summary-title,
.pricing-calculator .pc-total-amount {
  font-family: var(--w-titulo);
}

.pricing-calculator .pc-title {
  max-width: 20ch;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.pricing-calculator .pc-subtitle {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
}

.pricing-calculator .pc-eyebrow {
  align-items: center;
  gap: .5rem;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-calculator .pc-eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* --- Menú: Soluciones y Recursos -------------------------------------------
 * "Soluciones" es un desplegable amplio en tres bloques (clínica y pacientes,
 * comunicación y automatización, administración), con icono y título breve.
 * "Recursos" es una lista corta junto a los botones. En móvil ambos se
 * despliegan dentro del menú a pantalla completa (reglas de .w-mega de arriba).
 */
.w-soluciones-rejilla {
  display: grid;
  gap: 1rem 1.5rem;
  padding: .5rem;
}

.w-soluciones-bloque ul,
.w-mega-recursos ul {
  display: grid;
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-soluciones-titulo {
  margin: 0 0 .375rem !important;
  padding: 0 .625rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w-marca-oscura);
}

.w-soluciones-enlace {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .625rem;
  border-radius: 12px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--w-tinta);
  text-decoration: none;
  transition: background-color .15s ease;
}

.w-soluciones-enlace:hover {
  background: var(--w-suave);
}

.w-soluciones-enlace .w-mega-icono {
  flex: none;
}

.w-nav-demo {
  gap: .5rem;
}

@media (min-width: 1024px) {
  .w-soluciones-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .w-mega-soluciones {
    left: 0;
    width: min(54rem, 92vw);
    padding: 1rem;
    transform: translate(0, 6px);
  }

  .w-nav-desplegable.is-abierto .w-mega-soluciones,
  .w-nav-desplegable:hover .w-mega-soluciones {
    transform: translate(0, 0);
  }

  .w-mega-recursos {
    left: auto;
    right: 0;
    width: 17rem;
    transform: translate(0, 6px);
  }

  .w-nav-desplegable.is-abierto .w-mega-recursos,
  .w-nav-desplegable:hover .w-mega-recursos {
    transform: translate(0, 0);
  }

  /* "Pide tu demo", el CTA principal del menú: un anillo de marca lo destaca. */
  .w-body .w-nav-demo {
    box-shadow: 0 0 0 4px rgba(0, 184, 169, .22), 0 10px 30px -12px rgba(11, 31, 29, .6);
  }
}

@media (max-width: 1023.98px) {
  .w-nav-recursos .w-nav-enlace {
    padding-inline: 1rem;
  }

  .w-nav-acciones .w-nav-recursos {
    order: 3;
  }

  .w-nav-acciones .w-idioma {
    order: 4;
  }
}

/* --- Hero de la portada (centrado) ---------------------------------------
 * Composición centrada con mucho aire: la palabra clave pequeña encima (dentro
 * del mismo H1), el titular grande con "más fácil" e "IA" en el color de la
 * marca, el subtítulo y dos CTAs. La maqueta del producto queda debajo.
 * Tipografía Plus Jakarta Sans solo en el hero (prueba).
 */
.w-hero-portada {
  --w-hero-fuente: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  padding-block: clamp(8.5rem, 15vw, 11.5rem) clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}

.w-hero-portada .w-hero-fondo {
  background:
    radial-gradient(52rem 30rem at 50% -4%, rgba(0, 184, 169, .13), transparent 68%),
    radial-gradient(30rem 22rem at 88% 38%, rgba(109, 93, 252, .07), transparent 70%),
    radial-gradient(30rem 22rem at 10% 52%, rgba(0, 184, 169, .06), transparent 70%),
    #f8faf9;
}

.w-hero-portada .w-hero-fondo::after {
  display: none;
}

.w-hero-portada .w-hero-rejilla {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3.5rem, 7vw, 5rem);
}

.w-hero-portada .w-hero-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 62rem;
  margin-inline: auto;
}

/* El H1 es solo la palabra clave (pequeña); el titular grande es un <p>. */
.w-hero-clave,
.w-hero-claim {
  font-family: var(--w-hero-fuente);
}

.w-body .w-hero-clave {
  width: auto;
  margin: 0 0 clamp(1.25rem, 2.6vw, 1.75rem);
}

.w-hero-clave {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .4375rem 1rem;
  border: 1px solid rgba(0, 120, 110, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w-marca-oscura);
  box-shadow: 0 4px 18px -12px rgba(11, 31, 29, .35);
}

.w-hero-clave::before {
  content: '';
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--w-marca);
  box-shadow: 0 0 0 4px rgba(0, 184, 169, .18);
}

.w-hero-claim {
  display: block;
  width: 100%;
  font-size: clamp(2.5rem, 6.6vw, 5.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  word-spacing: .04em;
  color: var(--w-tinta);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.w-hero-claim em {
  font-style: normal;
  background: linear-gradient(100deg, var(--w-marca) 10%, var(--w-marca-oscura) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.w-hero-portada .w-hero-parrafo {
  max-width: 40rem;
  margin: clamp(1.5rem, 3vw, 2rem) auto clamp(2rem, 4vw, 2.5rem) !important;
  font-family: var(--w-hero-fuente);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 500;
  color: var(--w-gris);
}

.w-hero-portada .w-botones {
  justify-content: center;
}

.w-hero-portada .w-prueba-social {
  justify-content: center;
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
}

/* La maqueta, centrada debajo del texto y sin inclinar. */
.w-hero-portada .w-maqueta {
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: 0 0 2.5rem;
  text-align: left;
}

.w-hero-portada .w-ventana {
  transform: none;
}

@media (min-width: 768px) {
  .w-hero-portada .w-maqueta {
    padding: 0 3rem 2.5rem;
  }
}

@media (max-width: 575.98px) {
  .w-hero-portada .w-botones {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .w-hero-portada .w-botones .w-boton {
    justify-content: center;
  }

  .w-hero-clave {
    font-size: .6875rem;
    letter-spacing: .06em;
  }

  .w-hero-portada .w-maqueta {
    padding-bottom: 7rem;
  }
}

/* El botón del agente comercial de IA, ahora en el cierre. */
.w-cierre .w-agente-ia {
  margin-top: 1.75rem;
}

/* --- Beneficios (tras el hero) -------------------------------------------
 * Cuatro beneficios con una maqueta animada cada uno. Las animaciones van en
 * bucle suave y se apagan con prefers-reduced-motion.
 */
.w-beneficios-titulo {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem) !important;
  text-align: center;
}

.w-ben-rejilla {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 720px) {
  .w-ben-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1140px) {
  .w-ben-rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.w-ben {
  display: flex;
  flex-direction: column;
  padding: .75rem .75rem 1.5rem;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.w-ben:hover {
  transform: translateY(-4px);
  box-shadow: var(--w-sombra);
}

.w-ben h3 {
  margin: 1.25rem .75rem .375rem !important;
  font-family: var(--w-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.w-ben > p {
  margin: 0 .75rem !important;
  font-size: .9375rem;
  color: var(--w-gris);
}

.w-ben-visual {
  display: grid;
  place-items: center;
  height: 15.5rem;
  padding: 1rem;
  border-radius: calc(var(--w-radio) - 8px);
  background:
    radial-gradient(18rem 10rem at 80% 0%, rgba(0, 184, 169, .16), transparent 70%),
    var(--w-suave);
  overflow: hidden;
}

.w-ben-tarjeta {
  width: 100%;
  max-width: 17rem;
  padding: .875rem;
  border: 1px solid var(--w-linea);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(11, 31, 29, .4);
  font-size: .8125rem;
  line-height: 1.35;
}

.w-ben-tarjeta ul,
.w-ben-tarjeta dl {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1. Ahorra tiempo: las tareas se marcan solas. */
.w-ben-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: .75rem !important;
  padding: .1875rem .625rem;
  border-radius: 999px;
  background: var(--w-violeta-suave);
  color: var(--w-violeta);
  font-size: .6875rem;
  font-weight: 700;
}

.w-ben-tareas li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--w-tinta-2);
}

.w-ben-check {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--w-linea);
  border-radius: 50%;
  font-size: .5625rem;
  color: transparent;
  animation: w-ben-marcar 8s ease infinite;
  animation-delay: calc(var(--i) * .6s);
}

@keyframes w-ben-marcar {
  0%, 8% { background: #fff; border-color: var(--w-linea); color: transparent; transform: scale(1); }
  13% { transform: scale(1.2); }
  16%, 88% { background: var(--w-verde); border-color: var(--w-verde); color: #fff; transform: scale(1); }
  100% { background: #fff; border-color: var(--w-linea); color: transparent; }
}

/* 2. Organizada: ficha del paciente con todo a mano. */
.w-ben-ficha-cabecera {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--w-linea);
  font-size: .9375rem;
}

.w-ben-avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--w-marca-suave);
  color: var(--w-marca-oscura);
  font-size: .75rem;
  font-weight: 800;
}

.w-ben-ficha dl > div {
  animation: w-ben-entrar 8s ease infinite;
  animation-delay: calc(var(--i) * .5s);
}

.w-ben-ficha dt {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--w-gris);
}

.w-ben-ficha dt i {
  width: 1rem;
  color: var(--w-marca-oscura);
}

.w-ben-ficha dd {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .125rem 0 0 1.25rem;
  font-weight: 700;
  color: var(--w-tinta);
}

.w-ben-progreso {
  flex: 1;
  height: .375rem;
  border-radius: 999px;
  background: var(--w-linea);
  overflow: hidden;
}

.w-ben-progreso i {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: var(--w-marca);
  transform-origin: left;
  animation: w-ben-crecer 8s ease infinite;
}

@keyframes w-ben-entrar {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  10%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes w-ben-crecer {
  0%, 10% { transform: scaleX(0); }
  30%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* 3. Atiende mejor: un mensaje antes y otro después de la cita. */
.w-ben-chat {
  display: grid;
  gap: .375rem;
}

.w-ben-etiqueta {
  justify-self: start;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--w-gris);
}

.w-ben-etiqueta-despues {
  justify-self: end;
  margin-top: .375rem;
}

.w-ben-burbuja {
  justify-self: start;
  max-width: 90%;
  padding: .5rem .75rem;
  border-radius: 12px 12px 12px 4px;
  background: #dcf8c6;
  color: var(--w-tinta);
  animation: w-ben-entrar 8s ease infinite;
}

.w-ben-burbuja-despues {
  justify-self: end;
  border-radius: 12px 12px 4px 12px;
  background: var(--w-violeta);
  color: #fff;
  animation-delay: 1.4s;
}

/* 4. Agenda: la cancelación se cubre con la lista de espera. */
.w-ben-agenda {
  display: grid;
  gap: .5rem;
  padding: .625rem;
  font-size: .75rem;
}

.w-ben-hueco {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  min-height: 3.25rem;
  padding: .375rem .625rem;
  border-left: 3px solid var(--c, var(--w-linea));
  border-radius: 4px 10px 10px 4px;
  background: color-mix(in srgb, var(--c, #94a3a0) 8%, #fff);
}

.w-ben-hueco time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--w-tinta-2);
}

.w-ben-hueco span {
  font-weight: 600;
  color: var(--w-tinta-2);
}

.w-ben-hueco span i {
  margin-right: .25rem;
}

.w-ben-hueco .fa-whatsapp {
  color: var(--w-verde);
}

.w-ben-hueco-cambio {
  position: relative;
  animation: w-ben-hueco 8s ease infinite;
}

.w-ben-hueco-cambio span {
  grid-column: 2;
  grid-row: 1;
}

.w-ben-cancelada {
  color: #c2410c !important;
  text-decoration: line-through;
  animation: w-ben-salir 8s ease infinite;
}

.w-ben-cubierto {
  color: var(--w-marca-oscura) !important;
  opacity: 0;
  animation: w-ben-llegar 8s ease infinite;
}

@keyframes w-ben-hueco {
  0%, 35% { border-left-color: #f97316; background: #fff4ec; }
  45%, 92% { border-left-color: var(--w-marca); background: var(--w-marca-suave); }
  100% { border-left-color: #f97316; background: #fff4ec; }
}

@keyframes w-ben-salir {
  0%, 35% { opacity: 1; }
  42%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes w-ben-llegar {
  0%, 38% { opacity: 0; transform: translateY(6px); }
  46%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

.w-beneficios .w-botones {
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  .w-ben-check,
  .w-ben-ficha dl > div,
  .w-ben-progreso i,
  .w-ben-burbuja,
  .w-ben-hueco-cambio,
  .w-ben-cancelada,
  .w-ben-cubierto {
    animation: none;
  }

  .w-ben-check { background: var(--w-verde); border-color: var(--w-verde); color: #fff; }
  .w-ben-cancelada { opacity: 0; }
  .w-ben-cubierto { opacity: 1; }
  .w-ben-hueco-cambio { border-left-color: var(--w-marca); background: var(--w-marca-suave); }
}

.w-beneficios-titulo {
  hyphens: manual;
}

@media (max-width: 575.98px) {
  .w-ben-visual {
    height: 13.5rem;
  }
}

/* --- Soluciones principales (portada) ------------------------------------
 * Cinco tarjetas: la recepcionista IA ocupa dos columnas y dos filas a la
 * izquierda; las otras cuatro, en 2×2 a la derecha. Cada una con su maqueta.
 */
.w-principales-titulo {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem) !important;
  text-align: center;
  hyphens: manual;
}

@media (min-width: 1024px) {
  .w-bento-principales {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.w-bento-principales .w-tile h3 a {
  color: inherit;
  text-decoration: none;
}

.w-bento-principales .w-tile h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.w-bento-principales .w-tile-ia .w-botones {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 1rem 1.5rem;
}

.w-bento-principales .w-tile-ia .w-enlace {
  margin-top: 0;
}

.w-boton-principal-claro {
  border: 0;
  background: var(--w-marca);
  color: #03201d;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.w-boton-principal-claro:hover {
  background: #7ee3d8;
}

.w-principal-ia {
  display: grid;
  gap: 1rem;
  align-items: end;
}

@media (min-width: 640px) {
  .w-principal-ia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.w-principal-ia .w-mini-onda {
  margin-top: 0;
}

.w-principal-ia .w-mini-onda .w-principal-ia-llamada {
  margin: 0 0 1rem !important;
  color: rgba(255, 255, 255, .8) !important;
}

.w-principal-ia-llamada strong {
  color: #fff;
}

.w-principal-ia-chat {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
  color: var(--w-tinta);
}

.w-principal-ia-chat p {
  max-width: none !important;
  font-size: .8125rem !important;
  line-height: 1.45 !important;
}

.w-principal-ia-cabecera {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-weight: 700;
  color: var(--w-gris) !important;
}

.w-principal-ia-cabecera i {
  font-size: 1rem;
  color: var(--w-verde);
}

.w-principal-burbuja {
  justify-self: start;
  width: fit-content;
  max-width: 88% !important;
  padding: .5rem .75rem;
  border-radius: 12px 12px 12px 4px;
  background: #eef2f1;
  color: var(--w-tinta) !important;
  animation: w-ben-entrar 7s ease infinite;
}

.w-principal-burbuja-ia {
  justify-self: end;
  border-radius: 12px 12px 4px 12px;
  background: var(--w-violeta);
  color: #fff !important;
  animation-delay: 1.2s;
}

.w-principal-hecho {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-weight: 700;
  color: var(--w-verde) !important;
  animation: w-ben-entrar 7s ease infinite;
  animation-delay: 2.2s;
}

/* Maquetas pequeñas de las otras cuatro tarjetas. */
.w-principal-visual {
  display: grid;
  align-content: center;
  min-height: 7.5rem;
  margin: -.25rem -.25rem .5rem;
  padding: 1rem;
  border-radius: 16px;
  background:
    radial-gradient(14rem 8rem at 85% 0%, rgba(0, 184, 169, .14), transparent 70%),
    var(--w-suave);
}

.w-principal-calendario div {
  animation: w-ben-entrar 7s ease infinite;
  animation-delay: calc(var(--i) * .35s);
}

.w-principal-calendario span {
  height: 16px;
}

.w-principal-mensajes {
  padding-top: 0;
}

.w-principal-mensajes p {
  animation: w-ben-entrar 7s ease infinite;
}

.w-principal-mensajes .w-mini-respuesta {
  animation-delay: 1.2s;
}

.w-principal-factura {
  flex-wrap: wrap;
  background: #fff;
}

.w-principal-factura em {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: #e8f7ee;
  font-size: .75rem;
  animation: w-ben-entrar 7s ease infinite;
  animation-delay: .8s;
}

.w-principales-pie {
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  .w-principal-burbuja,
  .w-principal-hecho,
  .w-principal-calendario div,
  .w-principal-mensajes p,
  .w-principal-factura em {
    animation: none;
  }
}

/* --- Página /soluciones --------------------------------------------------- */
.w-soluciones-bloque .w-h2 {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}

.w-soluciones-lista {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .w-soluciones-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .w-soluciones-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.w-soluciones-tarjeta {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.w-soluciones-tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--w-sombra);
}

.w-soluciones-tarjeta h3 {
  margin-top: .375rem !important;
  font-family: var(--w-titulo);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.w-soluciones-tarjeta p {
  flex: 1;
  font-size: .9375rem;
  color: var(--w-gris);
}

.w-bento-principales .w-tile-ia {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.w-bento-principales .w-principal-ia {
  flex: 1;
  align-items: center;
}

.w-bento-principales .w-tile-ia .w-tile-texto h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.w-bento-principales .w-onda {
  height: 72px;
}

.w-principal-visual {
  height: 9.5rem;
  overflow: hidden;
}

.w-bento-principales .w-principal-ia {
  align-content: center;
}

.w-principal-visual {
  height: 10.75rem;
}

/* --- Un día en la clínica (compacto) --------------------------------------
 * Cinco momentos en una línea temporal: horizontal desde 900 px y vertical
 * en móvil. Una barra recorre el día y cada momento se ilumina por turnos
 * con su estado (bucle de 10 s, 2 s por momento).
 */
.w-dia-seccion {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.w-dia-titulo {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem) !important;
  text-align: center;
  hyphens: manual;
}

.w-dia-linea {
  --w-dia-ciclo: 10s;
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-dia-linea li {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}

.w-dia-linea li > :not(.w-dia-punto) {
  grid-column: 2;
}

.w-dia-punto {
  position: relative;
  z-index: 1;
  grid-row: span 4;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--w-linea);
  border-radius: 50%;
  background: #fff;
  color: var(--w-marca-oscura);
  animation: w-dia-punto var(--w-dia-ciclo) ease infinite;
  animation-delay: calc(var(--i) * 2s);
}

.w-dia-linea time {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--w-marca-oscura);
  font-variant-numeric: tabular-nums;
}

.w-dia-linea h3 {
  margin-top: .125rem !important;
  font-family: var(--w-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.w-dia-linea p {
  margin-top: .25rem !important;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--w-gris);
}

.w-dia-estado {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .625rem;
  padding: .1875rem .625rem;
  border-radius: 999px;
  background: #e8f7ee;
  font-size: .75rem;
  font-weight: 700;
  color: var(--w-verde);
  opacity: .35;
  animation: w-dia-estado var(--w-dia-ciclo) ease infinite;
  animation-delay: calc(var(--i) * 2s);
}

/* Línea vertical en móvil. */
.w-dia-linea::before {
  content: '';
  position: absolute;
  top: 1.375rem;
  bottom: 1.375rem;
  left: 1.375rem;
  width: 2px;
  background: var(--w-linea);
}

@keyframes w-dia-punto {
  0%, 2% { background: #fff; color: var(--w-marca-oscura); border-color: var(--w-linea); transform: scale(1); box-shadow: none; }
  6%, 18% { background: var(--w-marca); color: #fff; border-color: var(--w-marca); transform: scale(1.1); box-shadow: 0 0 0 6px rgba(0, 184, 169, .18); }
  24%, 100% { background: var(--w-marca-suave); color: var(--w-marca-oscura); border-color: var(--w-marca-suave); transform: scale(1); box-shadow: none; }
}

@keyframes w-dia-estado {
  0%, 2% { opacity: .35; transform: translateY(4px); }
  8%, 100% { opacity: 1; transform: none; }
}

@media (min-width: 900px) {
  .w-dia-linea {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .w-dia-linea li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .w-dia-punto {
    margin-bottom: 1rem;
  }

  /* Línea horizontal con una barra que recorre el día. */
  .w-dia-linea::before {
    top: 1.375rem;
    bottom: auto;
    left: 1.375rem;
    right: 1.375rem;
    width: auto;
    height: 2px;
  }

  .w-dia-linea::after {
    content: '';
    position: absolute;
    top: 1.375rem;
    left: 1.375rem;
    right: 1.375rem;
    height: 2px;
    background: var(--w-marca);
    transform-origin: left;
    animation: w-dia-barra var(--w-dia-ciclo) linear infinite;
  }
}

@keyframes w-dia-barra {
  0% { transform: scaleX(0); }
  84% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .w-dia-punto,
  .w-dia-estado,
  .w-dia-linea::after {
    animation: none;
  }

  .w-dia-estado { opacity: 1; }
  .w-dia-linea::after { transform: none; }
}

/* La línea acaba en el último punto: una columna menos su medio punto. */
@media (min-width: 900px) {
  .w-dia-linea::before,
  .w-dia-linea::after {
    right: calc((100% - 6rem) / 5 - 1.375rem);
  }
}

/* --- Recepcionista IA: sección para probarla ------------------------------
 * Cuatro beneficios en 2×2, dos botones de prueba y, a la derecha, una
 * llamada con su transcripción que acaba en la confirmación por WhatsApp
 * (bucle de 12 s).
 */
.w-ia-beneficios {
  display: grid;
  gap: .625rem;
  margin: 1.75rem 0 0 !important;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .w-ia-beneficios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.w-ia-beneficios li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  font-weight: 600;
  color: #fff;
}

.w-ia-beneficios i {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(0, 184, 169, .2);
  color: #7ff0e3;
  font-size: .875rem;
}

.w-ia-botones {
  margin-top: 2rem;
}

.w-ia-ver {
  display: inline-flex;
  margin-top: 1.25rem;
  color: #9be8df;
}

.w-ia-demo {
  position: relative;
  padding-bottom: 2.5rem;
}

.w-ia-telefono {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
}

.w-ia-telefono-cabecera {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1rem;
}

.w-ia-telefono-cabecera .w-llamada-avatar {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  font-size: 1.125rem;
  box-shadow: 0 0 0 6px rgba(109, 93, 252, .15);
}

.w-ia-telefono-cabecera strong {
  display: block;
  color: #fff;
}

.w-ia-telefono-cabecera small {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
}

.w-ia-directo {
  width: .625rem;
  height: .625rem;
  margin-left: auto;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
  animation: w-ia-directo 1.6s ease-out infinite;
}

@keyframes w-ia-directo {
  to { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.w-ia-telefono .w-onda {
  height: 44px;
}

.w-ia-transcripcion {
  display: grid;
  gap: .5rem;
  min-height: 12.5rem;
  margin-top: 1rem;
  align-content: start;
}

.w-ia-frase {
  justify-self: start;
  max-width: 88%;
  padding: .5625rem .875rem;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, .1);
  font-size: .875rem;
  line-height: 1.45;
  color: #fff;
  opacity: 0;
  animation: w-ia-frase 12s ease infinite;
  animation-delay: calc(var(--i) * 1.6s);
}

.w-ia-frase-ia {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--w-violeta);
}

@keyframes w-ia-frase {
  0% { opacity: 0; transform: translateY(8px); }
  4%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}

.w-ia-aviso-wa {
  position: absolute;
  right: -.5rem;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem .75rem .75rem;
  border-radius: 16px;
  background: #fff;
  color: var(--w-gris);
  font-size: .8125rem;
  line-height: 1.35;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
  opacity: 0;
  animation: w-ia-wa 12s ease infinite;
}

.w-ia-aviso-wa strong {
  display: block;
  font-size: .875rem;
  color: var(--w-tinta);
}

.w-ia-aviso-wa-icono {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--w-verde);
  color: #fff;
  font-size: 1.125rem;
}

@keyframes w-ia-wa {
  0%, 52% { opacity: 0; transform: translateY(10px) scale(.96); }
  58%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}

@media (max-width: 575.98px) {
  .w-ia-aviso-wa {
    right: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-ia-frase,
  .w-ia-aviso-wa,
  .w-ia-directo {
    opacity: 1;
    animation: none;
  }
}

/* --- Comparativa visual --------------------------------------------------- */
.w-comp-titulo {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem) !important;
  text-align: center;
  hyphens: manual;
}

.w-comp {
  display: grid;
  gap: .625rem;
  max-width: 56rem;
  margin-inline: auto;
}

.w-comp-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  align-items: stretch;
}

.w-comp-sin,
.w-comp-con {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-radius: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.w-comp-sin {
  background: #fdf1ec;
  color: #7c2d12;
}

.w-comp-con {
  background: var(--w-marca-suave);
  color: var(--w-tinta);
}

.w-comp-sin i,
.w-comp-con i {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: .6875rem;
}

.w-comp-sin i {
  background: #fbd5c5;
  color: #c2410c;
}

.w-comp-con i {
  background: var(--w-marca);
  color: #fff;
}

.w-comp-flecha {
  display: grid;
  place-items: center;
  color: var(--w-marca-oscura);
}

.w-comp-cabeza .w-comp-sin,
.w-comp-cabeza .w-comp-con {
  justify-content: center;
  padding-block: .625rem;
  background: none;
  font-family: var(--w-titulo);
  font-size: 1.125rem;
  font-weight: 700;
}

.w-comp-cabeza .w-comp-sin { color: #9a3412; }
.w-comp-cabeza .w-comp-con { color: var(--w-marca-oscura); }

.w-comp-cabeza i {
  width: auto;
  height: auto;
  background: none !important;
  color: inherit !important;
  font-size: 1rem;
}

@media (max-width: 639.98px) {
  .w-comp-fila {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
  }

  .w-comp-flecha {
    height: 1.25rem;
    transform: rotate(90deg);
  }

  .w-comp-cabeza {
    display: none;
  }

  .w-comp-fila + .w-comp-fila {
    margin-top: .75rem;
  }
}

#ia .w-h2 {
  hyphens: manual;
}

/* --- Normativa (compacta) --------------------------------------------------
 * Cuatro tarjetas en fila; la primera (facturación) con el color de marca.
 */
.w-norma-titulo,
.w-cambio-titulo {
  hyphens: manual;
}

.w-norma {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .w-norma {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .w-norma {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.w-norma li {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
}

.w-norma h3 {
  margin-top: .5rem !important;
  font-family: var(--w-titulo);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.w-norma p {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--w-gris);
}

.w-norma .w-norma-destacada {
  border-color: transparent;
  background: var(--w-noche);
  color: rgba(255, 255, 255, .75);
}

.w-norma .w-norma-destacada h3 {
  color: #fff;
}

.w-norma .w-norma-destacada p {
  color: rgba(255, 255, 255, .72);
}

.w-norma .w-norma-destacada .w-tile-icono {
  background: var(--w-marca);
  color: #03201d;
}

/* --- Cambio de software: tres pasos ---------------------------------------- */
.w-cambio {
  position: relative;
  display: grid;
  gap: 1.75rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .w-cambio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  /* Línea discontinua que une los tres iconos. */
  .w-cambio::before {
    content: '';
    position: absolute;
    top: 2.25rem;
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: 2px dashed rgba(0, 120, 110, .3);
  }
}

.w-cambio li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.w-cambio-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.125rem;
  border-radius: 22px;
  background: #fff;
  color: var(--w-marca-oscura);
  font-size: 1.5rem;
  box-shadow: var(--w-sombra);
  animation: w-cambio-paso 6s ease infinite;
  animation-delay: calc(var(--i) * 1.2s);
}

.w-cambio-icono b {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--w-tinta);
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
}

@keyframes w-cambio-paso {
  0%, 100% { transform: none; background: #fff; color: var(--w-marca-oscura); }
  8%, 20% { transform: translateY(-4px); background: var(--w-marca); color: #fff; }
  30% { transform: none; background: #fff; color: var(--w-marca-oscura); }
}

.w-cambio h3 {
  font-family: var(--w-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.w-cambio p {
  max-width: 19rem;
  margin-top: .375rem !important;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--w-gris);
}

.w-cambio-pie {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (prefers-reduced-motion: reduce) {
  .w-cambio-icono {
    animation: none;
  }
}

.w-body .w-cambio {
  margin-inline: auto;
}

/* --- Calculadora: más claridad y el resultado en primer plano ---------------
 * Solo estilos sobre el componente compartido (no se toca su HTML base): las
 * opciones se leen mejor, cada una con su ayuda breve, y el total va en una
 * franja de color con «Pide tu demo» y «Habla con un experto» debajo.
 */
.pricing-calculator .pc-check-text {
  display: grid;
  gap: .125rem;
  font-weight: 600;
}

.pricing-calculator .pc-check-ayuda {
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--w-gris);
}

.pricing-calculator .pc-input {
  font-size: 1.25rem;
  font-weight: 700;
}

.pricing-calculator .pc-summary {
  border: 2px solid var(--w-marca);
  box-shadow: 0 30px 70px -36px rgba(0, 120, 110, .55);
}

.pricing-calculator .pc-total {
  margin-inline: -1.5rem;
  padding: 1.25rem 1.5rem;
  border-top: 0;
  background: var(--w-marca-suave);
}

.pricing-calculator .pc-total-label {
  font-size: 1rem;
}

.pricing-calculator .pc-total-amount {
  font-family: var(--w-titulo);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  color: var(--w-tinta);
}

.pricing-calculator .pc-cta {
  background: var(--w-tinta);
  color: #fff;
  box-shadow: 0 14px 28px -14px rgba(11, 31, 29, .6);
}

.pricing-calculator .pc-cta:hover {
  background: #000;
}

.pricing-calculator .pc-cta-experto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 3rem;
  margin-top: .625rem;
  border: 1px solid var(--w-linea);
  border-radius: 14px;
  background: #fff;
  font-weight: 600;
  color: var(--w-tinta);
  text-decoration: none;
}

.pricing-calculator .pc-cta-experto:hover {
  border-color: var(--w-tinta);
}

.pricing-calculator .pc-cta-experto i {
  color: var(--w-verde);
}

/* --- Testimonios (solo reales y autorizados) ------------------------------- */
.w-testimonios-titulo {
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem) !important;
  text-align: center;
  hyphens: manual;
}

.w-testimonios {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .w-testimonios {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

.w-testimonio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--w-linea);
  border-radius: var(--w-radio);
  background: #fff;
}

.w-testimonio-video {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--w-noche);
}

.w-testimonio-video iframe,
.w-testimonio-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.w-testimonio-resultado {
  font-family: var(--w-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--w-marca-oscura);
}

.w-testimonio blockquote {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--w-tinta-2);
}

.w-testimonio figcaption {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  font-size: .8125rem;
  color: var(--w-gris);
}

.w-testimonio figcaption img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.w-testimonio figcaption strong {
  display: block;
  font-size: .9375rem;
  color: var(--w-tinta);
}

/* --- FAQ: enlace a más detalle y guías del blog en una línea ---------------- */
.w-faq-enlace {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-left: .25rem;
  font-weight: 600;
  color: var(--w-marca-oscura);
  text-decoration: none;
  white-space: nowrap;
}

.w-faq-enlace i {
  font-size: .75rem;
}

.w-faq-guias {
  margin-top: 1.5rem !important;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--w-gris);
}

.w-faq-guias span {
  font-weight: 700;
  color: var(--w-tinta-2);
}

.w-faq-guias a {
  color: var(--w-tinta-2);
}

/* --- Bloque final: titular y CTAs a la izquierda, formulario a la derecha -- */
.w-final {
  padding: clamp(1rem, 3vw, 2rem);
}

.w-final-caja {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: 36px;
  background:
    radial-gradient(40rem 20rem at 0% -10%, rgba(0, 184, 169, .4), transparent 65%),
    radial-gradient(30rem 20rem at 100% 100%, rgba(109, 93, 252, .35), transparent 60%),
    var(--w-noche);
  color: rgba(255, 255, 255, .75);
}

@media (min-width: 1024px) {
  .w-final-caja {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  }
}

.w-final-texto .w-h2 {
  color: #fff;
  hyphens: manual;
}

.w-final-texto > p {
  margin: 1.25rem 0 2rem !important;
  max-width: 32rem;
  font-size: 1.125rem;
}

.w-final .w-formulario {
  scroll-margin-top: 110px;
}

/* En móvil el formulario ya está a la vista: sobra el botón que baja a él. */
@media (max-width: 1023.98px) {
  .w-final-demo {
    display: none;
  }
}

/* --- Móvil: filas deslizables en lugar de tarjetas apiladas -----------------
 * Beneficios, las cuatro soluciones pequeñas y la normativa pasan a una fila
 * que se desliza con el dedo (se ve asomar la siguiente tarjeta). Ahorra
 * varias pantallas de scroll sin quitar contenido.
 */
@media (max-width: 639.98px) {
  .w-ben-rejilla,
  .w-norma {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    margin-inline: calc(-1 * clamp(1.125rem, 4vw, 2rem)) !important;
    padding: .25rem clamp(1.125rem, 4vw, 2rem) 1rem !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1.125rem, 4vw, 2rem);
    scrollbar-width: none;
  }

  .w-ben-rejilla::-webkit-scrollbar,
  .w-norma::-webkit-scrollbar,
  .w-bento-principales::-webkit-scrollbar {
    display: none;
  }

  .w-ben,
  .w-norma li,
  .w-bento-principales > .w-tile:not(.w-tile-ia) {
    scroll-snap-align: start;
  }

  .w-ben:hover {
    transform: none;
  }

  /* Soluciones: la recepcionista IA ocupa todo el ancho; las otras cuatro, en fila. */
  .w-bento-principales {
    grid-template-columns: repeat(4, 82%);
    grid-auto-flow: row;
    margin-inline: calc(-1 * clamp(1.125rem, 4vw, 2rem)) !important;
    padding: .25rem clamp(1.125rem, 4vw, 2rem) 1rem !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(1.125rem, 4vw, 2rem);
    scrollbar-width: none;
  }

  .w-bento-principales .w-tile-ia {
    grid-column: 1 / -1;
    position: sticky;
    left: 0;
    width: calc(100vw - 2 * clamp(1.125rem, 4vw, 2rem));
  }
}

/* En móvil la tarjeta IA de las soluciones no repite la conversación: la
   sección de la recepcionista la enseña completa más abajo. */
@media (max-width: 639.98px) {
  .w-bento-principales .w-principal-ia {
    display: none;
  }
}

.w-final .w-formulario {
  color: var(--w-tinta);
}

/* --- Franja de confianza tras el hero -------------------------------------- */
.w-confianza {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-block: 1px solid var(--w-linea);
  background: #fff;
}

.w-confianza .w-contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  text-align: center;
}

.w-confianza-titulo {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  font-family: var(--w-titulo);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--w-tinta);
  text-align: left;
}

.w-confianza-titulo strong {
  color: var(--w-marca-oscura);
}

.w-confianza-icono {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  background: var(--w-marca-suave);
  color: var(--w-marca-oscura);
  font-size: 1.25rem;
}

.w-confianza-nota {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--w-tinta-2);
  text-decoration: none;
}

.w-confianza-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.5rem;
  width: 100%;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.w-confianza-logos img {
  display: block;
  width: auto;
  max-width: 9rem;
  height: 2.5rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .2s ease, opacity .2s ease;
}

.w-confianza-logos img:hover {
  filter: none;
  opacity: 1;
}

/* Cada logo en su ficha (algunos son claros y llevan fondo oscuro). */
.w-confianza-logos li {
  display: grid;
  place-items: center;
  min-width: 9rem;
  height: 4.25rem;
  padding: .625rem 1.25rem;
  border: 1px solid var(--w-linea);
  border-radius: 16px;
  background: #fff;
}

.w-confianza-logos img,
.w-confianza-logos img:hover {
  max-width: 11rem;
  height: 2.75rem;
  filter: none;
  opacity: 1;
}

.w-confianza-logos img,
.w-confianza-logos img:hover {
  max-width: 15rem;
}

@media (max-width: 639.98px) {
  .w-confianza-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
  }

  .w-confianza-logos li {
    min-width: 0;
    height: 3.5rem;
    padding: .5rem .625rem;
  }

  .w-confianza-logos img,
  .w-confianza-logos img:hover {
    max-width: 100%;
    height: 2.25rem;
  }
}

/* Las funcionalidades, encima de los dos modos (Resumido y Completo). */
.pricing-calculator .pc-canales {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--w-linea);
}

/* --- Opiniones escritas en carrusel continuo (bajo los logos) -------------- */
.w-opiniones {
  width: 100%;
  margin-top: 1rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.w-opiniones-pista {
  display: flex;
  width: max-content;
  animation: w-opiniones calc(var(--w-opiniones-n, 5) * 7s) linear infinite;
}

.w-opiniones:hover .w-opiniones-pista,
.w-opiniones:focus-within .w-opiniones-pista {
  animation-play-state: paused;
}

.w-opiniones-lista {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 1rem 0 0;
  list-style: none;
}

@keyframes w-opiniones {
  to { transform: translateX(-50%); }
}

.w-opinion {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(20rem, 78vw);
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--w-linea);
  border-radius: 18px;
  background: var(--w-suave);
  text-align: left;
}

.w-opinion-comillas {
  color: var(--w-marca);
}

.w-opinion blockquote {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--w-tinta-2);
}

.w-opinion p {
  margin-top: auto !important;
  font-size: .8125rem;
  color: var(--w-gris);
}

.w-opinion strong {
  color: var(--w-tinta);
}

@media (prefers-reduced-motion: reduce) {
  .w-opiniones {
    overflow-x: auto;
    mask-image: none;
  }

  .w-opiniones-pista {
    animation: none;
  }

  .w-opiniones-lista[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 639.98px) {
  .w-confianza-logos {
    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
    gap: .5rem;
  }

  .w-confianza-logos li {
    padding: .375rem .5rem;
  }
}