/* Ajustes para móvil - 02/09/2025 */

/* Reglas base */
.zones-fab{ display: none; }
.seo-readmore-wrap{ display: none; }

/* Ocultar el botón inline en escritorio (ratón/trackpad) */
@media (pointer: fine) and (min-width: 901px){
    .zones-toggle-wrap{ display: none !important; }
}
/* Botón leer más (oculto por defecto en escritorio, se muestra en móvil más abajo) */

/* Ajustes de la bandera alemana en versión móvil */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
    /* (LIMPIEZA) Reglas antiguas de <details> eliminadas: usamos botón propio */
    /* Contacto (móvil, SOLO en #contacto de los index): layout horizontal */
    #contacto .contact-cta{
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 10px 0 12px !important;
    }
    /* Botón Google Business (si existe): primero */
    #contacto .contact-cta .btn.js-gb{ order: 1; }
    /* Iconos: mantienen su orden relativo original tras el de Google */
    #contacto .contact-cta .btn:not(.js-gb){ order: 2; }
    /* Iconos redondos, sin texto visible */
    #contacto .contact-cta .btn:not(.js-gb){
        appearance: none;
        width: 44px; height: 44px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid #000; /* borde negro por defecto, como en la web */
        background: #fff;
        color: #111; /* iconos en color neutro elegante */
        display: inline-flex; align-items: center; justify-content: center; /* centrado perfecto del icono */
        gap: 0 !important; /* sin separación entre hijos */
        box-sizing: border-box; /* asegura círculo perfecto con el borde */
        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
        transition: border-color .25s, box-shadow .25s, transform .2s, color .2s;
        font-size: 0; /* oculta el texto, mantiene accesibilidad via aria-label */
        line-height: 0; overflow: hidden;
    }
    /* Ocultar cualquier hijo no-icónico para evitar descentrados (p.ej. spans/labels) */
    #contacto .contact-cta .btn:not(.js-gb) > *:not(svg):not(img){ display: none !important; }
    #contacto .contact-cta .btn:not(.js-gb):active{ transform: translateY(1px); }
    #contacto .contact-cta .btn:not(.js-gb):hover{ box-shadow: 0 6px 16px rgba(0,0,0,0.10); }
    #contacto .contact-cta .btn:not(.js-gb) svg{
        width: 20px; height: 20px; display: block; /* bloque para evitar baseline gaps */
        margin: 0; flex-shrink: 0; pointer-events: none; /* no captura eventos y no se deforma */
    }
    /* Soporte por si algún icono fuese imagen en lugar de SVG */
    #contacto .contact-cta .btn:not(.js-gb) img{
        width: 20px; height: 20px; display: block; object-fit: contain; margin: 0; pointer-events: none;
    }
    /* Efecto luminoso (reutilizado tal cual del patrón global de .btn) */
    #contacto .contact-cta .btn:not(.js-gb):hover,
    #contacto .contact-cta .btn:not(.js-gb):focus-visible,
    #contacto .contact-cta .btn:not(.js-gb):active{
        border-color: var(--gold);
        color: inherit; /* mantiene el color del icono */
    }
    #contacto .contact-cta .btn:not(.js-gb):hover::before,
    #contacto .contact-cta .btn:not(.js-gb):focus-visible::before,
    #contacto .contact-cta .btn:not(.js-gb):active::before{
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(212,175,55,0.55), 0 4px 14px -4px rgba(212,175,55,0.55);
    }
    /* Ajuste sutil del botón de Google para encajar visualmente con los iconos */
    #contacto .contact-cta .btn.js-gb{ white-space: nowrap; }
    /* Aseguramos que la bandera alemana se vea perfecta */
    .lang-flags a[lang="de"] {
    background-color: transparent !important;
    /* Igualar estructura a las demás banderas */
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    border-radius: 999px !important; /* redondo como los demás */
    }
    
    /* Ajustes de espaciado para el logo */
    header.site {
        padding-left: 0 !important;
    }
    
    /* Ajuste del grid para el header en móvil con espacio adicional */
    header .bar {
        grid-template-columns: auto 1fr auto !important;
        grid-gap: 10px !important;
        padding-left: 10px !important;
    }
    
    /* Espaciado consistente para el logo */
    .brand {
        margin-left: 10px !important;
        padding-left: 5px !important;
    }
}

/* Profesionales (ATELIER) – mostrar texto completo y encajar visualmente en móvil (estado original) */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
    /* Redes sociales (móvil): rejilla legible y CTA cómodo */
    #redes .social{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    /* Imagen algo más alta para permitir títulos/CTA cómodos */
    #redes .tile .cover{ aspect-ratio: 16 / 9 !important; }
    #redes .tile .cover img{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
    /* Texto centrado y legible */
    #redes .tile .body{ padding: 12px !important; text-align: center !important; }
    #redes .tile .body h3{ font-size: 17px !important; margin: 4px 0 6px !important; }
    #redes .tile .meta{
        font-size: 13px !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    /* CTA de ancho completo para toque cómodo */
    #redes .tile .btn{ width: 100% !important; justify-content: center !important; }
    /* Aumentar levemente el tap target del badge */
    #redes .badge-net{ width: 36px !important; height: 36px !important; }
    #redes .badge-net svg{ width: 20px !important; height: 20px !important; }

    /* Footer (móvil): todo en vertical con logo y textos centrados, luego 2 columnas (Redes | Legal) */
    footer.site .footer-content{
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* dos columnas para Redes | Legal */
        gap: 14px 16px !important;
        align-items: start !important;
    }
    /* Acercar la columna de Redes hacia el centro sin mover Legal */
    footer.site .footer-content > div:nth-of-type(2){
        justify-self: end !important; /* acerca al gutter central */
        width: max-content !important; /* evita que se estire a toda la columna */
    transform: translateX(-6px); /* pequeño ajuste hacia la izquierda */
    }
    /* Bloque superior (logo + título + dirección/contacto) ocupa todo el ancho */
    footer.site .footer-content .footer-has-logo{
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
    footer.site .footer-content .footer-has-logo .footer-logo{ width: 120px; height: 120px; object-fit: contain; }
    footer.site .footer-content .footer-has-logo .footer-txt h4{ margin: 6px 0 4px !important; }
    footer.site .footer-content .footer-has-logo .footer-txt p{ margin: 2px 0 !important; }
    /* Columnas inferiores: 2 bloques verticales bien organizados */
    footer.site .footer-content > div:not(.footer-has-logo){
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
    footer.site .footer-content > div:not(.footer-has-logo) h4{ margin: 0 0 6px !important; }
    /* Pie legal centrado */
    footer.site .legal{ text-align: center !important; margin-top: 12px !important; }
    /* Texto de tarjeta (Profesionales): clamp a 3 líneas con desvanecimiento */
    .pro-section .atelier-slide .module .sub{
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .pro-section .atelier-slide .module .sub::after{
        content: "";
        position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.96));
        pointer-events: none;
    }
    /* Expandido: sin clamp ni desvanecimiento */
    .pro-section .atelier-slide .module .sub.is-expanded{
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
    }
    .pro-section .atelier-slide .module .sub.is-expanded::after{ display:none; }

    /* Permitir que el contenedor crezca con el contenido */
    .pro-section .atelier-banner .img { overflow: visible !important; }
    .pro-section .atelier-banner .atelier-gallery {
        min-height: unset !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* En móvil, las diapositivas dejan de ser absolutas para que el alto sea el del contenido;
         seguimos mostrando solo la activa para mantener el carrusel */
    .pro-section .atelier-slide {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none !important;
        flex-direction: column;
        justify-content: space-between;
    }
    .pro-section .atelier-slide.active { display: flex !important; }

    /* Reordenar: imágenes arriba, texto debajo */
    .pro-section .atelier-slide .thumbs{ order: -1 !important; margin-bottom: 10px !important; }
    .pro-section .atelier-slide .module{ order: 1 !important; }

    /* Flechas de la galería de Atelier (paridad visual con Cobertura, móvil-only) */
    .atelier-gallery .arrow{
        width: 28px !important;
        height: 28px !important;
        border-radius: 999px !important;
        border: 2px solid var(--gold) !important;
        background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(230,196,96,0.08) 100%) !important;
        color: var(--gold) !important;
        box-shadow: 0 4px 12px rgba(212,175,55,0.18) !important;
        opacity: 1 !important;
        font-size: 16px !important;
        transform: translateY(-50%) !important; /* mantener centrado vertical */
    }
    .atelier-gallery .arrow.prev{ left: 4px !important; }
    .atelier-gallery .arrow.next{ right: 4px !important; }
    .atelier-gallery .arrow:hover,
    .atelier-gallery .arrow:focus-visible{
        transform: translateY(-50%) scale(1.06) !important;
        box-shadow: 0 6px 16px rgba(212,175,55,0.28) !important;
        background: linear-gradient(135deg, rgba(212,175,55,0.25) 0%, rgba(230,196,96,0.15) 100%) !important;
        outline: 2px solid rgba(212,175,55,0.35) !important;
        outline-offset: 2px !important;
    }

    /* Readmore para el texto de cada tarjeta (Profesionales) */
    .pro-section .pro-readmore-wrap{ display:flex; justify-content:flex-start; margin: 8px 0 2px; }
    .pro-section .pro-readmore{ appearance:none; border:1px solid rgba(0,0,0,0.15); border-radius:999px; background:#fff; color:#111; padding:8px 14px; font-size:14px; box-shadow:0 3px 10px rgba(0,0,0,0.06); transition:border-color .25s, box-shadow .25s, transform .2s; }
    .pro-section .pro-readmore:active{ transform: translateY(1px); }
    .pro-section .pro-readmore-body{ overflow:hidden; height:0; opacity:0; }
    .pro-section .pro-readmore-body.open{ opacity:1; }
    .pro-section .pro-readmore-body.animating{ transition: height .28s ease, opacity .24s ease; will-change: height, opacity; }
}

/* Móvil: mantener el comportamiento de escritorio y solo acelerar tiempos del efecto confidencial */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
    /* Acelerar animación principal de desclasificación */
    .confidential-effect .thumb.declassifying img {
        animation: declassify 1.0s forwards !important; /* desktop: 1.8s */
    }

    /* Acelerar el escáner (línea) sin cambiar su lógica */
    .confidential-effect .thumb::after {
        animation-duration: 1.2s !important; /* desktop: 2s */
    }

    /* Reducir tiempos de transición de overlays (sin forzar opacidades) */
    .confidential-effect .thumb::before { transition: opacity 0.25s ease, transform 0.25s ease !important; }
    .confidential-effect .thumb .redaction { transition: opacity 0.25s ease !important; }
    .reveal-mask { transition: opacity 0.35s ease !important; }

    /* Garantizar que al declasificar todo desaparece aunque haya otras reglas */
    .confidential-effect .thumb.declassified::before,
    .confidential-effect .thumb.declassified::after,
    .confidential-effect .thumb.declassified .redaction,
    .confidential-effect .thumb.declassified .reveal-mask,
    .confidential-effect .thumb.declassified .confidential-stamp {
        opacity: 0 !important;
        animation: none !important;
    }
}

/* Ajustes específicos para teléfonos pequeños */
@media (max-width: 640px) {
    .brand {
        max-width: 180px !important;
        margin-left: 8px !important;
    }
    
    header .bar {
        padding-left: 5px !important;
    }
    /* Redes sociales: una columna en pantallas pequeñas */
    #redes .social{ grid-template-columns: 1fr !important; }
}


/* Ajuste muy específico para pantallas muy pequeñas */
@media (max-width: 480px) {
    .brand {
        margin-left: 5px !important;
    }
    
    header .bar {
        padding-left: 3px !important;
    }
}

/* Header: alineación de logo con banderas y aumento proporcional del tamaño (solo móvil) */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1280px) {
    /* Grid móvil en dos filas (como el original), pero con columnas 1fr | max-content para alinear bordes */
    header .bar {
        display: grid !important;
        grid-template-columns: auto 1fr !important; /* logo (auto) | cta (flex) */
        grid-template-areas:
            "flags flags"
            "logo  cta" !important;
        column-gap: 0 !important; /* sin separación para alinear bordes exactos */
        row-gap: 6px !important;
        padding-left: 0 !important; /* libre del margen izquierdo */
    }

        /* El contenedor del header sin padding izquierdo (libre del margen) */
        header.site > .container.bar { padding-left: 0 !important; }

    /* Logo sin márgenes y ocupando la primera columna */
            header.site > .container.bar .brand {
        grid-area: logo !important;
        margin-left: 0 !important;
        /* Evitar cualquier recorte del logo en dispositivos táctiles grandes */
        overflow: visible !important;
        max-height: 112px !important;
        width: auto !important;
        max-width: none !important;
                justify-self: start !important; /* usa el ancho intrínseco del logo */
        align-self: end !important;
        display: block !important;
    }

    /* El logo crece proporcionalmente hasta el límite de su columna */
            header.site > .container.bar .brand img {
                width: auto !important;  /* ancho natural */
                height: auto !important; /* preservar proporción */
        max-height: 110px !important; /* límite suave para no aumentar en exceso */
        object-fit: contain !important;
        display: block !important; /* elimina baseline gaps */
        /* Separación sutil para evitar corte visual por bordes sin afectar el ancho de la columna */
        transform: translate(1px, -1px);
    }

    /* NetHub/Max (táctiles anchos): recuperar un poco de padding izquierdo para evitar que el logo quede pegado al borde */
    @media (pointer: coarse) and (min-width: 1025px) and (max-width: 1280px) {
        header.site > .container.bar { padding-left: 14px !important; }
        /* Safe area local al logo: más aire a la izquierda y abajo, compensando el borde derecho */
        header.site > .container.bar .brand {
            padding-left: 10px !important;
            padding-bottom: 6px !important;
            margin-right: -10px !important; /* mantiene el borde derecho del logo donde estaba */
            max-height: 114px !important; /* un pelín más alto para evitar sensación de corte */
        }
        header.site > .container.bar .brand img {
            transform: translate(3px, -2px) !important;
        }
    }

    /* Banderas en la segunda columna; su borde izquierdo define la alineación vertical */
                /* Banderas en la primera fila, segunda columna; su borde derecho alinea con el menú hamburguesa */
            header.site > .container.bar .lang-flags {
                grid-area: auto !important;
                grid-row: 1 !important;
                grid-column: 2 !important; /* coloca en la columna derecha */
                    position: static !important;
                    justify-self: end !important; /* alinear borde derecho con borde derecho de la columna (hamburguesa) */
                margin: 0 !important;
            }

    /* CTA en la segunda fila ocupando todo el ancho */
        header.site > .container.bar .cta {
            grid-area: cta !important;
            align-self: end !important;
            justify-self: stretch !important;
            padding-right: 0 !important;
        }
}

/* Cobertura: carrusel 1-up centrado (snap scroller) solo en móvil/tablets/NetHub */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
    /* (Reorden navlinks eliminado para evitar efectos colaterales) */
    /* Flechas del carrusel (estilo dorado y tamaño en línea con otras secciones) */
    #cobertura .carousel-arrow{
        width: 30px !important;
        height: 30px !important;
        border-radius: 999px !important;
        border: 2px solid var(--gold) !important;
        background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(230,196,96,0.08) 100%) !important;
        color: var(--gold) !important; /* chevrón dorado */
        box-shadow: 0 4px 12px rgba(212,175,55,0.22) !important;
        opacity: 1 !important;
        font-size: 18px !important;
        top: auto; /* se posiciona vía JS; sin translateY para no descentrar */
        transform: none !important;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
    }
    /* Más cerca de los márgenes laterales */
    #cobertura .carousel-arrow.prev{ left: 4px !important; }
    #cobertura .carousel-arrow.next{ right: 4px !important; }
    /* Hover/focus: reforzar dorado sin desplazar verticalmente */
    #cobertura .carousel-arrow:hover,
    #cobertura .carousel-arrow:focus-visible{
        transform: scale(1.06) !important;
        box-shadow: 0 6px 16px rgba(212,175,55,0.3) !important;
        background: linear-gradient(135deg, rgba(212,175,55,0.25) 0%, rgba(230,196,96,0.15) 100%) !important;
        outline: 2px solid rgba(212,175,55,0.35) !important;
        outline-offset: 2px !important;
    }
    /* Neutralizar el anillo decorativo por defecto para evitar doble borde */
    #cobertura .carousel-arrow::after{ display:none !important; }

    /* Contenedor principal de zonas */
    #zones-fold{
        position: relative !important;
        display: grid !important;
        grid-auto-flow: column !important;
    grid-auto-columns: 100% !important; /* cada tarjeta ocupa todo el ancho visible */
    gap: 0 !important; /* sin separación para que no asome la siguiente */
    padding: 8px 0 16px !important; /* solo padding vertical */
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-snap-stop: always !important;
    /* desplazamiento suave nativo; sin prefijo por compatibilidad */
    }

    /* Tarjetas centradas y altura automática */
    #zones-fold .tile{
        scroll-snap-align: center !important; /* centrada en el viewport, sin asomar la siguiente al ser 100% */
        height: auto !important;
        flex: 0 0 auto !important; /* neutraliza anchos previos por flex */
        box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    }

    /* Imagen con relación de aspecto estable */
    #zones-fold .cover{
        height: auto !important;
        aspect-ratio: 16 / 11 !important; /* más altura vertical para mayor presencia */
        max-height: 52vh !important; /* límite seguro para móviles altos */
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        /* Evitar fondos que puedan parecer velos/niebla */
        background: none !important;
    }
    #zones-fold .cover img{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Quitar cualquier overlay/gradiente sobre la imagen (niebla) */
    #zones-fold .cover::before,
    #zones-fold .cover::after{
        content: none !important;
        display: none !important;
        background: none !important;
        opacity: 0 !important;
    }

    /* Texto más claro y respirado */
    #zones-fold .body{ padding: 14px 16px !important; }
    #zones-fold .body h3{ font-size: 18px !important; margin: 0 0 6px !important; }
    #zones-fold .zone-info{
        font-size: 14px !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Eliminar sombras laterales que puedan percibirse como velo/niebla */
    #zones-fold::before, #zones-fold::after{
        content: none !important;
        display: none !important;
        background: none !important;
    }
}

/* Ajuste fino removido: ya usamos 100% de ancho, no se requiere sobreancho */

/* Modo expandido: ver todas las zonas en rejilla (solo móvil/tablets/NetHub) */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
    #zones-fold.is-expanded{
        display: grid !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        padding: 8px 10px 4px !important; /* padding normal sin centrado */
    }
    #zones-fold.is-expanded::before, #zones-fold.is-expanded::after{ display: none !important; }
    #zones-fold.is-expanded .tile{ scroll-snap-align: unset !important; }
    @media (max-width: 440px){
        #zones-fold.is-expanded{ grid-template-columns: 1fr !important; }
    }

    /* Botón Ver todas / Ver menos */
    .zones-toggle-wrap{ display:flex; justify-content:center; margin: 8px 0 2px; }
    .zones-toggle{
        appearance: none;
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 999px;
        background: #fff;
        color: #111;
        padding: 8px 14px;
        font-size: 14px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
        transition: border-color .25s, box-shadow .25s, transform .2s;
    }
    .zones-toggle:active{ transform: translateY(1px); }

    /* Botón flotante para reducir mientras se hace scroll en vista expandida */
    .zones-fab{
        position: absolute;
        right: 12px; bottom: 14px;
        display: none;
        z-index: 30;
        appearance: none;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 999px;
        background: #fff;
        color: #111;
        padding: 10px 14px;
        font-size: 13px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: opacity .25s ease;
    }
    body.zones-expanded .zones-fab{ display: inline-flex; }
    /* Contenedor sticky dentro de la sección Cobertura para anclar el FAB */
    .zones-fab-sticky{
        position: sticky;
        bottom: 0;
        min-height: 0; /* evita generar espacio extra */
        display: block;
        z-index: 20;
    }

    /* Cobertura: Leer más/menos en el segundo párrafo (solo móvil/tablets/NetHub) */
    #cobertura .seo-text{
        display: -webkit-box;
        -webkit-line-clamp: 3; /* muestra 3 líneas por defecto */
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        position: relative;
    }
    /* Fade sutil en la parte inferior para indicar contenido extra */
    #cobertura .seo-text::after{
        content: "";
        position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.92));
        pointer-events: none;
    }
    /* Estado expandido: mostrar todo el texto y ocultar el fade */
    #cobertura .seo-text.is-expanded{
        -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
    }
    #cobertura .seo-text.is-expanded::after{ display: none; }

    /* Botón Leer más/menos estilizado, coherente con el resto */
    .seo-readmore-wrap{ display:flex; justify-content:flex-start; margin: 8px 0 2px; }
    .seo-readmore{
        appearance: none;
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 999px;
        background: #fff;
        color: #111;
        padding: 8px 14px;
        font-size: 14px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
        transition: border-color .25s, box-shadow .25s, transform .2s;
    }
    .seo-readmore:active{ transform: translateY(1px); }
}