/* ===============================
   Fuentes
================================= */
@font-face{
    font-family: "Gotham Book";
    src: url("/fonts/Gotham-Book.woff2") format("woff2"),
         url("/fonts/Gotham-Book.woff") format("woff");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face{
    font-family: "Gotham Bold";
    src: url("/fonts/Gotham-Bold.woff2") format("woff2"),
         url("/fonts/Gotham-Bold.woff") format("woff");
    font-weight: 700; font-style: normal; font-display: swap;
  }
  
  :root{
    --color-dark: #2A3A1C;
    --paper: #FFFBDC;
    --mint: #7CC5AD;
    --modal-frame: #C2C057;     
    --panel-bg:   #FFFBDC;    
    --card-w: 390px;            
    --card-h: 400px;
    --cards-gap: 100px;          
    --tex-image: url("/img/Texturatartarjetas.svg");
    --bush-h: 180px;           
    --carousel-maxvh-desktop: 60vh;  
  }
  
  html, body{
    font-family:"Gotham Book", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--color-dark);
  }
  h1,h2,h3,.card__title{
    font-family:"Gotham Bold", system-ui, sans-serif;
    font-weight:700;
  }
  
  /* ===== Fondo general y hero ===== */
  .exp-body{ margin:0; background:var(--mint); overflow-x:hidden; }
  .exp-hero{
    background:var(--mint); position:relative; height:800px;
    display:grid; place-items:center; overflow:hidden;
  }
  .exp-hero__title{ width:min(1100px, 86vw); height:auto; display:block; }
  .koi{ position:absolute; width:min(340px, 28vw); height:auto; pointer-events:none; filter:drop-shadow(0 6px 0 rgba(0,0,0,.18)); }
  .koi--left{ left:clamp(-40px,-2vw,-10px); bottom:24px; transform:rotate(-8deg); }
  .koi--right{ right:clamp(-40px,-2vw,-10px); bottom:28px; transform:rotate(8deg); }
  
  /* ===== Main con textura ===== */
  .bio-page{ display:flex; flex-direction:column; }
  .bio-main{
    position:relative; flex:1 1 auto; display:flex; justify-content:center;
    padding:56px 0 120px;
  }
  .bio-main::before{
    content:""; position:absolute; inset:0;
    background-image:var(--tex-image); background-repeat:repeat; background-size:420px;
    opacity:.16; pointer-events:none; z-index:0;
  }
  
  /* ===== Grid TARJETAS ===== */
  .cards{
    position:relative; z-index:1;
    width: clamp(320px, 90vw, 1500px);
    margin-inline:auto;
    box-sizing: border-box;
    display:grid;
    grid-template-columns: repeat(3, minmax(280px, var(--card-w)));
    gap: var(--cards-gap);
    padding-inline: clamp(18px, 2.8vw, 28px);
    justify-content:center;
  }
  
  /* ===== Tarjeta polaroid ===== */
  .card{
    width:100%;
    max-width: var(--card-w);
    height:var(--card-h);
    background: #fff;
    border-radius:0;
    box-shadow:0 10px 26px rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.24);
    overflow:hidden; display:flex; flex-direction:column;
    padding: 26px 26px 0;
    transform:translateY(0) scale(1);
    transition:transform .28s cubic-bezier(.22,.7,.12,.99), box-shadow .28s;
    cursor:pointer;
  }
  .card:hover{ transform:translateY(-6px) scale(1.012); box-shadow:0 18px 36px rgba(0,0,0,.22), 0 6px 0 rgba(0,0,0,.22); }
  .card__img{
    width:100%; height:70%;
    object-fit:cover; object-position:center; display:block; background:#ddd;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  }
  .card__caption{ flex:1 1 auto; display:flex; align-items:center; padding:20px 12px 24px; }
  .card__title{ margin:0; font-size:1.36rem; line-height:1.24; letter-spacing:.2px; }
  
  /* ===== Footer ===== */
  .site-footer{
    --bg:#7CC5AD;
    --bush-h: clamp(140px, 20vw, 260px);
    position:relative; background:var(--bg);
    padding:48px 16px calc(52px + var(--bush-h));
    display:flex; align-items:center; justify-content:center; gap:28px;
    overflow:hidden;
    isolation:isolate;
  }

  .site-footer::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:var(--bush-h);
    background-image:url("/img/memorias/experiencias/arbusto.gif"); 
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size: cover;  
    pointer-events:none; z-index:0;
  }

  .site-footer.site-footer--tile::after{
    background-repeat: repeat-x;
    background-size: auto 100%; 
  }
  
  .mem-cta{ position:absolute; top:12px; right:24px; background:#F28C28; color:#fff; font-weight:900; letter-spacing:.5px; text-decoration:none; padding:10px 18px; box-shadow:0 4px 14px rgba(0,0,0,.12); transition:transform .15s ease, box-shadow .15s ease; z-index:5; }
  .mem-cta:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.16); }
  .social{ display:flex; gap:28px; z-index:1; }
  .social-link{ --bg:#1E4022; width:64px; height:64px; border-radius:999px; background:var(--bg); color:#fff; display:grid; place-items:center; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .social-link:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.22); }
  
  /* ===== MODAL ===== */
  .modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.38); backdrop-filter:blur(2px); }
  .modal.is-open{ display:flex; }
  
  .modal__dialog{
    width:min(1200px,92vw);
    max-height:84vh;
    position:relative; border-radius:24px; overflow:hidden;
    padding:28px; padding-right:calc(28px + 40px + 12px);
    box-sizing:border-box; background:var(--modal-frame);
    box-shadow:0 18px 46px rgba(0,0,0,.45);
  }
  .modal__dialog::before{
    content:""; position:absolute; inset:0; background-image:var(--tex-image);
    background-size:800px auto; background-repeat:repeat;
    opacity:.10; pointer-events:none; border-radius:inherit; z-index:0;
  }
  .modal__close{
    position:absolute; top:28px; right:28px; width:40px; height:40px; background:#EFECD1; color:#2A3A1C;
    border:0; border-radius:0; box-shadow:0 2px 0 rgba(0,0,0,.15); font-size:22px; line-height:1; z-index:3; cursor:pointer;
  }
  
  /* Panel interno */
  .modal__panel{
    position:relative; z-index:1; background:var(--panel-bg);
    border-radius:24px; margin-right:20px;
    display:grid; grid-template-columns:520px minmax(0,1fr);
    align-items:stretch; gap:28px; padding:28px 24px 30px;
    box-sizing:border-box; overflow:hidden;
    max-height:calc(84vh - 56px);
  }
  
  /* Figura/carrusel */
  .modal__figure{
    margin:0; border-radius:18px; overflow:hidden; position:relative;
    padding: 16px 16px 20px;
    height:auto; display:flex; align-items:center; justify-content:center;
  }
  .carousel{
    width:100%;
    aspect-ratio: 4 / 3;
    max-height: var(--carousel-maxvh-desktop);
    border-radius:12px; overflow:hidden; background:var(--panel-bg);
    position:relative;
  }
  .carousel__img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .carousel__btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border:0; z-index:2;
    background:rgba(0,0,0,.35); color:#fff; font-size:20px; cursor:pointer;
  }
  .carousel__btn--prev{ left:14px; }
  .carousel__btn--next{ right:14px; }
  
  /* Texto (solo este scrollea) */
  .modal__content{ min-width:0; height:100%; position:relative; }
  .modal__text{
    height:100%; max-height:100%; overflow:auto;
    padding:12px 28px 56px 8px; box-sizing:border-box; color:var(--color-dark); line-height:1.6; text-align:justify;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .modal__text::-webkit-scrollbar{ width:0; height:0; }
  
  /* Rail externo */
  .modal__rail{
    position:absolute; top:calc(28px + 40px + 8px); right:28px; bottom:28px;
    width:40px; background:#EFECD1; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
    display:grid; grid-template-rows:40px 1fr 40px; align-items:center; justify-items:center; z-index:2;
  }
  .modal__btn{ width:40px; height:40px; border:0; border-radius:0; background:#EFECD1; cursor:pointer; position:relative; }
  .modal__btn::before{ content:""; position:absolute; inset:0; margin:auto; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; }
  .modal__btn--up::before{ border-bottom:14px solid var(--color-dark); }
  .modal__btn--down::before{ border-top:14px solid var(--color-dark); }
  .modal__track{ position:relative; width:14px; height:100%; margin:6px auto; background:#EFECD1; }
  .modal__thumb{ position:absolute; left:50%; transform:translateX(-50%); width:12px; min-height:38px; background:#2A3A1C; cursor:grab; }
  
  .carousel.is-single .carousel__btn{
    display: none;
  }
  /* ===== Responsive ===== */
  @media (max-width: 1280px){
    .cards{
      grid-template-columns: repeat(2, minmax(280px, 1fr));
      width: clamp(320px, 90vw, 1500px);
    }
  }
  @media (max-width: 920px){
    .cards{
      grid-template-columns: 1fr;
      width: min(560px, 92vw);
      gap: clamp(28px, 6vw, var(--cards-gap));
      padding-inline: 20px;
    }
    .card{
      max-width: 100%;
      height: auto;
    }
    .card__img{
      aspect-ratio: 4 / 3;
      height: auto;
      object-fit: cover;
    }
  
    /* Modal apilado */
    .modal{ align-items:flex-start; padding:12px 0; overflow:auto; }
    .modal__dialog{ width:min(740px,96vw); max-height:none; padding:18px; padding-right:18px; }
    .modal__panel{
      height:auto; max-height:none; margin-right:0;
      grid-template-columns:1fr; gap:16px; padding:16px; overflow:visible;
    }
    .modal__figure{ padding:12px 12px 16px; }
    .carousel{ aspect-ratio: 16 / 9; max-height:48vh; min-height:220px; }
    .modal__content{ height:auto; }
    .modal__text{ max-height:none; overflow:visible; padding:8px 4px 4px 4px; }
    .modal__rail{ display:none; }
    .modal__close{ right:18px; top:18px; width:28px; height:28px; font-size:18px; }
  }
  @media (max-width: 560px){
    .site-footer{ padding:48px 16px calc(52px + var(--bush-h)); flex-direction:column; gap:24px; }
    .mem-cta{ position:static; order:1; }
    .social{ order:2; justify-content:center; }
    .modal__dialog{ width:94vw; padding:14px; }
    .modal__panel{ border-radius:16px; padding:12px; gap:12px; }
    .modal__figure{ border-radius:12px; }
    .modal__text{ font-size:.95rem; line-height:1.55; }
  }
  
  /* ===== anti-scroll ===== */
  .exp-body, .exp-body * , .exp-body *::before, .exp-body *::after{ box-sizing: border-box; }
  .bio-main{ overflow-x: hidden; }

  /* --- Hero compacto en móviles (≤600px) --- */
@media (max-width: 600px){
  .exp-hero{
    height: clamp(340px, 58svh, 520px);
  }
  .koi--left{  bottom: 10px; }
  .koi--right{ bottom: 12px; }
}

@media (max-width: 480px){
  .exp-hero{ height: clamp(320px, 54svh, 480px); }
}