/**
 * Mobile overrides — breakpoint 760px (alineado con nav hamburger).
 * Reglas globales para que las páginas no rompan en 393px.
 */

/* Elementos mobile-only: ocultos por defecto en desktop */
.sa-miembros__arcoiris-mobile { display: none; }

@media (max-width: 760px) {

  /* ── Body & headings globales ─────────────────────────────────── */
  .sa-section { padding: clamp(48px, 8vh, 80px) 0; }
  .sa-section__inner { padding: 0 18px; }
  .sa-section__title { font-size: 24px; margin-bottom: 24px; }

  .sa-cards--3 { grid-template-columns: 1fr; gap: 16px; }

  /* ── Decoraciones globales (.sa-deco--*) ─────────────────────── */
  .sa-deco {
    max-width: 38vw;
    max-height: 30vh;
    width: auto;
    height: auto;
  }
  .sa-deco--arco-l,
  .sa-deco--arco-r {
    max-width: 36vw;
  }
  .sa-deco--charro { display: none; }
  .sa-deco--rombos-br,
  .sa-deco--rombos-tl,
  .sa-deco--rombos-tr,
  .sa-deco--gota-cubo {
    max-width: 28vw;
  }
  .sa-deco--rombos-br { bottom: 16px; right: 16px; }
  .sa-deco--rombos-tl { top: 16px; left: 16px; }
  .sa-deco--rombos-tr { top: 16px; right: 16px; }
  .sa-deco--gota-cubo { top: 12px; right: 12px; }

  /* ── HERO slider: en mobile mostrar SOLO slide 1 ─────────────── */
  .sa-hero-slider__arrow,
  .sa-hero-slider__dots { display: none !important; }
  .sa-hero-slider__track > .sa-hero:nth-child(n+2) { display: none; }
  .sa-hero-slider__track { transform: none !important; }

  .sa-hero-slider { height: 580px; min-height: 0; }
  .sa-hero-slider__track { height: 100%; }
  .sa-hero-slider__track > .sa-hero { height: 100%; min-height: 0; }
  .sa-hero { min-height: 0; }
  .sa-decor--textura-papel { height: 180px; }
  .sa-hero__content { top: 46%; padding: 0 18px; }
  .sa-hero__logo { display: none; }
  .sa-hero__title { font-size: 28px; line-height: 1.14; }
  .sa-hero__subtitle { font-size: 13px; margin-bottom: 22px; }
  .sa-hero__cta { padding: 11px 24px; font-size: 12px; }

  /* Slide 1 — BG decoraciones */
  .sa-decor--rombos-arco { width: 140px; bottom: 10%; }
  .sa-decor--gotas-circulos {
    width: auto;
    height: 70%;
    max-height: none;
    bottom: 10%;
    top: auto;
  }
  /* Slide 1 — decoraciones primer plano (encima de la trama papel) un poco más grandes */
  .sa-decor--rana-circulos { width: 160px; left: 3%; bottom: clamp(12px, 2.5vh, 28px); }
  .sa-decor--rombos-puente { width: 200px; }
  /* Slides 2 y 3 (no se renderizan en mobile pero mantenemos por consistencia) */
  .sa-decor--charro-rombos { top: 70px; left: 14px; width: 80px; }
  .sa-decor--circulo-gotas { left: auto; right: 8%; top: 28%; width: 78px; }
  .sa-decor--cubo-gota { width: 110px; transform: translate(30%, -50%); }

  /* ── PRÓXIMOS EVENTOS ─────────────────────────────────────────── */
  .sa-section--proximos-eventos { padding: 64px 0; }
  .sa-section--proximos-eventos .sa-section__title {
    position: relative;
    z-index: 2;
  }
  /* Decoraciones: arco-l visible, charro pegado al borde derecho (mitad), rombos-br como desktop */
  .sa-section--proximos-eventos .sa-deco--arco-l {
    display: block;
    opacity: 1;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-width: none;
    max-height: none;
    width: auto;
    height: 80%;
    z-index: 0;
    pointer-events: none;
  }
  .sa-section--proximos-eventos .sa-deco--charro {
    display: block;
    top: 24px;
    right: 0;
    left: auto;
    width: 110px;
    max-width: 30vw;
    transform: translateX(50%);
    opacity: 1;
  }
  .sa-section--proximos-eventos .sa-deco--rombos-br {
    display: block;
    opacity: 1;
    max-width: 22vw;
  }

  /* ── ACTIVIDADES (clases) — carrusel vertical de a 3, cards horizontales ─────── */
  .sa-section--clases { padding: 56px 0; }
  .sa-section--clases .sa-deco--arco-r {
    display: block;
    opacity: 1;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scaleX(-1);
    max-width: none;
    max-height: none;
    width: auto;
    height: 80%;
    z-index: 0;
    pointer-events: none;
  }
  /* ── Clases — dos carruseles horizontales por categoria ─────── */
  .sa-clases-grupos { gap: 12px; }
  .sa-clases-grupo { position: relative; }
  .sa-clases-arrow {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #fff;
    opacity: .85;
    z-index: 10;
  }
  .sa-clases-arrow svg { width: 28px; height: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
  .sa-clases-arrow--prev { left: -12px; }
  .sa-clases-arrow--next { right: -12px; }
  .sa-cards-viewport {
    overflow: hidden;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .sa-cards-viewport img,
  .sa-cards-viewport a { -webkit-user-drag: none; }
  .sa-section--clases .sa-clases-grupo .sa-cards--3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    grid-template-columns: none;
    padding: 4px 0 16px 20px;
    gap: 12px;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    will-change: transform;
    touch-action: pan-y;
  }
  .sa-section--clases .sa-clases-grupo .sa-cards--3 > .sa-card {
    flex: 0 0 calc(100% - 20px);
    flex-shrink: 0;
  }
  .sa-card--actividad {
    flex-direction: row;
    align-items: stretch;
    border-radius: 22px;
  }
  .sa-card--actividad .sa-card__thumb {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 100%;
  }
  .sa-card--actividad .sa-card__body {
    padding: 12px 14px;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .sa-card--actividad .sa-card__title {
    font-size: 15px;
    line-height: 1.2;
  }
  .sa-card--actividad .sa-card__tag {
    font-size: 10px;
  }
  .sa-card--actividad .sa-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
  }
  .sa-card--actividad .sa-card__sched {
    font-size: 11px;
  }
  .sa-card--actividad .sa-card__cta {
    font-size: 11px;
    padding: 6px 16px;
    align-self: flex-start;
    margin-top: 4px;
  }

  /* ── Eventos — 1 card por pantalla, transform-based infinite con flechas ── */
  .sa-section--proximos-eventos .sa-events-carousel { position: relative; }
  .sa-section--proximos-eventos .sa-cards--3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    grid-template-columns: none;
    padding: 4px 0 16px 20px;
    gap: 12px;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    will-change: transform;
    touch-action: pan-y;
  }
  .sa-section--proximos-eventos .sa-cards--3 > .sa-card {
    flex: 0 0 calc(100% - 20px);
    flex-shrink: 0;
  }
  .sa-section--proximos-eventos .sa-card { border-radius: 24px; }
  .sa-section--proximos-eventos .sa-card__thumb { aspect-ratio: 4 / 3; }
  .sa-section--proximos-eventos .sa-card__title { font-size: 18px; }
  .sa-section--proximos-eventos .sa-card__tag { font-size: 10px; }
  .sa-section--proximos-eventos .sa-card__sched { font-size: 11px; }
  .sa-section--proximos-eventos .sa-card__cta { font-size: 11px; padding: 6px 16px; }

  /* ── SOMOS ────────────────────────────────────────────────────── */
  .sa-section--somos { padding: 56px 0; }
  .sa-somos-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sa-somos__logo-col { order: 0; }
  .sa-somos__text { order: 1; gap: 18px; }
  .sa-somos__logo-img { max-width: 280px; }
  .sa-somos__text p { font-size: 16px; line-height: 1.55; }
  .sa-somos__text .sa-card__cta { font-size: 13px; padding: 11px 20px; align-self: center; }

  /* ── GALERÍA HOME — carrusel horizontal ───────────────────────── */
  .sa-section--galeria { padding: 56px 0; }
  .sa-section--galeria .sa-galeria-mosaic {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-rows: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    padding: 4px 18px 8px;
    margin: 0 -18px;
    gap: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sa-section--galeria .sa-galeria-mosaic::-webkit-scrollbar { display: none; }
  .sa-section--galeria .sa-galeria-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 62%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .sa-section--galeria .sa-galeria-card__thumb {
    position: relative;
    flex: initial;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
  }
  .sa-galeria-card__title { font-size: 12px; }
  .sa-galeria-card__btn { font-size: 9px; padding: 4px 9px; }

  /* ── PAGE HERO (Eventos / Clases en /centro) ──────────────────── */
  .sa-page-hero { min-height: auto; }
  .sa-page-hero__inner {
    grid-template-columns: 1fr;
    padding: 110px 18px 64px;
    gap: 24px;
  }
  .sa-page-hero__title { font-size: 28px; }
  .sa-page-hero__desc { font-size: 15px; line-height: 1.4; }
  .sa-page-hero__illus { justify-content: center; }
  .sa-page-hero__illus img { max-width: 280px; }
  .sa-decor--arcoiris-eventos { width: 200px; transform: translateY(35%); }
  .sa-decor--ilustracion-clases { width: 220px; transform: translateY(15%); }
  /* En /centro el hero de clases: texto arriba, textura y SVG quedan donde están */
  .page-template-page-centro .sa-page-hero--clases { min-height: 480px; }
  .page-template-page-centro .sa-page-hero--clases .sa-page-hero__inner {
    padding-top: 20px;
  }
  .page-template-page-centro .sa-page-hero--clases .sa-page-hero__text {
    transform: translateY(-30%);
  }

  /* ── HISTORIA ─────────────────────────────────────────────────── */
  .sa-historia { --inner-pad: 18px; }
  .sa-historia-hero {
    min-height: auto;
    padding: 130px 0 100px;
  }
  .sa-historia-hero__title { font-size: 32px; }
  .sa-historia-hero__desc { font-size: 15px; }
  .sa-historia-hero__arcoiris { width: 176px; }
  .sa-historia-hero__rombo { display: none; }
  .sa-historia-intro {
    padding: 64px 0;
  }
  .sa-historia-intro__title { font-size: 28px; }
  .sa-historia-intro__text p { font-size: 15px; }
  .sa-historia-intro__title bold:last-child { display: block; }
  .sa-historia-intro__photo { aspect-ratio: 4 / 3; }
  .sa-historia-intro__gota { width: 80px; }
  /* Timeline horizontal scroll-snap — cada entry = card vertical */
  .sa-historia-timeline { padding: 56px 0 120px; overflow: visible; }
  .sa-historia-timeline__inner {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 0 0 24px;
    gap: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .sa-historia-timeline__inner::before,
  .sa-historia-timeline__inner::after {
    content: '';
    flex: 0 0 19%;
    flex-shrink: 0;
  }
  .sa-historia-timeline__inner::-webkit-scrollbar { display: none; }
  /* Ocultar la línea original; usaremos pseudo en el primer entry */
  .sa-historia-timeline__line { display: none; }
  /* Línea horizontal entre el primer y último dot (6 gaps = 7 entries timeline) */
  .sa-historia-timeline__inner .sa-historia-timeline__entry:first-of-type::before {
    content: '';
    position: absolute;
    top: calc(62vw + 52px);
    left: 50%;
    width: calc(6 * (100% + 18px));
    height: 8px;
    background: #fff;
    z-index: 0;
    pointer-events: none;
  }
  .sa-historia-timeline__entry {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0;
    flex: 0 0 62%;
    scroll-snap-align: center;
    position: relative;
    align-items: center;
    text-align: center;
    z-index: 1;
  }
  .sa-historia-timeline__entry--left .sa-historia-timeline__text,
  .sa-historia-timeline__entry--right .sa-historia-timeline__text,
  .sa-historia-timeline__entry--left .sa-historia-timeline__photo,
  .sa-historia-timeline__entry--right .sa-historia-timeline__photo {
    grid-column: auto !important;
    grid-row: auto !important;
    text-align: center !important;
    justify-self: auto !important;
  }
  .sa-historia-timeline__photo {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    order: 1;
    border-radius: 12px;
  }
  .sa-historia-timeline__dot {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 44px;
    height: 44px;
    order: 2;
    margin: 4px 0;
  }
  .sa-historia-timeline__text {
    order: 3;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
  .sa-historia-timeline__year { font-size: 30px; }
  .sa-historia-timeline__title { font-size: 15px; }
  .sa-historia-timeline__body { font-size: 13px; }
  /* HOY ahora es hermano de __inner (no parte del carrusel) */
  .sa-historia-timeline__entry--hoy {
    display: block !important;
    margin: 40px auto 0 !important;
    padding: 40px 16px;
    max-width: 280px;
    text-align: center;
    position: relative;
  }
  .sa-historia-timeline__entry--hoy .sa-historia-timeline__year { font-size: 44px; position: relative; z-index: 1; }
  .sa-historia-timeline__entry--hoy .sa-historia-timeline__title { position: relative; z-index: 1; }
  .sa-historia-timeline__entry--hoy .sa-historia-timeline__body { position: relative; z-index: 1; }
  .sa-historia-timeline__entry--hoy .sa-historia-timeline__photo { display: none; }
  .sa-historia-timeline__entry--hoy .sa-historia-timeline__dot { display: none; }
  .sa-historia-timeline__entry--hoy .sa-historia-timeline__hoy-deco {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 250%;
    max-width: none;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }
  .sa-historia-comunidad { padding: 80px 0; }
  .sa-historia-comunidad__title { font-size: 26px; }
  .sa-historia-comunidad__text p { font-size: 14px; }
  .sa-historia-comunidad__cubo { width: 80px; }
  .sa-historia-himno { padding: 64px 0; }
  .sa-historia-himno__title { font-size: 22px; white-space: normal; }
  .sa-historia-himno__text p { font-size: 14px; }
  .sa-historia-himno__deco-left,
  .sa-historia-himno__deco-right { display: none; }
  .sa-historia-final { padding: 64px 0 160px; }
  .sa-historia-final__text { padding-top: 80px; }
  .sa-historia-final__title { font-size: 28px; }
  .sa-historia-final__text p { font-size: 15px; }
  .sa-historia-final__ctas { grid-template-columns: 1fr 1fr; }
  .sa-historia-final__btn { padding: 12px 14px; font-size: 11px; display: flex; align-items: center; justify-content: center; }
  .sa-historia-final__btn:last-child { grid-column: 1 / -1; }
  .sa-historia-final__photo { aspect-ratio: 4 / 3; }
  .sa-historia-final__cuadrados { width: 70px; top: 50px; }

  /* ── MIEMBROS ─────────────────────────────────────────────────── */
  .sa-miembros__body { padding: 110px 0 140px; }
  .sa-miembros__inner { padding: 0 18px; }
  .sa-miembros__heading { font-size: 28px; margin-bottom: 18px; text-align: center; }
  .sa-miembros__grid {
    --gap: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
  }
  .sa-miembros__grid > .sa-miembro-card {
    flex: 0 0 calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
  }
  .sa-miembro-card__info { padding: 6px 8px 10px; gap: 2px; text-align: center; }
  .sa-miembro-card__cargo { font-size: 8px; }
  .sa-miembro-card__name { font-size: 11px; line-height: 1.15; }
  .sa-miembros__arcoiris { display: none; }
  .sa-miembros__rectangulos { display: none; }
  /* Arcoiris mobile-only: uno izq arriba, uno der abajo, detrás del texto */
  .sa-miembros__arcoiris-mobile {
    display: block;
    position: absolute;
    width: 70%;
    height: auto;
    pointer-events: none;
    z-index: 0;
  }
  .sa-miembros__arcoiris-mobile--izq {
    top: 30%;
    left: 0;
    transform: scaleX(-1);
  }
  .sa-miembros__arcoiris-mobile--der {
    top: 62%;
    right: 0;
  }

  /* ── GALERÍA ARCHIVE ──────────────────────────────────────────── */
  .sa-galeria-hero { min-height: auto; padding: 130px 0 100px; }
  .sa-galeria-hero__inner { transform: none; }
  .sa-galeria-hero__title { font-size: 26px; padding: 10px 14px; }
  .sa-galeria-hero__cta { font-size: 14px; padding: 10px 28px; min-width: 60%; }
  .sa-galeria-hero__deco--izq { width: 160px; bottom: 30px; opacity: 1; z-index: 3; }
  .sa-galeria-hero__deco--der { width: 140px; opacity: 1; z-index: 3; }
  .sa-galeria-body { padding: 48px 0 100px; }
  .sa-galeria-body__inner { padding: 0 18px; }
  .sa-galeria-archive .sa-galeria-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: clamp(180px, 50vw, 220px);
    margin-bottom: 48px;
  }
  .sa-galeria-archive .sa-galeria-mosaic .sa-galeria-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .sa-galeria-archive .sa-galeria-card__thumb { aspect-ratio: 16 / 10; }
  .sa-galeria-archive .sa-galeria-card__title { font-size: 13px; }
  .sa-galeria-seccion { margin-bottom: 48px; }
  .sa-galeria-seccion__title { font-size: 18px; }
  .sa-galeria-seccion__date { font-size: 12px; }
  .sa-galeria-share { font-size: 13px; margin-top: 48px; }
  .sa-carrusel__btn--prev { left: -8px; }
  .sa-carrusel__btn--next { right: -8px; }
  .sa-carrusel__btn svg { width: 26px; }

  /* ── CONTACTO ─────────────────────────────────────────────────── */
  .sa-contacto__section { padding: 110px 0 64px; }
  .sa-contacto__inner { padding: 0 18px; gap: 24px; }
  .sa-contacto__title { font-size: 36px; }
  .sa-contacto__lead { font-size: 15px; }
  .sa-contacto__field input,
  .sa-contacto__field textarea { font-size: 15px; padding: 11px 14px; }
  .sa-contacto__field textarea { min-height: 130px; }
  .sa-contacto__submit { padding: 12px 28px; font-size: 13px; }
  .sa-contacto__arcoiris { width: 170px; }

  /* ── SINGLE EVENTO / CLASE ────────────────────────────────────── */
  .sa-single-evento__body,
  .sa-single-clase__body {
    padding: 110px 0 80px;
  }
  .sa-single-evento__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 18px;
  }
  .sa-single-clase__inner {
    grid-template-columns: 2fr 3fr;
    gap: 14px;
    padding: 0 18px;
    align-items: start;
  }
  .sa-single-evento__tag,
  .sa-single-clase__tag { font-size: 14px; }
  .sa-single-evento__title,
  .sa-single-clase__title { font-size: 28px; }
  .sa-single-evento__meta p,
  .sa-single-clase__meta p { font-size: 14px; }
  .sa-single-evento__desc,
  .sa-single-clase__desc { font-size: 15px; line-height: 1.55; }
  .sa-single-evento__entrada { font-size: 16px; }
  .sa-single-clase__contacto { font-size: 12px; padding: .55em 1.2em; }
  .sa-single-clase__img { aspect-ratio: 5 / 6; max-height: none; min-height: 0; }
  .sa-single-clase__tag { font-size: 11px; }
  .sa-single-clase__title { font-size: 22px; }
  .sa-single-clase__meta p { font-size: 12px; }
  .sa-single-clase__desc { font-size: 13px; line-height: 1.5; }
  .sa-single-evento__mapa-section { padding-bottom: 100px; }
  .sa-single-evento__mapa-wrap { padding: 0 18px; }
  .sa-single-evento__mapa-title { font-size: 18px; }
  .sa-single-evento__mapa iframe { height: 240px; }
  .sa-single-evento__rombo { width: 50px; }
  .sa-single-evento__rombo--tl { transform: translate(-30%, -30%); }
  .sa-single-evento__rombo--br { transform: translate(30%, 30%); }

  /* ── FOOTER — todo en una línea (sin label "Seguínos en redes") ── */
  .sa-footer { padding: 22px 0 26px; }
  .sa-footer__bg {
    transform: scaleY(1.65);
    transform-origin: bottom center;
  }
  .sa-footer__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 0 14px;
  }
  .sa-footer__brand { gap: 10px; flex-shrink: 0; }
  .sa-footer__escudo,
  .sa-footer__logo { height: 48px; }
  .sa-footer__divider { height: 38px; width: 3px; }
  .sa-footer__social-section { gap: 10px; flex-wrap: nowrap; flex-shrink: 0; padding-right: 14px; }
  .sa-footer__social-label { display: none; }
  .sa-footer__social-links { flex-direction: row; gap: 8px; padding-right: 8px; }
  .sa-footer__social-row { gap: 0; }
  .sa-footer__social-icon { width: 36px; height: 36px; border-radius: 32%; }
  .sa-footer__social-icon svg { width: 22px; height: 22px; }
  .sa-footer__social-username { display: none; }
  .sa-footer__copy { font-size: 10px; }
}