/* Apariencia pública y vista previa del laboratorio, controladas por EnablePublicEffects. */

html[data-fx-modern="true"] {
    --fx-surface: #f0f5f8;
    --fx-ink: #073657;
    --fx-accent: #008bb4;
    --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-fx-modern="true"] .site-header {
    background: linear-gradient(115deg, #062f52, #084b76);
    border-bottom: 1px solid rgb(255 255 255 / 15%);
}

html[data-fx-modern="true"] .home-page > .home-media-carousel {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

html[data-fx-modern="true"] .home-media-carousel .media-carousel-control {
    width: 44px;
    height: 44px;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 50%;
    background: rgb(4 35 57 / 55%);
    backdrop-filter: blur(8px);
}

html[data-fx-modern="true"] .home-intro {
    position: relative;
    padding-block: 76px;
    background: radial-gradient(ellipse at 0 35%, #eaf4f8, transparent 60%);
}

html[data-fx-modern="true"] .home-copy h1 {
    color: var(--fx-ink);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

html[data-fx-modern="true"] .home-copy h1::before {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-bottom: 24px;
    background: linear-gradient(90deg, var(--fx-accent), #83cee0);
    border-radius: 2px;
}

html[data-fx-modern="true"] .home-copy p {
    font-size: 1rem;
    line-height: 1.75;
}

html[data-fx-modern="true"] :is(.home-ydins, .home-news) {
    background: var(--fx-surface);
    padding-block: 76px;
}

html[data-fx-modern="true"] .home-ydins-media {
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 22px;
    box-shadow: 0 24px 50px -28px rgb(6 45 74 / 50%);
}

html[data-fx-modern="true"] :is(.home-ydins h2, .home-news h2, .home-brands h2, .home-catalogs h2) {
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* Fondo blanco liso: la imagen de catálogos tiene fondo blanco y sobre un degradado se le veían los bordes (29/09/2026). */
html[data-fx-modern="true"] .home-catalogs {
    padding-block: 76px;
    background: var(--blanco);
}


html[data-fx-modern="true"] .home-shortcuts {
    background-image: linear-gradient(120deg, rgb(3 30 51 / 68%), rgb(5 75 106 / 56%)), url("/assets/img/fondo-accesos.jpg");
    background-attachment: scroll;
    padding-block: 64px;
}

html[data-fx-modern="true"] .home-shortcut {
    position: relative;
    overflow: hidden;
    gap: 24px;
    padding: 30px 12px;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 18px;
    background: linear-gradient(145deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%));
    transition: transform 420ms var(--fx-ease), background-color 420ms ease, border-color 420ms ease, box-shadow 420ms ease;
}

html[data-fx-modern="true"] .home-shortcut::after {
    content: "";
    position: absolute;
    inset: auto 22px 0;
    height: 3px;
    background: #71d4eb;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms var(--fx-ease);
}

html[data-fx-modern="true"] .home-shortcut::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--fx-pointer-x, 50%) var(--fx-pointer-y, 50%), rgb(120 222 244 / 24%), transparent 75%);
    opacity: 0;
    transition: opacity 350ms ease;
}

html[data-fx-modern="true"] :is(.product-tile-media, .directory-card) {
    overflow: hidden;
    border-radius: 16px;
    border-color: #dce7ee;
    box-shadow: 0 12px 30px -22px rgb(6 45 74 / 35%);
}

html[data-fx-modern="true"] .home-information {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 70px;
    background: linear-gradient(115deg, #062e50, #07577b);
}

html[data-fx-modern="true"] .home-information::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -130% -10%;
    background: repeating-radial-gradient(ellipse at 75% 50%, transparent 0 75px, rgb(129 216 236 / 12%) 76px 77px, transparent 78px 135px);
    transform: rotate(-12deg);
}

html[data-fx-modern="true"] .btn {
    position: relative;
    overflow: hidden;
    transition: transform 300ms var(--fx-ease), box-shadow 300ms ease, background-color 300ms ease;
}

html[data-fx-modern="true"] .btn-primary {
    background: linear-gradient(110deg, #075078, #063856);
    box-shadow: 0 8px 20px -12px rgb(6 45 74 / 60%);
}

html[data-fx-modern="true"][data-fx-buttons="true"] .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / 20%) 50%, transparent 75%);
    transform: translateX(-110%);
    transition: transform 650ms var(--fx-ease);
}

html[data-fx-modern="true"][data-fx-buttons="true"] .btn:is(:hover, :focus-visible)::after {
    transform: translateX(110%);
}

html[data-fx-modern="true"] .home-copy a:not(.btn) {
    transition: color 220ms ease;
}

html[data-fx-modern="true"] .home-copy a:not(.btn):hover {
    color: var(--enlace-hover);
}

/* Movimiento fotográfico durante la lectura, solo en la portada, nunca en logos. */
html[data-fx-active="true"][data-fx-hero="fade-zoom"][data-fx-reduced="false"] .home-media-carousel .media-carousel-slide[data-carousel-state="current"] :is(img:not(.media-carousel-logo)) {
    animation: fx-photo-drift 5200ms ease-out both;
    animation-play-state: paused;
}

html[data-fx-active="true"][data-fx-hero="fade-zoom"][data-fx-reduced="false"] .home-media-carousel[data-carousel-playing="true"] .media-carousel-slide[data-carousel-state="current"] img:not(.media-carousel-logo) {
    animation-play-state: running;
}

@keyframes fx-photo-drift {
    from { transform: scale(1); }
    to { transform: scale(var(--fx-hero-zoom, 1.024)); }
}

@media (hover: hover) and (pointer: fine) {
    html[data-fx-modern="true"] :is(.home-ydins-media img, .home-shortcut img) {
        transition: transform 700ms var(--fx-ease);
    }

    html[data-fx-modern="true"][data-fx-product-hover="true"] .home-ydins-media:is(:hover, :focus-visible) img {
        transform: scale(var(--fx-product-scale, 1.05));
    }

    html[data-fx-modern="true"] .home-shortcut:is(:hover, :focus-visible) {
        background-color: rgb(255 255 255 / 10%);
        border-color: #71d4eb;
        box-shadow: 0 22px 35px -18px rgb(0 0 0 / 50%);
    }

    html[data-fx-modern="true"] .home-shortcut:is(:hover, :focus-visible)::after {
        transform: scaleX(1);
    }

    html[data-fx-modern="true"] .home-shortcut:is(:hover, :focus-visible)::before {
        opacity: 1;
    }

    html[data-fx-modern="true"][data-fx-product-hover="true"] .home-shortcut:is(:hover, :focus-visible) img {
        transform: translateY(-5px) scale(var(--fx-product-scale, 1.05));
    }

}

@media (min-width: 1000px) {
    html[data-fx-modern="true"] .home-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        column-gap: clamp(32px, 4vw, 56px);
        align-items: start;
    }

    html[data-fx-modern="true"] .home-copy h1 {
        grid-column: 1;
        grid-row: 1 / 3;
        margin: 0;
    }

    html[data-fx-modern="true"] .home-copy > p {
        grid-column: 2;
        margin-bottom: 20px;
    }

    html[data-fx-modern="true"] .home-copy > p:nth-of-type(1) { grid-row: 1; }
    html[data-fx-modern="true"] .home-copy > p:nth-of-type(2) { grid-row: 2; }
    html[data-fx-modern="true"] .home-copy > p:nth-of-type(3) { grid-row: 3; margin-bottom: 0; }
    html[data-fx-modern="true"] .home-copy > .btn { grid-column: 1; grid-row: 3; justify-self: start; }
}

@media (max-width: 680px) {
    html[data-fx-modern="true"] :is(.home-intro, .home-ydins, .home-news, .home-catalogs, .home-information) {
        padding-block: 44px;
    }

    html[data-fx-modern="true"] .home-copy h1 { font-size: 1.9rem; }
    html[data-fx-modern="true"] .home-shortcut { padding: 24px 8px; }
}

/* La apariencia permanece; el movimiento respeta sistema y simulador. */
html[data-fx-reduced="true"] :is(.home-media-carousel, .home-intro, .home-ydins, .home-catalogs, .home-shortcuts, .home-information, .home-news) *,
html[data-fx-reduced="true"] .btn::after {
    animation: none !important;
    transition: none !important;
}

html[data-fx-reduced="true"] :is(.home-ydins-media img, .home-shortcut img, .home-catalogs-media) {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-fx-modern="true"]:not([data-fx-motion-override="true"]) :is(.home-ydins-media img, .home-shortcut img, .home-catalogs-media) {
        transform: none !important;
    }
}