/* css/frontend-style.css */

.aad-container {
    margin-top: 20px;
    margin-bottom: 40px;
    clear: both; /* Ayuda con los floats si los hay en el tema */
}

.aad-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.8em; /* Ajusta según tu tema y preferencias */
    font-weight: bold;
    color: #333; /* O el color que prefieras */
}

/* El .twentytwenty-container es de la librería.
   .aad-slider-instance es nuestra clase para identificar nuestros sliders. */
.aad-slider-instance.twentytwenty-container {
    max-width: 900px; /* Ancho máximo del slider, ajústalo si es necesario */
    width: 100%;      /* Para que sea responsive */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    /* Importante: Las imágenes deben tener el mismo aspect ratio para mejor resultado */
}

/* Asegurar que las imágenes dentro del slider se comporten bien */
.aad-slider-instance.twentytwenty-container img {
    max-width: 100%; /* Esencial para la responsividad dentro de TwentyTwenty */
    height: auto;    /* Mantiene la proporción de la imagen */
    display: block;  /* Evita espacios extra debajo de las imágenes */
    /* TwentyTwenty maneja el dimensionamiento, pero esto es una buena práctica */
}

.aad-description {
    margin-top: 20px;
    padding: 0 10px; /* Un poco de padding si el texto es ancho */
    font-size: 0.95em;
    color: #555; /* Color del texto de descripción */
    line-height: 1.7;
}

.aad-description p:last-child {
    margin-bottom: 0;
}

/* --- Personalizaciones Opcionales para TwentyTwenty --- */
/* Descomenta y ajusta si quieres cambiar la apariencia del slider */

/* Tirador */
/*
.twentytwenty-handle {
    border-width: 3px;
    border-color: white; // Color del borde del círculo exterior del tirador
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); // Sombra del tirador
}
.twentytwenty-handle:before, .twentytwenty-handle:after {
    background: white; // Color del círculo interior del tirador
    width: 6px; // Ancho del círculo interior
}
*/

/* Flechas dentro del tirador */
/*
.twentytwenty-left-arrow {
    border-right-color: #333; // Color de la flecha izquierda
}
.twentytwenty-right-arrow {
    border-left-color: #333; // Color de la flecha derecha
}
*/

/* Etiquetas "Antes" y "Después" (visibles al pasar el ratón por defecto) */
/*
.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.twentytwenty-before-label:before {
    // Contenido de la etiqueta "Antes" (ya definido por TwentyTwenty)
}
.twentytwenty-after-label:before {
    // Contenido de la etiqueta "Después" (ya definido por TwentyTwenty)
}
*/