/* === HERO BLOG === */
.hero-blog {
  width: 100%;
  min-height: 350px;
  background: #293842 url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/Vector-HERO.png') no-repeat;
  background-size: 40%;
  background-position: 90% center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 300px;
  text-align: center;
}

.hero-blog-subtitle {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-top: 12px; /* 🔥 espacio entre título y subtítulo */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-blog h1 {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.88px;
  margin: 0;
}

.blog-page {
  background: #fff;
  padding: 100px 20px;
}

.blog-title {
  font-size: 36px;
  color: #293842;
  margin-bottom: 40px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.blog-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.blog-card a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.blog-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.blog-card h2 {
  font-size: 20px;
  margin: 16px;
  color: #293842;
}

.blog-card .date {
  font-size: 14px;
  color: #465F6F;
  margin: 0 16px 8px;
}

.blog-card .excerpt {
  font-size: 15px;
  color: #465F6F;
  margin: 0 16px 16px;
}

.blog-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: block;
}

.blog-header {
  background: #293842;
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 60px; /* ✅ crea espacio entre header y grid */
}

.blog-header h1 {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 44px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 109.091% */
  letter-spacing: -0.88px;
  margin: 0;
}

.blog-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}


/* === BLOG PAGE – Tarjetas estilo landing === */
.blog-archive .lista-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.blog-archive .post-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.blog-archive .post-card:hover {
  transform: scale(1.03);
}

.blog-archive .post-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ✅ Imagen destacada */
.blog-archive .post-card img {
  width: 100% !important;
  height: 247px !important;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  display: block;
}

/* ✅ Títulos */
.blog-archive .post-card h2 {
  color: #293842;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin: 16px;
}

/* ✅ Extracto */
.blog-archive .post-card p {
  color: #465F6F;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  margin: 0 16px 16px;
}

.blog-archive .blog-card-date {
  color: #737373;
  font-size: 14px;
  margin: 0 16px 8px;
}













/* === Bloque Blog en Landing === */
.landing-blog {
  background: #fff;
  padding: 60px 120px;
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
}

.blog-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.blog-tag {
  color: #00B38B;
  font-weight: 700;
  font-size: 20px;
  display: block;
  margin-bottom: 8px;
}

.landing-blog .blog-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;       /* ✅ tamaño más grande */
  font-weight: 700;
  line-height: 40px;     /* ✅ mejor legibilidad */
  letter-spacing: -0.88px;
  color: #293842;
  max-width: 400px;   /* ✅ limita ancho para que corte en dos líneas */
}

.blog-btn {
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  background: #293842;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blog-btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

/* === Grid Cards === */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.blog-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: scale(1.03);
}

.blog-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.landing-blog .blog-thumb {
  display: block !important;
  width: 100% !important;
  height: 247px !important;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* === Tipografía Cards === */
.blog-card-title {
  color: #293842;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin: 16px;
}

.blog-card-date {
  color: #737373;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0 16px 16px;
}









/* === SECCIÓN TESTIMONIOS === */
.landing-testimonios {
  background: #F4F5F6;
  padding: 80px 120px;
}

.testimonios-container {
  max-width: 1441px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 🔥 alinea al top */
  gap: 60px;
}

/* Columna izquierda */
.testimonios-left {
  flex: 1;
}

.testimonios-tag {
  color: #03A07D;
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 2px;
}

.testimonios-title {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
  max-width: 400px;
  margin-top: 0; /* 🔥 elimina cualquier espacio adicional arriba del subtítulo */
}

/* Columna derecha (slider) */
.testimonios-right {
  flex: 2;
  position: relative;
}

.testimonios-slider {
  position: relative;
  overflow: hidden;
  height: 360px;    /* 🔥 asegura altura constante */
}

.testimonio-card {
  opacity: 0;
  transform: translateX(30px); /* 🔥 efecto slide */
  text-align: center;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  min-height: 220px;
  height: auto;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

.testimonio-card.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
  z-index: 1;
}

.testimonio-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Texto del testimonio */
.testimonio-text {
  color: #8B8D98;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: italic;
  line-height: 28px;
  margin-bottom: 20px;
}

/* Nombre del cliente */
.testimonio-nombre {
  color: #293842;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Empresa */
.testimonio-empresa {
  color: rgb(0, 179, 139);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

/* Botones navegación */
.testimonios-nav {
  display: flex;
  flex-direction: row;    /* ✅ botones en fila */
  gap: 14px;              /* ✅ separación exacta */
  justify-content: center;
  margin-top: 20px;
}

.testimonios-nav button {
  width: 48px;
  height: 48px;
  border: 1px solid #00B38B;
  border-radius: 50%;      /* ✅ ahora círculos perfectos */
  background: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.testimonios-nav button svg {
  width: 18px;
  height: 18px;
  stroke: #00B38B;
}

.testimonios-nav button:hover {
  background: rgba(0,179,139,0.05);
  transform: scale(1.1);
}











/* === CONTACTO SECCIÓN === */
.contacto-seccion {
  width: 100%;
  background: url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/imagen-formulario-de-contacto-scaled.webp') center/cover no-repeat;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 775px;  /* 🔥 asegura altura mínima exacta */
  height: auto;       /* mantiene flexibilidad si el contenido crece */
}

/* Overlay oscuro */
.contacto-overlay {
  background: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  padding: 100px 40px;
}

/* Contenedor flex */
.contacto-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 148px;
}

/* Columna Izquierda */
.contacto-info {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;   /* 🔥 Forzamos alineación a la izquierda */
}

.contacto-titulo {
  color: #03A07D;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0px;     /* 🔥 reduce el espacio entre título y subtítulo */
}

.contacto-subtitulo {
  color: #FFF !important;     /* 🔥 Blanco asegurado */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
  text-align: left;           /* 🔥 Forzamos izquierda */
  margin-top: -32px;       /* 🔥 elimina espacio superior */
}

.contacto-texto {
  color: #FFF !important;     /* 🔥 Blanco asegurado */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  text-align: left;           /* 🔥 Forzamos izquierda */
}
/* Datos contacto */
.contacto-datos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dato {
  display: flex;
  align-items: flex-start; /* 🔥 alinea icono con la parte superior del texto */
  gap: 12px;
}

.dato img {
  width: 24px;
  height: 24px;
  margin-top: 6px;  /* 🔥 pequeño ajuste fino si aún no queda perfecto */
}

.dato .label {
  color: #FFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.dato a {
  display: block;
  color: #FFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: underline;
}

/* Card Formulario */
.contacto-form-card {
  width: 568px;
  min-height: 580px;    /* ✅ altura mínima, pero puede crecer */
  height: auto;         /* ✅ permite expansión */
  background: #FFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  overflow: visible;    /* ✅ asegura que no haya scroll interno */
}




/* === Contact Form 7 === */
.contacto-form-card input,
.contacto-form-card textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
}

/* ✅ Solo el campo de mensaje (textarea) */
.contacto-form-card textarea.wpcf7-textarea {
  min-height: 100px;
  max-height: 100px;
  resize: vertical;
}


.contacto-form-card input[type="submit"] {
  background: #00B38B;
  color: #FFF;
  border: none;
  border-radius: 50px;
  padding: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;  /* ✅ para que el mensaje se posicione respecto a la card */
}

.contacto-form-card input[type="submit"]:hover {
  background: #03A07D;
}

.contacto-form-card label {
    display: block;
    text-align: left !important;   /* 🔥 fuerza alineación izquierda */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 550;
    margin-bottom: 12px !important;            /* ✅ separación con el input */
    color: #293842;                /* ✅ color uniforme */
}







/* === ESTILO GLOBAL PARA TODOS LOS FORMULARIOS DE CONTACTO CF7 === */
.wpcf7 {
  display: block;
  width: 100%;
}

.wpcf7 form {
  background: transparent;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wpcf7 input,
.wpcf7 textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: block;
}

.wpcf7 textarea {
  min-height: 100px;
  max-height: 150px;
  resize: vertical;
}

.wpcf7 input[type="submit"] {
  background: #00B38B;
  color: #FFF;
  border: none;
  border-radius: 50px;
  padding: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: #03A07D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.wpcf7-response-output {
  background: #00B38B;
  color: #FFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 10px;
  opacity: 0;               /* 🔥 oculto inicialmente */
  height: 0;                /* 🔥 no ocupa espacio */
  overflow: hidden;         /* 🔥 oculta el contenido mientras está cerrado */
  transition: opacity 0.3s ease, height 0.3s ease;
}


/* ✅ Cuando se envía correctamente */
.wpcf7 form.sent .wpcf7-response-output {
  opacity: 1;
  height: auto;             /* 🔥 el contenedor crece suavemente */
  margin-top: 15px;
}

/* ✅ Cuando hay errores de validación */
.wpcf7 form.invalid .wpcf7-response-output {
  opacity: 1;
  height: auto;
  margin-top: 15px;
  background: #E74C3C;      /* 🔥 rojo para errores */
}



/* === FORMULARIO GENERAL (usado en páginas internas) === */
.formulario-seccion {
  width: 100%;
  background: #F4F5F6;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.formulario-general {
  max-width: 600px;
  width: 100%;
  background: #FFF;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Inputs y botón dentro del formulario general */
.formulario-general .wpcf7 input,
.formulario-general .wpcf7 textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
}

.formulario-general .wpcf7 input[type="submit"] {
  background: #00B38B;
  color: #FFF;
  border: none;
  border-radius: 50px;
  padding: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.formulario-general .wpcf7 input[type="submit"]:hover {
  background: #03A07D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
















/* === FOOTER === */
.footer-seccion {
  background: #293842;
  width: 100%;
  padding: 20px 120px;   /* 🔥 antes 60px */
}

/* Contenedor principal */
.footer-container {
  max-width: 1441px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* Columna Izquierda */
.footer-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo {
  width: 80px;
  height: auto;
  margin-top: 10px;
  margin-bottom: 0px;  /* 🔥 agrega espacio entre logo y slogan */
}

.footer-slogan {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #FFF;
  text-decoration: none;        /* 🔥 elimina subrayado */
  transition: none;             /* 🔥 elimina animaciones */
}


.footer-redes {
  display: flex;
  gap: 14px;
}

.footer-redes img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.footer-redes a:hover img {
  transform: scale(1.1);
}

/* Columna Central */
.footer-middle {
  flex: 1;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 10px;
}

.footer-links a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #FFF;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #00B38B;
}

/* Columna Derecha */
.footer-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.footer-right h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFF;
  margin-bottom: 8px;
}

.footer-right p,
.footer-right a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #FFF;
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}










/* === HERO PAGE-SERVICIOS === */
.hero-servicios {
  width: 100%;
  min-height: 350px;
  background: #293842 url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/Vector-HERO.png') no-repeat;
    background-size: 40%;            /* 🔥 reduce el tamaño de la imagen */
    background-position: 90% center; /* 🔥 mueve la imagen más a la derecha */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 300px;  /* 🔥 paddings según Figma */
  text-align: center;
}

.hero-servicios-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-servicios h1 {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.88px;
  margin-bottom: 18px; /* 🔥 gap con párrafo */
}

.hero-servicios p {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}




/* === PÁGINA SERVICIOS === */
.servicios-page {
  background: #F4F5F6;
  width: 100%;
  padding: 80px 120px 106px;
}

/* Header */
.servicios-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 40px;
}
.servicios-page-titulo {
  color: #03A07D;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  margin-bottom: 5px;
}
.servicios-page-subtitulo {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
}

/* Grid exclusivo */
.servicios-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 134px;
}

/* CTA exclusivo */
.servicios-page-cta {
  width: 1200px;
  background: #DEF2F1;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
}
.servicios-page-cta p {
  color: #293842;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;   /* 🔥 altura de línea proporcional */
  margin: 0;          /* 🔥 elimina márgenes que lo mueven */
  display: flex;      
  align-items: center; /* 🔥 centra verticalmente el texto dentro del contenedor */
}
.cta-page-btn {
  background: #293842;
  color: #FFF;
  padding: 12px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-page-btn:hover {
  background: #03A07D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}




/* === SERVICIO DESTACADO === */
.servicio-destacado {
  background: #FFF;
  padding: 146px 120px 90px;
}

.servicio-destacado-container {
  display: flex;
  justify-content: space-between;
  gap: 204px;   /* ✅ espacio entre columnas */
  align-items: flex-start; /* ✅ alinea top de imagen con título */
}

/* Columna Izquierda */
.servicio-destacado-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.destacado-titulo {
  color: #03A07D;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  margin-bottom: 8px;
}

.destacado-subtitulo {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  line-height: 40px;
}

.destacado-parrafo {
  color: #293842;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}

/* Más espacio antes del primer checkpoint */
.servicio-destacado-texto .check-item:first-of-type {
  margin-top: 40px;  /* 🔥 ajusta el valor según necesites */
}

/* Checkpoints */
.check-item {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease;  /* ✅ animación suave */
  transform-origin: left center;    /* ✅ escala desde el lado izquierdo */
}



/* ✅ Efecto hover */
.check-item:hover {
  transform: scale(1.05);          /* ✅ agranda un 5% */
}



.check-item img {
  width: 20px;
  height: 20px;
}

.check-item span {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #293842;
}

.servicio-destacado hr {
  border: none;
  border-top: 1px solid #B9BBC6;
  margin: 16px 0;
}

/* Columna Derecha */
.servicio-destacado-imagen img {
  width: 408px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}


















/* === HERO PAGE-CASOS === */
.hero-casos {
  width: 100%;
  min-height: 350px;
  background: #293842 url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/Vector-HERO.png') no-repeat;
  background-size: 40%;            /* 🔥 mantiene el tamaño reducido */
  background-position: 90% center; /* 🔥 imagen a la derecha */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 300px;  /* 🔥 paddings iguales a servicios */
  text-align: center;
}

.hero-casos-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-casos h1 {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.88px;
  margin-bottom: 18px; /* 🔥 gap con párrafo */
}

.hero-casos p {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}







/* === CONTENEDOR GENERAL DEL CASO === */
.caso-item {
  padding: 48px 120px;
}

/* === IMAGEN PRINCIPAL === */
.caso-imagen {
  width: 1200px;
  height: 380px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 40px; /* ✅ eliminamos auto para alineación */
}

/* === CONTENIDO FLEX === */
.caso-contenido {
  display: flex;
  justify-content: space-between;
  gap: 126px; /* 🔥 gap entre columnas */
  align-items: flex-start;
}

/* === COLUMNA IZQUIERDA === */
.caso-left {
  flex: 1;
}

.caso-overline {
  color: #03A07D;
  font-family: "Plus Jakarta Sans";
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.9px;
  margin-bottom: 12px;
}

.caso-titulo {
  color: #2F4858;
  font-family: "Plus Jakarta Sans";
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
  margin-bottom: 24px;
}

.caso-descripcion {
  color: #293842;
  font-family: "Plus Jakarta Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

/* === COLUMNA DERECHA === */
.caso-right {
  flex: 1;
}

.caso-subtitulo {
  color: #293842;
  font-family: "Plus Jakarta Sans";
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 16px;
}

/* === LISTA === */
.caso-lista {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 50px;
}

.caso-lista li {
  color: #293842;
  font-family: "Plus Jakarta Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 8px;
}

/* === CAJA RESULTADOS === */
.caso-resultados {
  background: #DEF2F1;
  border-radius: 8px;
  padding: 24px;
}

.caso-resultados h4 {
  color: #00B38B;
  font-family: "Plus Jakarta Sans";
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 16px;
}

.caso-resultados p {
  color: #293842;
  font-family: "Plus Jakarta Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.caso-item ul {
  list-style: none;
  margin: 0;              /* 🔥 elimina margen por defecto del ul */
  padding: 0;             /* 🔥 asegura que arranque al borde */
}

.caso-item ul li {
  position: relative;
  padding-left: 22px;     /* 🔥 espacio justo para el círculo */
  margin: 0 0 10px 0;     /* espacio entre ítems */
}

.caso-item ul li::before {
  content: "•";
  position: absolute;
  left: 0;                /* 🔥 alinea exactamente al borde izquierdo del ul */
  top: 5px;               /* ajusta verticalmente si es necesario */
  font-size: 20px;
  color: #293842;
  line-height: 1;
}

.caso-lista li:last-child {
  margin-bottom: 50px; /* 🔥 ajusta el valor según el gap que necesites */
}


















/* === HERO PAGE-QUIENES === */
.hero-quienes {
  width: 100%;
  min-height: 350px;
  background: #293842 url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/Vector-HERO.png') no-repeat;
  background-size: 40%;
  background-position: 90% center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 300px;
  text-align: center;
  position: relative;  /* ✅ necesario para superposición */
  overflow: visible;   /* ✅ deja que la imagen salga */
  z-index: 5;
}

.hero-quienes-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-quienes h1 {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.96px;
  margin-bottom: 18px;
}

.hero-quienes p {
  color: #FFF;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

/* ✅ Imagen superpuesta */
.quienes-overlap {
  position: absolute;
  top: calc(100% - 92px);
  left: 50%;
  transform: translateX(-50%);
  width: 1199px;
  height: auto;
  border-radius: 8px;
  z-index: 10;  /* ⬅️ la imagen siempre arriba */
}

/* ✅ Animación fade-in solo para la imagen superpuesta */
.quienes-overlap.fade-in {
  opacity: 0;
  transform: translate(-50%, 30px);   /* mantiene el X y anima el Y */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.quienes-overlap.fade-in.visible {
  opacity: 1;
  transform: translate(-50%, 0);      /* vuelve solo el Y */
}











/* === SOBRE A1 COMUNICACIÓN === */
.sobre-a1 {
  width: 100%;
  background: #FFFFFF;
  padding: 500px 160px 60px 160px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;   /* ⬅️ debajo de la imagen */
}

.sobre-a1-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start; /* ✅ asegura que la parte superior coincida */
  gap: 80px;
}

/* ✅ Columna izquierda */
.sobre-a1-col.izquierda h3 {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
  margin-top: 0px;
  max-width: 486px;     /* ✅ evita que se pase de ese ancho */
  white-space: nowrap;  /* ✅ fuerza que quede en un solo renglón */
}


/* ✅ Columna derecha */
.sobre-a1-col.derecha p {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 20px;
}










/* === SOBRE SU FUNDADORA === */
.fundadora {
  width: 100%;
  background: #F4F5F6;
}

.fundadora-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 146px 160px 165px 120px; /* ✅ padding top, right, bottom, left */
  gap: 160px;                      /* ✅ gap entre columnas */
}

/* ✅ Columna Izquierda */
.fundadora-col.izquierda {
  flex: 1;
}

.fundadora-titulo {
  color: #03A07D;
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.fundadora-subtitulo {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  margin-bottom: 24px;
}

.fundadora-col.izquierda p {
  color: #293842;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 20px;
}

/* ✅ Columna Derecha */
.fundadora-col.derecha {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen */
.fundadora-foto-container {
  position: relative;
  display: inline-block;
}

.fundadora-foto {
  width: 320px;       /* ajustable según Figma */
  height: auto;
  border-radius: 8px;
}







/* === CONTADOR === */
.contador {
  width: 100%;
  background: #293842;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;                  /* ⬅️ empieza invisible */
  transform: translateY(20px); /* ⬅️ leve desplazamiento */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ✅ cuando se activa, aparece */
.contador.visible {
  opacity: 1;
  transform: translateY(0);
}

.contador-container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px;
}

.contador-item {
  text-align: center;
  color: #FFF;
}

.contador-item .contador-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.64px;
  display: inline-block;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.simbolo {
  font-size: 32px;
  font-weight: 700;
  margin-left: 2px;
}

.contador-item p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-top: 6px;
}
















/* === TIMELINE === */
.timeline {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px;
}

.timeline-title {
  color: #2F4858;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

.timeline-items {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Cada item: punto a la izquierda, textos a la derecha */
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Puntos verdes */
.timeline-dot {
  width: 16px;
  height: 16px;
  background: #00B38B;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  margin-top: 12px; /* ✅ ajusta fino si es necesario */
  transform: translateX(30px) scale(0.6); /* ✅ mueve solo el punto */
}


/* Año */
.timeline-year {
  color: #00B38B;
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.56px;
  margin-bottom: 4px;
  align-items: center;
}

/* Texto */
.timeline-text {
  color: #293842;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  max-width: 550px;
}

.timeline-dot.active {
  transform: scale(1.3);
}

.timeline-item > div {
  margin-left: 40px; /* ✅ mueve todos los textos a la derecha */
}












/* === ANIMACIÓN FADE-IN PARA TODAS LAS SECCIONES === */
.fade-in {
  opacity: 0;                     /* ⬅️ Comienza invisible */
  transform: translateY(30px);    /* ⬅️ Leve desplazamiento hacia abajo */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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











/* COMIENZO DE CODIGO RESPONSIVE - CANCELACION DE SCROLL HORIZONTAL* */
html, body {
  overflow-x: hidden;
}

img, iframe, video, .wp-block-image img, .decoracion {
  max-width: 100%;
  height: auto;
  display: block;
}

.propuesta-container, .hero, .contacto-container {
  max-width: 100%;
  overflow-x: hidden;
}









/* =============================
   📌 TABLET – max-width:900px
   ============================= */

@media (max-width: 900px) {
  .footer-container { flex-direction: column; gap: 40px; }
  .contacto-container { flex-direction: column; gap: 40px; }
  .contacto-form-card { width: 100%; }
}

/* ✅ CTA responsive para tablet */
@media (max-width: 1024px) {
  .servicios-page-cta {
    width: 90%;             /* 🔥 ocupa casi todo el ancho */
    padding: 24px 16px;     /* 🔥 reduce padding */
    flex-direction: column; /* 🔥 texto arriba, botón abajo */
    text-align: center;     /* 🔥 centra el texto */
    gap: 16px;              /* 🔥 espacio entre texto y botón */
    margin: 0 auto;         /* 🔥 centra el bloque */
  }

  .servicios-page-cta p {
    font-size: 18px;        /* 🔥 texto un poco más chico */
    justify-content: center;
  }

  .cta-page-btn {
    align-self: center;     /* 🔥 botón centrado */
  }
}



/* =============================
   📌 TABLET – max-width:921px
   ============================= */

@media (max-width: 921px) {

  /* Header Mobile */
  .main-header-bar { display: none !important; }
  .ast-mobile-header-wrap {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 10px 20px;
    width: 100%;
    z-index: 9999;
    position: relative;
  }
  .ast-mobile-header-logo img { max-height: 55px; width: auto; }
  .menu-toggle { font-size: 28px; background: transparent; border: none; cursor: pointer; }
  .ast-mobile-header-wrap .main-header-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #E0E0E0;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px 0;
  }
  .ast-mobile-header-wrap .main-header-menu.menu-abierto { display: flex; }
  .ast-mobile-header-wrap .main-header-menu li a {
    padding: 12px 20px;
    font-size: 16px;
    color: #293842;
  }
  .ast-mobile-header-wrap .main-header-menu li:last-child a {
    background: #00B38B;
    color: #fff;
    border-radius: 100px;
    margin: 10px;
  }
  .main-header-menu.menu-abierto { display: block !important; }


  
  

  /* Servicios */
  .servicios-seccion { padding: 40px 20px; }
  .servicios-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .servicios-grid { grid-template-columns: 1fr; }

  /* Quiénes somos */
  .quienes-container { flex-direction: column; gap: 40px; padding: 40px 20px; }
  .quienes-col.derecha img { width: 100%; height: auto; }

  /* Casos de éxito */
  .casos-exito { padding: 60px 20px; }
  .casos-grid { flex-direction: column; align-items: center; }
}


/* =============================
   📌 DESKTOP – min-width:922px
   ============================= */

/* 🔥 Este bloque puede estar afectando el HERO en desktop */
@media (min-width: 922px) {
  .main-header-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 15px 40px !important;  /* ← puede empujar contenido */
    min-height: 100px;             /* ← puede alterar el HERO */
    position: sticky;              /* ← puede superponerse */
    top: 0;
    z-index: 9999;
  }
  .ast-mobile-header-wrap { display: none !important; }
}


/* =============================
   📌 EXTRAS SIN MEDIA QUERY
   ============================= */
.servicio-box, .caso-box {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.hero-plus-rotante { display: none; }

/* Animaciones */
@keyframes fadeInLeft   { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeInUp     { from { transform: translateY(30px); opacity: 0; }  to { transform: translateY(0); opacity: 1; } }
@keyframes fadeInRight  { from { transform: translateX(50px); opacity: 0; }  to { transform: translateX(0); opacity: 1; } }
@keyframes heroFadeInMove {
  0% { transform: translate(50px, -50%) scale(0.9); opacity: 0; }
  100% { transform: translate(0, -50%) scale(1); opacity: 1; }
}











/* =============================
   HEADER MOBILE/TABLET – ESTILO FIGMA (CORREGIDO)
   ============================= */
@media (max-width: 921px) {
  /* Ocultar header desktop */
  .main-header-bar { display: none !important; }

  /* Contenedor header */
  .ast-mobile-header-wrap {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 12px 20px;
    width: 100%;
    position: relative;
    z-index: 9999;
  }

  /* Logo mobile */
  .ast-mobile-header-logo img {
    max-height: 55px;
    width: auto;
  }

  /* Botón hamburguesa */
  .menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .menu-toggle img {
    width: 20px;
    height: 20px;
    pointer-events: none; /* evita highlight en la imagen */
  }

  /* Estado abierto → icono X */
  .menu-toggle.activo img {
    content: url('https://a1comunicacion.com.ar/wp-content/uploads/2025/08/Icon.svg');
  }

  /* Estado cerrado → icono hamburguesa */
  .menu-toggle img {
    content: url('https://a1comunicacion.com.ar/wp-content/uploads/2025/08/menu.svg');
  }

  /* Menú desplegable */
  .ast-mobile-header-wrap .main-header-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #E0E0E0;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 20px;
    gap: 32px; /* gap entre items */
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    align-items: flex-start; /* ✅ ahora todo el menú alineado a la izquierda */
    text-align: left;
  }

  /* Menú abierto */
  .ast-mobile-header-wrap .main-header-menu.menu-abierto {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  /* Items del menú */
  .ast-mobile-header-wrap .main-header-menu li {
    list-style: none;
    width: 100%;
    text-align: left;
  }

  .ast-mobile-header-wrap .main-header-menu li a {
    color: #293842; /* var(--Secondary-Color) */
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    display: block;
    text-align: left;  /* ✅ fuerza alineación a la izquierda */
    width: 100%;
  }

  /* Espacio antes del botón Contacto */
  .ast-mobile-header-wrap .main-header-menu li:last-child {
    margin-top: 48px;
    display: flex;
    justify-content: center; /* ✅ botón centrado */
  }

  /* Botón Contacto */
  .ast-mobile-header-wrap .main-header-menu li:last-child a {
    background: #00B38B; /* var(--Primary-Color) */
    color: #fff; /* var(--Generic-White) */
    border-radius: 100px;
    padding: 12px 20px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
  }
}

/* Elimina highlight nativo */
.menu-toggle {
  background: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden; /* para que el efecto no se salga */
}

/* Nuestro highlight verde custom */
.menu-toggle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,179,139,0.3); /* verde corporativo */
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 50%;
}

/* Activo: se muestra highlight */
.menu-toggle.tapped::after {
  opacity: 1;
}









/* =========================================
   ✅ HERO – Mobile Final (max-width: 480px)
   ========================================= */
@media (max-width: 480px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 54px 20px 24px 20px;
    background: #293842;
    gap: 24px;
  }

  .hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .hero .textos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    margin: 0 auto 25px auto;
    width: 100%;
    max-width: 100%;
  }

  .hero .textos h1 {
    color: #FFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.64px;
    margin-bottom: 22px;
  }

  .hero .textos .body-large {
    color: #FFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 42px;
  }

  /* ✅ Botón CTA */
  .hero .hero-cta-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0px !important;
  }

  .hero .hero-cta-group a.hero-button {
    background: #00B38B;
    padding: 12px 20px;
    border-radius: 100px;
    color: #FFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
  }

  .hero .hero-circle { display: none; }

  /* ✅ Texto final */
  .hero .texto-secundario {
    white-space: nowrap;
    display: inline-block;
    color: #FFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    width: auto;
  }

  /* ✅ Ocultar elementos desktop */
  .hero .plus-desktop,
  .hero .decoracion { display: none; }
}
















/* =========================================
   ✅ PROPUESTA DE VALOR – Mobile (max 480px)
   ========================================= */
@media (max-width: 480px) {
  .propuesta-valor {
    background: #FFF;
    padding: 36px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .propuesta-container {
    display: flex;
    flex-direction: column;   /* ✅ Mobile en columna */
    gap: 32px;                /* 🔥 separación entre texto y checks */
    width: 100%;
    max-width: 375px;
  }

  /* ✅ Columna Izquierda */
  .propuesta-col.izquierda h3 {
    color: #293842;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 24px;      /* GAP con párrafo */
  }

  .propuesta-col.izquierda .body-large {
    color: #293842;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;                /* ya controlamos el gap con container */
  }

  /* ✅ Columna Derecha (checks) */
  .propuesta-col.derecha {
    display: flex;
    flex-direction: column;
    gap: 18px;                /* GAP entre ítem y línea divisoria */
  }
  
  .propuesta-col.derecha {
    overflow: visible !important;  /* ✅ elimina scroll interno */
    height: auto !important;       /* ✅ se adapta al contenido */
    max-height: none !important;   /* ✅ sin límites */
}

  .propuesta-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;                /* 🔥 GAP entre icono y texto */
  }

  .propuesta-item img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .propuesta-item p {
    color: #293842;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
  }

  /* ✅ Línea divisoria */
  .propuesta-col.derecha hr {
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 0;                /* la separación se maneja con gap */
  }
}





@media (max-width: 921px) {
  /* 🔥 Anular restricciones del contenedor de Astra */
  .ast-container, .site-content, .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}




@media (max-width: 480px) {
  /* === CONTENEDOR GENERAL === */
  .quienes-home {
    background: #FFF;
    padding: 36px 20px;
    max-width: 375px;
    margin: 0 auto;
  }

  .quienes-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* === TITULO Y SUBTITULO === */
  .quienes-titulo {
    color: #03A07D;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    margin-bottom: 0px;
  }

  .quienes-subtitulo {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 24px;
  }

  /* === IMAGEN === */
  .quienes-img {
    width: 100%;
    height: 297px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 24px;
  }

  /* === PÁRRAFOS === */
  .quienes-texto {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 24px;
  }

  /* === BOTONES === */
  .quienes-botones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
  }

  .btn-contacto,
  .btn-mas {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
    text-decoration: none;
  }

  .btn-contacto {
    width: 158px;
    background: #00B38B;
  }

  .btn-mas {
    background: #293842;
  }
  
  .quienes-col.derecha {
    display: none; /* 🔥 oculta el contenedor de la imagen en mobile */
  }
  
  .quienes-botones {
    display: flex;
    flex-direction: row;     /* 🔥 fuerza alineación horizontal */
    flex-wrap: nowrap;       /* 🔥 no permite salto de línea */
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .btn-contacto,
  .btn-mas {
    flex: 1;                 /* 🔥 ambos botones ocupan el mismo ancho */
    padding: 12px 0;         /* 🔥 mantiene altura correcta */
    text-align: center;
  }

  .btn-contacto {
    width: auto;             /* 🔥 elimina el ancho fijo de 158px */
  }
}








@media (max-width: 480px) {
  /* === TESTIMONIOS - CONTENEDOR GENERAL === */
  .landing-testimonios {
    background: #F4F5F6;
    padding: 36px 20px;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
  }

  .testimonios-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* === TAG "TESTIMONIOS" === */
  .testimonios-tag {
    color: #03A07D;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
  }

  /* === TITULO === */
  .testimonios-title {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
    margin-bottom: 24px;
  }

  /* === CARD DE TESTIMONIO === */
  .testimonio-card {
    background: #FFF;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .testimonio-text {
    color: #8B8D98;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 24px;
  }

  .testimonio-nombre {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px;
  }

  .testimonio-empresa {
    color: #8B8D98;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  /* === BOTONES DE NAVEGACIÓN === */
  .testimonios-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
  }

  .testimonios-nav button {
    width: 48px;
    height: 48px;
    border: 1px solid #00B38B;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .testimonios-nav button:hover {
    background: rgba(0, 179, 139, 0.1);
  }

  .testimonios-nav svg {
    width: 18.8px;
    height: 18.8px;
    stroke: #00B38B;
  }
}

/* === FIX mobile: que siempre entren nombre + cargo/empresa === */
@media (max-width: 480px) {
  /* El contenedor del slide necesita más alto en mobile */
  .testimonios-slider{
    min-height: 420px; /* subilo si tenés un testimonio MUY largo (450–480) */
  }

  /* La card puede ser un poco más compacta */
  .testimonio-card{
    padding: 20px;
    gap: 16px;
    min-height: 360px; /* ayuda a que siempre entre el bloque completo */
  }

  /* Texto del testimonio un poquito más chico */
  .testimonio-text{
    font-size: 15px;
    line-height: 22px;
  }

  /* Nombre */
  .testimonio-nombre{
    font-size: 16px;
    margin-bottom: 2px;
  }

  /* Cargo | Empresa (que SIEMPRE se vea) */
  .testimonio-empresa{
    display: block;               /* por si algún estilo lo colapsa */
    font-size: 14px;
    line-height: 20px;
    color: rgb(0,179,139);        /* verde pedido */
    margin-top: 0;
  }
}














@media (max-width: 480px) {
  /* === CONTENEDOR GENERAL BLOG === */
  .landing-blog {
    background: #fff;
    padding: 36px 20px;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
  }

  .blog-container {
    display: flex;
    flex-direction: column;
    gap: 24px; /* 🔥 separación similar a testimonios */
  }

  /* === HEADER DEL BLOG === */
  .blog-header-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .blog-tag {
    color: #03A07D;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .blog-title {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
    margin: 0;
  }

  /* Botón "Explorá más notas" */
  .blog-btn {
    background: #293842;
    color: #fff;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    padding: 12px 16px;
    border-radius: 100px;
    text-decoration: none;
    align-self: flex-start; /* ✅ ahora se alinea a la izquierda */
    transition: background 0.3s ease;
}

  .blog-btn:hover { background: #00B38B; }

  /* === GRID DE NOTAS === */
  .blog-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* === CARD DE NOTA === */
  .blog-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .blog-card a {
    text-decoration: none;
    display: block;
  }

  .blog-thumb {
    width: 100%;
    height: auto;
    display: block;
  }

  .blog-card-title {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    padding: 16px;
    margin: 0;
  }

  .blog-card-date {
    color: #8B8D98;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 0 16px 16px 16px;
    margin: 0;
  }
}






@media (max-width: 480px) {
  /* === HERO PÁGINAS INTERNAS (centrado real) === */
  .hero-servicios,
  .hero-quienes,
  .hero-casos,
  .hero-blog {
    display: flex;
    justify-content: center;     /* ✅ centra vertical */
    align-items: center;         /* ✅ centra horizontal */
    padding: 64px 20px;          /* 🔥 espacio superior/inferior */
    background: #293842;         /* var(--Secondary-Color) */
    min-height: 300px;           /* 🔥 asegura altura mínima visible */
    width: 100%;
    text-align: center;          /* ✅ asegura centrado de texto */
  }

  /* === CONTENEDOR DE TEXTO === */
  .hero-servicios-content,
  .hero-quienes-content,
  .hero-casos-content,
  .hero-blog-content {
    max-width: 375px;            /* 🔥 ancho controlado */
    display: flex;
    flex-direction: column;
    justify-content: center;     /* ✅ centra vertical dentro del bloque */
    align-items: center;         /* ✅ centra horizontal */
    gap: 18px;
    margin: 0 auto;
  }

  /* === TITULOS === */
  .hero-servicios h1,
  .hero-quienes h1,
  .hero-casos h1,
  .hero-blog h1 {
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;  /* 125% */
    letter-spacing: -0.64px;
    margin: 0;
    text-align: center;
  }

  /* === PARRAFOS === */
  .hero-servicios p,
  .hero-quienes p,
  .hero-casos p,
  .hero-blog p {
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;  /* 150% */
    margin: 0;
    text-align: center;
  }
}






/* ============================
   SECCIÓN SERVICIOS (Mobile 480px)
   ============================ */
@media (max-width: 480px) {

  /* Contenedor general */
  .servicios-page {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 36px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;   /* 🔥 antes 24px, ahora más compacto */
    background: var(--Background, #F4F5F6);
  }

  /* Título */
  .servicios-page-titulo {
    color: var(--Darker-Primary-Color, #03A07D);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    margin-top: 16px;
    margin-bottom: 0px;
  }

  /* Subtítulo */
  .servicios-page-subtitulo {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 0;   /* 🔥 se elimina el margen extra */
  }

  /* Grid en columna */
  .servicios-page-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;  /* mantiene la separación entre cajas */
    width: 100%;
  }

  /* Caja de servicio */
  .servicio-box {
    display: flex;
    flex-direction: column;
    padding: 24px;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.05);
  }

  /* Contenedor número + badge para cajas con "Nuevo!" */
  .servicio-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
  }

  /* Número */
  .numero {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
  }

  /* Badge "Nuevo!" */
  .badge-nuevo {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 6.9px;
    border-radius: 4px;
    background: var(--Accent, #DEF2F1);
    color: var(--Primary-Color, #00B38B);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20.7px;
  }

  /* Línea divisoria */
  .servicio-box hr {
    width: 100%;
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 0;
  }

  /* Título del servicio */
  .servicio-box h3 {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
  }

  /* Párrafo */
  .servicio-box p {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
  }

  /* ✅ CTA */
  .servicios-page-cta {
    display: flex;
    flex-direction: column;
    padding: 32px;
    align-items: center;
    gap: 24px;
    border-radius: 16px;
    background: #DEF2F1;
    margin-top: 0;   /* 🔥 se elimina margen adicional */
    text-align: center;
  }

  .servicios-page-cta p {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin: 0;
  }

  /* Botón CTA */
  .cta-page-btn {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #03A07D;
    border-radius: 8px;
    color: #FFF;
    text-align: center;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
  }
  
  /* 🔥 Elimina margen inferior de la última caja */
  .servicios-page-grid .servicio-box:last-child {
    margin-bottom: 0 !important;
  }

  /* 🔥 Reduce cualquier padding innecesario del grid */
  .servicios-page-grid {
    padding-bottom: 0 !important;
  }

  /* 🔥 CTA sin margen extra */
  .servicios-page-cta {
    margin-top: 0px;  /* antes 0 o 24px → ahora mucho más ajustado */
  }
  
}



/* Fix gap Servicios → CTA (mobile) */
@media (max-width: 480px) {
  /* pisa posibles márgenes de desktop */
  .servicios-page .servicios-page-cta {
    margin-top: 20px !important;   /* antes heredaba 64/96px en desktop */
  }

  /* por si el grid quedó con margen inferior en desktop */
  .servicios-page-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .servicios-page-grid > .servicio-box:last-child {
    margin-bottom: 0 !important;
  }

  /* opcional: compactar un poco más la sección */
  .servicios-page { gap: 12px; padding-bottom: 20px; }
  .servicios-page-cta { padding-top: 24px; padding-bottom: 24px; gap: 16px; }
}








/* ============================
   SERVICIO DESTACADO (Mobile)
   ============================ */
@media (max-width: 480px) {
  .servicio-destacado {
    padding: 36px 20px 0 20px;   /* mismo padding que el resto */
  }

  /* Rompe la grilla de desktop y ocupa todo el ancho */
  .servicio-destacado-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100% !important;
    max-width: none !important;      /* pisa max-width estrecho de desktop */
    margin: 0 auto !important;
  }

  /* Columna de texto: ancho completo, alineado a la izquierda */
  .servicio-destacado-texto {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .destacado-titulo {
    color: var(--Primary-Color, #00B38B);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.8px;
    margin: 0 0 12px 0;
  }

  .destacado-subtitulo {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 32px;      /* ajusto a hero mobile */
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.64px;
    margin: 0 0 12px 0;
  }

  .destacado-parrafo {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 12px 0;
  }

  .check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0;
  }
  .check-item img { width: 20px; height: 20px; flex: 0 0 20px; }

  /* Imagen: full width, sin límites heredados */
  .servicio-destacado-imagen,
  .servicio-destacado-imagen img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 12px;
    display: block;
  }
}

@media (max-width: 480px) {
  .check-item {
    display: flex;
    align-items: flex-start; /* 🔥 Alinea al tope, no al centro */
    gap: 8px;
  }

  .check-item img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 3px; /* 🔥 Ajuste fino para que coincida con el primer renglón */
  }
}











/* QUIÉNES SOMOS – Imagen despues del HERO */
@media (max-width: 768px) {
  .quienes-overlap {
    top: calc(100% - 40px) !important; /* antes -92px, ahora baja más */
  }
}

/* QUIÉNES SOMOS – Sobre A1 (mobile) */
@media (max-width: 768px) {
  .sobre-a1 {
    padding: 20px; /* gutter lateral */
  }

  .sobre-a1-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    max-width: none;
    background: #FFF;                 /* tarjeta blanca */
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 20px;                    /* padding interno de la tarjeta */
  }

  .sobre-a1-col.izquierda {
    margin: 0;
  }

  .sobre-a1-col.izquierda h3 {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;                  /* título mobile */
    font-weight: 700;
    line-height: 28px;
    margin: 0 0 8px 0;
  }

  .sobre-a1-col.derecha {
    margin: 0;
  }

  .sobre-a1-col.derecha p {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 12px 0;               /* espacio entre párrafos */
  }
}

@media (max-width: 768px) {
  .sobre-a1 {
    margin-top: 140px; /* 🔥 ajustá este valor hasta que el texto quede debajo de la imagen */
  }
}


/* QUIÉNES SOMOS – Sobre su fundadora (mobile) */
@media (max-width: 768px) {
  .fundadora {
    padding: 20px;
  }

  .fundadora-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    background: #FFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 20px;
  }

  .fundadora-col.izquierda {
    order: 1;
    width: 100% !important;
  }

  .fundadora-col.izquierda h4 {
    color: var(--Primary-Color, #00B38B);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 8px 0;
  }

  .fundadora-col.izquierda h3 {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin: 0 0 12px 0;
  }

  .fundadora-col.izquierda p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 12px 0;
  }

  .fundadora-col.derecha {
    order: 2;
    width: 100% !important;
  }

  .fundadora-foto-container {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }

  .fundadora-foto-container img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Contador encima de la imagen */
  .fundadora-foto-container .contador-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #1D1D1D;
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
  }
}



/* QUIÉNES – Contadores: 1 por renglón (mobile) */
@media (max-width: 768px) {
  .contador {
    width: 100%;
    margin: 0;
    background: #293842;
    padding: 24px 20px;
  }

  .contador-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    align-items: center;            /* centra cada item */
  }

  .contador-item {
    position: static !important;    /* cancela cualquier absolute */
    transform: none !important;
    left: auto !important; top: auto !important;
    text-align: center;
    color: #FFF;
    width: 100%;
    padding: 4px 0;
  }

  /* Línea del valor (+ y número en la misma línea, alineados por base) */
  .contador-item .simbolo {
    display: inline-block;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    vertical-align: baseline;
    margin-right: 6px;
  }
  .contador-item .contador-num {
    display: inline-block;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    vertical-align: baseline;
  }

  /* Texto debajo */
  .contador-item p {
    margin: 6px 0 0 0;
    font-size: 14px;
    line-height: 18px;
  }

  /* Separador sutil entre ítems (opcional, borralo si no lo querés) */
  .contador-item + .contador-item {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 16px;
  }
}

/* Ocultar contadores SOLO en mobile en "Quiénes Somos" */
@media (max-width: 768px) {
  /* 1) Regla estructural: el bloque contador después de .fundadora */
  .fundadora + .contador { 
    display: none !important; 
  }

  /* 2) Por si preferís por clase de body (según WP a veces trae -php) */
  body.page-template-page-quienes-somos-php .contador,
  body.page-template-page-quienes-somos .contador {
    display: none !important;
  }
}













/* CASOS — corregir padding y ancho de la imagen en mobile */

/* Opción A — Recomendada: margen al bloque de texto */
@media (max-width: 768px) {
  .casos-page .caso-item .caso-contenido {
    margin-top: 16px !important;   /* poné 24px si Figma lo pide */
  }
}

@media (max-width: 768px) {
  .casos-page .caso-item {
    padding: 24px 20px !important;   /* antes 48/120/120/48 */
    box-sizing: border-box;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .casos-page .caso-item > img.caso-imagen {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;        /* según Figma */
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
}


/* CASOS – bloque de contenido bajo la imagen (mobile) */
@media (max-width: 768px) {
  .casos-page .caso-item .caso-contenido {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;                 /* separación base */
    padding: 0 20px 24px !important;      /* gutter y respiro inferior */
  }

  /* CLIENTE */
  .casos-page .caso-contenido .caso-label,
  .casos-page .caso-contenido .cliente-label {
    color: #03A07D;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0 0 8px;                      /* GAP 8px */
  }

  /* Cámara Argentina Fintech (H4) */
  .casos-page .caso-contenido .caso-titulo,
  .casos-page .caso-contenido h3:first-of-type {
    color: #2F4858;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin: 0;
  }

  /* Párrafo descriptivo */
  .casos-page .caso-contenido .caso-descripcion {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 12px 0 24px;                  /* deja 24px antes del H5 */
  }

  /* ¿Qué hicimos? (H5) */
  .casos-page .caso-contenido .caso-subtitulo,
  .casos-page .caso-contenido h5 {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin: 0 0 8px;                      /* GAP 8px */
  }

  /* Lista con viñeta circular */
  .casos-page .caso-contenido ul {
    list-style: none;
    margin: 0 0 32px;                     /* GAP 32px antes del card */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .casos-page .caso-contenido ul li {
    position: relative;
    padding-left: 20px;
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;                      /* Body/Small */
    font-weight: 400;
    line-height: 20px;
  }
  .casos-page .caso-contenido ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;                           /* alinea con 1er renglón */
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--Secondary-Color, #293842);
  }

  /* Card RESULTADOS */
  .casos-page .caso-resultados {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 8px;
    background: var(--Accent, #DEF2F1);
  }
  .casos-page .caso-resultados .titulo {
    color: var(--Primary-Color, #00B38B);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
  }
  .casos-page .caso-resultados p {
    color: var(--Secondary-Color, #293842);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;                       /* Body/Regular */
    font-weight: 400;
    line-height: 24px;
    margin: 0;
  }
}

@media (max-width: 768px) {
  /* usa un solo espacio entre bloques */
  .casos-page .caso-contenido {
    gap: 16px !important;              /* antes 24px */
  }

  /* el <ul> sin margen inferior: dejá que el gap haga el trabajo */
  .casos-page .caso-contenido ul {
    margin-bottom: 0 !important;       /* antes 32px */
  }

  /* por si el card trae margen por otro lado */
  .casos-page .caso-resultados {
    margin-top: 0 !important;
  }
}













/* LANDING — HERO mobile (compacto + respiración) */
@media (max-width: 768px) {
  /* contenedor del hero (usa el que corresponda de estos) */
  .hero-home,
  .hero-landing,
  .hero,
  .home-hero {
    height: auto !important;
    min-height: auto !important;
    padding: 64px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* wrapper interno si existe */
  .hero-home .hero-content,
  .hero-landing .hero-content,
  .hero .hero-content,
  .home-hero .hero-content {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0 !important; /* manejamos el aire con márgenes entre hermanos */
  }

  /* Título → párrafo */
  .hero-home h1 + p,
  .hero-landing h1 + p,
  .hero h1 + p,
  .home-hero h1 + p {
    margin-top: 16px !important;
  }

  /* Párrafo → CTA */
  .hero-home p + .cta, .hero-landing p + .cta, .hero p + .cta, .home-hero p + .cta,
  .hero-home p + .btn, .hero-landing p + .btn, .hero p + .btn, .home-hero p + .btn {
    margin-top: 10px !important;
  }

  /* CTA → último texto (ej: +120 PROYECTOS…) */
  .hero-home .cta + *, .hero-landing .cta + *, .hero .cta + *, .home-hero .cta + *,
  .hero-home .btn + *, .hero-landing .btn + *, .hero .btn + *, .home-hero .btn + * {
    margin-top: 24px !important;
  }

  /* si hay un spacer o sección después del hero que empuje hacia abajo */
  .hero-home + .wp-block-spacer,
  .hero-landing + .wp-block-spacer,
  .hero + .wp-block-spacer,
  .home-hero + .wp-block-spacer,
  .hero-home + section,
  .hero-landing + section,
  .hero + section,
  .home-hero + section {
    margin-top: 0 !important;
  }
}

/* LANDING — más aire debajo del CTA (mobile) */
@media (max-width: 768px) {
  .hero-home .cta, .hero-home .btn,
  .hero-landing .cta, .hero-landing .btn,
  .hero .cta, .hero .btn,
  .home-hero .cta, .home-hero .btn {
    margin-bottom: 20px !important;  /* mismo gap que párrafo→CTA */
  }
}

@media (max-width: 768px) {
  .hero-home .cta, .hero-home .cta * { margin-bottom: 20px !important; }
}


@media (max-width: 768px) {
  .hero-home, .hero-landing, .hero, .home-hero {
    padding-bottom: 74px !important; /* probá 36–44px hasta que te guste */
  }
}




















  /* FORMULARIO DE CONTACTO - RESPONSIVE */
@media (max-width: 768px) {
  .contacto-form-card {
    width: 100%;
    max-width: 100%;
    padding-bottom: 10px;
  }
  
  .contacto-form-card input[type="submit"] {
    margin-bottom: 0; /* ✅ elimina margen extra del botón */
  }

  .contacto-form-card textarea.wpcf7-textarea {
  min-height: 80px;  /* 🔥 más compacto */
  max-height: 120px;
  }
    
}







    /* FOOTER RESPONSIVE */
@media (max-width: 480px) {
  /* Contenedor general */
  .footer-seccion {
    background: #293842;
    padding: 36px 20px;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 375px;
    gap: 10px;
  }

  /* === Columna Izquierda === */
  .footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-left .footer-logo {
    width: 80px;
    height: auto;
    aspect-ratio: 80 / 42.78;
  }

  .footer-left .footer-slogan {
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
  }

  .footer-redes {
    display: flex;
    gap: 12px;
  }

  .footer-redes img {
    width: 20px;
    height: 20px;
    aspect-ratio: 1/1;
  }

  /* === Columna Central (links) === */
  .footer-middle {
    width: 100%;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 16px 0;
  }

  .footer-links a {
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
  }

  /* === Columna Derecha (Contacto) === */
  .footer-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .footer-right h4 {
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .footer-right p,
  .footer-right a {
    color: #FFF;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
  }

  .footer-right a {
    text-decoration: underline;
  }
}













/* cust
custom.css vacío. No usar. */