/*
Theme Name: Attorna Child
Theme URI: http://demo.goodlayers.com/attorna
Template: attorna
Author: Goodlayers
Author URI: http://www.goodlayers.com
Description: Attorna WordPress Theme
Tags: two-columns,left-sidebar,custom-background,custom-colors,custom-header,custom-menu,editor-style,featured-images,microformats,post-formats,sticky-post,threaded-comments,translation-ready
Version: 3.0.4.1764231942
Updated: 2025-11-27 08:25:42

*/



/* ============================================
   MEJORAS DE ACCESIBILIDAD - TEMA ATTORNA
   Ernesto Pérez Broseta
   ============================================ */

/* ============================================
   1. NAVEGACIÓN BULLET ANCHOR - VERTICAL
   ============================================ */

/* Contenedor principal - forzar disposición vertical */
.attorna-bullet-anchor {
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Enlaces individuales de navegación bullet */
.attorna-bullet-anchor-link {
    /* Tamaño mínimo táctil de 44x44px según WCAG */
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    
    /* Centrar el punto visual dentro del área táctil */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Espaciado vertical entre botones */
    margin: 6px 0 !important;
    padding: 0 !important;
    
    /* Posicionamiento y forma */
    position: relative;
    border-radius: 50%;
    float: none !important;
    
    /* Cursor y transiciones */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* El punto visual dentro del área táctil (el círculo pequeño que se ve) */
.attorna-bullet-anchor-link::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Estado activo y hover del punto */
.attorna-bullet-anchor-link:hover::before,
.attorna-bullet-anchor-link.current-menu-item::before {
    background-color: #ffffff;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Estado de focus para navegación por teclado */
.attorna-bullet-anchor-link:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 4px !important;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Estado activo al hacer clic */
.attorna-bullet-anchor-link:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

/* Asegurar posición fija si el tema lo requiere */
.attorna-bullet-anchor.attorna-fixed {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

/* ============================================
   2. SLIDERS Y CARRUSELES - CONTROLES DE NAVEGACIÓN
   ============================================ */

/* Contenedores de sliders */
.flex-viewport,
.gdlr-core-flexslider,
.flexslider {
    position: relative;
}

/* Botones de navegación (anterior/siguiente) */
.flex-direction-nav a,
.flexslider .flex-direction-nav a,
.gdlr-core-flexslider .flex-direction-nav a,
.gdlr-core-flexslider-nav .flex-direction-nav a {
    /* Tamaño mínimo táctil */
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    
    /* Centrar contenido */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Espaciado y forma */
    padding: 0 !important;
    border-radius: 50% !important;
    
    /* Fondo visible para mejor UX */
    background-color: rgba(0, 0, 0, 0.3) !important;
    
    /* Transición suave */
    transition: all 0.3s ease !important;
    
    /* Cursor */
    cursor: pointer;
}

/* Hover y focus en controles del slider */
.flex-direction-nav a:hover,
.flex-direction-nav a:focus,
.flexslider .flex-direction-nav a:hover,
.flexslider .flex-direction-nav a:focus,
.gdlr-core-flexslider .flex-direction-nav a:hover,
.gdlr-core-flexslider .flex-direction-nav a:focus {
    background-color: rgba(0, 0, 0, 0.6) !important;
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    transform: scale(1.1);
}

/* Estado activo al hacer clic */
.flex-direction-nav a:active {
    transform: scale(0.95);
}

/* ============================================
   3. PAGINACIÓN DE SLIDERS (PUNTOS INDICADORES)
   ============================================ */

/* Contenedor de puntos de paginación */
.flex-control-nav,
.flexslider .flex-control-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* Items individuales de paginación */
.flex-control-nav li,
.flexslider .flex-control-nav li {
    margin: 0 8px !important;
    padding: 0;
}

/* Enlaces de paginación */
.flex-control-nav li a,
.flexslider .flex-control-nav li a,
.gdlr-core-flexslider-control .flex-control-nav li a {
    /* Tamaño mínimo táctil */
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    
    /* Centrar el punto visual */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Forma y espaciado */
    padding: 0 !important;
    border-radius: 50%;
    
    /* Cursor y transición */
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Resetear background del tema */
    background: transparent !important;
    text-indent: 0 !important;
}

/* El punto visual dentro del área táctil de paginación */
.flex-control-nav li a::before,
.flexslider .flex-control-nav li a::before,
.gdlr-core-flexslider-control .flex-control-nav li a::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

/* Estado activo del punto de paginación */
.flex-control-nav li a.flex-active::before,
.flex-control-nav li a:hover::before,
.flex-control-nav li a:focus::before,
.flexslider .flex-control-nav li a.flex-active::before,
.flexslider .flex-control-nav li a:hover::before,
.flexslider .flex-control-nav li a:focus::before {
    background-color: #ffffff;
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Focus en puntos de paginación */
.flex-control-nav li a:focus,
.flexslider .flex-control-nav li a:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Estado activo al hacer clic */
.flex-control-nav li a:active {
    transform: scale(0.9);
}

/* ============================================
   4. TESTIMONIOS - MEJORAS ADICIONALES
   ============================================ */

/* Espaciado en testimonios para evitar toques accidentales */
.gdlr-core-testimonial {
    padding: 15px;
}

/* Asegurar que el contenido de testimonios sea legible */
.gdlr-core-testimonial-content {
    line-height: 1.6;
}

/* ============================================
   5. RESPONSIVE - DISPOSITIVOS MÓVILES
   ============================================ */

@media (max-width: 768px) {
    
    /* Aumentar tamaño de bullets en móviles */
    .attorna-bullet-anchor-link {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
        margin: 8px 0 !important;
    }
    
    /* Punto visual más grande en móviles */
    .attorna-bullet-anchor-link::before {
        width: 14px;
        height: 14px;
    }
    
    /* Controles de navegación más grandes en móviles */
    .flex-direction-nav a,
    .flexslider .flex-direction-nav a,
    .gdlr-core-flexslider .flex-direction-nav a {
        min-width: 56px !important;
        min-height: 56px !important;
        width: 56px !important;
        height: 56px !important;
    }
    
    /* Paginación más grande en móviles */
    .flex-control-nav li a,
    .flexslider .flex-control-nav li a {
        min-width: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Más espaciado en testimonios */
    .gdlr-core-testimonial {
        padding: 20px !important;
    }
    
    /* Ajustar posición del menú bullet si es fijo */
    .attorna-bullet-anchor.attorna-fixed {
        right: 15px;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .attorna-bullet-anchor-link {
        min-width: 46px !important;
        min-height: 46px !important;
        width: 46px !important;
        height: 46px !important;
    }
}

/* ============================================
   6. MEJORAS GENERALES DE INTERACTIVIDAD
   ============================================ */

/* Eliminar el tap highlight por defecto del navegador */
.attorna-bullet-anchor-link,
.flex-direction-nav a,
.flex-control-nav li a {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Asegurar que todos los elementos interactivos tengan cursor pointer */
.attorna-bullet-anchor-link,
.flex-direction-nav a,
.flex-control-nav li a,
.flexslider .flex-direction-nav a,
.flexslider .flex-control-nav li a {
    cursor: pointer !important;
}

/* ============================================
   7. ACCESIBILIDAD - ALTO CONTRASTE
   ============================================ */

/* Mejorar visibilidad en modo alto contraste */
@media (prefers-contrast: high) {
    .attorna-bullet-anchor-link::before {
        background-color: #ffffff;
        border: 2px solid #000000;
    }
    
    .attorna-bullet-anchor-link.current-menu-item::before {
        background-color: #000000;
        border: 2px solid #ffffff;
    }
    
    .flex-direction-nav a {
        background-color: rgba(0, 0, 0, 0.8) !important;
        border: 2px solid #ffffff;
    }
}

/* ============================================
   8. MODO REDUCCIÓN DE MOVIMIENTO
   ============================================ */

/* Respetar preferencias de animación reducida */
@media (prefers-reduced-motion: reduce) {
    .attorna-bullet-anchor-link,
    .attorna-bullet-anchor-link::before,
    .flex-direction-nav a,
    .flex-control-nav li a,
    .flex-control-nav li a::before {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   FIN DE CORRECCIONES DE ACCESIBILIDAD
   ============================================ */

/* ============================================
   ERROR 1: Título "Áreas de Trabajo" - Diseño moderno
   ============================================ */

/* OPCIÓN 1: Degradado sutil de fondo (RECOMENDADA) */
/*
#case-study .gdlr-core-title-item-title {
    color: #1d1d1d !important;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(255, 255, 255, 0.95) 100%) !important;
    padding: 8px 20px 10px 20px !important;
    display: inline-block !important;
    border-radius: 0px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
}
*/
/* Borde inferior decorativo dorado */
/* 
#case-study .gdlr-core-title-item-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 3px !important;
    background: #b1976b !important;
}
*/
/* OPCIÓN 2: Sin fondo, texto negro con contorno blanco fino */
/*
#case-study .gdlr-core-title-item-title {
    color: #000000 !important;
    background: transparent !important;
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 1),
        0 0 12px rgba(255, 255, 255, 0.9),
        2px 2px 3px rgba(255, 255, 255, 0.8) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}
*/

/* OPCIÓN 3: Fondo blanco con blur (efecto glass) */

#case-study .gdlr-core-title-item-title {
    color: #1d1d1d !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 10px 25px 12px 25px !important;
    display: inline-block !important;
    border-radius: 8px !important;
    border: 1px solid rgba(177, 151, 107, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}


/* OPCIÓN 4: Fondo minimalista con línea lateral */
/*
#case-study .gdlr-core-title-item-title {
    color: #000000 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    padding: 12px 25px 12px 30px !important;
    display: inline-block !important;
    border-radius: 0px !important;
    border-left: 4px solid #b1976b !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06) !important;
}
*/


/* ============================================
   ERROR 2: Sección "Información y Contacto"
   ============================================ */

/* Contenedor con fondo gris claro */
#gdlr-core-column-8 .gdlr-core-pbf-column-content {
    background-color: #e6e6e6 !important;
    padding: 30px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Título "Información y Contacto" */
#gdlr-core-column-8 h3.gdlr-core-title-item-title {
    color: #1d1d1d !important;
    background-color: transparent !important;
}

/* Teléfono en dorado - oscurecer para mejor contraste */
#gdlr-core-column-8 .gdlr-core-text-box-item-content {
    color: #7a6139 !important; /* Era #b1976b - oscurecido */
    font-weight: 600 !important;
}

/* Iconos en dorado - oscurecer */
#gdlr-core-column-8 .gdlr-core-icon-list-icon {
    color: #7a6139 !important; /* Era #b1976b - oscurecido */
}

/* Texto de contacto (email, horario, dirección) - oscurecer */
#gdlr-core-column-8 .gdlr-core-icon-list-content {
    color: #3d3d3d !important; /* Era #6c6c6c - oscurecido más */
    font-weight: 500 !important;
}

/* Línea divisoria decorativa - oscurecer */
#gdlr-core-column-8 .gdlr-core-divider-line {
    border-color: #7a6139 !important; /* Era #9f8862 - oscurecido */
}

/* Opcional: Añadir borde sutil */
#gdlr-core-column-8 .gdlr-core-pbf-column-content {
    border: 1px solid #d0d0d0 !important;
}

/* ============================================
   Cuadro "Consultas por E-mail" - Fondo gris
   ============================================ */

/* Fondo del contenedor - cambiar a gris #e6e6e6 */
#gdlr-core-column-9 .gdlr-core-pbf-background-wrap {
    background-color: #e6e6e6 !important;
}

/* Contenedor con bordes redondeados y sombra */
#gdlr-core-column-9 .gdlr-core-pbf-column-content-margin {
    background-color: #e6e6e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #d0d0d0 !important;
}

/* Título "Consultas por E-mail" */
#gdlr-core-column-9 h3.gdlr-core-title-item-title {
    color: #1d1d1d !important;
}

/* Texto descriptivo - oscurecer */
#gdlr-core-column-9 .gdlr-core-text-box-item-content {
    color: #3d3d3d !important; /* Era #6d6d6d */
    font-weight: 500 !important;
}

#gdlr-core-column-9 .gdlr-core-text-box-item-content p {
    color: #3d3d3d !important;
}

/* Línea divisoria decorativa - oscurecer */
#gdlr-core-column-9 .gdlr-core-divider-line {
    border-color: #7a6139 !important; /* Era #9f8862 */
}

/* Botón "Contacto" */
#gdlr-core-column-9 .gdlr-core-button-gradient {
    background: #7a6139 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 14px 30px !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(122, 97, 57, 0.2) !important;
}

#gdlr-core-column-9 .gdlr-core-button-gradient:hover {
    background: #5f4a2a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(122, 97, 57, 0.3) !important;
}

/* Asegurar contraste en todos los textos dentro del cuadro */
#gdlr-core-column-9 * {
    color: inherit !important;
}

#gdlr-core-column-9 h1,
#gdlr-core-column-9 h2,
#gdlr-core-column-9 h3,
#gdlr-core-column-9 h4,
#gdlr-core-column-9 h5,
#gdlr-core-column-9 h6 {
    color: #1d1d1d !important;
}


/* ============================================
   Puntos de navegación del slider de testimonios
   ============================================ */

/* Contenedor de puntos */
.flex-control-nav.flex-control-paging {
    text-align: center !important;
    padding: 20px 0 !important;
}

/* Puntos individuales */
.flex-control-nav.flex-control-paging li {
    display: inline-block !important;
    margin: 0 8px !important;
}

/* Enlaces de los puntos */
.flex-control-nav.flex-control-paging li a {
    display: inline-block !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    
    /* Números con buen contraste */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    
    /* Fondo visible */
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    
    /* Transición suave */
    transition: all 0.3s ease !important;
    
    /* Ocultar texto por defecto del navegador */
    text-decoration: none !important;
}

/* Punto activo */
.flex-control-nav.flex-control-paging li a.flex-active {
    background-color: #7a6139 !important;
    border-color: #7a6139 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(122, 97, 57, 0.4) !important;
}

/* Hover */
.flex-control-nav.flex-control-paging li a:hover {
    background-color: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.05) !important;
}

/* Focus para navegación por teclado */
.flex-control-nav.flex-control-paging li a:focus {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
}


/* ============================================
   SIDEBAR - Solo cambiar colores de texto
   ============================================ */

/* Título del widget "Especialidades" */
#gdlr-core-custom-menu-widget-2 .attorna-widget-title {
    color: #ffffff !important;
}

/* Enlaces normales */
#gdlr-core-custom-menu-widget-2 ul.gdlr-core-custom-menu-widget li a {
    color: #ffffff !important;
}

/* Enlace activo (página actual) */
#gdlr-core-custom-menu-widget-2 ul.gdlr-core-custom-menu-widget li.current-menu-item a {
    color: #ffffff !important;
}

/* Hover en enlaces */
#gdlr-core-custom-menu-widget-2 ul.gdlr-core-custom-menu-widget li a:hover {
    color: #d4c59d !important;
}


/* ============================================
   Botón "Sobre Mí" en sidebar
   ============================================ */

/* Botón con fondo dorado claro y texto negro */
a.gdlr-core-button[href="/sobre-mi"] {
    background: #d4c59d !important;
}

a.gdlr-core-button[href="/sobre-mi"] .gdlr-core-content {
    color: #000000 !important;
    background-color: #d4c59d !important;
}

/* Icono del PDF en negro también */
a.gdlr-core-button[href="/sobre-mi"] .gdlr-core-content i {
    color: #000000 !important;
}

/* Hover - oscurecer un poco */
a.gdlr-core-button[href="/sobre-mi"]:hover {
    background: #c4b58d !important;
}

a.gdlr-core-button[href="/sobre-mi"]:hover .gdlr-core-content {
    background-color: #c4b58d !important;
}