/* ===============================
   BASE
================================= */
* { box-sizing: border-box; }

body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, video { max-width: 100%; height: auto; display: block; }

/* ===============================
   HEADER
================================= */
header{
  background-color: rgb(83,134,33);
  padding: 10px;
}

.header-container{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.logo-container{ flex: 1 1 auto; }

.logo{
  max-width: 260px;   /* límite razonable en desktop */
  width: 100%;
  height: auto;
}

.login-container{
  flex: 0 0 auto;
  text-align: right;
}

/* Form login */
.login-container form{
  display: block;          /* más estable que inline-block */
  text-align: left;
}

.login-container label{
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}

.login-container input[type="text"],
.login-container input[type="password"]{
  width: 220px;            /* desktop */
  max-width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
}

.login-container button,
.login-container input[type="submit"]{
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.login-container button:hover,
.login-container input[type="submit"]:hover{
  background-color: #555;
}

.login-container a{
  color: #fff;
  text-decoration: underline;
}
/* ===== FIX: botón abajo de los inputs (y no se sale) ===== */
.login-container form{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.login-container input[type="text"],
.login-container input[type="password"]{
  width: 100%;
  max-width: 320px;   /* mismo tamaño prolijo */
}

.login-container button,
.login-container input[type="submit"]{
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
  white-space: nowrap;
}

/* ===============================
   NAV (si usás ul.menu viejo en otras páginas)
================================= */
nav{ background-color: #333; }

.menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.menu li{ margin: 0; }

.menu a{
  color: rgb(83,134,33);
  text-decoration: none;
  padding: 12px 14px;
  display: block;
}

/* ===============================
   MAIN LAYOUT
================================= */
.main-container{
  display: flex;
  flex: 1;
  padding: 20px;
  background-color: rgb(83,134,33);
  gap: 20px;
}

.side{
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left-side,
.right-side{
  background-color: rgb(83,134,33);
}

.box{
  width: 230px;
  height: 230px;
  background-color: rgb(83,134,33);
  margin-bottom: 20px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.center{
  flex: 1;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ===============================
   FOOTER
================================= */
footer{
  background-color: #333;
  color: rgb(83,134,33);
  text-align: center;
  padding: 10px;
}

/* ===============================
   CONTACT FORM (si lo usás)
================================= */
#contact-form{
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: auto;
}

#contact-form label{ margin-bottom: 10px; }

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea{
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

#contact-form button[type="submit"]{
  padding: 10px;
  background-color: #333;
  color: rgb(83,134,33);
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#contact-form button[type="submit"]:hover{ background-color: #555; }

/* ===============================
   UI VARIOS (títulos/abecedario/transporte)
================================= */
.titulo-centrado{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.abecedario-centrado{
  text-align: center;
  margin-bottom: 20px;
}

.abecedario-centrado a{
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
}

.abecedario-centrado a:hover{
  color: #0056b3;
  text-decoration: underline;
}

.transporte-box{
  background-color: #fefefe;
  border-left: 4px solid #0d6efd;
  padding: 1rem;
  transition: background-color 0.3s;
}

.transporte-box:hover{ background-color: #f0f8ff; }

.titulo-transporte{ font-size: 1.25rem; color: #0d6efd; }
.actividad{ font-style: italic; color: #6c757d; }
.domicilio, .ubicacion, .contacto{ font-size: 0.95rem; }
.redes{ margin-top: 5px; font-size: 0.9rem; }

/* ===============================
   MENU CONSULTA (si lo usás en páginas viejas)
================================= */
.menu-consulta-container{
  text-align: center;
  margin: 20px auto;
  max-width: 300px;
}

.menu-consulta-titulo{
  font-weight: bold;
  margin-bottom: 10px;
}

.menu-opcion{
  display: block;
  padding: 15px 10px;
  margin-bottom: 10px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: opacity 0.2s ease;
}

.menu-opcion:hover{ opacity: 0.85; }

.verde-oscuro { background-color: #497E46; }
.verde-medio  { background-color: #70a86d; }
.verde-claro  { background-color: #9ecf9c; }
.azul         { background-color: #659cd6; }

/* ===============================
   RESPONSIVE
================================= */
@media (max-width: 768px){

  /* header en columna */
  .header-container{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .login-container{
    text-align: center;
    width: 100%;
  }

  .login-container form{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
  }

  .login-container input[type="text"],
  .login-container input[type="password"]{
    width: 100%;
  }

  /* layout */
  .side{ display: none !important; }
  .main-container{ display: block; padding: 12px; }
  .center{ padding: 12px; }

  /* carrusel */
  .ads-carousel-mobile{ display: block !important; }
}

@media (max-width: 480px){
  .logo{ max-width: 380px; }
  .center{ padding: 10px; }
}
/* ===============================
   MOBILE: centro más grande, sin “aire” alrededor
================================ */
@media (max-width: 768px) {

  /* 1) ocultar laterales sí o sí */
  .side { display: none !important; }

  /* 2) el contenedor principal sin márgenes internos */
  .main-container {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #fff !important; /* para que no se vea el verde alrededor */
  }

  /* 3) el centro a pantalla completa */
  .center {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px !important;   /* podés bajar a 6px si querés más “a full” */
    border-radius: 0 !important;
  }

  /* 4) si tenés un contenedor interno, que no limite */
  .content-container, .page-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
/* ===============================
   AVISOS DESKTOP (laterales chicos)
================================ */
@media (min-width: 769px){
  .ads-carousel-mobile{ display:none !important; } /* carrusel nunca en desktop */

  /* laterales más angostos */
  .side{
    flex: 0 0 155px !important;
    width: 155px !important;
    padding: 8px !important;
  }

  /* caja del aviso (tamaño tipo banner lateral) */
  .box{
    width: 155px !important;
    height: 136px !important;  /* ajustá si querés */
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .box img, .box video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display:block !important;
  }
}

/* ===============================
   AVISOS MOBILE - DE A PARES (1 slide = 2 avisos)
================================ */
.ads-carousel-mobile{ display:none; width:100%; margin:10px 0; }

.carousel-track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px 10px;
}

.carousel-slide{
  flex: 0 0 100%;
  display:flex;
  gap:10px;
  scroll-snap-align:center;
}

.carousel-item{
  flex:1 1 0;
  height:120px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  overflow:hidden;
}

.carousel-item a{ display:block; width:100%; height:100%; }

.carousel-item img,
.carousel-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* MOBILE: ocultar laterales y mostrar carrusel */
@media (max-width:768px){
  .side{ display:none !important; }
  .ads-carousel-mobile{ display:block !important; }

  .main-container{
    display:block !important;
    padding:0 !important;
    gap:0 !important;
    background:#fff !important;
  }

  .center{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;
    padding:10px !important;
    border-radius:0 !important;
  }
}

/* Desktop: no mostrar carrusel */
@media (min-width:769px){
  .ads-carousel-mobile{ display:none !important; }
}
/* FORCE: carrusel mobile 2 por fila (aunque haya CSS pisando) */
@media (max-width: 768px){

  .ads-carousel-mobile{ display:block !important; }

  .ads-carousel-mobile .carousel-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    gap:10px !important;
    padding:8px 10px !important;
  }

  .ads-carousel-mobile .carousel-slide{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    flex:0 0 100% !important;
    scroll-snap-align:center !important;
  }

  /* cada item = mitad de la pantalla */
  .ads-carousel-mobile .carousel-slide .carousel-item{
    flex:0 0 calc(50% - 5px) !important;
    width:calc(50% - 5px) !important;
    height:120px !important;
    overflow:hidden !important;
    border-radius:12px !important;
  }

  .ads-carousel-mobile .carousel-item img,
  .ads-carousel-mobile .carousel-item video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
}
/* ===============================
   DESKTOP: logo y avisos laterales (no achicar)
================================ */
@media (min-width: 769px){

  /* carrusel nunca en desktop */
  .ads-carousel-mobile{ display:none !important; }

  /* Logo más grande */
  .logo{
    max-width: 700px !important;  /* ajustá a gusto */
    width: auto !important;
    height: auto !important;
  }

  /* Laterales cuadrados (como antes) */
  .side{
    flex: 0 0 230px !important;
    width: 230px !important;
    padding: 10px !important;
  }

  .box{
    width: 230px !important;
    height: 230px !important;
    overflow: hidden !important;
    border-radius: 0px !important;
  }

  .box img, .box video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display:block !important;
  }
}


/* ===============================
   MOBILE: carrusel 2 por pantalla y CUADRADOS
================================ */
@media (max-width: 768px){

  .side{ display:none !important; }
  .ads-carousel-mobile{ display:block !important; }

  .ads-carousel-mobile .carousel-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    gap:10px !important;
    padding:8px 10px !important;
  }

  .ads-carousel-mobile .carousel-slide{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    flex:0 0 100% !important;
    scroll-snap-align:center !important;
  }

  /* 2 por fila + cuadrados */
  .ads-carousel-mobile .carousel-slide .carousel-item{
    flex:0 0 calc(50% - 5px) !important;
    width:calc(50% - 5px) !important;
    aspect-ratio: 1 / 1 !important;   /* <-- CUADRADO */
    height:auto !important;           /* <-- no rectangular */
    border-radius:12px !important;
    overflow:hidden !important;
  }

  .ads-carousel-mobile .carousel-item img,
  .ads-carousel-mobile .carousel-item video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
}
/* LOGO ARRIBA (mobile) */
@media (max-width: 768px){

  header .header-container{
    display:flex !important;
    flex-direction: column !important;
    align-items:center !important;
    gap: 12px !important;
  }

  header .logo-container{
    width: 100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  /* acá está la magia: más grande en celu */
  header .logo{
    width: min(92vw, 520px) !important;  /* casi todo el ancho */
    max-width: none !important;
    height: auto !important;
  }

  header .login-container{
    width: 100% !important;
    text-align: left !important;
  }
}
/* ===============================
   NAV PRINCIPAL (1 sola línea)
   - Desktop: 1 línea, centrado
   - Mobile: 1 línea con scroll horizontal
================================ */

/* la fila de links */
.barra-navegacion .navegacion-principal{
  display: flex;
  flex-wrap: nowrap !important;      /* NO permite saltos */
  overflow-x: auto;                  /* si no entra, scrollea */
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  gap: 14px;
  padding: 8px 10px;
  margin: 0;
  scrollbar-width: none;             /* Firefox: oculta barra */
}
.barra-navegacion .navegacion-principal::-webkit-scrollbar{
  display: none;                     /* Chrome: oculta barra */
}

/* cada link: que no se parta en 2 líneas */
.barra-navegacion .navegacion-principal a{
  white-space: nowrap;
  flex: 0 0 auto;                    /* no se estira */
}

/* en mobile: que arranque desde la izquierda (más natural) */
@media (max-width: 768px){
  .barra-navegacion .navegacion-principal{
    justify-content: flex-start !important;
  }
}
/* ===============================
   FIX MENU DESPLEGABLE
   - Fondo igual al del sitio (verde)
   - Opciones mismo ancho que "Consulta directa..."
================================ */

/* el contenedor del bloque */

/* el botón de "Consulta directa..." */
.menu-toggle{
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* las opciones: mismo ancho que el botón (adiós 94%) */
.menu-opcion{
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}