/* ——— hero de alimentos (solo cambia la imagen) ——— */
.hero-ind{
  position:relative;padding:92px 0 78px;margin-bottom:1em;color:#fff;text-align:center;
  background-size:cover;background-position:center bottom;
  -webkit-mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
}

.need-container {
  margin: 1.5rem auto 1.75rem;
   padding: 0 1rem;
}
.need-container.ind-container {
  padding-left: 0;
  padding-right: 0;
}
/* Encabezado de la sección "¿Qué necesitás?" */
.need-header{
  margin: .25rem auto .75rem;
  padding: 0 1rem;               /* respira sin desalinear */
}

.need-title{
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
  color: #3b3430;                 /* cálido/profesional */
  letter-spacing: .2px;
  position: relative;
  text-align:center;
}
.need-title-tambien{
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
  color: #3b3430;                 /* cálido/profesional */
  letter-spacing: .2px;
  position: relative;
  text-align:center;
}
.need-title::after{
  content: "";
  display: block;
  width: 68px;
  margin:auto;
  height: 4px;
  margin-top: .45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #B7245C 0%, #f39c6b 100%); /* acento GPW */
}

.need-sub{
  margin: .35rem 0 0;
  color: #6f675f;
  font-weight: 500;
  font-size: .97rem;
  text-align:center;
}

/* Alineación y legibilidad en mobile */
@media (max-width: 640px){
  .need-header{
    text-align: center;
    padding: 0 .75rem;
  }
  .need-title::after{
    margin-left: auto;
    margin-right: auto; /* subraya centrado */
  }
  .need-sub{
    font-size: .95rem;
  }
}

/* Ajuste opcional: encajá la grilla con el header */
.need-container.ind-container{
  padding-left: 0;
  padding-right: 0;
}

.need-grid {
 display:grid;
  gap: .8rem;
  /* antes: auto-fill */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  /* evita que el contenido “ensanche” la celda */
  min-width: 0;
}

.need-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid #e0dcd5;
  background: linear-gradient(180deg, #fffdfb 0%, #f9f6f2 100%);
  color: #3d3b38;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.need-btn i {
  font-size: 1.1rem;
  color: #8b837c;
}
.need-btn:hover {
  background: #fff3ec;
  border-color: #b7245c;
  color: #b7245c;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(183,36,92,0.1);
}
.need-btn:hover i {
  color: #b7245c;
}
.need-btn.is-active {
  background: #f7d8d8;
  border-color: #b7245c;
  color: #7a1a40;
  box-shadow: 0 0 0 3px rgba(183,36,92,0.12);
}
.need-btn.is-active i {
  color: #7a1a40;
}
@media (max-width: 520px){
  .need-grid {
    grid-template-columns: repeat(2, 1fr); /* dos por fila sin cortar */
    gap: 0.6rem;
  }
  .need-btn {
    font-size: .9rem;
    padding: .8rem .6rem;
  }
}
/* Barra de contexto de necesidad */
.scope-bar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:#fff7f3;border:1px solid #f0e1da;border-radius:12px;
  padding:.65rem .9rem;margin:-.25rem auto 1rem;
}
.scope-left{display:flex;align-items:center;gap:.6rem;color:#5a4d46;}
.scope-left i{color:#b7245c;}
.scope-bar strong{color:#3b3430;}
.scope-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .7rem;border-radius:10px;border:1px solid #e9d6cf;
  background:#fff;color:#6b5b54;text-decoration:none;font-weight:600;
}
.scope-link:hover{border-color:#b7245c;color:#b7245c;}

/* Toolbar compacta cuando hay necesidad */
.filter-toolbar .chips-toggle{
  border:1px solid #e0dcd5;
  background: linear-gradient(180deg, #fffdfb 0%, #f7eee8 100%);
  border-radius:10px;
  padding:.55rem .8rem;
  font-weight:600;
  color:#574e49;
  text-align:center;
  transition:all .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  margin:auto;
  justify-content: center;
   text-align: center; 
}
.filter-toolbar .chips-toggle:hover{
  border-color:#b7245c;
  background:#fff3ec;
  color:#b7245c;
  transform:translateY(-1px);
}
.filter-toolbar .chips-toggle i{
  color:#a58e7b;
}
.filter-toolbar .chips-toggle:hover i{
  color:#b7245c;
}


@media (min-width: 480px){
  .filter-toolbar .chips-toggle{ min-width:9.5rem; }
}
/* Contenedores de los botones de filtros: centrados y con wrap */
.filter-toolbar,
.ind-filters-toggles{
  display:flex;
  flex-direction: column;    
  align-items:center;
  gap:.6rem;
  margin:.4rem auto 1rem;
  text-align:center;
}

/* Estilo unificado, cálido y profesional para los botones */
.filter-toolbar .chips-toggle,
.ind-filters-toggles .chips-toggle{
  border:1px solid #e0dcd5;
  background: linear-gradient(180deg, #fffdfb 0%, #f7eee8 100%);
  border-radius:10px;
  padding:.55rem .8rem;
  font-weight:600;
  color:#574e49;
  text-align:center;
  transition:all .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  min-width:9.5rem;        /* misma “huella” visual */
}

.filter-toolbar .chips-toggle i,
.ind-filters-toggles .chips-toggle i{
  color:#a58e7b;
}

.filter-toolbar .chips-toggle:hover,
.ind-filters-toggles .chips-toggle:hover{
  border-color:#b7245c;
  background:#fff3ec;
  color:#b7245c;
  transform:translateY(-1px);
}

.filter-toolbar .chips-toggle:hover i,
.ind-filters-toggles .chips-toggle:hover i{
  color:#b7245c;
}
/* El finder debajo del botón, centrado y con ancho cómodo */
.ind-filters-toggles .finder{
  width:100%;
  max-width:740px;      /* podés ajustar (680–800px) */
}
.ind-filters-toggles .busqueda-cv{
  margin-top:.25rem;    /* separa un poquito del botón */
}
.filter-toolbar{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  margin:.4rem auto 1rem;
  text-align:center;
}
/* En móviles muy chicos, que ocupen todo el ancho */
@media (max-width: 420px){
  .filter-toolbar .chips-toggle,
  .ind-filters-toggles .chips-toggle{
    min-width:auto;
    width:100%;
  }
}

.results-summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem .9rem;
  margin:0 0 .6rem 0;
  border:1px solid #e9e2db;
  border-radius:12px;
  background:#fffaf6;
  color:#574e49;
  font-weight:600;
  text-align:center;
}
.results-summary strong{ color:#b7245c; }

/* En móviles: siguen en fila, pero hacen wrap si no entran */
@media (max-width: 520px){
  .filter-toolbar{
    gap:.5rem !important;
  }
  .filter-toolbar .chips-toggle{
    padding:.5rem .8rem;
    font-size:.95rem;
  }
}
.ind-container.filter-toolbar{ display:flex !important; }
.ind-container.filter-toolbar .chips-toggle{ display:inline-flex !important; flex:0 0 auto !important; width:auto !important; margin:0 !important; }

/* --- FIX toolbar en fila + paneles debajo --- */

/* 1) Toolbar siempre en fila (con wrap), centrada */
.ind-page .contenido-principal .filter-toolbar,
.ind-container .filter-toolbar{
  display: flex !important;
  flex-direction: row !important;  
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .6rem !important;
  margin: .6rem auto 1rem !important;
}

/* 2) Botones: no ocupar 100%, sin margin:auto heredado */
.ind-page .contenido-principal .filter-toolbar .chips-toggle,
.ind-container .filter-toolbar .chips-toggle{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  white-space: nowrap;
}

/* 3) Los paneles colapsables alineados bajo la toolbar */
.filters-area .is-collapsible{
  width: 100%;
  margin-top: .5rem;
}

/* 4) En móviles muy chicos, que hagan wrap prolijo */
@media (max-width: 520px){
  .ind-page .contenido-principal .filter-toolbar{ gap:.5rem !important; }
  .ind-page .contenido-principal .filter-toolbar .chips-toggle{
    padding:.5rem .8rem; font-size:.95rem;
  }
}


   
   
   
.ind-page .need-grid{
 display:grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
  min-width: 0;
}

.ind-page .need-btn{
  display:flex; align-items:center; gap:.6rem;
  padding: .95rem 1.05rem;
  border-radius:14px;
  border:1px solid #e7e1db;
  background: linear-gradient(180deg,#fffdfb 0%,#f7f3ee 100%);
  color:#3d3b38; text-decoration:none; font-weight:700; font-size:.98rem;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.ind-page .need-btn i{
  font-size:1.15rem; line-height:1; color:#8e857e;
  flex:0 0 auto;
}

/* Hover / Active */
.ind-page .need-btn:hover{
  background:#fff7f3;
  border-color:#B7245C;
  color:#B7245C;
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(183,36,92,.12);
}
.ind-page .need-btn:hover i{ color:#B7245C; }

.ind-page .need-btn.is-active{
  background:linear-gradient(180deg,#ffe9f0 0%,#ffe1e9 100%);
  border-color:#B7245C;
  color:#7a1a40;
  box-shadow:0 0 0 3px rgba(183,36,92,.15);
}
.ind-page .need-btn.is-active i{ color:#7a1a40; }

/* Focus accesible */
.ind-page .need-btn:focus-visible{
  outline:none;
  border-color:#B7245C;
  box-shadow:0 0 0 3px rgba(243,156,107,.35);
}

/* Compactación en pantallas chicas */
@media (max-width: 520px){
  .ind-page .need-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .ind-page .need-btn{ padding:.8rem .7rem; font-size:.92rem; border-radius:12px; }
  .ind-page .need-btn i{ font-size:1.05rem; }
}

/* Respeta usuarios con reduce-motion */
@media (prefers-reduced-motion: reduce){
  .ind-page .need-btn{ transition:none; }
}
/* Botón "Ver farmacias de turno" (verde suave) */
.ind-page .filter-toolbar .btn-turno{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .8rem; border-radius:10px;
  border:1px solid #d7eadf;
  background:linear-gradient(180deg,#f6fff8 0%,#e9f8ee 100%);
  color:#246b3d; font-weight:700;
  text-decoration:none;                    /* sin subrayado */
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:all .15s ease;
}
.ind-page .filter-toolbar .btn-turno i{ color:#2f7a4b; }

/* Hover */
.ind-page .filter-toolbar .btn-turno:hover{
  background:#e6f7ec;
  border-color:#2f7a4b;
  color:#246b3d;
  text-decoration:none;                    /* sin subrayado en hover */
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(47,122,75,.12);
}
.ind-page .filter-toolbar .btn-turno:hover i{ color:#2f7a4b; }

/* Focus accesible */
.ind-page .filter-toolbar .btn-turno:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(47,122,75,.25);
  border-color:#2f7a4b;
}

/* Mobile compacto */
@media (max-width:520px){
  .ind-page .filter-toolbar .btn-turno{ padding:.5rem .75rem; font-weight:600; }
}
.hide{ display:none !important; }
/* Suaviza el desplazamiento por anclas */
html { scroll-behavior: smooth; }

/* el ancla debe ser bloque y ocupar “algo” */
.scroll-anchor{display:block;height:1px;width:1px}

/* margen de scroll para compensar header fijo (soporta iOS/Android modernos) */
.scroll-anchor{scroll-margin-top:132px}

/* fallback si el browser no soporta scroll-margin-top */
@supports not (scroll-margin-top: 1px){
  .scroll-anchor{position:relative;top:-132px}
}




/* ==== NAV MÓVIL — SOLO HASTA 991px ==== */
@media (max-width: 991px) {
  /* El header debe ser el “ancla” del desplegable */
  .gpw-header {
    position: sticky; /* si ya es fixed/sticky, no pasa nada */
    top: 0;
    z-index: 1000;
  }

  /* Panel del menú: se posiciona DEBAJO del header, no ocupa toda la pantalla,
     y NO empuja el layout (absolute) */
  .gpw-header #gpw-nav-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* inmediatamente debajo de la barra */
    width: 100%;
    max-height: calc(100vh - 64px); /* límite visible; ajustable */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* Abierto */
  .gpw-header #gpw-nav-menu.is-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Evitar que contenedores internos “achiquen” el ancho */
  .gpw-header #gpw-nav-menu [class*="container"] {
    max-width: none !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 !important;
  }

  /* Lista interna del menú */
  .gpw-header #gpw-nav-menu .gpw-nav__list {
    margin: 8px 0 16px;
    padding: 0;
  }
}

/* Escritorio: nos aseguramos de NO alterar nada */
@media (min-width: 992px) {
  .gpw-header #gpw-nav-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
  }
}
/* Padding suave en menú móvil, sin achicar el ancho */
@media (max-width: 991px){
  .gpw-header__nav{
    left: 0; right: 0; width: 100%;
    padding-inline: 16px;   /* 👈 respirito a izquierda y derecha */
    box-sizing: border-box; /* el padding no “roba” ancho */
  }
  /* opcional: un poco más de aire dentro de los ítems */
  .gpw-header__nav .gpw-nav > li > a{
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* --- HARDENING ANTI-DESBORDES (aplica a todos los micrositios) --- */
/* 1) Box sizing coherente en todo el árbol */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* 2) Nada debería poder ser más ancho que su contenedor */
html, body { width: 100%; margin: 0; }
.page-wrapper, .contenido-principal, .ind-container { max-width: 100%; }

/* 3) Evitar que textos/inline crezcan más que la columna (grid/flex) */
.need-grid > *, .ind-grid > *,
.ind-card, .ind-card__body,
.need-btn span, .ind-titlelink {
  min-width: 0;
  overflow-wrap: anywhere;    /* permite cortar palabras largas */
}

/* 4) Imágenes y medios nunca empujan el layout */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
.ind-card__img{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}
@media (min-width: 992px){
  .ind-card__img{ aspect-ratio: 3 / 2; }
}
.ind-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 5) Grillas: usar auto-fit y permitir que el contenido colapse sin empujar tracks */
.need-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ind-page .need-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* 6) En escritorio, eliminar cualquier rastro de overflow horizontal accidental */
@media (min-width: 992px){
  html { overflow-x: clip; }  /* estándar y más seguro que hidden */
}
.ind-card {
  position: relative;
  overflow: hidden; /* OK */
}
.ind-card__img{
  overflow: hidden;
  border-radius: 12px;            /* si ya lo tenías, mantenelo */
}
.ind-card__ribbon{
  position: absolute;
  top: 12px;
  right: -36px;                   /* tu valor original */
  left: auto;
  transform: rotate(45deg);
  padding: 5px 38px;
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .03em;
  background: var(--ind-accent, #f39c6b); /* fallback naranja si falta la var */
  z-index: 3;                     /* asegurar que quede arriba */
  pointer-events: none;           /* no interfiere con clicks */
  box-shadow: 0 2px 6px rgba(0,0,0,.12); /* sutil, opcional */
}

/* ===========================
   SALUD — Tercer nivel (familias de terapias)
   Reutilizable y scoped por clases 'familia-*'
=========================== */
.familias-toolbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  margin:.4rem auto .8rem;
}

.familia-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .9rem;
  border-radius:999px;
  border:1px solid #B7245C;
  background:#fff3ec;
  font-size:.9rem;
  font-weight:600;
  color:#B7245C;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:all .15s ease;
}
.familia-btn:hover{
  background:#fff3ec;
  border-color:#B7245C;
  color:#B7245C;
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(183,36,92,.1);
}
.familia-btn.is-active{
  background:#f7d8d8;
  border-color:#B7245C;
  color:#7a1a40;
  box-shadow:0 0 0 3px rgba(183,36,92,.12);
}
@media (max-width:520px){
  .familia-btn{ flex:1 1 100%; justify-content:center; }
}

.familia-subcats{
  margin:.3rem auto 1rem;
  padding:.65rem .9rem .75rem;
  border-radius:12px;
  border:1px solid #efe4da;
  background:#fffbf7;
}
.familia-subcats-title{
  margin:0 0 .4rem;
  font-size:.9rem;
  font-weight:600;
  color:#6a5a51;
}
.familia-subcats-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.familia-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.8rem;
  background:#fff;
  border:1px solid #e5d8cf;
  color:#5b4c44;
  text-decoration:none;
  cursor:pointer;
}
.familia-chip:visited{ color:#5b4c44; }
.familia-chip:hover{
  background:#fff3ec;
  border-color:#B7245C;
  color:#B7245C;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(183,36,92,.12);
  transform:translateY(-1px);
}
.familia-chip.is-active{
  background:#f7d8d8;
  border-color:#B7245C;
  color:#7a1a40;
  font-weight:600;
  box-shadow:0 0 0 2px rgba(183,36,92,.12);
}
.familia-chip.is-active:hover{
  background:#f5c3cf;
  border-color:#B7245C;
  color:#7a1a40;
}