/* ───────── reset acotado ───────── */ *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } } body{ margin:0; background:var(--mp-papel); color:var(--mp-tinta); font-family:var(--mp-sans); font-size:var(--mp-t-base); line-height:1.66; letter-spacing:.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* nunca dejar que algo empuje la página a lo ancho */ body{ overflow-x:hidden } img,svg,video{ max-width:100%; height:auto; display:block } h1,h2,h3,h4{ font-family:var(--mp-sans); font-weight:500; line-height:1.16; letter-spacing:-.005em; margin:0; text-wrap:balance; } h1{ font-size:clamp(2rem, 6vw, var(--mp-t-titulo)) } h2{ font-size:clamp(1.5rem, 4vw, var(--mp-t-mayor)) } h3{ font-size:var(--mp-t-medio) } p{ margin:0 } /* ninguna palabra o URL larga empuja la página a lo ancho */ p, li, td, dd, h1, h2, h3, h4, figcaption{ overflow-wrap:anywhere } a{ color:inherit; text-decoration:none } a:hover{ color:var(--mp-vino) } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer } /* foco visible siempre: se navega con teclado */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--mp-vino); outline-offset:2px; } ::selection{ background:var(--mp-vino); color:var(--mp-papel) } /* ───────── utilidades tipográficas ───────── */ .mp-etq{ font-size:var(--mp-t-nav); font-weight:600; letter-spacing:var(--mp-track-etq); text-transform:uppercase; } .mp-nav{ font-size:var(--mp-t-nav); font-weight:500; letter-spacing:var(--mp-track-nav); text-transform:uppercase; } .mp-menor{ font-size:var(--mp-t-menor); color:var(--mp-tinta-2) } .mp-precio{ font-variant-numeric:tabular-nums; font-weight:600 } .mp-serif{ font-family:var(--mp-serif) } /* * `.screen-reader-text` va junto a la nuestra porque el tema NO carga las hojas de * WooCommerce —rompen la retícula propia— y esa clase viene de ahí. Sin la regla, el * texto que Woo escribe para los lectores de pantalla sale A LA VISTA: en una prenda en * oferta se leía «$159.990 El precio original era: $159.990. $118.990 El precio actual * es: $118.990». Se vio primero en las fichas dentro de una nota del blog, pero el * problema era de todo el sitio. */ .mp-solo-lectores, .screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .screen-reader-text:focus{ position:static; width:auto; height:auto; margin:0; clip:auto; white-space:normal; } .mp-saltar{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--mp-tinta); color:var(--mp-papel); padding:var(--mp-e2) var(--mp-e3); } .mp-saltar:focus{ left:0 } /* enlace de contenido heredado (contenido-heredado.php): mismo botón que usa el resto del sitio */ .mp-boton-heredado{ display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.4rem; margin-block:.5rem; background:var(--mp-tinta); color:var(--mp-papel); font-size:.8125rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; transition:background-color var(--mp-rapido) var(--mp-easing); } .mp-boton-heredado:hover{ background:var(--mp-vino); color:var(--mp-papel) } /* [mp_products] dentro de una página de texto normal: separación del párrafo anterior */ .mp-heredado-grid{ margin-top:var(--mp-e4) } /* ═══════════ TRANSICIÓN ENTRE PÁGINAS ═══════════ */ /* Al elegir otro color se va a otra ficha (cada color es un producto aparte). El navegador mantiene en pantalla la página anterior mientras carga la siguiente —se acabó el blanco de la carga— y acá se define cómo se cruzan: la que sale se va hacia la izquierda desvaneciéndose y la que entra llega desde la derecha. El cruce que trae el navegador de fábrica es un fundido tan suave que entre dos fichas casi iguales (misma modelo, mismo encuadre, sólo cambia el color del aro) no se percibe: por eso va una animación propia y no la de por defecto. */ @view-transition { navigation: auto } /* La cabecera y la franja de promos llevan nombre propio: así el navegador las trata como elementos aparte y se quedan quietas mientras el resto se desliza. */ .mp-cab{ view-transition-name:mp-cabecera } .mp-promos{ view-transition-name:mp-promos } @keyframes mp-vt-sale{ to{ opacity:0; transform:translateX(-4%) } } @keyframes mp-vt-entra{ from{ opacity:0; transform:translateX(4%) } } ::view-transition-old(root){ animation:mp-vt-sale .24s var(--mp-easing) both } ::view-transition-new(root){ animation:mp-vt-entra .36s var(--mp-easing) both } /* quien pidió menos movimiento recibe el cruce sobrio del navegador, sin desplazamiento */ @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation:none } } /* La franja de promos tiene su texto desplazándose sin parar, así que sus dos capturas —la de antes y la de después— quedan en posiciones distintas y el cruce las muestra superpuestas: se lee doble. Se muestra sólo la nueva y listo. */ ::view-transition-old(mp-promos){ animation:none; opacity:0 } ::view-transition-new(mp-promos){ animation:none; opacity:1; mix-blend-mode:normal } /* ═══════════ TEXTO LARGO DE PÁGINA ═══════════ */ /* * El reset del tema deja los `

`, `