/* ============================================================
   CGAP · Especialidades / Prácticas (practicas.html)
   ============================================================ */

/* grilla de prácticas (contenido inyectado por js/practicas.js). Columnas de
   ancho fijo (no 1fr) + justify-content:center: cuando hay pocas cards no se
   estiran para llenar el ancho, quedan centradas a su tamaño normal. */
.prac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,280px));gap:18px;justify-content:center}
/* .prac-card ahora es un <a> real (link a la página propia de la práctica,
   indexable) — se resetea el subrayado/color de link por defecto */
.prac-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit}
.prac-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blush)}
.prac-card .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--magenta);background:var(--blush);padding:.25rem .7rem;border-radius:100px}
.prac-card h3{font-size:1.12rem}
.prac-card p{font-size:.9rem;color:var(--muted);flex:1}
.prac-card .ver{font-size:.82rem;font-weight:700;color:var(--magenta)}

/* Modo "swipe" en mobile (especialidades.html #pracGrid, medicina-estetica.html
   #estGrid, tratamiento-depilacion-definitiva.html #depiGrid): en vez de la
   grilla envuelta en varias filas, el catálogo arranca como una sola fila
   horizontal que se recorre arrastrando el dedo (scroll nativo con snap, sin
   botones de flecha). El botón "Ver más"/"Ver en cuadrícula" de cada catálogo
   saca esta clase y vuelve a .prac-grid normal (ver practicas.js /
   estetica-catalogo.js / tratamiento-depilacion.js). */
@media(max-width:768px){
  .prac-grid.is-swipe{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:14px;padding-bottom:6px;scrollbar-width:none;
  }
  .prac-grid.is-swipe::-webkit-scrollbar{display:none}
  .prac-grid.is-swipe .prac-card{
    scroll-snap-align:start;flex:0 0 78vw;max-width:300px;width:78vw;
  }
}

/* ================================================
   PRÁCTICAS v2 (prac2-*)
   ================================================ */

/* Hero */
.prac2-hero{
  background:linear-gradient(135deg,#fce4f4 0%,#f5cde8 55%,#f0d4f5 100%);
  padding:148px 24px 140px;
}
.prac2-hero-inner{max-width:780px;margin:0 auto;text-align:center}
.prac2-hero-title{
  font-family:'Fraunces',serif;
  font-size:clamp(2.9rem,5.6vw,4rem);
  color:var(--plum);line-height:1.1;margin:0 0 1.1rem;
}
.prac2-hero-title em{color:var(--magenta);font-style:italic}
.prac2-hero-sub{font-size:1rem;color:var(--muted);line-height:1.7;margin:0 auto 2rem;max-width:520px}
.prac2-hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* Título de la sección "Prácticas y estudios" (va antes del buscador, que es
   sticky, para que el título no quede pegado también al scrollear) */
.prac2-practicas-intro{background:var(--cream);padding:56px 24px 0}

/* Buscador + filtros (debajo del hero)
   Queda pegado (sticky) justo debajo del navbar compacto (100px) al scrollear,
   para que el paciente siempre vea qué escribió / qué filtros tiene activos. */
.prac2-search-filter{
  background:var(--cream);
  padding:24px 24px 14px;
  position:sticky;
  top:100px;
  z-index:40;
}
.prac2-search-filter.is-stuck{box-shadow:var(--shadow-sm)}
.prac2-search-box{max-width:640px;margin:0 auto 18px;padding:.95rem 1.5rem}
.prac2-search-box svg{width:24px;height:24px}
.prac2-search-box input{font-size:1.08rem}

/* Sección genérica */
.prac2-section-title{
  font-family:'Fraunces',serif;font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--plum);text-align:center;margin:0 0 12px;
}
.prac2-section-sub{
  text-align:center;color:var(--muted);font-size:.9rem;
  line-height:1.6;max-width:520px;margin:0 auto 40px;
}

/* ¿No sabés? (mid) */
.prac2-nosabe{
  background:var(--plum);padding:52px 24px;
}
.prac2-nosabe-inner{
  max-width:860px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.prac2-nosabe-title{
  font-family:'Fraunces',serif;font-size:clamp(1.4rem,3vw,2rem);
  color:#fff;margin:0 0 8px;
}
.prac2-nosabe-sub{font-size:.92rem;color:rgba(255,255,255,.75);line-height:1.6;margin:0}
.prac2-nosabe-btn{
  flex-shrink:0;background:#fff;color:var(--plum);
  border-radius:100px;padding:14px 28px;
  font-weight:700;font-size:.9rem;text-decoration:none;
  transition:all .2s;white-space:nowrap;
}
.prac2-nosabe-btn:hover{background:var(--blush);color:var(--plum)}

/* Los botones del hero saltan a estos anchors; scroll-margin-top evita que
   el navbar (sticky, ~100-122px) tape el comienzo de la sección al saltar. */
#especialidades,#buscador{scroll-margin-top:120px}

/* Especialidades — el wrap va full-bleed (mismo criterio que el catálogo)
   para aprovechar todo el ancho de pantalla; el grid usa auto-fill así que
   ya se acomoda solo en distintos anchos (el detalle fino de breakpoints
   queda para cuando trabajemos el responsive). */
.prac2-esp{background:#fff;padding:72px 0}
.prac2-esp > .wrap{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 40px;
  box-sizing:border-box;
}
.prac2-esp-grid{
  display:grid;
  /* auto-fit (no auto-fill): las columnas "fantasma" vacías colapsan y las
     cards existentes se estiran para ocupar todo el ancho, en vez de quedar
     pegadas a la izquierda con un hueco vacío a la derecha */
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.prac2-esp-card{
  background:var(--blush-soft);border:1px solid var(--line);
  border-radius:18px;padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:8px;
  transition:box-shadow .2s,transform .2s;
}
.prac2-esp-card:hover{box-shadow:0 6px 20px rgba(173,30,119,.09);transform:translateY(-2px)}
/* icono y título en la misma línea para que la card no crezca tanto en alto */
.prac2-esp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prac2-esp-icon{font-size:2rem;line-height:1}
.prac2-esp-card h3{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--plum);margin:0}
.prac2-esp-card p{font-size:.83rem;color:var(--muted);line-height:1.6;margin:0;flex:1}
.prac2-esp-btns{display:flex;flex-direction:column;gap:6px;margin-top:4px}
/* .btn/.btn-outline-plum son inline-flex sin justify-content, así que al
   estirarse a lo ancho de la card (flex-direction:column los stretchea) el
   texto quedaba pegado a la izquierda; justify-content lo centra en el botón */
.prac2-esp-btn-ver{font-size:.78rem;padding:8px 16px;text-align:center;justify-content:center;background:var(--plum);color:#fff}
.prac2-esp-btn-ver:hover{background:var(--magenta-dark);border-color:var(--magenta-dark);color:#fff}

/* Catálogo dinámico */
.prac2-catalog{background:var(--cream);padding:28px 0 72px}
/* el título, el header "Más buscadas" y el grid comparten el mismo ancho
   full-bleed y el mismo padding lateral, así quedan alineados entre sí */
.prac2-catalog > .wrap{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 40px;
  box-sizing:border-box;
}
.prac2-filter-wrap{margin-bottom:0}
.prac2-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.prac2-chip{
  padding:9px 20px;border-radius:100px;
  border:1.5px solid var(--line);background:#fff;
  font-size:.83rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:all .18s;
}
/* Al quedar pegada (sticky), la barra solo muestra los chips activos —así
   el buscador siempre queda visible sin que los filtros ocupen alto extra. */
.prac2-search-filter.is-stuck .prac2-chip:not(.active){display:none}
.prac2-search-filter.is-stuck .prac2-filter-wrap:not(:has(.prac2-chip.active)){display:none}
.prac2-chip:hover{border-color:var(--magenta);color:var(--magenta)}
.prac2-chip.active{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.prac2-catalog-header{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:8px;margin-bottom:24px;
}
.prac2-catalog-title{font-family:'Fraunces',serif;font-size:1.4rem;color:var(--plum);margin:0}
.prac2-catalog-count{font-size:.85rem;color:var(--muted)}
.prac2-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.prac2-vermas-wrap{display:flex;justify-content:center;margin-top:32px}
.prac2-vermas{padding:12px 28px;background:#fff;color:var(--magenta);border-color:var(--magenta)}
.prac2-vermas:hover{background:var(--magenta);color:#fff}