/* ==========================================================================
   3. Hero de portada, grid de noticias, franjas CTA, informes
   ASONGD — pasongd-estilos-v8 — dividido por componentes
   ========================================================================== */

/* --------------------------------------------------------------------------
                                ESPECIAL HERO
   -------------------------------------------------------------------------- */

.pasongd-resp-title{
    background: var(--accent);
    padding: 20px;
}

.pasongd-resp-title{
    display: none !important;
}
.pasongd-resp-title > h1.pasongd-h1{
    color: var(--base-3) !important;
    margin-bottom: 0px;
}

.pasongd-hero-grid {
  display: block;
  background: #f6f5f5;
  position: relative;
}
.pasongd-hero-content {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.pasongd-hero-image {
  background: repeating-linear-gradient(135deg, #dcd5c2, #dcd5c2 14px, #d2cab4 14px, #d2cab4 28px);
  min-height: 420px;
  position: relative;
  overflow: hidden;
}
.pasongd-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pasongd-hero-img-bottom {
  z-index: 1;
  aspect-ratio: 1120 / 420;
}
.pasongd-hero-img-top {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.pasongd-hero-img-top.pasongd-is-visible {
  opacity: 1;
}
.pasongd-hero-img-top.pasongd-no-transition {
  transition: none;
}
.pasongd-hero-image-link {
  position: absolute;
  inset: 0;
  display: block;
}
.pasongd-hero-image-link:hover,
.pasongd-hero-image-link:focus,
.pasongd-hero-image-link:visited {
  opacity: 1 !important;
}
.pasongd-hero-image-link:hover img,
.pasongd-hero-image img:hover {
  filter: none !important;
}
.pasongd-hero-arrow {
  position: absolute;
  top: 0;
  height: 100%;
  width: 64px;
  border: none;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s ease;
}
.pasongd-hero-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}
.pasongd-hero-arrow:focus {
  background-color: rgba(255, 255, 255, 0) !important;
  color: inherit !important;
  outline: none;
}
.pasongd-hero-arrow:focus-visible {
  background-color: rgba(255, 255, 255, 0.25) !important;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.pasongd-hero-arrow::before {
  content: '';
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--contrast-2);
  border-bottom: 3px solid var(--contrast-2);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pasongd-hero-arrow:hover::before {
  opacity: 1;
}
.pasongd-hero-arrow-prev { left: 0; }
.pasongd-hero-arrow-prev::before { transform: rotate(135deg); margin-left: 4px; }
.pasongd-hero-arrow-next { right: 0; }
.pasongd-hero-arrow-next::before { transform: rotate(-45deg); margin-right: 4px; }
.pasongd-hero-ctas { display: flex; gap: 14px; margin-top: 8px; }
.pasongd-hero-dots { display: flex; gap: 6px; margin-top: 22px; }
.pasongd-hero-dot { width: 22px; height: 4px; border-radius: 2px; background: #c7c1af; }
.pasongd-hero-dot-active { background: var(--accent); }

.pasongd-hero-slide {
  display: none;
}
.pasongd-hero-slide.is-active {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* Grid de noticias */
.pasongd-news-section { padding: 64px 40px 40px; }
.pasongd-news-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.pasongd-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pasongd-card-image {
  height: 170px;
  background: repeating-linear-gradient(45deg, #e4ded0, #e4ded0 10px, #dbd4c3 10px, #dbd4c3 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8471;
}
.pasongd-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pasongd-load-more-wrap { display: flex; justify-content: center; margin-top: 40px; }


/* Franjas CTA — Sevilla Coopera / La Provincia Coopera II */
.pasongd-featured-section { background: var(--base-2); padding: 64px 40px; }
.pasongd-franja {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: stretch;
  background: var(--base-3);
  border: 1px solid var(--contrast-3);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 32px;
}
.pasongd-franja-ultima { margin-bottom: 56px; }
.pasongd-franja-imagen {
  background: repeating-linear-gradient(45deg, #e4ded0, #e4ded0 10px, #dbd4c3 10px, #dbd4c3 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8471;
  min-height: 220px;
}
.pasongd-franja-texto {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.pasongd-franja-ctas { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }



/* --------------------------------------------------------------------------
   9. Elementos de secciones
   -------------------------------------------------------------------------- */
.pasongd-informe-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.pasongd-informe-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; align-items: stretch; }

.pasongd-informe-featured {
  background: var(--accent);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 20px;
}

.pasongd-informe-featured img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pasongd-informe-icon-wrap { 
    height: 150px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    padding: 24px; 
    
}

.pasongd-informe-link { color: var(--logo-amarillo-extra); font-weight: 700; font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }



/* --------------------------------------------------------------------------
   9.1 Nuevas clases para la sección Informe Sevilla Coopera y Mapeo
   -------------------------------------------------------------------------- */


.pasongd-informe-stat {
  background: var(--base-3);
  border: 1px solid var(--contrast-3);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pasongd-informe-stat-visual {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 28px;
}

.pasongd-informe-stat-body { 
    padding: 18px; 
    display: flex; 
    flex-direction: column; 
    gap: 6px; flex: 1; 
}

.pasongd-informe-h4-destacado,
.pasongd-informe-h4-destacado a {
  color: var(--logo-granate) !important;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}




/* -------------------------------------------------------------------------
   Banner Coolectiva (procedente de estilos_grales.css)
   ------------------------------------------------------------------------- */
.gb-headermod:before {
    content: "";
    background-image: url(https://asongd.es/wp-content/uploads/2025/02/coolectiva_2025.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: inherit;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Responsive portada (procedente de la sección 14 original)
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pasongd-hero-wrap,
  .wp-block-acf-hero-campana-activa,
  .pasongd-hero-grid { display: none !important; }
  .pasongd-news-grid { grid-template-columns: 1fr; }
  .pasongd-informe-grid { grid-template-columns: 1fr; }
  .pasongd-franja { grid-template-columns: 1fr; }
  .pasongd-hero-content { padding: 32px 20px; }
  .pasongd-card-image { height: 110px; }
  .pasongd-informe-stat-visual { display: none; }
  .div-slider { display: none; }

  .pasongd-resp-title {
    display: block !important;
    background: var(--accent);
    width: 100vw;
    padding: 20px;
    margin-left: -30px;
  }
  .pasongd-resp-title .pasongd-h1 {
    color: var(--base-3);
    margin-bottom: 0px;
    font-weight: 600;
  }

  .pasongd-btn-secondary .wp-block-button__link {
    border: none !important;
    background: var(--base) !important;
    color: var(--global-color-9) !important;
    border-radius: 8px !important;
    padding: 9px 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
}