/* ==========================================================================
MATERIA CLARA — sistema base · v1 · septiembre 2026
--------------------------------------------------------------------------
La receta exacta del diseño. Lee SISTEMA.md para el porqué de cada valor.
Cómo se usa en cualquier proyecto:
1. Enlaza este archivo y materia-clara.js.
2. Cambia SOLO el bloque "MARCA" (acento y tipografía).
3. Construye con las clases de abajo. No inventes valores nuevos:
si falta uno, se añade aquí primero.
Estructura mínima de una página:
========================================================================== */
:root {
/* ---------------------------------------------------------- MARCA */
/* Lo único que cambia de un proyecto a otro. */
--mc-acento: #1f7480; /* acción. Debe dar ≥ 4.5:1 con blanco */
--mc-acento-hover: #237d89;
--mc-fuente: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* ---------------------------------------------------------- TINTA */
--mc-tinta: #161514;
--mc-texto-2: rgba(22, 21, 20, .72); /* cuerpo, bajadas */
--mc-texto-3: rgba(22, 21, 20, .62); /* notas. Nunca menos */
--mc-filete: rgba(22, 21, 20, .12); /* líneas separadoras */
--mc-suelo: #eef3f1; /* el "piso" del mundo */
/* ------------------------------------------------------ ATMÓSFERA */
/* El amanecer: cielo arriba, horizonte cálido, suelo claro. */
--mc-cielo-1: #cfe5ef;
--mc-cielo-2: #e2edf0;
--mc-horizonte: #f6e2cc;
--mc-bruma: #f2eee6;
--mc-sol: rgba(255, 243, 219, .95);
--mc-linea-horizonte: rgba(255, 236, 210, .85);
/* La aurora: halos que el cristal deja pasar. Nunca texto ni botones. */
--mc-halo-menta: rgba(159, 220, 175, .70);
--mc-halo-agua: rgba(78, 203, 217, .62);
--mc-halo-durazno: rgba(240, 168, 112, .50);
--mc-halo-cielo: rgba(168, 214, 236, .70);
--mc-alto-amanecer: 760px; /* escritorio: 900px */
--mc-halo-ancho: 420px; /* escritorio: 760px */
--mc-halo-alto: 380px; /* escritorio: 560px */
--mc-luz-radio: 240px; /* escritorio: 420px */
/* ------------------------------------------- ESPACIO · FIBONACCI */
/* No existe ningún otro valor. Si algo pide 16, es 13 o 21. */
--mc-e1: 5px; --mc-e2: 8px; --mc-e3: 13px; --mc-e4: 21px;
--mc-e5: 34px; --mc-e6: 55px; --mc-e7: 89px; --mc-e8: 144px;
--mc-margen: clamp(21px, 5vw, 89px);
--mc-aire: clamp(55px, 7vw, 89px); /* entre secciones */
--mc-ancho: 1200px;
/* ---------------------------------------------- FORMA · CONCÉNTRICA */
/* Radio exterior = interior + relleno: 13 + 8 = 21 · 21 + 13 = 34. */
--mc-r-campo: 13px;
--mc-r-pieza: 21px;
--mc-r-panel: 34px;
--mc-r-pildora: 999px;
/* ------------------------------------------------------ MOVIMIENTO */
--mc-curva-entrada: cubic-bezier(.22, .7, .2, 1); /* lo que aparece */
--mc-curva-layout: cubic-bezier(.32, .72, 0, 1); /* lo que cambia */
--mc-toque: 48px;
}
/* ============================================================ EL MUNDO */
.mc-mundo {
position: relative;
overflow: hidden;
overflow: clip; /* recorta igual, pero sin volverse "caja de desplazamiento": así lo fijo (sticky) se fija a la pantalla */
/* El orden de los halos (izquierda, derecha, izquierda, derecha): cada página puede
reordenarlos redefiniendo estas cuatro, en la misma regla que sus colores. */
--mc-halo-1: var(--mc-halo-menta);
--mc-halo-2: var(--mc-halo-agua);
--mc-halo-3: var(--mc-halo-durazno);
--mc-halo-4: var(--mc-halo-cielo);
/* Profundidad: cuánto se rezagan los halos al bajar (0 = quietos; ver más abajo). */
--mc-deriva: 0px;
background: var(--mc-suelo);
color: var(--mc-tinta);
font-family: var(--mc-fuente);
-webkit-font-smoothing: antialiased;
}
.mc-amanecer, .mc-sol, .mc-aurora, .mc-luz { position: absolute; pointer-events: none; }
.mc-amanecer {
left: 0; right: 0; top: 0; height: var(--mc-alto-amanecer);
background: linear-gradient(180deg,
var(--mc-cielo-1) 0%, var(--mc-cielo-2) 32%, var(--mc-horizonte) 62%,
var(--mc-bruma) 70%, var(--mc-suelo) 100%);
}
.mc-sol {
left: 0; right: 0; top: 0; height: var(--mc-alto-amanecer);
background:
radial-gradient(300px 260px at 16% 25%, var(--mc-sol), transparent 70%),
radial-gradient(130% 70px at 50% 68.4%, var(--mc-linea-horizonte), transparent 75%);
}
/* Halos alternando lados: menta → agua → durazno → cielo, y se repite solo.
Las posiciones y el alto del mosaico se calculan del tamaño del halo, para
que NINGÚN halo toque el borde de su casilla: si lo toca, se corta en una
línea recta (el error de la v1). Al final del mundo la aurora se desvanece. */
.mc-aurora {
--mc-paso: var(--mc-halo-alto);
left: 0; right: 0; top: var(--mc-alto-amanecer); bottom: 0;
background-image:
radial-gradient(var(--mc-halo-ancho) var(--mc-halo-alto) at 0% calc(var(--mc-halo-alto) * .7), var(--mc-halo-1), transparent 65%),
radial-gradient(var(--mc-halo-ancho) var(--mc-halo-alto) at 100% calc(var(--mc-halo-alto) * .7 + var(--mc-paso)), var(--mc-halo-2), transparent 65%),
radial-gradient(var(--mc-halo-ancho) var(--mc-halo-alto) at 0% calc(var(--mc-halo-alto) * .7 + var(--mc-paso) * 2), var(--mc-halo-3), transparent 65%),
radial-gradient(var(--mc-halo-ancho) var(--mc-halo-alto) at 100% calc(var(--mc-halo-alto) * .7 + var(--mc-paso) * 3), var(--mc-halo-4), transparent 65%);
background-size: 100% calc(var(--mc-halo-alto) * 1.4 + var(--mc-paso) * 3);
background-repeat: repeat-y;
/* Se desvanece antes de su borde inferior justo lo que va a bajar en esta página
(--mc-deriva-fin, lo mide el JS): al final queda desvanecida contra el pie, nunca cortada. */
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 360px - var(--mc-deriva-fin, 0px)), transparent calc(100% - var(--mc-deriva-fin, 0px)));
mask-image: linear-gradient(180deg, #000 calc(100% - 360px - var(--mc-deriva-fin, 0px)), transparent calc(100% - var(--mc-deriva-fin, 0px)));
}
/* La profundidad al bajar: los halos se rezagan un poco, como si estuvieran más lejos.
Solo con ratón (en celular se quedan quietos: batería y fluidez) y solo si no se pidió
menos movimiento. materia-clara.js los desplaza con transform, nunca solos. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.mc-mundo { --mc-deriva: 610px; }
.mc-aurora { will-change: transform; }
}
/* La luz que te sigue: un círculo que se DESPLAZA (transform), no un degradado
que se repinta. Así solo se mueve una capa y la página no se repinta entera
en cada movimiento del ratón. materia-clara.js mueve --mc-luz-x / --mc-luz-y. */
.mc-luz {
left: 0; top: 0;
width: calc(var(--mc-luz-radio) * 2); height: calc(var(--mc-luz-radio) * 2);
border-radius: 50%;
background: radial-gradient(closest-side, rgba(255, 255, 255, .50), transparent 70%);
transform: translate3d(calc(var(--mc-luz-x, 280px) - var(--mc-luz-radio)), calc(var(--mc-luz-y, 200px) - var(--mc-luz-radio)), 0);
will-change: transform;
}
.mc-contenido { position: relative; }
.mc-ancho { width: 100%; max-width: var(--mc-ancho); margin: 0 auto; padding: 0 var(--mc-margen); box-sizing: border-box; }
/* ========================================================= MATERIALES */
/* Cristal con grosor. El fondo deja pasar más luz hacia abajo (74 → 42 → 16 %):
así la pieza toma el color de lo que tiene detrás. La luz NO se pinta. */
.mc-vidrio {
border-radius: var(--mc-r-pieza);
background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.42) 55%, rgba(255,255,255,.16) 100%);
-webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.04);
backdrop-filter: blur(30px) saturate(200%) brightness(1.04);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.55), /* canto */
inset 0 1px 0 #fff, /* filo de luz arriba */
inset 0 -1px 0 rgba(255,255,255,.65), /* grosor abajo */
0 1px 1px -.5px rgba(22,21,20,.06), /* sombras en capas … */
0 6px 6px -3px rgba(22,21,20,.05),
0 24px 24px -12px rgba(22,21,20,.05),
0 34px 70px -44px rgba(22,21,20,.34); /* … y la difusa larga */
}
.mc-vidrio--grande { border-radius: var(--mc-r-panel); }
/* Vidrio que se desliza (carruseles, carriles): sin desenfoque. Sobre un fondo
liso el desenfoque no se ve, y recalcularlo en cada cuadro traba el arrastre.
La transparencia que se aclara hacia abajo se conserva: sigue tomando color. */
.mc-vidrio--movil { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Cristal ligero: chips, botones secundarios, piezas pequeñas. */
.mc-ligero {
background: rgba(255,255,255,.50);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff, 0 1px 2px rgba(22,21,20,.05);
}
/* Barra flotante (cabecera). Más transparente: deja ver el cielo. */
.mc-barra {
border-radius: var(--mc-r-pildora);
background: rgba(255,255,255,.40);
-webkit-backdrop-filter: blur(30px) saturate(180%);
backdrop-filter: blur(30px) saturate(180%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.95), 0 13px 34px -21px rgba(22,21,20,.25);
}
/* Vitrina: TODA foto de producto va aquí. Funciona con cualquier foto,
tenga o no fondo transparente. Nunca sombras falsas bajo un recorte. */
.mc-vitrina {
border-radius: var(--mc-r-pieza);
background: #fff;
display: grid; place-items: center; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(22,21,20,.06);
}
.mc-vitrina--chica { border-radius: var(--mc-r-campo); aspect-ratio: 1; }
/* Con imán (mc-iman.js) el movimiento lo lleva el resorte de JS: el tema padre pone `transition: all` a los enlaces y eso lo frenaría. */
.mc-vitrina[data-mc-iman] { transition: none; }
.mc-vitrina img { width: 80%; height: 80%; object-fit: contain; }
/* ========================================================= TIPOGRAFÍA */
.mc-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mc-display { margin: 0; font-size: clamp(38px, 1.6rem + 2.6vw, 64px); font-weight: 700; line-height: 1.03; letter-spacing: -.045em; text-wrap: balance; }
.mc-h2 { margin: 0; font-size: clamp(22px, 1rem + 1.2vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.032em; text-wrap: balance; }
.mc-h3 { margin: 0; font-size: clamp(26px, 1.2rem + 1vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.mc-lede { margin: 0; font-size: clamp(16px, .9rem + .35vw, 19px); line-height: 1.55; color: var(--mc-texto-2); text-wrap: pretty; }
.mc-texto { margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.mc-nota { font-size: 13px; color: var(--mc-texto-3); }
.mc-precio { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* La oferta es una línea tranquila junto a la acción, nunca una caja. */
.mc-oferta { font-size: 13px; font-weight: 600; color: rgba(22,21,20,.66); }
.mc-oferta b { color: var(--mc-acento); font-weight: 600; }
/* ========================================================= INTERACCIÓN */
.mc-boton {
min-height: var(--mc-toque); padding: 0 var(--mc-e5);
display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-e2);
border: 0; border-radius: var(--mc-r-pildora); cursor: pointer; text-decoration: none;
font: 600 15px/1 var(--mc-fuente); letter-spacing: -.01em; color: var(--mc-tinta);
transition: transform .16s ease-out, background .16s ease, box-shadow .16s ease;
}
.mc-boton:active, .mc-pulsa:active { transform: scale(.96); }
.mc-pulsa { transition: transform .16s ease-out; }
/* Principal: uno por pantalla. */
.mc-boton--principal { background: var(--mc-acento); color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 13px 26px -13px color-mix(in oklab, var(--mc-acento) 70%, transparent); }
.mc-boton--principal:hover { background: var(--mc-acento-hover); }
.mc-boton--contorno { background: transparent; box-shadow: inset 0 0 0 1px rgba(22,21,20,.22); }
.mc-boton--contorno:hover { box-shadow: inset 0 0 0 1px rgba(22,21,20,.42); }
.mc-icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--mc-r-pildora); color: inherit; }
.mc-chip { flex: none; padding: var(--mc-e3) var(--mc-e4); border-radius: var(--mc-r-pildora); font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; }
/* Pregunta frecuente: filetes y aire, sin caja. */
.mc-fila {
min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: var(--mc-e3);
border-top: 1px solid var(--mc-filete); font-size: 15px; font-weight: 600; color: inherit; text-decoration: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid color-mix(in oklab, var(--mc-acento) 40%, transparent);
outline-offset: 2px;
}
/* Texto solo para lectores de pantalla (p. ej. la etiqueta de un selector). */
.mc-oculto-visual {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ============================================================ RESPALDOS */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.mc-vidrio, .mc-ligero, .mc-barra { background: rgba(255,255,255,.88); }
}
/* Motores tipo Chrome (Chrome, Edge, Opera, Brave, Android): su cristal toma menos color de lo
que hay detrás que el de Safari. Solo para ellos —la clase .mc-cromo la pone un script en el
únicamente si existe navigator.userAgentData, que Safari (y todo navegador en iPhone) no
tiene—: un poco más de saturación y un blanco un poco más ligero. Safari no se toca. */
.mc-cromo .mc-vidrio {
background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.36) 55%, rgba(255,255,255,.12) 100%);
-webkit-backdrop-filter: blur(30px) saturate(250%) brightness(1.04);
backdrop-filter: blur(30px) saturate(250%) brightness(1.04);
}
.mc-cromo .mc-ligero { background: rgba(255,255,255,.44); -webkit-backdrop-filter: blur(16px) saturate(220%); backdrop-filter: blur(16px) saturate(220%); }
.mc-cromo .mc-barra { background: rgba(255,255,255,.34); -webkit-backdrop-filter: blur(30px) saturate(220%); backdrop-filter: blur(30px) saturate(220%); }
/* "Reducir transparencia" del sistema: NO se aplica. Decisión de la dueña: el cristal se ve igual
que en Safari (que tampoco lo aplica) en todos los navegadores. */
@media (prefers-reduced-motion: reduce) {
.mc-luz { display: none; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ============================================================== CANTO Y BRILLO
Dos piezas reutilizables (ronda 5). Se suman a un elemento con su propia clase; no cambian ninguna
regla de arriba.
.mc-canto Un filo de luz en diagonal: brilla arriba a la derecha y abajo a la izquierda y se apaga
en las otras dos esquinas. Va en ::before, recortado a anillo de 1 px. Donde se usa, la
luz la da el canto y no un borde parejo (en la portada se bajan el anillo blanco y el
filo de arriba de la sombra; ver eb-inicio.css).
.mc-brillo Una luz difusa que nace donde está el cursor o el dedo (::after, por debajo del contenido).
Invisible en reposo; con :hover, :focus-visible, :active (y .mc-tocado, que pone el toque
en mc-iman.js) sube en ~.35 s, el canto se aviva y aparece un halo jade muy tenue.
mc-iman.js escribe --mc-bx/--mc-by (en %). Solo responde a la persona: nada brilla solo.
Versión jade (sobre el botón principal): .mc-canto--jade + .mc-brillo--jade, la luz más tenue.
Usan ::before y ::after: si un elemento ya los necesita, que lleve un interno. */
.mc-canto { position: relative; }
.mc-canto::before {
content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; z-index: 1;
background: linear-gradient(225deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 18%, transparent 40%, transparent 60%, rgba(255,255,255,.35) 82%, rgba(255,255,255,.85) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: .9; transition: opacity .35s var(--mc-curva-entrada);
}
.mc-canto--jade::before { opacity: .55; }
.mc-brillo { isolation: isolate; }
.mc-brillo::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
background: radial-gradient(farthest-side at var(--mc-bx, 50%) var(--mc-by, 50%), rgba(255,255,255,.5), rgba(255,255,255,.14) 45%, transparent 75%);
box-shadow: 0 0 22px -6px rgba(31,138,114,.20), 0 10px 24px -14px rgba(31,138,114,.28);
transition: opacity .35s var(--mc-curva-entrada);
}
.mc-brillo--jade::after {
background: radial-gradient(farthest-side at var(--mc-bx, 50%) var(--mc-by, 50%), rgba(255,255,255,.3), rgba(255,255,255,.08) 45%, transparent 75%);
box-shadow: 0 0 22px -6px rgba(31,116,128,.30), 0 10px 24px -14px rgba(31,116,128,.40);
}
.mc-brillo:hover::after, .mc-brillo:focus-visible::after, .mc-brillo:active::after, .mc-brillo.mc-tocado::after { opacity: 1; }
.mc-brillo.mc-canto:hover::before, .mc-brillo.mc-canto:focus-visible::before, .mc-brillo.mc-canto:active::before, .mc-brillo.mc-canto.mc-tocado::before { opacity: 1; }
.mc-brillo.mc-canto--jade:hover::before, .mc-brillo.mc-canto--jade:focus-visible::before, .mc-brillo.mc-canto--jade:active::before, .mc-brillo.mc-canto--jade.mc-tocado::before { opacity: .8; }
/* .mc-halo (ronda 6): el halo jade del brillo, sin luz que siga al cursor. Para piezas que solo deben
elevarse y tomar un brillo sutil de su propio color (p. ej. el botón principal). Usa ::after. */
.mc-halo { isolation: isolate; }
.mc-halo::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
box-shadow: 0 0 22px -6px rgba(31,116,128,.30), 0 10px 24px -14px rgba(31,116,128,.40);
transition: opacity .35s var(--mc-curva-entrada);
}
.mc-halo:hover::after, .mc-halo:focus-visible::after, .mc-halo:active::after { opacity: 1; }
.mc-halo.mc-canto--jade:hover::before, .mc-halo.mc-canto--jade:focus-visible::before, .mc-halo.mc-canto--jade:active::before { opacity: .8; }
/* ==========================================================================
SISTEMA · VIDRIO LÍQUIDO (ronda 9)
Todo lo de aquí abajo es reutilizable y está documentado en pulido/SISTEMA-VIDRIO-LIQUIDO.md.
Regla de oro: solo transform y opacity; con "reducir movimiento" todo cambia directo (ver el
bloque de prefers-reduced-motion de arriba y el JS, que no sigue ni anima). Las clases de este
bloque se SUMAN a las de arriba: ninguna cambia cómo se ve el sitio donde no se usan.
========================================================================== */
/* 1 · CRISTAL ÚNICO ----------------------------------------------------------
La receta: .mc-vidrio (desenfoque 30 px, degradado 74→16 %) + .mc-canto (el filo da la luz) + .mc-cristal
(marco chico de 8 px) + un panel blanco .mc-cristal-panel con la imagen o el contenido + un pie breve.
Con canto, la sombra pierde el anillo blanco parejo y el filo de arriba: la luz la da el canto. */
.mc-vidrio.mc-canto {
box-shadow: 0 1px 1px -.5px rgba(22,21,20,.06), 0 6px 6px -3px rgba(22,21,20,.05),
0 24px 24px -12px rgba(22,21,20,.05), 0 34px 70px -44px rgba(22,21,20,.34);
}
.mc-ligero.mc-canto { box-shadow: 0 1px 2px rgba(22,21,20,.05); }
.mc-boton--principal.mc-canto { box-shadow: 0 13px 26px -13px color-mix(in oklab, var(--mc-acento) 70%, transparent); }
.mc-cristal { display: flex; flex-direction: column; gap: var(--mc-e2); padding: var(--mc-e2); border-radius: var(--mc-r-pieza); }
/* El panel blanco: se combina con .mc-vitrina. La imagen queda centrada con el mismo aire en los cuatro lados. */
.mc-cristal-panel { position: relative; border-radius: var(--mc-r-campo); }
.mc-cristal-panel > img { position: absolute; inset: 0; margin: auto; width: 80%; height: 80%; object-fit: contain; }
/* Flotante: la sombra en capas de una pieza que se despega de la página (contacto, cuerpo, ambiente y lejana). */
.mc-vidrio.mc-canto.mc-flotante {
box-shadow: 0 2px 3px rgba(22,21,20,.10), 0 10px 14px -4px rgba(22,21,20,.12), 0 26px 34px -12px rgba(22,21,20,.20), 0 52px 70px -28px rgba(22,21,20,.38);
}
/* Carril que se desliza (--movil, sin desenfoque): con ratón y desde 1024 px recupera el desenfoque del cristal único. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
.mc-vidrio--movil.mc-vidrio--pc { -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.04); backdrop-filter: blur(30px) saturate(200%) brightness(1.04); }
.mc-cromo .mc-vidrio--movil.mc-vidrio--pc { -webkit-backdrop-filter: blur(30px) saturate(250%) brightness(1.04); backdrop-filter: blur(30px) saturate(250%) brightness(1.04); }
}
/* 2 · LUZ SUTIL SOBRE JADE -----------------------------------------------------
.mc-brillo--sutil: para botones principales. Una luz pequeña y de muy baja opacidad (.21) bajo el cursor, del mismo
color del botón aclarado hacia blanco (no blanco puro), más un halo tenue. El botón no cambia de color. */
.mc-brillo--sutil::after {
background: radial-gradient(56px 56px at var(--mc-bx, 50%) var(--mc-by, 50%), rgba(154,192,198,.21), transparent 100%);
box-shadow: 0 0 22px -6px rgba(31,116,128,.21), 0 10px 24px -14px rgba(31,116,128,.28);
}
/* 3 · "+" ACTIVO JADE (como el interruptor activo del Centro de control) ------------
.mc-activo-jade, sobre un botón redondo con .mc-brillo: al pasar, enfocar o presionar el círculo se llena de un
jade luminoso (#3cb895 → #1f8a72, el tono de su luz y su halo) y el ícono se vuelve blanco. El relleno es la
capa ::after del brillo (opacidad y escala). Las líneas con .mc-mundo .mc-tarjeta-pie solo vencen las reglas
!important del "+" de las tarjetas (compat); el resto de los botones usa la regla corta. */
.mc-activo-jade.mc-brillo::after,
.mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo::after {
background: radial-gradient(farthest-side at var(--mc-bx, 50%) var(--mc-by, 50%), rgba(255,255,255,.32), transparent 75%), linear-gradient(180deg, #3cb895 0%, #1f8a72 100%);
box-shadow: 0 0 10px -5px rgba(31,138,114,.18), 0 4px 10px -7px rgba(31,138,114,.24);
transform: scale(.82); transition: opacity .2s ease, transform .26s var(--mc-curva-entrada);
}
.mc-activo-jade.mc-brillo:hover::after, .mc-activo-jade.mc-brillo:focus-visible::after, .mc-activo-jade.mc-brillo:active::after,
.mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo:hover::after, .mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo:focus-visible::after, .mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo:active::after { transform: scale(1); } /* el relleno llena el círculo completo (sin aro) */
.mc-activo-jade.mc-brillo:hover, .mc-activo-jade.mc-brillo:focus-visible, .mc-activo-jade.mc-brillo:active,
.mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo:hover, .mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo:focus-visible, .mc-mundo .mc-tarjeta-pie a.mc-icono.mc-activo-jade.mc-brillo:active { color: #fff !important; }
/* compat con el "+" de las tarjetas: mismo reposo y misma luz jade al pasar, sin el anillo blanco parejo (el canto pone la luz) */
.mc-mundo .mc-tarjeta-pie a.mc-icono.mc-canto { box-shadow: 0 0 0 1px rgba(20,36,34,.05), 0 1px 2px rgba(20,36,34,.06), 0 3px 8px -4px rgba(20,36,34,.12) !important; }
.mc-mundo .mc-tarjeta-pie a.mc-icono.mc-canto:hover, .mc-mundo .mc-tarjeta-pie a.mc-icono.mc-canto:focus-visible {
box-shadow: inset 0 -10px 16px -12px rgba(31,138,114,.22), 0 2px 4px rgba(20,36,34,.06), 0 4px 8px -5px rgba(20,36,34,.08),
0 5px 10px -6px rgba(31,138,114,.20), 0 0 10px -4px rgba(31,138,114,.12) !important;
}
/* 4 · ELEVACIÓN AL ENTRAR ------------------------------------------------------
.mc-eleva: al pasar el cursor o enfocar, la pieza sube 2 px (solo transform). Se combina con el imán
(data-mc-iman="cuadro"), que usa las propiedades translate/scale y por eso no se pisa. */
.mc-eleva { transition: transform .35s var(--mc-curva-entrada); }
.mc-eleva:hover, .mc-eleva:focus-visible { transform: translateY(-2px); }
/* 5 · BOTÓN REDONDO ------------------------------------------------------------------
.mc-icono.mc-redondo: botón redondo sin borde (flechas ‹ ›). .mc-redondo--profundo: 52 px, más blanco, con canto marcado
(1,5 px, opacidad 1) arriba a la derecha y abajo a la izquierda y sombra en capas con un filete tenue, para que se vea
sobre fondos claros. Combínalo con .mc-ligero .mc-canto .mc-brillo y el imán "mini". */
.mc-icono.mc-redondo { border: 0; padding: 0; cursor: pointer; color: var(--mc-tinta); }
.mc-icono.mc-redondo--profundo { width: 52px; height: 52px; background: rgba(255,255,255,.8); }
.mc-ligero.mc-canto.mc-redondo--profundo {
box-shadow: 0 0 0 1px rgba(22,21,20,.06), 0 1px 1px rgba(22,21,20,.08), 0 6px 9px -3px rgba(22,21,20,.12), 0 16px 24px -8px rgba(22,21,20,.20);
}
.mc-redondo--profundo.mc-canto::before { padding: 1.5px; opacity: 1; }
/* 6 · CUERPO DE CRISTAL ---------------------------------------------------------------
.mc-cristal-cuerpo: el relleno de una pieza de cristal con contenido directo (testimonio, ruleta, membresía): 34 px a los
lados y arriba, 21 px abajo, radio 21. Con .mc-vidrio .mc-canto .mc-flotante es la receta del cristal de testimonio. */
.mc-cristal-cuerpo { padding: var(--mc-e5) var(--mc-e5) var(--mc-e4); border-radius: var(--mc-r-pieza); }
/* 7 · GIRO POR RECARGA ------------------------------------------------------------
Lo que "rota en cada recarga" se imprime completo en el HTML y un script en línea, justo después, elige uno al azar
ANTES de pintar (marca los demás con .mc-giro-no). Sin JS se ve el primero. Funciona con caché y nada se mueve solo. */
.mc-giro-no { display: none !important; }
/* 8 · FLOTA (paralaje) y 9 · CAMBIO DE ESQUINA ----------------------------------------
.mc-flota: la pieza se desplaza apenas (máx. 8 px) con el scroll y el cursor (JS: [data-mc-flota] escribe --mc-par-x/y).
.mc-oculta (con .mc-flota): salida/entrada de ~180 ms (escala .92 + opacidad 0).
.mc-esquina + .mc-esq-0…3: una pieza absoluta sobre la orilla de una foto que cambia de esquina en cada giro
(abajo-izq., arriba-der., abajo-der., arriba-izq.; en celular solo abajo) con su inclinación: -3°, 2°, -2°, 3°.
El padre debe ser position: relative y la pieza lleva su ancho y alto. */
.mc-flota { transform: translate3d(var(--mc-par-x, 0px), var(--mc-par-y, 0px), 0) scale(1); transition: transform .18s ease-out, opacity .18s ease; }
.mc-flota.mc-oculta { opacity: 0; transform: translate3d(var(--mc-par-x, 0px), var(--mc-par-y, 0px), 0) scale(.92); }
.mc-esquina { position: absolute; z-index: 2; --mc-ox: var(--mc-e3); --mc-oy: calc(-1 * var(--mc-e4)); --mc-giro: -3deg; rotate: var(--mc-giro); }
.mc-esquina.mc-esq-0 { left: var(--mc-ox); bottom: var(--mc-oy); --mc-giro: -3deg; }
.mc-esquina.mc-esq-1 { right: var(--mc-ox); bottom: var(--mc-oy); --mc-giro: 2deg; }
.mc-esquina.mc-esq-2 { left: var(--mc-ox); bottom: var(--mc-oy); --mc-giro: -2deg; }
.mc-esquina.mc-esq-3 { right: var(--mc-ox); bottom: var(--mc-oy); --mc-giro: 3deg; }
@media (min-width: 1024px) {
.mc-esquina { --mc-ox: calc(-1 * var(--mc-e5)); }
.mc-esquina.mc-esq-1 { left: auto; bottom: auto; right: var(--mc-ox); top: var(--mc-oy); }
.mc-esquina.mc-esq-2 { left: auto; right: var(--mc-ox); bottom: var(--mc-oy); }
.mc-esquina.mc-esq-3 { right: auto; bottom: auto; left: var(--mc-ox); top: var(--mc-oy); }
}
/* 10 · ENTRADA CON ÁNGULO ---------------------------------------------------------
.mc-entra-lado en piezas hermanas que se turnan (testimonios): cada una con su ángulo propio muy sutil
(-1.5°, 1°, -0.5°, 1.5°). Al cambiar, la que sale se va hacia el lado contrario con fundido (.mc-oculta y --mc-dx) y la
nueva entra "jalada" desde el lado de la flecha. */
.mc-entra-lado { rotate: var(--mc-ang, 0deg); transform: translate3d(0, 0, 0); transition: transform .22s var(--mc-curva-entrada), opacity .2s ease; }
.mc-entra-lado:nth-child(4n + 1) { --mc-ang: -1.5deg; }
.mc-entra-lado:nth-child(4n + 2) { --mc-ang: 1deg; }
.mc-entra-lado:nth-child(4n + 3) { --mc-ang: -.5deg; }
.mc-entra-lado:nth-child(4n) { --mc-ang: 1.5deg; }
.mc-entra-lado.mc-oculta { opacity: 0; transform: translate3d(var(--mc-dx, 0px), 0, 0); }
/* 11 · FUNDIDO CORTO (cambio de una pieza por otra en el mismo lugar) */
@keyframes mc-fundido { from { opacity: 0; } to { opacity: 1; } }
.mc-fundido { animation: mc-fundido .3s var(--mc-curva-entrada) both; }
/* Google: alternativa tranquila; marca oficial sobre blanco, sin sombra ni movimiento. */
.mc-mundo .mc-google-alternativa { margin-block: 16px 24px; }
.mc-mundo .mc-google-boton {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
box-sizing: border-box; min-height: 44px; max-width: 100%; padding: 11px 12px;
border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f;
font: 500 14px/20px "EB Google Sans", Arial, sans-serif; text-decoration: none;
box-shadow: none; transform: none;
}
.mc-mundo .mc-google-boton img { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
.mc-mundo .mc-google-boton:hover { background: #f8f9fa; color: #1f1f1f; }
.mc-mundo .mc-google-boton:focus-visible { outline: 2px solid var(--mc-acento); outline-offset: 4px; }
.mc-mundo .mc-google-boton:active { transform: none; }
.mc-mundo .mc-google-alternativa [data-eb-google-estado] { display: block; margin-top: 8px; }
.mc-mundo .mc-google-enlace:not([hidden]) { display: block; width: 100%; margin-top: 8px; }
.mc-mundo .mc-google-pago { margin-bottom: 24px; }
.mc-mundo .mc-google-vincular { margin-block: 24px; }
/* Botones nativos de WooCommerce (Pagar, Cancelar, Guardar, Editar, Ver…) con la forma de Materia Clara (3-oct). */
:where(.mc-mundo) :is(a.button, button.button, input.button, a.woocommerce-button, button.woocommerce-button, button.woocommerce-Button, a.woocommerce-Button):not(.mc-boton, .mc-oculto-visual, .remove, .restore-item, .checkout-button, #place_order, .add_to_cart_button, .single_add_to_cart_button, .ajax_add_to_cart, .wc-forward) {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px !important;
border: 0 !important; border-radius: var(--mc-r-pildora) !important; background: transparent !important; color: var(--mc-tinta) !important;
box-shadow: inset 0 0 0 1px rgba(22,21,20,.22) !important; font: 600 15px/1 var(--mc-fuente) !important;
letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; cursor: pointer;
transition: box-shadow .16s ease, transform .16s ease, background .16s ease;
}
:where(.mc-mundo) :is(a.button, button.button, input.button, a.woocommerce-button, button.woocommerce-button, button.woocommerce-Button, a.woocommerce-Button):not(.mc-boton, .mc-oculto-visual, .remove, .restore-item, .checkout-button, #place_order, .add_to_cart_button, .single_add_to_cart_button, .ajax_add_to_cart, .wc-forward):hover {
box-shadow: inset 0 0 0 1px rgba(22,21,20,.42) !important; background: transparent !important; color: var(--mc-tinta) !important;
}
/* La acción principal (Pagar, Guardar cambios, Acceder…) va en jade. */
:where(.mc-mundo) :is(a.button.pay, a.woocommerce-button.pay, .button.alt, button.woocommerce-Button[type="submit"], button.button[type="submit"]):not(.mc-boton, #place_order, .single_add_to_cart_button) {
background: var(--mc-acento) !important; color: #fff !important; box-shadow: none !important;
}
:where(.mc-mundo) :is(a.button.pay, a.woocommerce-button.pay, .button.alt, button.woocommerce-Button[type="submit"], button.button[type="submit"]):not(.mc-boton, #place_order, .single_add_to_cart_button):hover { background: var(--mc-acento-hover) !important; color: #fff !important; box-shadow: none !important; }
:where(.mc-mundo) :is(a.button, button.button, a.woocommerce-button, button.woocommerce-button, button.woocommerce-Button):active { transform: scale(.96); }
/* Aviso «Mercado Pago puede tardar…» en burbuja de cristal y aire entre bloques del pedido (3-oct). */
.eb-pago-tarda {
display: block; margin: var(--mc-e4) 0 var(--mc-e3) !important; padding: 12px 18px; border-radius: var(--mc-r-pieza);
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.6));
-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 10px 26px -18px rgba(22,21,20,.4);
font-size: 14px; line-height: 1.5; color: var(--mc-texto-2); overflow-wrap: anywhere;
}
.eb-pasos + .eb-cancelacion, .eb-pago-tarda + .eb-cancelacion { margin-top: var(--mc-e3) !important; }
.eb-cancelacion { margin-bottom: var(--mc-e5) !important; }
.eb-pasos { margin-bottom: var(--mc-e3) !important; }
/* E55 · Cuenta verificada y acceso por correo. */
.mc-cuenta-terminar { max-width: 36rem; margin: 2rem auto; padding: var(--mc-e5, 24px); box-sizing: border-box; border-radius: 28px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(30,50,70,.08), 0 18px 40px -28px rgba(30,50,70,.35); }
.mc-cuenta-terminar h2, .mc-cuenta-terminar h3 { margin: 0 0 .5rem; font-size: 22px; line-height: 1.25; }
.woocommerce-order .mc-cuenta-terminar .mc-boton--principal { background: transparent !important; color: var(--mc-acento) !important; box-shadow: inset 0 0 0 1.5px var(--mc-acento) !important; }
.mc-cuenta-terminar input[readonly] { background: var(--mc-superficie, #f3f7f7); }
.mc-cuenta-terminar .mc-nota { display: block; margin-top: .5rem; }
.mc-acceso-magico { border-top: 1px solid rgba(31,116,128,.18); margin-top: 1.5rem; padding-top: 1.5rem; }
.mc-acceso-magico label { display: block; margin-bottom: .5rem; }
.mc-acceso-magico input { width: 100%; margin-bottom: 1rem; }
[data-eb55-olvidar][hidden] { display: none; }
.mc-aviso-correo { margin: 0 0 1.5rem; padding: 1rem 1.25rem; }
.mc-aviso-correo p { margin: 0 0 .75rem; }
.mc-cuenta-terminar .mc-boton--principal { min-height: 52px; width: 100%; margin-top: .75rem; }
.mc-cuenta-terminar .mc-boton--contorno { width: 100%; margin-top: 1rem; }
.mc-cuenta-terminar p { overflow-wrap: anywhere; }
.mc-no-eres { display: block; margin: -.25rem 0 .75rem auto; padding: 4px 0; border: 0; background: none; color: var(--mc-acento); font: 500 14px/1.3 var(--mc-fuente); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mc-no-eres[hidden] { display: none; }
.mc-acceso-magico label { font-size: 14px; color: var(--mc-texto-2, #4a5a63); }