/* =========================
   MÓVIL - NO TOCAR
   Evita espacios blancos sin romper animaciones
========================= */
@media (max-width:768px){

html,
body{
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
}

/* Gutenberg principal */
.wp-site-blocks{
    overflow-x:clip;
}

/* Evita que bloques se salgan */
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
main{
    max-width:100%;
    box-sizing:border-box;
}

/* Respeta animaciones */
[class*="slide"],
[class*="animated"],
[class*="animate"]{
    max-width:100%;
}

/* Medios */
img,
video,
iframe,
svg{
    max-width:100%;
    height:auto;
}

/* Padding móvil */
.is-layout-constrained{
    padding-left:15px !important;
    padding-right:15px !important;
}

/* Header móvil */
.header-real-full{
    width:100% !important;
    max-width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding-left:15px !important;
    padding-right:15px !important;
}

}

/* =========================
   GUTENBERG GENERAL
========================= */

.wp-site-blocks{
    max-width:100% !important;
}

/* Contenedor natural */
.is-layout-constrained{
    max-width:1280px !important;
    margin:auto !important;
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box;
}

/* Bloques amplios */
.alignwide{
    max-width:1400px !important;
}

/* Full width real */
.alignfull{
    max-width:none !important;
}

/* =========================
   HEADER PURAXL
========================= */

/* Header real */
.header-real-full{

    width:100vw !important;
    max-width:100vw !important;

    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;

    padding-left:40px !important;
    padding-right:40px !important;

    box-sizing:border-box;
}

/* Menú */
.header-real-full .wp-block-navigation{
    flex-wrap:nowrap !important;
}

body,
p,
li,
blockquote,
figcaption,
input,
textarea,
select,
button {
    font-family: 'ClearfaceStd-Regular', serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-site-title,
.wp-block-query-title {
    font-family: 'ClearfaceStd-Regular', serif !important;
}

a:not([class*="fa"]):not([class*="icon"]) {
    font-family: 'ClearfaceStd-Regular', serif !important;
}

:root {
    --wp--preset--font-family--gabarito: 'ClearfaceStd-Regular';
}

:root {
    --wp--preset--font-family--gabarito: 'ClearfaceStd-Regular';
    --wp--preset--font-family--poppins: 'ClearfaceStd-Regular';
    --wp--preset--font-family--inter: 'ClearfaceStd-Regular';
}

.wp-block-site-title,
.wp-block-site-title a {
    text-transform: none !important;
}

.baldosa-luces {
    position: relative;
    overflow: hidden;
}

.baldosa-luces::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("https://puraxl.com/wp-content/uploads/2026/06/juntas-puraxl.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;

    clip-path: inset(0 100% 0 0);

    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.8))
        drop-shadow(0 0 12px rgba(255,255,255,.7));

    pointer-events: none;
}

/* Al pasar el ratón */

.baldosa-luces:hover::after {
    opacity: 1;

    animation:
        dibujarJuntas 1.2s ease forwards,
        brilloJuntas 2s ease-in-out infinite 1.2s;
}

/* Dibuja las juntas */

@keyframes dibujarJuntas {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Brillo suave continuo */

@keyframes brilloJuntas {
    0%,100% {
        filter:
            drop-shadow(0 0 4px rgba(255,255,255,.7))
            drop-shadow(0 0 10px rgba(255,255,255,.5));
    }

    50% {
        filter:
            drop-shadow(0 0 8px rgba(255,255,255,1))
            drop-shadow(0 0 20px rgba(255,255,255,.9));
    }
}