/* =============================================================================
   YUBI MATERNITY — CAPA DE MICRO-DETALLE

   Se carga DESPUÉS de yubi-editorial.css y no la contradice: la capa editorial
   define el lenguaje (plano, sin sombras, sin elevación, esquinas rectas) y
   esta solo afina el comportamiento en los bordes — estados, foco, óptica
   tipográfica y las transiciones que faltaban.

   Regla que se hereda y se respeta: nada se mueve por su cuenta. Todo el
   movimiento de aquí responde a una acción del usuario (hover, press, foco).
   No hay entradas al hacer scroll ni animaciones al cargar.

   Para desactivarla entera: quitar el enqueue de 'yubi-polish' en functions.php.
   ============================================================================= */

/* =============================================================================
   1. TOKENS DE MOVIMIENTO
   La capa editorial usa cuatro curvas distintas puestas a mano (0.25s ease,
   0.2s ease, 0.8s y 1s cubic-bezier). La cubic-bezier(.16,1,.3,1) que ya
   emplea para las imágenes es un ease-out correcto — sale rápido y frena
   despacio, que es como se percibe la respuesta inmediata. Se promueve a
   token para que lo nuevo hable un solo idioma. Las reglas existentes NO se
   reescriben: esto solo pone el vocabulario a disposición.
   ============================================================================= */

:root {
    --yubi-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --yubi-fast: 160ms;   /* respuesta directa: color, borde, opacidad */
    --yubi-slow: 320ms;   /* recorridos con distancia: el subrayado del menú */
}

/* =============================================================================
   2. NAVEGACIÓN — UN SOLO SUBRAYADO

   El tema padre ya resuelve el subrayado del menú y lo resuelve bien:
   ecomus/style.css:4258 pinta un :after con width:0 anclado a la derecha que
   pasa a width:100% anclado a la izquierda en li:hover. La capa editorial le
   añadió encima text-decoration:underline con offset 6px, y como
   .main-navigation y .primary-navigation son EL MISMO elemento (ver
   ecomus/template-parts/header/primary-menu.php:23, que le pone las dos
   clases al contenedor), en hover se dibujaban dos líneas a alturas distintas.

   Se retira la estática y se reescribe el recorrido de la del padre, que
   transicionaba con la palabra clave por defecto (lineal) en 0.4s: lento y
   sin curva.

   El padre anima 'width' de 0 a 100%, cambiando además el anclaje de right a
   left para que la línea entre por un lado y salga por el otro. Se consigue
   el mismo gesto con scaleX sobre una línea que ya mide el ancho completo:
   width es una propiedad de maquetación y obliga al navegador a recalcular en
   cada fotograma, mientras que transform lo resuelve el compositor. La
   dirección se conserva moviendo el transform-origin en lugar del anclaje.
   ============================================================================= */

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-ancestor > a {
    text-decoration: none;
}

.primary-navigation .nav-menu > li > a:after {
    border-bottom-color: var(--yubi-charcoal);
    border-bottom-width: 1px;
    width: 100%;
    left: 0;
    right: auto;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--yubi-slow) var(--yubi-ease);
}

.primary-navigation .nav-menu > li:hover > a:after {
    width: 100%;
    transform: scaleX(1);
    transform-origin: left center;
}

/* La página en la que estás no depende del cursor: su línea se queda puesta. */
.primary-navigation .nav-menu > li.current-menu-item > a:after,
.primary-navigation .nav-menu > li.current-menu-ancestor > a:after {
    width: 100%;
    transform: scaleX(1);
    transform-origin: left center;
}

/* =============================================================================
   3. BOTONES — RESPUESTA A LA PULSACIÓN

   La capa editorial prohíbe el salto en hover, y con razón: elevar un botón
   al pasar por encima es el gesto que abarata el conjunto. Pero el press es
   lo contrario de elevar — es acusar recibo — y ahora mismo no existe: pulsar
   "Añadir al carrito" en el móvil no devuelve nada hasta que responde el
   servidor.

   Se resuelve sin transform y sin sombra, para no reintroducir por la puerta
   de atrás lo que la sección 1 de la capa editorial neutraliza. Solo color,
   un punto más oscuro que el coral del hover.

   La transición se colapsa a 0ms en :active a propósito: el dedo tiene que
   notar la respuesta ya. La vuelta al soltar sí recupera la curva.
   ============================================================================= */

.ecomus-slide__button:active,
.ecomus-slides-elementor .em-button:active,
.ecomus-banner__button:active,
.ecomus-banner .em-button:active,
.ecomus-button.em-button:not(.em-button-subtle):not(.em-button-text):not(.em-button-outline):not(.em-button-light):active,
.elementor-button:not(.elementor-button-link):active,
.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button):active,
.woocommerce a.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button):active,
.woocommerce button.button:not(.product-loop-button):active,
.woocommerce input.button:active,
.single_add_to_cart_button:active {
    background-color: #D9515C !important;  /* coral -12% de luminosidad */
    border-color: #D9515C !important;
    transition-duration: 0ms !important;
}

/* Secundario y sobre imagen: el press invierte antes de tiempo. */
.yubi-btn-outline .elementor-button:active,
.yubi-btn-outline .em-button:active,
a.yubi-btn-outline:active {
    background-color: var(--yubi-slate) !important;
    border-color: var(--yubi-slate) !important;
    color: var(--yubi-white) !important;
    transition-duration: 0ms !important;
}

.yubi-btn-light .elementor-button:active,
.yubi-btn-light .em-button:active {
    background-color: rgba(255, 255, 255, 0.88) !important;
    color: var(--yubi-charcoal) !important;
    transition-duration: 0ms !important;
}

/* =============================================================================
   4. FOCO VISIBLE POR SUPERFICIE

   yubi-editorial.css:789 define :focus-visible como 2px sólido carbón para
   todo el sitio. Sobre fondo claro funciona; sobre el botón primario —que es
   carbón— el anillo se pinta del mismo color que el botón y desaparece. Quien
   navega con teclado pierde el rastro justo en los controles que importan.

   Se conserva el carbón como norma y se invierte solo donde el fondo es
   oscuro. El offset negativo mete el anillo DENTRO del botón: por fuera se
   confundiría con el borde de 1px que ya lleva.
   ============================================================================= */

.ecomus-button.em-button:not(.em-button-subtle):not(.em-button-text):not(.em-button-outline):not(.em-button-light):focus-visible,
.elementor-button:not(.elementor-button-link):focus-visible,
.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button):focus-visible,
.woocommerce a.button:not(.em-button-subtle):not(.em-button-light):not(.em-button-icon):not(.product-loop-button):focus-visible,
.woocommerce button.button:not(.product-loop-button):focus-visible,
.woocommerce input.button:focus-visible,
.single_add_to_cart_button:focus-visible,
.yubi-announce a:focus-visible {
    outline: 2px solid var(--yubi-white);
    outline-offset: -5px;
}

/* Flotantes: son circulares y van sobre contenido variable, así que el anillo
   va por fuera y toma la forma del botón. */
.yubi-wa:focus-visible,
#gotop.em-button-go-top:focus-visible {
    outline: 2px solid var(--yubi-charcoal);
    outline-offset: 3px;
    border-radius: 50%;
}

/* =============================================================================
   5. LAS TRANSICIONES QUE FALTABAN

   Sitios donde el estado cambiaba de golpe. Ninguno gana un efecto nuevo:
   simplemente dejan de saltar.
   ============================================================================= */

/* Swatches de color (yubi-editorial.css:376 los pinta sin transición) */
.wcboost-variation-swatches__item,
.wcboost-variation-swatches--color .wcboost-variation-swatches__item {
    transition: border-color var(--yubi-fast) var(--yubi-ease);
}

/* Icono del acordeón: Elementor lo intercambia por JS, pero cuando es un
   glifo rotado la rotación sí se puede acompañar. */
.elementor-accordion .elementor-accordion-icon i,
.elementor-accordion .elementor-accordion-icon svg {
    transition: transform var(--yubi-fast) var(--yubi-ease);
}

/* Enlaces del pie y de párrafo: el subrayado aparece en vez de encenderse.
   Se declara siempre presente con el color transparente y solo se le cambia
   el color — así no hay reflow ni salto de línea base al entrar el cursor.

   Los enlaces del pie no son sueltos: viven dentro del widget de menú de
   Ecomus (ul.nav-menu.ecomus-navigation-menu__menu), que trae su propio
   'text-decoration: none' con especificidad (0,2,1). Un '.site-footer a'
   (0,1,1) pierde — comprobado en el navegador: aplicaba el offset pero no la
   línea, porque text-underline-offset no forma parte del atajo. Se añade la
   variante con el ancestro .nav-menu, que es lo mínimo para ganar sin
   recurrir a !important.

   Nota: por esa misma razón la regla '.site-footer a:hover { text-decoration:
   underline }' de yubi-editorial.css:744 nunca llegó a verse. */
.site-footer a,
.site-footer .nav-menu a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    /* El !important es la única vía: la transición del tema también lo lleva,
       así que ninguna especificidad la gana (probado hasta (0,3,5) en el
       navegador). Se conserva su 'color 0.2s' en la declaración en vez de
       borrarlo, porque el pie sí aclara el texto en hover. */
    transition: color 0.2s ease,
                text-decoration-color var(--yubi-fast) var(--yubi-ease) !important;
}

.site-footer a:hover,
.site-footer .nav-menu a:hover {
    text-decoration-color: currentColor;
}

.yubi-section p a:not(.elementor-button) {
    text-decoration-color: var(--yubi-sand);
    transition: text-decoration-color var(--yubi-fast) var(--yubi-ease);
}

.yubi-section p a:not(.elementor-button):hover {
    text-decoration-color: var(--yubi-coral);
}

/* =============================================================================
   6. ÓPTICA TIPOGRÁFICA

   Lo más barato del archivo y lo que más sensación de acabado aporta, porque
   corrige cosas que se ven mal sin que uno sepa nombrarlas.
   ============================================================================= */

/* Titulares: evita la palabra huérfana en la última línea repartiendo el
   texto en líneas de ancho parecido. Los navegadores que no lo soportan
   simplemente lo ignoran; no hay fallback que escribir. */
h1, h2, h3,
.elementor-heading-title,
.ecomus-heading__title,
.yubi-eyebrow,
.yubi-eyebrow .elementor-heading-title {
    text-wrap: balance;
}

/* Párrafos: misma idea pero sin recomponer el bloque entero — solo evita que
   la última línea quede con una sola palabra. */
p,
.elementor-widget-text-editor,
.woocommerce-product-details__short-description {
    text-wrap: pretty;
}

/* Satoshi trae la feature 'case' (comprobado en Satoshi-Variable.ttf, junto a
   case/frac/kern/liga/pnum/salt/ss01-ss04). Sube paréntesis, guiones, comas y
   signos a la altura de la caja alta. El sitio usa versalitas con interletrado
   por todas partes — eyebrows, botones, menú, títulos de tarjeta — y ahí es
   donde un guion a media altura canta.

   Nota: Satoshi NO incluye 'tnum', así que los números tabulares para alinear
   precios no son posibles con esta fuente. Se comprobó y se descartó. */
.yubi-eyebrow,
.yubi-eyebrow .elementor-heading-title,
.yubi-eyebrow .ecomus-heading__subtitle,
.yubi-announce,
.main-navigation ul.menu > li > a,
.site-footer .widget-title,
.site-footer .footer-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-title,
.product-card .product-title,
.ecomus-slide__button,
.elementor-button:not(.elementor-button-link),
.button,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button {
    font-feature-settings: "case" 1;
}

/* Texto claro sobre fondo oscuro engorda con el rasterizado por defecto de
   WebKit. Se acota a esas superficies: aplicarlo globalmente adelgaza el
   cuerpo de texto sobre blanco, que es justo lo que no se quiere. */
.yubi-announce,
.site-footer .yubi-footer--dark,
.yubi-tile__label,
.yubi-btn-light .elementor-button,
.yubi-btn-light .em-button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   7. SELECCIÓN DE TEXTO
   Una regla. El azul de sistema es lo único del sitio que no es de la marca.
   Blush de fondo con tinta carbón: 9,3:1 de contraste, legible de sobra.
   ============================================================================= */

::selection {
    background: var(--yubi-blush);
    color: var(--yubi-charcoal);
}

/* =============================================================================
   8. MOVIMIENTO REDUCIDO

   El bloque de yubi-editorial.css:799 solo cubre las imágenes que hacen zoom.
   Aquí se anula todo lo que introduce esta capa. El :active de los botones se
   deja vivo a propósito: es un cambio de color, no movimiento, y quitarlo
   dejaría otra vez sin respuesta al usuario que más necesita una.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .primary-navigation .nav-menu > li > a:after,
    .primary-navigation .nav-menu > li:hover > a:after,
    .wcboost-variation-swatches__item,
    .elementor-accordion .elementor-accordion-icon i,
    .elementor-accordion .elementor-accordion-icon svg,
    .site-footer a,
    .site-footer .nav-menu a,
    .yubi-section p a:not(.elementor-button) {
        transition: none !important;
    }
}