/* ============================================================
   FLECHAS MODERNAS < > – VERSIÓN QUE FUNCIONA SIEMPRE
   ============================================================ */

/* Contenedor de las flechas */
.modern-slider .flex-direction-nav a {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  line-height: 48px !important;
  text-align: center !important;

  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;

  font-size: 32px !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;

  opacity: 1 !important;

  /* MUY IMPORTANTE – Flexslider esconde el texto */
  text-indent: 0 !important;
  overflow: visible !important;

  /* Quita sprites viejos */
  background-image: none !important;
}

/* Flecha izquierda */
.modern-slider .flex-direction-nav .flex-prev {
  left: 120px !important;
}
.modern-slider .flex-direction-nav .flex-prev:before {
  content: "<" !important;
  display: block !important;
}

/* Flecha derecha */
.modern-slider .flex-direction-nav .flex-next {
  right: 120px !important;
}
.modern-slider .flex-direction-nav .flex-next:before {
  content: ">" !important;
  display: block !important;
}

/* Hover */
.modern-slider .flex-direction-nav a:hover {
  background: rgba(0,0,0,0.80) !important;
}

/* Elimina iconos heredados del theme */
.modern-slider .flex-direction-nav a:after {
  content: none !important;
  display: none !important;
}


/* ====== Presentación modernizada (rojo corporativo) ====== */

.presentation-modern {
  text-align: center;
  padding: 50px 10px 40px;
}

.presentation-modern h2 {
  font-family: 'Lobster', cursive;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.25;
  color: #5d5d5d;
}

.presentation-modern .subtitle {
  font-size: 18px;
  color: #555;
  margin: 0 auto 22px;
  max-width: 760px;
  line-height: 1.6;
}

.presentation-modern .btn-modern {
  display: inline-block;
  padding: 12px 28px;
  background: #ab0909;
  color: #fff !important;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.presentation-modern .btn-modern:hover {
  background: #8f0707;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .presentation-modern h2 { font-size: 26px; }
  .presentation-modern .subtitle {
    font-size: 16px;
    padding: 0 10px;
  }
}


/* ============================================================
   LIBROS - CARDS MODERNAS 
   ============================================================ */

.what-we-do { margin-top: 55px; }

.what-we-do .service {
  background: #fff;
  border: 1px solid #eee;
  border-bottom: 4px solid #ab0909;
  border-radius: 14px;
  padding: 18px 16px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: all .30s ease;
  min-height: 360px;
  position: relative;
  overflow: hidden;
}

.what-we-do .service:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  border-bottom-color: #8f0707;
}

.what-we-do .service .icon-awesome {
  margin-top: 5px;
  margin-bottom: 12px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.what-we-do .service .icon-awesome img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  transition: transform .35s ease;
}

.what-we-do .service:hover .icon-awesome img {
  transform: scale(1.05);
}

.what-we-do .service h4 {
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 8px 0 8px;
  min-height: 38px;
}

.what-we-do .service p {
  font-size: 14px;
  color: #666;
  line-height: 1.55;
  margin-bottom: 52px;
  min-height: 80px;
}

.what-we-do .service a {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: inline-block;
  padding: 10px 14px;
  background: #ab0909;
  color: #fff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.what-we-do .service a:hover {
  background: #8f0707;
  transform: translateY(-2px);
}

.what-we-do .service:before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: rgba(171,9,9,0.08);
  border-radius: 50%;
}

@media (max-width: 768px) {
  .what-we-do .service { min-height: auto; margin-bottom: 18px; }
  .what-we-do .service p { margin-bottom: 60px; min-height: auto; }
}


/* ============================================================
   FIX GRID: 4 CARDS POR FILA
   ============================================================ */

.what-we-do .service {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 980px) {
  .what-we-do .service { padding: 16px 14px 18px; }
}

/* ============================================================
   LIBROS POR NIVEL - ENCABEZADOS (ESTILO MATCH PROVIDERS)
   ============================================================ */

.books-section-header {
  text-align: center;
  margin: 55px auto 40px;
  max-width: 820px;
}

/* Pill superior */
.books-section-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  background: rgba(171, 9, 9, 0.08);
  color: #ab0909;
  margin-bottom: 10px;
}

/* Título igual al estilo “Editoriales con las que trabajamos” */
.books-section-title {
  font-family: 'Lobster', cursive;
  font-size: 28px;
  color: #5d5d5d;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Resalta la palabra “por nivel” */
.books-section-title .violet {
  color: #ab0909;
}

/* Subtítulo con mismo estilo que providers-subtitle */
.books-section-subtitle {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
  color: #777;
  max-width: 680px;
  margin: 0 auto 15px;
  line-height: 1.6;
}

/* Botón */
.books-section-btn {
  margin-top: 6px;
  padding-left: 28px;
  padding-right: 28px;
}




/* ============================================================
   LIBROS POR NIVEL - BLOQUES Y DESCRIPCIONES
   ============================================================ */

/* Bloque por nivel */
.books-level-block {
  margin-bottom: 42px;
}

/* Contenedor del texto del nivel centrado y con ancho fijo */
.books-level-header {
  margin-bottom: 14px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* Título del nivel (Inicial, Primaria, Secundaria, etc.) */
.books-level-title {
  font-size: 17px;
  font-weight: 700;
  margin: 6px 0 4px;
  color: #333;
}

/* Textos descriptivos de cada nivel */
.books-level-text {
  font-size: 14px;
  color: #666;
  max-width: 780px;
  text-align: justify;
  line-height: 1.6;
  margin: 4px 0 0;
}


/* Pills de nivel (más grandes) */
.books-level-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.books-level-pill-inicial {
  background: rgba(255, 193, 7, 0.16);
  color: #b87900;
}

.books-level-pill-primaria {
  background: rgba(33, 150, 243, 0.16);
  color: #0b61a5;
}

.books-level-pill-secundaria {
  background: rgba(76, 175, 80, 0.16);
  color: #256629;
}

.books-level-pill-adultos {
  background: rgba(156, 39, 176, 0.16);
  color: #6f1b7b;
}

@media (max-width: 768px) {
  .books-level-text {
    max-width: 100%;
  }
}



/* ============================================================
   PROVEEDORES / EDITORIALES (cards modernas)
   ============================================================ */

.providers-section { margin-top: 55px; }

.providers-title h3 {
  font-family: 'Lobster', cursive;
  font-size: 28px;
  color: #5d5d5d;
  margin-bottom: 6px;
}

.providers-subtitle {
  font-size: 16px;
  font-style: italic;
  color: #777;
  margin: 0 0 18px 0;
}

.providers-row { margin-top: 25px; }

.provider-card {
  background: #fff;
  border: 1px solid #eee;
  border-bottom: 3px solid #ab0909;
  border-radius: 12px;
  padding: 18px 14px 16px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: all .25s ease;
  min-height: 250px;
  position: relative;
}

.provider-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

.provider-logo {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.provider-logo img {
  max-height: 110px;
  max-width: 100%;
  width: auto;
  opacity: 0.92;
  filter: grayscale(25%);
  transition: all .25s ease;
}

.provider-card:hover .provider-logo img {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.03);
}

.provider-card h4 {
  margin-top: 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: #5d5d5d;
  min-height: 34px;
}

.provider-actions { margin-top: 10px; }

.provider-actions a {
  display: inline-block;
  padding: 6px 10px;
  background: #ab0909;
  color: #fff;
  border-radius: 999px;
  margin: 0 4px;
  transition: all .2s ease;
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.25);
}

.provider-actions a:hover {
  background: #5d5d5d;
  transform: translateY(-2px);
}

.providers-row-center {
  display: flex;
  justify-content: center;
}

/* 4 cards por fila (override bootstrap 2) */
.portfolio .row { text-align: center; }

.portfolio .work {
  float: none !important;
  display: inline-block;
  vertical-align: top;
  width: 23%;
  margin: 1% 0.8%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.portfolio .work img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

@media (max-width: 979px) {
  .portfolio .work {
    width: 46%;
    margin: 2% 1.5%;
  }
}

@media (max-width: 767px) {
  .portfolio .work {
    width: 92%;
    margin: 3% auto;
  }
}


/* ============================================================
   FOOTER CORPORATIVO (simple, limpio, moderno)
   ============================================================ */

.footer-clean {
  margin-top: 60px;
  background: #f8f8f8 url(../img/pattern.jpg) repeat;
  padding: 35px 0 15px;
  border-top: 4px solid #ab0909;
}

.footer-clean .footer-col {
  padding: 10px 15px;
}

.footer-clean h4 {
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #5d5d5d;
  margin-bottom: 12px;
  border-left: 4px solid #ab0909;
  padding-left: 10px;
}

.footer-clean p {
  font-size: 13px;
  color: #777;
  line-height: 20px;
}

.footer-clean .footer-link {
  color: #ab0909 !important;
  font-style: italic;
}
.footer-clean .footer-link:hover { text-decoration: underline; }

.footer-clean .footer-links,
.footer-clean .footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-clean .footer-links li,
.footer-clean .footer-contact li {
  margin-bottom: 8px;
  font-size: 13px;
}

.footer-clean .footer-links a {
  color: #ab0909;
}
.footer-clean .footer-links a:hover {
  color: #F00;
  padding-left: 4px;
}

.footer-clean .footer-contact i {
  color: #ab0909;
  margin-right: 6px;
}

.footer-clean .footer-border {
  border-top: 1px dashed #ddd;
  margin: 15px 0;
}

.footer-clean .copy {
  margin: 0;
  font-size: 12px;
  color: #777;
}

.footer-clean .social { text-align: right; }

.footer-clean .social a {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  border-radius: 50%;
  background-color: #ab0909;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .9;
  transition: all .2s ease;
}

.footer-clean .social a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-clean .social .facebook { background-image: url(../img/social-icons/facebook.png); }
.footer-clean .social .instagram { background-image: url(../img/social-icons/instagram.png); }
.footer-clean .social .youtube { background-image: url(../img/social-icons/youtube.png); }
.footer-clean .social .email { background-image: url(../img/social-icons/email.png); }

@media (max-width: 767px) {
  .footer-clean .social {
    margin-top: 15px;
    text-align: center;
  }
  .footer-clean .copy {
    text-align: center;
    margin-bottom: 10px;
  }
}

/* Centrar columnas del footer */
.footer-clean .row { text-align: center !important; }

.footer-clean .footer-col {
  float: none !important;
  display: inline-block !important;
  vertical-align: top;
  text-align: center !important;
  width: 28%;
  margin: 0 1%;
}

.footer-clean h4 {
  text-align: center !important;
  border-left: none !important;
  border-bottom: 2px solid #ab0909;
  padding-bottom: 6px;
  display: inline-block;
}

.footer-clean .footer-links li,
.footer-clean .footer-contact li,
.footer-clean p,
.footer-clean .social {
  text-align: center !important;
}

@media (max-width: 979px) {
  .footer-clean .footer-col { width: 90%; margin-bottom: 18px; }
}


/* ============================================================
   REVEAL ON SCROLL (animación de entrada suave)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-zoom { transform: scale(0.96); }

.reveal-left.reveal-visible,
.reveal-right.reveal-visible,
.reveal-zoom.reveal-visible {
  transform: none;
}

.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }


/* ============================================================
   HEADER MODERNO 
   ============================================================ */

.navbar-modern { margin-bottom: 0; }

.navbar-inner-modern {
  background: rgba(255,255,255,0.98);
  border: 0;
  border-bottom: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 10px 0;
}

.brand-wrap {
  float: left;
  margin: 0;
  line-height: 0;
}

/* ===========================================
   PARA EL LOGO MODERNO
   =========================================== */
/* Logo header moderno – fuerza este por encima de lo demás */
.header .navbar-modern .brand-modern {
    display: inline-block;
    text-indent: -9999px;          /* oculta el texto "Olmara - Education..." */
    width: 240px;                  /* ajusta el ancho si lo ves muy grande/pequeño */
    height: 70px;                  /* alto del área del logo */
    padding: 10 px 0;               /* espacio vertical dentro del header */
    background: url("https://i.ibb.co/849gzGPx/Logo-Olmara-sin-fondo-LOGO-2025.png")
                20px center no-repeat;
    background-size: contain;      /* para que no se deforme el PNG */
}

.nav-modern {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.nav-modern > li > a {
  padding: 14px 16px 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #444;
  text-transform: uppercase;
  border-radius: 10px;
  transition: all .25s ease;
}

.nav-modern > li > a:hover {
  background: rgba(171, 9, 9, 0.10);
  color: #ab0909;
}

.nav-modern > li.current-page > a {
  background: rgba(171, 9, 9, 0.12);
  color: #ab0909;
  border-top: 0;
  box-shadow: inset 0 -2px 0 #ab0909;
}

.nav-modern > li > a i {
  color: #999;
  transition: color .25s ease;
}
.nav-modern > li > a:hover i,
.nav-modern > li.current-page > a i {
  color: #ab0909;
}

/* Dropdown 2do nivel */
.nav-modern li ul.vinas {
  margin-top: 10px;
  padding: 6px 0;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  min-width: 210px;
}

/* Items dropdown */
.nav-modern li ul.vinas li a {
  font-size: 12px;
  padding: 10px 14px;
  margin: 0;
  border-top: 0;
  color: #444;
  transition: all .2s ease;
}

.nav-modern li ul.vinas li a:hover {
  background: #ab0909;
  color: #fff;
}

/* Responsive navbar */
@media (max-width: 979px) {
  .brand-modern {
    margin-left: 0;
    width: 180px;
    height: 60px;
  }

  .nav-modern {
    display: block;
    margin-top: 10px;
  }

  .nav-modern > li > a {
    border-radius: 0;
    padding: 12px 15px;
  }
}


/* ============================================================
   FIX DROPDOWNS – NO SE CIERRAN AL MOVER EL MOUSE
   ============================================================ */

.nav-modern > li { position: relative; }

.nav-modern li ul.vinas {
  top: 100%;
  left: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 9999;
}

.nav-modern li:hover > ul.vinas,
.nav-modern li ul.vinas:hover {
  display: block;
}

.nav-modern li ul.vinas li a {
  margin: 0 !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}


/* ============================================================
   MENÚ DE TERCER NIVEL – SUBMENÚ LATERAL
   ============================================================ */

.nav-modern li ul.vinas li { position: relative; }

.nav-modern li ul.vinas li ul.vinas {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0;
  margin-top: 0;
  padding-top: 0;
  display: none;
  z-index: 99999;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 210px;
}

.nav-modern li ul.vinas li:hover > ul.vinas {
  display: block;
}

.nav-modern li ul.vinas li ul.vinas li a {
  white-space: nowrap;
  padding: 10px 14px !important;
  color: #444;
  margin: 0 !important;
}

.nav-modern li ul.vinas li ul.vinas li a:hover {
  background: #f0f0f0;
  color: #a30000; 
}


/* ============================================================
   FIX FINAL – 3er NIVEL NO SE SALE DE PANTALLA
   ============================================================ */

/* 1) Si el submenu está pegado a la derecha, lo volteamos hacia la izquierda
   (esto aplica bien para los últimos ítems del navbar). */
.nav-modern > li:last-child ul.vinas li ul.vinas,
.nav-modern > li:nth-last-child(2) ul.vinas li ul.vinas {
  left: auto !important;
  right: 100% !important;   /* abre hacia la izquierda */
}

/* 2) En pantallas medianas/pequeñas, el 3er nivel se apila hacia abajo
   dentro del mismo dropdown, evitando scroll horizontal. */
@media (max-width: 1200px) {
  .nav-modern li ul.vinas li ul.vinas {
    left: auto !important;
    right: 100% !important;
  }
}

@media (max-width: 979px) {
  .nav-modern li ul.vinas,
  .nav-modern li ul.vinas li ul.vinas {
    position: static !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .nav-modern li ul.vinas li ul.vinas {
    display: none; /* se muestra solo al hover */
  }

  .nav-modern li ul.vinas li:hover > ul.vinas {
    display: block;
  }

  .nav-modern li ul.vinas li a {
    white-space: normal !important; /* permite saltos y no rompe pantalla */
  }
}

/* 3) Por si algún tercer nivel aún queda largo: limita ancho y permite wrap */
.nav-modern li ul.vinas li ul.vinas {
  max-width: 260px;
}
.nav-modern li ul.vinas li ul.vinas li a {
  white-space: normal !important;
  line-height: 1.3;
}

/* ============================================================
   ABOUT / NOSOTROS – ESTILO MODERNO
   ============================================================ */

/* Page title moderno */
.page-title-modern {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 35px 0 25px;
  margin-top: 10px;
}

.page-title-modern .page-title-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title-modern .page-title-badge {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(171, 9, 9, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.page-title-modern .page-title-icon {
  font-size: 28px;
  color: #ab0909;
  margin: 0;
}

.page-title-modern h2 {
  font-family: 'Lobster', cursive;
  font-size: 30px;
  color: #5d5d5d;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.page-title-modern p {
  font-size: 15px;
  color: #777;
  margin: 0;
}

.page-title-modern .page-title-line {
  width: 70px;
  height: 3px;
  background: #ab0909;
  border-radius: 99px;
  margin-top: 8px;
}

/* About intro */
.about-modern {
  margin-top: 35px;
}

.about-intro {
  text-align: center;
  padding: 10px 20px;
}

.about-headline {
  font-family: 'Lobster', cursive;
  font-size: 28px;
  color: #5d5d5d;
  margin-bottom: 10px;
  line-height: 1.2;
}

.about-lead {
  font-size: 16px;
  color: #666;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Cards */
.about-cards {
  margin-top: 15px;
}

.about-card {
  background: #fff;
  border: 1px solid #eee;
  border-bottom: 4px solid #ab0909;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  gap: 14px;
  min-height: 190px;
  transition: all .25s ease;
}

.about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  border-bottom-color: #8f0707;
}

.about-card-icon {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: rgba(171, 9, 9, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.about-card-icon i {
  font-size: 26px;
  color: #ab0909;
}

.about-card-body h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
  margin: 2px 0 6px;
}

.about-card-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.55;
  margin: 0;
}

/* Lista objetivos */
.about-list {
  margin: 6px 0 0 0;
  padding-left: 16px;
  font-size: 14px;
  color: #666;
  line-height: 1.55;
}

.about-list li {
  margin-bottom: 6px;
}

/* Responsive */
@media (max-width: 767px) {
  .page-title-modern .page-title-inner {
    flex-direction: column;
    text-align: center;
  }

  .about-card {
    flex-direction: column;
    min-height: auto;
  }

  .about-card-icon {
    margin: 0 auto;
  }
}
/* ============================================================
   ABOUT – FIX ANCHO COMPLETO + CONTENIDO CENTRADO
   (pegar al FINAL del CSS)
   ============================================================ */

/* Asegura que la card ocupe todo el ancho de su columna */
.about-cards .about-card{
  width: 100% !important;
  box-sizing: border-box;
}

/* Centrar contenido dentro de las cards */
.about-cards .about-card{
  flex-direction: column;          /* icono arriba, texto abajo */
  align-items: center;            /* centra horizontalmente */
  text-align: center;             /* centra texto */
  gap: 10px;
}

/* Icono centrado */
.about-card-icon{
  margin: 0 auto;
}

/* Texto centrado y a todo el ancho */
.about-card-body{
  width: 100%;
  text-align: center;
}

.about-card-body h4{
  text-align: center;
}

.about-card-body p,
.about-card-body ul,
.about-list li{
  text-align: center;
  list-style-position: inside;    /* bullets centrados */
  padding-left: 0;
}

/* ============================================================
   CATÁLOGOS – HERO + FILTRO + GRID
   ============================================================ */

.catalog-hero {
  text-align: center;
}

.catalog-hero h2 {
  font-family: 'Lobster', cursive;
  font-size: 30px;
  margin-bottom: 5px;
  color: #5d5d5d;
}

.catalog-hero p {
  font-size: 15px;
  color: #666;
}

/* Filtro de editoriales */
.catalog-filter-container {
  margin-top: 20px;
  margin-bottom: 10px;
}

.catalog-filter {
  text-align: center;
}

.catalog-filter .filter-btn {
  display: inline-block;
  margin: 4px 3px;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all .2s ease;
}

.catalog-filter .filter-btn:hover {
  border-color: #ab0909;
  color: #ab0909;
}

.catalog-filter .filter-btn.active {
  background: #ab0909;
  border-color: #ab0909;
  color: #fff;
}

/* Grid de cards */
.catalog-grid {
  margin-top: 20px;
  margin-bottom: 40px;
}

.catalog-card {
  margin-bottom: 20px;
}

.catalog-card-inner {
  background: #fff;
  border: 1px solid #eee;
  border-bottom: 3px solid #ab0909;
  border-radius: 14px;
  padding: 18px 16px 20px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: all .25s ease;
  height: 100%;
}

.catalog-card-inner:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

/* Logo */
.catalog-logo {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.catalog-logo img {
  max-height: 100px;
  max-width: 100%;
  opacity: .95;
  transition: all .25s ease;
}

.catalog-card-inner:hover .catalog-logo img {
  opacity: 1;
  transform: scale(1.03);
}

/* Título + textos */
.catalog-card-inner h3 {
  font-size: 15px;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 8px;
}

.catalog-card-inner p {
  font-size: 13px;
  color: #666;
  min-height: 40px;
}

/* Botón principal */
.catalog-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #ab0909;
  color: #fff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: all .25s ease;
}

.catalog-btn:hover {
  background: #8f0707;
  transform: translateY(-2px);
}

/* Links secundarios dentro de la card */
.catalog-link {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: #ab0909;
  text-decoration: none;
}

.catalog-link:hover {
  text-decoration: underline;
}

/* Responsive: en móvil, cards una debajo de otra */
@media (max-width: 767px) {
  .catalog-card-inner {
    margin-bottom: 10px;
  }
}

/* ============================================================
   DETALLE DE CATÁLOGOS POR EDITORIAL
   ============================================================ */

.catalog-details-container {
  margin-top: 30px;
  margin-bottom: 40px;
}

.catalog-details-title {
  font-family: 'Lobster', cursive;
  font-size: 26px;
  color: #5d5d5d;
  text-align: center;
  margin-bottom: 6px;
}

.catalog-details-subtitle {
  text-align: center;
  font-size: 15px;
  color: #777;
  margin-bottom: 22px;
}

/* Ocultar por defecto todos los paneles de detalle */
.catalog-details-panel {
  display: none;
}

/* Fila de “libros” */
.catalog-books-row .catalog-book {
  margin-bottom: 20px;
}

/* Card / libro */
.catalog-book-inner {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eee;
  border-bottom: 4px solid #ab0909;
  padding: 14px 14px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  text-align: center;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}

/* Efecto hover */
.catalog-book-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

/* “Portada” del libro */
.catalog-book-cover {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ab0909, #f26b6b);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Badge con el nivel (Inicial, Primaria, etc.) */
.catalog-book-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  background: rgba(255,255,255,0.9);
  color: #ab0909;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Ícono dentro de la portada */
.catalog-book-cover i {
  font-size: 42px;
  color: #fff;
}

/* Título del libro */
.catalog-book-inner h4 {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 6px 0 4px;
}

/* Descripción corta */
.catalog-book-inner p {
  font-size: 13px;
  color: #666;
  min-height: 40px;
  margin-bottom: 10px;
}

/* Botón principal */
.catalog-book-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #ab0909;
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: all .2s ease;
}

.catalog-book-btn:hover {
  background: #8f0707;
  transform: translateY(-2px);
}

/* Responsive: en pantallas pequeñas, que respiren un poco más */
@media (max-width: 767px) {
  .catalog-book-inner {
    margin-bottom: 10px;
  }
}
/* ===============================
   Imagen dentro del cuadro del catálogo
   =============================== */

.catalog-book-cover {
  position: relative;
  width: 100%;
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-book-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* AHORA SE VE COMPLETA */
  border-radius: 12px;
  background: #fff;      /* fondo neutro detrás si la imagen no ocupa todo */
  padding: 6px;          /* opcional: marco interno elegante */
}


/* Asegurar que el badge se vea encima */
.catalog-book-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ab0909;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  z-index: 10;
}

/* ============================================================
   SECCIÓN YAPE – CONTENEDOR
   ============================================================ */

.yape-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* ============================================================
   CARD HORIZONTAL
   ============================================================ */

.yape-card-horizontal {
  display: flex;
  align-items: flex-start;   /* no la aplastes verticalmente */
  gap: 30px;
  padding: 30px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  margin-bottom: 40px;
  border-left: 6px solid #b71c1c;
}

/* COLUMNA IMAGEN (PEQUEÑA, SIN ESPACIOS RAROS) */
.yape-card-img {
  flex: 1.0;     /* Antes era 1 o 1.2 → ahora tiene MÁS espacio */
}

.yape-card-img img {
  width: 800px;              /* Ocupa todo el espacio disponible */
  max-width: 850px;         /* ANCHO GRANDE DE LA IMAGEN */
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  animation: yapeFloat 4s ease-in-out infinite;
}

/* COLUMNA TEXTO + QR (MÁS ANCHA) */
.yape-card-content {
  flex: 1 1 65%;       /* ocupa el resto (~65%) */
  max-width: 65%;
}

/* TEXTOS – SIN FLEX AQUÍ */
.yape-card-content h3 {
  font-size: 20px;
  color: #b71c1c;
  margin-bottom: 10px;
}

.yape-card-content h4 {
  font-size: 15px;
  margin-top: 20px;
  color: #333;
}

.yape-card-content p {
  font-size: 14px;
  line-height: 1.6;
}

/* QR – SUPER NÍTIDO Y CENTRADO */
.yape-qr-box {
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 14px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  text-align: center;
}

.yape-qr-img {
  width: 100px;        /* puedes subir a 320 si quieres más grande */
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  animation: yapeFloat 3.5s ease-in-out infinite;
}

.yape-qr-note {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

/* BOTÓN PRINCIPAL (WhatsApp) */
.yape-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background: #b71c1c;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.yape-btn:hover {
  background: #8c1313;
  transform: translateY(-2px);
}

/* ANIMACIÓN FLOTANTE */
@keyframes yapeFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* RESPONSIVE: EN MÓVIL, TODO EN COLUMNA Y ANCHO COMPLETO */
@media (max-width: 900px) {
  .yape-card-horizontal {
    flex-direction: column;
    text-align: center;
  }

  .yape-card-img,
  .yape-card-content {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* ============================================================
   CARD HORIZONTAL BCP
   ============================================================ */

.bcp-card-horizontal {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 30px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  margin-bottom: 40px;
  border-left: 6px solid #b71c1c;  /* rojo corporativo */
}

/* Columna imagen – permite que la imagen se salga del card */
.bcp-card-img {
  flex: 1.4;
  overflow: visible;        /* IMPORTANTE: deja salir la imagen */
  border-radius: 18px;
  position: relative;
  z-index: 1;
}

/* Imagen BCP – sin animación, lista para crecer en hover */
.bcp-card-img img {
  width: 100%;             /* se adapta al ancho de la columna */
  max-width: 900px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-origin: center center;
}

/* Al pasar el mouse: crecer fuerte, aunque se salga del card */
.bcp-card-img:hover img {
  transform: scale(1.8) translateX(120px);  /* zoom + mover a la derecha */
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  cursor: zoom-in;
}



/* Columna texto */
.bcp-card-content {
  flex: 1.1;
  max-width: 420px;
}

/* Pill superior */
.bcp-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  background: rgba(171,9,9,0.09);
  color: #ab0909;
  margin-bottom: 8px;
}

/* Títulos y texto */
.bcp-card-content h3 {
  font-size: 24px;
  color: #b71c1c;
  margin-bottom: 8px;
}

.bcp-card-content h4 {
  font-size: 18px;
  margin-top: 16px;
  margin-bottom: 8px;
  color: #333;
}

.bcp-card-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

/* Lista de pasos */
.bcp-steps {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
}

.bcp-steps li {
  margin-bottom: 6px;
  font-size: 14px;
  color: #555;
}

/* Nota informativa */
.bcp-note {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f9f2f2;
  border-left: 3px solid #ab0909;
  font-size: 13px;
  color: #555;
}

.bcp-note i {
  margin-right: 8px;
  margin-top: 2px;
  color: #ab0909;
}

/* Botón WhatsApp */
.bcp-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 22px;
  background: #b71c1c;
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: all .25s ease;
}

.bcp-btn:hover {
  background: #8c1313;
  transform: translateY(-2px);
}

/* ============================================================
   ANIMACIÓN FLOTANTE BCP
   ============================================================ */

@keyframes bcpFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .bcp-card-horizontal {
    flex-direction: column;
    text-align: center;
  }

  .bcp-card-content {
    max-width: 100%;
  }

  .bcp-card-img img {
    width: 100%;
    max-width: 480px;
  }
}

/* ============================================================
   PUNTOS DE VENTA – TODAS LAS SEDES
   ============================================================ */

.puntos-venta-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Grid de cards: dos por fila en desktop */
.pv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Cada card ocupa ~50% en pantallas grandes */
.pv-grid .pv-card {
  flex: 1 1 48%;
  max-width: 48%;
}

/* Card principal */
.pv-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #eee;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  padding: 20px 20px 18px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; /* añade esta línea */
}

/* Detalle decorativo en esquina */
.pv-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 150px;
  height: 150px;
  background: rgba(171,9,9,0.08);
  border-radius: 50%;
}

/* Cabecera */
.pv-header {
  position: relative;
  z-index: 1;
  text-align: left;
  margin-bottom: 18px;
}

.pv-header h3 {
  font-size: 24px;
  color: #5d5d5d;
  margin: 4px 0 6px;
}

.pv-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Pill superior */
.pv-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  background: rgba(171,9,9,0.09);
  color: #ab0909;
}

/* ============================================================
   CUERPO: TODO VERTICAL (INFO → MAPA → BOTÓN)
   ============================================================ */

.pv-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;   /* IMPORTANTE: apilar info y mapa verticalmente */
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.pv-col {
  flex: 1;
}

/* Columna principal de información */
.pv-col-info-main {
  display: block; /* ya no necesitamos centrar verticalmente, solo bloque normal */
}

/* Columna del mapa (ahora ocupa todo el ancho) */
.pv-col-map {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ============================================================
   INFO MÁS VISUAL (DIRECCIÓN / TELÉFONOS / HORARIO / CONTACTO)
   ============================================================ */

.pv-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.pv-info-item {
  flex: 1 1 48%;
  display: flex;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 12px;
  background: #faf6f6;
  border: 1px solid #f0e2e2;
}

/* Icono de cada bloque de info */
.pv-info-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(171, 9, 9, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-top: 2px;
}

.pv-info-icon i {
  font-size: 14px;
  color: #ab0909;
}

.pv-info-text {
  flex: 1;
}

.pv-label {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ab0909;
  font-weight: bold;
  margin-bottom: 2px;
}

.pv-value {
  font-size: 13px;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   BOTONES
   ============================================================ */

/* Botón principal (rojo) */
.pv-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  background: #ab0909;
  color: #fff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: all .25s ease;
}

.pv-btn:hover {
  background: #8f0707;
  transform: translateY(-2px);
}

/* Botón secundario estilo outline */
.pv-btn.pv-btn-outline {
  background: #ffffff;
  color: #ab0909 !important;
  border: 1px solid rgba(171, 9, 9, 0.4);
  box-shadow: none;
  margin-top: 6px;
}

.pv-btn.pv-btn-outline:hover {
  background: rgba(171, 9, 9, 0.05);
  transform: translateY(-1px);
}

/* ============================================================
   MAPA EMBEBIDO
   ============================================================ */

.pv-map-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5d5d5d;
}

.pv-map-wrapper {
  margin-bottom: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.pv-map-wrapper iframe {
  width: 100%;
  height: 170px; /* un poco más bajo para que el card no sea tan alto */
  border: 0;
}

/* ============================================================
   NOTA INFERIOR
   ============================================================ */

.pv-footer-note {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f9f2f2;
  border-left: 3px solid #ab0909;
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pv-footer-note i {
  margin-top: 2px;
  color: #ab0909;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 979px) {
  /* Cards a una columna en pantallas medianas / tablets */
  .pv-info-item {
    flex: 1 1 100%;
  }

  .pv-card {
    padding: 20px 18px 18px;
  }
}

@media (max-width: 767px) {
  .puntos-venta-section {
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .pv-header h3 {
    font-size: 20px;
  }

  .pv-map-wrapper iframe {
    height: 200px;
  }
}



/* ============================================================
   GALERÍA – SECCIÓN DE ÁLBUMES
   ============================================================ */

.gallery-albums-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Cabecera de la galería */
.gallery-header {
  text-align: center;
  margin-bottom: 28px;
}

.gallery-header-icon {
  font-size: 32px;
  color: #ab0909;
  margin-bottom: 8px;
  display: inline-block;
}

.gallery-header h2 {
  font-size: 26px;
  margin-bottom: 6px;
  color: #5d5d5d;
}

.gallery-header p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* Fila de álbumes */
.gallery-albums-row .span6 {
  margin-bottom: 24px;
}

/* Tarjeta de álbum */
.album-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}

.album-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

/* Imagen de portada del álbum */
.album-image {
  position: relative;
  padding-top: 58%; /* relación de aspecto aproximada */
  background-size: cover;
  background-position: center;
}

.album-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.15)
  );
}

/* Contenido del álbum */
.album-content {
  padding: 14px 18px 16px;
}

/* Chip superior */
.album-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  background: rgba(171, 9, 9, 0.09);
  color: #ab0909;
  margin-bottom: 6px;
}

/* Título del álbum */
.album-content h3 {
  font-size: 18px;
  color: #5d5d5d;
  margin: 4px 0 6px;
}

/* Descripción */
.album-content p {
  font-size: 13px;
  color: #555;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Meta inferior (icono cámara / corazón) */
.album-meta {
  font-size: 12px;
  color: #777;
  margin-bottom: 8px;
}

.album-meta i {
  margin-right: 5px;
  color: #ab0909;
}

/* Botón del álbum (similar a pv-btn) */
.album-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #ab0909;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: all .25s ease;
}

.album-card:hover .album-btn {
  background: #8f0707;
  transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE – GALERÍA
   ============================================================ */

@media (max-width: 979px) {
  .gallery-albums-section {
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .gallery-header h2 {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .gallery-albums-row .span6 {
    width: 100%;
    float: none;
  }

  .album-card {
    margin-bottom: 10px;
  }
}

/* ============================================================
   PROGRAMA SOCIAL – GALERÍA (psocial.html)
   ============================================================ */

.psocial-gallery {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Cabecera */
.psocial-header {
  text-align: center;
  margin-bottom: 24px;
}

.psocial-header-icon {
  font-size: 30px;
  color: #ab0909;
  margin-bottom: 6px;
  display: inline-block;
}

.psocial-header h2 {
  font-size: 24px;
  color: #5d5d5d;
  margin-bottom: 6px;
}

.psocial-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Resumen de categorías */
.psocial-categories {
  text-align: center;
  margin-bottom: 22px;
}

.ps-cat-label {
  display: inline-block;
  margin-right: 6px;
  font-size: 12px;
  color: #777;
}

.ps-cat-label i {
  margin-right: 4px;
  color: #ab0909;
}

.ps-cat-chip {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 4px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #faf6f6;
  border: 1px solid #f0e2e2;
  color: #555;
}

.ps-cat-2017 {
  border-color: rgba(171, 9, 9, 0.5);
  color: #ab0909;
}

.ps-cat-2016 {
  border-color: rgba(0, 0, 0, 0.15);
}

.ps-cat-cap {
  border-color: rgba(0, 128, 0, 0.35);
  color: #2d7b2d;
}

/* Títulos de sección */
.psocial-section-title-row {
  margin-top: 6px;
  margin-bottom: 6px;
}

.psocial-section-title {
  font-size: 18px;
  color: #5d5d5d;
  border-left: 3px solid #ab0909;
  padding-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ps-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ab0909;
}

/* Grid */
.psocial-grid {
  list-style: none;
  margin: 0 0 10px 0;
}

/* Card de imagen */
.ps-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #eee;
  transition: transform .25s ease, box-shadow .25s ease;
  margin-bottom: 14px;
}

.ps-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* Contenedor de la imagen */
.ps-card-image {
  position: relative;
  cursor: pointer;
}

/* Imagen con transición para zoom */
.ps-card-image img {
  width: 100%;
  display: block;
  transition: transform .25s ease;
}

/* Zoom suave al pasar el cursor */
.ps-card-image:hover img {
  transform: scale(1.05);
}

/* Overlay con icono zoom */
.ps-card-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
              rgba(0,0,0,0.0) 40%,
              rgba(0,0,0,0.45) 100%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  transition: opacity .25s ease;
}

.ps-card-overlay i {
  background: rgba(255,255,255,0.95);
  color: #ab0909;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.ps-card:hover .ps-card-overlay {
  opacity: 1;
}

/* ============================================================
   MODAL DE IMAGEN (ZOOM) – PROGRAMA SOCIAL (VERSIÓN FINAL)
   ============================================================ */

.ps-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;               /* Oculto por defecto */
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 9999;
}

/* Solo cuando tenga .open se muestra */
.ps-modal.open {
  display: flex;
}

.ps-modal-content {
  position: relative;
  max-width: 90vw;             /* 90% del ancho de la pantalla */
  max-height: 90vh;            /* 90% del alto de la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-modal-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;         /* se ve completa, sin recortar */
  border-radius: 8px;
  background: #000;            /* contraste negro detrás */
}

/* Botón de cierre lo dejas tal cual */
.ps-modal-close {
  position: absolute;
  top: -34px;
  right: -4px;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ps-modal-close i {
  color: #ab0909;
  font-size: 14px;
}


/* ============================================================
   GALERÍA DE FOTOS – PORTFOLIO (portfolio.html)
   ============================================================ */

.pf-gallery {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Resumen de categorías */
.pf-categories {
  text-align: center;
  margin-bottom: 22px;
}

.pf-cat-label {
  display: inline-block;
  margin-right: 6px;
  font-size: 12px;
  color: #777;
}

.pf-cat-label i {
  margin-right: 4px;
  color: #ab0909;
}

.pf-cat-chip {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 4px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #faf6f6;
  border: 1px solid #f0e2e2;
  color: #555;
}

.pf-cat-olmara {
  border-color: rgba(171, 9, 9, 0.5);
  color: #ab0909;
}

.pf-cat-cambridge {
  border-color: rgba(0, 0, 0, 0.15);
}

.pf-cat-cap {
  border-color: rgba(0, 128, 0, 0.35);
  color: #2d7b2d;
}

/* Títulos de sección */
.pf-section-title-row {
  margin-top: 6px;
  margin-bottom: 6px;
}

.pf-section-title {
  font-size: 18px;
  color: #5d5d5d;
  border-left: 3px solid #ab0909;
  padding-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ab0909;
}

/* Grid */
.pf-grid {
  list-style: none;
  margin: 0 0 10px 0;
}

/* Card de imagen */
.pf-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #eee;
  transition: transform .25s ease, box-shadow .25s ease;
  margin-bottom: 14px;
}

.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* ====== PROGRAMA SOCIAL – MINIATURAS IGUALES ====== */

/* Contenedor con proporción fija para TODAS las fotos */
.ps-card-image {
  position: relative;
  cursor: pointer;

  width: 100%;
  aspect-ratio: 4 / 5;   /* todas del mismo formato (puedes usar 3/4, 4/5, 1/1, etc.) */
  overflow: hidden;
  border-radius: 16px;
  display: block;
}

/* Imagen ajustada dentro del contenedor */
.ps-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* recorta, no deforma */
  object-position: center;
  display: block;
  transition: transform .25s ease;
}

/* Zoom suave al pasar el cursor */
.pf-card-image:hover img {
  transform: scale(1.05);
}

/* Overlay con icono zoom */
.pf-card-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
              rgba(0,0,0,0.0) 40%,
              rgba(0,0,0,0.45) 100%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  transition: opacity .25s ease;
}

.pf-card-overlay i {
  background: rgba(255,255,255,0.95);
  color: #ab0909;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.pf-card:hover .pf-card-overlay {
  opacity: 1;
}

/* ============================================================
   MODAL DE IMAGEN (ZOOM) – PORTFOLIO
   ============================================================ */

.pf-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.pf-modal.open {
  display: flex;
}

.pf-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.pf-modal-content img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 8px;
}

/* Botón de cierre */
.pf-modal-close {
  position: absolute;
  top: -34px;
  right: -4px;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pf-modal-close i {
  color: #ab0909;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 979px) {
  .pf-gallery {
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .pf-grid .span3 {
    width: 46%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 12px;
  }

  .pf-card {
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .pf-grid .span3 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .pf-modal-close {
    top: -30px;
    right: 0;
  }
}

/* ============================================================
   CONTACTO – FORMULARIO Y MAPA (contact.html)
   ============================================================ */

.contact-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Card genérica */
.contact-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #eee;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  padding: 24px 24px 20px;
  position: relative;
  overflow: hidden;
}

/* Toque decorativo */
.contact-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 150px;
  height: 150px;
  background: rgba(171,9,9,0.05);
  border-radius: 50%;
}

/* Cabecera */
.contact-card-header {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.contact-card-header h3 {
  font-size: 22px;
  color: #5d5d5d;
  margin: 6px 0 6px;
}

.contact-card-header p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* Pill */
.contact-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  background: rgba(171,9,9,0.09);
  color: #ab0909;
}

.contact-pill-secondary {
  background: rgba(0,0,0,0.03);
  color: #555;
}

/* Campos obligatorios */
.contact-required {
  color: #ab0909;
  font-weight: bold;
}

/* -------- Formulario -------- */

.contact-form-modern {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

/* Más espacio entre campos */
.contact-field-group {
  margin-bottom: 14px;
}

.contact-field-group label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}

.contact-input-wrapper {
  position: relative;
}

/* Ícono dentro del campo */
.contact-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #ab0909;
  opacity: 0.9;
}

/* Inputs y textarea más grandes y cómodos */
.contact-input-wrapper input,
.contact-input-wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid #ddd;
  padding: 10px 14px 10px 36px; /* antes 7px y 30px */
  font-size: 14px;              /* antes 13px */
  color: #444;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background: #fafafa;
  min-height: 42px;             /* altura mínima más grande */
}

/* Textarea más cuadrada y alta */
.contact-textarea-wrapper textarea {
  border-radius: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 130px;            /* antes 110px */
  resize: vertical;
}

.contact-input-wrapper input:focus,
.contact-input-wrapper textarea:focus {
  border-color: #ab0909;
  box-shadow: 0 0 0 2px rgba(171,9,9,0.10);
  background: #ffffff;
}

/* Botón */
.contact-actions {
  margin-top: 12px;
}

.contact-btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  border: none;
  background: #ab0909;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.contact-btn:hover {
  background: #8f0707;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

.contact-privacy {
  font-size: 11px;
  color: #777;
  margin-top: 6px;
}

/* Info adicional (cuentas) */
.contact-extra-info {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f9f2f2;
  border-left: 3px solid #ab0909;
  font-size: 12px;
  color: #555;
}

/* -------- Columna derecha (mapa + datos) -------- */

.contact-card-info {
  padding-bottom: 18px;
}

.contact-map-title {
  position: relative;
  z-index: 1;
  margin: 8px 0 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5d5d5d;
}

.contact-map-title i {
  margin-right: 5px;
  color: #ab0909;
}

/* Contenedor del mapa */
.contact-map-wrapper {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.contact-map-wrapper iframe {
  width: 100%;
  height: 220px;
  border: 0;
}

/* Lista de datos de contacto */
.contact-info-list {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}

.contact-info-list i {
  margin-top: 2px;
  color: #ab0909;
  width: 14px;
}

/* Caja Facebook */
.contact-social-box {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dashed #e0e0e0;
}

.contact-social-box h4 {
  font-size: 14px;
  color: #5d5d5d;
  margin-bottom: 6px;
}

.contact-social-box i {
  color: #3b5998;
  margin-right: 4px;
}

/* Responsive */
@media (max-width: 979px) {
  .contact-section {
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .contact-card {
    padding: 20px 18px 18px;
  }

  .contact-card::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .contact-section .span7,
  .contact-section .span5 {
    width: 100%;
    margin-left: 0;
  }

  .contact-card {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .contact-map-wrapper iframe {
    height: 200px;
  }
}

/* Alertas de contacto */
.contact-alert {
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.contact-alert i {
  margin-top: 2px;
  font-size: 15px;
}

.contact-alert-success {
  background: #f0f8f3;
  border-left: 3px solid #2d7b2d;
  color: #2d7b2d;
}

.contact-alert-error {
  background: #fff5f5;
  border-left: 3px solid #ab0909;
  color: #ab0909;
}

/* ============================================================
   TRABAJA CON NOSOTROS – SECCIÓN (tcn.html)
   ============================================================ */

.careers-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* Intro superior */
.careers-intro {
  text-align: center;
  margin-bottom: 24px;
}

.careers-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  background: rgba(171,9,9,0.09);
  color: #ab0909;
}

.careers-intro h3 {
  font-size: 22px;
  color: #5d5d5d;
  margin: 8px 0 6px;
}

.careers-intro p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* Cards generales */
.careers-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #eee;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
}

/* Detalle decorativo */
.careers-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 150px;
  height: 150px;
  background: rgba(171,9,9,0.05);
  border-radius: 50%;
}

.careers-card h4 {
  font-size: 18px;
  color: #5d5d5d;
  margin: 4px 0 8px;
}

.careers-card h4 i {
  margin-right: 6px;
  color: #ab0909;
}

.careers-card p {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
}

/* Lista dentro de cards */
.careers-list {
  list-style: none;
  margin: 8px 0 4px 0;
  padding: 0;
}

.careers-list li {
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.careers-list li i {
  margin-top: 2px;
  color: #ab0909;
  font-size: 12px;
}

.careers-list.small li {
  font-size: 12px;
}

/* Caja para postulación */
.careers-apply-box {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f9f2f2;
  border-left: 3px solid #ab0909;
}

.careers-apply-box h5 {
  font-size: 14px;
  color: #5d5d5d;
  margin: 0 0 6px;
}

.careers-apply-box h5 i {
  margin-right: 4px;
  color: #3b5998;
}

.careers-mail a {
  color: #ab0909;
  font-weight: bold;
  text-decoration: none;
}

.careers-mail a:hover {
  text-decoration: underline;
}

.careers-note {
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

/* Chips inferiores */
.careers-bottom-chips {
  margin-top: 16px;
  text-align: center;
}

.careers-chip {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 4px 6px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #faf6f6;
  border: 1px solid #f0e2e2;
  color: #555;
}

.careers-chip i {
  margin-right: 5px;
  color: #ab0909;
}

/* Responsive */
@media (max-width: 979px) {
  .careers-section {
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .careers-card {
    padding: 20px 18px 16px;
  }

  .careers-card::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .careers-section .span7,
  .careers-section .span5 {
    width: 100%;
    margin-left: 0;
  }

  .careers-card {
    margin-bottom: 16px;
  }
}

/* Reducir espacio entre "Olmara Education" y "Libros por nivel" */
.presentation-modern {
  margin-bottom: 25px !important; /* antes tenía ~50px */
}

.books-section-header {
  margin-top: 20px !important; /* antes más de 50px */
}

/* Ajuste de espacio entre héroe y libros por nivel */
.presentation-modern {
  padding-bottom: 32px;        /* un poco menos “alto” */
  margin-bottom: 10px;
}

.what-we-do {
  margin-top: 18px;            /* antes 55px: reduce el hueco */
}

/* Botón secundario en el héroe (outline) reutilizando el estilo base */
.presentation-modern .btn-modern.btn-modern-outline {
  background: #fff;
  color: #ab0909 !important;
  border: 1px solid #ab0909;
  box-shadow: none;
}

.presentation-modern .btn-modern.btn-modern-outline:hover {
  background: rgba(171, 9, 9, 0.06);
  transform: translateY(-2px);
}

/* ===== FIX COMPLETO – Todas las imágenes de la galería se adaptan ===== */

/* Tamaño uniforme de las cards */
.ps-card-image {
  width: 100%;
  height: 220px; /* puedes subir a 240 si quieres más alto */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen interna adaptada sin deformarse */
.ps-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta sin deformar (como Instagram) */
  object-position: center;
}
/* Centrado vertical uniforme para los íconos de encabezado */
.gallery-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;      /* mismo tamaño en ambos */
  line-height: 1;       /* evita saltos */
  height: 38px;         /* altura fija */
  margin-bottom: 8px;   /* separación exacta */
}


/* CONTACTO PARA REDUCIR ESPACIO DE CABECERA AL FORMULARIO */

/* Ajuste de espacio solo para la cabecera de CONTACTO */
.contact-header {
  margin-top: 8px;
  margin-bottom: 3px;
}

/* Reducir aún más el margen bajo del título dentro de CONTACTO */
.contact-header .gallery-header {
  margin-bottom: 6px;
}

/* Reduce el espacio superior del bloque de contacto */
.contact-section {
  margin-top: 2px;
}

/* ===========================================
   CONTACTO – AJUSTE DE ESPACIOS VISIBLES
   =========================================== */

/* El bloque que contiene el título "Contáctenos" */
.gallery-albums-section.contact-header {
  margin-top: 16px !important;    /* más cerca del menú */
  margin-bottom: 16px !important;  /* más pegado al formulario */
}

/* Reducir el aire interno del header (icono + título + texto) */
.gallery-albums-section.contact-header .gallery-header {
  margin-bottom: 2px !important;
}

/* Subir la sección del formulario para que quede más cerca del título */
.contact-section {
  margin-top: 8px !important;
}

/* ===========================================
   HEADERS UNIFICADOS PARA TODAS LAS PÁGINAS
   =========================================== */

.unified-header {
    margin-top: 25px !important;
    margin-bottom: 20px !important;
}

.unified-header .gallery-header {
    text-align: center !important;
    margin-bottom: 6px !important;
}

.unified-header .gallery-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    height: 38px;
    margin-bottom: 8px;
    color: #ab0909;
}

/* ============================================================
   AJUSTE SLIDER HOME – OCUPAR TODO EL FONDO GRIS
   ============================================================ */

/* Quita el aire superior / inferior del bloque gris */
.slider {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Elimina márgenes internos que meten espacio extra */
.slider .container,
.slider .row,
.slider .span12 {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Flexslider sin margen ni bordes ni sombra extra */
.slider .flexslider {
  background: #f2f2f2;        /* mismo gris de fondo */
  text-align: center;         /* para centrar la imagen */
}

/* Imágenes del slider responsivas, sin deformarse */
.slider .flexslider .slides img {
  max-height: 420px !important;   /* AJUSTA ESTE VALOR (ej. 320, 360, etc.) */
  width: 1400px !important;         /* deja que el ancho se ajuste solo */
  height: 420px !important;
  display: inline-block !important;
}


/* SLIDER A TODO EL ANCHO */
.slider .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.slider .row {
  margin: 0 !important;
  padding: 0 !important;
}

.slider .span12,
.slider .span10.offset1 {
  width: 100% !important;
  margin-left: 0 !important;
}

/* ALTURA CONTROLADA DEL SLIDER */
.slider .flexslider {
  max-height: 500px; /* AJUSTA A TU GUSTO — prueba 280, 320, 360 */
  overflow: hidden;
}

.slider .slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* llena el espacio pero sin deformarse */
}

/* SLIDER: imagen completa, responsiva, sin recorte ni deformación */
.slider .flexslider .slides img {
  width: 100%;
  height: auto;
  display: block;
}

/* Quitar fondo gris del slider y dejar fondo blanco limpio */
.slider,
.slider .flexslider,
.slider .flexslider .slides {
  background: #ffffff !important; /* fondo blanco */
  box-shadow: none !important;
  border: none !important;
}

/* Evita que quede borde o línea en el contenedor */
.slider .flexslider {
  border: 0 !important;
  box-shadow: none !important;
}

/* El container del slider también sin fondo */
.slider .container,
.slider .row,
.slider .span12 {
  background: transparent !important;
}

/* Elimina el espacio del container que envuelve el header */
.header.row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* También eliminamos margen/padding del container que lo envuelve */
.header.row .span12,
.container > .header {
  margin: 0 !important;
  padding: 0 !important;
}
/* Quitar margen del container SOLO cuando está arriba del slider */
.container:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ======================================
   FIX: que la barra social NO empuje el slider
   ====================================== */

/* El contenedor ya no ocupa espacio vertical */
.socialbar {
  position: fixed;          /* la saca del flujo normal */
  top: 50%;                 /* posición vertical de los iconos */
  left: 0;
  transform: translateY(-50%);
  z-index: 9999;
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  background: transparent;
}

/* Aseguramos que la lista también no meta espacios raros */
.socialbar .ulsocial {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   CARRUSEL DE LIBROS POR NIVEL – FINAL
   ============================================================ */

/* Contenedor general del carrusel */
.books-carousel {
  margin: 22px auto 0;
  max-width: 1100px;
  position: relative;
}

/* Flexslider limpio */
.books-carousel .flexslider {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

/* Slides */
.books-carousel .slides {
  display: flex;
  align-items: stretch;
}

/* Cada libro */
.books-carousel .slides li {
  padding: 10px;
  box-sizing: border-box;
}

/* Card libro */
.book-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 12px 12px 16px;
  height: 100%;
  transition: all .25s ease;
  text-align: center;
}

.book-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}

/* Imagen del libro */
.book-cover {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.book-cover img {
  max-height: 180px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Título */
.book-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 6px 0 6px;
  min-height: 36px;
}

/* Botón */
.book-card a {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  background: #ab0909;
  color: #fff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  transition: all .2s ease;
}

.book-card a:hover {
  background: #8f0707;
  transform: translateY(-2px);
}

/* Flechas – MÁS JUNTAS (NO chocan con social bar) */
.books-carousel.modern-slider .flex-direction-nav .flex-prev {
  left: 10px !important;
}

.books-carousel.modern-slider .flex-direction-nav .flex-next {
  right: 10px !important;
}

/* Responsive */
@media (max-width: 979px) {
  .book-cover { height: 170px; }
}

@media (max-width: 767px) {
  .books-carousel {
    max-width: 95%;
  }
}