/*
Theme Name:   Astra Child
Theme URI:    https://wpastra.com/
Description:  Tema hijo personalizado para Astra.
Author:       Tu Nombre
Author URI:   https://tusitio.com
Template:     astra
Version:      1.0.3
Text Domain:  astra-child
*/

/* Añade tu CSS personalizado debajo de esta línea */

/* Galeria (/galeria/): elimina el scroll horizontal en responsive.
   El contenedor de las pestañas (e6bc498) tiene --width:100% junto con
   márgenes laterales de 10px (--margin-left/right), así que el ancho total
   supera el viewport en 20px y aparece scroll horizontal. Anulamos solo los
   márgenes horizontales (mantenemos arriba/abajo) para que encaje sin desbordar.
   Scoped al contenedor concreto para no afectar a otros containers. */
.elementor.elementor .elementor-element.elementor-element-e6bc498 {
    --margin-left: 0px;
    --margin-right: 0px;
}

/* Galeria (/galeria/): mantener las pestañas arriba en móvil.
   Por defecto Elementor "Nested Tabs" pasa a modo acordeón por debajo de 767px
   (heading/content pasan a display:contents y se intercalan título+contenido).
   Aquí forzamos que la cabecera de pestañas siga siendo una fila encima del
   contenido. Scoped al widget concreto para no afectar a otros tabs del sitio. */
/* Alinear verticalmente los títulos de pestaña (la activa lleva borde/caja y
   por eso queda más alta que la inactiva). Aplica en todos los tamaños. */
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7 .e-n-tabs-heading {
    align-items: center;
}

/* Galeria (/galeria/): borde blanco en las pestañas inactivas (sin hover).
   Al hacer hover Elementor pone un borde 1px sólido oscuro; como el box-sizing es
   border-box con alto automático, ese borde suma 2px de alto y desplazaba la fila
   de botones. Reservamos ese espacio dándoles un borde blanco del mismo grosor en
   el estado :not(:hover); así en hover solo cambia el color del borde y nada se
   mueve. Elementor fuerza 'border-style:none;border-width:var(--n-tabs-border-width)'
   sobre este mismo estado con alta especificidad, por eso hace falta !important.
   Scoped al widget concreto. */
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7 .e-n-tabs-heading .e-n-tab-title[aria-selected="false"]:not(:hover) {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: transparent !important;
}

/* IMPORTANTE: estas reglas NO van dentro de un @media. Elementor añade la clase
   .e-n-tabs-mobile (y colapsa a acordeón) cuando el viewport baja del breakpoint
   configurado del widget, que aquí es el de tablet (~1024px), no 767px. Si las
   envolvíamos en @media (max-width: 767px), entre 1000px y 767px el widget ya
   estaba en modo acordeón pero las correcciones no se aplicaban y las pestañas
   no se veían arriba en fila. Al scopear solo a .e-n-tabs-mobile, la fila se
   fuerza siempre que Elementor colapsaría, sea cual sea el breakpoint. */
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile {
    --n-tabs-heading-display: flex;
    --n-tabs-content-display: flex;
}

/* Anula el "order" que intercalaba cada título con su contenido en acordeón */
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile .e-n-tab-title,
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile .e-n-tabs-content > .e-con {
    order: 0;
}

/* En modo móvil Elementor añade márgenes verticales (pensados para el
   acordeón) que dependen de qué pestaña está activa: la activa recibe
   margin-block-end y las que no son la primera margin-block-start. Eso hacía
   que la alineación de la fila cambiara según el botón activo. Los anulamos. */
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile .e-n-tab-title,
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile .e-n-tab-title:not(:first-child),
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile .e-n-tab-title[aria-selected="true"] {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* La cabecera puede desbordar en pantallas estrechas: permitir scroll horizontal */
.elementor.elementor .elementor-widget-n-tabs.elementor-element-59251f7.e-n-tabs-mobile .e-n-tabs-heading {
    flex-wrap: nowrap;
    overflow-x: auto;
}