/* ============================================================
   CSS PROPIO CERECOOP
   Todos los ajustes de diseño que no vienen de fábrica en la
   plantilla (Hero, curva del carrusel, tarjetas de Nosotros,
   Servicios, Noticias, Cooperativas, Testimonios, Contacto, etc).
   Antes vivía como <style> inline dentro de index.html; se movió
   acá para achicar el HTML y que sea más fácil de mantener.
   ============================================================ */

  @media (min-width: 1200px) {
    .container { max-width: 1140px; }
  }
  @media (min-width: 1400px) {
    .container { max-width: 1360px; }
  }
  @media (min-width: 1650px) {
    .container { max-width: 1560px; }
  }

  /* ===== Tipografía SIEMPRE formal/corporativa (Poppins) =====
     La plantilla trae una fuente cursiva/manuscrita para los
     subtítulos chicos ("Bienvenido a..."). La anulamos acá para
     que todo el sitio se vea siempre formal. */
  .subtitle,
  .tm-sc-section-title .title-wrapper .subtitle {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
  }
  /* Limita el subtítulo de capacitaciones para que ocupe máximo 2 líneas y se vea centrado */
  .cerecoop-capacitaciones .servicios-lead,
  .capacitaciones-intro p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ===== Header pegado a los bordes de la pantalla ===== */
  .header-top .container,
  .header-nav-container .container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }
  @media (max-width: 767px) {
    .header-top .container,
    .header-nav-container .container {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  /* ===== Barra de contacto superior: menos espacio entre teléfono/email/dirección =====
     La plantilla trae 25px de separación entre cada dato + 5px entre el
     ícono y el texto. Lo achicamos para que se vea más compacto. */
  header#header .header-top .contact-info li {
    margin-right: 14px !important;
  }
  header#header .header-top .contact-info li .font-icon {
    margin-right: 6px !important;
  }

  /* ===== Íconos de redes sociales: juntos y sin espacios en blanco =====
     .styled-icons li es inline-block, así que el próprio salto de línea
     del HTML entre <li> genera un huequito extra. font-size:0 en el
     contenedor lo elimina. */
  .header-top .styled-icons.icon-circled {
    font-size: 0;
  }
  .header-top .styled-icons.icon-circled li {
    margin-right: 4px !important;
  }
  .header-top .styled-icons.icon-circled li:last-child {
    margin-right: 0 !important;
  }
  .header-top .styled-icons.icon-circled li a.social-link,
  header#header .header-top .styled-icons.icon-circled li a.social-link {
    width: 34px !important;
    height: 34px !important;
    line-height: 31px !important;
    font-size: 15px;
    margin-right: 0 !important;
    border: 1.5px solid #00552a !important;
    box-sizing: border-box;
  }

  /* ===== Flechas del carrusel: tamaño prolijo, sin espacio de más ===== */
  .tp-leftarrow.tparrows,
  .tp-rightarrow.tparrows {
    width: 44px !important;
    height: 44px !important;
    background: rgba(0,0,0,0.4) !important;
  }
  .tp-leftarrow.tparrows:before,
  .tp-rightarrow.tparrows:before {
    line-height: 44px !important;
    font-size: 16px !important;
    text-align: center;
    width: 100%;
    display: block;
  }

  /* ===== Texto fijo superpuesto sobre el carrusel principal =====
     Rediseñado estilo "hero moderno" (referencia): overlay oscuro
     parejo sobre toda la foto + bloque de texto centrado. */
  .cerecoop-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 40px;
    z-index: 20;
    pointer-events: none;
    /* Velo oscuro parejo con un poco más de fuerza en el centro,
       donde va el texto, para que siempre se lea bien. */
    background: linear-gradient(180deg, rgba(0,10,5,0.45) 0%, rgba(0,10,5,0.55) 55%, rgba(0,10,5,0.65) 100%);
  }
  .cerecoop-hero-overlay .btn,
  .cerecoop-hero-overlay .btn-cerecoop-cta {
    pointer-events: auto;
    width: fit-content;
  }
  .cerecoop-hero-title {
    color: #fff;
    font-weight: 900;
    font-size: clamp(28px, 4.4vw, 58px);
    line-height: 1.18;
    margin-bottom: 20px;
    max-width: 900px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
  }
  .cerecoop-hero-subtitle {
    color: #fff;
    font-size: clamp(17px, 1.8vw, 24px);
    margin-bottom: 32px;
    max-width: 680px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  /* Botón CTA del hero: verde institucional CERECOOP */
  .btn-cerecoop-cta {
    display: inline-block;
    background: #006633;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 34px;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    letter-spacing: 0.3px;
    box-shadow: 0 12px 26px rgba(0,102,51,0.35);
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .btn-cerecoop-cta:hover {
    background: #008744;
    color: #fff !important;
    transform: translateY(-2px);
  }
  @media (max-width: 480px) {
    .cerecoop-hero-title { font-size: 24px; }
  }
  /* ===== Curvas blancas "ojal" arriba y abajo del carrusel ===== */
.cerecoop-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  line-height: 0; /* saca el espacio fantasma que dejan los SVG inline */
  z-index: 21; /* por encima del velo oscuro del texto, así la curva blanca queda limpia y no se ve gris */
  pointer-events: none;
}
.cerecoop-hero-wave-top { top: -1px; }
.cerecoop-hero-wave-bottom { bottom: -1px; } /* tapa cualquier línea de 1px que pueda quedar entre el SVG y el borde */
.cerecoop-hero-wave svg {
  display: block;
  width: 100%;
  height: 90px;
}
.cerecoop-hero-wave-top svg { height: 60px; } /* un poco más chica arriba para no comerse tanto título */
@media (max-width: 767px) {
  .cerecoop-hero-wave-bottom svg { height: 46px; }
  .cerecoop-hero-wave-top svg { height: 30px; }
}

  /* ===== Corrección: menú duplicado sobre el carrusel =====
     La plantilla trae un segundo menú "clon" (#top-primary-nav-clone)
     pensado para pantallas chicas, pero en ciertos anchos aparece
     junto al menú principal (dos filas de "Inicio, Nosotros...").
     El panel lateral (ícono ☰) ya cubre la navegación en celular,
     así que directamente ocultamos ese clon para que nunca se dupliquen. */
  #top-primary-nav-clone { display: none !important; }

  /* ===== NUEVA sección "Nosotros" en tarjetas flotantes bajo el carrusel =====
     4 tarjetas (icono + título + texto) que se superponen sobre el
     borde inferior del banner, con sombra y bordes redondeados,
     la primera (Quiénes Somos) destacada en verde institucional. */
  .cerecoop-hero-cards-wrap {
    position: relative;
    z-index: 25;
    margin-top: -90px;
    margin-bottom: 20px;
  }
  .hero-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .hero-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
    padding: 32px 26px 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .hero-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px rgba(0,0,0,0.18);
    background: linear-gradient(135deg, #00753b 0%, #006633 100%);
  }
  .hero-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e9f7ef;
    color: #006633;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .hero-card:hover .hero-card-icon {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }
  .hero-card-title {
    font-weight: 800;
    font-size: 23px;
    margin-bottom: 14px;
    color: #1c1c1c;
    transition: color 0.25s ease;
  }
  .hero-card:hover .hero-card-title { color: #fff; }
  .hero-card-text {
    font-size: 17px; /* texto más grande, pedido por el cliente */
    line-height: 1.6;
    color: #333c37;
    margin-bottom: 18px;
    transition: color 0.25s ease;
  }
  .hero-card:hover .hero-card-text { color: rgba(255,255,255,0.92); }
  .hero-card-link {
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #006633;
    transition: color 0.25s ease;
  }
  .hero-card:hover .hero-card-link { color: #fff; }
  .hero-card-link:hover { text-decoration: underline; }
  @media (min-width: 768px) and (max-width: 1199px) {
    .cerecoop-hero-cards-wrap { margin-top: -60px; }
    .hero-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  }
  @media (max-width: 767px) {
    .cerecoop-hero-cards-wrap { margin-top: -40px; margin-bottom: 40px; }
    .hero-cards-grid { grid-template-columns: 1fr; gap: 18px; }
    .hero-card { padding: 28px 24px 24px; border-radius: 12px; }
  }

  /* ===== Ilustración decorativa propia: 3 círculos entrelazados (marca CERECOOP) =====
     Se reutiliza como detalle sutil de fondo en varias secciones. */
  .mvv-illustration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 140px;
    height: 140px;
    opacity: 0.06;
    pointer-events: none;
  }
  .noticias-illustration {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 220px;
    height: 220px;
    opacity: 0.18;
    pointer-events: none;
  }

  /* Neutraliza los divs internos de flechas/viñetas del slider (por si
     el motor intenta ponerles una imagen de fondo, no queremos que se
     vea nada raro ahí, solo el diseño CSS "round" de la plantilla) */
  .tp-arr-imgholder,
  .tp-bullet-image {
    background: none !important;
  }

  /* ===== NUEVA sección "Noticias" (carrusel Owl con flechas + fondo con patrón) =====
     Reusamos el carrusel Owl que la propia plantilla ya trae incorporado
     (mismo que usa en su sección "Explorar Proyectos" de fábrica), así
     no sumamos ninguna librería nueva. */
  .cerecoop-noticias {
    padding: 30px 0 60px;
    background: #f5f1e6;
    position: relative;
    overflow: hidden;
  }
  /* El carrusel ocupa todo el ancho de la pantalla (sin el límite del container) */
  .cerecoop-noticias .noticias-carousel-wrap {
    width: 100%;
    max-width: 100%;
    padding: 0 60px;
  }
  @media (max-width: 767px) {
    .cerecoop-noticias .noticias-carousel-wrap { padding: 0 40px; }
  }
  .noticias-title {
    font-weight: 800;
    font-size: 28px;
    color: #14251b;
  }

  /* Tarjeta con foto arriba + info superpuesta abajo, estilo Consultez */
  .noticia-card {
    position: relative;
    background: #14251b;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .noticia-card-img {
    position: relative;
    height: 380px;
  }
  .noticia-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,20,10,0.88) 100%);
    z-index: 1;
  }
  .noticia-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
  .noticia-card:hover .noticia-card-img img { transform: scale(1.08); }
  .noticia-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 24px 26px 26px;
  }
  .noticia-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #a8e6c1;
    margin-bottom: 10px;
  }
  .noticia-card-meta span:first-child { display: none; } /* solo mostramos la fecha, como "sub-title" a la Consultez */
  .noticia-card-meta i { color: #a8e6c1; margin-right: 3px; }
  .noticia-card-body h5 {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.32;
    margin-bottom: 0;
    padding-right: 55px;
  }
  .noticia-card-body h5 a { color: #fff; }
  .noticia-card-body h5 a:hover { color: #a8e6c1; }
  .noticia-arrow-btn {
    position: absolute;
    right: 24px;
    bottom: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: #006633;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 3;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .noticia-card:hover .noticia-arrow-btn { background: #006633; color: #fff; transform: rotate(-45deg); }
  /* El carrusel Owl necesita un poco de aire para que las flechas no
     queden pegadas a las tarjetas */
  .cerecoop-noticias .owl-carousel { padding: 0 45px 50px; }
  .cerecoop-noticias .owl-nav button.owl-prev,
  .cerecoop-noticias .owl-nav button.owl-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #006633 !important;
    color: #fff !important;
    border-radius: 50%;
    font-size: 17px;
    box-shadow: 0 10px 24px rgba(0,102,51,0.28);
    z-index: 5;
  }
  .cerecoop-noticias .owl-nav button.owl-prev:hover,
  .cerecoop-noticias .owl-nav button.owl-next:hover { background: #008744 !important; }
  .cerecoop-noticias .owl-nav button.owl-prev { left: 0; }
  .cerecoop-noticias .owl-nav button.owl-next { right: 0; }
  .cerecoop-noticias .owl-dots { text-align: center; margin-top: 10px; }
  .cerecoop-noticias .owl-dots .owl-dot span {
    background: rgba(255,255,255,0.35) !important;
  }
  .cerecoop-noticias .owl-dots .owl-dot.active span {
    background: #a8e6c1 !important;
  }

  /* ===== NUEVA sección "Contacto" (mismo verde institucional que Servicios/Noticias) ===== */
  .cerecoop-contacto {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, rgba(0,48,26,0.88) 0%, rgba(0,85,44,0.85) 100%), url("../img/hero/fondo2.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* la foto queda fija (parallax) mientras el contenido se desplaza */
    padding: 0;
    color: #fff;
  }
  .cerecoop-contacto > .container { position: relative; z-index: 1; padding-top: 90px; padding-bottom: 90px; }
  @media (max-width: 767px) {
    .cerecoop-contacto { background-attachment: scroll; } /* "fixed" no anda bien en la mayoría de los celulares */
  }

  /* ===== NUEVA sección "Memoria y Balance" ===== */
  .cerecoop-memoria { padding: 90px 0; background: #fff; }
  .memoria-title { font-weight: 800; font-size: 30px; color: #232323; }
  .memoria-lead { color: #444; font-size: 18px; }
  .memoria-cover-link {
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease;
  }
  .memoria-cover-link img {
    width: 100%;
    display: block;
  }
  .memoria-cover-link:hover { transform: scale(1.02); }
  .cerecoop-contacto .contacto-kicker {
    color: #a8e6c1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .cerecoop-contacto h2 {
    font-weight: 800;
    font-size: 30px;
    margin-bottom: 15px;
    color: #fff;
  }
  .cerecoop-contacto .contacto-lead {
    color: #cdd7d1;
    font-size: 18px; /* texto más grande, pedido por el cliente */
    line-height: 1.7;
    margin-bottom: 35px;
  }
  .contacto-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 28px;
  }
  .contacto-info-item .icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    background: #008744;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 18px;
  }
  .contacto-info-item .label {
    display: block;
    color: #9db3a8;
    font-size: 13px;
    margin-bottom: 3px;
  }
  .contacto-info-item .value,
  .contacto-info-item .value a {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
  }
  .cerecoop-contacto form input,
  .cerecoop-contacto form textarea {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 15px 18px;
    margin-bottom: 18px;
    font-size: 15px;
  }
  .cerecoop-contacto form textarea { min-height: 140px; resize: vertical; }
  .cerecoop-contacto .map-wrap {
    margin-top: 60px;
    border-radius: 10px;
    overflow: hidden;
    filter: grayscale(15%);
  }
  .cerecoop-contacto .map-wrap iframe {
    width: 100%;
    height: 350px;
    border: 0;
    display: block;
  }

  /* ===== NUEVA sección "Cooperativas Asociadas" (fondo verde clarito + carrusel con nombre/ubicación en la tarjeta) ===== */
  .cerecoop-cooperativas {
    padding: 50px 0 70px;
    background: #f7f7f5;
  }
  .coop-kicker {
    color: #008744;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .coop-title {
    color: #232323;
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 0;
  }
  .coop-texto {
    color: #333c37;
    font-size: 18px;
    line-height: 1.75;
    margin: 18px 0 0;
  }

  /* Columna izquierda: SOLO la foto (logo) + banner se mueven en carrusel.
     Ícono decorativo fijo arriba a la izquierda, estilo referencia Edumint. */
  .socios-photo-col { position: relative; }
  .socios-badge-icon {
    position: absolute;
    top: -18px;
    left: -18px;
    z-index: 3;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    background: #006633;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(0,102,51,0.3);
  }
  .socios-photo-frame {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
  }
  .socios-photo-frame img { max-width: 85%; max-height: 85%; object-fit: contain; }
  .socios-banner {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    padding: 26px 32px 30px;
    margin: -40px 0 0; /* mismo ancho que el panel de arriba, ya no se achica a los costados */
    position: relative;
    z-index: 2;
    border-bottom: 4px solid #006633;
  }
  .socios-banner h5 { font-size: 20px; font-weight: 800; color: #14251b; margin-bottom: 6px; }
  .socios-banner p { font-size: 15px; color: #232323; margin: 0; } /* texto negro, pedido por el cliente */
  .socios-banner p i { color: #006633; margin-right: 5px; }
  .socios-carousel .owl-nav button.owl-prev,
  .socios-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #006633 !important;
    color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,102,51,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .socios-carousel .owl-nav button.owl-prev:hover,
  .socios-carousel .owl-nav button.owl-next:hover { background: #008744 !important; }
  .socios-carousel .owl-nav button.owl-prev { left: -18px; }
  .socios-carousel .owl-nav button.owl-next { right: -18px; }
  .socios-carousel .owl-dots { text-align: center; margin-top: 30px; }
  .socios-carousel .owl-dots .owl-dot span { background: #d5e8dd !important; }
  .socios-carousel .owl-dots .owl-dot.active span { background: #006633 !important; }

  /* Columna derecha: texto e ítems de check, estáticos (no forman parte del carrusel) */
  .socios-check-item { display: flex; align-items: flex-start; gap: 20px; margin-top: 26px; }
  .socios-check-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #006633;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .socios-check-item h6 { font-size: 19px; font-weight: 800; color: #14251b; margin-bottom: 6px; }
  .socios-check-item p { font-size: 16px; color: #333c37; margin: 0; line-height: 1.6; }
  @media (max-width: 767px) {
    .socios-photo-col { margin-bottom: 20px; }
    .socios-badge-icon { width: 60px; height: 60px; font-size: 22px; top: -14px; left: -14px; }
    .socios-photo-frame { height: 260px; padding: 30px; }
    .socios-carousel .owl-nav button.owl-prev,
    .socios-carousel .owl-nav button.owl-next { display: none; }
  }

  /* ===== Sección "Nuestros Servicios" — menú lateral + destacado con video =====
     Adaptada de la plantilla Consultez (home 2), con la paleta y el
     contenido real de CERECOOP. */
  .cerecoop-servicios {
    padding: 30px 0 50px;
    background: #eef6f1;
  }
  .servicios-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 18px;
  }
  .servicios-badge {
    display: inline-block;
    padding: 9px 22px;
    background: #cdeedb;
    color: #00552a;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .servicios-title {
    font-weight: 800;
    font-size: 34px;
    line-height: 1.25;
    color: #14251b;
    margin-bottom: 0;
  }
  .servicios-ver-todos {
    display: inline-block;
    padding: 14px 30px;
    background: #006633;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease;
  }
  .servicios-ver-todos:hover { background: #008744; color: #fff; }
  .servicios-lead {
    color: #333c37;
    font-size: 19px; /* texto más grande, pedido por el cliente */
    line-height: 1.75;
    max-width: 620px;
    margin: 18px 0 0;
  }
  .servicios-lead-full { max-width: 900px; margin-bottom: 40px; }

  /* Tarjetas divididas foto/panel, estilo Consultez "diseño principal 1" */
  .servicios-split-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .servicios-split-card {
    position: relative;
    display: flex;
    min-height: 420px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  }
  .servicios-split-panel {
    flex: 1 1 55%;
    background: #006633;
    color: #fff;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
  }
  .servicios-split-icon {
    order: 1;
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
  }
  img.servicios-split-icon {
    filter: brightness(0) invert(1); /* para cuando el ícono es una <img> (Servicios y Capacitaciones): lo deja blanco */
  }
  i.servicios-split-icon {
    width: auto;
    height: auto;
    font-size: 32px;   /* para cuando el ícono es un <i> de Font Awesome (estas 6 tarjetas del home): acá manda el font-size, no el width/height */
    line-height: 1;
    color: #a8e6c1;    /* verde claro institucional */
  }
  .servicios-split-num {
    order: 2;
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #a8e6c1;
    margin: 0 0 10px;
    line-height: 1.2;
  }
  .servicios-split-panel h3 { order: 3; font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.25; }
  .servicios-split-panel p { order: 4; font-size: 14.5px; color: #cdeedb; line-height: 1.55; margin: 0; }
  .servicios-split-img { flex: 1 1 45%; position: relative; }
  .servicios-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .servicios-split-arrow {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #a8e6c1;
    color: #00301a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: transform 0.3s ease, background 0.3s ease;
  }
  .servicios-split-card:hover .servicios-split-arrow {
    background: #fff;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  @media (max-width: 991px) {
    .servicios-split-grid { grid-template-columns: repeat(2, 1fr); }
    .servicios-title { font-size: 32px; }
  }
  @media (max-width: 767px) {
    .servicios-split-grid { grid-template-columns: 1fr; }
    .servicios-split-card { min-height: 340px; }
  }
  @media (max-width: 575.98px) {
    .cerecoop-servicios { padding: 35px 0 40px; }
  }

  /* La misma clase se reusa en las páginas de detalle de servicio (checklist con tilde verde) */
  .servicios-checklist { list-style: none; padding: 0; margin: 0; }
  .servicios-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    color: #333c37;
    margin-bottom: 14px;
  }
  .servicios-checklist li i { color: #006633; }

  /* ===== Sección "Datos que avalan nuestra gestión" — 4 contadores, fondo
     verde oscuro con curva arriba (el fondo curvo es de la referencia Consultez,
     el resto del contenido es el diseño original con el efecto contador) ===== */
  .cerecoop-datos-nueva {
  position: relative;
  background-image:
    linear-gradient(rgba(0,20,10,0.6), rgba(0,20,10,0.6)),
    url("../img/hero/fondo3.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* efecto de movimiento: la foto queda fija mientras el texto se desplaza */
  padding: 90px 0;
  color: #fff;
}
@media (max-width: 767px) {
  .cerecoop-datos-nueva { background-attachment: scroll; } /* "fixed" no anda bien en la mayoría de los celulares */
}
.cerecoop-datos-nueva > .container { padding-top: 50px; padding-bottom: 70px; }
  .cerecoop-datos-nueva > .container { padding-top: 40px; padding-bottom: 60px; }
  .datos-wave-top { position: relative; line-height: 0; margin-top: -1px; }
  .datos-wave-top svg { display: block; width: 100%; height: 130px; } /* antes 100px, un poco más grande */
  .datos-wave-bottom { position: relative; line-height: 0; margin-bottom: -1px; }
  .datos-wave-bottom svg { display: block; width: 100%; height: 130px; }
  .datos-title { font-weight: 800; font-size: 32px; color: #fff; margin-bottom: 12px; }
  .datos-subtitulo { font-size: 17px; color: #dfe9e3; margin-bottom: 0; }
  .dato-icono { font-size: 74px; color: #a8e6c1; margin-bottom: 22px; display: block; }
  .dato-numero { font-size: 58px; font-weight: 900; color: #fff; line-height: 1; display: inline-block; }
  .animate-number { display: inline-block; }
  .dato-texto { color: #dfe9e3; font-size: 19px; margin-top: 12px; } /* texto más grande, pedido por el cliente */
  @media (max-width: 575.98px) {
    .datos-title { font-size: 27px; }
    .dato-icono { font-size: 54px; }
    .dato-numero { font-size: 42px; }
    .dato-texto { font-size: 16px; }
  }

  /* ===== NUEVA sección "Testimonios" ===== */
  .cerecoop-testimonios {
    padding: 65px 0;
    background: linear-gradient(135deg, #00301a 0%, #00552c 100%);
  }
  .testimonios-title { font-weight: 800; font-size: 34px; color: #fff; }
  .cerecoop-testimonios .about-kicker { color: #a8e6c1; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
  /* Un testimonio grande a la vez, foto circular + globo de comilla, estilo Consultez */
  .testimonios-carousel { padding-bottom: 50px; }
  .testimonio-big {
    display: flex;
    align-items: center;
    gap: 60px;
    background: #fff;
    border-radius: 20px;
    padding: 50px 60px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
  }
  .testimonio-big-photo-wrap { position: relative; flex: 0 0 auto; }
  .testimonio-big-photo {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;
  }
  .testimonio-big-quote {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #cdeedb;
    color: #00552a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .testimonio-big-content p {
    font-size: 19px;
    color: #333c37;
    line-height: 1.75;
    margin-bottom: 18px;
  }
  .testimonio-big-content h6 {
    font-weight: 800;
    font-size: 17px;
    color: #14251b;
    margin: 0;
  }
  .testimonio-big-content h6 span { font-weight: 500; color: #6a7a70; font-size: 15px; }
  .testimonios-carousel { position: relative; }
  .testimonios-carousel .owl-nav button.owl-prev,
  .testimonios-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #006633;
    box-shadow: 0 10px 24px rgba(0,102,51,0.3);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .testimonios-carousel .owl-nav button.owl-prev:hover,
  .testimonios-carousel .owl-nav button.owl-next:hover {
    background: #008744;
    transform: translateY(-50%) scale(1.08);
  }
  .testimonios-carousel .owl-nav button.owl-prev { left: -70px; }
  .testimonios-carousel .owl-nav button.owl-next { right: -70px; }
  @media (max-width: 1300px) {
    .testimonios-carousel .owl-nav button.owl-prev { left: 10px; }
    .testimonios-carousel .owl-nav button.owl-next { right: 10px; }
  }
  .testimonios-carousel .owl-dots { text-align: center; margin-top: 20px; }
  .testimonios-carousel .owl-dots .owl-dot span { background: #d5e8dd !important; }
  .testimonios-carousel .owl-dots .owl-dot.active span { background: #006633 !important; }
  @media (max-width: 767px) {
    .testimonio-big { flex-direction: column; text-align: center; gap: 26px; padding: 36px 26px; }
    .testimonios-carousel .owl-nav button.owl-prev,
    .testimonios-carousel .owl-nav button.owl-next { display: none; } /* en celular ya se navega con swipe */
  }

  /* ===== NUEVA sección "Videos Institucionales" ===== */
  .cerecoop-videos {
    padding: 90px 0;
    background: #fff;
  }
  .videos-dark-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #00301a 0%, #00552c 100%);
    border-radius: 24px;
    padding: 56px 50px;
  }
  .videos-card-shape {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.12);
  }
  .videos-card-shape::before {
    content: "";
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.12);
  }
  .videos-title { font-weight: 800; font-size: 32px; color: #fff; }
  .videos-dark-card .datos-badge { background: rgba(255,255,255,0.15); color: #cdeedb; }
  .videos-dark-card .video-lista-meta { color: #b9d6c4; }
  .videos-dark-card .video-lista-info h5,
  .videos-dark-card h4 { color: #fff; }
  .video-principal { position: relative; border-radius: 10px; overflow: hidden; }
  .video-principal img { width: 100%; display: block; transition: transform 0.4s ease; }
  .video-principal:hover img { transform: scale(1.08); } /* efecto zoom pedido */
  .video-principal-play,
  .video-lista-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(0,135,68,0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.3s ease;
  }
  .video-lista-item a:hover .video-lista-play,
  .video-principal:hover .video-principal-play { transform: translate(-50%, -50%) scale(1.15); }
  .video-lista-play { width: 42px; height: 42px; font-size: 14px; }
  .video-lista-item { display: flex; gap: 18px; margin-bottom: 22px; align-items: center; }
  .video-lista-item a { position: relative; display: block; flex: 0 0 140px; border-radius: 8px; overflow: hidden; }
  .video-lista-item img { width: 140px; height: 90px; object-fit: cover; display: block; transition: transform 0.4s ease; }
  .video-lista-item a:hover img { transform: scale(1.1); }
  .video-lista-meta { color: #888; font-size: 13px; }
  .video-lista-info h5 { font-weight: 700; font-size: 18px; margin-top: 4px; color: #232323; }

  /* ===== Amarillo más suave para los botones (el original era muy chillón) ===== */
  .btn-theme-colored2 {
    background-color: #a8e6c1 !important;
    border-color: #a8e6c1 !important;
    color: #232323 !important;
  }
  .btn-theme-colored2:hover {
    background-color: #c9f2d9 !important;
    border-color: #c9f2d9 !important;
  }

  /* ===== FOOTER ===== */
  .cerecoop-footer {
    background: linear-gradient(180deg, #ffffff 0%, #eef6f1 100%);
    padding: 25px 0 25px;
    position: relative;
    overflow: hidden;
  }
  .cerecoop-footer .footer-logo-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid #e2ece6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    position: relative;
  }
  /* Círculos pulsantes detrás del logo, como en la referencia */
  .footer-pulse-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0,135,68,0.25);
    transform: translate(-50%, -50%) scale(1);
    animation: footerPulse 3.5s ease-out infinite;
  }
  .footer-pulse-circle.c1 { width: 260px; height: 260px; }
  .footer-pulse-circle.c2 { width: 260px; height: 260px; animation-delay: 1.75s; }
  @keyframes footerPulse {
    0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
  }
  .cerecoop-footer .footer-logo-circle img {
    max-width: 150px;
    margin-bottom: 12px;
  }
  .cerecoop-footer .footer-logo-circle a {
    display: block;
    color: #555;
    font-size: 15px;
    text-align: center;
  }
  .cerecoop-footer h5 {
    font-weight: 700;
    color: #232323;
    margin-bottom: 20px;
  }
  .cerecoop-footer ul { list-style: none; padding: 0; margin: 0; }
  .cerecoop-footer ul li { margin-bottom: 12px; }
  .cerecoop-footer ul li a,
  .cerecoop-footer ul li { color: #444; font-size: 16px; }
  .cerecoop-footer ul li a:hover { color: #008744; }
  .footer-noticias-list li {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6ece8;
  }
  .footer-noticias-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .footer-noticias-list li a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #232323;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  .footer-noticias-list li a:hover { color: #008744; }
  .footer-noticias-list li span { display: block; font-size: 12.5px; color: #888; }
  .footer-noticias-list li span i { color: #008744; margin-right: 4px; }
  .cerecoop-footer .footer-social a {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ccc;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #555;
  }
  .cerecoop-footer .footer-social a:hover {
    background: #008744;
    border-color: #008744;
    color: #fff;
  }
  .cerecoop-footer .footer-bottom {
    border-top: 1px solid #e2ece6;
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
  }
  .cerecoop-footer .footer-bottom a { color: #008744; }
  .cerecoop-footer .footer-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background: linear-gradient(100deg, rgba(0,135,68,0) 0%, rgba(0,135,68,0.05) 35%, rgba(0,135,68,0.10) 100%);
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 0;
    pointer-events: none;
  }
  .cerecoop-footer .container { position: relative; z-index: 1; }

  /* ===== NUEVO panel lateral (se abre con el ícono de hamburguesa) =====
     Fondo con degradé sutil en verde institucional + franja superior
     de color, para que se sienta más "de marca" y no un gris plano. */
  #side-panel-container {
    background: linear-gradient(165deg, #ffffff 55%, #e5f4ec 100%);
  }
  #side-panel-container:before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: #008744;
  }
  #side-panel-container .side-panel-wrap {
    padding-top: 45px;
  }
  #side-panel-container .logo {
    max-height: 55px;
    margin-bottom: 20px;
  }
  #side-panel-container p {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
  }
  #side-panel-container .widget {
    margin-top: 35px;
  }
  #side-panel-container .widget-title {
    font-family: "Poppins", sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: #232323;
  }
  #side-panel-container .widget-title:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #008744;
    margin-top: 10px;
    margin-bottom: 15px;
  }
  #side-panel-container .post-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%; /* miniaturas circulares, como en la plantilla original */
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  #side-panel-container .post-title {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
  }
  #side-panel-container .post-title a {
    color: #232323;
  }
  #side-panel-container .post-title a:hover {
    color: #008744;
  }
  #side-panel-container .tm-widget-contact-info li a {
    color: #555;
  }
  #side-panel-container .tm-widget-contact-info li a:hover {
    color: #008744;
  }

  /* ============================================================
     Páginas internas: banner superior con foto + breadcrumb
     (Servicios, y cualquier otra página interna que lo use)
     ============================================================ */
  .page-banner-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .page-banner-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 100%); /* sombra negra, pedida por el cliente */
  }
  .page-banner-content { position: relative; z-index: 2; padding: 60px 0; }
  .page-banner-title {
    color: #fff;
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 14px;
  }
  .page-breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
  }
  .page-breadcrumb a { color: #cdeedb; text-decoration: none; }
  .page-breadcrumb a:hover { text-decoration: underline; }
  .page-breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 8px;
    color: rgba(255,255,255,0.55);
  }
  @media (max-width: 575.98px) {
    .page-banner-hero { min-height: 220px; }
    .page-banner-title { font-size: 28px; }
  }

  /* ===== Página "servicios.html": grilla de las 6 tarjetas ===== */
  .page-banner-hero {
    position: relative;
    min-height: 520px; /* Banner principal ampliado */
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  /* ===== Página "servicios.html": grilla de las 6 tarjetas ===== */
  .cerecoop-servicios-grid { 
    padding: 90px 0; 
    background: #ffffff; 
  }
  .cerecoop-servicios-grid .servicios-lead { 
    max-width: 620px; 
  }
.servicios-grid-card {
    background: #f2f9f4; /* Verde claro suave */
    border-radius: 14px;
    border: 1px solid #d2e7db; /* Línea fina alrededor de la tarjeta */
    padding: 44px 30px 36px;
    text-align: center;
    height: 100%;
    box-shadow: none; /* Sin sombra */
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  .servicios-grid-card:hover {
    transform: translateY(-6px);
    border-color: #006633; /* La línea fina se oscurece un poco al pasar el cursor */
    box-shadow: none;
  }
  .servicios-grid-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  }
  .servicios-grid-icon img { 
    width: 40px; 
    height: 40px; 
  }
  .servicios-grid-card h3 { 
    font-weight: 800; 
    font-size: 22px; 
    margin-bottom: 14px; 
    color: #000000; /* Títulos en negro */
  }
  .servicios-grid-card p { 
    color: #000000; /* Descripciones en negro */
    font-size: 16.5px; 
    line-height: 1.65; 
    margin-bottom: 24px; 
  }
  .servicios-grid-btn {
    display: inline-block;
    padding: 11px 28px;
    border: 1.5px solid #006633;
    border-radius: 30px;
    color: #006633;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    background: #ffffff;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .servicios-grid-btn:hover { 
    background: #006633; 
    color: #fff; 
  }

  /* ===== Página de detalle de un servicio ===== */
  .servicio-detalle-section { padding: 30px 0 60px; }
  .servicio-detalle-content .servicios-badge { margin-bottom: 14px; }
  .servicio-detalle-content h2 { font-weight: 800; font-size: 34px; color: #14251b; margin-bottom: 24px; }
  .servicio-detalle-content p { color: #333c37; font-size: 19px; line-height: 1.85; margin-bottom: 20px; } /* texto más grande, pedido por el cliente */
  .servicio-detalle-checklist { margin-top: 26px; }
  .servicio-detalle-checklist li { font-size: 17.5px; margin-bottom: 16px; }

  .servicio-sidebar {
    background: #eef2ef;
    border-radius: 14px;
    padding: 30px;
    margin-bottom: 24px;
  }
  .servicio-sidebar h4 { font-weight: 800; font-size: 19px; margin-bottom: 18px; color: #14251b; }
  .servicio-sidebar-list { list-style: none; padding: 0; margin: 0; }
  .servicio-sidebar-list li:not(:last-child) { margin-bottom: 6px; }
  .servicio-sidebar-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-radius: 8px;
    color: #2c3a32;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px; /* texto más grande, pedido por el cliente */
    background: #fff;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .servicio-sidebar-list a img { width: 22px; height: 22px; flex-shrink: 0; }
  .servicio-sidebar-list a:hover,
  .servicio-sidebar-list a.current {
    background: #006633;
    color: #fff;
  }
  .servicio-sidebar-list a:hover img,
  .servicio-sidebar-list a.current img {
    filter: brightness(0) invert(1);
  }
  .servicio-sidebar-cta {
    background: linear-gradient(135deg, #00753b 0%, #006633 100%);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    color: #fff;
  }
  .servicio-sidebar-cta h5 { font-weight: 800; margin-bottom: 10px; color: #fff; } /* antes se veía oscuro, heredaba el color de los títulos del tema */
  .servicio-sidebar-cta p { font-size: 15px; color: #fff; margin-bottom: 0; }
  .servicio-sidebar-cta a {
    display: inline-block;
    margin-top: 16px;
    background: #fff;
    color: #006633;
    padding: 11px 26px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13.5px;
    transition: transform 0.25s ease;
  }
  .servicio-sidebar-cta a:hover { transform: translateY(-2px); }

  /* ============================================================
     Página "Capacitaciones" — listado agrupado por área temática
     + páginas de detalle de cada curso (reutiliza .servicio-sidebar,
     .servicios-checklist y .servicios-grid-btn ya definidos arriba).
     ============================================================ */
  .cerecoop-capacitaciones { padding: 90px 0; background: #fff; }
  .capacitaciones-sidebar-sticky { position: sticky; top: 100px; }

  /* Lateral de Capacitaciones (listado y detalle): fondo verde liso institucional,
     cada área es un desplegable real (<details>/<summary>, sin JS) que muestra
     los cursos de esa área al abrirla. Sin números. */
  .capacitaciones-sidebar-sticky.servicio-sidebar { background: #006633; }
  .capacitaciones-sidebar-sticky h4 { color: #fff; }

  .cap-area-acc-wrap { display: flex; flex-direction: column; gap: 8px; }
  .cap-area-acc {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
  }
  .cap-area-acc summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
  }
  .cap-area-acc summary::-webkit-details-marker { display: none; } /* saca el triangulito nativo de Chrome/Safari */
  .cap-area-acc summary img { width: 22px; height: 22px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.9; }
  .cap-area-acc-caret { margin-left: auto; font-size: 13px; transition: transform 0.25s ease; opacity: 0.8; }
  .cap-area-acc[open] .cap-area-acc-caret { transform: rotate(180deg); }
  .cap-area-acc[open] summary { background: rgba(255,255,255,0.06); }
  .cap-area-acc-cursos { list-style: none; margin: 0; padding: 4px 10px 12px; }
  .cap-area-acc-cursos li:not(:last-child) { margin-bottom: 2px; }
  .cap-area-acc-cursos a {
    display: block;
    padding: 9px 14px 9px 40px;
    border-radius: 8px;
    color: #d3e6da;
    font-size: 13.5px;
    line-height: 1.4;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .cap-area-acc-cursos a:hover,
  .cap-area-acc-cursos a.current {
    background: #a8e6c1;
    color: #00301a;
  }
  .capacitacion-categoria { margin-bottom: 56px; scroll-margin-top: 110px; }
  .capacitacion-categoria:last-child { margin-bottom: 0; }
  .capacitacion-categoria-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 800;
    font-size: 24px;
    color: #14251b;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e9efeb;
  }
  .capacitacion-categoria-title img { width: 30px; height: 30px; }
  .capacitacion-split-grid { margin-bottom: 8px; }

  /* Meta (horas + modalidad) en la página de detalle de una capacitación */
  .capacitacion-meta-row {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin: 18px 0 26px;
  }
  .capacitacion-meta-row span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #00552a;
    background: #e9f7ef;
    padding: 8px 16px;
    border-radius: 30px;
  }
  .capacitacion-subtitle {
    font-weight: 800;
    font-size: 19px;
    color: #14251b;
    margin: 30px 0 16px;
  }
  @media (max-width: 991px) {
    .capacitaciones-sidebar-sticky { position: static; margin-bottom: 30px; }
  }
  @media (max-width: 575.98px) {
    .cerecoop-capacitaciones { padding: 60px 0; }
    .capacitacion-categoria-title { font-size: 20px; }
  }

  /* ===== Sección "Capacitaciones destacadas" (home) — reusa el mismo estilo
     de tarjeta dividida que "Nuestros Servicios" (.servicios-split-*) ===== */
  .cerecoop-capacitaciones-home { padding: 60px 0 90px; background: #ffffff; }
  .cerecoop-capacitaciones-home .row.g-5 { align-items: flex-start; }
  .cerecoop-capacitaciones-home .servicios-title { font-size: 36px; }
  .cerecoop-capacitaciones-home .servicios-lead { font-size: 19px; max-width: 100%; }

  /* ===== Checklist de la columna izquierda (Capacitaciones destacadas) ===== */
  .cap-check-list { list-style: none; padding: 0; margin: 28px 0 34px; }
  .cap-check-list li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: #14251b; margin-bottom: 16px; }
  .cap-check-list li i { color: #006633; font-size: 20px; }

  /* ===== Lista tipo "acordeón" de la derecha (todos son <a> a la página de detalle) ===== */
  .cap-acc-list { display: flex; flex-direction: column; }
  .cap-acc-item {
    display: block;
    text-decoration: none;
    padding: 28px 10px;
    border-bottom: 1px solid #e6ece8;
    transition: background 0.25s ease, padding 0.25s ease;
  }
  .cap-acc-item:last-child { border-bottom: none; }
  .cap-acc-header { display: flex; align-items: center; gap: 24px; }
  .cap-acc-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e9f7ef;
    color: #006633;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .cap-acc-title { flex: 1; font-size: 22px; font-weight: 800; color: #14251b; line-height: 1.3; transition: color 0.25s ease; }
  .cap-acc-num { flex: 0 0 auto; font-size: 17px; font-weight: 700; color: #6a7a70; transition: color 0.25s ease; }
  .cap-acc-text { margin: 18px 0 0; padding-left: 88px; font-size: 17px; line-height: 1.65; color: #4b5a50; }

  /* Al pasar el cursor (o en la que ya viene activa), se destaca en verde institucional y muestra la bajada */
  .cap-acc-item.active,
  .cap-acc-item:hover {
    background: linear-gradient(160deg, #00301a 0%, #006633 100%);
    border-radius: 16px;
    border-bottom-color: transparent;
    padding: 32px 28px;
  }
  .cap-acc-item.active .cap-acc-icon,
  .cap-acc-item:hover .cap-acc-icon { background: rgba(255,255,255,0.15); color: #fff; }
  .cap-acc-item.active .cap-acc-title,
  .cap-acc-item:hover .cap-acc-title,
  .cap-acc-item.active .cap-acc-num,
  .cap-acc-item:hover .cap-acc-num { color: #fff; }
  .cap-acc-item.active .cap-acc-text,
  .cap-acc-item:hover .cap-acc-text { color: rgba(255,255,255,0.9); }
  /* La bajada se muestra en la que viene activa por defecto Y en la que se pasa el cursor */
  .cap-acc-item:not(.active):not(:hover) .cap-acc-text { display: none; }
  @media (max-width: 991px) {
    .cap-acc-text { padding-left: 0; }
    .cerecoop-capacitaciones-home .servicios-title { font-size: 32px; }
  }

  /* ===== Página "Todas las Noticias" — grilla completa (reusa el mismo estilo
     de tarjeta que la home: .noticia-card-img, .noticia-card-body, etc.) ===== */
  .cerecoop-noticias-grid { padding: 25px 0 60px; background: #f7f7f5; }
  .noticia-grid-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* ===== Páginas de detalle de una noticia (noticia-XX-slug.html) =====
     Adaptado del diseño real de noticia-02-escuela-gerentes.html,
     con los colores institucionales (antes tenía un acento amarillo
     y fondo gris, ajenos a la paleta verde de CERECOOP). */
  .noticia-hero {
    background: linear-gradient(135deg, #00301a 0%, #00552c 100%);
    padding: 70px 0 60px;
    text-align: center;
  }
  .noticia-hero .noticia-categoria {
    color: #a8e6c1;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .noticia-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: 34px;
    max-width: 820px;
    margin: 0 auto 14px;
    line-height: 1.3;
  }
  .noticia-hero .noticia-fecha { color: #cdeedb; font-size: 15px; }
  .noticia-body-section { padding: 60px 0 90px; background: #fff; }
  .noticia-carousel img { width: 100%; height: 440px; object-fit: cover; border-radius: 12px; }
  .noticia-carousel { margin-bottom: 35px; }
  .noticia-carousel .carousel-indicators [data-bs-target] { background-color: #fff; }
  .noticia-carousel .carousel-control-prev,
  .noticia-carousel .carousel-control-next { width: 8%; }
  .noticia-texto { font-size: 18px; color: #333c37; line-height: 1.85; margin-bottom: 22px; }
  .noticia-cita {
    border-left: 4px solid #006633;
    padding: 22px 26px;
    margin: 30px 0;
    background: #eef6f1;
    font-style: italic;
    font-size: 19px;
    color: #14251b;
    border-radius: 0 8px 8px 0;
  }
  .noticia-tags { margin-top: 30px; }
  .noticia-tags .badge {
    background: #e5f4ec;
    color: #006633;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 20px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
  }
  .sidebar-widget { background: #eef6f1; border-radius: 12px; padding: 26px; margin-bottom: 25px; }
  .sidebar-widget .widget-title { font-weight: 800; text-transform: uppercase; font-size: 15px; margin-bottom: 18px; color: #14251b; letter-spacing: 0.5px; }
  .sidebar-search input { width: 100%; border: 1px solid #cfe3d7; border-radius: 8px; padding: 11px 16px; }

  /* ===== Galería de fotos en el detalle de una noticia (cuando hay varias fotos reales) ===== */
  .noticia-galeria-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  .noticia-galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
  }
  /* ===== Saca la sombra/borde gris que la plantilla le pone al header por defecto ===== */
  header#header,
  header#header *,
  .navbar-scrolltofixed,
  .header-nav-wrapper,
  .menuzord-container {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: none !important;
  filter: none !important;
}  .noticia-galeria-item:hover img { transform: scale(1.08); }

  /* ===== "Más capacitaciones de esta área temática" al pie de cada detalle ===== */
  .cerecoop-capacitaciones-relacionadas { padding: 20px 0 80px; background: #fff; }
  .capacitacion-relacionadas-title {
    font-weight: 800;
    font-size: 24px;
    color: #14251b;
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e9efeb;
  }

  /* ===== Página Equipo y Directorio: hero + tarjetas de integrantes ===== */
  .equipo-hero {
    position: relative;
    padding: 90px 0 60px;
    background: linear-gradient(135deg, #00301a 0%, #006633 100%);
    color: #fff;
    text-align: center;
  }
  .equipo-hero .about-kicker { color: #a8e6c1; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
  .equipo-hero h1 { font-size: 34px; font-weight: 800; color: #fff; margin: 0; }

  .cerecoop-equipo {
    position: relative;
    padding: 70px 0 90px;
    background-image:
      linear-gradient(rgba(255,255,255,0.94), rgba(255,255,255,0.94)),
      url("../img/equipo/team1.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  @media (max-width: 767px) {
    .cerecoop-equipo { background-attachment: scroll; }
  }
  .equipo-organo {
    font-size: 25px;
    font-weight: 800;
    color: #14251b;
    display: inline-block;
    padding-bottom: 12px;
    border-bottom: 3px solid #006633;
  }
  .equipo-subgrupo {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #006633;
    background: #e2f2e8;
    padding: 8px 22px;
    border-radius: 30px;
  }
  .equipo-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .equipo-card:hover { transform: translateY(-8px); box-shadow: 0 26px 55px rgba(0,0,0,0.16); }
  .equipo-card img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
    display: block;
  }
  .equipo-card-info { padding: 22px 20px 26px; text-align: center; }
  .equipo-card-info h6 { font-size: 20px; font-weight: 800; color: #14251b; margin-bottom: 6px; }
  .equipo-card-info small { font-size: 15px; color: #006633; font-weight: 700; }
  @media (max-width: 575.98px) {
    .equipo-hero h1 { font-size: 30px; }
    .equipo-organo { font-size: 24px; }
  }

  /* ===== Detalle de noticia: meta (autor+fecha) arriba del texto, y grilla de "Otras Noticias" en el lateral ===== */
  .noticia-card-meta-detalle { display: flex; gap: 20px; font-size: 13.5px; color: #6a7a70; }
  .noticia-card-meta-detalle i { color: #006633; margin-right: 5px; }
  .noticia-mini-list { display: flex; flex-direction: column; gap: 16px; }
  .noticia-mini-card {
    display: flex;
    gap: 14px;
    text-decoration: none;
    align-items: flex-start;
  }
  .noticia-mini-img {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
  }
  .noticia-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
  .noticia-mini-card:hover .noticia-mini-img img { transform: scale(1.1); }
  .noticia-mini-body { flex: 1; }
  .noticia-mini-fecha { display: block; font-size: 11.5px; color: #8a978f; margin-bottom: 4px; }
  .noticia-mini-fecha i { color: #006633; margin-right: 3px; }
  .noticia-mini-body h6 { font-size: 14px; font-weight: 700; color: #232323; line-height: 1.35; margin: 0; }
  .noticia-mini-card:hover .noticia-mini-body h6 { color: #006633; }

/* ============================================================
   AJUSTES SOLICITADOS POR EL CLIENTE (ronda de revisión)
   ============================================================ */

/* ----- 1) Detalle de noticia: carrusel/foto como portada + "Otras Noticias" en carrusel con flechas ----- */
.noticia-breadcrumb-bar { padding: 18px 0; background: #f7f7f5; }
.page-breadcrumb-dark { color: #4a5850; }
.page-breadcrumb-dark a { color: #006633; text-decoration: none; }
.page-breadcrumb-dark a:hover { text-decoration: underline; }
.page-breadcrumb-dark li:not(:last-child)::after { color: #9db3a8; }
.noticia-detalle-title { font-weight: 800; font-size: 30px; color: #14251b; line-height: 1.25; margin-bottom: 14px; }
.noticia-detalle-section { padding: 30px 0 60px; background: #fff; }
.noticia-detalle-media .noticia-detalle-carousel .tm-carousel-item img,
.noticia-detalle-media .noticia-detalle-foto-single img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.noticia-detalle-media .noticia-detalle-carousel { padding-bottom: 46px; position: relative; }
.noticia-detalle-carousel .owl-nav button.owl-prev,
.noticia-detalle-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #006633 !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(0,102,51,0.28);
  z-index: 5;
}
.noticia-detalle-carousel .owl-nav button.owl-prev:hover,
.noticia-detalle-carousel .owl-nav button.owl-next:hover { background: #008744 !important; }
.noticia-detalle-carousel .owl-nav button.owl-prev { left: 14px; }
.noticia-detalle-carousel .owl-nav button.owl-next { right: 14px; }
.noticia-detalle-carousel .owl-dots { text-align: center; margin-top: 14px; }
.noticia-detalle-carousel .owl-dots .owl-dot span { background: #cfe3d7 !important; }
.noticia-detalle-carousel .owl-dots .owl-dot.active span { background: #006633 !important; }
@media (max-width: 767px) {
  .noticia-detalle-carousel .tm-carousel-item img,
  .noticia-detalle-foto-single img { height: 260px; border-radius: 12px; }
  .noticia-detalle-title { font-size: 24px; }
}

.otras-noticias-section { padding: 40px 0 70px; background: #f7f7f5; }
.otras-noticias-title { font-weight: 800; font-size: 24px; color: #14251b; margin-bottom: 26px; }
.otras-noticias-carousel-wrap { width: 100%; max-width: 100%; padding: 0 60px; }
.otras-noticias-carousel .noticia-card { height: 260px; }
.otras-noticias-carousel .noticia-card-img { height: 260px; }
.otras-noticias-carousel .noticia-card-img::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,10,5,0.55) 55%, rgba(0,10,5,0.94) 100%) !important;
}
.otras-noticias-carousel .noticia-card-body { padding: 20px 20px 22px; }
.otras-noticias-carousel .noticia-card-body h5 { font-size: 15px; padding-right: 0; color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.otras-noticias-carousel .noticia-card-meta { margin-bottom: 6px; }
.otras-noticias-carousel .noticia-card-meta span:last-child { color: #cdeedb !important; }
.otras-noticias-carousel.owl-carousel { padding: 0 45px 50px; }
.otras-noticias-carousel .owl-nav button.owl-prev,
.otras-noticias-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #006633 !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 17px;
  box-shadow: 0 10px 24px rgba(0,102,51,0.28);
  z-index: 5;
}
.otras-noticias-carousel .owl-nav button.owl-prev:hover,
.otras-noticias-carousel .owl-nav button.owl-next:hover { background: #008744 !important; }
.otras-noticias-carousel .owl-nav button.owl-prev { left: 0; }
.otras-noticias-carousel .owl-nav button.owl-next { right: 0; }
.otras-noticias-carousel .owl-dots { text-align: center; margin-top: 10px; }
.otras-noticias-carousel .owl-dots .owl-dot span { background: rgba(0,0,0,0.15) !important; }
.otras-noticias-carousel .owl-dots .owl-dot.active span { background: #006633 !important; }

/* ----- 22) Equipo: línea con la cooperativa de cada persona (texto normal, más chico) ----- */
.equipo-card-info .equipo-coop,
.equipo-coop {
  color: #6c8577;
  font-size: 11.5px;
  font-weight: 400 !important;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .otras-noticias-carousel-wrap { padding: 0 40px; }
  .otras-noticias-carousel .noticia-card,
  .otras-noticias-carousel .noticia-card-img { height: 240px; }
}

/* ----- 2) Sección "Nosotros" (Quiénes somos / Misión / Visión / Valores): tarjetas más chicas ----- */
.hero-card {
  padding: 22px 20px 20px;
}
.hero-card-icon {
  width: 46px;
  height: 46px;
  font-size: 19px;
  margin-bottom: 14px;
}
.hero-card-title {
  font-size: 19px;
  margin-bottom: 8px;
}
.hero-card-text {
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* ----- 3) Página Servicios: menos espacio entre el banner y el título/texto ----- */
.page-banner-hero { min-height: 260px !important; }
.page-banner-content { padding: 30px 0 !important; }
.cerecoop-servicios-grid { padding: 20px 0 30px !important; }
.servicios-intro.mb-5 { margin-bottom: 2rem !important; }

/* ----- 4) Home: menos espacio entre "Capacitaciones" y "Cooperativas Asociadas" ----- */
.cerecoop-capacitaciones-home { padding: 60px 0 50px !important; }
.cerecoop-cooperativas { padding: 20px 0 60px !important; }

/* ----- 5) Testimonios: franja verde más fina, ajustada a las tarjetas blancas ----- */
.cerecoop-testimonios { padding: 40px 0 !important; }
.testimonios-carousel { padding-bottom: 30px !important; }
.testimonio-big { padding: 34px 44px !important; }

/* ----- 6) Sección Noticias (home): tarjetas menos pegadas, más cerca del título, fondo gris igual a Socios ----- */
.cerecoop-noticias { padding: 20px 0 50px !important; background: #f7f7f5 !important; }
.cerecoop-noticias .servicios-header-row { margin-bottom: 34px !important; }
.cerecoop-noticias .owl-carousel.tm-owl-carousel-3col { padding: 0 45px 50px !important; }
.cerecoop-noticias .owl-carousel .owl-stage { display: flex; }
.cerecoop-noticias .owl-carousel .owl-item { padding: 0 12px; }

/* ----- 7) Menos espacio entre Videos / Memoria y Balance / Contacto ----- */
.cerecoop-videos { padding: 50px 0 !important; }
.cerecoop-memoria { padding: 45px 0 !important; }
.cerecoop-contacto > .container { padding-top: 25px !important; padding-bottom: 50px !important; }

/* Regla general: que ninguna sección quede con demasiado aire entre el fin de una
   y el comienzo de la siguiente (ver secciones puntuales arriba, con !important
   para pisar el padding original de cada bloque). */

/* ----- 8) Capacitaciones: tarjetas del listado (por categoría) más chicas ----- */
.capacitacion-split-card { min-height: 190px !important; }
.capacitacion-split-card .servicios-split-panel { padding: 16px 18px !important; }
.capacitacion-split-card .servicios-split-num { font-size: 12px !important; margin-bottom: 4px !important; }
.capacitacion-split-card i.servicios-split-icon { font-size: 20px !important; margin-bottom: 8px !important; }
.capacitacion-split-card .servicios-split-panel h3 { font-size: 15px !important; margin-bottom: 4px !important; }
.capacitacion-split-card .servicios-split-panel p { font-size: 12.5px !important; line-height: 1.4 !important; }
.capacitacion-split-card .servicios-split-arrow { width: 34px !important; height: 34px !important; font-size: 13px !important; }
@media (max-width: 767px) {
  .capacitacion-split-card { min-height: 170px !important; }
}
.cerecoop-capacitaciones { padding: 60px 0 !important; }
.capacitacion-categoria { margin-bottom: 40px !important; }

/* ----- 9) Sidebar "Áreas Temáticas": agregamos la categoría Noticias con sus sub-items ----- */
.cap-area-acc-cursos a.cap-area-noticias-link { font-weight: 700; }

/* ----- 10) Formulario de contacto embebido en el sidebar de cada capacitación ----- */
.cap-sidebar-form-wrap { text-align: left; }
.cap-sidebar-form { margin-top: 14px; }
.cap-sidebar-form input,
.cap-sidebar-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 6px;
  padding: 11px 14px;
  margin-bottom: 10px;
  font-size: 13.5px;
}
.cap-sidebar-form input::placeholder,
.cap-sidebar-form textarea::placeholder { color: rgba(255,255,255,0.75); }
.cap-sidebar-form textarea { min-height: 90px; resize: vertical; }
.cap-sidebar-form .btn { font-size: 14px; padding: 11px 16px; }

/* ----- 11) Header index.html: íconos de Facebook / Instagram en lugar de la hamburguesa ----- */
.cerecoop-header-social-icons {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cerecoop-header-social-icons a,
header#header .cerecoop-header-social-icons a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9f7ef;
  color: #006633;
  border: 1.5px solid #00552a !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.25s ease, color 0.25s ease;
}
.cerecoop-header-social-icons a:hover { background: #006633; color: #fff; }

/* ----- 12) Botón fijo "Volver arriba" (todas las páginas, siempre visible) ----- */
.cerecoop-back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #14325c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  opacity: 1;
  visibility: visible;
  transition: background 0.25s ease, transform 0.2s ease;
  z-index: 999;
  text-decoration: none;
}
.cerecoop-back-to-top:hover { background: #006633; color: #fff; transform: translateY(-2px); }
@media (max-width: 575.98px) {
  .cerecoop-back-to-top { right: 14px; bottom: 14px; width: 38px; height: 38px; font-size: 14px; }
}

/* ----- 13) Menú principal: submenús desplegables (Servicios / Capacitaciones / Noticias) ----- */
.menuzord-menu ul.dropdown { min-width: 260px; padding: 8px 0; }
.menuzord-menu ul.dropdown li a { font-size: 14px; padding: 10px 20px; white-space: normal; }
.cerecoop-menu-caret { font-size: 10px; margin-left: 5px; }

/* ============================================================
   RONDA 2 DE AJUSTES (espacios en blanco excesivos, index.html)
   ============================================================ */

/* ----- 14) Capacitaciones (home) -> Cooperativas Asociadas:
   la columna izquierda (texto corto) estiraba a la derecha (lista
   acordeón) por el "align-items: stretch" por defecto del row de
   Bootstrap, dejando un hueco enorme debajo de la lista. Se
   desactiva el estiramiento y se ajusta el padding inferior. ----- */
.cerecoop-capacitaciones-home .row.g-5 { align-items: flex-start !important; }
.cerecoop-capacitaciones-home { padding: 40px 0 30px !important; }
.cerecoop-cooperativas { padding: 40px 0 !important; }

/* ----- 15) Noticias (home): menos aire entre el título y el carrusel ----- */
.cerecoop-noticias { padding: 40px 0 !important; }
.cerecoop-noticias .servicios-header-row { margin-bottom: 20px !important; }
.noticias-carousel-wrap { margin-top: 0 !important; }

/* ----- 16) Videos Institucionales -> Memoria y Balance: menos padding
   y fondo gris claro (igual al resto de secciones neutras) ----- */
.cerecoop-videos { padding: 25px 0 !important; }
.cerecoop-memoria { padding: 25px 0 50px !important; background: #f7f7f5 !important; }

/* ============================================================
   BUG RAÍZ ENCONTRADO Y CORREGIDO (ronda de espacios en blanco)
   ------------------------------------------------------------
   La plantilla base (style-main.css) trae esta regla de fábrica:
     section > .container, section > .container-fluid {
       padding-top: 120px; padding-bottom: 120px; }
   Es decir: CUALQUIER <div class="container"> que esté
   directamente dentro de un <section> recibe 240px extra
   (120 arriba + 120 abajo) SUMADOS al padding que le pongamos
   a la propia sección. Por eso, aunque redujimos el padding de
   cada sección en rondas anteriores, seguía apareciendo un hueco
   de ~240px extra en TODAS las secciones nuevas (contacto,
   detalle de noticias, otras noticias, breadcrumb, etc.).
   Esta regla la anula de una vez por todas para toda la web. ---- */
section > .container,
section > .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   RONDA 3 DE AJUSTES
   ============================================================ */

/* ----- 17) "Más Capacitaciones de [categoría]": tarjetas más chicas en una sola hilera ----- */
.cerecoop-capacitaciones-relacionadas .servicios-grid-card { padding: 22px 20px 20px; }
.cerecoop-capacitaciones-relacionadas .servicios-grid-icon { width: 56px; height: 56px; margin-bottom: 14px; }
.cerecoop-capacitaciones-relacionadas .servicios-grid-icon img { width: 24px; height: 24px; }
.cerecoop-capacitaciones-relacionadas .servicios-grid-card h3 { font-size: 16px; margin-bottom: 8px; }
.cerecoop-capacitaciones-relacionadas .servicios-grid-card p { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
.cerecoop-capacitaciones-relacionadas .servicios-grid-btn { font-size: 13px; padding: 8px 18px; }

/* ----- 18) Quitar la costura blanca entre las secciones verdes curvas y el pie de página ----- */
.cerecoop-footer { background: linear-gradient(180deg, #f2f8f4 0%, #eef6f1 100%) !important; padding: 45px 0 25px !important; }

/* ----- 19) Banner de servicios.html: carrusel de fotos como fondo (en vez de una sola foto fija) ----- */
.page-banner-hero-carousel { padding: 0; }
.page-banner-hero-carousel .page-banner-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-banner-hero-carousel .page-banner-carousel,
.page-banner-hero-carousel .page-banner-carousel .owl-stage-outer,
.page-banner-hero-carousel .page-banner-carousel .owl-stage,
.page-banner-hero-carousel .page-banner-carousel .owl-item,
.page-banner-hero-carousel .page-banner-carousel .tm-carousel-item {
  height: 100%;
}
.page-banner-hero-carousel .page-banner-carousel .tm-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-banner-hero-carousel::before { z-index: 1; }
.page-banner-hero-carousel .page-banner-content { z-index: 2; }

/* ----- 20) Banners de servicios/capacitaciones: un poco más grandes ----- */
.page-banner-hero { min-height: 300px !important; }
.page-banner-hero-carousel.page-banner-hero { min-height: 460px !important; }

/* ----- 21) Menú principal: YA NO queda fijo al hacer scroll. Solo
   reaparece flotando (con animación) si el puntero se acerca a la
   franja superior de la pantalla (ver el script al final del body). */
.header-nav-container {
  position: relative;
  z-index: 1000;
}
.header-nav-container.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  animation: cerecoopNavReveal 0.2s ease;
}
@keyframes cerecoopNavReveal {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.header-nav-container.is-sticky .menuzord-brand img,
.header-nav-container.is-sticky .logo-brand img { max-height: 40px; }
.header-nav-container.is-sticky .menuzord-menu > li > a { padding-top: 14px !important; padding-bottom: 14px !important; }

/* ----- 23) Menú principal más fino en todas las páginas (no solo al hacer scroll) ----- */
header#header .menuzord-brand img { max-height: 42px !important; }
.menuzord-menu > li > a { padding-top: 6px !important; padding-bottom: 6px !important; }

/* ----- 24) Barra superior verde (teléfono/correo/dirección): más fina, con bordes en los íconos ----- */
header#header .header-top { padding: 6px 0 !important; font-size: 13.5px !important; line-height: 1.4 !important; }
.header-top .contact-info li { margin-right: 14px; }
.header-top .contact-info a { color: inherit; text-decoration: none; }
.header-top .contact-info a:hover { text-decoration: underline; }


/* ----- 25) Noticias: la foto llena SIEMPRE toda la tarjeta (sin franja oscura al costado) -----
   La plantilla fuerza `.owl-carousel .owl-item img { width:auto }`, y eso le ganaba al
   `width:100%` de la tarjeta: la foto quedaba con su ancho natural (las verticales se veían
   angostas) y asomaba el fondo verde oscuro. Con más especificidad se fuerza el relleno. */
.owl-carousel .owl-item .noticia-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ----- 26) Barra superior verde: sin las rayas que separan teléfono / correo / dirección ----- */
header#header .header-top .contact-info li:not(:first-child):before {
  content: none !important;
  display: none !important;
}


/* =====================================================================
   27) LOGO VISIBLE EN PANTALLAS DE ALTA DENSIDAD (iPhone, Mac retina, etc.)
   La plantilla oculta `.logo-1x` en pantallas con densidad >= 1.5 y espera un
   `.logo-2x` que este sitio no tiene: por eso el logo desaparecía en celulares.
   ===================================================================== */
header#header .menuzord-brand .logo-default.logo-1x { display: inline-block !important; }
header#header .menuzord-brand img.logo-2x { display: none !important; }


/* =====================================================================
   28) VERSIÓN CELULAR (hasta 767 px)
   - La plantilla usa line-height 2.25 en todo el texto: en el celular se ve
     enorme y separado. Se baja a un interlineado normal.
   - Textos y títulos más chicos, botones y flechas bien visibles.
   ===================================================================== */
@media (max-width: 767.98px) {

  /* ---- Base ---- */
  body { font-size: 15px !important; line-height: 1.6 !important; }
  p, li, label, span { line-height: 1.6; }
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  h1, h2, h3, h4, h5, h6 { line-height: 1.25 !important; }

  /* Etiquetas (pastillas) sobre los títulos de sección */
  .servicios-badge, .about-kicker, .contacto-kicker, .coop-kicker {
    font-size: 11.5px !important; line-height: 1.2 !important; padding: 7px 14px !important; letter-spacing: .6px;
  }
  /* Títulos de sección */
  .servicios-title, .coop-title, .testimonios-title, .noticias-title, .videos-title,
  .memoria-title, .datos-title { font-size: 25px !important; line-height: 1.22 !important; }
  .servicios-lead, .memoria-lead, .contacto-lead, .coop-texto { font-size: 14.5px !important; line-height: 1.6 !important; }

  /* Botones */
  .servicios-ver-todos, .btn-cerecoop-cta, .btn.btn-md, .btn-theme-colored2, .servicios-grid-btn {
    font-size: 14px !important; line-height: 1.25 !important; padding: 12px 22px !important; border-radius: 10px !important;
  }

  /* ---- Barra superior verde: compacta (teléfono + correo en una línea) ---- */
  header#header .header-top { padding: 6px 0 !important; font-size: 12.5px !important; }
  header#header .header-top .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  header#header .header-top .contact-info {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 0 !important; padding: 0 !important;
  }
  header#header .header-top .contact-info li { display: inline-flex !important; margin: 0 !important; line-height: 1.6 !important; }
  header#header .header-top .contact-info li.contact-address,
  header#header .header-top .contact-info li.contact-noticias { display: none !important; }
  header#header .header-top .contact-info .font-icon { margin-right: 5px !important; display: inline !important; }
  header#header .header-top-right { margin-top: 2px; }
  header#header .header-top .styled-icons li a.social-link { width: 26px !important; height: 26px !important; line-height: 24px !important; font-size: 12px !important; }
  header#header .header-top .styled-icons { margin: 0 !important; }

  /* ---- Menú: logo y botón de hamburguesa ---- */
  header#header .menuzord-brand img { max-height: 38px !important; width: auto !important; }
  header#header .header-nav-wrapper { padding-top: 6px; padding-bottom: 6px; }
  .menuzord-menu > li > a { font-size: 15px !important; line-height: 1.4 !important; }

  /* ---- Banner de cabecera de las páginas internas ---- */
  .page-banner-content { padding-left: 18px !important; padding-right: 18px !important; }
  .page-banner-title { font-size: 25px !important; line-height: 1.22 !important; }
  .page-breadcrumb, .page-breadcrumb li, .page-breadcrumb a { font-size: 13px !important; line-height: 1.5 !important; }
  .noticia-breadcrumb-bar { padding: 10px 0 !important; }

  /* ---- Portada: carrusel principal ---- */
  #home .rs-layer, #home rs-layer { line-height: 1.5 !important; }
  .hero-card-title { font-size: 17px !important; line-height: 1.3 !important; }
  .hero-card-text, .hero-card p { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* ---- Capacitaciones destacadas (acordeón) ---- */
  .cap-check-list li { font-size: 14.5px !important; line-height: 1.5 !important; }
  .cap-acc-header { padding: 14px 0 !important; gap: 14px !important; }
  .cap-acc-icon { width: 46px !important; height: 46px !important; font-size: 18px !important; flex: 0 0 46px !important; }
  .cap-acc-title { font-size: 16.5px !important; line-height: 1.3 !important; }
  .cap-acc-num { font-size: 13px !important; }
  .cap-acc-text { font-size: 14px !important; line-height: 1.55 !important; }

  /* ---- Cooperativas asociadas ---- */
  .socios-banner h5 { font-size: 18px !important; line-height: 1.25 !important; }
  .socios-banner p { font-size: 13.5px !important; line-height: 1.4 !important; }
  .socios-check-item { font-size: 14px !important; line-height: 1.5 !important; }

  /* ---- Datos que avalan nuestra gestión: 2 x 2 parejo, sin cortar los números ---- */
  .datos-title { font-size: 23px !important; margin-bottom: 22px !important; }
  .cerecoop-datos-nueva .row > [class*="col"] { margin-bottom: 22px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .dato-icono { font-size: 30px !important; margin-bottom: 8px !important; }
  .dato-numero { font-size: 32px !important; line-height: 1.1 !important; white-space: nowrap !important; margin-bottom: 6px !important; }
  .dato-texto { font-size: 13px !important; line-height: 1.35 !important; }

  /* ---- Testimonios ---- */
  .testimonio-big { padding: 26px 18px 24px !important; border-radius: 20px !important; }
  .testimonio-big-photo { width: 104px !important; height: 104px !important; }
  .testimonio-big-quote { width: 40px !important; height: 40px !important; font-size: 16px !important; }
  .testimonio-big-content p, .testimonio-big-content blockquote { font-size: 14px !important; line-height: 1.6 !important; }
  .testimonio-big-content h5, .testimonio-big-content strong { font-size: 15px !important; }

  /* ---- Noticias (portada): tarjetas a todo el ancho y flechas bien visibles ---- */
  .cerecoop-noticias { padding: 30px 0 34px !important; }
  .cerecoop-noticias .servicios-header-row { margin-bottom: 18px !important; gap: 14px; }
  .cerecoop-noticias .noticias-carousel-wrap { padding: 0 !important; }
  .cerecoop-noticias .owl-carousel,
  .cerecoop-noticias .owl-carousel.tm-owl-carousel-3col { padding: 0 18px 42px !important; }
  .cerecoop-noticias .owl-carousel .owl-item { padding: 0 !important; }
  .cerecoop-noticias .owl-carousel .owl-stage { display: flex; }
  .noticia-card { border-radius: 18px !important; }
  .noticia-card-img { height: 340px !important; }
  .noticia-card-body { padding: 18px 18px 20px !important; }
  .noticia-card-body h5 { font-size: 17px !important; line-height: 1.3 !important; padding-right: 56px !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none; }
  .noticia-arrow-btn { width: 40px !important; height: 40px !important; right: 16px !important; bottom: 18px !important; font-size: 14px !important; }

  /* Flechas del carrusel: círculos blancos con flecha verde, sobre la foto (siempre visibles) */
  .cerecoop-noticias .owl-nav button.owl-prev,
  .cerecoop-noticias .owl-nav button.owl-next,
  .otras-noticias-carousel .owl-nav button.owl-prev,
  .otras-noticias-carousel .owl-nav button.owl-next,
  .noticia-detalle-carousel .owl-nav button.owl-prev,
  .noticia-detalle-carousel .owl-nav button.owl-next {
    width: 38px !important; height: 38px !important; font-size: 14px !important; top: 42% !important;
    background: rgba(255,255,255,.94) !important; color: #006633 !important; border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.28) !important; opacity: 1 !important; z-index: 6;
  }
  .cerecoop-noticias .owl-nav button.owl-prev, .otras-noticias-carousel .owl-nav button.owl-prev { left: 28px !important; }
  .cerecoop-noticias .owl-nav button.owl-next, .otras-noticias-carousel .owl-nav button.owl-next { right: 28px !important; }
  .noticia-detalle-carousel .owl-nav button.owl-prev { left: 10px !important; }
  .noticia-detalle-carousel .owl-nav button.owl-next { right: 10px !important; }
  .owl-carousel .owl-dots { margin-top: 12px !important; }
  .owl-carousel .owl-dots .owl-dot span { width: 9px !important; height: 9px !important; margin: 0 4px !important; }

  /* ---- Noticias: página de detalle ---- */
  .noticia-detalle-title { font-size: 22px !important; line-height: 1.25 !important; }
  .noticia-detalle-content p { font-size: 15px !important; line-height: 1.65 !important; }
  .otras-noticias-section { padding: 26px 0 40px !important; }
  .otras-noticias-title { font-size: 21px !important; margin-bottom: 18px !important; }
  .otras-noticias-carousel-wrap { padding: 0 !important; }
  .otras-noticias-carousel.owl-carousel { padding: 0 18px 42px !important; }
  .otras-noticias-carousel .owl-item { padding: 0 !important; }
  .otras-noticias-carousel .noticia-card, .otras-noticias-carousel .noticia-card-img { height: 250px !important; }
  .otras-noticias-carousel .noticia-card-body h5 { font-size: 16px !important; }

  /* ---- Noticias: listado ---- */
  .noticia-grid-card .noticia-card-img { height: 250px !important; }

  /* ---- Capacitaciones y servicios: tarjetas y detalle ---- */
  .servicios-split-panel h3, .servicios-split-panel h4, .servicios-split-panel h5 { font-size: 18px !important; line-height: 1.3 !important; }
  .servicios-split-panel p { font-size: 14px !important; line-height: 1.55 !important; }
  .servicios-grid-card h3, .servicios-grid-card h4, .servicios-grid-card h5 { font-size: 17px !important; line-height: 1.3 !important; }
  .servicios-grid-card p { font-size: 14px !important; line-height: 1.55 !important; }
  .servicio-detalle-content p, .servicio-detalle-content li, .servicios-checklist li { font-size: 14.5px !important; line-height: 1.6 !important; }
  .servicio-detalle-content h2, .servicio-detalle-content h3 { font-size: 22px !important; }
  .capacitacion-meta-row .meta-chip, .capacitacion-meta-row span { font-size: 13px !important; }
  .capacitacion-subtitle { font-size: 15px !important; }

  /* ---- Equipo ---- */
  .equipo-card-info h4, .equipo-card-info h5, .equipo-card-info strong { font-size: 15.5px !important; line-height: 1.3 !important; }
  .equipo-card-info p, .equipo-card-info span { font-size: 13px !important; line-height: 1.4 !important; }

  /* ---- Videos ---- */
  .videos-dark-card { padding: 26px 18px !important; border-radius: 22px !important; }
  .video-principal + .video-lista-meta + h4, .cerecoop-videos h4 { font-size: 17px !important; line-height: 1.3 !important; }
  .cerecoop-videos h5 { font-size: 14.5px !important; line-height: 1.3 !important; }
  .video-lista-meta { font-size: 12px !important; line-height: 1.4 !important; }

  /* ---- Memoria y balance ---- */
  .memoria-cover-link { display: block !important; text-align: center !important; }
  .memoria-cover-link img { max-width: 74% !important; height: auto !important; margin: 0 auto !important; display: inline-block !important; }

  /* ---- Contacto ---- */
  .cerecoop-contacto > .container { padding-top: 18px !important; padding-bottom: 36px !important; }
  .cerecoop-contacto h2 { font-size: 26px !important; line-height: 1.2 !important; }
  .contacto-info-item { gap: 14px !important; margin-bottom: 14px !important; }
  .contacto-info-item .icon { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; font-size: 16px !important; }
  .contacto-info-item .label { font-size: 12px !important; line-height: 1.3 !important; }
  .contacto-info-item .value { font-size: 15px !important; line-height: 1.4 !important; }
  .cerecoop-contacto form input, .cerecoop-contacto form textarea, .cerecoop-contacto form select {
    font-size: 16px !important; /* 16px evita que el iPhone haga zoom al tocar el campo */
    line-height: 1.4 !important; padding: 13px 15px !important; border-radius: 12px !important;
  }
  .cerecoop-contacto form .btn { width: 100%; }
  .map-wrap iframe { height: 260px !important; }

  /* ---- Tarjetas de servicios / capacitaciones: foto arriba, texto abajo (en vez de lado a lado) ---- */
  .servicios-split-card, .capacitacion-split-card { flex-direction: column !important; min-height: 0 !important; }
  .servicios-split-card .servicios-split-img { order: -1; flex: 0 0 auto !important; height: 190px; width: 100%; }
  .capacitacion-split-card .servicios-split-img { height: 125px; }
  .servicios-split-card .servicios-split-panel { flex: 1 1 auto !important; padding: 22px 20px 24px !important; }
  .servicios-split-card .servicios-split-arrow {
    top: 190px !important; left: auto !important; right: 18px !important; transform: translateY(-50%) !important;
    width: 44px !important; height: 44px !important; font-size: 15px !important;
  }
  .capacitacion-split-card .servicios-split-arrow { top: 125px !important; }
  .servicios-split-card:hover .servicios-split-arrow { transform: translateY(-50%) rotate(-45deg) !important; }
  .servicios-split-panel h3 { font-size: 18px !important; }
  .servicios-split-icon { margin-bottom: 10px !important; }
  i.servicios-split-icon { font-size: 26px !important; }
  img.servicios-split-icon { width: 38px !important; height: 38px !important; }
  .capacitacion-split-card .servicios-split-panel h3 { font-size: 16.5px !important; }
  .capacitacion-split-card .servicios-split-panel p { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* ---- Flechas: el ícono interno en verde (antes era blanco sobre blanco) ---- */
  .cerecoop-noticias .owl-nav button i,
  .otras-noticias-carousel .owl-nav button i,
  .noticia-detalle-carousel .owl-nav button i { color: #006633 !important; font-size: 14px !important; line-height: 1 !important; }
  .cerecoop-noticias .owl-nav button, .otras-noticias-carousel .owl-nav button, .noticia-detalle-carousel .owl-nav button { padding: 0 !important; display: flex !important; align-items: center; justify-content: center; }

  /* ---- Puntitos del carrusel: bien visibles sobre fondo claro ---- */
  .cerecoop-noticias .owl-dots .owl-dot span,
  .otras-noticias-carousel .owl-dots .owl-dot span { background: rgba(20,37,27,.22) !important; }
  .cerecoop-noticias .owl-dots .owl-dot.active span,
  .otras-noticias-carousel .owl-dots .owl-dot.active span { background: #006633 !important; width: 22px !important; border-radius: 6px !important; }
  .noticia-detalle-carousel .owl-dots .owl-dot span { background: rgba(255,255,255,.55) !important; }
  .noticia-detalle-carousel .owl-dots .owl-dot.active span { background: #fff !important; }

  /* ---- Sin la "franja gris": la sombra de la tarjeta se cortaba con el borde del carrusel ---- */
  .cerecoop-noticias .noticia-card, .otras-noticias-carousel .noticia-card { box-shadow: none !important; }

  /* ---- Pie de página ---- */
  .cerecoop-footer { font-size: 14px !important; }
  .cerecoop-footer h5 { font-size: 17px !important; margin-bottom: 10px !important; }
  .cerecoop-footer li, .cerecoop-footer p, .cerecoop-footer a { font-size: 14px !important; line-height: 1.6 !important; }
  .cerecoop-footer li { margin-bottom: 3px; }
  .footer-bottom, .footer-bottom p, .footer-bottom a { font-size: 12.5px !important; line-height: 1.5 !important; }

  /* ---- Botón "subir": más chico, discreto y sin tapar el texto ---- */
  .cerecoop-back-to-top, .scrollToTop {
    width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 14px !important;
    right: 12px !important; bottom: 14px !important; border-radius: 12px !important; opacity: .9;
  }
}

/* Celulares muy chicos (hasta 360 px) */
@media (max-width: 360px) {
  .servicios-title, .coop-title, .testimonios-title, .noticias-title, .videos-title, .memoria-title { font-size: 22px !important; }
  .dato-numero { font-size: 28px !important; }
  .noticia-card-img { height: 310px !important; }
  .noticia-card-body h5 { font-size: 16px !important; }
}