/* ==========================================================================
   Matmap · Capa de armonización
   --------------------------------------------------------------------------
   tokens.css se carga EL PRIMERO y solo declara variables.
   Esta hoja se carga LA ÚLTIMA y normaliza lo que cada plugin pinta a su
   manera, para que la página se lea como un solo documento y no como bloques
   pegados unos debajo de otros.

   Solo toca: ritmo vertical, superficies, títulos de sección, botones,
   tablas y foco. No cambia estructura ni comportamiento.

   Medido en una ficha real de ceramicos.es antes de escribirla:
     · 4 títulos de sección con 30,4 / 25,6 / 20 / 20 px y pesos 700/800
     · 8 tratamientos de botón, con radios 0/4/6/11/12/20/50 %
     · un azul #007AAF que no está en la identidad de la marca
   ========================================================================== */

/* En movil los bloques se juntan: hay menos ancho y el scroll es mas largo. */
@media (max-width:768px){
  :root{ --mm-flow:32px; --mm-flow-tight:20px; }
}


/* ==========================================================================
   1 · RITMO VERTICAL
   Cada plugin traía su propio margen (18, 20, 28, 32, 36 px). Unificado, para
   que la distancia entre bloques sea siempre la misma y la página respire
   igual de arriba a abajo.
   ========================================================================== */
.mm-carousel-block,
.mmuxa-accordion,
.mmcat-block,
.ccolec-block,
.mipro-wrap,
.mipro-seccion{
  margin-top:var(--mm-flow);
  margin-bottom:var(--mm-flow);
}

/* Dentro de la columna de compra los bloques van más juntos: son pasos de una
   misma decisión, no secciones independientes. */
.cpf-pf .cpf-comp + .cpf-comp{ margin-top:var(--mm-flow-tight); }


/* ==========================================================================
   2 · TÍTULOS DE SECCIÓN
   Mismo peso visual para todo lo que es "cabecera de bloque", venga del
   plugin que venga.
   ========================================================================== */
.mm-block__title,
.mmcat-block__title,
.ccolec-title,
.mipro-titulo{
  font-size:clamp(20px,2vw,26px) !important;
  font-weight:700 !important;
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--mm-brand) !important;
  margin:0 0 20px !important;
  text-wrap:balance;
}

/* Subtítulo / entradilla de bloque, cuando el plugin la tiene. */
.mmcat-block__subtitle,
.ccolec-subtitle,
.mipro-subtitulo{
  font-size:15px;
  line-height:1.55;
  color:var(--mm-ink-2);
  margin:-12px 0 20px;
  max-width:64ch;
}


/* ==========================================================================
   3 · SUPERFICIES
   Una sola definición de "tarjeta": mismo borde, mismo radio, misma sombra.
   ========================================================================== */
.mm-card,
.ccolec-card,
.mmcat-card,
.mipro-card,
.cpf-card{
  background:var(--mm-paper);
  border:1px solid var(--mm-line);
  border-radius:var(--mm-r-lg);
  box-shadow:var(--mm-sh-1);
  transition:transform var(--mm-ease), box-shadow var(--mm-ease), border-color var(--mm-ease);
}
@media (hover:hover){
  .mm-card:hover,
  .ccolec-card:hover,
  .mmcat-card:hover,
  .mipro-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--mm-sh-2);
    border-color:var(--mm-line-strong);
  }
}


/* ==========================================================================
   4 · BOTONES
   Tres variantes y una sola geometría. Antes había ocho tratamientos con
   radios de 0, 4, 6, 11, 12, 20 px y 50 %.

   IMPORTANTE: no se tocan los estados deshabilitados. "Añadir al carrito"
   se pinta en gris a propósito hasta que se calcula la cantidad; forzarle el
   color de marca haría creer que está activo.
   ========================================================================== */
.mm-card__btn,
.cpf-btn,
.calc-boton-flotante,
.calc-boton-adicional,
.calc-boton-modal-confirmar,
.ccolec-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--mm-control-h);
  padding:11px 20px;
  border-radius:var(--mm-r-md) !important;
  font-family:inherit;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.2;
  letter-spacing:0;
  text-decoration:none;
  text-transform:none !important;
  cursor:pointer;
  transition:background-color var(--mm-ease), border-color var(--mm-ease),
             color var(--mm-ease), box-shadow var(--mm-ease), transform var(--mm-ease);
}

/* --- Primario: la acción de marca --- */
.mm-card__btn{
  background:var(--mm-brand) !important;
  color:#fff !important;
  border:1px solid var(--mm-brand) !important;
}
.mm-card__btn:hover{
  background:var(--mm-brand-ink) !important;
  border-color:var(--mm-brand-ink) !important;
  box-shadow:var(--mm-sh-2);
}

/* --- Acento: la acción que mueve dinero (calcular, comprar) --- */
.cpf-btn--primary,
.calc-boton-principal-flotante{
  background:var(--mm-accent) !important;
  color:#fff !important;
  border:1px solid var(--mm-accent) !important;
}
.cpf-btn--primary:hover:not([disabled]),
.calc-boton-principal-flotante:hover:not([disabled]){
  background:var(--mm-accent-ink) !important;
  border-color:var(--mm-accent-ink) !important;
  box-shadow:var(--mm-sh-2);
}

/* --- Secundario: acciones de apoyo ---
   Aquí vivía un azul #007AAF que no pertenece a la identidad de la marca
   (Solicitar muestra, Consultar stock, confirmar en modales). */
.calc-boton-adicional,
.cpf-aa-btn-sample,
.cpf-btn--secondary{
  background:var(--mm-paper) !important;
  color:var(--mm-brand) !important;
  border:1.5px solid var(--mm-line-strong) !important;
}

/* El boton de la tarjeta de Colecciones es el MISMO que el del catalogo:
   son las dos la misma pieza (una tarjeta de producto). Antes uno era relleno
   navy y el otro un fantasma con borde. */
.ccolec-card-btn{
  background:var(--mm-brand) !important;
  color:#fff !important;
  border:1px solid var(--mm-brand) !important;
  width:100%;
}
.ccolec-card-btn:hover{
  background:var(--mm-brand-ink) !important;
  border-color:var(--mm-brand-ink) !important;
}
/* Hover de los secundarios: tinte suave, nunca solido.
   Si al pasar por encima se vuelven azules del todo, durante ese momento
   tienen el mismo peso que el CTA principal y se pierde la jerarquia.
   El texto se queda azul; el color:#fff que CPF forzaba con selectores de ID
   ya se ha corregido en su propia hoja. */
.calc-boton-adicional:hover:not([disabled]),
.cpf-aa-btn-sample:hover:not([disabled]),
.calc-boton-contacto:hover:not([disabled]),
.cpf-btn--secondary:hover:not([disabled]){
  background:var(--mm-brand-tint) !important;
  border-color:var(--mm-brand) !important;
  color:var(--mm-brand) !important;
}
.calc-boton-adicional:hover:not([disabled]) i,
.cpf-aa-btn-sample:hover:not([disabled]) i,
.calc-boton-contacto:hover:not([disabled]) i,
.calc-boton-adicional:hover:not([disabled]) svg,
.cpf-aa-btn-sample:hover:not([disabled]) svg{
  color:var(--mm-brand) !important;
  fill:currentColor;
}

/* Consultar stock es una accion de APOYO, no la principal. Va contorneado,
   igual que "Solicitar muestra". Tenerlo solido lo igualaba a "Anadir al
   carrito" y no se sabia cual era la accion de verdad.
   (En movil, CPF lo convierte en un enlace de WhatsApp y lo pinta de verde:
   ese caso se respeta, porque ahi el color significa otra cosa.)

   ─────────────────────────────────────────────────────────────────────────
   SELECTORES LARGOS A PROPOSITO. NO SIMPLIFICAR.
   ─────────────────────────────────────────────────────────────────────────
   CPF pinta estos botones con `color:#fff !important` sobre selectores de ID
   (.cpf-pf #contact-ayuda-button.calc-boton-adicional). Un selector de una
   sola clase, aunque lleve !important, PIERDE contra eso.

   Se corrigio tambien en la hoja de CPF, pero si se despliega esta hoja sin
   la otra el boton queda con fondo blanco y texto blanco: invisible. Por eso
   aqui se replica la especificidad de CPF, para que esta capa funcione sola
   y el orden de subida de los plugins deje de importar.                    */
.calc-boton-contacto,
#contact-ayuda-button.calc-boton-adicional,
.cpf-aa-btn-stock-editable.calc-boton-adicional,
.cpf-pf .calc-boton-contacto,
.cpf-pf .cpf-aa-btn-stock,
.cpf-pf .cpf-aa-btn-stock.calc-boton-adicional,
.cpf-pf #contact-ayuda-button.calc-boton-adicional,
.cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional{
  background:var(--mm-paper) !important;
  color:var(--mm-brand) !important;
  border:1.5px solid var(--mm-line-strong) !important;
}

/* El icono hereda el color del texto, no el blanco heredado de CPF. */
.cpf-pf .calc-boton-contacto i,
.cpf-pf .calc-boton-contacto svg,
.cpf-pf .cpf-aa-btn-stock i,
.cpf-pf .cpf-aa-btn-stock svg,
.cpf-pf #contact-ayuda-button.calc-boton-adicional i,
.cpf-pf #contact-ayuda-button.calc-boton-adicional svg,
.cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional i,
.cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional svg,
.cpf-pf #botonMuestra.calc-boton-adicional i,
.cpf-pf #botonMuestra.calc-boton-adicional svg,
.cpf-pf #botonMuestraUrl.calc-boton-adicional i,
.cpf-pf #botonMuestraUrl.calc-boton-adicional svg{
  color:var(--mm-brand) !important;
  fill:currentColor;
}

/* Solicitar muestra: misma proteccion, tambien en reposo. */
.cpf-pf #botonMuestra.calc-boton-adicional,
.cpf-pf #botonMuestraUrl.calc-boton-adicional,
.cpf-pf .cpf-aa-btn-sample.calc-boton-adicional{
  background:var(--mm-paper) !important;
  color:var(--mm-brand) !important;
  border:1.5px solid var(--mm-line-strong) !important;
}

/* Hover de los dos, con la especificidad de CPF replicada. */
.cpf-pf #botonMuestra.calc-boton-adicional:hover,
.cpf-pf #botonMuestraUrl.calc-boton-adicional:hover,
.cpf-pf .cpf-aa-btn-sample.calc-boton-adicional:hover,
.cpf-pf #contact-ayuda-button.calc-boton-adicional:hover,
.cpf-pf .cpf-aa-btn-stock.calc-boton-adicional:hover,
.cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional:hover,
.cpf-pf .calc-boton-contacto:hover{
  background:var(--mm-brand-tint) !important;
  border-color:var(--mm-brand) !important;
  color:var(--mm-brand) !important;
  opacity:1 !important;
}
.cpf-pf #botonMuestra.calc-boton-adicional:hover i,
.cpf-pf #botonMuestraUrl.calc-boton-adicional:hover i,
.cpf-pf .cpf-aa-btn-stock.calc-boton-adicional:hover i,
.cpf-pf #contact-ayuda-button.calc-boton-adicional:hover i,
.cpf-pf .calc-boton-contacto:hover i,
.cpf-pf .calc-boton-contacto:hover svg{
  color:var(--mm-brand) !important;
}

/* Excepcion: en movil CPF los convierte en enlace de WhatsApp y los pinta de
   verde. Ahi el color significa "esto abre WhatsApp", asi que se respeta. */
@media (max-width:767px){
  .cpf-pf #contact-ayuda-button.calc-boton-adicional,
  .cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional{
    background:#25D366 !important;
    border-color:#25D366 !important;
    color:#fff !important;
  }
  .cpf-pf #contact-ayuda-button.calc-boton-adicional i,
  .cpf-pf #contact-ayuda-button.calc-boton-adicional svg,
  .cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional i,
  .cpf-pf .cpf-aa-btn-stock-editable.calc-boton-adicional svg{
    color:#fff !important;
  }
}

/* Iconos heredados dentro de los botones secundarios */
.calc-boton-adicional i,
.cpf-aa-btn-sample i,
.calc-boton-contacto i{ color:inherit !important; }

/* --- Deshabilitado: un solo tratamiento, se respeta el significado --- */
.mm-card__btn[disabled],
.cpf-btn[disabled],
.calc-boton-flotante[disabled],
.calc-boton-adicional[disabled],
[aria-disabled="true"].calc-boton-flotante{
  background:var(--mm-wash) !important;
  color:var(--mm-muted) !important;
  border-color:var(--mm-line) !important;
  box-shadow:none !important;
  cursor:not-allowed;
  transform:none !important;
}


/* ==========================================================================
   5 · TABLAS
   La tabla de precios de la ficha y la ficha técnica del acordeón se leían
   como componentes de webs distintas.
   ========================================================================== */
.cpf-price-ref__table th,
.mmuxa-body .shop_attributes th{
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--mm-muted);
}
.cpf-price-ref__table td,
.mmuxa-body .shop_attributes td{
  font-size:14.5px;
  color:var(--mm-ink);
  font-style:normal;
}
.cpf-price-ref__table tr{ border-bottom:1px solid var(--mm-line); }


/* ==========================================================================
   6 · FOCO
   Un solo anillo para todo lo pulsable. Antes cada plugin usaba su grosor y
   su color, y algunos lo quitaban del todo.
   ========================================================================== */
.mm-card__btn:focus-visible,
.cpf-btn:focus-visible,
.calc-boton-flotante:focus-visible,
.calc-boton-adicional:focus-visible,
.calc-boton-contacto:focus-visible,
.ccolec-card-btn:focus-visible,
.mm-block__title a:focus-visible,
.mmcat-card a:focus-visible,
.ccolec-card a:focus-visible{
  outline:3px solid rgba(58,57,113,.38) !important;
  outline-offset:2px !important;
}

@media (prefers-reduced-motion:reduce){
  .mm-card,.ccolec-card,.mmcat-card,.mipro-card,
  .mm-card__btn,.cpf-btn,.calc-boton-flotante,.calc-boton-adicional{
    transition:none !important;
  }
  .mm-card:hover,.ccolec-card:hover,.mmcat-card:hover,.mipro-card:hover{
    transform:none !important;
  }
}


/* ==========================================================================
   7 · TIPOGRAFÍA
   Una sola pila para los once plugins. Antes había cinco distintas y una
   webfont (Plus Jakarta Sans) que solo usaba el blog, descargada de Google.
   ========================================================================== */
.mm-carousel-block, .mm-card, .mmuxa-accordion, .mmuxp-header,
.mmcat-block, .ccolec-block, .ccolec-inner, .mipro-wrap,
.cpf-pf, .gpl-popup, .gpl-modal{
  font-family:var(--mm-font);
}

/* Antetítulos y etiquetas: mismo tratamiento en todos los bloques. */
.mm-card__kicker,
.mmuxp-brand-link,
.mmcat-badge,
.ccolec-badge{
  font-size:var(--mm-fs-eyebrow);
  font-weight:var(--mm-fw-medium);
  letter-spacing:var(--mm-ls-eyebrow);
  text-transform:uppercase;
  line-height:1.2;
}

/* Nombre de producto dentro de cualquier tarjeta, venga del plugin que venga. */
.mm-card__title a,
.ccolec-card-name,
.mmcat-card__title{
  font-size:var(--mm-fs-base);
  font-weight:var(--mm-fw-bold);
  line-height:1.3;
  color:var(--mm-brand);
  text-decoration:none;
}

/* Precio: el naranja de marca, mismo peso y cifras tabulares en todas partes.
   Antes cada listado lo pintaba con un peso distinto (400, 600, 800). */
.mm-card__price-main,
.ccolec-card-price,
.mmcat-card__price,
.mmuxp-price-amount{
  color:var(--mm-accent);
  font-weight:var(--mm-fw-medium);
  font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   8 · BADGES
   Píldoras de estado con una sola forma. Los colores siguen significando lo
   mismo que antes; lo que se unifica es la geometría.
   ========================================================================== */
.mm-badge,
.mmcat-badge,
.ccolec-badge,
.ccolec-badge-blue,
.ccolec-badge-green{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--mm-r-full);
  font-size:var(--mm-fs-eyebrow);
  font-weight:var(--mm-fw-medium);
  line-height:1.25;
  letter-spacing:.03em;
}
/* Los dos badges de color de Colecciones pasan a los semánticos de marca. */
.ccolec-badge-blue { background:var(--mm-brand-tint); color:var(--mm-brand); }
.ccolec-badge-green{ background:var(--mm-good-bg);    color:var(--mm-good);  }


/* ==========================================================================
   9 · GEOMETRÍA
   Doce radios distintos (0, 4, 6, 8, 10, 11, 12, 14, 16, 20, 24, 50 %)
   reducidos a la escala de cuatro pasos.
   ========================================================================== */
.mmcat-card, .ccolec-card, .mipro-card{ border-radius:var(--mm-r-lg); }
.mmcat-chip, .ccolec-code, .ccolec-label{ border-radius:var(--mm-r-sm); }
.ccolec-card-img, .mmcat-block__overlay{ border-radius:0; }

/* Imagen superior de tarjeta: las esquinas de arriba siguen al contenedor. */
.mmcat-card > img:first-child,
.ccolec-card > img:first-child,
.ccolec-card-img{
  border-top-left-radius:var(--mm-r-lg);
  border-top-right-radius:var(--mm-r-lg);
}


/* ==========================================================================
   10 · CABECERAS DE BLOQUE
   Las secciones abren todas igual: título, aire, contenido. Antes cada
   plugin resolvía su cabecera a su manera y por eso parecían pegotes.
   ========================================================================== */
.ccolec-header,
.mmcat-block__cap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

/* CTA de cierre de bloque.
   ATENCION: .ccolec-cta y .mmcat-block__cta NO son enlaces de texto, son
   botones rellenos. Tratarlos como enlace dejaba texto navy sobre fondo navy
   y texto blanco sobre fondo blanco: ilegibles. */
.mmcat-block__cta,
.ccolec-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--mm-control-h);
  padding:11px 22px;
  border-radius:var(--mm-r-full);
  background:var(--mm-brand);
  color:#fff;
  border:1px solid var(--mm-brand);
  font-size:var(--mm-fs-sm);
  font-weight:var(--mm-fw-medium);
  letter-spacing:.02em;
  text-transform:none;
  text-decoration:none;
  transition:background var(--mm-ease), box-shadow var(--mm-ease);

  /* El texto de estas CTA es largo ("Explorar suelo porcelánico imitación
     barro"). Con nowrap se salía de la tarjeta. */
  white-space:normal;
  text-align:center;
  max-width:100%;
  line-height:1.25;
}
.mmcat-block__cta:hover,
.ccolec-cta:hover{
  background:var(--mm-brand-ink);
  border-color:var(--mm-brand-ink);
  box-shadow:var(--mm-sh-2);
}


/* ==========================================================================
   11 · SEPARADORES
   Un solo grosor y un solo color de línea.
   ========================================================================== */
.ccolec-divider,
.mmuxp-header,
.mm-toolbar{
  border-color:var(--mm-line);
  border-width:1px;
}


/* ==========================================================================
   FUERA DE ALCANCE
   --------------------------------------------------------------------------
   Esta hoja NO toca el header (.mh-*). Se intentó y fue un error: al cargarse
   la última, el display:inline-flex de los botones pisaba el display:none con
   el que el header oculta el toggle que no corresponde a cada tamaño, y
   salían dos botones de menú a la vez (además de romper el logo en móvil).

   Regla: no estilar desde aquí plugins cuyo código no tengamos delante.
   ========================================================================== */


/* ==========================================================================
   12 · ESQUINAS DE LA TARJETA DE PRODUCTO
   --------------------------------------------------------------------------
   El cartel de estado y el corazon de la lista de deseos se pintaban los dos
   arriba a la izquierda, y el corazon (z-index 9999) tapaba al cartel
   (z-index 2): "Novedad" no se leia nunca.

   El logo de marca se queda DONDE ESTABA, arriba a la derecha. Lo que baja es
   el cartel de estado, a la parte inferior de la imagen, donde no compite con
   nada y se lee entero.
   ========================================================================== */
.mm-card__media{ position:relative; }

/* Cartel de estado abajo a la izquierda, sobre la imagen. */
.mm-card__media .mm-badge{
  top:auto;
  bottom:10px;
  left:10px;
  right:auto;
  z-index:5;
  max-width:calc(100% - 20px);
}

/* Si la tarjeta lleva puntos de galeria, el cartel sube para no taparlos. */
.mm-card__media:has(.mm-dots) .mm-badge{ bottom:34px; }

/* Anula la regla antigua, que desplazaba el cartel a la derecha suponiendo
   que seguia arriba junto al corazon. */
.mm-card__media:has(.mmpa-wishlist-btn, .yith-wcwl-add-to-wishlist, .tinv-wraper) .mm-badge{
  left:10px;
  max-width:calc(100% - 20px);
}

@media (max-width:480px){
  .mm-card__media .mm-badge{ max-width:calc(100% - 16px); }
}