/* === Fuente Global Astra Override === */
:root {
    --ast-global-font-family: 'Plus Jakarta Sans', sans-serif;
}

/* === Reset Base === */
body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #293842;
    background: #FFFFFF;
    overflow-x: hidden;
}
html body, html button, html input, html select, html textarea,
.site, .ast-container, .ast-single-post {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* === Tipografías Globales === */
.h1 {
    font-size: 44px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.88px;
}

.h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.72px;
}

.h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.64px;
}

.h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.h5 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.overline {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.body-small {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.body-regular {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.body-large {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.body-quote {
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    line-height: 28px;
}

.button-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.link {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}

.inline-link {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    text-decoration: underline;
}








/* ================================
   HEADER PERSONALIZADO – FULL FIX
   ================================ */

/* Desktop */
.main-header-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 15px 40px;
    min-height: 100px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header-bar .ast-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
}

/* Logo */
.main-header-bar .custom-logo-link img {
    max-height: 65px;
    width: auto;
    display: block;
}

/* 🔥 Ajuste de posición del logo */
.main-header-bar .custom-logo-link {
    margin-left: -30px;  /* mueve el logo hacia la izquierda */
}


/* Menú Desktop */
.main-header-menu {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-header-menu li a {
    font-size: 16px;
    color: #293842;
    text-decoration: none;
    font-weight: 400;
}
.main-header-menu li a:hover { color: #00B38B; }
.main-header-menu li:last-child a {
    background: #00B38B;
    color: #fff;
    padding: 10px 22px;
    border-radius: 100px;
    font-weight: 600;
}

/* Mobile */
.ast-mobile-header-wrap {
    display: none;
}






















/* ============================
   FIX HERO (solo padding y visibilidad decoracion)
   ============================ */
body { margin: 0; }
#site-content { margin-top: 0 !important; }

/* === HERO === */
.hero {
    background-color: #293842;
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #FFFFFF;
    height: 638px;
    display: flex;
    align-items: center;
}

/* Contenedor con margen interno */
.hero .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 40px;
    padding: 0 40px;   /* ✅ ahora los textos no se pegan al borde */
    width: 100%;
    box-sizing: border-box;
}

/* === Bloque de textos === */
.hero .textos {
    flex: 1;
    max-width: 55%;
    animation: fadeInLeft 1s ease forwards;
    opacity: 0;
}

.hero .h1 {
    color: #FFFFFF !important;
    margin-bottom: 20px;
}

.hero {
    position: relative;
}

.hero .body-large {
    color: #FFFFFF;
    margin-bottom: 30px;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    animation: fadeInUp 1.2s ease forwards;
    opacity: 0;
}

.hero-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #00B38B;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.hero-button.button-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.hero-button:hover {
    background-color: #01997A;
}

.hero-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #00B38B;
    border-radius: 50%;
    color: #00B38B;
    font-size: 1.2rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.hero-circle:hover {
    background-color: #00B38B;
    color: #FFFFFF;
}

/* === Texto secundario === */
.hero .texto-secundario {
    position: absolute;
    bottom: 20px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto;
    max-width: 90%;
    color: #FFFFFF;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
    animation: fadeInUp 1.4s ease forwards;
    opacity: 0;
    z-index: 3;
}


/* === Ajuste de padding solo para el contenido del hero === */
.hero .textos {
    padding-left: 80px;   /* 🔥 aumenta margen interno a la izquierda */
    padding-right: 20px;  /* 🔹 opcional, controla separación del borde derecho */
}


/* === Imagen decorativa principal === */
.hero .decoracion {
    position: absolute;
    top: 50%;
    right: 80px;
    width: 350px;
    height: 350px;
    background: url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/Vector-HERO.png') no-repeat center/contain;
    transform: translate(0, -50%) scale(1);
    opacity: 1;  /* ✅ visible en desktop */
    z-index: 1;
}

/* Mantiene animación */
.hero .decoracion.animate {
    animation: heroFadeInMove 1.5s ease forwards;
}


/* ✅ Plus decorativo para desktop */
.plus-desktop {
    position: absolute;
    top: 25%;
    right: 120px;
    width: 40px;
    height: 40px;
    z-index: 2;
    opacity: 1;
    animation: fadeInRight 1.7s ease forwards;
}











.marquee-logos {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 20px 0;
    margin-top: 20px;
    position: relative;
    margin-bottom: 150px;
}

.marquee-track {
    display: inline-block;      /* ✅ en bloque, no flex */
    white-space: nowrap;        /* ✅ fuerza todo en una línea */
    animation: marqueeScroll 30s linear infinite;
}

/* ✅ Los logos en línea */
.marquee-track img {
    display: inline-block;
    height: 40px;
    margin: 0 30px;
    filter: grayscale(100%);
    transition: transform 0.3s ease, filter 0.3s ease;
}
.marquee-track img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

/* ✅ Animación */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
























/* ============================
   PROPUESTA DE VALOR
   ============================ */
.propuesta-valor {
    background: #FFFFFF;
    width: 100%;
    padding: 98px 120px;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    /* ✅ No necesita overflow aquí */
}

.propuesta-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 300px;                
    opacity: 0;                
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    overflow: visible !important;   /* ✅ Solo en el contenedor que lo requería */
    height: auto;                   /* ✅ sin !important es suficiente */
}


/* ✅ Columna izquierda */
.propuesta-col.izquierda {
    flex: 1;
}
.propuesta-col.izquierda h3 {
    font-size: 28px;
    font-weight: 700;
    color: #293842;
    margin-bottom: 32px;       /* ✅ GAP entre H3 y body */
}
.propuesta-col.izquierda .body-large {
    color: #293842;
}

/* ✅ Columna derecha */
.propuesta-col.derecha {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;                 /* ✅ GAP entre ítems y líneas */
}
.propuesta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.3s ease;   /* ✅ permite animación */
    transform-origin: left center;     /* ✅ escala desde el lado izquierdo */
}

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

.propuesta-item img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 4px;
}
.propuesta-item p {
    margin: 0;
    color: #293842;
    font-size: 16px;
    line-height: 24px;
}
.propuesta-col.derecha hr {
    border: none;
    border-top: 1px solid #E0E0E0;
    margin: 0;
}



/* === Ajuste de separación entre Marquee y Propuesta de Valor === */
.marquee-logos {
    margin-bottom: 10px;   /* ✅ reduce espacio inferior */
}

.propuesta-valor {
    padding-top: 20px;     /* ✅ antes era 98px */
    padding-bottom: 40px;  /* ✅ antes era 98px */
}


/* ✅ Animación fade-in al hacer scroll */
.propuesta-valor.visible .propuesta-container {
    opacity: 1;
    transform: translateY(0);
}










/* ============================
   NUESTROS SERVICIOS
   ============================ */
.servicios-seccion {
    background: #F4F5F6;
    width: 100%;
    padding: 80px 120px;
}

/* Header */
.servicios-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.servicios-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #03A07D;
    margin-bottom: 10px;
}

.servicios-subtitulo {
    font-size: 32px;
    font-weight: 700;
    color: #2F4858;
}

/* Contenedor de número + badge */
.servicio-top {
    display: flex;
    justify-content: space-between; /* 🔥 número a la izquierda, badge a la derecha */
    align-items: center;            /* 🔥 alineación perfecta en la misma línea */
    margin-bottom: 8px;             /* espacio con el título h3 */
}

/* Número de servicio */
.numero {
    font-size: 28px;
    font-weight: 700;
    color: #2F4858;
    line-height: 1;                 /* 🔥 evita desplazamientos verticales */
}

/* Badge Nuevo! */
.badge-nuevo {
    background: #DEF2F1;
    color: #03A07D;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;           /* 🔥 asegura que el texto esté centrado */
    align-items: center;
    margin: 0;
}

/* Botón */
.btn-servicios {
    background: #293842;
    color: #FFF;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 10px 25px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.3s ease;
}
.btn-servicios:hover {
    background: #00B38B;
}

/* Grid */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ============================
   SERVICIO BOX – Fade-in + Hover
   ============================ */
.servicio-box {
    background: #FFF;
    padding: 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    opacity: 0;                           /* 🔹 invisible inicialmente */
    transform: translateY(40px);          /* 🔹 desplazado hacia abajo */
    transition: all 0.6s ease;
}

/* Fade-in cuando entra en viewport */
.servicio-box.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover oscuro */
.servicio-box:hover {
    background: #293842;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Hover – texto blanco */
.servicio-box:hover h3,
.servicio-box:hover p,
.servicio-box:hover .numero {
    color: #FFF;
}

/* Badge Nuevo – se mantiene visible */
.servicio-box:hover .badge-nuevo {
    background: #00B38B;
    color: #FFF;
}

/* Tipografías dentro de box */
.servicio-box .numero {
    font-size: 20px;
    font-weight: 700;
    color: #293842;
}
.servicio-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #293842;
}
.servicio-box p {
    color: #465F6F;
    font-size: 16px;
    line-height: 24px;
}

/* Badge Nuevo */
.badge-nuevo {
    background: #DEF2F1;
    color: #03A07D;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    align-self: flex-end;
}










/* ============================
   QUIÉNES SOMOS (Landing) - Desktop
   ============================ */
.quienes-home {
    background: #FFFFFF;
    width: 100%;
    padding: 133px 121px 156px 120px;  /* 🔥 valores exactos de Figma */
    display: flex;
    justify-content: center;
}

.quienes-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 125px;                        /* 🔥 separación entre columnas */
    max-width: 1440px;
    width: 100%;
}

/* ===== Columna Izquierda ===== */
.quienes-col.izquierda {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Título --- */
.quienes-titulo {
    color: #03A07D;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
    margin-bottom: 8px;                /* 🔥 gap correcto */
}

/* --- Subtítulo --- */
.quienes-subtitulo {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.64px;
    margin-bottom: 24px;               /* 🔥 separación con la imagen */
}

/* --- Párrafos --- */
.quienes-texto {
    color: #293842;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 44px;               /* 🔥 separación entre bloques de texto */
}

/* --- Botones --- */
.quienes-botones {
    display: flex;
    gap: 12px;                         /* 🔥 espacio entre botones */
    margin-top: 0;
}

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

/* Botón verde */
.btn-contacto {
    background: #00B38B;
}
.btn-contacto:hover {
    background: #01997A;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* Botón oscuro */
.btn-mas {
    background: #293842;
}
.btn-mas:hover {
    background: #465F6F;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* ===== Columna Derecha (Imagen) ===== */
.quienes-col.derecha img {
    width: 486px;                      /* 🔥 tamaño exacto */
    height: 531px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

/* ✅ Animación al pasar el mouse */
.quienes-col.derecha img:hover {
    transform: scale(1.05);
}








/* ============================
   CASOS DE ÉXITO
   ============================ */
.casos-exito {
    background: #293842 url('https://a1comunicacion.com.ar/wp-content/uploads/2025/07/Vector-HERO.png') no-repeat center bottom;
    background-size: 400px auto;  /* 🔹 controlas el tamaño */
    background-position: center 120%;  /* 🔹 mueve la imagen hacia abajo */
    width: 100%;
    padding: 100px 120px;
    position: relative;
}

/* Títulos */
.casos-titulo {
    color: #00B38B;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.9px;
    margin-bottom: 10px;
}

.casos-subtitulo {
    color: #FFF;
    font-family: "Plus Jakarta Sans";
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.64px;
    margin-bottom: 20px;
}

.casos-descripcion {
    color: #FFF;
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    max-width: 700px;
    margin-bottom: 60px;
}

/* Grid */
.casos-grid {
    display: flex;
    gap: 50px;
    justify-content: center;
    margin-bottom: 40px;
}

/* Caja individual */
.caso-box {
    background: #2F4858;
    width: 384px;
    padding: 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0; 
    transform: scale(1) translateY(40px);   /* 🔥 mantenemos escala base */
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}

.caso-box img {
    max-width: 100px;
    height: auto;
    margin-bottom: 20px;
}

.caso-box h3 {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
}

.caso-box p {
    color: #FFF;
    font-size: 16px;
    line-height: 24px;
}

/* Hover */
.caso-box:hover {
    transform: scale(1.08) translateY(-5px); /* 🔥 más escala + levanta más */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); /* 🔥 sombra más profunda */
}

/* Fade-in visible */
.caso-box.visible {
    opacity: 1;
    transform: scale(1) translateY(0);      /* 🔥 se acomoda suave */
}

/* Botón */
.casos-boton {
    text-align: center;
}
.btn-casos {
    display: inline-flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #00B38B;
    color: #FFF;
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-casos:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}


















.contacto-seccion {
    background: #DEF2F1;
    padding: 60px 20px;
    text-align: center;
}

.contacto-seccion h2 {
    color: #293842;
    margin-bottom: 10px;
}

.contacto-seccion p {
    color: #465F6F;
    margin-bottom: 30px;
}

/* ==== Footer Contacto actualizado ==== */
.contacto-footer {
    background: #293842;       /* ✅ Fondo oscuro */
    padding: 40px 20px;
    text-align: center;
    border-top: none;
}

.contacto-footer h2 {
    color: #fff;               /* ✅ Texto blanco */
    margin-bottom: 20px;
}

.contacto-footer .wpcf7 form {
    max-width: 500px;
    margin: 0 auto;
}

.contacto-footer .wpcf7 input,
.contacto-footer .wpcf7 textarea {
    border: 1px solid #465F6F;
}

.contacto-footer .wpcf7 input[type="submit"] {
    background: #00B38B;
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 100px;
    padding: 12px 25px;
    transition: background 0.3s ease;
}

.contacto-footer .wpcf7 input[type="submit"]:hover {
    background: #01997A;
}





























.quienes-somos-page h1 {
    text-align: center;
    margin-bottom: 40px;
}

.contenido-quienes {
    font-size: 18px;
    line-height: 1.6;
    color: #465F6F;
    max-width: 900px;
    margin: 0 auto;
}

.contenido-quienes img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 20px 0;
}

.contenido-quienes h2 {
    color: #00B38B;
    margin-top: 40px;
}

.propuesta-container {
    opacity: 1 !important;
    transform: translateY(0) !important;
}









.casos-page h1 {
    text-align: center;
    margin-bottom: 50px;
}

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

.caso {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.caso:hover {
    transform: translateY(-4px);
}

.caso img {
    width: 100%;
    height: auto;
    display: block;
}

.caso h2 {
    font-size: 20px;
    color: #293842;
    margin: 15px;
}

.caso p {
    color: #465F6F;
    margin: 0 15px 15px;
}






/* ===== Listado Blog ===== */
.lista-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

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

.post-card:hover {
    transform: translateY(-4px);
}

.post-card img {
    width: 100%;
    height: auto;
    display: block;
}

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

.post-card p {
    color: #465F6F;
    margin: 0 15px 15px;
}

/* ===== Artículo Individual ===== */
.blog-single h1 {
    text-align: center;
    margin-bottom: 20px;
}

.blog-single .post-thumb {
    width: 100%;
    border-radius: 12px;
    margin: 20px 0;
}

.blog-single .post-content {
    font-size: 18px;
    line-height: 1.7;
    color: #465F6F;
}


/* BLOG: color de enlaces dentro del contenido */
.blog-single .post-content a,
.blog .post-content a,
.single-post .post-content a {
  color: #293842 !important;          /* visible sobre fondo blanco */
  text-decoration: none;
  text-underline-offset: 3px;
}

.blog-single .post-content a:hover,
.blog .post-content a:focus {
  color: #00B38B !important;          /* color marca al hover/focus */
}

.blog-single .post-content a:visited {
  color: #465F6F !important;          /* opcional: visitados */
}

/* Si el enlace es un botón de Gutenberg */
.blog-single .post-content .wp-block-button__link {
  background: #DEF2F1;
  color: #293842 !important;
  text-decoration: none;
  border-radius: 6px;
  padding: 8px 12px;
}
.blog-single .post-content .wp-block-button__link:hover {
  background: #00B38B;
  color: #FFFFFF !important;
}


/* === BLOG CARDS === */

/* Título, medio, fecha y excerpt alineados */
.post-card h2,
.post-card .post-medio,
.post-card .blog-card-date,
.post-card .excerpt {
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Medio (ACF) */
.post-medio {
  color: rgb(0,179,139);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  margin: 6px 0 2px;
}

/* Excerpt */
.excerpt {
  margin-top: 6px;
  color: #465F6F;
  line-height: 1.5;
}

/* === Landing: cards del módulo BLOG === */
.landing-blog .blog-card a { 
  display:block;
}

/* Alinear y dar el mismo padding que en las cards del blog */
.landing-blog .blog-card .blog-card-title,
.landing-blog .blog-card .post-medio,
.landing-blog .blog-card .blog-card-date,
.landing-blog .blog-card .blog-card-excerpt {
  display:block;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: 0;
  margin-right: 0;
}

/* Título */
.landing-blog .blog-card .blog-card-title{
  margin-top: 18px;
  margin-bottom: 8px;
}

/* Medio (ACF) */
.landing-blog .blog-card .post-medio{
  color: rgb(0,179,139);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 4px;
}

/* Fecha */
.landing-blog .blog-card .blog-card-date{
  color:#6B7A87;
  margin: 0 0 10px;
}

/* Excerpt */
.landing-blog .blog-card .blog-card-excerpt{
  color:#465F6F;
  line-height:1.5;
  margin: 0 0 16px;
}

.single-post .post-medio{
  color: rgb(0,179,139);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  margin: 16px 0 12px; /* arriba/abajo */
}


/* ====== TITULOS CON ALTO FIJO EN CARDS ====== */
/* Home / Archive (esto ya te funcionaba bien) */
.post-card h2{
  line-height: 1.22;
  min-height: calc(3 * 1.22em);   /* 3 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====== LANDING: cards del módulo BLOG ====== */

/* 1) Título con alto fijo (3 líneas) */
.landing-blog .blog-card .blog-card-title{
  line-height: 1.30;                 /* usa el LH real del título */
  min-height: calc(3 * 1.30em);      /* 3 líneas * LH */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 16px 0 0;
  padding: 0 24px;                   /* mismo padding que el resto */
}

/* 2) Medio: bloque normal, nunca flotado/absoluto */
.landing-blog .blog-card .post-medio{
  position: static !important;
  float: none !important;
  display: block !important;
  padding: 0 24px;
  margin: 10px 0 6px !important;     /* espacio claro respecto al título y la fecha */
  line-height: 1.4;
  color: rgb(0,179,139);
  font-weight: 600;
  font-size: 14px;
  z-index: 1;
}

/* 3) Fecha: bloque y separada del medio */
.landing-blog .blog-card .blog-card-date{
  position: static !important;
  float: none !important;
  display: block !important;
  padding: 0 24px;
  margin: 0 0 10px !important;
  clear: both;                        /* por si algo raro quedó flotado */
  z-index: 0;
}

/* 4) Excerpt alineado con el resto */
.landing-blog .blog-card .blog-card-excerpt{
  color:#465F6F;
  line-height:1.5;
  padding: 0 24px 16px;
}

/* 5) Estructura del anchor en columna con separación entre items */
.landing-blog .blog-card a{
  display: flex;
  flex-direction: column;
  gap: 0;                             /* dejamos los márgenes que definimos arriba */
}


/* Responsive: en mobile podés bajar a 2 líneas */
@media (max-width: 640px){
  .post-card h2{
    min-height: calc(2 * 1.22em);
    -webkit-line-clamp: 2;
  }
  .landing-blog .blog-card .blog-card-title{
    line-height: 1.30;
    min-height: calc(2 * 1.30em);
    -webkit-line-clamp: 2;
  }
}

/* ===== Paginación del blog ===== */
.pagination{
  margin-top: 48px;                 /* aire respecto a la última card */
  display: flex;
  justify-content: center;
}

.pagination .navigation.pagination{ /* nav que genera WP */
  width: 100%;
}

.pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Botones */
.pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #E0E6EA;
  border-radius: 999px;
  background: #fff;
  color: #2F4858;
  font-weight: 600;
  text-decoration: none !important;     /* sin subrayado */
}

/* Activo */
.pagination .page-numbers.current{
  background: #00B38B;
  border-color: #00B38B;
  color: #fff;
}

/* Hover / focus */
.pagination .page-numbers:hover,
.pagination .page-numbers:focus{
  border-color: #00B38B;
  color: #00B38B;
  outline: none;
}

/* Prev/Next (texto “Siguientes →”) */
.pagination .page-numbers.prev,
.pagination .page-numbers.next{
  padding: 0 16px;
}

/* Grilla del listado del blog */
.blog-archive .lista-posts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

@media (max-width: 1024px){
  .blog-archive .lista-posts{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .blog-archive .lista-posts{
    grid-template-columns: 1fr;
  }
}








/* ===== Navegación entre notas con PNG ===== */
.post-nav-circles{
  --size: 68px;            /* diámetro final del botón (ajustá aquí) */
  --gap: 34px;
  max-width: 800px;
  margin: 16px auto 32px;  /* poco gap con el texto */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
}

.post-nav-circles .prev a,
.post-nav-circles .next a{
  display: inline-flex;
  text-decoration: none;
}

/* Contenedor del botón: SACA bordes/estilos previos */
.post-nav-circles .arrow-circle{
  width: var(--size) !important;
  height: var(--size) !important;
  display: grid !important;
  place-items: center;
  border: none !important;
  background: transparent !important;
  color: inherit;
  transition: transform .15s ease;
}

/* La imagen ocupa todo el círculo */
.post-nav-circles .arrow-png{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;  /* asegura que el click sea del link */
  display: block;
}

/* Espejar para “anterior” usando la misma imagen */
.post-nav-circles .arrow-png.is-left{
  transform: scaleX(-1);
}

/* Hover opcional (ligero lift) */
.post-nav-circles a:hover .arrow-circle,
.post-nav-circles a:focus .arrow-circle{
  transform: translateY(-2px);
  outline: none;
}

/* Compacto en mobile */
@media (max-width:1023px){
  .post-nav-circles{ --size: 72px; gap: 28px; }
}

/* Quita margen del último bloque del contenido */
.blog-single .single-post .post-content > *:last-child{ margin-bottom: 0; }

/* Accesibilidad */
.sr-only{
  position: absolute !important;
  width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}




/* Menos espacio entre "Leer la nota completa" y la navegación */
.blog-single .single-post .post-content > *:last-child { 
  margin-bottom: 0;                 /* mata el margen del último bloque/ párrafo */
}

.post-nav-circles { 
  margin-top: 0px;                 /* antes era 48px; ajustá a gusto */
}

@media (max-width:1023px){
  .post-nav-circles { margin-top: 12px; }
}


/* Quitar espacio entre el contenido y las flechas en SINGLE */
.blog-single { 
  padding-bottom: 12px !important;     /* si el <main> tiene padding:80px 20px; */
}

.blog-single .single-post { 
  margin-bottom: 0 !important;         /* algunos temas dan 2em abajo del article */
}

.blog-single .post-content {
  margin-bottom: 8px !important;       /* por si el contenedor tiene margen propio */
}

/* último bloque del contenido sin margen extra */
.blog-single .post-content > *:last-child { 
  margin-bottom: 0 !important; 
}

/* Nav pegado al contenido */
.post-nav-circles { 
  margin-top: 0px !important;          /* ponelo en 0 si querés “cero” espacio */
}




/* Mobile: flechas más chicas */
@media (max-width: 1023px){
  .post-nav-circles{
    --size: 64px;   /* antes 88–92px */
    --gap: 24px;
    margin-top: 8px;
  }
}

/* Teléfonos chicos (≤380px) */
@media (max-width: 380px){
  .post-nav-circles{
    --size: 56px;   /* mantiene target táctil >44px */
    --gap: 16px;
  }
}