/****************************************************
 *  ALFREDO S. MONDINO — THEME STYLES
 *  Autor: Pablo + ChatGPT
 *  Notas:
 *  - Paleta y variables centralizadas
 *  - Bordes y radios unificados
 *  - Acordeones y sidebar consistentes
 ****************************************************/

/*==================================================
=            0) VARIABLES & BASE / RESET           =
==================================================*/
:root{
  --primary:   #ec691a;  /* naranja corporativo */
  --secondary: #ec691a;  /* alias para compatibilidad */
  --light:     #F6FFF2;
  --dark:      #263A4F;  /* azul corporativo */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  background: linear-gradient(180deg,#fafafa 0%,#f8f8f8 50%,#f5f5f5 100%);
}

p { color: var(--dark) !important; }

/* Tipografía base */
h1, .display-1, .display-2, .display-3 { letter-spacing: -0.02em; }
.navbar-brand { letter-spacing: -0.01em; }

/*==================================================
=            1) UTILIDADES / HELPERS               =
==================================================*/
.box { display:flex; flex-direction:column; padding:10px; }
.box-1 { padding:10px; }

/* Separadores */
.hr-mondino { border: 0; border-top: 2px solid var(--dark); opacity:.25; }

/* Visibilidad dropdown (BS) */
.navbar .dropdown-menu.show { display: block; }

/* Z-index seguros */
.navbar { position: relative; z-index: 1030; }
.sticky-top { z-index: 1020; }
.dropdown-menu { z-index: 1060; }

/*==================================================
=            2) BOTONES & CONTROLES                =
==================================================*/
.btn{
  font-family:'Roboto',sans-serif;
  letter-spacing:1px;
  font-weight:700;
  transition:.5s;
  border-radius:8px; /* estándar global */
}

.btn-primary,
.btn-secondary{
  color:#fff;
  border-radius:8px;
}
.btn-primary:hover{
  color:#fff;
  background-color:var(--primary);
  border-color:var(--primary);
}
/* Secundario igual a primario (naranja) */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus{
  color:#fff;
  background-color:var(--primary);
  border-color:var(--primary);
}

.btn-square { width:36px; height:36px; }
.btn-sm-square { width:28px; height:28px; }
.btn-lg-square { width:46px; height:46px; }
.btn-square,.btn-sm-square,.btn-lg-square{
  padding-left:0; padding-right:0; text-align:center;
}

/* Foco accesible */
.btn:focus-visible{
  outline:3px solid rgba(236,105,26,.35);
  outline-offset:2px;
}

/* Botón “Volver” */
.btn-volver{
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  padding:6px 20px;
  font-weight:600;
  border-radius:8px;
  transition:all .3s ease;
}
.btn-volver:hover{ background:#fff; color:var(--primary); }
a.btn-volver:focus,
a.btn-volver:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 .25rem rgba(236,105,26,.35) !important;
  border-radius:.375rem;
}

/*==================================================
=            3) FORMULARIOS / INPUTS               =
==================================================*/
/* Icono de input (cajita gris) */
.icon-bg{
  background:#6c757d; color:#fff; border:none;
  border-radius:8px 0 0 8px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Inputs con borde a derecha */
.form-control,
.form-select,
textarea{
  border-radius:0 8px 8px 0 !important;
  box-shadow:none;
  border:1px solid #ced4da;
}

/* Foco naranja (sin verde) */
.form-control:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 .25rem rgba(236,105,26,.25) !important;
}

/* Carga de CV */
.cv-label{
  cursor:pointer; display:flex; align-items:center;
  min-height:38px; color:#6c757d;
}
.cv-label.has-file{ color:#212529; }
#cv-help{ margin-left:44px; }

/* Contacto: espacio fijo entre el formulario y el acordeón (tablet/mobile) */
@media (max-width: 991.98px){
  #form-contacto{
    margin-bottom: 1.5rem; /* ~24px, mismo alto para tablet y mobile */
  }
}

/*==================================================
=            4) NAVBAR & DROPDOWNS                 =
==================================================*/

/* Z-index y comportamiento sticky */
.navbar { position: relative; z-index: 1030; }
.navbar.sticky-top { position: sticky; top: 0; z-index: 1020; }

/* Transición suave de la barra */
.navbar{
  transition: padding .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* Links del menú (estado inicial alto ~84px) */
.navbar-dark .navbar-nav .nav-link{
  padding: 30px 15px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transition: padding .18s ease, color .18s ease, background-color .18s ease;
}

/* Encogimiento al scrollear (~64px) */
.navbar.navbar-shrink .navbar-nav .nav-link{
  padding: 20px 15px;
}

/* Hover/activo */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  background: var(--secondary);
  color: #fff;
}

/* Logo: transición opcional al encoger (ajustá height si querés) */
.navbar .navbar-brand img{
  transition: height .18s ease, transform .18s ease;
}
.navbar.navbar-shrink .navbar-brand img{
  height: 42px;
  transform: translateZ(0);
}

/* Caret (BS5) */
.navbar .dropdown-toggle::after{
  display: inline-block;
  margin-left: .35rem;
  vertical-align: .15em;
  content: "";
  border-top: .35em solid;
  border-right: .35em solid transparent;
  border-left: .35em solid transparent;
}

/* Si usás .bi dentro del toggle, rotamos al abrir */
.navbar .dropdown-toggle .bi{ vertical-align: -0.125em; transition: transform .2s ease; }
.navbar .dropdown.show > .nav-link .bi,
.navbar .dropdown-menu.show ~ .nav-link .bi{ transform: rotate(180deg); }

/* Dropdown base (oscuro) */
.dropdown-menu{
  position: absolute;
  display: none;
  min-width: 10rem;
  padding: .5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #fff;
  text-align: left;
  list-style: none;
  background-color: var(--dark);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  z-index: 1055; /* por encima de la navbar */
}

/* Forzar visibilidad cuando tenga .show (compat/fallback) */
.navbar .dropdown-menu.show { display: block; }

.dropdown-item{
  color: #fff;
  padding: .65rem 1rem;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active{
  color: #fff;
  background-color: var(--primary);
}

/* Desktop: abrir al hover con pequeña transición */
@media (min-width: 992px){
  .navbar .dropdown-menu{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .navbar .dropdown:hover .dropdown-menu,
  .navbar .dropdown-menu.show{
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive: compactar padding en móviles */
@media (max-width: 991.98px){
  .navbar-dark .navbar-nav .nav-link{ padding: 10px; }
  .dropdown-menu{ border-radius: 10px; }
}
/* Sombra fuerte para navbar al scrollear */
.navbar.shadow {
  box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
}
@media (max-width: 991.98px){
  .navbar.navbar-shrink,
  .navbar.shadow {
    box-shadow: none !important;
    padding-top: inherit;
    padding-bottom: inherit;
  }
}

/*==================================================
=            5) HERO / BANNERS / CAROUSEL          =
==================================================*/
.bg-hero{
  background:url(../img/carousel-vacas.jpg) top right no-repeat;
  background-size:cover;
}

/* Hero subtítulo + botón volver */
.hero-img{ display:block; } /* evita gaps */
.hero-subtitle{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 24px; display:flex; flex-direction:column; align-items:center;
  z-index:2;
}
.hero-subtitle h4{
  color:#fff; font-size:50px; margin-bottom:10px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 4px rgba(0,0,0,.7);
}
@media (max-width: 576px){
  .hero-subtitle{ padding:10px 16px; }
  .hero-subtitle h4{ font-size:1.25rem; }
}

/* Fondo bloques */
.bg-mondino{
  background: linear-gradient(180deg,#fdfbf7 0%,#faf6f0 50%,#f5efe8 100%);
}

/* Carousel */
.carousel-control-prev, .carousel-control-next{ width:10%; }
.carousel-control-prev-icon,.carousel-control-next-icon{
  width:3rem; height:3rem; background-color:var(--dark); border-radius:5px;
}

/* Header carousel: caption y controles */
#header-carousel .carousel-caption{ top:77% !important; }
@media (max-width:600px){
  #header-carousel .carousel-caption{ top:90% !important; }
  #header-carousel h4{ font-size:22px !important; }
}
#header-carousel h4{
  font-size:50px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 4px rgba(0,0,0,.7);
}
/* ===== Header carousel: altura más baja y responsiva ===== */
#header-carousel .carousel-item img{
  width: 100%;
  height: clamp(380px, 68vh, 740px);
  object-fit: cover;
}

/* Tablet: un poco más bajo */
@media (max-width: 991.98px){
  #header-carousel .carousel-item img{
    height: clamp(320px, 58vh, 560px);
  }
  #header-carousel .carousel-caption{ top: 85% !important; }
}

/* Móvil chico: más bajo */
@media (max-width: 600px){
  #header-carousel .carousel-item img{
    height: clamp(160px, 38vh, 300px);
  }
  #header-carousel .carousel-caption{ top: 90% !important; }
}

/* Controles tipo tarjetita */
#header-carousel .carousel-control-prev,
#header-carousel .carousel-control-next{
  width:auto; height:auto; opacity:1; top:50%; transform:translateY(-50%);
}
#header-carousel .carousel-control-prev{ left:16px; }
#header-carousel .carousel-control-next{ right:16px; }
#header-carousel .carousel-control-prev-icon,
#header-carousel .carousel-control-next-icon{
  width:48px; height:48px; background-size:60% 60%;
  background-color:rgba(38,58,79,.9); border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
#header-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
#header-carousel .carousel-control-next:hover .carousel-control-next-icon{
  background-color:rgba(38,58,79,1);
}

/* Banner */
@media (min-width: 991.98px){ .banner{ position:relative; margin-top:-90px; z-index:1; } }

/* === Hero genérico (.hero-img) === */
.hero-img{
  width: 100%;
  display: block;
  height: auto;              /* en desktop: muestra la imagen completa */
  object-fit: contain;       /* no recorta, se adapta */
  object-position: left top; /* se alinea arriba-izquierda */
}

/* Tablets: más bajas, recortando desde arriba-izquierda */
@media (max-width: 991.98px){
  .hero-img{
    height: clamp(168px, 29vh, 266px); /* ≈30% más chico */
    object-fit: cover;        /* recorta */
    object-position: left top;
  }
}

/* Smartphones: también más bajas, recortando arriba-izquierda */
@media (max-width: 576px){
  .hero-img{
    height: clamp(100px, 20vh, 160px);
    object-fit: cover;
    object-position: left top;
  }
}

/*==================================================
=            6) CARDS / BLOG / SERVICE             =
==================================================*/
 .service-card{
  border:1px solid var(--dark);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}

.service-card:hover{
  box-shadow: 3px 3px 5px 3px rgba(0,0,0,.75);
  transition: .5s;
}

.card, .service-item, .blog-item{
  border:1px solid var(--dark);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover, .service-item:hover, .blog-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* Service */
.service-item{ box-shadow:0 0 45px #EDEDED; }
.about i, .service-item i{
  background-image:linear-gradient(var(--primary),var(--secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; transition:.5s;
}
.service-item:hover{ color:var(--light); background:var(--dark) !important; }
.service-item:hover i{ background-image:linear-gradient(var(--light),var(--secondary)); }
.service-item h5, .service-item p{ transition:.5s; }
.service-item:hover h5, .service-item:hover p{ color:#fff !important; }

/* Blog (thumb + overlay) */
.blog-item:hover{ box-shadow:3px 3px 5px 3px rgba(0,0,0,.75); transition:.5s; }
.blog-item img{ transition:.5s; }
.blog-item:hover img{ transform:scale(1.2); }
.blog-overlay{
  position:absolute; padding:30px; width:100%; height:100%; top:0; left:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(rgba(192,192,192,0), rgba(96,95,95,1)); z-index:1;
}

/* Blog: tarjetas de Remates */
.blog-item .thumb-wrap{
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  background:#f4f4f4; border-top-left-radius:12px; border-top-right-radius:12px;
}
.blog-item .thumb-link{ position:absolute; inset:0; display:block; }
.blog-item .thumb-img{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:cover; transition:transform .5s;
}
.blog-item:hover .thumb-img{ transform:scale(1.2); }

/* Grid de noticias/remates: más aire vertical */
.grid-noticias{ --bs-gutter-y: 2.5rem; }
@media (min-width:1200px){ .grid-noticias{ --bs-gutter-y: 3rem; } }

/* ===== Noticias: 2 por fila en tablet (sm–md) ===== */
@media (min-width: 576px) and (max-width: 991.98px){
  #main .row.g-5.mb-4 > [id^="su-post-"]{
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* <576px = 1 por fila (default Bootstrap) */
/* >=992px = 4 por fila por .col-lg-3 (default) */


/*==================================================
=            7) GALERÍAS (WP)                      =
==================================================*/
.gallery{
  display:grid !important; grid-template-columns:repeat(4,1fr);
  gap:16px; margin:20px 0;
}
.gallery .gallery-item{ margin:0 !important; padding:0 !important; }
.gallery .gallery-icon{ aspect-ratio:4/3; overflow:hidden; }
.gallery .gallery-icon img{
  width:100% !important; height:100%; object-fit:cover; display:block;
  border-radius:6px; transition:transform .3s ease, box-shadow .3s ease; cursor:pointer;
}
.gallery .gallery-icon img:hover{ transform:scale(1.03); box-shadow:0 4px 12px rgba(0,0,0,.2); }

@media (max-width:1200px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .gallery{ grid-template-columns:1fr; } }

/*==================================================
=            8) SIDEBAR / WIDGETS                  =
==================================================*/
/* Categorías (listado clásico) */
.widget_categories ul li{ border-bottom:1px solid #eee; }
.widget_categories ul li a{
  display:flex; justify-content:space-between; padding:6px 8px;
  color:var(--dark); text-decoration:none;
}
.widget_categories ul li a:hover{ background:#f8f9fa; color:var(--primary); }

/* Acordeón base del theme (colores corporativos) */
.accordion .accordion-item{
  margin-bottom:20px; box-shadow:0 0 30px rgba(0,0,0,.08);
  border:none; border-radius:8px; overflow:hidden;
}
.accordion .accordion-item .accordion-header .accordion-button{
  color:#fff; background:rgb(236,105,26); font-size:18px;
  display:flex; align-items:center; gap:8px;
}
.accordion .accordion-item .accordion-header .accordion-button.collapsed{
  color:var(--dark); background:rgba(38,58,79,.35);
}
.accordion .accordion-item .accordion-header .accordion-button.collapsed{
  color:var(--dark); background:rgba(38,58,79,.35);
}
.accordion .accordion-item .accordion-header .accordion-button h4{ margin:0; color:var(--dark); }
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) h4{ color:#fff; }
.accordion .accordion-item .accordion-header .accordion-button i{ font-size:20px; }

/* Flecha (BS5) — abajo = azul, arriba = blanco */
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23263A4F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  filter:none !important;
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  filter:none !important;
}

/* Quitar caret en los enlaces tipo botón (años resultados) */
.accordion-button.no-caret::after{ display:none !important; }

/* === Sidebar: Resultados de remates (años) → hover/activo naranja === */
.widget_archives .accordion a.accordion-button.no-caret{
  box-shadow:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.widget_archives .accordion a.accordion-button.no-caret:hover,
.widget_archives .accordion a.accordion-button.no-caret:focus{
  background-color:var(--primary) !important;
  color:#fff !important;
  border-color:var(--primary) !important;
  text-decoration:none;
}
.widget_archives .accordion a.accordion-button.no-caret.active{
  background-color:var(--primary) !important;
  color:#fff !important;
  border-color:var(--primary) !important;
}
/* Si algún .accordion-button lleva .active dentro de widgets → naranja */
.widget .accordion-button.active{
  background-color:var(--primary) !important;
  color:#fff !important;
  border-color:var(--primary) !important;
}

/* “Ver todos” estilo botón dentro de widget (si lo usás) */
.asm-archivo-remates .asm-archivo-all{
  background:var(--primary); color:#fff; border-radius:8px; font-weight:600; text-decoration:none;
}
.asm-archivo-remates .asm-archivo-all:hover{ opacity:.9; color:#fff; text-decoration:none; }

/* === Remates (page) — dos widgets en una fila SOLO en tablets === */
@media (min-width: 768px) and (max-width: 1199.98px){
  /* Oculta el <hr> del medio en esa vista */
  .page-template-page-remates hr.hr-mondino{ display:none; }

  /* Pone ambos widgets uno al lado del otro */
  .page-template-page-remates .widget_archives{
    display: inline-block;
    width: calc(50% - 12px);   /* 2 columnas con pequeño gap */
    vertical-align: top;
    margin-right: 12px;
  }
  /* El segundo sin margen derecho */
  .page-template-page-remates .widget_archives:nth-of-type(2){
    margin-right: 0;
  }
}

/* Sidebar Noticias: Archivo + Categorías en 2 columnas (solo tablets) */
@media (min-width: 768px) and (max-width: 991.98px){
  .sidebar-arch-cat{
    display: flex;
    gap: 20px;           /* espacio entre columnas */
  }
  .sidebar-arch-cat > .widget{
    flex: 1 1 50%;
    margin-bottom: 0;   /* sacamos margen extra abajo */
  }
}

/*==================================================
=            9) PAGINACIÓN                          =
==================================================*/
.navigation.pagination{ margin-top:1.25rem; display:flex; justify-content:center; }
.navigation.pagination .nav-links{ display:flex; gap:.25rem; flex-wrap:wrap; align-items:center; width:100%; justify-content:center; }

.navigation.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:36px; padding:0 .8rem;
  border:1px solid var(--dark); border-radius:8px;
  background:#fff; color:var(--dark); font-weight:600; line-height:1;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.navigation.pagination .page-numbers.current{
  background:var(--dark); color:#fff; border-color:var(--dark); cursor:default;
}
.navigation.pagination .page-numbers:hover{ background:#fff; color:var(--primary); border-color:var(--dark); text-decoration:none; }
.navigation.pagination .page-numbers.current:hover,
.navigation.pagination .page-numbers.current:focus{ background:var(--dark); color:#fff; border-color:var(--dark); }
.navigation.pagination .page-numbers:focus-visible{
  outline:3px solid rgba(236,105,26,.35); outline-offset:2px;
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next{ padding-inline:1rem; min-width:auto; }
.navigation.pagination .page-numbers.dots{
  border-color:transparent; background:transparent; color:var(--dark);
  min-width:auto; padding:0;
}

/*==================================================
=            10) TABLAS / DATATABLES               =
==================================================*/
/* Cabeceras con branding */
.tablepress thead th{
  background:var(--primary); color:#fff; text-transform:uppercase;
  border-color:var(--primary); vertical-align:middle; cursor:pointer;
}
/* Flechitas (ordenamiento) blancas */
.dataTables_wrapper .dataTables_sorting:after,
.dataTables_wrapper .dataTables_sorting_asc:after,
.dataTables_wrapper .dataTables_sorting_desc:after,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after{
  color:#fff !important; opacity:1;
}
/* Hover */
.tablepress thead th:hover{
  background:var(--dark) !important; color:#fff !important;
}

/*==================================================
=         11) LINKS FOOTER Y HEADER               =
==================================================*/
.bg-footer{
  background:linear-gradient(rgba(46,125,78,.7), rgba(52,173,84,.7)), url(../img/footer.png) center bottom no-repeat;
  background-size:contain;
  margin-top:0 !important; /* siempre pegado al contenido */
}
.bg-footer a{ text-decoration:none; }
.bg-footer a .lf{ position:relative; color:#fff; text-decoration:none; }
.bg-footer a .lf::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:currentColor;
  transition:width .4s ease-out .05s;
}
.bg-footer a .lf:hover::after{ width:100%; }

a .sup{ position:relative; color:#263A4F; text-decoration:none; }
a .sup::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:currentColor;
  transition:width .4s ease-out .05s;
}
a .sup:hover::after{ width:100%; }

/* Footer: igualar altura de columnas en tablets */
.bg-footer .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Que los títulos siempre queden arriba */
.bg-footer h4 {
  flex-shrink: 0;
}

/* Que el contenido se estire de forma pareja */
.bg-footer .d-flex,
.bg-footer .flex-column {
  flex: 1;
}
/* ===== Footer: layout 2×2 parejo en tablets (nuevo) ===== */
@media (min-width: 768px) and (max-width: 1199.98px){
  /* La fila principal del footer pasa a grid 2×2 */
  .bg-footer .container > .row.gx-5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;   /* mismas alturas por fila */
    column-gap: 3rem;      /* ≈ gx-5 */
    row-gap: 3rem;         /* ≈ gy-4/gy-5 */
  }

  /* Las columnas dentro del grid dejan de forzar anchos/paddings de Bootstrap */
  .bg-footer .container > .row.gx-5 > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;      /* el espacio lo da el gap del grid */
    display: flex;
    flex-direction: column;     /* título arriba, contenido debajo */
  }

  /* Título fijo arriba, contenido se estira */
  .bg-footer h4 { flex-shrink: 0; }
  .bg-footer .d-flex,
  .bg-footer .flex-column { flex: 1; }
}

/*==================================================
=            12) DIVERSOS / ESPECIALES             =
==================================================*/
/* Teléfono/links destacados */
.tel{ color:var(--dark); }
.tel:hover{ color:var(--primary); }

/* Imagen WP utilitaria (con hover) */
.wp{
  display:block; width:250px; max-width:100%; height:auto;
  transform:scale(1); transition:transform .5s ease; overflow:hidden;
}
.wp:hover{ transform:scale(1.2); }
@media (max-width:768px){
  .wp{ margin:0 auto; }
  .wp:hover{ transform:scale(1); }
}

/* Evitar “colas” de margen en contenidos */
.site-main .entry-content > *:last-child { margin-bottom:0 !important; }
.site-main article { margin-bottom:0 !important; }

/* Divisor con ondas */
.custom-shape-divider-top {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.custom-shape-divider-top svg {
  display: block;
  width: 100%;
  height: 60px;
}
.custom-shape-divider-top .shape-fill {
  fill: #f5efe8; /* mismo color que el fondo de tu bloque */
}

/* Ocultar título automático de WP, sin afectar a los demás */
.page article > h1 {
  display: none !important;
}
/* Botón personalizado */
.btn-custom {
  background-color: #263A4F;   /* Azul corporativo */
  color: #fff;                 /* Texto blanco */
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  background-color: #ec691a;   /* Naranja corporativo */
  color: #fff;
}
/* Equipo */
.equipo { position: relative; overflow: hidden; transition: box-shadow 0.5s ease; }
.equipo img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.equipo:hover img { transform: scale(1.2); }
.equipo:hover {  
  box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.75);
  -moz-box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.75);}
.equipo .btn-square { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.equipo:hover .btn-square:hover { transform: scale(1.2); }

/*==================================================
=            13) RESPONSIVE TWEAKS                 =
==================================================*/
@media (max-width: 991.98px){
  .dropdown-menu{ border-radius:10px; }
  .btn{ padding:.625rem 1rem; }
}
/* === Conózcanos: más separación foto → texto (solo tablet/mobile) === */
@media (max-width: 991.98px){
  /* 1) Debajo de los bloques de imagen [quienes_1] y [quienes_2] */
  .about .d-flex.border{ 
    margin-bottom: 1.25rem;  /* probá 1.5rem si querés aún más aire */
  }

  /* 2) Cuando un párrafo sigue a un .row (caso “La Angelita…”) */
  .about .container > .row + p{
    margin-top: 1.25rem;     /* subí/bajá este valor a gusto */
  }
}
/* === Cereales → "Canje con Cereal": en tablets 2×2 (título arriba) === */
@media (min-width: 768px) and (max-width: 991.98px){
  /* Aseguramos flex del row */
  .canje-cereal-row{
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Título ocupa toda la fila */
  .canje-cereal-row > .col:first-child{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Las 4 cards: 2 columnas por fila */
  .canje-cereal-row > .col:nth-child(n+2){
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
/* Imagen Créditos — Responsive */
.creditos-img{
  display:block;
  margin:0 auto;
  max-width: 100%;   /* desktop normal */
}

/* Tablets */
@media (max-width: 991.98px){
  .creditos-img{
    max-width: 75%;   /* más chica en tablets */
  }
}

/* Smartphones */
@media (max-width: 576px){
  .creditos-img{
    max-width: 65%;   /* todavía más chica en móviles */
  }
}

/* En desktop, ocultar solo el borde inferior */
@media (min-width: 992px){
  .quienes-box { border-bottom: 0 !important; }
}

/*==================================================
=            14) COLORES RÁPIDOS                   =
==================================================*/
.display-6{ color:var(--primary); }

/*==================================================
=            15) ARCHIVE / TITLES                  =
==================================================*/
.archive-title{ color:var(--dark); font-weight:600; }
.archive-title__count{ color:var(--primary); }
.archive-title__count.text-orange{ color:var(--primary); font-weight:600; }

/*==================================================
=            16) NAVEGACIÓN ENTRE POSTS            =
==================================================*/
/* ===== Navegación entre posts (single) ===== */
.post-nav__wrap { width:100%; }
.post-nav__cell { flex: 1 1 240px; min-width: 240px; }

.post-nav__link{
  display:inline-flex; align-items:center; gap:.5rem;
  max-width:100%;
  padding:.55rem 1rem;
  background:#fff;
  color:var(--dark);
  border:1px solid var(--dark);
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.post-nav__link:hover{
  color:var(--primary);
  text-decoration:none;
}

/* Texto truncado si es muy largo */
.post-nav__text{
  display:inline-block;
  max-width: clamp(180px, 42vw, 520px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alineaciones visuales */
.post-nav__prev { justify-content:flex-start; }
.post-nav__next { justify-content:flex-end; }

/* Responsive */
@media (max-width: 576px){
  .post-nav__cell{ flex:1 1 100%; min-width:0; }
  .post-nav__link{ width:100%; justify-content:center; }
  .post-nav__text{ max-width: 78vw; }
}

/*==================================================
=                 17) ICONOS REDES                 =
==================================================*/
/* ===== Footer: botón redondo de redes ===== */
.footer-social .btn.btn-square {
  /* tamaño más grande */
  width: 40px;
  height: 40px;

  /* centrado perfecto del ícono (desktop y mobile) */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* look corporativo */
  background: var(--primary);
  color: #fff;                  /* color del ícono */
  border: 2px solid var(--primary);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

/* tamaño del ícono dentro del botón */
.footer-social .btn.btn-square i {
  font-size: 1.35rem;           /* ajusta si lo querés aún más grande */
  line-height: 1;               /* evita descentrado vertical por baseline */
}

/* Hover: invertir colores */
.footer-social .btn.btn-square:hover,
.footer-social .btn.btn-square:focus {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  text-decoration: none;
}

/* Accesibilidad: foco visible */
.footer-social .btn.btn-square:focus-visible{
  outline: 3px solid rgba(236,105,26,.35);
  outline-offset: 3px;
}

/* (Opcional) versión un poco más chica en móviles muy pequeños */
@media (max-width: 360px){
  .footer-social .btn.btn-square{
    width: 40px; height: 40px;
  }
  .footer-social .btn.btn-square i{ font-size: 1.2rem; }
}