/** Shopify CDN: Minification failed

Line 527:8 Expected identifier but found whitespace
Line 527:9 Unexpected "52px"

**/
/* ==========================================================================
   Dorantea — estilos propios (v3)
   Escala de espaciado unica para toda la web. Nada de valores sueltos:
   si un bloque necesita aire, sale de estas variables.
   ========================================================================== */

:root {
  --mt-ink: #0B1C3D;
  --mt-ink-soft: rgba(11, 28, 61, 0.72);
  --mt-ink-faint: rgba(11, 28, 61, 0.12);
  --mt-blue: #1B6FD6;
  --mt-blue-deep: #0A4FA8;
  --mt-blue-light: #6FC0F5;
  --mt-mist: #F1F7FE;
  --mt-white: #FFFFFF;

  --mt-serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --mt-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --mt-radio: 18px;
  --mt-radio-sm: 12px;
  --mt-margen: 24px;
  --mt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mt-sombra: 0 18px 44px -20px rgba(11, 28, 61, 0.26);
  --mt-sombra-sm: 0 8px 22px -10px rgba(11, 28, 61, 0.18);

  /* --- Escala de aire (usar SIEMPRE estas) --- */
  --mt-aire-xs: 8px;    /* entre linea y linea de una lista */
  --mt-aire-s: 14px;    /* entre un titulo y su texto */
  --mt-aire-m: 24px;    /* entre grupos dentro de un bloque */
  --mt-aire-l: 34px;    /* entre la cabecera y el contenido */
  --mt-aire-tarjeta: 28px 30px 32px;  /* relleno interior de tarjetas */

  /* --- Interlineados --- */
  --mt-lh-titular: 1.24;
  --mt-lh-texto: 1.7;
  --mt-lh-corto: 1.5;
}

.mt-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent;
  font-family: var(--mt-sans);
  color: var(--mt-ink);
  position: relative;
}

.mt-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--mt-margen); position: relative; z-index: 1; }
.mt-container--ancho { max-width: 1340px; }
.mt-container--estrecho { max-width: 860px; }

/* Reseteo de Dawn dentro de nuestras secciones.
   OJO: va con :where() a proposito. Sin el, estos selectores pesan mas que
   las clases de abajo y anulan en silencio TODOS los margenes del diseño
   (fue el motivo de que la v3 saliera con el texto apelotonado). Con
   :where() el reseteo pesa cero y cualquier clase propia lo puede cambiar. */
:where(.mt-section) :where(h1, h2, h3, h4, h5, h6, blockquote) {
  color: inherit;
  margin: 0;
  letter-spacing: normal;
}
:where(.mt-section) :where(p) { margin: 0; }
:where(.mt-section) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.section-header { margin-bottom: 0 !important; }

/* --- Tipografia ---------------------------------------------------------
   Playfair Display necesita interlineado >= 1.2 y colchon inferior o los
   trazos descendentes se cortan.                                          */
.mt-h1, .mt-h2 {
  font-family: var(--mt-serif);
  font-weight: 500;
  line-height: var(--mt-lh-titular);
  letter-spacing: -0.005em;
  padding-bottom: 0.08em;
  overflow-wrap: break-word;
}
.mt-h3 { font-family: var(--mt-sans); font-weight: 700; line-height: 1.35; }
.mt-body { line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); }
.mt-eyebrow {
  font-family: var(--mt-sans);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mt-blue);
  line-height: 1.5;
}

/* --- Botones ------------------------------------------------------------ */
.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 34px; border-radius: 999px;
  font-family: var(--mt-sans); font-weight: 700; font-size: 15.5px; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.35s var(--mt-ease), box-shadow 0.35s var(--mt-ease),
    background-color 0.3s var(--mt-ease), color 0.3s var(--mt-ease);
}
.mt-btn--primario { background: var(--mt-blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(27, 111, 214, 0.7); }
.mt-btn--primario:hover { background: var(--mt-blue-deep); }
.mt-btn--claro { background: #fff; color: var(--mt-ink); box-shadow: var(--mt-sombra-sm); }
.mt-btn--claro:hover { background: var(--mt-mist); }
.mt-btn--fantasma { background: transparent; color: inherit; border-color: currentColor; opacity: 0.88; }
.mt-btn--fantasma:hover { opacity: 1; }
.mt-btn--bloque { width: 100%; }
.mt-btn--grande { padding: 19px 34px; font-size: 16.5px; }

.mt-btn--brillo::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); animation: mtBrillo 5s var(--mt-ease) infinite;
}
@keyframes mtBrillo { 0%, 64% { left: -60%; } 92%, 100% { left: 130%; } }

/* --- Reveals ------------------------------------------------------------ */
.mt-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--mt-ease), transform 0.7s var(--mt-ease); }
.mt-reveal.mt-visible { opacity: 1; transform: none; }
.mt-reveal[data-mt-delay='1'] { transition-delay: 0.07s; }
.mt-reveal[data-mt-delay='2'] { transition-delay: 0.14s; }
.mt-reveal[data-mt-delay='3'] { transition-delay: 0.21s; }
.mt-reveal[data-mt-delay='4'] { transition-delay: 0.28s; }
.mt-reveal[data-mt-delay='5'] { transition-delay: 0.35s; }
.mt-reveal[data-mt-delay='6'] { transition-delay: 0.42s; }

/* --- Cabecera de bloque compartida -------------------------------------- */
.mt-cabecera { max-width: 660px; margin: 0 auto var(--mt-aire-l); text-align: center; }
.mt-cabecera--izq { margin-left: 0; text-align: left; }
.mt-cabecera .mt-h2 { margin-top: 12px; }
.mt-cabecera .mt-body { margin-top: var(--mt-aire-s); }

/* --- Iconos con texto debajo (compartido) ------------------------------- */
.mt-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 26px 20px;
}
.mt-icono { display: grid; justify-items: center; gap: 12px; text-align: center; }
.mt-icono__caja {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mt-mist); color: var(--mt-blue);
}
.mt-icono__titulo { font-weight: 800; font-size: 14px; line-height: var(--mt-lh-corto); }
.mt-icono__texto { font-size: 12.5px; line-height: var(--mt-lh-corto); color: var(--mt-ink-soft); margin-top: 4px; }

/* ==========================================================================
   0. BARRA DE ANUNCIO — marquesina
   La duracion llega por variable CSS puesta en el propio elemento, para que
   ningun orden de hojas de estilo pueda dejarla en 0s (bug de la v2).
   ========================================================================== */
.mt-anuncio { overflow: hidden; }
.mt-anuncio__pista {
  display: flex;
  width: max-content;
  animation-name: mtDesliza;
  animation-duration: var(--mt-marq-dur, 35s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.mt-anuncio__pista--reversa { animation-direction: reverse; }
.mt-anuncio:hover .mt-anuncio__pista { animation-play-state: paused; }
.mt-anuncio__grupo { display: flex; align-items: center; flex: none; }
.mt-anuncio__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; line-height: 1;
}
.mt-anuncio__sep { opacity: 0.55; font-size: 9px; }
@keyframes mtDesliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   1. HERO — banner a sangre con el texto encima
   ========================================================================== */
/* El alto del banner sigue la proporcion de la foto (con un minimo y un tope)
   en vez de ser fijo. Con alto fijo, en pantallas anchas el recorte de
   object-fit: cover se comia la boquilla y la base del producto. */
.mt-banner {
  position: relative;
  display: grid;
  overflow: hidden;
  box-sizing: border-box;
  /* width: 100% es obligatorio: con aspect-ratio + max-height el navegador
     calcula el ancho a partir del alto y el banner deja de ser a sangre. */
  width: 100%;
}
.mt-banner__media { position: absolute; inset: 0; z-index: 0; }
.mt-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-banner__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mt-banner__contenido { position: relative; z-index: 2; width: 100%; align-self: center; }
.mt-banner__caja { max-width: 520px; }
.mt-banner__h1 { margin-bottom: 16px; }
.mt-banner__sub { margin-bottom: var(--mt-aire-m); line-height: var(--mt-lh-texto); }
.mt-banner__acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mt-banner__onda { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; z-index: 3; pointer-events: none; }
.mt-banner__onda svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   2. GANCHO — bloque de texto centrado
   ========================================================================== */
.mt-gancho { text-align: center; }
.mt-gancho__caja { max-width: 720px; margin: 0 auto; }
.mt-gancho__h2 { margin: 12px 0 var(--mt-aire-s); }
.mt-gancho__texto { line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); margin-bottom: var(--mt-aire-m); }

/* ==========================================================================
   3. GARANTIAS
   ========================================================================== */
.mt-garantias__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px 26px; }
.mt-garantias__item { display: flex; align-items: center; gap: 14px; justify-content: center; text-align: left; }
.mt-garantias__icono { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--mt-mist); color: var(--mt-blue); }
.mt-garantias__titulo { font-weight: 800; font-size: 14px; line-height: var(--mt-lh-corto); display: block; }
.mt-garantias__texto { font-size: 12.5px; color: var(--mt-ink-soft); line-height: var(--mt-lh-corto); }

/* ==========================================================================
   4. PROBLEMA -> SOLUCION
   ========================================================================== */
.mt-problema__paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.mt-panel { border-radius: var(--mt-radio); overflow: hidden; display: flex; flex-direction: column; }
.mt-panel__media { aspect-ratio: 4 / 3; overflow: hidden; }
.mt-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--mt-ease); }
.mt-panel:hover .mt-panel__media img { transform: scale(1.04); }
.mt-panel__cuerpo { padding: var(--mt-aire-tarjeta); flex: 1; }
.mt-panel__etiqueta {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: var(--mt-aire-s); line-height: 1.4;
}
.mt-panel__titulo { font-family: var(--mt-serif); font-size: 22px; font-weight: 500; line-height: var(--mt-lh-titular); padding-bottom: 0.06em; margin-bottom: 10px; }
.mt-panel__texto { font-size: 15px; line-height: var(--mt-lh-texto); }
.mt-panel--problema { background: #EEF0F4; color: #5A6272; }
.mt-panel--problema .mt-panel__media img { filter: saturate(0.5); }
.mt-panel--problema .mt-panel__etiqueta { background: #DDE0E7; color: #6B7280; }
.mt-panel--problema .mt-panel__titulo { color: #4B5563; }
.mt-panel--solucion {
  background: linear-gradient(165deg, var(--mt-blue) 0%, var(--mt-blue-deep) 100%);
  color: rgba(255, 255, 255, 0.87);
  box-shadow: 0 22px 50px -26px rgba(27, 111, 214, 0.7);
}
.mt-panel--solucion .mt-panel__etiqueta { background: rgba(255, 255, 255, 0.2); color: #fff; }
.mt-panel--solucion .mt-panel__titulo { color: #fff; }

/* ==========================================================================
   5. DETALLES — hotspots
   ========================================================================== */
.mt-detalles__escena {
  position: relative; border-radius: var(--mt-radio); overflow: hidden;
  background: #E9F2FB; aspect-ratio: 16 / 9; box-shadow: var(--mt-sombra);
  max-width: 980px; margin: 0 auto;
}
.mt-detalles__escena > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-punto { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 3; }
.mt-punto__nucleo { position: absolute; inset: 6px; border-radius: 50%; background: var(--mt-blue); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); transition: transform 0.3s var(--mt-ease); }
.mt-punto::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(27, 111, 214, 0.45); animation: mtLatido 2.4s ease-out infinite; }
@keyframes mtLatido { 0% { transform: scale(0.6); opacity: 0.85; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.mt-punto:hover .mt-punto__nucleo, .mt-punto.mt-activo .mt-punto__nucleo { transform: scale(1.3); }
.mt-punto__tarjeta {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  width: 216px; background: #fff; border-radius: var(--mt-radio-sm);
  padding: 16px 18px; text-align: left; box-shadow: var(--mt-sombra);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--mt-ease), transform 0.25s var(--mt-ease), visibility 0.25s;
  pointer-events: none; z-index: 4;
}
.mt-punto__tarjeta--abajo { bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -8px); }
.mt-punto:hover .mt-punto__tarjeta, .mt-punto:focus-visible .mt-punto__tarjeta, .mt-punto.mt-activo .mt-punto__tarjeta { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mt-punto__titulo { font-weight: 800; font-size: 13.5px; color: var(--mt-ink); margin-bottom: 5px; display: block; line-height: var(--mt-lh-corto); }
.mt-punto__texto { font-size: 12.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); display: block; }
.mt-detalles__lista { display: none; }

/* ==========================================================================
   6. RUTINA
   ========================================================================== */
.mt-rutina__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.mt-anillo { position: relative; width: min(248px, 100%); margin: 0 auto; }
.mt-anillo svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.mt-anillo__pista { fill: none; stroke: var(--mt-ink-faint); stroke-width: 10; }
.mt-anillo__valor { fill: none; stroke: url(#mtDegradadoAnillo); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 534; stroke-dashoffset: 534; transition: stroke-dashoffset 1.8s var(--mt-ease); }
.mt-visible .mt-anillo__valor { stroke-dashoffset: 80; }
.mt-anillo__centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mt-anillo__numero { font-family: var(--mt-serif); font-size: 56px; font-weight: 600; line-height: 1.2; padding-bottom: 0.06em; color: var(--mt-ink); display: block; }
.mt-anillo__unidad { font-size: 11.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mt-blue); margin-top: 6px; display: block; line-height: 1.5; }
.mt-rutina__momentos { display: grid; gap: 16px; margin-top: var(--mt-aire-m); }
.mt-momento {
  display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--mt-ink-faint); border-radius: var(--mt-radio-sm);
  padding: 14px; transition: transform 0.35s var(--mt-ease), box-shadow 0.35s var(--mt-ease);
}
.mt-momento:hover { transform: translateY(-3px); box-shadow: var(--mt-sombra-sm); }
.mt-momento__media { border-radius: 9px; overflow: hidden; aspect-ratio: 1; }
.mt-momento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-momento__titulo { font-weight: 800; font-size: 14.5px; margin-bottom: 5px; line-height: var(--mt-lh-corto); }
.mt-momento__texto { font-size: 13.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); }

/* ==========================================================================
   7. CAJA
   ========================================================================== */
.mt-caja__media { border-radius: var(--mt-radio); overflow: hidden; background: var(--mt-mist); max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; }
.mt-caja__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-caja__piezas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.mt-pieza { text-align: center; padding-top: 48px; position: relative; }
.mt-pieza__linea { position: absolute; top: 0; left: 50%; width: 2px; height: 34px; background: linear-gradient(to bottom, var(--mt-blue-light), var(--mt-blue)); transform: translateX(-50%) scaleY(0); transform-origin: top center; transition: transform 0.6s var(--mt-ease); }
.mt-pieza.mt-visible .mt-pieza__linea { transform: translateX(-50%) scaleY(1); }
.mt-pieza__punto { position: absolute; top: 34px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--mt-blue); transform: translate(-50%, -50%) scale(0); transition: transform 0.4s var(--mt-ease) 0.45s; }
.mt-pieza.mt-visible .mt-pieza__punto { transform: translate(-50%, -50%) scale(1); }
.mt-pieza__numero { font-family: var(--mt-serif); font-size: 14px; font-weight: 700; color: var(--mt-blue); margin-bottom: 7px; line-height: 1.4; }
.mt-pieza__titulo { font-weight: 800; font-size: 14.5px; margin-bottom: 6px; line-height: var(--mt-lh-corto); }
.mt-pieza__texto { font-size: 13px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); }

/* ==========================================================================
   8. COMPARATIVA
   ========================================================================== */
.mt-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 4px; }
.mt-tabla { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; }
.mt-tabla th, .mt-tabla td { padding: 16px 16px; text-align: center; font-size: 14.5px; vertical-align: middle; line-height: var(--mt-lh-corto); }
.mt-tabla thead th { font-family: var(--mt-sans); font-weight: 800; font-size: 13px; color: var(--mt-ink-soft); padding-bottom: 16px; }
.mt-tabla tbody th { text-align: left; font-weight: 700; color: var(--mt-ink); width: 34%; }
.mt-tabla tbody tr + tr th, .mt-tabla tbody tr + tr td { border-top: 1px solid var(--mt-ink-faint); }
.mt-tabla__col-nuestra { background: var(--mt-mist); }
.mt-tabla thead .mt-tabla__col-nuestra { color: var(--mt-blue); font-size: 15px; border-radius: var(--mt-radio-sm) var(--mt-radio-sm) 0 0; }
.mt-tabla tbody tr:last-child .mt-tabla__col-nuestra { border-radius: 0 0 var(--mt-radio-sm) var(--mt-radio-sm); }
.mt-marca { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; opacity: 0; transform: scale(0.4); transition: opacity 0.4s var(--mt-ease), transform 0.4s var(--mt-ease); }
.mt-visible .mt-marca { opacity: 1; transform: none; }
.mt-marca--si { background: rgba(27, 111, 214, 0.14); color: var(--mt-blue); }
.mt-marca--no { background: rgba(11, 28, 61, 0.06); color: rgba(11, 28, 61, 0.3); }
.mt-tabla tbody tr:nth-child(1) .mt-marca { transition-delay: 0.06s; }
.mt-tabla tbody tr:nth-child(2) .mt-marca { transition-delay: 0.14s; }
.mt-tabla tbody tr:nth-child(3) .mt-marca { transition-delay: 0.22s; }
.mt-tabla tbody tr:nth-child(4) .mt-marca { transition-delay: 0.30s; }
.mt-tabla tbody tr:nth-child(5) .mt-marca { transition-delay: 0.38s; }
.mt-tabla tbody tr:nth-child(6) .mt-marca { transition-delay: 0.46s; }
.mt-tabla__nota { text-align: center; font-size: 12.5px; color: var(--mt-ink-soft); margin-top: var(--mt-aire-m); line-height: var(--mt-lh-texto); }

/* ==========================================================================
   9. FAQ / desplegables
   ========================================================================== */
.mt-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 44px; align-items: start; }
.mt-faq__intro .mt-h2 { margin-top: 12px; }
.mt-faq__intro .mt-body { margin-top: var(--mt-aire-s); }
.mt-faq__lista { display: grid; gap: 10px; }
.mt-faq__item { background: #fff; border: 1px solid var(--mt-ink-faint); border-radius: var(--mt-radio-sm); overflow: hidden; }
.mt-faq__boton {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 22px; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mt-sans); font-weight: 700; font-size: 15px; color: var(--mt-ink); line-height: var(--mt-lh-corto);
}
.mt-faq__icono { flex: none; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--mt-mist); color: var(--mt-blue); transition: transform 0.35s var(--mt-ease), background-color 0.3s var(--mt-ease); }
.mt-faq__item.mt-abierto .mt-faq__icono { transform: rotate(45deg); background: var(--mt-blue); color: #fff; }
.mt-faq__cuerpo { overflow: hidden; }
.mt-faq__lista--js .mt-faq__cuerpo { height: 0; transition: height 0.35s var(--mt-ease); }
.mt-faq__cuerpo > div { overflow: hidden; }
.mt-faq__respuesta { padding: 2px 22px 22px; font-size: 14.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); }
.mt-faq__respuesta p + p { margin-top: 10px; }

/* ==========================================================================
   10. CIERRE
   ========================================================================== */
.mt-cierre__tarjeta { display: grid; grid-template-columns: 0.85fr 1.15fr; border-radius: 20px; overflow: hidden; background: var(--mt-mist); box-shadow: var(--mt-sombra); }
.mt-cierre__media { position: relative; min-height: 100%; background: #E9F2FB; }
.mt-cierre__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-cierre__cuerpo { padding: 46px 48px; align-self: center; }
.mt-cierre__h2 { margin: 12px 0 var(--mt-aire-s); }
.mt-cierre__texto { line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); margin-bottom: var(--mt-aire-m); }
.mt-cierre__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: var(--mt-aire-m); }
.mt-cierre__precio-actual { font-family: var(--mt-serif); font-size: 34px; font-weight: 600; line-height: 1.25; }
.mt-cierre__precio-antes { font-size: 17px; text-decoration: line-through; color: rgba(11, 28, 61, 0.42); }
.mt-cierre__iconos { margin-top: 34px; }

/* ==========================================================================
   11. NEWSLETTER (va pegada al pie y del mismo color)
   ========================================================================== */
.mt-news { text-align: center; }
.mt-news__h2 { color: #fff; margin: 0 0 10px; }
.mt-news__texto { color: rgba(255, 255, 255, 0.78); line-height: var(--mt-lh-texto); margin-bottom: var(--mt-aire-m); }
.mt-news__form { display: flex; max-width: 430px; margin: 0 auto; position: relative; }
.mt-news__campo {
  width: 100%; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.09); color: #fff; border-radius: 999px;
  padding: 16px 58px 16px 24px; font-family: var(--mt-sans); font-size: 15px; line-height: 1.3;
  outline: none; transition: border-color 0.3s var(--mt-ease), background-color 0.3s var(--mt-ease);
}
.mt-news__campo::placeholder { color: rgba(255, 255, 255, 0.6); }
.mt-news__campo:focus { border-color: #fff; background: rgba(255, 255, 255, 0.16); }
.mt-news__enviar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: rgba(255, 255, 255, 0.85);
  display: grid; place-items: center; transition: transform 0.3s var(--mt-ease), color 0.3s var(--mt-ease);
}
.mt-news__enviar:hover { transform: translateY(-50%) translateX(3px); color: #fff; }
.mt-news__nota { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); margin-top: var(--mt-aire-s); line-height: var(--mt-lh-corto); }
.mt-news__ok { color: #fff; font-weight: 700; font-size: 15px; margin-top: var(--mt-aire-s); }

/* ==========================================================================
   12. AVISO DEL 10% + PESTAÑA LATERAL
   ========================================================================== */
.mt-aviso {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center; padding: 20px;
  background: rgba(11, 28, 61, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--mt-ease), visibility 0.35s;
}
.mt-aviso.mt-abierto { opacity: 1; visibility: visible; }
.mt-aviso__caja {
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(760px, 100%); background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(11, 28, 61, 0.55);
  transform: translateY(18px) scale(0.96);
  transition: transform 0.45s var(--mt-ease);
  position: relative;
}
.mt-aviso.mt-abierto .mt-aviso__caja { transform: none; }
.mt-aviso__media { background: #DCEDFB; }
.mt-aviso__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-aviso__cuerpo { padding: 40px 38px; align-self: center; text-align: center; }
.mt-aviso__h2 { margin-bottom: 12px; }
.mt-aviso__texto { font-size: 14.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); margin-bottom: var(--mt-aire-m); }
.mt-aviso__campo {
  width: 100%; border: 1px solid var(--mt-ink-faint); background: #fff; color: var(--mt-ink);
  border-radius: 10px; padding: 14px 16px; font-family: var(--mt-sans); font-size: 15px;
  line-height: 1.3; outline: none; margin-bottom: 12px;
  transition: border-color 0.3s var(--mt-ease);
}
.mt-aviso__campo:focus { border-color: var(--mt-blue); }
.mt-aviso__enviar {
  width: 100%; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--mt-blue); color: #fff;
  font-family: var(--mt-sans); font-weight: 800; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 15px 20px; line-height: 1.3;
  transition: background-color 0.3s var(--mt-ease);
}
.mt-aviso__enviar:hover { background: var(--mt-blue-deep); }
.mt-aviso__no {
  display: inline-block; margin-top: var(--mt-aire-s); background: none; border: 0; cursor: pointer;
  font-family: var(--mt-sans); font-size: 13.5px; color: var(--mt-ink-soft);
  text-decoration: underline; text-underline-offset: 3px; line-height: 1.5;
}
.mt-aviso__cerrar {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 50%; border: 0; cursor: pointer; z-index: 3;
  background: rgba(255, 255, 255, 0.92); color: var(--mt-ink);
  display: grid; place-items: center; box-shadow: var(--mt-sombra-sm);
  transition: transform 0.3s var(--mt-ease);
}
.mt-aviso__cerrar:hover { transform: rotate(90deg); }
.mt-aviso__ok { font-weight: 700; color: var(--mt-ink); font-size: 15px; line-height: var(--mt-lh-texto); }
.mt-aviso__codigo {
  display: inline-block; margin-top: 10px; padding: 10px 18px; border-radius: 10px;
  background: var(--mt-mist); color: var(--mt-blue);
  font-weight: 800; letter-spacing: 0.12em; font-size: 17px;
}

/* Pestaña lateral que reabre el aviso */
.mt-pestana {
  position: fixed; left: 0; top: 50%; z-index: 9990;
  transform: translateY(-50%) translateX(-105%);
  background: var(--mt-blue); color: #fff; border: 0; cursor: pointer;
  padding: 20px 11px; border-radius: 0 10px 10px 0;
  font-family: var(--mt-sans); font-weight: 800; font-size: 12.5px; letter-spacing: 0.14em;
  writing-mode: vertical-rl; text-orientation: mixed;
  box-shadow: 0 10px 30px -10px rgba(11, 28, 61, 0.5);
  transition: transform 0.55s var(--mt-ease), background-color 0.3s var(--mt-ease);
}
.mt-pestana--visible { transform: translateY(-50%) translateX(0); }
.mt-pestana:hover { background: var(--mt-blue-deep); }

/* ==========================================================================
   PAGINA DE PRODUCTO
   ========================================================================== */
.mt-producto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 48px; align-items: start; }
.mt-producto__galeria { position: sticky; top: 24px; }
.mt-galeria__principal { border-radius: var(--mt-radio); overflow: hidden; background: var(--mt-mist); aspect-ratio: 1; }
.mt-galeria__principal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-galeria__tiras { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mt-galeria__tira { width: 66px; height: 66px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--mt-mist); padding: 0; cursor: pointer; transition: border-color 0.3s var(--mt-ease); }
.mt-galeria__tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-galeria__tira.mt-activo { border-color: var(--mt-blue); }

.mt-producto__titulo { font-family: var(--mt-serif); font-weight: 500; line-height: var(--mt-lh-titular); padding-bottom: 0.06em; margin-bottom: 10px; }
.mt-producto__tagline { font-size: 16px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); margin-bottom: var(--mt-aire-s); }
.mt-producto__precio-unidad { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; margin-bottom: var(--mt-aire-m); }
.mt-producto__precio-actual { font-family: var(--mt-serif); font-size: 27px; font-weight: 600; line-height: 1.25; }
.mt-producto__precio-antes { font-size: 16px; text-decoration: line-through; color: rgba(11, 28, 61, 0.42); }
.mt-producto__ahorro {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(27, 111, 214, 0.12); color: var(--mt-blue); padding: 6px 11px; border-radius: 999px; line-height: 1.4;
}
.mt-producto__bullets { display: grid; gap: 10px; margin-bottom: var(--mt-aire-m); }
.mt-producto__bullet { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: var(--mt-lh-texto); }
.mt-producto__bullet svg { flex: none; color: var(--mt-blue); margin-top: 4px; }

/* Packs */
.mt-packs__titulo { font-size: 11.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mt-blue); margin: 34px 0 16px; line-height: 1.5; }
.mt-packs { display: grid; gap: 12px; margin-bottom: var(--mt-aire-m); }
.mt-pack {
  position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 14px;
  align-items: center; width: 100%; text-align: left;
  border: 2px solid var(--mt-ink-faint); border-radius: 14px;
  background: #fff; padding: 18px 20px; cursor: pointer;
  font-family: var(--mt-sans); color: var(--mt-ink);
  transition: border-color 0.28s var(--mt-ease), box-shadow 0.28s var(--mt-ease);
}
.mt-pack:hover { border-color: rgba(27, 111, 214, 0.45); }
.mt-pack.mt-activo { border-color: var(--mt-blue); box-shadow: 0 0 0 3px rgba(27, 111, 214, 0.12); }
.mt-pack__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mt-ink-faint); display: grid; place-items: center; transition: border-color 0.28s var(--mt-ease); }
.mt-pack__radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--mt-blue); transform: scale(0); transition: transform 0.28s var(--mt-ease); }
.mt-pack.mt-activo .mt-pack__radio { border-color: var(--mt-blue); }
.mt-pack.mt-activo .mt-pack__radio::after { transform: scale(1); }
.mt-pack__nombre { font-weight: 800; font-size: 15px; line-height: var(--mt-lh-corto); display: block; }
.mt-pack__detalle { font-size: 12.5px; color: var(--mt-ink-soft); line-height: var(--mt-lh-corto); margin-top: 4px; display: block; }
.mt-pack__precios { text-align: right; white-space: nowrap; }
.mt-pack__precio { font-weight: 800; font-size: 16px; line-height: 1.35; display: block; }
.mt-pack__antes { font-size: 12.5px; text-decoration: line-through; color: rgba(11, 28, 61, 0.4); display: block; margin-top: 2px; }
.mt-pack__badge {
  position: absolute; top: -11px; right: 16px; background: var(--mt-blue); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; line-height: 1.4;
}

/* Swatches con foto */
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--mt-ink-faint); background: var(--mt-mist);
  transition: border-color 0.28s var(--mt-ease), transform 0.28s var(--mt-ease), box-shadow 0.28s var(--mt-ease);
}
/* Color agotado: solo aparece asi si TODAS las variantes de ese color se han
   acabado. Mientras quede una, el circulo apunta sola a la que tenga stock. */
.mt-mini.mt-agotado { cursor: not-allowed; opacity: 0.42; }
.mt-mini.mt-agotado .mt-mini__color { filter: grayscale(1); }

.mt-producto__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: var(--mt-aire-s); }
.mt-producto__total-actual { font-family: var(--mt-serif); font-size: 30px; font-weight: 600; line-height: 1.25; }
.mt-producto__total-antes { font-size: 16px; text-decoration: line-through; color: rgba(11, 28, 61, 0.42); }
.mt-producto__total-ahorro { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; background: rgba(27, 111, 214, 0.12); color: var(--mt-blue); padding: 6px 11px; border-radius: 999px; line-height: 1.4; }

/* Botonera de compra */
.mt-compra { display: grid; gap: 14px; }
.mt-compra .shopify-payment-button { margin: 0; display: grid; gap: 10px; }
.mt-compra shopify-accelerated-checkout { display: block; }
.mt-compra .shopify-payment-button__button--unbranded {
  border-radius: 999px; background: var(--mt-ink); color: #fff;
  font-family: var(--mt-sans); font-weight: 700; font-size: 15.5px; padding: 17px 32px; min-height: 0;
}
.mt-compra .shopify-payment-button__button { border-radius: 999px; min-height: 52px; }
.mt-compra .shopify-payment-button__more-options {
  background: none; border: 0; padding: 0; margin: 2px auto 0; cursor: pointer;
  font-family: var(--mt-sans); font-size: 13.5px; font-weight: 600; color: var(--mt-ink-soft);
  text-decoration: underline; text-underline-offset: 3px; line-height: 1.6;
}
.mt-compra .shopify-payment-button__more-options:hover { color: var(--mt-ink); }

/* La fila de confianza necesita AIRE respecto al boton */
.mt-producto__confianza { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--mt-ink-faint); }
.mt-producto__desc { font-size: 14.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); margin-top: var(--mt-aire-m); }
.mt-producto__desplegables { margin-top: var(--mt-aire-m); }
.mt-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--mt-ink-faint); border-radius: 10px; overflow: hidden; }
.mt-spec { background: #fff; padding: 14px 16px; }
.mt-spec__clave { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mt-blue); margin-bottom: 5px; line-height: 1.5; }
.mt-spec__valor { font-size: 14px; font-weight: 600; line-height: var(--mt-lh-corto); }

/* ==========================================================================
   CATALOGO — contorno en las tarjetas de producto de Dawn
   ========================================================================== */
/* Tarjeta del catalogo. Sobre fondo blanco no se distinguia nada, asi que el
   borde es azul marino de marca y se levanta un poco al pasar el raton. */
.card-wrapper {
  border: 1px solid rgba(11, 28, 61, 0.55);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease), transform 0.3s var(--mt-ease);
}
.card-wrapper:hover {
  border-color: var(--mt-ink);
  box-shadow: 0 14px 34px rgba(11, 28, 61, 0.13);
  transform: translateY(-3px);
}
.card-wrapper .card__inner { background: #fff; }

.card-wrapper .card__content { padding: 4px 18px 20px; }
.card-wrapper .card__heading { margin: 0; }
.card-wrapper .card__heading a {
  font-family: var(--mt-sans); font-weight: 800; font-size: 15.5px;
  line-height: var(--mt-lh-corto); color: var(--mt-ink); letter-spacing: 0;
}
.card-wrapper .price { font-family: var(--mt-sans); font-weight: 800; color: var(--mt-ink); margin-top: 8px; }
.card-wrapper .price__container .price-item { font-size: 15.5px; }
.card-wrapper .card__information { padding-top: 12px; }
@media screen and (prefers-reduced-motion: reduce) {
  .card-wrapper, .card-wrapper:hover { transition: none; transform: none; }
}

/* --- Cabecera de la pagina de tienda ------------------------------------- */
.collection-hero__inner { text-align: center; }
.collection-hero__text-wrapper { max-width: 640px; margin: 0 auto; }
.collection-hero__eyebrow { margin-bottom: 12px; color: var(--mt-blue); }
.collection-hero__title {
  font-family: var(--mt-serif); font-weight: 500;
  line-height: var(--mt-lh-titular); letter-spacing: -0.005em;
  padding-bottom: 0.08em; margin: 0; color: var(--mt-ink);
  font-size: clamp(30px, 4.6vw, 44px);
}
.collection-hero__sub {
  margin-top: var(--mt-aire-s); font-size: 16px;
  line-height: var(--mt-lh-texto); color: var(--mt-ink-soft);
}
.collection-hero__description { margin-top: var(--mt-aire-s); color: var(--mt-ink-soft); }

/* Con una o dos fichas, la rejilla de varias columnas deja la tarjeta tirada a
   un lado y la pagina parece vacia. Se centra y se le da mas cuerpo. */
.product-grid:not(:has(> li:nth-child(3))) { justify-content: center; }
.product-grid:not(:has(> li:nth-child(3))) > .grid__item {
  flex: 0 0 auto;
  width: min(360px, 100%);
  max-width: min(360px, 100%);
}

/* ==========================================================================
   Paginas de contenido
   ========================================================================== */
.mt-pagina { max-width: 760px; margin: 0 auto; }
.mt-pagina__titulo { font-family: var(--mt-serif); font-weight: 500; line-height: var(--mt-lh-titular); padding-bottom: 0.06em; margin-bottom: 10px; }
.mt-pagina__fecha { font-size: 13px; color: var(--mt-ink-soft); margin-bottom: 30px; }
.mt-pagina__cuerpo { font-size: 15.5px; line-height: 1.75; color: var(--mt-ink-soft); }
.mt-pagina__cuerpo h2 { font-family: var(--mt-serif); font-size: 22px; font-weight: 500; line-height: var(--mt-lh-titular); color: var(--mt-ink); margin: 32px 0 12px; }
.mt-pagina__cuerpo h3 { font-size: 16px; font-weight: 800; color: var(--mt-ink); margin: 24px 0 8px; }
.mt-pagina__cuerpo p { margin-bottom: 15px; }
.mt-pagina__cuerpo ul { list-style: disc; padding-left: 20px; margin-bottom: 15px; }
.mt-pagina__cuerpo li { margin-bottom: 7px; }
.mt-pagina__cuerpo a { color: var(--mt-blue); }

/* ==========================================================================
   Pie de página
   ========================================================================== */
.mt-pie__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 34px 40px; align-items: start; }
.mt-pie__marca { max-width: 320px; }
.mt-pie__marca-nombre { font-family: var(--mt-serif); font-weight: 500; letter-spacing: 0.13em; line-height: 1.3; padding-bottom: 0.06em; margin-bottom: 14px; }
.mt-pie__logo { display: block; height: auto; max-width: 100%; margin-bottom: 14px; }
.mt-pie__tagline { font-size: 14px; line-height: var(--mt-lh-texto); }
.mt-pie__redes { display: flex; gap: 10px; margin-top: 20px; }
.mt-pie__redes a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.7; transition: opacity 0.3s var(--mt-ease), transform 0.3s var(--mt-ease); }
.mt-pie__redes a:hover { opacity: 1; transform: translateY(-2px); }
.mt-pie__col-titulo { font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 16px; line-height: 1.5; }
.mt-pie__enlaces { display: grid; gap: 10px; }
.mt-pie__enlaces a { font-size: 14px; text-decoration: none; line-height: var(--mt-lh-corto); transition: color 0.25s var(--mt-ease); }
.mt-pie__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 22px; margin-top: 42px; padding-top: 24px; }
.mt-pie__legal { font-size: 12.5px; line-height: var(--mt-lh-corto); }
.mt-pie__pagos { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.mt-pie__pago { height: 22px; width: auto; border-radius: 3px; }
.mt-header-logo img { max-width: 100%; height: auto; }

/* ==========================================================================
   COLORES POR UNIDAD DENTRO DE CADA PACK
   El panel solo se abre cuando el pack esta seleccionado. La altura se mueve
   en pixeles desde JS, igual que los desplegables del FAQ, porque el truco de
   grid 0fr->1fr resuelve a cero en algunos navegadores.
   ========================================================================== */
.mt-pack-caja { display: block; }
.mt-pack-caja .mt-pack { width: 100%; }
.mt-pack-caja.mt-activo .mt-pack { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.mt-pack__colores {
  overflow: hidden;
  border: 2px solid var(--mt-blue);
  border-top: 0;
  border-radius: 0 0 var(--mt-radio-sm) var(--mt-radio-sm);
  background: var(--mt-mist);
}
.mt-pack__colores[hidden] { display: none; }
.mt-pack__colores--js { height: 0; transition: height 0.35s var(--mt-ease); }
.mt-pack__colores-dentro { padding: 14px 16px 16px; }
.mt-pack__colores-titulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mt-blue); line-height: 1.5; margin-bottom: 10px; display: block;
}
.mt-unidad { display: grid; gap: 6px; }
.mt-unidad + .mt-unidad { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(11, 28, 61, 0.08); }
.mt-unidad__etiqueta { font-size: 12px; font-weight: 800; line-height: var(--mt-lh-corto); }
.mt-unidad__etiqueta span { font-weight: 500; color: var(--mt-ink-soft); }
.mt-unidad__opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-mini {
  border: 0; background: transparent; padding: 3px; cursor: pointer;
  display: grid; justify-items: center; gap: 5px; font-family: var(--mt-sans);
}
.mt-mini__color {
  width: 26px; height: 26px; border-radius: 7px; display: block;
  /* Borde interior en vez de exterior: asi el blanco se distingue del fondo
     sin que el cuadrado cambie de tamano al seleccionarlo. */
  box-shadow: inset 0 0 0 1px rgba(11, 28, 61, 0.18);
  transition: transform 0.28s var(--mt-ease), box-shadow 0.28s var(--mt-ease);
}
.mt-mini:hover .mt-mini__color { transform: translateY(-2px); }
.mt-mini.mt-activo .mt-mini__color {
  box-shadow: inset 0 0 0 1px rgba(11, 28, 61, 0.18), 0 0 0 2px #fff, 0 0 0 3px var(--mt-ink);
}
.mt-mini__nombre { font-size: 10.5px; font-weight: 700; color: var(--mt-ink-soft); line-height: 1.35; text-align: center; }
.mt-mini.mt-activo .mt-mini__nombre { color: var(--mt-ink); }

/* Aviso que sustituye a Shop Pay cuando el pack lleva colores distintos */
.mt-compra__nota {
  font-size: 12.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft);
  text-align: center; margin-top: 12px;
}
.mt-compra__nota[hidden] { display: none; }
.mt-compra__acelerado[hidden] { display: none; }

/* ==========================================================================
   COMO SE USA -- cuatro pasos con foto
   ========================================================================== */
.mt-usar__pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: var(--mt-aire-l); }
.mt-paso {
  background: var(--mt-mist);
  border-radius: var(--mt-radio-sm);
  padding: 18px 18px 24px;
  display: flex; flex-direction: column;
}
.mt-paso__media {
  aspect-ratio: 1; border-radius: calc(var(--mt-radio-sm) - 6px); overflow: hidden;
  background: #fff; margin-bottom: 18px;
}
.mt-paso__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-paso__titulo {
  font-weight: 800; font-size: 15px; line-height: var(--mt-lh-corto);
  color: var(--mt-ink); margin-bottom: 8px; display: block;
}
.mt-paso__texto { font-size: 13.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); display: block; }

/* ==========================================================================
   RESENAS -- carrusel infinito de fotos de clientes
   La cinta se duplica en el HTML y se desplaza -50%: al llegar al final la
   copia esta exactamente donde empezo la original, asi que el bucle no salta.
   ========================================================================== */
.mt-resenas__viaje {
  position: relative; overflow: hidden; margin-top: var(--mt-aire-l);
  /* Los bordes se difuminan con mascara, no con un degradado encima: asi vale
     para cualquier color de fondo sin tener que repetirlo aqui. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mt-resenas-fade, 70px), #000 calc(100% - var(--mt-resenas-fade, 70px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--mt-resenas-fade, 70px), #000 calc(100% - var(--mt-resenas-fade, 70px)), transparent 100%);
}

.mt-resenas__pista {
  /* Sin gap a proposito: con separacion entre elementos, el -50% del bucle cae
     medio hueco desviado y el salto se nota. La separacion va como margen
     dentro de cada tarjeta, que si entra en la cuenta del ancho total. */
  display: flex; width: max-content;
  animation-name: mtDesliza;
  animation-duration: var(--mt-resenas-dur, 60s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mt-resenas__viaje:hover .mt-resenas__pista { animation-play-state: paused; }

.mt-resena {
  position: relative; flex: 0 0 auto;
  width: 230px; aspect-ratio: 3 / 4; margin-right: 16px;
  border-radius: var(--mt-radio-sm); overflow: hidden;
  background: var(--mt-mist);
}
.mt-resena__foto { position: absolute; inset: 0; }
.mt-resena__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-resena__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 34px 15px 15px;
  background: linear-gradient(to top, rgba(6, 16, 36, 0.92) 0%, rgba(6, 16, 36, 0.72) 45%, rgba(6, 16, 36, 0) 100%);
  transition: opacity 0.3s var(--mt-ease);
  pointer-events: none;
}
.mt-resena__estrellas { display: flex; gap: 2px; margin-bottom: 7px; color: #FFB43D; }
.mt-resena__estrellas svg { display: block; }
.mt-resena__resumen {
  font-size: 12.5px; font-weight: 700; line-height: var(--mt-lh-corto);
  color: #fff; display: block;
}
.mt-resena__completa {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(6, 16, 36, 0.93);
  color: #fff;
  padding: 20px 18px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--mt-ease), visibility 0.32s var(--mt-ease);
  overflow-y: auto;
  pointer-events: none;
}
.mt-resena__completa .mt-resena__estrellas { margin-bottom: 10px; }
.mt-resena__texto { font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); display: block; }
.mt-resena__lupa { position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; cursor: pointer; padding: 0; }
.mt-resena:hover .mt-resena__completa,
.mt-resena__lupa:focus-visible + .mt-resena__completa,
.mt-resena.mt-activo .mt-resena__completa { opacity: 1; visibility: visible; }
.mt-resena:hover .mt-resena__pie,
.mt-resena.mt-activo .mt-resena__pie { opacity: 0; }

.mt-resenas__final {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 24px; margin-top: var(--mt-aire-l);
}
.mt-resenas__nota { display: flex; align-items: center; gap: 10px; }
.mt-resenas__nota-estrellas { display: flex; gap: 2px; color: #FFB43D; }
.mt-resenas__nota-texto { font-size: 13px; color: var(--mt-ink-soft); line-height: var(--mt-lh-corto); }
.mt-resenas__nota-texto strong { color: var(--mt-ink); font-weight: 800; }

/* ==========================================================================
   DEJA TU RESEÑA — formulario de opinion del cliente
   ========================================================================== */
/* La tarjeta se pinta aqui y no solo desde la seccion: el formulario tambien
   se usa dentro del bloque de reseñas, que no trae estos colores. */
.mt-opinar { padding: 34px 36px 38px; background: var(--mt-mist); border-radius: var(--mt-radio); }
.mt-resenas__formulario { margin-top: var(--mt-aire-l); }
/* Color base de las estrellas marcadas, por lo mismo. */
.mt-estrellas input:checked ~ label,
.mt-estrellas label:hover,
.mt-estrellas label:hover ~ label { color: #FFB43D; }
.mt-opinar .mt-cabecera { margin-bottom: var(--mt-aire-m); }
.mt-opinar .mt-cabecera .mt-body { margin-top: 10px; font-size: 15px; }

.mt-campo { display: block; margin-bottom: 16px; border: 0; padding: 0; }
.mt-campo__etiqueta {
  display: block; font-size: 12.5px; font-weight: 800;
  line-height: var(--mt-lh-corto); margin-bottom: 7px; color: var(--mt-ink);
  padding: 0;
}
.mt-campo__caja {
  width: 100%; box-sizing: border-box;
  font-family: var(--mt-sans); font-size: 14.5px; line-height: var(--mt-lh-texto);
  color: var(--mt-ink); background: #fff;
  border: 1px solid rgba(11, 28, 61, 0.16); border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.25s var(--mt-ease), box-shadow 0.25s var(--mt-ease);
}
.mt-campo__caja::placeholder { color: rgba(11, 28, 61, 0.38); }
.mt-campo__caja:focus {
  outline: none;
  border-color: var(--mt-blue);
  box-shadow: 0 0 0 3px rgba(27, 111, 214, 0.14);
}
textarea.mt-campo__caja { resize: vertical; min-height: 108px; }

.mt-campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* Estrellas. Van del 5 al 1 en el HTML y la fila se invierte aqui: asi
   "input:checked ~ label" alcanza a las de su izquierda, que son las que hay
   que pintar. Al reves no hay selector de hermano anterior en CSS. */
.mt-campo--estrellas { margin-bottom: 20px; }
.mt-estrellas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.mt-estrellas input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mt-estrellas label {
  cursor: pointer; color: rgba(11, 28, 61, 0.18); line-height: 0;
  transition: color 0.2s var(--mt-ease), transform 0.2s var(--mt-ease);
}
.mt-estrellas label:hover { transform: scale(1.08); }
.mt-estrellas input:focus-visible + label {
  outline: 2px solid var(--mt-blue); outline-offset: 3px; border-radius: 4px;
}

.mt-casilla {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 6px 0 20px; cursor: pointer;
}
.mt-casilla input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--mt-blue); cursor: pointer; }
.mt-casilla span { font-size: 12.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); }

/* --- Aviso del 10%: pantalla de "ya estas dentro" ------------------------ */
.mt-aviso__ok { text-align: center; padding: 6px 0 2px; }
.mt-aviso__ok[hidden] { display: none; }
.mt-aviso__ok-tic {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(27, 111, 214, 0.12); color: var(--mt-blue); margin: 0 auto 16px;
}
.mt-aviso__ok-titulo {
  font-family: var(--mt-serif); font-weight: 500; font-size: 28px;
  line-height: var(--mt-lh-titular); padding-bottom: 0.06em; color: var(--mt-ink);
}
.mt-aviso__ok-texto {
  font-size: 14.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft);
  margin-top: 10px;
}
.mt-aviso__ok .mt-aviso__codigo { display: inline-block; margin-top: 16px; }
.mt-aviso__seguir { margin-top: var(--mt-aire-m); }

.mt-adjunto {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  background: rgba(27, 111, 214, 0.07); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px;
}
.mt-adjunto__icono { color: var(--mt-blue); line-height: 0; margin-top: 1px; }
.mt-adjunto span:last-child { font-size: 12.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); }
.mt-opinar__nota { font-size: 12px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); margin-top: 14px; }
.mt-opinar__error {
  background: #FDECEC; color: #A32020; border-radius: 10px;
  padding: 12px 14px; font-size: 13.5px; line-height: var(--mt-lh-texto);
  margin-bottom: 18px;
}
.mt-opinar__error ul, .mt-opinar__error li { list-style: none; margin: 0; padding: 0; }

.mt-opinar__gracias { text-align: center; padding: 12px 0 8px; }
.mt-opinar__tic {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(27, 111, 214, 0.12); color: var(--mt-blue); margin: 0 auto var(--mt-aire-s);
}
.mt-opinar__gracias-titulo { font-size: 26px; }
.mt-opinar__gracias-texto {
  font-size: 15px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft);
  margin-top: 12px; max-width: 460px; margin-left: auto; margin-right: auto;
}

/* ==========================================================================
   PANEL DE NOTA MEDIA + LISTADO DE RESEÑAS
   Todo lo que se ve aqui sale de las reseñas del bloque: ni la nota ni los
   recuentos estan escritos a mano.
   ========================================================================== */
.mt-panel-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 30px 44px;
  align-items: center;
  padding: 30px 34px;
  border: 1px solid var(--mt-ink-faint);
  border-radius: var(--mt-radio-sm);
  background: #fff;
  margin-top: var(--mt-aire-l);
}

.mt-panel-nota__media { text-align: center; }
.mt-panel-nota__cifra {
  display: block; font-family: var(--mt-sans); font-weight: 800;
  font-size: 46px; line-height: 1.05; color: var(--mt-ink); letter-spacing: -0.02em;
}
.mt-panel-nota__media .mt-resenas__nota-estrellas { justify-content: center; margin-top: 8px; }
.mt-panel-nota__cuenta {
  display: block; margin-top: 8px; font-size: 13px;
  line-height: var(--mt-lh-corto); color: var(--mt-ink-soft);
}
.mt-estrella--apagada { color: rgba(11, 28, 61, 0.16) !important; }
.mt-estrella--apagada svg { color: inherit !important; }

.mt-panel-nota__barras { display: grid; gap: 7px; }
.mt-barra { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.mt-barra__nivel {
  display: flex; align-items: center; gap: 3px; justify-content: flex-end;
  font-size: 12.5px; font-weight: 700; color: var(--mt-ink); line-height: 1;
}
.mt-barra__nivel svg { width: 11px; height: 11px; }
.mt-barra__pista {
  display: block; height: 9px; border-radius: 99px;
  background: rgba(11, 28, 61, 0.09); overflow: hidden;
}
.mt-barra__valor { display: block; height: 100%; border-radius: 99px; background: #FFB43D; }
.mt-barra__num { font-size: 12px; color: var(--mt-ink-soft); line-height: 1; }

.mt-panel-nota__invita { text-align: center; }
.mt-panel-nota__invita-titulo {
  font-size: 16px; font-weight: 700; color: var(--mt-ink);
  line-height: var(--mt-lh-corto); margin-bottom: 8px;
}
.mt-panel-nota__invita .mt-resenas__nota-estrellas { justify-content: center; margin-bottom: 14px; }
.mt-panel-nota__boton { padding: 12px 26px; font-size: 14px; }

/* --- Fichas de las reseñas escritas -------------------------------------- */
.mt-lista-resenas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: var(--mt-aire-l);
}
.mt-ficha-resena {
  border: 1px solid var(--mt-ink-faint);
  border-radius: var(--mt-radio-sm);
  background: #fff;
  padding: 20px 22px 22px;
  display: flex; flex-direction: column;
}
.mt-ficha-resena__alto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mt-ficha-resena__fecha { font-size: 12px; color: var(--mt-ink-soft); line-height: 1; }
.mt-ficha-resena__titulo {
  font-size: 14.5px; font-weight: 800; color: var(--mt-ink);
  line-height: var(--mt-lh-corto); margin-bottom: 8px;
}
.mt-ficha-resena__texto {
  font-size: 13.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft);
  flex: 1;
}
.mt-ficha-resena__foto {
  margin-top: 14px; border-radius: 10px; overflow: hidden;
  width: 84px; height: 84px; background: var(--mt-mist);
}
.mt-ficha-resena__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-ficha-resena__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(11, 28, 61, 0.08);
}
.mt-ficha-resena__autor { font-size: 13px; font-weight: 800; color: var(--mt-ink); line-height: 1; }
.mt-ficha-resena__sello {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: #1B8A5A; line-height: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1100px) {
  .mt-rutina__grid { gap: 38px; }
  .mt-faq__grid { gap: 32px; }
  .mt-producto__grid { gap: 34px; }
}

@media screen and (max-width: 989px) {
  :root { --mt-aire-tarjeta: 24px 24px 28px; }
  .mt-panel-nota { grid-template-columns: auto minmax(0, 1fr); gap: 26px 32px; }
  .mt-panel-nota__invita { grid-column: 1 / -1; border-top: 1px solid rgba(11, 28, 61, 0.08); padding-top: 22px; }
  .mt-usar__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mt-banner__caja { max-width: none; }
  .mt-problema__paneles { grid-template-columns: 1fr; }
  .mt-rutina__grid { grid-template-columns: 1fr; }
  .mt-faq__grid { grid-template-columns: 1fr; gap: 26px; }
  .mt-producto__grid { grid-template-columns: 1fr; gap: 32px; }
  .mt-producto__galeria { position: static; }
  .mt-caja__piezas { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .mt-cierre__tarjeta { grid-template-columns: 1fr; }
  .mt-cierre__media { aspect-ratio: 16 / 9; min-height: 0; }
  .mt-cierre__cuerpo { padding: 32px 26px 36px; }
  .mt-banner__onda { height: 40px; }
  .mt-pie__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 30px 24px; }
  .mt-aviso__caja { grid-template-columns: 1fr; width: min(420px, 100%); }
  .mt-aviso__media { aspect-ratio: 16 / 10; }
  .mt-aviso__cuerpo { padding: 30px 26px 34px; }

  /* En movil la tarjeta flotante no cabe sin salirse de la pantalla, asi que
     el punto se enlaza con su ficha de la lista de abajo: al tocarlo se
     desplaza hasta ella y se resalta. Antes el punto tenia pointer-events:none
     y al tocarlo no pasaba absolutamente nada. */
  .mt-punto { pointer-events: auto; width: 30px; height: 30px; }
  .mt-punto__nucleo { inset: 9px; }
  .mt-punto__tarjeta { display: none; }
  .mt-detalles__lista-item {
    transition: border-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease), background-color 0.3s var(--mt-ease);
  }
  .mt-detalles__lista-item.mt-destacado {
    border-color: var(--mt-blue);
    background: var(--mt-mist);
    box-shadow: 0 0 0 3px rgba(27, 111, 214, 0.12);
  }
  .mt-detalles__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: var(--mt-aire-m); }
  .mt-detalles__lista-item { background: #fff; border: 1px solid var(--mt-ink-faint); border-radius: var(--mt-radio-sm); padding: 16px 17px; }
  .mt-detalles__lista-titulo { font-weight: 800; font-size: 13.5px; margin-bottom: 5px; display: block; line-height: var(--mt-lh-corto); }
  .mt-detalles__lista-texto { font-size: 12.5px; line-height: var(--mt-lh-texto); color: var(--mt-ink-soft); display: block; }
}

@media screen and (max-width: 749px) {
  :root { --mt-margen: 18px; --mt-aire-l: 26px; }
  .mt-panel-nota { grid-template-columns: 1fr; padding: 22px 18px 24px; gap: 20px; text-align: center; }
  .mt-panel-nota__cifra { font-size: 38px; }
  .mt-barra { grid-template-columns: 36px minmax(0, 1fr) 34px; }
  .mt-panel-nota__invita { padding-top: 20px; }
  .mt-lista-resenas { grid-template-columns: 1fr; }
  .mt-ficha-resena { padding: 16px 17px 18px; }
  .mt-opinar { padding: 24px 20px 28px; }
  .mt-campos-fila { grid-template-columns: 1fr; }
  .mt-estrellas label svg { width: 26px; height: 26px; }
  .mt-opinar__gracias-titulo { font-size: 22px; }
  .mt-usar__pasos { gap: 14px; }
  .mt-paso { padding: 14px 14px 18px; }
  .mt-paso__media { margin-bottom: 13px; }
  .mt-paso__titulo { font-size: 13.5px; }
  .mt-paso__texto { font-size: 12.5px; }
  .mt-resena { width: 170px; margin-right: 12px; }
  /* La tarjeta es la mitad de ancha que en ordenador, asi que la resena larga
     no cabe con el cuerpo de texto normal. Se encoge y, por si acaso, se deja
     desplazar con el dedo cuando esta abierta. */
  .mt-resena__pie { padding: 26px 12px 12px; }
  .mt-resena__resumen { font-size: 11.5px; }
  .mt-resena__completa { padding: 14px 12px; }
  .mt-resena__texto { font-size: 10.5px; line-height: 1.5; }
  .mt-resena.mt-activo .mt-resena__completa { pointer-events: auto; }
  .mt-resenas__viaje { --mt-resenas-fade: 30px; }
  .mt-panel__titulo { font-size: 20px; }
  .mt-detalles__escena { aspect-ratio: 4 / 3; }
  .mt-detalles__lista { grid-template-columns: 1fr; }
  .mt-caja__piezas { grid-template-columns: 1fr; gap: 20px; }
  .mt-pieza { padding-top: 0; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
  .mt-pieza__linea, .mt-pieza__punto { display: none; }
  .mt-pieza__numero { margin: 0; font-size: 18px; }
  .mt-anillo { width: min(210px, 100%); }
  .mt-anillo__numero { font-size: 48px; }
  .mt-momento { grid-template-columns: 66px 1fr; gap: 14px; }
  .mt-cierre__precio-actual { font-size: 30px; }
  .mt-specs { grid-template-columns: 1fr; }
  .mt-galeria__tira { width: 56px; height: 56px; }
  .mt-btn { padding: 15px 28px; font-size: 15px; }
  .mt-pie__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .mt-pie__marca { grid-column: 1 / -1; max-width: none; }
  .mt-pie__barra { margin-top: 32px; }
  .mt-pack { padding: 15px 16px; grid-template-columns: 20px 1fr auto; gap: 11px; }
  .mt-pack__nombre { font-size: 14px; }
  .mt-pestana { padding: 16px 9px; font-size: 11.5px; }
  /* En movil van todos en una sola linea, sean 3 o 4. Con repeat(3,1fr) el
     cuarto icono caia solo a una segunda fila. grid-auto-flow: column reparte
     el ancho entre los que haya, sin importar cuantos sean. */
  .mt-iconos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0 6px;
    align-items: start;
  }
  .mt-icono { gap: 8px; }
  .mt-icono__caja { width: 42px; height: 42px; }
  .mt-icono__caja svg { width: 19px; height: 19px; }
  .mt-icono__titulo { font-size: 11px; }
  .mt-icono__texto { font-size: 10px; margin-top: 2px; }
}

/* ==========================================================================
   Accesibilidad: sin movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mt-anillo__valor { transition: none; stroke-dashoffset: 80; }
  .mt-punto::before, .mt-btn--brillo::after { animation: none !important; }
  .mt-pieza__linea { transform: translateX(-50%) scaleY(1) !important; transition: none; }
  .mt-pieza__punto { transform: translate(-50%, -50%) scale(1) !important; transition: none; }
  .mt-marca { opacity: 1 !important; transform: none !important; transition: none; }
  .mt-panel__media img, .mt-momento, .mt-btn { transition: none !important; }
  /* La marquesina sigue moviendose, solo que mas lenta. Si se apaga del todo
     el usuario ve dos frases quietas y parece que la web esta rota. */
  .mt-anuncio__pista { animation-duration: calc(var(--mt-marq-dur, 35s) * 1.5); }
  .mt-resenas__pista { animation-duration: calc(var(--mt-resenas-dur, 60s) * 1.6); }
}