/* =========================================================
   NDX COMPARADOR DE PRODUCTOS
   Hermano del buscador de poliester: mismo esqueleto, paleta azul.
   Responde al ancho de SU contenedor (container queries), no al del
   navegador, porque el bloque suele colocarse en una columna de
   Elementor mas estrecha que la pantalla.
   ========================================================= */

.ndx-compare-wrap {
  /* Tiene que ser un envoltorio y no la propia <section>: un elemento
     no puede consultar su propio tamano con @container. */
  container-type: inline-size;
  container-name: ndxcmp;

  /* Estirado vertical: cuando el bloque comparte fila con otro widget
     (columnas de Elementor), la columna ya tiene la altura del hermano
     mas alto, pero el widget de dentro no la hereda y queda a la altura
     de su contenido. Con esto la <section> se estira como item flex.
     Si el contenedor no define altura, height:100% resuelve a auto y
     no cambia absolutamente nada. */
  display: flex;
  height: 100%;
}

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

.ndx-compare {
  --ndx-cmp-blue: #1b5b96;
  --ndx-cmp-blue-dark: #103c68;
  --ndx-cmp-blue-soft: #eef4fb;
  --ndx-cmp-text: #26303a;
  --ndx-cmp-muted: #64707c;
  --ndx-cmp-border: #d7e2ee;
  --ndx-cmp-save: #b5341f;
  --ndx-cmp-save-soft: #fdeeea;
  --ndx-cmp-white: #ffffff;

  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 1280px;
  margin: 16px auto;

  color: var(--ndx-cmp-text);
  background: var(--ndx-cmp-white);

  border: 1px solid var(--ndx-cmp-border);
  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 12px 32px rgba(16, 60, 104, .10);

  font-family: var(--ndx-font, "Manrope", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
}

.ndx-compare__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  padding: 18px 24px 18px;
}

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

.ndx-compare__hero {
  max-width: 620px;
}

.ndx-compare__title {
  margin: 0 0 6px;

  color: var(--ndx-cmp-blue);

  /* cqi = 1% del ancho del contenedor. Con vw escalaria segun el
     navegador aunque el bloque estuviese en una columna estrecha. */
  font-size: clamp(1.28rem, 1.06rem + 1.05cqi, 1.60rem);
  font-weight: 850;
  letter-spacing: -.015em;
  line-height: 1.12;
}

.ndx-compare__text {
  margin: 0;

  color: var(--ndx-cmp-muted);

  font-size: .84rem;
  font-weight: 500;
  line-height: 1.42;
}

.ndx-compare__text strong {
  color: var(--ndx-cmp-text);
  font-weight: 750;
}

/* ---------- Panel ---------- */

.ndx-compare__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  /* Estrechar el panel deja ver la imagen de fondo a la derecha. Se alinea
     a la izquierda con margin-right auto en lugar de centrarlo, para que
     ese hueco quede en un solo lado y sea utilizable. */
  width: var(--ndx-cmp-panel-width, 100%);
  margin-right: auto;

  margin-top: 15px;
  padding: 15px 14px 14px;

  background: var(--ndx-cmp-blue-soft);
  border: 1px solid rgba(27, 91, 150, .12);
  border-radius: 12px;
}

/* ---------- Rejilla + medallon superpuesto ---------- */

.ndx-compare__grid {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}

.ndx-compare__card {
  display: flex;
  flex-direction: column;
  gap: 9px;

  grid-row: 1;
  min-width: 0;
  padding: 13px 14px 12px;

  background: var(--ndx-cmp-white);
  border: 1px solid var(--ndx-cmp-border);
  border-radius: 10px;
}

.ndx-compare__card--a { grid-column: 1; }
.ndx-compare__card--b { grid-column: 2; }

.ndx-compare__name {
  margin: 0;

  color: var(--ndx-cmp-blue);

  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: 1.25;
}

.ndx-compare__caption {
  margin: -5px 0 0;

  color: var(--ndx-cmp-muted);

  font-size: .70rem;
  font-weight: 650;
  letter-spacing: .015em;
  line-height: 1.3;
}

/*
 * margin-top:auto aqui y margin-bottom:auto en la caracteristica hacen que
 * el sobrante vertical se reparta por igual por encima y por debajo del
 * grupo precio + caracteristica. El nombre y el texto de arriba se quedan
 * pegados a la parte superior de la tarjeta.
 *
 * El padding-top no lo absorbe el margen automatico, asi que sirve para
 * mantener la separacion respecto a "Tu precio para tus medidas" tambien
 * cuando la tarjeta no tiene espacio de sobra.
 */
.ndx-compare__pricing {
  margin-top: auto;
  padding-top: 4px;
}

.ndx-compare__from {
  display: block;
  margin-bottom: 1px;

  color: var(--ndx-cmp-muted);

  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ndx-compare__unit {
  margin-left: 1px;

  color: var(--ndx-cmp-muted);

  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.ndx-compare__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;

  margin: 0;
  padding: 1px 0 2px;
}

.ndx-compare__price {
  color: var(--ndx-cmp-text);

  font-size: 1.62rem;
  font-weight: 850;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ndx-compare__price-old {
  color: var(--ndx-cmp-muted);

  font-size: .80rem;
  font-weight: 600;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.ndx-compare__discount {
  padding: 1px 6px;

  color: var(--ndx-cmp-save);
  background: var(--ndx-cmp-save-soft);
  border-radius: 4px;

  font-size: .68rem;
  font-weight: 850;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.ndx-compare__feature {
  display: flex;
  align-items: flex-start;
  gap: 7px;

  margin: 0 0 auto;
  padding-top: 9px;
  border-top: 1px solid #eef2f7;

  color: var(--ndx-cmp-muted);

  font-size: .76rem;
  font-weight: 600;
  line-height: 1.36;
}

.ndx-compare__feature svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--ndx-cmp-blue);
}

.ndx-compare__vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  color: var(--ndx-cmp-card-on-accent, #fff);
  background: linear-gradient(180deg, var(--ndx-cmp-blue) 0%, var(--ndx-cmp-blue-dark) 100%);
  border: 3px solid var(--ndx-cmp-blue-soft);
  border-radius: 50%;

  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;

  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- Diferencia + accion ---------- */

.ndx-compare__delta {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;

  margin: 14px auto 0;
  max-width: 620px;

  color: var(--ndx-cmp-text);

  font-size: .84rem;
  font-weight: 650;
  line-height: 1.38;
  text-align: center;
}

.ndx-compare__delta b {
  color: var(--ndx-cmp-blue);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ndx-compare__delta i {
  flex: 0 0 auto;

  color: var(--ndx-cmp-blue);

  font-size: .95rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.ndx-compare__action {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.ndx-compare__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: 100%;
  max-width: 340px;
  min-height: 42px;

  padding: 8px 16px;

  /* !important porque es un <a>: Warehouse define el color de enlace con
     selectores mas especificos que esta clase y gana. El boton del
     buscador de polyester no lo necesita porque alli es un <button>. */
  color: var(--ndx-cmp-button-text, #fff) !important;
  background: linear-gradient(180deg, var(--ndx-cmp-blue) 0%, var(--ndx-cmp-blue-dark) 100%);

  border: 0;
  border-radius: 8px;

  font: inherit;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .045em;
  line-height: 1.2;
  text-align: left;
  text-decoration: none !important;

  cursor: pointer;

  transition: transform .15s ease, filter .15s ease;
}

.ndx-compare__button span {
  flex: 0 0 auto;
  font-size: 1.05rem;
}

.ndx-compare__button:hover,
.ndx-compare__button:focus,
.ndx-compare__button:active,
.ndx-compare__button:visited {
  color: var(--ndx-cmp-button-text, #fff) !important;
  text-decoration: none !important;
  filter: brightness(1.08);
}

.ndx-compare__button:active { transform: translateY(1px); }

.ndx-compare__button:focus-visible {
  outline: 3px solid rgba(27, 91, 150, .45);
  outline-offset: 2px;
}

/* =========================================================
   Imagen de fondo a sangre completa
   ========================================================= */

.ndx-compare.has-bg {
  position: relative;

  background-image: var(--ndx-cmp-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Velo entre la foto y el contenido. Sin el, el titulo y la introduccion
   quedan directamente sobre la imagen y dejan de leerse. */
.ndx-compare.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: var(--ndx-cmp-scrim, rgba(255, 255, 255, .85));

  pointer-events: none;
}

.ndx-compare.has-bg > * {
  position: relative;
  z-index: 1;
}

/* ---------- Velo oscuro: se invierte el texto de cabecera ---------- */

.ndx-compare.has-bg.is-dark .ndx-compare__title { color: #fff; }

.ndx-compare.has-bg.is-dark .ndx-compare__text { color: rgba(255, 255, 255, .84); }

.ndx-compare.has-bg.is-dark .ndx-compare__text strong { color: #fff; }

.ndx-compare.has-bg.is-dark .ndx-compare__panel {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .26);
}

/* Las tarjetas siguen siendo blancas y opacas, asi que su contenido no
   cambia; solo hay que adaptar lo que queda sobre el panel. */
.ndx-compare.has-bg.is-dark .ndx-compare__vs {
  border-color: rgba(255, 255, 255, .30);
}

.ndx-compare.has-bg.is-dark .ndx-compare__delta { color: #fff; }

.ndx-compare.has-bg.is-dark .ndx-compare__delta b,
.ndx-compare.has-bg.is-dark .ndx-compare__delta i { color: #a8cff2; }

.ndx-compare.has-bg.is-dark .ndx-compare__button {
  background: linear-gradient(180deg, #2f79bd 0%, var(--ndx-cmp-blue) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ---------- Velo claro: el diseno original ya contrasta ---------- */

.ndx-compare.has-bg.is-light .ndx-compare__panel {
  background: rgba(238, 244, 251, .88);
}

/* =========================================================
   Responsive por contenedor
   ========================================================= */

@container ndxcmp (max-width: 700px) {
  .ndx-compare__main { padding: 16px 17px 15px; }
  .ndx-compare__grid { gap: 22px; }
  .ndx-compare__price { font-size: 1.50rem; }
  .ndx-compare__button { max-width: none; }
}

@media (max-width: 1210px) {
  .ndx-compare { border-radius: 12px; }
  .ndx-compare__main { padding: 15px 14px 14px; }
  .ndx-compare__title { font-size: 1.18rem; }
  .ndx-compare__text { font-size: .82rem; }
  .ndx-compare__panel { margin-top: 13px; padding: 13px 12px 12px; }

  /* 1fr auto 1fr: el sobrante lo reparten las dos tarjetas, no la fila
     del medallon. Con filas "auto" esa fila crecia y el VS, de altura
     fija, se quedaba pegado a la tarjeta de arriba. */
  .ndx-compare__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto 1fr;
    gap: 0;
  }
  .ndx-compare__card--a { grid-column: 1; grid-row: 1; }
  .ndx-compare__card--b { grid-column: 1; grid-row: 3; }

  .ndx-compare__vs {
    position: static;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    margin: -7px 0;
    font-size: .62rem;
    transform: none;
  }

  .ndx-compare__name { font-size: .90rem; }
  .ndx-compare__price { font-size: 1.72rem; }
  .ndx-compare__feature { font-size: .75rem; }
  .ndx-compare__delta { margin-top: 12px; font-size: .82rem; text-align: left; }
  .ndx-compare__button { min-height: 44px; font-size: .78rem; }
}

@container ndxcmp (max-width: 400px) {
  .ndx-compare__title { font-size: 1.10rem; }
  .ndx-compare__prices { gap: 3px 6px; }
}

/* Fallback para navegadores sin container queries (Chrome <105, Safari <16,
   Firefox <110). Sin esto ignorarian todo el bloque responsive y se
   quedarian siempre en el layout de escritorio. */
@supports not (container-type: inline-size) {
  @media (max-width: 899px) {
    .ndx-compare__main { padding: 16px 17px 15px; }
    .ndx-compare__grid { gap: 22px; }
    .ndx-compare__price { font-size: 1.50rem; }
    .ndx-compare__button { max-width: none; }
  }
  @media (max-width: 420px) {
    .ndx-compare__title { font-size: 1.10rem; }
    .ndx-compare__prices { gap: 3px 6px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ndx-compare *,
  .ndx-compare *::before,
  .ndx-compare *::after { transition: none !important; }
}