/* ==========================================================================
   AMEXTREME CORE · estilos comunes de toda la web
   Plugin: amextreme-core · archivo: assets/amx-core.css
   --------------------------------------------------------------------------
   Qué pinta este archivo (todo lo que NO es propio de la ficha de producto):
     1. Slider de fotos en las tarjetas de actividad (flechas y puntos).
        Lo monta assets/amx-core.js sobre cualquier tarjeta .amx-card.
     2. Visor de fotos a pantalla completa (lightbox) para las galerías
        (imágenes con clase .amx-gal → el JS les añade .amx-zoomable).
     3. Iconos de las preguntas frecuentes («?» amarillo y «+» que gira).
     4. Colores del banner de cookies (plugin GDPR Cookie Compliance).
     5. Aspecto de las reseñas de Google (plugin Trustindex), que el plugin
        mete dentro de <div class="amx-reviews-embed"> al sustituir el texto
        AMX_REVIEWS_WIDGET.

   Nota: aquí los colores van escritos en hexadecimal (no en variables)
   porque se usan también fuera de Elementor (banner de cookies, visor).
     #0C1210 = negro Amextreme (amx-ink) · #FFD21F = amarillo (amx-yellow)
     #0F6B86 = azul río (amx-river) · #F3F1EA = crema (amx-foam)
     #DCD9CF = línea (amx-line) · #14201B = texto (amx-text)
   ========================================================================== */


/* 1. SLIDER DE FOTOS EN LAS TARJETAS ======================================= */

/* Contenedor de la foto de la tarjeta: recorta lo que sobresale. */
.amx-slides { position: relative; overflow: hidden; }
/* Fundido rápido al cambiar de foto. */
.amx-slides img { transition: opacity .18s ease, transform .5s ease; }
.amx-slides img.amx-sl-fade { opacity: .15; }

/* Flechas anterior/siguiente: círculos oscuros con flecha amarilla.
   Ocultas hasta pasar el ratón por la tarjeta. */
.amx-sl-btn { position: absolute; top: 50%; z-index: 3; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: rgba(12,18,16,.72); color: #FFD21F; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.amx-sl-btn svg { width: 12px; height: 12px; }
/* La flecha «anterior» es la misma girada 180°. */
.amx-sl-prev { left: 12px; } .amx-sl-prev svg { transform: rotate(180deg); }
.amx-sl-next { right: 12px; }
.amx-sl-btn:hover, .amx-sl-btn:focus-visible { background: #FFD21F; color: #0C1210; outline: none; }
a.amx-card:hover .amx-sl-btn, a.amx-card:focus-within .amx-sl-btn { opacity: 1; }

/* Puntos arriba de la foto (el activo se alarga en amarillo). */
.amx-sl-dots { position: absolute; top: 12px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.amx-sl-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.amx-sl-dots i.on { background: #FFD21F; width: 16px; border-radius: 3px; }
a.amx-card:hover .amx-sl-dots { opacity: 1; }

/* Pantallas táctiles (sin ratón): flechas y puntos siempre visibles y algo
   más pequeños; además se puede deslizar con el dedo. */
@media (hover: none) { .amx-sl-btn { opacity: .9; width: 32px; height: 32px; margin-top: -16px; } .amx-sl-dots { opacity: 1; } }


/* 2. VISOR DE FOTOS (LIGHTBOX) ============================================= */

/* Fotos de galería que se pueden ampliar: cursor de lupa y brillo al pasar. */
img.amx-zoomable { cursor: zoom-in; transition: transform .3s ease, filter .3s ease; }
img.amx-zoomable:hover { filter: brightness(1.06); }
/* Bloquea el scroll de la página mientras el visor está abierto. */
html.amx-lb-lock { overflow: hidden; }

/* Capa negra a pantalla completa (se muestra al añadir la clase .open). */
.amx-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(8,12,10,.94); display: none; align-items: center; justify-content: center; }
.amx-lb.open { display: flex; }
/* Foto ampliada: cabe siempre en pantalla. */
.amx-lb-fig { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.amx-lb-fig img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* Botones: flechas a los lados y cerrar (×) arriba a la derecha. */
.amx-lb-nav, .amx-lb-close { position: absolute; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease; }
.amx-lb-nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: rgba(255,255,255,.1); }
.amx-lb-nav svg { width: 16px; height: 16px; }
.amx-lb-prev { left: 20px; } .amx-lb-prev svg { transform: rotate(180deg); }
.amx-lb-next { right: 20px; }
.amx-lb-nav:hover, .amx-lb-close:hover { background: #FFD21F; color: #0C1210; }
.amx-lb-close { top: 18px; right: 20px; width: 46px; height: 46px; border-radius: 50%; font-size: 32px; line-height: 1; background: rgba(255,255,255,.1); }
/* Contador «2 / 5» abajo. */
.amx-lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .08em; }
/* Si la galería tiene una sola foto, sin flechas ni contador. */
.amx-lb-single .amx-lb-nav, .amx-lb-single .amx-lb-count { display: none; }
/* Móvil: flechas más pequeñas y pegadas al borde. */
@media (max-width: 767px) { .amx-lb-nav { width: 42px; height: 42px; margin-top: -21px; } .amx-lb-prev { left: 8px; } .amx-lb-next { right: 8px; } }


/* 3. PREGUNTAS FRECUENTES ================================================== */

/* Vale para las FAQ hechas con el acordeón de Elementor (portada, categorías)
   y para las de las fichas de producto: todas usan las clases .amx-faq-*. */
/* Cabecera de cada pregunta: deja hueco a la derecha para el «+». */
.amx-faq-head { position: relative; cursor: pointer; padding-right: 54px !important; }
.amx-faq-q { display: inline-flex !important; align-items: center; gap: 12px; }
/* Círculo amarillo con «?» delante de cada pregunta (icono SVG incrustado). */
.amx-faq-q::before { content: ""; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #FFD21F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%230C1210' d='M204.3 32.01H96c-52.94 0-96 43.06-96 96c0 17.67 14.31 31.1 32 31.1s32-14.32 32-31.1c0-17.64 14.34-32 32-32h108.3C232.8 96.01 256 119.2 256 147.8c0 19.72-10.97 37.47-30.5 47.33L127.8 252.4C117.1 258.2 112 268.7 112 280v40c0 17.67 14.31 31.99 32 31.99s32-14.32 32-31.99V298.3L256 251.3c39.47-19.75 64-59.42 64-103.5C320 83.95 268.1 32.01 204.3 32.01zM144 400c-22.09 0-40 17.91-40 40s17.91 39.1 40 39.1s40-17.9 40-39.1S166.1 400 144 400z'/%3E%3C/svg%3E") center / 11px 11px no-repeat; }
/* «+» azul a la derecha… */
.amx-faq-head::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 600; line-height: 1; color: #0F6B86; transition: transform .25s ease; }
/* …que gira 45° (se convierte en «×») cuando la pregunta está abierta. */
details[open] > .amx-faq-head::after { transform: translateY(-50%) rotate(45deg); }


/* 4. BANNER DE COOKIES (GDPR Cookie Compliance) ============================ */

/* Barra inferior negra con borde amarillo y texto crema. Los !important son
   necesarios porque el plugin de cookies imprime sus propios colores. */
#moove_gdpr_cookie_info_bar { background-color: #0C1210 !important; border-top: 3px solid #FFD21F !important; }
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a { color: #F3F1EA !important; }
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a { text-decoration: underline; }
/* Botón «Aceptar todo» en amarillo. */
#moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-allow-all { background-color: #FFD21F !important; color: #0C1210 !important; border-color: #FFD21F !important; font-weight: 700; }
/* Botones «Rechazar» y «Configurar» con borde blanco. */
#moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-reject-btn, #moove_gdpr_cookie_info_bar .mgbutton.moove-gdpr-infobar-settings-btn { background-color: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.6) !important; }
/* Botón «Aceptar todo» dentro de la ventana de configuración. */
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton.moove-gdpr-modal-allow-all { background-color: #FFD21F !important; color: #0C1210 !important; border-color: #FFD21F !important; }


/* 5. RESEÑAS DE GOOGLE (Trustindex) ======================================== */

/* El widget de Trustindex trae su propio diseño; esto solo lo adapta a la
   marca (tarjetas blancas con borde suave, nombres en Barlow Condensed,
   enlaces en azul río, flechas negras). Los !important pisan su CSS. */
.amx-reviews-embed { width: 100%; }
.amx-reviews-embed .ti-widget .ti-review-item > .ti-inner { background: #FFFFFF !important; border: 1px solid #DCD9CF !important; border-radius: 14px !important; box-shadow: 0 10px 30px -18px rgba(12,18,16,.35) !important; }
.amx-reviews-embed .ti-widget .ti-name { font-family: 'Barlow Condensed', sans-serif !important; font-size: 18px !important; text-transform: uppercase; color: #0C1210 !important; }
.amx-reviews-embed .ti-widget .ti-review-content, .amx-reviews-embed .ti-widget .ti-date { font-family: 'Source Sans 3', sans-serif !important; color: #14201B !important; }
.amx-reviews-embed .ti-widget .ti-read-more span, .amx-reviews-embed .ti-widget .ti-read-more a { color: #0F6B86 !important; }
.amx-reviews-embed .ti-widget .ti-controls .ti-next, .amx-reviews-embed .ti-widget .ti-controls .ti-prev { background-color: #0C1210 !important; border-color: #0C1210 !important; }