/* ==========================================================================
   AMEXTREME ACTIVIDADES · estilos de la parte pública (fichas y tarjetas)
   Plugin: amextreme-actividades · archivo: assets/amxa.css
   --------------------------------------------------------------------------
   Qué pinta este archivo:
     Todo el HTML que generan los shortcodes [amx_act_*] del plugin:
     la ficha de actividad (plantilla Elementor 427) y las rejillas de
     tarjetas de la portada, el hub y las categorías.

   Reglas de la casa:
     · Colores y fuentes salen de las variables globales de Elementor
       (--amx-ink, --amx-yellow, --amx-river, --font-amx-display…). El valor
       tras la coma es un respaldo por si la variable no carga.
     · Las medidas copian al píxel las fichas y tarjetas originales hechas con
       Elementor. Si cambias una medida aquí, revisa también la portada y las
       categorías, que usan las mismas tarjetas.
     · Puntos de corte: tablet ≤1024px, móvil ≤767px (los mismos de Elementor).

   Índice
     1. Base (contenedor de shortcode e iconos)
     2. Cabecera de la ficha: datos rápidos y botones
     3. Columna principal: intro, «Qué vas a hacer» y listas
     4. Tarjeta lateral de precio y reserva
     5. Galería (rejilla en escritorio, carrusel en móvil)
     6. Vídeo de la actividad
     7. Preguntas frecuentes
     8. Tarjetas de actividad ([amx_act_cards])
     9. Secciones vacías de la plantilla
   ========================================================================== */


/* 1. BASE ================================================================== */

/* Envoltorio que sustituye al párrafo de Elementor donde va el shortcode. */
.amxa-sc { width: 100%; }

/* Iconos Font Awesome en SVG: toman el tamaño del texto (1em) y su color. */
.amxa-i { display: inline-flex; width: 1em; height: 1em; flex: 0 0 auto; }
.amxa-i svg { width: 100%; height: 100%; fill: currentColor; }


/* 2. CABECERA DE LA FICHA ================================================== */

/* Chips de datos sobre la foto (Nivel, Edad mínima, Duración, Precio). */
.amxa-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.amxa-fact { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 10px; background: rgba(12,18,16,.55); border: 1px solid rgba(255,255,255,.18); }
.amxa-fact .amxa-i { font-size: 22px; color: var(--amx-yellow, #FFD21F); }
.amxa-fact div { display: flex; flex-direction: column; gap: 2px; }
/* Etiqueta pequeña («NIVEL») y valor grande («INICIACIÓN»). */
.amxa-fact-l { font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.amxa-fact-v { font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #fff; }

/* Botones «Reservar ahora» (amarillo) y «WhatsApp» (borde blanco).
   También se usan en la tarjeta lateral. */
.amxa-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.amxa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 30px; border-radius: 6px; background: var(--amx-yellow, #FFD21F); color: var(--amx-ink, #0C1210) !important; font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; text-decoration: none !important; transition: transform .2s ease, background-color .2s ease; }
.amxa-btn .amxa-i { font-size: 20px; }
.amxa-btn:hover { background: #fff; transform: translateY(-2px); }
/* Variante de borde (WhatsApp): fondo transparente e icono amarillo. */
.amxa-btn-ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.7); padding: 15px 28px; }
.amxa-btn-ghost .amxa-i { color: var(--amx-yellow, #FFD21F); }
.amxa-btn-ghost:hover { background: #fff; color: var(--amx-ink, #0C1210) !important; }
/* Botón a todo el ancho (tarjeta lateral). */
.amxa-btn-block { width: 100%; }


/* 3. COLUMNA PRINCIPAL ===================================================== */

/* [amx_act_body]: intro (descripción del producto), «Qué vas a hacer» y
   las listas «Lo mejor», «Qué incluye», «Requisitos», «Qué ver cerca». */
.amxa-body { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.amxa-intro, .amxa-text { display: flex; flex-direction: column; gap: 14px; }
.amxa-intro p, .amxa-text p { margin: 0; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 17px; line-height: 1.7; color: var(--amx-muted, #5A6660); }
/* La intro va un poco más grande y oscura que el resto del texto. */
.amxa-intro p { font-size: 19px; color: var(--amx-text, #14201B); }
/* Subtítulos de sección («QUÉ VAS A HACER», «LO MEJOR»…). */
.amxa-sub { margin: 18px 0 0; font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 30px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--amx-text, #14201B); }
/* Listas con icono azul y línea separadora entre puntos. */
.amxa-list { list-style: none; margin: 0; padding: 0; }
.amxa-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--amx-line, #DCD9CF); font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 17px; line-height: 1.5; color: var(--amx-text, #14201B); }
.amxa-list li .amxa-i { font-size: 18px; margin-top: 3px; color: var(--amx-river, #0F6B86); }


/* 4. TARJETA LATERAL ======================================================= */

/* [amx_act_side]: caja oscura con precio, datos y botones. Se queda fija
   («sticky») al hacer scroll en escritorio; en tablet/móvil va normal. */
.amxa-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: 14px; background: var(--amx-ink, #0C1210); }
@media (max-width: 1024px) { .amxa-side { position: static; } }
/* Precio grande en amarillo («DESDE 35 €»). */
.amxa-price { font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 46px; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--amx-yellow, #FFD21F); }
/* Tabla de datos: clave con icono a la izquierda, valor a la derecha. */
.amxa-kv { display: flex; flex-direction: column; margin: 6px 0 8px; }
.amxa-kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.amxa-kv-k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 14px; color: rgba(255,255,255,.6); }
.amxa-kv-k .amxa-i { font-size: 16px; color: var(--amx-yellow, #FFD21F); }
.amxa-kv-v { font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 15px; font-weight: 700; color: #fff; text-align: right; }
/* Nota pequeña bajo los botones (señal / cambios de fecha). */
.amxa-side-note { margin: 4px 0 0; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); }


/* 5. GALERÍA =============================================================== */

/* [amx_act_gallery]: escritorio 4 columnas, tablet 2 columnas.
   Al pulsar una foto se abre el visor de Amextreme Core (clase .amx-gal). */
.amxa-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.amxa-gal img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 1024px) { .amxa-gal { grid-template-columns: 1fr 1fr; } }
/* Puntos del carrusel: solo existen en móvil. */
.amxa-gal-dots { display: none; }
/* Móvil: carrusel deslizable de una foto (asoma un trozo de la siguiente),
   sin barra de scroll y con puntos que marcan la foto visible (el script
   que los mueve va dentro del propio shortcode). */
@media (max-width: 767px) {
  .amxa-gal { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .amxa-gal::-webkit-scrollbar { display: none; }
  .amxa-gal img { flex: 0 0 86%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
  .amxa-gal-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
  .amxa-gal-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(12,18,16,.22); transition: width .2s ease, background .2s ease; }
  .amxa-gal-dots span.is-on { width: 22px; border-radius: 6px; background: var(--amx-river, #0F6B86); }
}


/* 6. VÍDEO ================================================================= */

/* [amx_act_video]: solo aparece si la ficha tiene vídeo (p. ej. Barbanza). */
.amxa-video { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* Antetítulo amarillo («VÍDEO REAL DE LA ACTIVIDAD»). */
.amxa-eyebrow { font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amx-yellow, #FFD21F); }
.amxa-video-t { margin: 0; font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1; color: #fff; }
.amxa-video video { width: 100%; max-width: 1080px; aspect-ratio: 16 / 9; margin-top: 10px; border-radius: 16px; background: #000; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
@media (max-width: 767px) { .amxa-video-t { font-size: 32px; } }


/* 7. PREGUNTAS FRECUENTES ================================================== */

/* [amx_act_faq]: acordeón con <details>. El icono «?» y el «+» que gira los
   pone Amextreme Core (clases .amx-faq-*), igual que en el resto de la web. */
.amxa-faq { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 860px; margin: 0 auto; }
.amxa-faq-item { border-radius: 10px; background: #fff; overflow: hidden; }
.amxa-faq-head { list-style: none; padding: 20px 24px; }
/* Quita el triángulo nativo de Safari/Chrome. */
.amxa-faq-head::-webkit-details-marker { display: none; }
.amxa-faq-q { font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 22px; font-weight: 700; line-height: 1.5; text-transform: uppercase; color: var(--amx-text, #14201B); }
/* En móvil 21px, como las FAQ originales (a 22px algunas preguntas
   partían en dos líneas). */
@media (max-width: 767px) { .amxa-faq-q { font-size: 21px; } }
.amxa-faq-body { padding: 0 24px 22px; }
.amxa-faq-body p { margin: 0; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 17px; line-height: 1.7; color: var(--amx-muted, #5A6660); }


/* 8. TARJETAS DE ACTIVIDAD ================================================= */

/* [amx_act_cards]: rejilla de 3 / 2 / 1 columnas (escritorio / tablet / móvil).
   Medidas idénticas a las tarjetas originales de Elementor (.amx-card).
   El slider de fotos con flechas lo añade Amextreme Core leyendo el
   atributo data-amx-photos de cada tarjeta. */
.amxa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .amxa-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .amxa-cards { grid-template-columns: 1fr; } }
/* Tarjeta completa (todo es un enlace). Al pasar el ratón sube y da sombra. */
a.amxa-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
a.amxa-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(12,18,16,.45); }
/* Foto (4:3) con las insignias encima. */
.amxa-card-media { position: relative; overflow: hidden; }
.amxa-card-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
/* Insignia amarilla de precio, abajo a la izquierda («DESDE 35 €»). */
.amxa-badge-price { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 7px 12px; border-radius: 8px; background: var(--amx-yellow, #FFD21F); color: var(--amx-ink, #0C1210); font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .02em; line-height: 1; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
/* Insignia oscura de duración con reloj, abajo a la derecha. */
.amxa-badge-dur { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(12,18,16,.78); color: #fff; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 13px; font-weight: 600; line-height: 1; }
.amxa-badge-dur .amxa-i { color: var(--amx-yellow, #FFD21F); font-size: 13px; }
/* Cuerpo: categoría · lugar, título, frase y «Ver actividad →» al pie. */
.amxa-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 22px 24px 26px; }
.amxa-card-meta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amx-river, #0F6B86); }
.amxa-card-t { margin: 0; font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 28px; font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--amx-text, #14201B); }
.amxa-card-p { margin: 0; font-family: var(--font-amx-body, 'Source Sans 3'), sans-serif; font-size: 17px; line-height: 1.7; color: var(--amx-muted, #5A6660); }
/* «Ver actividad →»: margin-top:auto lo empuja al fondo para que todas las
   tarjetas de una fila lo tengan a la misma altura. */
.amxa-card-cta { margin-top: auto; padding-top: 0; min-height: 23px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-amx-display, 'Barlow Condensed'), sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--amx-river, #0F6B86); }
.amxa-card-cta .amxa-i { font-size: 13px; }


/* 9. SECCIONES VACÍAS DE LA PLANTILLA ====================================== */

/* Si un shortcode no devuelve nada (actividad sin vídeo, sin galería, sin
   otras actividades, o con las opiniones apagadas), se oculta la sección
   entera de la plantilla Elementor para que no quede un hueco. */
section.e-con:has(.amxa-sc:empty) { display: none !important; }