/* Scroll suave general (fallback por JS también) */
html { scroll-behavior: smooth; }

/* Estado temporal mientras hay swipe */
.no-select {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  cursor: grabbing;
}

/* Evita que las imágenes se arrastren/“tomen” */
.miembros__grid img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* opcional si no hay enlaces dentro de la tarjeta */
}

/* Responsive */
@media (max-width: 8000px){ .miembros__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1024px){ .miembros__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 680px) { .miembros__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (max-width: 620px) { .miembros__header h2{font-size: 40px; } }
@media (max-width: 500px) { .miembros__header h2{font-size: 35px; } .btn-close-section { width: 45px !important; } }
@media (max-width: 400px) { .miembros__header h2{font-size: 30px; } .btn-close-section { width: 45px !important; }}

@media (min-width: 3501px) and (max-width: 4000px){
    .btn-close-section { width: 90px !important; }
    .reveal__inner{
        width: 80% !important;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
    }
    .miembros__header h2{
        font-size: 105px !important; 
    }
    .miembros__icon{ 
        width: 60px !important; 
        height:auto; 
    }
    .miembros__grid{
        margin-top: 26px;
        display:grid; 
        gap: 50px !important;
        /*grid-template-columns: repeat(4, minmax(0,1fr));*/
    }
    .miembro img{ 
        width:100%; 
        border-radius: 40px !important; 
        display:block; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        /*transition: box-shadow 0.3s ease;*/
        transition: box-shadow .3s ease, transform .2s ease;
    }
    .miembro img:hover {
        /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);*/
        box-shadow:0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px);
    }
    .miembro h3{ 
        font-weight:800; 
        font-size: 41px !important; 
        margin:25px 0 6px !important; 
    }
    .miembro p{ 
        color:#a9803e; 
        font-size: 31px !important; 
        margin:0; 
    }
    .pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
    .pager__btn{
      appearance:none; border:0; cursor:pointer;
      width:88px !important; height:88px !important; border-radius:50%;
      background:#0f3a44; color:#fff; font-size:60px !important; line-height:1;
      display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18);
    }
    .pager__btn:disabled{ opacity:.35; cursor:not-allowed; }

    .pager__dots{ display:flex; gap:8px; align-items:center; }
    .pager__dot{
      min-width: 68px !important;
      height: 68px !important;
      padding: 0 6px;                /* por si el 10 ocupa más */
      border-radius: 999px;          /* pastilla redonda/oval */
      border: none;
      background: #cdb493;
      color: #24363b;
      font-weight: 700;
      font-size: 35px !important;
      line-height: 28px;             /* centra el número vertical */
      text-align: center;
      cursor: pointer;
      opacity: .55;
      transition: transform .15s ease, opacity .15s ease, background .2s;
    }
}
@media (min-width: 2901px) and (max-width: 3500px){
    .btn-close-section { width: 80px !important; }
    .reveal__inner{
        width: 80% !important;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
    }
    .miembros__header h2{
        font-size: 90px !important; 
    }
    .miembros__icon{ 
        width: 60px !important; 
        height:auto; 
    }
    .miembros__grid{
        margin-top: 26px;
        display:grid; 
        gap: 50px !important;
        /*grid-template-columns: repeat(4, minmax(0,1fr));*/
    }
    .miembro img{ 
        width:100%; 
        border-radius: 20px !important; 
        display:block; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        /*transition: box-shadow 0.3s ease;*/
        transition: box-shadow .3s ease, transform .2s ease;
    }
    .miembro img:hover {
        /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);*/
        box-shadow:0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px);
    }
    .miembro h3{ 
        font-weight:800; 
        font-size: 35px !important; 
        margin:15px 0 6px !important; 
    }
    .miembro p{ 
        color:#a9803e; 
        font-size: 27px !important; 
        margin:0; 
    }
    .pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
    .pager__btn{
      appearance:none; border:0; cursor:pointer;
      width:78px !important; height:78px !important; border-radius:50%;
      background:#0f3a44; color:#fff; font-size:55px !important; line-height:1;
      display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18);
    }
    .pager__btn:disabled{ opacity:.35; cursor:not-allowed; }

    .pager__dots{ display:flex; gap:8px; align-items:center; }
    .pager__dot{
      min-width: 58px !important;
      height: 58px !important;
      padding: 0 6px;                /* por si el 10 ocupa más */
      border-radius: 999px;          /* pastilla redonda/oval */
      border: none;
      background: #cdb493;
      color: #24363b;
      font-weight: 700;
      font-size: 30px !important;
      line-height: 28px;             /* centra el número vertical */
      text-align: center;
      cursor: pointer;
      opacity: .55;
      transition: transform .15s ease, opacity .15s ease, background .2s;
    }
}
@media (min-width: 2701px) and (max-width: 2900px){
    .btn-close-section { width: 65px !important; }
    .reveal__inner{
        width: 80% !important;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
    }
    .miembros__header h2{
        font-size: 80px !important; 
    }
    .miembros__icon{ 
        width: 60px !important; 
        height:auto; 
    }
    .miembros__grid{
        margin-top: 26px;
        display:grid; 
        gap: 50px !important;
        /*grid-template-columns: repeat(4, minmax(0,1fr));*/
    }
    .miembro img{ 
        width:100%; 
        border-radius: 20px !important; 
        display:block; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        /*transition: box-shadow 0.3s ease;*/
        transition: box-shadow .3s ease, transform .2s ease;
    }
    .miembro img:hover {
        /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);*/
        box-shadow:0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px);
    }
    .miembro h3{ 
        font-weight:800; 
        font-size: 30px !important; 
        margin:15px 0 6px !important; 
    }
    .miembro p{ 
        color:#a9803e; 
        font-size: 22px !important; 
        margin:0; 
    }
    .pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
    .pager__btn{
      appearance:none; border:0; cursor:pointer;
      width:58px !important; height:58px !important; border-radius:50%;
      background:#0f3a44; color:#fff; font-size:45px !important; line-height:1;
      display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18);
    }
    .pager__btn:disabled{ opacity:.35; cursor:not-allowed; }

    .pager__dots{ display:flex; gap:8px; align-items:center; }
    .pager__dot{
      min-width: 48px !important;
      height: 48px !important;
      padding: 0 6px;                /* por si el 10 ocupa más */
      border-radius: 999px;          /* pastilla redonda/oval */
      border: none;
      background: #cdb493;
      color: #24363b;
      font-weight: 700;
      font-size: 25px !important;
      line-height: 28px;             /* centra el número vertical */
      text-align: center;
      cursor: pointer;
      opacity: .55;
      transition: transform .15s ease, opacity .15s ease, background .2s;
    }
}
@media (min-width: 2601px) and (max-width: 2700px){
    .reveal__inner{
        width: 80% !important;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
    }
    .miembros__header h2{
        font-size: 60px !important; 
    }
    .miembros__icon{ 
        width: 60px !important; 
        height:auto; 
    }
    .miembros__grid{
        margin-top: 26px;
        display:grid; 
        gap: 50px !important;
        /*grid-template-columns: repeat(4, minmax(0,1fr));*/
    }
    .miembro img{ 
        width:100%; 
        border-radius: 20px !important; 
        display:block; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        /*transition: box-shadow 0.3s ease;*/
        transition: box-shadow .3s ease, transform .2s ease;
    }
    .miembro img:hover {
        /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);*/
        box-shadow:0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px);
    }
    .miembro h3{ 
        font-weight:800; 
        font-size: 25px !important; 
        margin:15px 0 6px !important; 
    }
    .miembro p{ 
        color:#a9803e; 
        font-size: 17px !important; 
        margin:0; 
    }
    .pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
    .pager__btn{
      appearance:none; border:0; cursor:pointer;
      width:48px !important; height:48px !important; border-radius:50%;
      background:#0f3a44; color:#fff; font-size:30px !important; line-height:1;
      display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18);
    }
    .pager__btn:disabled{ opacity:.35; cursor:not-allowed; }

    .pager__dots{ display:flex; gap:8px; align-items:center; }
    .pager__dot{
      min-width: 38px !important;
      height: 38px !important;
      padding: 0 6px;                /* por si el 10 ocupa más */
      border-radius: 999px;          /* pastilla redonda/oval */
      border: none;
      background: #cdb493;
      color: #24363b;
      font-weight: 700;
      font-size: 20px !important;
      line-height: 28px;             /* centra el número vertical */
      text-align: center;
      cursor: pointer;
      opacity: .55;
      transition: transform .15s ease, opacity .15s ease, background .2s;
    }
}
@media (min-width: 2201px) and (max-width: 2600px){
    .reveal__inner{
        width: 80% !important;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
    }
    .miembros__header h2{
        font-size: 60px !important; 
    }
    .miembros__icon{ 
        width: 60px !important; 
        height:auto; 
    }
    .miembros__grid{
        margin-top: 26px;
        display:grid; 
        gap: 50px !important;
        /*grid-template-columns: repeat(4, minmax(0,1fr));*/
    }
    .miembro img{ 
        width:100%; 
        border-radius: 20px !important; 
        display:block; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        /*transition: box-shadow 0.3s ease;*/
        transition: box-shadow .3s ease, transform .2s ease;
    }
    .miembro img:hover {
        /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);*/
        box-shadow:0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px);
    }
    .miembro h3{ 
        font-weight:800; 
        font-size: 25px !important; 
        margin:15px 0 6px !important; 
    }
    .miembro p{ 
        color:#a9803e; 
        font-size: 17px !important; 
        margin:0; 
    }
    .pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
    .pager__btn{
      appearance:none; border:0; cursor:pointer;
      width:48px !important; height:48px !important; border-radius:50%;
      background:#0f3a44; color:#fff; font-size:30px !important; line-height:1;
      display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18);
    }
    .pager__btn:disabled{ opacity:.35; cursor:not-allowed; }

    .pager__dots{ display:flex; gap:8px; align-items:center; }
    .pager__dot{
      min-width: 38px !important;
      height: 38px !important;
      padding: 0 6px;                /* por si el 10 ocupa más */
      border-radius: 999px;          /* pastilla redonda/oval */
      border: none;
      background: #cdb493;
      color: #24363b;
      font-weight: 700;
      font-size: 20px !important;
      line-height: 28px;             /* centra el número vertical */
      text-align: center;
      cursor: pointer;
      opacity: .55;
      transition: transform .15s ease, opacity .15s ease, background .2s;
    }
}


.custom-line {
    border: none;                 /* quitamos el estilo por defecto */
    height: 2px;                  /* grosor */
    background-color: #d4b48c;    /* color */
    border-radius: 2px;           /* esquinas ligeramente redondeadas */
}

/* Flecha con bounce vertical */
.btn-arrow{
    appearance:none; border:0; background:transparent; cursor:pointer;
    width:40px; height:40px; display:grid; place-items:center;
    animation: arrowFloat 1.4s ease-in-out infinite;
}
.arrow-img{
     width:100%; 
    height:auto; 
    display:block; 
}
@keyframes arrowFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* (Opcional) bricks con movimiento lateral suave
.hero__bricks--left  { animation: brickFloat 3s ease-in-out infinite; }
.hero__bricks--right { animation: brickFloatR 3s ease-in-out infinite; }
@keyframes brickFloat { 0%,100%{transform:translateX(0)} 50%{transform:translateX(8px)} }
@keyframes brickFloatR{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-8px)} }
*/

/* ===== Sección colapsable ===== */
.reveal{
    /* estado cerrado */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition:
      max-height .7s ease,
      opacity .5s ease .15s,
      transform .5s ease .15s;
    will-change: max-height, opacity, transform;
    background: #fff; /* o el que uses */
}

/* estado abierto */
.reveal.is-open{
    max-height: 5000px;          /* suficiente para tu contenido */
    opacity: 1;
    transform: translateY(0);
}

/* interior para padding y layout */
.reveal__inner{
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px);
}

/* encabezado y grid de miembros (ajústalo a tu estilo) */
.miembros__header{
    display:flex; align-items:center; gap:14px; margin-bottom:18px;
    border-bottom: 3px solid #d8c1a0;
    padding-bottom: 12px;
    color: #435e69;
}
.miembros__icon{ 
    width:46px; 
    height:auto; 
}
.miembros__grid{
    margin-top: 26px;
    display:grid; 
    gap: 22px;
    /*grid-template-columns: repeat(4, minmax(0,1fr));*/
}
.miembro img{ 
    width:100%; 
    border-radius:8px; 
    display:block; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    /*transition: box-shadow 0.3s ease;*/
    transition: box-shadow .3s ease, transform .2s ease;
}
.miembro img:hover {
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);*/
    box-shadow:0 10px 28px rgba(0,0,0,.28); transform: translateY(-2px);
}
.miembro h3{ 
    font-weight:800; 
    font-size:1rem; 
    margin:.6rem 0 .2rem; 
}
.miembro p{ 
    color:#a9803e; 
    font-size:.9rem; 
    margin:0; 
}
/* Estado oculto (paginación) */
.miembro.is-hidden{ display:none; }

.miembros__grid.is-transitioning .miembro{
  opacity:0; transform: translateY(6px);
}

/* “staggered” sutil cuando abre */
.reveal.is-open .miembro{
    animation: cardIn .45s ease both;
}
.reveal.is-open .miembro:nth-child(1){ animation-delay:.05s }
.reveal.is-open .miembro:nth-child(2){ animation-delay:.10s }
.reveal.is-open .miembro:nth-child(3){ animation-delay:.15s }
.reveal.is-open .miembro:nth-child(4){ animation-delay:.20s }
/* añade más si hay más tarjetas */

/* Controles */
.pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
.pager__btn{
  appearance:none; border:0; cursor:pointer;
  width:38px; height:38px; border-radius:50%;
  background:#0f3a44; color:#fff; font-size:20px; line-height:1;
  display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.pager__btn:disabled{ opacity:.35; cursor:not-allowed; }

.pager__dots{ display:flex; gap:8px; align-items:center; }
.pager__dot{
  min-width: 28px;
  height: 28px;
  padding: 0 6px;                /* por si el 10 ocupa más */
  border-radius: 999px;          /* pastilla redonda/oval */
  border: none;
  background: #cdb493;
  color: #24363b;
  font-weight: 700;
  font-size: 13px;
  line-height: 28px;             /* centra el número vertical */
  text-align: center;
  cursor: pointer;
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease, background .2s;
}
.pager__dot:hover{ opacity: .85; transform: translateY(-1px); }
/*.pager__dot[aria-selected="true"]{ opacity:1; transform: scale(1.15); }*/
.pager__dot[aria-selected="true"]{
  opacity: 1;
  background: #0f3a44;
  color: #fff;
  transform: none;
}

.close-section {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.btn-close-section {
    width: 60px; /* ajusta tamaño */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.btn-close-section:hover {
    transform: scale(1.08);
}

@keyframes cardIn{
  from{ opacity:0; transform: translateY(8px) scale(.98); }
  to  { opacity:1; transform: none; }
}

/* Accesibilidad: si usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .btn-arrow, .hero__bricks--left, .hero__bricks--right,
  .reveal, .miembro { animation: none !important; transition: none !important; }
}