/* =========================
   ESPACIOS - estilos exclusivos
   prefijo: esp_
   ========================= */

   :root{
    --esp-accent: #2b8a78;
    --esp-dark: #0f2a26;
    --esp-card-bg: #ffffff;
    --esp-radius: 14px;
    --esp-gap: 18px;
  }
  
  /* container helper */
  .container { max-width:1200px; margin:0 auto; padding:0 20px; }
  
  /* HERO */
  .esp_hero{
  /* background: url('/img/img6.jpg') center/cover no-repeat; */
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative; /* NECESARIO */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  }


  .hero-overlayServicios {
    width: 100%;
    height: 50vh;
    background: rgba(4, 4, 4, 0.567);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* overlay abajo del texto */
}


.esp_hero-inner{
  color: white;
  max-width: 700px;
  position: relative;
  z-index: 2; /* texto por encima */
}
  .esp_hero-inner h1{ font-size:2.2rem; color:#FFF; margin-bottom:6px; }
  .esp_hero-inner p{ color:#FFF; }
  
  /* GRID DE CARDS */
  .esp_list.container{
    
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    padding: 36px 20px 80px;
  }
  
  /* CARD */
  .esp_card{
    background:var(--esp-card-bg);
    border-radius: var(--esp-radius);
    overflow:hidden;
    box-shadow: 0 8px 30px rgba(17,20,22,0.06);
    display:flex;
    flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .esp_card:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(17,20,22,0.09); }
  
  .esp_card-media{ height:180px; overflow:hidden; background:#efefef; display:flex; align-items:center; justify-content:center; }
  .esp_card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  
  .esp_card-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:14px; flex:1; }
  .esp_card-body h3{ margin:0; font-size:1.05rem; color:var(--esp-dark); }
  .esp_card-sub{ color:#667; font-size:0.95rem; margin-top:4px; }
  
  .esp_card-actions{ margin-top:auto; display:flex; gap:10px; align-items:center; }
  
  /* botones */
  .esp_btn{ cursor:pointer; border:none; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:10px 14px; font-weight:600; text-decoration:none; }
  .esp_btn-outline{ background:transparent; color:var(--esp-dark); border:1px solid rgba(17,20,22,0.06); }
  .esp_btn-cta{ background:var(--esp-accent); color:white; box-shadow: 0 6px 18px rgba(43,138,120,0.18); }
  .esp_btn-cta:hover{ transform: translateY(-2px); }
  .esp_btn:focus{ outline: 2px solid rgba(43,138,120,0.18); }
  
  /* special card juntas slightly taller */
  .esp_card-juntas .esp_card-media{ height:200px; }
  
  /* ============ MODAL (glassmorphism) ============ */
  .esp_modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
  .esp_modal[aria-hidden="false"]{ display:flex; }
  
  .esp_modal-backdrop{
    position:absolute; inset:0;
    background: rgba(6,9,10,0.35);
    backdrop-filter: blur(6px) saturate(120%);
  }
  
  /* inner dialog */
  .esp_modal-inner{
    position:relative;
    width: min(1100px, 96%);
    max-height: 90vh;
    overflow:hidden;
    display: flex;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.60));
    backdrop-filter: blur(6px);
    transform: translateY(20px) scale(.98);
    opacity:0;
    transition: all .28s cubic-bezier(.2,.9,.2,1);
  }
  .esp_modal[aria-hidden="false"] .esp_modal-inner{ transform: none; opacity:1; }
  
  /* close */
  .esp_modal-close{
    position:absolute; right:14px; top:10px; z-index:5;
    background:transparent; border:none; font-size:28px; color:var(--esp-dark); cursor:pointer;
  }
  
  /* grid inside modal */
  .esp_modal-grid{ display:grid; grid-template-columns: 1fr 380px; gap:18px; align-items:start; }
  .esp_modal-main{ background:#fff; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:320px; }
  .esp_modal-main img{ width:100%; height:100%; object-fit:cover; display:block; }
  
  /* side column */
  .esp_modal-side{ padding:6px 4px 4px; display:flex; flex-direction:column; gap:12px; min-height:320px; }
  .esp_modal-thumbs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start; padding:6px; border-radius:10px; }
  .esp_modal-thumbs img{ width:84px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition: transform .15s ease, border-color .15s ease; }
  .esp_modal-thumbs img:hover{ transform: translateY(-4px); }
  .esp_modal-thumbs img.active{ border-color: var(--esp-accent); transform: translateY(-4px); }
  
  /* info */
  .esp_modal-info h3{ margin:0; font-size:1.15rem; color:var(--esp-dark); }
  .esp_modal-info p{ color:#555; font-size:0.95rem; margin:6px 0 0; }
  
  /* modal actions */
  .esp_modal-actions{ margin-top:10px; display:flex; gap:8px; }
  
  /* form */
  .esp_modal-form{ margin-top:10px; padding-top:6px; display:flex; flex-direction:column; gap:8px; }
  .esp_modal-form label{ display:flex; flex-direction:column; text-align:left; font-size:0.9rem; color:#333; }
  .esp_modal-form input, .esp_modal-form select, .esp_modal-form textarea{
    padding:10px; border-radius:8px; border:1px solid #e0e0e0; font-size:0.95rem;
    background: rgba(255,255,255,0.9);
  }
  .esp_modal-form textarea{ resize:vertical; min-height:60px; }
  
  /* submit */
  .esp_btn-submit{ background:var(--esp-accent); color:white; border-radius:10px; padding:12px; margin-top:6px; }
  
  /* responsive modal */
  @media (max-width: 990px) {
    .esp_modal-grid{ grid-template-columns: 1fr 320px; }
  }
  @media (max-width: 720px) {
    .esp_modal-inner{ padding:12px; }
    .esp_modal-grid{ grid-template-columns: 1fr; }
    .esp_modal-side{ order:2; }
    .esp_modal-main{ order:1; min-height:260px; }
    .esp_modal-thumbs{ justify-content:center; }
  }
  
  /* small tweaks */
  .esp_card h3{ letter-spacing: .1px; }
  

  /* ===== SCROLL INTERNO MODAL (MÓVIL FIX) ===== */
.esp_modal-grid{
  overflow-y: auto;
  max-height: calc(90vh - 40px);
  padding-right: 6px;
}

/* scrollbar discreta */
.esp_modal-grid::-webkit-scrollbar{
  width: 6px;
}
.esp_modal-grid::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
}

@media (max-width: 720px) {

  .esp_modal-inner{
    max-height: 95vh;
  }

  .esp_modal-grid{
    max-height: 95vh;
  }

  .esp_modal-form{
    padding-bottom: 20px;
  }
}