/* Metacrilato Gestor — PORTADA (propuesta 16-09-2026).
   Estructura de la portada nueva. Todos los valores estéticos vienen de
   Apariencia (variables --mc-*); los botones de buttons.css. Se carga en la
   portada y en la página "portada-propuesta" (comparación). */

.mc-home { max-width: 1240px; margin: 0 auto; padding: 0 20px 60px; color: var(--mc-texto); }
.mc-home section { margin: 0 0 56px; }
.mc-home h1, .mc-home h2, .mc-home h3 { margin: 0; color: var(--mc-texto); line-height: 1.2; }
.mc-home h1 { font-size: 40px; font-weight: var(--mc-peso-fuerte); }
.mc-home h2 { font-size: var(--mc-fs-titulo); font-weight: var(--mc-peso-fuerte); margin-bottom: 8px; }
.mc-home h3 { font-size: var(--mc-fs-base); font-weight: var(--mc-peso-fuerte); }
.mc-home p { margin: 0; font-size: var(--mc-fs-base); line-height: 1.55; }
.mc-home .mc-home-sub { color: var(--mc-texto-2); margin-bottom: 22px; }
.mc-home .mc-home-kicker { font-size: var(--mc-fs-mini); font-weight: var(--mc-peso-fuerte); letter-spacing: .06em; text-transform: uppercase; color: var(--mc-texto-2); margin-bottom: 6px; }
.mc-home .mc-home-nota { font-size: var(--mc-fs-compacto); color: var(--mc-texto-2); }
.mc-home ul, .mc-home ol { list-style: none; margin: 0; padding: 0; }
.mc-home img { display: block; max-width: 100%; height: auto; }

/* Bento (mismo patrón que carrito, pago y configurador) */
.mc-home .mc-bento { background: var(--mc-fondo-suave); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-bento); padding: var(--mc-bento-pad-v) var(--mc-bento-pad-h); box-sizing: border-box; }

/* Enlaces y botones */
.mc-home .mc-home-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.mc-home .mc-home-link { color: var(--mc-texto); text-decoration: underline; font-size: var(--mc-fs-compacto); font-weight: var(--mc-peso-fuerte); }
.mc-home .mc-home-link:hover { color: var(--mc-enlace); }
.mc-home .mc-home-ico { display: inline-block; flex: 0 0 auto; box-sizing: border-box; width: var(--mc-icono-boton); height: var(--mc-icono-boton); padding: calc((var(--mc-icono-boton) - var(--mc-icono-glifo)) / 2); margin-right: calc((var(--mc-icono-glifo) - var(--mc-icono-boton)) / 2); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; }
.mc-home .mc-home-ico-ruler { -webkit-mask-image: var(--mc-icon-ruler); mask-image: var(--mc-icon-ruler); }
/* WhatsApp (shortcode [mc_contacto_directo]): el logo en color de Datos de la Empresa, del tamaño de los iconos de píldora. */
.mc-home .mc-home-ico-img { display: block; flex: 0 0 auto; box-sizing: border-box; width: var(--mc-icono-boton); height: var(--mc-icono-boton); padding: calc((var(--mc-icono-boton) - var(--mc-icono-glifo)) / 2); margin-right: calc((var(--mc-icono-glifo) - var(--mc-icono-boton)) / 2); object-fit: contain; }

/* Promesas */
.mc-home-promesas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 12px 0; border-bottom: 1px solid var(--mc-borde); }
.mc-home-promesas li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mc-fs-compacto); color: var(--mc-texto-2); }
.mc-home-check { width: 16px; height: 16px; background-color: var(--mc-ok); -webkit-mask: var(--mc-icon-check-circle-fill) no-repeat center / contain; mask: var(--mc-icon-check-circle-fill) no-repeat center / contain; }

/* Cabecera: la imagen ocupa todo el ancho y el texto va encima, en blanco,
   sobre un degradado oscuro por la izquierda que garantiza la lectura
   (el degradado se apoya en la propia foto, que ya es oscura por ese lado). */
.mc-home-hero { position: relative; display: flex; align-items: center; min-height: 480px; border-radius: var(--mc-radio-tarjeta); overflow: hidden; background: var(--mc-boton); color: var(--mc-boton-texto); }
.mc-home-hero-img { position: absolute; inset: 0; margin: 0; }
.mc-home-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.mc-home-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 80%); }
.mc-home-hero-txt { position: relative; z-index: 1; max-width: 620px; padding: 48px var(--mc-bento-pad-h) 48px 48px; }
.mc-home-hero h1 { color: var(--mc-boton-texto); }
.mc-home-hero .mc-home-lead { margin-top: 18px; color: rgba(255,255,255,.85); }
.mc-home-hero .mc-home-link { color: var(--mc-boton-texto); }
.mc-home-hero .mc-home-link:hover { color: rgba(255,255,255,.75); }
/* Sobre fondo oscuro el botón principal se invierte (misma geometría). */
.mc-home-hero .mc-btn-pill { background: var(--mc-boton-texto); color: var(--mc-boton); }
.mc-home-hero .mc-btn-pill:hover { background: var(--mc-fondo-hover); color: var(--mc-boton); }

/* Materiales (shortcode [mc_materiales]): mismas capas que el catálogo. */
/* Seis por fila; la fila incompleta se centra (6 + 5 desplazada = simétrico). */
.mc-home .mc-home-grid-materiales { --mc-mat-cols: 6; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mc-gap-bentos); }
.mc-home .mc-home-grid-materiales > li { flex: 0 0 calc((100% - (var(--mc-mat-cols) - 1) * var(--mc-gap-bentos)) / var(--mc-mat-cols)); margin: 0; }
.mc-home.mc-home-materiales { padding-bottom: 0; margin-bottom: 56px; }
/* Sin caja: lo que se ve es el círculo (foto o render) y el nombre debajo, centrado. */
.mc-home-grid-materiales a { display: block; text-decoration: none; color: var(--mc-texto); text-align: center; }
.mc-home-mat-img { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--mc-fondo-suave); border: 1px solid var(--mc-borde); box-sizing: border-box; transition: box-shadow .15s ease, transform .15s ease; }
.mc-home-grid-materiales a:hover .mc-home-mat-img { box-shadow: var(--mc-sombra-seleccion); transform: scale(1.03); }
.mc-home-mat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; margin: 0; }
.mc-home-mat.mc-foto .mc-home-mat-img img { padding: 8%; }
/* Sin foto de portada: la tarjeta del catálogo, inscrita en el círculo. */
.mc-home-mat:not(.mc-portada-foto) .mc-home-mat-img img { padding: 15%; }
/* Foto de portada del grupo: llena el círculo entero, sin margen (va después del catálogo para ganar). */
.mc-home-grid-materiales .mc-home-mat.mc-portada-foto .mc-home-mat-img img.mc-portada { object-fit: cover; padding: 0; }
.mc-home-mat.mc-multiply .mc-shape { mix-blend-mode: multiply; }
/* Hielo: desenfoque del fondo recortado a la silueta (mask-origin content-box: la imagen lleva padding). */
.mc-home-mat .mc-shape.mc-hielo { -webkit-backdrop-filter: blur(var(--mc-desenfoque, 6px)); backdrop-filter: blur(var(--mc-desenfoque, 6px)); -webkit-mask-mode: alpha; mask-mode: alpha; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.mc-home-mat .mc-filos { mix-blend-mode: normal; pointer-events: none; }
.mc-home-mat-nombre { display: block; margin-top: 8px; font-size: var(--mc-fs-compacto); font-weight: var(--mc-peso-fuerte); }
.mc-home-grid-materiales small { display: block; font-size: var(--mc-fs-mini); color: var(--mc-texto-2); }

/* Colores */
.mc-home-grid-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--mc-gap-bentos); }
.mc-home-grid-colores a { display: block; text-decoration: none; color: var(--mc-texto); background: var(--mc-fondo-suave); border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-bento); padding: 12px; transition: box-shadow .15s ease, background-color .15s ease; }
.mc-home-grid-colores a:hover { background: var(--mc-fondo); box-shadow: var(--mc-sombra-seleccion); }
.mc-home-grid-colores img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--mc-fondo); border-radius: var(--mc-radio-bento); }
.mc-home-grid-colores span { display: block; margin-top: 8px; font-size: var(--mc-fs-compacto); font-weight: var(--mc-peso-fuerte); }
.mc-home-grid-colores small { display: block; font-size: var(--mc-fs-mini); color: var(--mc-texto-2); }

/* Pasos */
.mc-home-grid-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mc-gap-bentos); }
.mc-home-grid-pasos li { display: flex; flex-direction: column; gap: 10px; }
.mc-home-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mc-boton); color: var(--mc-boton-texto); font-weight: var(--mc-peso-fuerte); font-size: var(--mc-fs-compacto); }
.mc-home-grid-pasos p { color: var(--mc-texto-2); font-size: var(--mc-fs-compacto); flex: 1 1 auto; }
.mc-home-captura { border: 1px solid var(--mc-borde); border-radius: var(--mc-radio-bento); overflow: hidden; background: var(--mc-fondo); }
.mc-home-captura img { width: 100%; }

/* Usos */
.mc-home-grid-usos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mc-gap-bentos); }
.mc-home .mc-home-grid-usos li { padding: 0; overflow: hidden; }
.mc-home-grid-usos a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--mc-texto); }
.mc-home-grid-usos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mc-home-grid-usos h3 { padding: 14px var(--mc-bento-pad-h) 6px; }
.mc-home-grid-usos p { padding: 0 var(--mc-bento-pad-h); font-size: var(--mc-fs-compacto); color: var(--mc-texto-2); flex: 1 1 auto; }
.mc-home-grid-usos small { display: block; padding: 12px var(--mc-bento-pad-h) var(--mc-bento-pad-v); font-size: var(--mc-fs-mini); font-weight: var(--mc-peso-fuerte); color: var(--mc-texto); }
.mc-home-grid-usos a:hover h3 { text-decoration: underline; }

/* Barcos */
.mc-home-barcos { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
.mc-home-barcos p + p { margin-top: 12px; }
.mc-home-barcos-img { margin: 0; }
.mc-home-barcos-img img { border-radius: var(--mc-radio-bento); }
.mc-home-barcos-img figcaption { margin-top: 8px; font-size: var(--mc-fs-mini); color: var(--mc-texto-2); }

/* Persona */
.mc-home-persona { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
.mc-home-persona-img { margin: 0; }
.mc-home-persona-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mc-radio-bento); }
.mc-home-persona-placeholder { aspect-ratio: 4 / 3; border-radius: var(--mc-radio-bento); border: 1px dashed var(--mc-borde-campo); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--mc-texto-3); font-size: var(--mc-fs-compacto); }

/* Grosores */
.mc-home-grid-grosores { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mc-gap-bentos); margin-bottom: 14px; }
.mc-home-grid-grosores strong { display: block; font-size: var(--mc-fs-subtitulo); font-weight: var(--mc-peso-fuerte); margin-bottom: 6px; }
.mc-home-grid-grosores p { font-size: var(--mc-fs-compacto); color: var(--mc-texto-2); }

/* Empresas */
.mc-home-empresas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
.mc-home-empresas p + p { margin-top: 12px; }
.mc-home-empresas-img { margin: 0; }
.mc-home-empresas-img img { border-radius: var(--mc-radio-bento); }
.mc-home-empresas-img figcaption { margin-top: 8px; font-size: var(--mc-fs-mini); color: var(--mc-texto-2); }

/* Garantía + precisión */
.mc-home-garantia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-gap-bentos); }
.mc-home-garantia h2 { margin-bottom: 10px; }
.mc-home-garantia .mc-home-link { display: inline-block; margin-top: 14px; }

/* Móvil */
@media (max-width: 900px) {
    .mc-home h1 { font-size: 30px; }
    .mc-home-hero { min-height: 0; }
    .mc-home-hero-txt { padding: 32px 20px; max-width: none; }
    .mc-home-hero-img::after { background: rgba(0,0,0,.6); }
    .mc-home-hero, .mc-home-persona, .mc-home-empresas, .mc-home-garantia, .mc-home-barcos { grid-template-columns: 1fr; }
    .mc-home .mc-home-grid-materiales { --mc-mat-cols: 4; }
    .mc-home-grid-pasos, .mc-home-grid-usos { grid-template-columns: 1fr; }
    .mc-home-grid-grosores { grid-template-columns: 1fr 1fr; }
    .mc-home-grid-colores { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Píldoras sin icono de la portada: margen del texto a ambos lados. */
.mc-home .mc-btn-pill:not(.mc-home-btn-ico) { padding: 0 var(--mc-btn-margen-texto); }