/* ============================
   GMAJ PLACE — CSS UNIFICADO
   Arreglos solicitados (ver "Notas" abajo)
   ============================ */

/* VARIABLES */
:root{
  --bg: #f0f8ff;
  --blue: #0038a8;
  --blue-dark: #002060;
  --accent: #66c0ff;
  --btn-light: #e6f9ff;
  --muted: #6b7280;
  --danger: #ff4d4f;
  --success: #25D366;
  --radius: 8px;
  --gap: 0.6rem;
  --maxw: 1100px;
  --trans: 160ms;
  --ff: Arial, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
/* inputs */
    input {
        width: 93%;
        font-size: 1em;
        padding: 10px;
        margin-top: 5px;
    }

input, textarea {
    width: 90%;
    padding: 8px;
    margin: 5px 0 15px;
    border: 1px solid #0038a8;
    border-radius: 4px;
 }

/* RESET / BASE */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family: var(--ff); color:var(--blue); line-height:1.45; }

/* CONTENEDOR GLOBAL */
.container { width:94%; max-width:var(--maxw); margin:18px auto; padding:0 12px; }

/* ---------------- HEADER (centrado, minimal) ---------------- */
header { padding: 10px 20px; background:#fff; border-bottom:4px solid var(--blue); position:relative; }
.header-banner { display:none !important; } /* ocultamos banner como pediste */
.logo { display:block; max-height:84px; width:auto; margin:0 auto; }

/* NAV */
nav.main-nav {
  display:flex;
  gap: .75rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:6px 8px;
  border-radius:999px;
  background: rgba(0,56,168,0.03);
  width:100%;
  max-width:920px;
  margin: 8px auto 0;
}
nav.main-nav a {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.55rem .9rem; font-size:1.03rem;
  color: var(--blue); text-decoration: none;
  border-radius:40px; transition: background var(--trans), transform .12s;
  background: transparent; border: 2px solid transparent;
}
nav.main-nav a:hover { background: rgba(0,56,168,0.09); transform: translateY(-2px); }
nav.main-nav a.active { background: var(--blue); color:#fff; border-color: var(--blue-dark); }

/* ---------------- BÚSQUEDA + FILTROS ---------------- */
.search-row, .search-bar {
  display:flex;
  gap:var(--gap);
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Input-group */
.search-input-group {
  display:flex;
  gap:.6rem;
  align-items:center;
  flex:1 1 58%;
  min-width:220px;
}
.search-input-group input[type="search"] {
  width:100%;
  padding:.6rem .75rem;
  font-size:1rem;
  border:2px solid var(--blue);
  border-radius:6px;
  background:#fff;
  outline:none;
  transition: box-shadow .14s, border-color .14s;
}
.search-input-group input[type="search"]:focus {
  border-color:var(--blue-dark);
  box-shadow:0 8px 20px rgba(0,56,168,0.06);
}
.search-input-group button,
.search-input-group .search-btn {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius:6px;
  padding:.45rem;
  cursor:pointer;
}
.search-input-group button img {
  width:18px;
  height:18px;
  filter:brightness(0) invert(1);
}

/* FILTER-AREA */
.filter-area {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:0 0 42%;
  min-width:260px;
  position:relative;
  gap:1rem;
}

/* Botones de categoría */
.filter-buttons {
  display:grid;
  gap:1rem; /* más separación */
  width:100%;
  max-width:900px; /* más ancho para evitar amontonamiento */
  justify-items:center;
  align-items:start;
  margin-left:80px;
}
/* Desktop grande: 8 columnas */
@media (min-width: 1100px) {
  .filter-buttons { grid-template-columns: repeat(8, minmax(80px,1fr)); }
}
/* Desktop normal / laptop: 4 columnas */
@media (min-width: 700px) and (max-width: 1099px) {
  .filter-buttons { grid-template-columns: repeat(4, minmax(120px,1fr)); max-width:600px; }
}
/* Mobile: 2 columnas */
@media (max-width: 699px) {
  .filter-buttons { 
    grid-template-columns: repeat(2, minmax(140px, 1fr)); 
    max-width: 420px; 
    margin: 0 auto; /* centra el grid */
  }
}

/* wrapper por botón + descripción */
.filter-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:80px; /* extra para dar aire */
}

/* Botón categoría */
.filter-btn {
  background: var(--btn-light);
  border: 2px solid var(--blue);
  border-radius:6px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s, box-shadow .14s;
  padding:6px;
}
.filter-btn img{
  max-width:24px;
  max-height:24px;
}
.filter-btn:hover {
  transform: translateY(-2px);
  background: rgba(0,56,168,0.06);
  box-shadow:0 6px 18px rgba(0,56,168,0.04);
}
.filter-btn.active {
  background: var(--accent);
  border-color: var(--blue-dark);
}
.filter-btn.active img {
  filter: brightness(0) invert(1);
}

/* descripción */
.filter-desc {
  font-size: 0.92rem;
  color:var(--blue-dark);
  text-align:center;
  max-width:120px;
  line-height:1.15;
}

/* clear-filter: junto a los botones de categorías */
.clear-filter {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--danger);
  color:#fff;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  text-decoration:none;
  transition: opacity .12s;
  margin-left: 8px; /* separación del último botón */
  flex-shrink: 0;   /* evita que se achique en pantallas chicas */
}
.clear-filter:hover {
  opacity:.92;
}

/* Grupo de búsqueda ajustado */
.search-input-group {
  display: flex;
  flex: 1;
  min-width: 200px;
  overflow: hidden; /* evita que sobresalga */
}

.search-input-group input[type="search"] {
  flex: 1;
  border: none;
  padding: 0.5rem 0.75rem; /* espacio cómodo */
  font-size: 1rem;
   border: 2px solid #0038a8;
  border-radius: 6px;
}

.search-input-group button {
  flex: 0 0 auto;         /* ancho automático */
  width: 3rem;            /* ancho fijo y más pequeño */
  height:2.4rem;
  border: none;

   border: 2px solid #0038a8;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;             /* quitar padding extra */
  margin-left:2px;
  margin-bottom: 4px;
}

/* Ajuste del icono para que no crezca demasiado */
.search-input-group button::before {
  content: "";
  font-size: 1.2rem;
}


/* ---------------- GRID / CARDS / CAROUSEL ---------------- */
/* Grid publicaciones (mantengo tu estructura) */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px; margin-top:16px; }

/* CARD */
.card {
  background:#fff;
  border:1px solid rgba(0,56,168,0.12);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 18px rgba(2,24,71,0.03);
}
.card {
    background: #ffffff;
    border: 1px solid #0038a8;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: contain; /* Muestra toda la imagen sin recortar */
    background-color: #f0f0f0; /* Opcional: para imágenes más pequeñas */
}

/* CAROUSEL: aseguramos altura mínima para que no salte al filtrar */
.carousel { position:relative; width:100%; overflow:hidden; aspect-ratio:4/3; min-height:180px; background:#f6f8fb; }
.carousel-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .35s ease; }
.carousel-img.active { opacity:1; }
/* controles */
.carousel button.prev, .carousel button.next {
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,0.45); color:#fff; border:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10;
}
.carousel button.prev { left:8px; } .carousel button.next { right:8px; }

/* TITULO: forzamos altura igual para todos (2 renglones) */
.title-limit {
  display:block;
  margin: .5rem 1rem 0;
  font-size: 1.05rem;
  line-height:1.2em;
  min-height: calc(1.2em * 2); /* reserva 2 renglones */
  max-height: calc(1.2em * 2);
  overflow:hidden;
}

/* DESCRIPTION WRAPPER: reserva espacio para 2 líneas + 'ver más' */
.description-wrapper { display:flex; flex-direction:column; min-height: calc(1.4em*2 + 1.2em + 0.4rem); padding: .5rem 1rem 0; }
.desc {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4em; margin:0;
}
.desc.expanded { -webkit-line-clamp: unset; overflow:visible; }

/* READ MORE: por defecto oculto (visibilidad), JS lo activa con .visible */
.read-more { margin-top:.3rem; font-size:0.95rem; color:var(--blue); text-decoration:none; font-weight:600; visibility:hidden; }
.read-more.visible { visibility:visible; }

/* SHARE icon (mantener) */
.share-icon { width:32px; height:32px; border-radius:50%; background:transparent url('../icons/share.png') center/60% no-repeat; border:none; cursor:pointer; margin:8px 12px 0 12px; }

/* BOTONES CONTACTO */
.wa-button { display:block; margin:10px 12px; padding:.6rem; background:var(--success); color:#fff; border-radius:8px; text-align:center; text-decoration:none; font-weight:700; }
.call-button { display:block; margin:8px 12px 12px; padding:.52rem; background:#007bff; color:#fff; border-radius:8px; text-align:center; text-decoration:none; font-weight:700; }

/* DELETE button */
.delete-button { display:block; margin:8px 12px 12px; padding:.5rem; background:var(--danger); color:#fff; border-radius:8px; text-align:center; text-decoration:none; }

/* ----------------- FORMS (estilos recuperados del css previo) ----------------- */
/* Estilo base inputs - vuelve a tu apariencia anterior */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select {
  width:100%;
  padding:.6rem .75rem;
  margin:6px 0 12px;
  border:2px solid var(--blue);
  border-radius:6px;
  background:#fff;
  color:var(--blue-dark);
  font-size:1rem;
  box-sizing:border-box;
}
textarea { min-height:120px; resize:vertical; }

/* Botones de formularios */
button, .btn {
  border-radius:6px;
  border:none;
  padding:.6rem .9rem;
  cursor:pointer;
  background:var(--blue);
  color:#fff;
  transition: transform .12s, opacity .14s;
}
button.secondary { background:transparent; border:2px solid rgba(0,56,168,0.12); color:var(--blue); }

/* Contact form específico (si usas .contact-form) */
.contact-form { background:#fff; padding:12px; border:2px solid var(--blue); border-radius:8px; max-width:720px; margin:0 auto; }
.contact-form label { display:block; margin-top:8px; color:var(--blue-dark); font-weight:600; }
.contact-form input, .contact-form textarea, .contact-form select { margin-top:6px; }

/* Remove default link underlines, but keep accessible focus style */
a { text-decoration:none; color:inherit; }
a:hover { text-decoration:underline; } /* subrayado al hover para accesibilidad */

/* ---------------- MISC / RESPONSIVE ---------------- */
.grid { gap:16px; }
@media (max-width: 900px) {
  .search-input-group { flex:1 1 62%; min-width:200px; }
  .filter-area { flex: 1 1 100%; justify-content:center; min-width:unset; }
  .filter-buttons { grid-template-columns: repeat(4, minmax(0,1fr)); max-width:520px; }
}
@media (max-width: 699px) {
  .filter-buttons { grid-template-columns: repeat(2, minmax(0,1fr)); max-width:100%; }
  .carousel button.prev, .carousel button.next { width:32px; height:32px; font-size:1.1em; }
  .title-limit { min-height: calc(1.2em * 2); }
  .read-more { font-size:1rem; }
}

/* Footer - puedes moverlo a style.css */
        footer {
            background: #f8f8f8;
            padding: 1rem;
            text-align: center;
            border-top: 1px solid #ddd;
            margin-top: 2rem;
        }
        footer a.whatsapp-link {
            color: #25D366;
            text-decoration: none;
            font-weight: bold;
        }
        footer p {
            margin: 0.5rem 0 0;
            font-size: 0.9rem;
            color: #666;
        }