/* =========================
   NAVBAR - REDESIGN
========================= */
:root{
  --brand-blue: #1D617A;
  --brand-green: #08A78A;
  --brand-mint: #DBEFE1;
}
/* =========================================
   INDICADORES PREMIUM
========================================= */

#heroCarousel .carousel-indicators{
  bottom: 20px;
  margin-bottom: 0;
}

#heroCarousel .carousel-indicators [data-bs-target]{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #0B2F3A; /* Azul profundo premium */
  border: 2px solid #ffffff;
  margin: 0 7px;
  opacity: 0.9;
  transition: all .35s ease;
}

#heroCarousel .carousel-indicators [data-bs-target]:hover{
  transform: scale(1.15);
  opacity: 1;
}

#heroCarousel .carousel-indicators .active{
  background-color: #0FAF90; /* Verde esmeralda */
  transform: scale(1.35);
  opacity: 1;
}

/* =========================================
   NAVBAR (para tu HTML actual)
   #mainNav + #navbarResponsive
========================================= */

#mainNav{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 10px 0;
}

/* Logo (tu HTML trae height inline 70px; esto lo corrige igual) */
#mainNav .navbar-brand img{
  height: 62px !important;
  width: auto;
  display: block;
}

/* Links: visibles desde el inicio */
#mainNav .navbar-nav .nav-link{
  color: rgba(15,23,42,0.90) !important;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover */
#mainNav .navbar-nav .nav-link:hover{
  background: rgba(219,239,225,0.85);
  color: var(--brand-blue) !important;
}

/* Active (scrollspy) */
#mainNav .navbar-nav .nav-link.active{
  background: rgba(219,239,225,0.95);
  color: var(--brand-blue) !important;
}

/* Botón hamburguesa */
#mainNav .navbar-toggler{
  border: 1px solid rgba(29,97,122,0.25);
  border-radius: 14px;
  padding: 10px 12px;
}
#mainNav .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(29,97,122,0.15);
}

/* Si tu plantilla usa navbar-shrink al hacer scroll */
#mainNav.navbar-shrink{
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  border-bottom: 1px solid rgba(15,23,42,0.10);
}
#mainNav.navbar-shrink .navbar-nav .nav-link{
  color: rgba(15,23,42,0.92) !important;
}

/* MÓVIL: panel desplegable bonito */
/* =========================================
   NAVBAR – AJUSTE LOGO EN MÓVIL
========================================= */
@media (max-width: 991.98px){

  /* Navbar un poco más alto */
  #mainNav{
    padding: 16px 0 !important;
  }

  /* Contenedor del nav */
  #mainNav .container{
    min-height: 64px;
    display: flex;
    align-items: center;
  }

  /* Logo más pequeño y centrado */
  #mainNav .navbar-brand{
    display: flex;
    align-items: center;
  }

  #mainNav .navbar-brand img{
    height: 48px !important;   /* CLAVE: antes estaba muy grande */
    max-height: 48px;
    width: auto;
  }

  /* Botón hamburguesa alineado */
  #mainNav .navbar-toggler{
    padding: 8px 10px;
    margin-left: auto;
  }
}



/* =========================
   HEADER HERO + CAROUSEL
   (Responsivo, no full screen)
========================= */

/* Anula el header viejo que venía en bootstrap.min_1.css */
.header{
  position: relative;
  overflow: hidden;
  background: none !important;
  background-image: none !important;
  min-height: unset !important;

  /* tamaño y forma */
  height: clamp(420px, 58vh, 820px) !important;
  margin: 86px auto 0;
  border-radius: 18px;
  max-width: none;
  margin-top:20;

  /* separación por navbar fixed */
  margin: 60px auto 0;
  padding-left: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* mata el overlay viejo ::before */
.header::before{
  content: none !important;
  display: none !important;
}

/* Carrusel como fondo real */
.header .hero-carousel{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.header .hero-carousel .carousel-inner,
.header .hero-carousel .carousel-item{
  height: 100%;
}

.header .hero-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay nuevo (tu div.overlay en el HTML) */
.header .overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.65) 100%
  );
  pointer-events: none;
}

/* Texto centrado arriba de todo */
.header .header-content{
  position: relative;
  z-index: 3;
  inset: auto;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 18px;
  color: #fff;
}

/* Título */
.header .header-content h1{
  margin: 0;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 1.05;
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.header .header-content .middle-text{
  display: inline-block;
  margin-top: 6px;
  color: var(--brand-mint);
}

/* Subtítulo */
.header .header-content .subtitulo{
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 720px;

  align-items: center;
}

.header .header-content .contadora{
  margin: 0;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .85rem;
  color: rgba(255,255,255,0.9);
}

.header .header-content .nombre{
  margin: 6px 0 0;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
}

/* Flechas discretas */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
  opacity: .95;
}

/* =========================================
   FIX MOBILE: hero pegado al nav y full ancho
========================================= */
@media (max-width: 575.98px){

  /* 1) Header pegado al nav, sin espacios */
  .header{
    margin-top: 1 !important;     /* adiós hueco arriba */
    width: 100% !important;       /* full ancho */
    border-radius: 0 !important;  /* sin esquinas (evita “huecos” laterales) */
    height: 230px !important;     /* altura estable */
  }

  /* 2) Carrusel ocupa TODO el header */
  .header .hero-carousel,
  .header .hero-carousel .carousel-inner,
  .header .hero-carousel .carousel-item{
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Por defecto: que NO deje márgenes raros */
  .header .hero-img{
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;   /* misma regla para todas: sin “aire” */
    object-position: center !important;
    background: transparent !important;
  }

  /* 4) Solo la PRIMERA (muy ancha): tratamos como banner,
        pero SIN crear espacios */
  .header .hero-img-wide{
    object-fit: contain !important;     /* se ve completa */
    background: rgba(219,239,225,0.55) !important;        /* relleno limpio */
    object-position: center !important;
  }

  /* 5) El overlay no debe empujar nada */
  .header .overlay{
    inset: 0 !important;
  }
}

/* =========================================
   FIX imagen MUY ANCHA (solo móvil)
   carru1.jpg
========================================= */
@media (max-width: 575.98px){

  .header{
    height: 230px !important;
  }

  /* comportamiento normal para fotos */
  .header .hero-img{
    object-fit: contain;
    background: #fff;
  }

  /* SOLO la imagen demasiado horizontal */
  .hero-img-wide{
    object-fit: cover;
    object-position: center top;
    background: transparent;
  }
}
@media (min-width: 992px){
  .header{
    height: clamp(480px, 52vh, 640px) !important; /* menos alto = menos zoom */
  }
}
/* =========================================
   TABLET FIX (576px a 991.98px)
   Evita recortes raros del carrusel en tablets
========================================= */
@media (min-width: 576px) and (max-width: 991.98px){

  .header{
    width: 100% !important;
    border-radius: 18px !important;
    height: 340px !important;      /* altura cómoda para tablet */
    margin: 70px auto 0 !important;/* debajo del nav fijo */
    overflow: hidden !important;
  }

  .header .hero-carousel,
  .header .hero-carousel .carousel-inner,
  .header .hero-carousel .carousel-item{
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Por defecto: fotos normales llenan bien */
  .header .hero-img{
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center 20% !important; /* menos corte en la parte superior */
    background: transparent !important;
  }

  /* Solo carru1 (muy ancha): mostrar completa en tablet */
  .header .hero-img-wide{
    object-fit: contain !important;
    background: #fff !important;
    object-position: center !important;
  }
}
/* =========================================
   PORTFOLIO – FINAL DEFINITIVO (SIN RECORTE)
   + Ajustes: separación botón, accordion redondeado, responsive
========================================= */
/* Sección */
#portfolio.services-section{
  padding: 56px 0;
  background: linear-gradient(
    180deg,
    rgba(219,239,225,0.55),
    rgba(255,255,255,1)
  );
}

/* Título */
#portfolio .section-heading{
  color: var(--brand-blue);
  letter-spacing: .04em;
  font-weight: 800;
}

/* Línea verde */
#portfolio .section-line{
  width: 76px;
  height: 3px;
  background: var(--brand-green);
  border-radius: 999px;
  margin: 14px auto 0;
}

/* Grid */
#portfolio .services-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 22px;
  align-items: start;
}

/* Columna derecha */
#portfolio .service-secondary{
  display: grid;
  gap: 18px;
}

/* Card */
#portfolio .service-card{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  position: relative;
}

/* Destacada */
#portfolio .service-main{
  border: 1px solid rgba(8,167,138,0.35);
  box-shadow: 0 22px 60px rgba(8,167,138,0.14);
}

/* ===============================
   IMAGEN – AJUSTE PROFESIONAL
   Ahora llena completamente el contenedor
=============================== */
#portfolio .service-media{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(15,23,42,0.08);

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent;
}

/* Alturas correctas */
#portfolio .service-main .service-media{
  height: clamp(340px, 32vw, 520px);
}
#portfolio .service-mini .service-media{
  height: clamp(260px, 22vw, 360px);
}

/* Patrón membrete elegante (no interfiere con imagen) */
#portfolio .service-media.service-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/img/membrete.png");
  background-repeat: repeat;
  background-size: 140px auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

/* Overlay sutil */
#portfolio .service-bg-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.02) 0%,
    rgba(0,0,0,0.06) 60%,
    rgba(0,0,0,0.10) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Contenido */
#portfolio .service-body{
  padding: 18px 18px 20px;
}

#portfolio .service-card h3{
  margin: 0 0 8px;
  font-weight: 900;
  color: rgba(15,23,42,0.92);
}

#portfolio .service-time{
  margin: 0 0 12px;
  color: rgba(15,23,42,0.65);
  font-weight: 600;
}

/* Resumen */
#portfolio .service-summary{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(219,239,225,0.55);
  border: 1px solid rgba(8,167,138,0.18);
}

/* Texto */
#portfolio .service-content{
  color: rgba(15,23,42,0.82);
  line-height: 1.6;
}

/* Links */
#portfolio .service-link{
  border: 0;
  background: transparent;
  color: var(--brand-blue);
  font-weight: 900;
  cursor: pointer;
  padding: 6px 0 0;
}
#portfolio .service-link:hover{
  color: var(--brand-green);
  text-decoration: underline;
}

/* Botón */
#portfolio .btn-primary{
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}

/* Separación botón */
#portfolio .service-actions{
  margin-top: 18px;
  padding-top: 6px;
}
#portfolio .service-actions .btn{
  margin-top: 10px;
}

/* Accordion */
#portfolio .accordion{
  margin-top: 14px;
}

#portfolio .accordion-item{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.95);
}

#portfolio .accordion-button{
  border-radius: 16px;
  font-weight: 900;
  color: rgba(15,23,42,0.90);
  background: rgba(255,255,255,0.96);
}

#portfolio .accordion-button:not(.collapsed){
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#portfolio .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(29,97,122,0.12);
}

#portfolio .accordion-body{
  color: rgba(15,23,42,0.82);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 991.98px){
  #portfolio .services-grid{
    grid-template-columns: 1fr;
  }
  #portfolio .service-main .service-media{
    height: 320px;
  }
  #portfolio .service-mini .service-media{
    height: 260px;
  }
}

@media (max-width: 575.98px){
  #portfolio.services-section{
    padding: 42px 0;
  }
  #portfolio .service-main .service-media{
    height: 260px;
  }
  #portfolio .service-mini .service-media{
    height: 220px;
  }
  #portfolio .service-actions{
    margin-top: 16px;
  }
}
/* =========================================
   SERVICES – Paquetes Contables (FINAL LIMPIO)
   - Iconos visibles (aunque tengan text-white)
   - Título vs precio con aire
   - Mobile 2 columnas
   - Título centrado en móvil
   - Márgenes laterales en móvil
========================================= */

#services{
  position: relative;
  padding: clamp(56px, 6vw, 92px) 0;
  background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 55%, #ffffff 100%) !important;
  overflow: hidden;
}

/* Anula el background-image inline del HTML */
#services[style]{
  background-image: none !important;
}

/* Fondo tech sutil */
#services::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(8,167,138,0.16), transparent 55%),
    radial-gradient(circle at 88% 28%, rgba(29,97,122,0.16), transparent 52%),
    linear-gradient(to right, rgba(15,23,42,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.06) 1px, transparent 1px);
  background-size: auto, auto, 38px 38px, 38px 38px;
  background-position: center, center, center, center;
  pointer-events:none;
  opacity: .55;
  z-index:0;
}

/* Banda suave superior */
#services::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(219,239,225,0.75) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:0;
}

#services .container,
#services .row{
  position: relative;
  z-index: 1;
}

/* Header */
#services .section-heading{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Línea (hr) moderna */
#services hr.my-4{
  width: 96px;
  height: 3px;
  border: 0;
  opacity: 1;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-green), rgba(29,97,122,0.55));
}

/* =========================================
   Cards
========================================= */

#services .service-box{
  position: relative;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* ✅ clave: espacio real para que el precio NO se encime */
  padding: 18px 18px 78px !important;
  min-height: 240px;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* borde superior tech */
#services .service-box::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-green), rgba(29,97,122,0.75));
  opacity: .95;
}

/* Hover */
#services .service-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.14);
  border-color: rgba(8,167,138,0.26);
}

/* Tarjetas que antes eran bg-primary, uniformes */
#services .service-box.bg-primary{
  background: rgba(255,255,255,0.86) !important;
}

/* =========================================
   ICONOS (FIX REAL)
   El problema: text-white sobre caja blanca
   Solución: forzamos color del icono por CSS
========================================= */

#services .service-box i{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 86px;
  height: 86px;
  border-radius: 999px;

  margin-top: 10px !important;
  margin-bottom: 10px;

  background: radial-gradient(circle at 30% 30%, rgba(8,167,138,0.18), rgba(29,97,122,0.10));
  border: 1px solid rgba(15,23,42,0.10);

  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.10));

  /* ✅ visible siempre */
  opacity: 1 !important;
  visibility: visible !important;

  /* ✅ tamaño estable */
  font-size: 3.2rem !important;
  line-height: 1 !important;

  /* ✅ aunque el HTML traiga text-white */
  color: var(--brand-green) !important;

  position: relative;
  z-index: 2;
}

/* =========================================
   Títulos / textos
========================================= */

#services .service-box h3,
#services .service-box h4{
  margin: 10px 10px 18px !important; /* ✅ separación con el precio */
  padding: 0 !important;            /* anula p-3 */
  font-weight: 900;
  line-height: 1.15;
}

#services .service-box h4{
  font-size: 1.05rem;
}

#services .text-azul{
  color: rgba(15,23,42,0.92) !important;
}
#services .text-verde-claro{
  color: rgba(15,23,42,0.92) !important;
}

/* =========================================
   Precio chip (bg-primary / bg-white)
========================================= */

#services .service-box > div.bg-primary,
#services .service-box > div.bg-white{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;

  margin: 0 !important;
  background: rgba(219,239,225,0.75) !important;
  color: rgba(15,23,42,0.92) !important;
  border: 1px solid rgba(8,167,138,0.22);
  border-radius: 16px !important;
  padding: 12px 12px !important;

  font-weight: 900;
  letter-spacing: .01em;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 991.98px){
  #services{
    padding: 54px 0;
  }
  #services .service-box{
    border-radius: 20px !important;
  }
}

/* ✅ Móvil: 2 columnas + márgenes laterales + título centrado */
@media (max-width: 575.98px){
  #services{
    padding: 46px 0;
  }

  /* margen a los lados para que no pegue */
  #services .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

 
  

  /* row como grid 2 columnas */
  #services .container .row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* anula columnas bootstrap */
  #services .container .row > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #services .service-box{
    border-radius: 18px !important;
    padding: 16px 14px 70px !important;
    min-height: 220px;
  }

  #services .service-box i{
    width: 70px;
    height: 70px;
    font-size: 2.6rem !important;
  }

  #services .service-box h3,
  #services .service-box h4{
    font-size: 1rem !important;
    margin-bottom: 14px !important;
  }

  #services .service-box > div.bg-primary,
  #services .service-box > div.bg-white{
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 10px !important;
    border-radius: 14px !important;
    font-size: .92rem;
  }
}

/* ✅ FIX DEFINITIVO: header de #services centrado en móviles reales */
@media (max-width: 575.98px){

  /* solo el primer container (el del título) */
  #services > .container:first-of-type .row{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #services > .container:first-of-type .col-lg-12.text-center{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
  }

  #services > .container:first-of-type .section-heading{
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* opcional: que también el hr quede centrado sí o sí */
  #services > .container:first-of-type hr.my-4{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
/* ================= BLOG INSTAGRAM FEED ================= */

/* ================================
   BLOG – Fondo Key Visual (reemplaza SOLO este bloque)
================================ */
#blog{
  position: relative;
  overflow: hidden;

  /* ✅ Fondo estilo key visual: verde + azul + limpio + tech grid */
  background:
    radial-gradient(circle at 18% 20%, rgba(8,167,138,0.22), transparent 55%),
    radial-gradient(circle at 85% 28%, rgba(49,97,123,0.22), transparent 52%),
    linear-gradient(180deg, rgba(219,239,225,0.65) 0%, #ffffff 62%, #ffffff 100%) !important;
}

/* ✅ Si Bootstrap bg-secondary mete color sólido, lo anulamos */
#blog.bg-secondary{
  background-color: transparent !important;
}

/* Grid tech MUY sutil */
#blog::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(15,23,42,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .20;
  pointer-events:none;
  z-index:0;
}

/* Glow suave para profundidad */
#blog::after{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 12% 30%, rgba(8,167,138,0.18), transparent 60%),
    radial-gradient(circle at 88% 18%, rgba(49,97,123,0.16), transparent 58%);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}

/* ✅ contenido arriba del fondo */
#blog .container,
#blog .row{
  position: relative;
  z-index: 1;
}


/* Tarjeta Instagram */
.instagram-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover sutil */
.instagram-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* EMBED Instagram — CLAVE DEL FEED */
.instagram-card .instagram-media {
    margin: 0 auto !important;
    min-width: 100% !important;
    width: 100% !important;
    border-radius: 14px;
    transform: scale(0.92);              /* ⬅ hace el post más compacto */
    transform-origin: top center;
}

/* Quita espacio fantasma del iframe */
.instagram-card iframe {
    margin-bottom: 0 !important;
}

/* Desktop grande */
@media (min-width: 1200px) {
    #blog .row.g-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet */
@media (max-width: 1199px) {
    #blog .row.g-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    #blog .row.g-4 {
        display: grid;                  /* ⬅ ÚNICO CAMBIO REAL */
        grid-template-columns: repeat(2, 1fr); /* ⬅ 2 columnas en móvil */
        gap: 0.8rem;
    }
}

/* =========================================
   NOSOTROS – Team + Counters (Tech/Pro)
   Totalmente responsivo
========================================= */

#nosotros.team-section{
  position: relative;
  padding: clamp(56px, 6vw, 92px) 0;
  overflow: hidden;

  background:
    radial-gradient(circle at 18% 20%, rgba(8,167,138,0.18), transparent 55%),
    radial-gradient(circle at 85% 28%, rgba(49,97,123,0.18), transparent 52%),
    linear-gradient(180deg, rgba(219,239,225,0.60) 0%, #ffffff 62%, #ffffff 100%);
}

/* Grid tech sutil */
#nosotros::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(15,23,42,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .18;
  pointer-events:none;
  z-index:0;
}

/* Contenido arriba */
#nosotros .container{
  position: relative;
  z-index: 1;
}

/* Header */
#nosotros .section-heading{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

#nosotros .section-line{
  width: 76px;
  height: 3px;
  background: var(--brand-green);
  border-radius: 999px;
  margin: 14px auto 12px;
}

#nosotros .team-lead{
  max-width: 760px;
  margin: 0 auto;
  color: rgba(15,23,42,0.78);
  line-height: 1.7;
}

/* Layout principal */
#nosotros .team-grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: start;
}

/* Equipo */
#nosotros .team-people{
  display: grid;
  gap: 18px;
}

#nosotros .team-card{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

#nosotros .team-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.12);
}

/* =========================
   FOTO CON <img>
========================= */

#nosotros .team-photo{
  min-height: 180px;
  position: relative;
  overflow: hidden;
}

#nosotros .team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay elegante */
#nosotros .team-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
  pointer-events:none;
}

/* Info */
#nosotros .team-info{
  padding: 16px 16px 18px;
}

#nosotros .team-name{
  margin: 0 0 4px;
  font-weight: 900;
  color: rgba(15,23,42,0.92);
}

#nosotros .team-role{
  margin: 0 0 10px;
  font-weight: 800;
  color: rgba(29,97,122,0.85);
}

#nosotros .team-desc{
  margin: 0 0 12px;
  color: rgba(15,23,42,0.78);
  line-height: 1.6;
}

#nosotros .team-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#nosotros .team-tags span{
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(219,239,225,0.65);
  border: 1px solid rgba(8,167,138,0.18);
  color: rgba(15,23,42,0.85);
  font-weight: 800;
  font-size: .85rem;
}

/* Métricas */
#nosotros .team-metrics{
  display: grid;
  gap: 18px;
}

#nosotros .metric-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  overflow: hidden;
  padding: 16px 16px 18px;
  position: relative;
}

#nosotros .metric-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg, var(--brand-green), rgba(29,97,122,0.75));
  opacity: .95;
}

#nosotros .metric-top{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

#nosotros .metric-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(15,23,42,0.9);
  background: radial-gradient(circle at 30% 30%, rgba(8,167,138,0.18), rgba(29,97,122,0.10));
  border: 1px solid rgba(15,23,42,0.10);
}

#nosotros .metric-title{
  font-weight: 900;
  color: rgba(15,23,42,0.92);
}

#nosotros .metric-sub{
  color: rgba(15,23,42,0.70);
  font-weight: 600;
  font-size: .92rem;
}

#nosotros .metric-number{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: rgba(15,23,42,0.92);
}

#nosotros .metric-plus{
  color: rgba(8,167,138,0.95);
  margin-left: 6px;
}

#nosotros .metric-note{
  color: rgba(15,23,42,0.62);
  font-weight: 600;
  font-size: .9rem;
  padding-left: 4px;
}

/* =========================
   Responsive
========================= */

@media (max-width: 991.98px){
  #nosotros .team-grid{
    grid-template-columns: 1fr;
  }

  #nosotros .team-card{
    grid-template-columns: 160px 1fr;
  }

  #nosotros .team-photo{
    min-height: 160px;
  }
}

@media (max-width: 575.98px){
  #nosotros{
    padding: 50px 0;
  }

  #nosotros .team-card{
    grid-template-columns: 1fr;
  }

  #nosotros .team-photo{
    min-height: 220px;
  }

  #nosotros .team-info{
    padding: 14px 14px 16px;
  }
}
.team-tags a {
  text-decoration: none;
  color: inherit;
}





/* =========================
   FOOTER LOGO REDISEÑO
========================= */

.footer-logo{
  height: 70px;        /* Tamaño ideal desktop */
  width: auto;
  max-width: 100%;
  transition: transform .3s ease;
}

.footer-logo:hover{
  transform: scale(1.05); /* pequeño efecto elegante */
}

/* Tablet */
@media (max-width: 991.98px){
  .footer-logo{
    height: 60px;
  }
}

/* Móvil */
@media (max-width: 575.98px){
  .footer-logo{
    height: 50px;
  }
}