:root{
  --bg: #EDEBE6;
  --card: #FAFAF7;
  --accent: #6B8E85;
  --muted: #8B8B8B;
  --title: #333333;

  /* Ajusta esto si tu header es más alto/bajo */
  --modal-top-gap: 96px; /* prueba 84px / 96px / 110px */

  /* ✅ NUEVO: altura de las cards (antes 520px) */
  --acc-card-h: 300px; /* usa 260px si la quieres EXACTA a la mitad de 520 */
}

/* Base */
body{
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cedi-logos{ height: 44px; width:auto; object-fit:contain; }
.cedi-nav .nav-link{
  color: var(--card);
  font-weight: 600;
  padding: .6rem .9rem;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.cedi-nav .nav-link:hover{ color: var(--accent); background: rgba(107,142,133,.12); }

/* Titulares */
.talleres-title{ color: var(--title); font-weight: 800; }
.talleres-lead{ color: var(--muted); max-width: 70ch; margin: 0 auto; }
.section-title{ color: var(--title); font-weight: 800; }

/* Cards superiores */
.info-card{
  background: var(--card);
  border: none;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.info-card--accent{ box-shadow: 0 14px 30px rgba(107,142,133,.10); }
.info-title{ color: var(--title); font-weight: 800; }
.info-text{ color: var(--title); opacity: .92; line-height: 1.7; }
.info-icon i{ color: var(--accent); font-size: 2rem; }

/* Botones */
.btn-cedi{
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .65rem 1.1rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 22px rgba(107,142,133,.18);
}
.btn-cedi:hover{ filter: brightness(.96); }

.btn-cedi-outline{
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid rgba(107,142,133,.45) !important;
  border-radius: 999px !important;
  padding: .65rem 1.1rem !important;
  font-weight: 700 !important;
}

/* ===== Desktop Accordion Slider ===== */
.acc-nav{ display:flex; gap:10px; }
.acc-btn{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: none;
  background: var(--card);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  display:grid; place-items:center;
  color: var(--title);
}
.acc-btn:hover{ color: var(--accent); }

.acc-slider{
  display:flex;
  gap: 14px;
  align-items: stretch;
  overflow: hidden; /* en mobile/tablet lo cambiamos a scroll */
}

.acc-card{
  background: var(--card);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  height: var(--acc-card-h);   /* ✅ antes 520px */
  position: relative;
  cursor: pointer;

  flex: 0 0 240px;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
  outline: none;
}
.acc-card.is-active{
  flex-basis: 760px;
  box-shadow: 0 18px 42px rgba(107,142,133,.12);
}
.acc-card:focus-visible{
  box-shadow: 0 0 0 4px rgba(107,142,133,.22), 0 18px 42px rgba(0,0,0,.08);
}

/* Closed (vertical 50/50) */
.acc-closed{ height: 100%; display:flex; flex-direction: column; }
.closed-top{
  height: 50%;
  padding: 18px; /* un poco menos para que no se apriete */
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.card-title{
  color: var(--title);
  font-size: 1.15rem; /* ligeramente menor para altura corta */
  font-weight: 800;
  line-height: 1.15;
}
.card-meta{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: .92rem;
}
.badge-level{
  background: rgba(107,142,133,.12);
  color: var(--accent);
  border-radius: 999px;
  padding: .18rem .6rem;
  font-weight: 700;
  font-size: .82rem;
}
.meta-dot{ opacity: .7; }
.meta-date{ color: var(--muted); }

.closed-media{ height: 50%; position: relative; }
.closed-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.img-ph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color: rgba(0,0,0,.25);
  font-weight: 800;
  letter-spacing: .6px;
}
.closed-media:not(.img-missing) .img-ph{ display:none; }

/* Open (horizontal) */
.acc-open{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.acc-card.is-active .acc-open{ opacity:1; pointer-events:auto; }
.acc-card.is-active .acc-closed{ opacity:0; pointer-events:none; }

.open-media{ position: relative; }
.open-img{ width:100%; height:100%; object-fit:cover; display:block; }
.open-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15), rgba(0,0,0,0));
}
.open-overlay{
  position:absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
}
.overlay-kicker{
  letter-spacing: .28em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .78rem;
}
.overlay-sub{
  margin-top: 8px;
  font-weight: 700;
  opacity: .92;
}
.open-media:not(.img-missing) .img-ph{ display:none; }

.open-panel{
  padding: 18px; /* menos padding para altura corta */
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.open-title{ color: var(--title); font-weight: 900; line-height: 1.15; font-size: 1.15rem; }
.open-desc{ color: var(--title); opacity: .9; line-height: 1.55; }

.open-icons{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.open-icons .ico{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  min-width: 96px;
  color: var(--title);
  opacity: .85;
  font-size: .85rem;
}
.open-icons i{ color: var(--accent); font-size: 1.25rem; }

/* Mobile list */
.mobile-list{ display:flex; flex-direction: column; gap: 12px; }
.mobile-item{
  width:100%;
  text-align:left;
  background: var(--card);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.m-title{ color: var(--title); font-weight: 800; font-size: 1.05rem; }
.m-date{ color: var(--muted); margin-top: 4px; font-size: .95rem; }
.m-more{ margin-top: 8px; color: var(--accent); font-weight: 700; }

/* ================================
   MODAL (FIX: separado del header en TODOS los tamaños)
   ================================ */

/* Modal */
.cedi-modal{
  background: var(--card);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* Dialog: margen superior para no pegarse al header sticky */
#tallerModal .modal-dialog{
  margin-top: var(--modal-top-gap);
}

/* En pantallas chicas, controla bien el ancho */
@media (max-width: 575.98px){
  #tallerModal .modal-dialog{
    margin: 12px;
    margin-top: var(--modal-top-gap);
    max-width: calc(100% - 24px);
  }
}

/* cover responsive */
.modal-cover{
  position: relative;
  height: 240px;
  background: rgba(0,0,0,.05);
}
@media (max-width: 575.98px){
  .modal-cover{ height: 190px; }
}
.modal-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-cover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 55%, rgba(0,0,0,.18));
}

/* tache: SOLO en la foto */
.modal-close{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  color: #fff;
  padding: 0;
}
.modal-close:hover,
.modal-close:focus{
  background: rgba(0,0,0,.70);
  color: #fff;
}

/* si no hay imagen, deja ver el placeholder */
.modal-cover:not(.img-missing) .img-ph{ display:none; }

.cedi-modal-body{
  background: var(--card);
  padding: 18px 18px 20px;
  max-height: calc(100vh - (var(--modal-top-gap) + 240px + 80px));
  overflow: auto;
}

/* Se ELIMINA el tache extra del body */
.modal-close--mobile{ display:none !important; }

.modal-kicker{
  color: var(--muted);
  letter-spacing: .22em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .82rem;
}
.modal-title{ color: var(--title); font-weight: 900; margin: 8px 0 6px; }
.modal-meta{ color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.modal-text p{ color: var(--title); opacity: .92; line-height: 1.75; margin: 0 0 10px; }
.modal-text p:last-child{ margin-bottom: 0; }

/* ================================
   RESPONSIVE: slider usable en tablet (md) con swipe horizontal
   ================================ */
@media (max-width: 991.98px){
  .acc-slider{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .acc-card{
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 78vw;
    max-width: 520px;
    min-width: 320px;
    height: var(--acc-card-h); /* ✅ antes 520 */
  }
  /* en tablet no conviene “expandir” tanto */
  .acc-card.is-active{ flex-basis: auto; }
}

/* Mobile (sm): ajusta alturas del modal cover y cards */
@media (max-width: 575.98px){
  .acc-card{ min-width: 86vw; height: 280px; } /* ajusta si lo quieres aún más corto */
  .card-title{ font-size: 1.05rem; }
}

/* =========================================
   FIX REAL: cards bajas (300px) + estado abierto
   Evita cortes en Reading/Pronunciation
   ========================================= */

/* 1) Estado ABIERTO: el panel derecho no debe centrarse */
.acc-card.is-active .open-panel{
  justify-content: flex-start !important;
  overflow: auto !important;         /* scroll interno si no cabe */
  gap: 10px;
}

/* 2) Recorta el texto corto para que nunca rompa el layout */
.acc-card.is-active .open-desc{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;  /* prueba 2 o 3 */
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

/* 3) Los iconos pueden comerse el espacio: hazlos más compactos */
.acc-card.is-active .open-icons{
  gap: 10px !important;
  margin-top: auto !important;       /* empuja hacia abajo si hay espacio */
}
.acc-card.is-active .open-icons .ico{
  min-width: 84px !important;
  font-size: .82rem !important;
}

/* 4) Botón siempre visible (no cortado) */
.acc-card.is-active .open-panel .btn{
  margin-top: 8px !important;
}

/* 5) Estado CERRADO: evita que el título invada el 50% superior */
.acc-card .closed-top{
  overflow: hidden;
}
.acc-card .card-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* máximo 2 líneas */
  overflow: hidden;
}