/* ============================
   GMAJ PLACE — CSS UNIFICADO
   Paleta actualizada #0a3359
   Mejoras UX móvil: botones de navegación (chips) & responsive
   ============================ */

/* VARIABLES */
:root{
  --bg: #e6f5ff;
  --blue: #0a3359;
  --blue-dark: #132f4c;
  --accent: #36c0ff;
  --btn-light: #ccefff;
  --muted: #6b7280;
  --danger: #ff5b5b;
  --success: #28d07a;
  --radius: 8px;
  --gap: 0.6rem;
  --maxw: 1100px;
  --trans: 160ms;
  --ff: Arial, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
/* ---------- NAV MOBILE: Mejora de botones debajo del logo (móvil) ---------- */
@media (max-width: 699px) {

  /* Contenedor tipo "pill" alrededor del nav para que se vea como en la imagen */
  header nav.main-nav {
    width: calc(100% - 24px);
    background: linear-gradient(180deg, rgba(12,52,88,0.04), rgba(12,52,88,0.02));
    border: 1px solid rgba(10,51,89,0.06);
    box-shadow: 0 8px 22px rgba(10,51,89,0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
  }

  /* Cada enlace como botón grande y táctil */
  header nav.main-nav a {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;              /* hit-area cómoda */
    min-width: 110px;                /* ancho uniforme */
    height: auto;
    font-size: 0.98rem;
    line-height: 1.1;
    color: var(--blue-dark);
    background: transparent;
    border-radius: 40px;
    border: 2px solid transparent;
    transition: transform var(--trans), background var(--trans), box-shadow var(--trans);
    text-align: center;
    font-weight: 700;
    box-shadow: none;
  }
  

  /* Versión más compacta si el texto es largo (evita romper el diseño) */
  header nav.main-nav a span { 
    display:block; 
    white-space:normal;
    word-break:break-word;
    padding:0 2px;
  }

  /* Hover/touch feedback */
  header nav.main-nav a:active,
  header nav.main-nav a:hover,
  header nav.main-nav a:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(10,51,89,0.08);
    outline: none;
  }

  /* Estado activo: botón destacado tipo "pill" oscuro */
  header nav.main-nav a.active {
    background: linear-gradient(180deg, var(--blue), var(--blue-dark));
    color: #fff;
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 10px 24px rgba(10,51,89,0.14);
    transform: none;
  }

  /* Variante para que uno o dos botones se destaquen con íconos */
  header nav.main-nav a .icon {
    display:inline-block;
    margin-right:8px;
    width:20px; height:20px;
    vertical-align:middle;
    filter: invert(1) brightness(0.95);
    opacity: .95;
  }

  /* Si prefieres que se muestren en una sola fila desplazable */
  header nav.main-nav.nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 12px 8px;
  }
  header nav.main-nav.nav-scroll a {
    display: inline-flex;
    white-space: nowrap;
    margin-right: 8px;
  }

  /* Focus accesible */
  header nav.main-nav a:focus {
    box-shadow: 0 0 0 4px rgba(54,192,255,0.12);
    border-color: var(--accent);
  }
}
        form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        form input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
                border: 2px solid var(--blue);
        }
        form button {
            width: 100%;
            padding: 12px;
            background-color: #0a3359;
            color: #fff;
            font-size: 1em;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        form button:hover {
            background-color: #508991;
        }

/* 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; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

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

/* HEADER */
header {
  padding: 12px 16px;
  background:#fff;
  border-bottom:4px solid var(--blue);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.header-banner { display:none !important; }

/* Logo */
.logo {
  display:block;
  max-height:84px;
  width:auto;
  margin:0 auto;
}

/* NAV (estructura principal) */
/* Uso de un contenedor .nav-wrap para permitir scroll horizontal en móviles muy pequeños */
.nav-wrap {
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 12px;
}
nav.main-nav {
  display:flex;
  gap: .6rem;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;            /* no hacer wrap por defecto: usamos scroll si falta espacio */
  padding:8px;
  border-radius:999px;
  background: rgba(10,51,89,0.05);
  width:100%;
  max-width:920px;
  margin: 0 auto;
  overflow:auto;               /* permite scroll horizontal en pantallas angostas */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* firefox */
}
.sms-button { 
    disply:block; 
margin:10px 12px; 
padding:.6rem; 
background:#007bff; 
color:#fff; 
border-radius:8px; 
text-align:center; 
text-decoration:none; 
font-weight:700; 
    
}
.sms-button:hover {
  background-color: #0056b3;
  text-decoration: none;
}


nav.main-nav::-webkit-scrollbar { display: none; } /* chrome / safari */

/* Estilo de cada "chip" de la nav */
nav.main-nav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.7rem 1rem;         /* tamaño táctil cómodo */
  font-size:1rem;
  color: var(--blue-dark);
  text-decoration: none;
  border-radius:24px;         /* chips redondeados */
  transition: background var(--trans), transform .12s, box-shadow .12s, color .12s;
  background: var(--btn-light);
  border: 2px solid transparent;
  min-width: 96px;            /* ancho minimo para touch */
  text-align:center;
  white-space:nowrap;
  box-shadow: 0 2px 6px rgba(10,51,89,0.03);
  flex: 0 0 auto;            /* no se estiren */
}

/* Hover / focus accesible */
nav.main-nav a:hover,
nav.main-nav a:focus {
  background: var(--accent);
  color:#fff;
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 8px 18px rgba(10,51,89,0.12);
}

/* Estado activo */
nav.main-nav a.active {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  color:#fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 20px rgba(10,51,89,0.16);
}

/* Iconos dentro de chips (si existen) */
nav.main-nav a img.icon {
  width:18px;
  height:18px;
  margin-right:6px;
  filter: none;
}

/* Ajustes especiales: si tenés un grupo oval grande, lo reducimos visualmente */
.nav-pill {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:40px;
  background: rgba(10,51,89,0.03);
  gap:8px;
}

/* INPUTS (form controls) */
input, 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; }
input:focus, textarea:focus, select:focus {
  border-color: var(--blue-dark);
  box-shadow:0 8px 20px rgba(10,51,89,0.1);
}

/* SEARCH / FILTROS */
.search-row, .search-bar { display:flex; gap:var(--gap); align-items:flex-start; flex-wrap:wrap; margin-top:12px; }
.search-input-group { display:flex; gap:.6rem; align-items:center; flex:1 1 58%; min-width:220px; overflow:hidden; }
.search-input-group input[type="search"] {
  flex:1;
  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(10,51,89,0.06);
}
.search-input-group button, .search-input-group .search-btn {
  flex:0 0 auto;
  width:3rem;
  height:2.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius:6px;
  cursor:pointer;
  color:#fff;
  padding:0;
  margin-left:2px;
  margin-bottom:4px;
}
.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; }
.filter-buttons {
  display:grid; gap:1rem; width:100%; max-width:900px; justify-items:center; align-items:start; margin-left:80px;
}
@media (min-width: 1100px) { .filter-buttons { grid-template-columns: repeat(8, minmax(80px,1fr)); } }
@media (min-width: 700px) and (max-width: 1099px) { .filter-buttons { grid-template-columns: repeat(4, minmax(120px,1fr)); max-width:600px; } }
@media (max-width: 699px) { .filter-buttons { grid-template-columns: repeat(2, minmax(140px,1fr)); max-width:420px; margin:0 auto; } }
.filter-item { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; min-width:80px; }
.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(10,51,89,0.06); box-shadow:0 6px 18px rgba(10,51,89,0.04); }
.filter-btn.active { background: var(--accent); border-color: var(--blue-dark); }
.filter-btn.active img { filter: brightness(0) invert(1); }
.filter-desc { font-size: 0.92rem; color:var(--blue-dark); text-align:center; max-width:120px; line-height:1.15; }
.clear-filter {
  display: inline-block;
  padding: 8px 16px;
  background: #e74c3c;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  float: right;   /* 👈 pushes it to the right */
  margin: 10px 0; /* space around it */
}

.clear-filter:hover {
  background: #c0392b;
  transform: translateY(-2px);
}


/* GRID / CARDS / CAROUSEL */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px; margin-top:16px; }
.card {
  background:#fff;
  border:1px solid  #0038a8;;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 6px 18px rgba(10,51,89,0.05);
}
.card img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background-color:#f0f0f0; }
.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; }
.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; }
/* ---------- Descripciones: espacio fijo de 2 líneas + botón Ver más condicional ---------- */
.description-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* fallback para mantener espacio si JS no corre */
  min-height: 3.4em;
  box-sizing: border-box;
}

.description-wrapper .desc {
  margin: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
  box-sizing: border-box;
}

/* estado expandido */
.description-wrapper .desc.expanded {
  max-height: none !important;
}

/* botón "Ver más" visible */
.read-more {
  display: inline-block;
  align-self: flex-start;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: #007BFF;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 2px;
}

/* oculto por defecto; JS lo mostrará si hay overflow */
.read-more.hidden {
  display: none;
}

/* placeholder: ocupa espacio pero invisible (para alinear tarjetas) */
.read-more.placeholder {
  visibility: hidden;
  display: inline-block;
}

/* Asegurar layout de card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* TITULO / DESCRIPCION */
.title-limit { display:block; margin:.5rem 1rem 0; font-size:1.05rem; line-height:1.2em; min-height: calc(1.2em*2); max-height: calc(1.2em*2); overflow:hidden; }
.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 { 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 { 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: var(--blue); 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 */
.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;     border: 2px solid var(--blue);}

/* LINKS */
a { text-decoration:none; color:inherit; }
a:hover {  text-decoration: none; color:var(--accent); }

/* ACCESIBILITY: focus visible */
:focus { outline: none; }
:focus-visible { outline: 3px solid rgba(54,192,255,0.28); outline-offset: 2px; border-radius:6px; }

/* RESPONSIVE */
/* Desktop adjustments (keep grid and filters) */
@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; margin-left: 20px; }
}

/* Mobile specific tweaks */
@media (max-width: 699px) {

  /* Header: reduce logo size to allow más espacio para chips */
  header { gap:8px; padding:10px 10px; }
  .logo { max-height:64px; }

  /* Nav container: centrado y con padding lateral para scroll */
  .nav-wrap { padding:0 8px; }

  /* Chips: más compactos y legibles en móvil */
  nav.main-nav {
    gap: .45rem;
    padding:6px;
    border-radius:28px;
    max-width:100%;
    margin: 0 auto;
  }
  nav.main-nav a {
    padding: .55rem .8rem;
    font-size:0.96rem;
    min-width:84px;
    border-radius:20px;
  }
  

  /* Si hay muchos botones, permitir 2 filas limpias (fallback) */
  nav.main-nav.wrap-allow { flex-wrap:wrap; justify-content:center; gap:0.5rem; }

  /* Ubicación: reducimos la apariencia oval grande (si usas .nav-pill) */
  .nav-pill { padding:6px; border-radius:28px; background: rgba(10,51,89,0.03); margin:0 auto; }

  /* Ajustes buscador y botones */
  .search-input-group { width:100%; }
  .search-input-group button { width:2.8rem; height:2.4rem; }

  /* Ajuste de grid/filtros para pantallas muy pequeñas */
  .filter-buttons { grid-template-columns: repeat(2, minmax(0,1fr)); max-width:100%; margin-left:0; padding:0 8px; }
}

/* Footer */
footer {
    background: #f2f8ff;
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #ddd;
    margin-top: 2rem;
}
footer a.whatsapp-link { color: var(--success); text-decoration:none; font-weight:bold; }
footer p { margin:0.5rem 0 0; font-size:0.9rem; color:#666; }