.public-body {
    background: #e1f0de;
}

.hero-image {
    height: 0px;
    background-size: cover;
    background-position: center;
}

.hero-placeholder {
    background: linear-gradient(to right, #3A9725, #326F00);
    opacity: 0.85;
}

.public-container {
    max-width: 1100px;
    margin: 1rem auto 2rem;
    padding: 0 1rem;
}

.public-section {
    display: none;
    animation: fadeIn 0.25s ease-out;
}

.public-section.visible {
    display: block;
}

.publicaciones-lista {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.publicacion {
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1.7fr);
    gap: 0.75rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.publicacion-img img {
    border-radius: 0.75rem;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.publicacion-body h3 {
    margin: 0 0 0.4rem;
}

.publicacion-body p {
    margin: 0;
    font-size: 0.9rem;
}

.publicacion.layout-image-right {
    grid-template-columns: minmax(0,1.7fr) minmax(0,1.1fr);
}

.publicacion.layout-image-right .publicacion-img {
    order: 2;
}

.publicacion.layout-image-right .publicacion-body {
    order: 1;
}

/* ===== Carrusel (INDEX) PRO ===== */
.carousel{
  position: relative;
  background: #0f2a14;
  border-radius: 22px;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

/* ✅ Más grande + centrado */
.carousel-inner{
  position: relative;
  height: 490px;              /* 🔥 más alto */
  border-radius: 18px;
  overflow: hidden;
  background: #123016;
}

/* slides */
.carousel-item{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease-out;
}
.carousel-item.active{ opacity: 1; }

/* ✅ Imagen: se ve grande sin recortar */
.carousel img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #123016;
  display: block;
}

/* ✅ controles (flechas) más pro */
.carousel-control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.carousel-control:hover{ background: rgba(0,0,0,.60); }
.carousel-control.prev{ left: 14px; }
.carousel-control.next{ right: 14px; }

/* ✅ Puntitos (indicadores) */
.carousel-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  display: flex;
  gap: 8px;
  z-index: 6;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
}

.carousel-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, background .15s ease, width .15s ease;
}
.carousel-dot:hover{
  transform: scale(1.15);
  background: rgba(255,255,255,.75);
}
.carousel-dot.active{
  background: #f6d75f;
  width: 22px;               /* ✅ pastilla para el activo */
}

/* Responsive */
@media (max-width: 900px){
  .carousel-inner{ height: 380px; }
}
@media (max-width: 520px){
  .carousel{ padding: 10px; border-radius: 18px; }
  .carousel-inner{ height: 260px; border-radius: 14px; }
  .carousel-control{ width: 40px; height: 40px; }
  .carousel-dots{ bottom: 12px; gap: 7px; }
}



/* contactos */
.contacto-card {
    text-align: center;
}

.contacto-foto {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.contacto-foto img,
.contacto-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: #c8e6c9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacto-placeholder i {
    font-size: 1.5rem;
    color: #326F00;
}

.contacto-nombre {
    font-weight: 600;
}

/* evento layout */
.evento-layout {
    display: grid;
    grid-template-columns: 140px minmax(0,1fr);
    gap: 0.6rem;
}

.evento-img img {
    border-radius: 0.6rem;
    height: 120px;
    object-fit: cover;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .main-menu {
        display: none;
    }
    .publicacion,
    .publicacion.layout-image-right,
    .evento-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== PUBLICACIONES: toolbar + pager (PUBLIC) ===== */
.pub-toolbar-public{ margin-top:14px; background: rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px; }
.pub-toolbar-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.pub-toolbar-row label{ display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:13px; }
.pub-toolbar-row select{ padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.14); background:#fff; min-width:220px; }

.pub-pager{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; padding:10px; background: rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.06); border-radius:14px; }
.pub-pager-left,.pub-pager-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.10); font-size:13px; }
.btn.disabled{ pointer-events:none; opacity:.55; }

/* Select de "Ver x pág" abajo (independiente) */
.pub-per-form select{ padding:6px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.14); background:#fff; }



/* Calendario bonito (desplegable) */
.pub-cal-list{ min-width:260px; max-width:100%; padding:8px 10px; border-radius:12px; border:1px solid rgba(0,0,0,.14); background:#fff; }
.pub-cal-list option{ color:#c25700; font-weight:700; }              /* meses */
.pub-cal-list optgroup{ font-style:normal; font-weight:900; color:#1b5e20; }          /* año */
.pub-cal-list:focus{ outline:none; box-shadow:0 0 0 3px rgba(27,94,32,.12); }


/* Dropdown calendario personalizado con scroll */
.pub-cal-dd{ position:relative; display:inline-block; min-width:260px; max-width:100%; }
.pub-cal-dd-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.pub-cal-dd-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.pub-cal-dd-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.10);
  padding:8px;
  z-index:9999;

  /* 👇 12 items aprox */
  max-height:360px;
  overflow:auto;
  display:none;
}
.pub-cal-dd.open .pub-cal-dd-panel{ display:block; }

/* año */
.pub-cal-dd-year{
  padding:8px 10px;
  font-weight:900;
  color:#1b5e20;
  background:rgba(27,94,32,.06);
  border-radius:10px;
  margin-top:6px;
}
.pub-cal-dd-year:first-child{ margin-top:0; }

/* meses */
.pub-cal-dd-item{
  width:100%;
  text-align:left;
  padding:8px 10px;
  border:0;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  color:#c25700;
  font-weight:800;
}
.pub-cal-dd-item:hover{ background:rgba(194,87,0,.08); }
.pub-cal-dd-item.is-selected{ background:rgba(0,0,0,.06); }

/* scrollbar bonito */
.pub-cal-dd-panel::-webkit-scrollbar{ width:10px; }
.pub-cal-dd-panel::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:10px; }
.pub-cal-dd-panel::-webkit-scrollbar-track{ background:rgba(0,0,0,.05); border-radius:10px; }

/* ===== Redes sociales en 2x2 (header) ===== */
.topbar .right-actions .social-icons{
  display:grid;
  grid-template-columns:repeat(2, 29px); /* 2 arriba, 2 abajo */
  gap:9px;
  align-items:center;
  justify-content:center; /* o: start */
}

.topbar .right-actions .social-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
}
/* ===== PUBLICACIONES: mismo tamaño + scroll en texto (FIX) ===== */

/* tarjeta fija */
.publicacion{
  height: 260px;              /* ajusta 240-320 */
  align-items: stretch;
  overflow: hidden;           /* IMPORTANTÍSIMO */
  grid-auto-rows: 1fr;
}

/* contenedor de imagen (para que no cambie el alto) */
.publicacion-img{
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
}

/* imagen fija */
.publicacion-img img{
  width: 100%;
  height: 220px;              /* fijo y parejo */
  max-height: none;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* cuerpo: debe poder encogerse para que funcione el scroll */
.publicacion-body{
  min-height: 0;              /* IMPORTANTÍSIMO para scroll en grid */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* titulo ok */
.publicacion-body h3{
  margin: 0;
  line-height: 1.2;
}

/* texto con scroll (ya no debe estirar la tarjeta) */
.publicacion-body p{
  margin: 0;
  font-size: 0.9rem;
  flex: 1;
  min-height: 0;              /* IMPORTANTÍSIMO */
  overflow: auto;
  padding-right: 8px;
  word-break: break-word;
}

/* scroll bonito */
.publicacion-body p::-webkit-scrollbar{ width: 8px; }
.publicacion-body p::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 10px; }
.publicacion-body p::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 10px; }

/* ===== AVISOS: mismas tarjetas + scroll (SOLO en #sec-avisos) ===== */

#sec-avisos .cards-grid-4{
  align-items: stretch;
}

#sec-avisos .cards-grid-4 .card{
  height: 420px;             /* ajusta: 380-460 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0.9rem;
}

/* imagen fija y pareja */
#sec-avisos .cards-grid-4 .card > img{
  width: 100%;
  height: 180px;             /* ajusta */
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 0.75rem;
}

/* fecha */
#sec-avisos .cards-grid-4 .card .badge-date{
  display: inline-block;
  align-self: flex-start;     /* que no se estire */
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 999px;
  background: #f6d75f;        /* amarillo bonito */
  color: #333;
  font-weight: 600;
  margin-bottom: 6px;
}


/* título fijo */
#sec-avisos .cards-grid-4 .card h3{
  flex: 0 0 auto;
  margin: 10px 0 6px;
  line-height: 1.2;
}

/* descripción con scroll */
#sec-avisos .cards-grid-4 .card p{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding-right: 8px;
  word-break: break-word;
}

/* scroll bonito */
#sec-avisos .cards-grid-4 .card p::-webkit-scrollbar{ width: 8px; }
#sec-avisos .cards-grid-4 .card p::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 10px; }
#sec-avisos .cards-grid-4 .card p::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 10px; }
/* ===== EVENTOS: 2 tarjetas por fila + imagen SIN recorte (SOLO en #sec-eventos) ===== */

#sec-eventos .cards-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2 en 2 */
  gap: 18px;
  align-items: stretch;
}

/* Card */
#sec-eventos .cards-grid-2 .card{
  height: 320px;                 /* ✅ suficiente para texto + botón */
  overflow: hidden;
  border-radius: 0.9rem;
  display:flex;
  flex-direction:column;
}

/* Layout interno */
#sec-eventos .cards-grid-2 .card .evento-layout{
  height: 100%;
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);  /* ✅ imagen más grande */
  gap: 14px;
  align-items: stretch;
}

/* Imagen SIN recorte */
#sec-eventos .cards-grid-2 .card .evento-img{
  height: 100%;
  background:#123016;
  border-radius: 0.85rem;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

#sec-eventos .cards-grid-2 .card .evento-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* ✅ NO se corta */
  object-position: center;
  background:#123016;
}

/* Body */
#sec-eventos .cards-grid-2 .card .evento-body{
  min-width:0;
  min-height:0;                 /* ✅ CLAVE para que el scroll funcione */
  height:100%;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Que no se estire */
#sec-eventos .cards-grid-2 .card .evento-body h3{ margin:0; line-height:1.2; }
#sec-eventos .cards-grid-2 .card .evento-body p{ margin:0; }

/* Descripción con scroll y dejando espacio al botón */
#sec-eventos .cards-grid-2 .card .evento-body p:last-of-type{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  word-break: break-word;
}

/* Botón siempre visible abajo */
#sec-eventos .cards-grid-2 .card .evento-actions{
  margin-top: auto;             /* ✅ lo empuja al fondo */
  display:flex;
  justify-content:flex-end;
  padding-top: 6px;
}

/* Responsive */
@media (max-width: 768px){
  #sec-eventos .cards-grid-2{ grid-template-columns: 1fr; }
  #sec-eventos .cards-grid-2 .card{ height: auto; }
  #sec-eventos .cards-grid-2 .card .evento-layout{ grid-template-columns: 1fr; }
  #sec-eventos .cards-grid-2 .card .evento-img{ height: 220px; }
}


/* ===== MODAL EVENTO (PUBLIC) ===== */
body.modal-open{ overflow:hidden; }

.evmodal{
  position:fixed; inset:0;
  display:none;
  z-index:99999;
}
.evmodal.open{ display:block; }

.evmodal-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.evmodal-card{
  position:relative;
  width:min(980px, 92vw);
  max-height: 88vh;
  overflow:hidden;
  margin: 5vh auto 0;
  background:#fff;
  border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}

.evmodal-close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  border:0; border-radius:12px;
  background:rgba(0,0,0,.06);
  cursor:pointer;
  font-size:18px;
}

.evmodal-grid{
  display:grid;
  grid-template-columns: 360px minmax(0,1fr);
  height: 88vh;
  max-height: 88vh;
}

.evmodal-img{
  background:#123016;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.evmodal-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.evmodal-noimg{ color:#fff; font-weight:900; opacity:.9; }

.evmodal-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}

.evmodal-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.evmodal-title{
  margin:0;
  font-size:26px;
  color:#123016;
  line-height:1.15;
}

.evmodal-desc{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:10px;
  white-space:pre-wrap;
  line-height:1.6;
  font-size:15px;
}

/* scroll bonito dentro del modal */
.evmodal-desc::-webkit-scrollbar{ width:10px; }
.evmodal-desc::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:10px; }
.evmodal-desc::-webkit-scrollbar-track{ background:rgba(0,0,0,.06); border-radius:10px; }

.evmodal-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:6px;
}

/* responsive */
@media (max-width: 820px){
  .evmodal-grid{ grid-template-columns:1fr; height:auto; max-height:88vh; }
  .evmodal-img{ height:220px; }
  .evmodal-card{ margin-top: 4vh; }
}


/* SOLO EVENTOS: romper el límite de 1100px */
#sec-eventos{
  width: 96vw;
  max-width: 1200px;   /* ajusta */
  margin-left: 50%;
  transform: translateX(-50%);
}

/* SOLO EVENTOS: que la fecha NO se estire */
#sec-eventos .badge-date{
  display:inline-flex !important;   /* no ocupa todo el ancho */
  width: fit-content !important;    /* se ajusta al texto */
  max-width: 100%;
  align-self: flex-start;           /* arriba a la izquierda */
  white-space: nowrap;              /* no se parte en 2 líneas */
  padding: 6px 12px;                /* pastilla normal */
  border-radius: 999px;
}

/* ===== MODAL EVENTO: imagen SIN recorte + más espacio ===== */

/* Haz la columna de imagen más ancha */
.evmodal-grid{
  grid-template-columns: 460px minmax(0,1fr);  /* antes 360px */
}

/* Que el contenedor de imagen sea más alto y no corte */
.evmodal-img{
  background:#123016;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ✅ NO recortar */
.evmodal-img img{
  width:100%;
  height:100%;
  object-fit: contain;        /* antes cover */
  object-position: center;
  background:#123016;
}

.evmodal-card{ width:min(1100px, 94vw); }  /* antes 980px */
.evmodal-body{ padding:14px; }            /* antes 18px */

/* ===== SERVICIOS: tarjetas parejas + imagen SIN recorte (SOLO #sec-servicios) ===== */
#sec-servicios .cards-grid-4{
  align-items: stretch;
}

#sec-servicios .cards-grid-4 .card{
  height: 460px;                 /* ajusta 430-520 si quieres */
  overflow: hidden;
  display:flex;
  flex-direction:column;
  border-radius: 0.9rem;
}

/* imagen pareja (no se recorta) */
#sec-servicios .cards-grid-4 .card > img{
  width:100%;
  height: 190px;                 /* fijo para que todas queden igual */
  object-fit: contain;           /* ✅ NO recorta */
  object-position: center;
  background:#123016;            /* “marco” cuando sobra espacio */
  border-radius: 0.75rem;
  flex: 0 0 auto;
}

/* fecha tipo pastilla (no se estira) */
#sec-servicios .cards-grid-4 .card .badge-date{
  display:inline-flex;
  width: fit-content;
  align-self:flex-start;
  white-space: nowrap;
  padding:6px 12px;
  border-radius:999px;
  margin: 10px 0 6px;
}

/* título */
#sec-servicios .cards-grid-4 .card h3{
  margin: 0 0 8px;
  line-height:1.2;
  flex: 0 0 auto;
}

/* texto normal */
#sec-servicios .cards-grid-4 .card p{
  margin: 0 0 6px;
  flex: 0 0 auto;
}

/* SOLO la descripción con scroll (la última <p>) */
#sec-servicios .cards-grid-4 .card p:last-of-type{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  padding-right: 8px;
  word-break: break-word;
}

/* botón siempre abajo */
#sec-servicios .cards-grid-4 .card .serv-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  padding-top: 8px;
}

/* scroll bonito */
#sec-servicios .cards-grid-4 .card p:last-of-type::-webkit-scrollbar{ width:8px; }
#sec-servicios .cards-grid-4 .card p:last-of-type::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:10px; }
#sec-servicios .cards-grid-4 .card p:last-of-type::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius:10px; }


/* ===== FOTOS (VER_ALBUM): tarjetas parejas + imagen SIN recorte + scroll ===== */
.fotos-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}

.foto-card{
  height: 420px;                 /* ✅ todas del mismo tamaño */
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius: 0.9rem;
  padding: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* ✅ imagen SIN recorte */
.foto-card img{
  width:100%;
  height: 220px;                 /* ✅ fijo para que todas queden iguales */
  object-fit: contain;           /* ✅ NO recorta */
  object-position:center;
  background:#123016;            /* marco si sobra espacio */
  border-radius: 0.75rem;
  flex: 0 0 auto;
}

/* fecha tipo pastilla */
.foto-card .badge-date{
  display:inline-flex;
  width:fit-content;
  align-self:flex-start;
  white-space:nowrap;
  margin:10px 0 8px;
  padding:6px 12px;
  border-radius:999px;
  background:#f6d75f;
  color:#333;
  font-weight:700;
}

/* ✅ descripción con scroll */
.foto-card .foto-desc{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  padding-right: 8px;
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

/* botón siempre abajo */
.foto-card .foto-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  padding-top: 10px;
}

/* scroll bonito */
.foto-card .foto-desc::-webkit-scrollbar{ width:8px; }
.foto-card .foto-desc::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:10px; }
.foto-card .foto-desc::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius:10px; }

@media (max-width: 980px){ .fotos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .fotos-grid{ grid-template-columns: 1fr; } .foto-card{ height:auto; } }

/* ===== MODAL FOTO (solo #ftModal): imagen arriba, texto abajo ===== */
#ftModal .evmodal-grid{
  grid-template-columns: 1fr !important;
  height: auto !important;
  max-height: 88vh;
}

#ftModal .evmodal-img{
  height: 60vh;                 /* foto grande */
  max-height: 60vh;
  border-radius: 18px;
}

#ftModal .evmodal-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* ✅ no recorta */
  background:#123016;
}

#ftModal .evmodal-body{
  padding: 14px 18px 18px;
}

#ftModal .evmodal-title{
  font-size: 22px;
  margin: 8px 0 6px;
}

#ftModal .evmodal-desc{
  flex: 0 0 auto;               /* ya no ocupa todo */
  overflow: visible;            /* casi siempre poco texto */
  padding-right: 0;
}

/* ===== AJUSTE MODAL FOTOS (tamaño y botón cerrar) ===== */

/* Que no sea tan alto */
#ftModal .evmodal-card{
  max-height: 80vh;       /* antes 88vh */
  width: min(900px, 94vw);
}

/* Imagen un poco más baja */
#ftModal .evmodal-img{
  height: 90vh;          /* antes 60vh */
  max-height: 60vh;
}

/* Botón X visible y elegante */
#ftModal .evmodal-close{
  background: #ffffff;
  color: #123016;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  top: 10px;
  right: 10px;
}

/* Que al pasar el mouse resalte */
#ftModal .evmodal-close:hover{
  background: #f6d75f;
  color: #000;
}


/* ===== FOTOTECA (INDEX): tarjetas parejas + portada SIN recorte ===== */
#sec-fototeca .cards-grid-4{ align-items: stretch; }

#sec-fototeca .cards-grid-4 .card{
  height: 420px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  border-radius: 0.9rem;
}

/* ✅ Portada del álbum SIN recorte */
#sec-fototeca .cards-grid-4 .card > img{
  width:100%;
  height: 180px;           /* todas iguales */
  object-fit: contain;     /* ✅ NO se corta */
  object-position:center;
  background:#123016;      /* marco verde */
  border-radius: 0.75rem;
  flex: 0 0 auto;
}

/* ===== FOTOTECA (INDEX): ALBUMS PAREJOS + FOTO SIN RECORTE ===== */
#sec-fototeca .cards-grid-4{
  align-items: stretch;
}

/* tarjeta fija y limpia */
#sec-fototeca .cards-grid-4 .card{
  height: 420px;                 /* ✅ todas iguales */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0.9rem;
  padding: 12px;
}

/* portada con tamaño fijo */
#sec-fototeca .cards-grid-4 .card > img{
  width: 100%;
  height: 200px;                 /* ✅ mismo alto para todas */
  object-fit: contain;           /* ✅ NO recorta */
  object-position: center;
  background: #123016;           /* marco verde */
  border-radius: 0.75rem;
  flex: 0 0 auto;
}

/* título fijo */
#sec-fototeca .cards-grid-4 .card h3{
  margin: 12px 0 6px;
  line-height: 1.15;
  flex: 0 0 auto;
}

/* descripción: que NO agrande la tarjeta */
#sec-fototeca .cards-grid-4 .card p{
  margin: 0 0 8px;
}

/* SOLO la descripción (primera p) con "clamp" para que no haga gigante la tarjeta */
#sec-fototeca .cards-grid-4 .card p:nth-of-type(1){
  display: -webkit-box;
  -webkit-line-clamp: 3;         /* ✅ máximo 3 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* el Año no se mueve */
#sec-fototeca .cards-grid-4 .card p:nth-of-type(2){
  margin-top: auto;              /* ✅ lo empuja hacia abajo */
  flex: 0 0 auto;
}

/* botón siempre abajo, mismo tamaño */
#sec-fototeca .cards-grid-4 .card .btn{
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

/* ===== FOTOTECA (INDEX) FIX: scroll en texto + botón no largote ===== */

#sec-fototeca .cards-grid-4 .card{
  padding: 12px;                 /* para que no se vea vacío */
}

/* título */
#sec-fototeca .cards-grid-4 .card h3{
  margin: 10px 0 6px;
  line-height: 1.2;
}

/* ✅ La descripción (primer <p>) con scroll si es mucho texto */
#sec-fototeca .cards-grid-4 .card p:nth-of-type(1){
  flex: 1 1 auto;                /* ocupa el espacio disponible */
  min-height: 0;                 /* CLAVE para que el scroll funcione */
  overflow: auto;                /* ✅ scroll */
  padding-right: 8px;
  margin: 0 0 8px;
  word-break: break-word;
}

/* scroll bonito */
#sec-fototeca .cards-grid-4 .card p:nth-of-type(1)::-webkit-scrollbar{ width: 8px; }
#sec-fototeca .cards-grid-4 .card p:nth-of-type(1)::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 10px; }
#sec-fototeca .cards-grid-4 .card p:nth-of-type(1)::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 10px; }

/* ✅ El "Año" siempre pegado abajo (antes del botón) */
#sec-fototeca .cards-grid-4 .card p:nth-of-type(2){
  margin: 0;
  flex: 0 0 auto;
}

/* ✅ Botón NO largote: centrado y con ancho del contenido */
#sec-fototeca .cards-grid-4 .card a.btn{
  margin-top: 10px;
  width: fit-content;
  align-self: flex-start;        /* o center si lo quieres centrado */
  padding: 10px 14px;
  border-radius: 999px;
}

#sec-avisos .card{
  display:flex;
  flex-direction:column;
}

#sec-avisos .aviso-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  padding-top:10px;
}