/* Compiled minimal CSS for pages (from pages.scss) */
.team-grid .service-feature img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(10,10,20,0.08);
}
.team-grid .service-feature h4 {
  margin-top: .5rem;
  font-size: 1rem;
}
.blog-controls { display:flex; gap:1rem; align-items:center; }
.blog-list { /* ensure cards are slightly lifted */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) {
  .blog-list { grid-template-columns: 1fr; }
}
/* pequeños toques visuales */
.hero-split[data-effect] { transition: transform .5s ease, opacity .5s ease; }
.hero-anim.in-view .hero-split__content { transform: translateY(0); opacity: 1; }
/* simple fade-in util para headings */
h2, h3 { opacity: 0; transform: translateY(8px); transition: all .6s cubic-bezier(.16,.85,.32,1); }
.in-view h2, .in-view h3 { opacity: 1; transform: translateY(0); }

/* About / Reseña styles */
.container[aria-labelledby="about-title"] { padding-top: 1.5rem; padding-bottom: 2rem; }
.container[aria-labelledby="about-title"] .resena { max-width: 900px; margin: 0 auto; background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(10,10,20,0.04); }
.container[aria-labelledby="about-title"] .resena p { margin: 0; color: #333; line-height: 1.6; }

/* Team cards: cleaner visual */
.team-grid { margin-top: 1rem; }
.team-grid .service-feature { background: #fff; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 12px 36px rgba(10,10,20,0.06); }
.team-grid .service-feature small { display: block; color: #666; margin-top: .25rem; }
.team-grid .service-feature p { color: #555; margin-top: .75rem; }

/* Ensure headings inside in-view animate slightly delayed */
.in-view h2 { transition-delay: 60ms; }
.in-view h3 { transition-delay: 120ms; }

/* Align Misión / Visión with resena paragraph */
.grid--2 { align-items: start; }
.grid--2 > div { display: flex; flex-direction: column; justify-content: flex-start; }

/* Values: distribute and animate */
.grid--3 { gap: 2rem; }
.grid--3 li { list-style: disc; margin-left: 1rem; opacity: 0; transform: translateY(8px); transition: all .5s cubic-bezier(.16,.85,.32,1); }
.in-view .grid--3 li { opacity: 1; transform: translateY(0); }

/* Reveal animations for resena and team */
.resena { opacity: 0; transform: translateY(10px); transition: transform .6s ease, opacity .6s ease; }
.in-view .resena { opacity: 1; transform: translateY(0); }
.team-grid .service-feature { opacity: 0; transform: translateY(14px); transition: transform .6s cubic-bezier(.16,.85,.32,1), opacity .6s ease; }
.in-view .team-grid .service-feature { opacity: 1; transform: translateY(0); }
.team-grid .service-feature:nth-child(1) { transition-delay: 80ms; }
.team-grid .service-feature:nth-child(2) { transition-delay: 160ms; }
.team-grid .service-feature:nth-child(3) { transition-delay: 240ms; }

/* Justify the resena paragraph for a professional look */
.resena p { text-align: justify; }

/* About grid tweaks */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.about-left, .about-right { display:flex; flex-direction:column; gap:.5rem; }

/* Value cards */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.value-card { background: linear-gradient(180deg, #fff, #fbfdff); border-radius: 12px; padding: 1.25rem; text-align: center; box-shadow: 0 8px 36px rgba(10,10,20,0.06); transform: translateY(14px); opacity: 0; transition: transform .6s cubic-bezier(.16,.85,.32,1), opacity .6s ease, box-shadow .2s ease; }
.in-view .value-card { transform: translateY(0); opacity: 1; }
.value-card__icon { font-size: 34px; margin-bottom: .5rem; }
.value-card h4 { margin: 0.25rem 0; }
.value-card p { color: #555; font-size: .95rem; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(10,10,20,0.12); }

@media (max-width:900px) {
  .about-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}

/* Centered headings for this page */
.container[aria-labelledby="about-title"] h2,
.container[aria-labelledby="about-title"] h3,
.team h3 { text-align: center; }

/* Team icon styling */
.team-icon-wrap { width: 110px; height: 110px; margin: 0 auto 0.75rem; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(240,180,41,0.04)); box-shadow: 0 8px 20px rgba(10,10,20,0.06); }
.team-icon { width: 56px; height: 56px; object-fit: contain; filter: saturate(1.1); }
.team-name { text-align: center; margin-top: .5rem; font-weight: 700; }
.team-role { display:block; text-align:center; color:#666; margin-top: .25rem; }
.team-bio { text-align:center; color:#555; }

/* subtle entrance for centered titles and icons */
.in-view .team-icon-wrap { transform: translateY(0); opacity: 1; transition: transform .6s cubic-bezier(.16,.85,.32,1), opacity .6s ease; }
.team-icon-wrap { transform: translateY(12px); opacity: 0; }

/* Use primary color for section headings and center them */
.about-section h2, .values-section h2, .team-section h2 { color: var(--color-primary); text-align: center; margin-bottom: 1rem; }

/* Visually separate sections */
.about-section { padding: 2.25rem 0; }
.values-section { background: linear-gradient(180deg, rgba(250,250,252,1), rgba(245,249,255,1)); padding: 2.5rem 0; border-top: 1px solid rgba(10,20,40,0.02); border-bottom: 1px solid rgba(10,20,40,0.02); }
.team-section { padding: 2.5rem 0; }

/* Make H3 centered and consistent */
.about-section h3, .values-section h3, .team-section h3 { text-align: center; color: var(--color-primary); }

/* Slight divider between reseña and mission/vision */
.about-grid { margin-top: 1.25rem; }

/* ===== Blog page improvements ===== */
/* Center the hero and make it full-width inside container */
.hero-split--centered { display:flex; justify-content:center; text-align:center; padding: 2.25rem 0 1rem; }
.hero-split--centered .hero-split__content { max-width: 900px; }
/* Blog hero title sizing */
.hero-split--centered .hero-split__title { font-size: clamp(2rem, 4vw, 3rem); color: var(--color-primary); font-weight: 800; }
.hero-split--centered .hero-split__subtitle { font-size: 1.05rem; color: #555; margin-top: .5rem; }

/* Modern select styling */
.select-wrap { position: relative; display: inline-block; }
.select-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: .6rem 1.2rem .6rem .75rem; border-radius: 999px; border: 1px solid rgba(10,10,20,0.08); background: #fff; box-shadow: 0 6px 18px rgba(10,10,20,0.04); font-weight:600; }
.select-wrap::after { content: '\25BE'; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-primary); font-size: 12px; }

/* Blog cards visual upgrade */
.blog-card { border-radius: 12px; overflow: visible; background: #fff; padding-bottom: .5rem; }
.blog-card__link { display:block; color:inherit; }
.blog-card__image { height: 160px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.blog-card__body { padding: 1rem; }
.blog-card__title { font-size: 1.05rem; font-weight:700; margin-bottom: .5rem; }
.blog-card__excerpt { color:#666; }

/* Carousel buttons restyle */
.carousel-btn { background: #fff; border: 0; width: 44px; height: 44px; box-shadow: 0 10px 30px rgba(10,10,20,0.06); }

/* Header / controls spacing */
.blog-list-section h2 { margin-top: 0.75rem; }
.blog-controls { display:flex; gap:1rem; align-items:center; margin-top: 1rem; }
.select-wrap select { min-width: 160px; }

/* Center and space the load more button */
.blog-list-section { padding-bottom: 5rem; }
.blog-list-section .button { display: inline-block; margin-top: 3rem; }

@media (max-width: 900px) {
  .blog-list-section { padding-bottom: 3.5rem; }
  .blog-list { gap: 1rem; }
}

/* Center hero headings in blog page specifically */
.hero-split.hero-anim.from-center .hero-split__content { text-align: center; }


