/* ============================================================
   CGAP · Página de detalle de práctica (pages/practica-*.html)
   Formato "ficha informativa": banda de navegación angosta,
   título+puntos a la izquierda / turno a la derecha con divisor,
   y un carrusel de prácticas relacionadas al final.
   ============================================================ */

/* Banda de navegación: solo el link de volver, con el fondo degradé
   de marca, angosta (ya no contiene título/subtítulo). */
.pd-navband{
  background:linear-gradient(135deg,#fce4f4 0%,#f5cde8 55%,#f0d4f5 100%);
  padding:18px 24px;
}
.pd-navband .esp-back{margin-bottom:0}

/* Ficha: título + puntos a la izquierda, divisor, turno a la derecha */
.pd-ficha{background:#fff;padding:56px 24px}
.pd-ficha-grid{display:flex;gap:48px;align-items:flex-start}
.pd-ficha-left{flex:1.3;min-width:0}
.pd-ficha-title{
  font-family:'Fraunces',serif;font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--plum);margin:0 0 .5rem;line-height:1.15;text-align:left;
}
.pd-ficha-points{list-style:none;margin:0;padding:0}
.pd-ficha-points li{display:flex;gap:.7rem;padding:.7rem 0;border-top:1px solid var(--line);font-size:.92rem}
.pd-ficha-points li:first-child{border-top:none}
.pd-ficha-points b{color:var(--plum);min-width:120px;flex:none;font-weight:700}
.pd-ficha-points span{color:var(--text)}

.pd-ficha-divider{width:1px;align-self:stretch;background:var(--line)}

.pd-ficha-right{flex:1;min-width:0}
.pd-ficha-subtitle{
  font-family:'Fraunces',serif;font-size:1.15rem;color:var(--plum);
  margin:0 0 .8rem;
}
.pd-ficha-intro{font-size:.92rem;color:var(--muted);line-height:1.7;margin:0 0 1.5rem}
.pd-ficha-btns{display:flex;flex-direction:column;gap:.8rem}
.pd-ficha-btns .btn{width:100%;justify-content:center}
.pd-ficha-link{display:block;margin-top:1rem;font-size:.85rem;color:var(--muted);text-decoration:underline}
.pd-ficha-link:hover{color:var(--plum)}
/* Botón del portal: mismo magenta que el "Portal de Pacientes" del nav,
   pero con el efecto invertido (relleno por defecto, se vacía en hover). */
.pd-btn-portal{
  display:flex;align-items:center;justify-content:center;width:100%;
  padding:14px 28px;border-radius:100px;
  border:2px solid var(--magenta);
  background:var(--magenta);color:#fff;
  font-weight:700;font-size:.9rem;text-decoration:none;
  transition:all .2s;
}
.pd-btn-portal:hover{background:transparent;color:var(--magenta)}
.pd-portal-note{
  margin:1.2rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.6;
  padding-top:1rem;border-top:1px solid var(--line);
}

/* Lista de beneficios (fichas de tratamiento estético, pages/tratamiento-*.html):
   debajo de los puntos de la ficha, mismo marcador ✦ que .est-list en
   medicina-estetica.css, duplicado acá para no depender de esa hoja en una
   página que no es medicina-estetica.html. */
.pd-beneficios-title{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--plum);margin:1.6rem 0 .8rem}
.pd-beneficios{list-style:none;margin:0;padding:0}
.pd-beneficios li{font-size:.92rem;color:var(--text);font-weight:600;padding:.4rem 0 .4rem 1.4rem;position:relative;line-height:1.5}
.pd-beneficios li::before{content:'✦';position:absolute;left:0;color:var(--magenta);font-size:.6rem;top:.65rem}

/* Cuerpo de artículo (fichas de blog, pages/blog-<slug>.html): un párrafo
   de desarrollo debajo de "En detalle" (reusa .pd-beneficios-title como
   encabezado) y una nota de aviso chica al pie de la columna izquierda. */
.pd-ficha-detail{font-size:.92rem;color:var(--text);line-height:1.75;margin:0}
.pd-ficha-disclaimer{font-size:.8rem;color:var(--muted);line-height:1.6;margin:1.6rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}

/* Equipo utilizado (solo en las fichas donde hay foto disponible del
   dispositivo): fila con el texto a la izquierda y la foto a la derecha,
   que se funde con el fondo mediante un degradé en su borde izquierdo para
   integrarse con la columna de texto en vez de cortar en seco. */
.pd-equipo{background:var(--cream);padding:64px 24px}
.pd-equipo-grid{
  display:flex;align-items:stretch;
  max-width:var(--maxw);margin:0 auto;
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.pd-equipo-body{flex:1.1;min-width:0;padding:40px 48px;display:flex;flex-direction:column;justify-content:center}
.pd-equipo-body h2{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--plum);margin:0 0 .8rem}
.pd-equipo-body p{color:var(--muted);font-size:.95rem;line-height:1.75;margin:0}
.pd-equipo-img{
  flex:1;min-width:0;min-height:280px;
  background-size:cover;background-position:center;
  position:relative;
}
.pd-equipo-img::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 25%);
}

@media (max-width:768px){
  .pd-ficha-grid{flex-direction:column}
  .pd-ficha-divider{width:100%;height:1px}
  .esp-section > .wrap{padding:0 20px}
  .car-track{gap:14px}
  .car-track .prac-card{flex:0 0 220px;padding:1.1rem 1.2rem}
  .car-track .prac-card h3{font-size:1rem}
  .car-track .prac-card p{font-size:.83rem}
  .car-btn{width:38px;height:38px;font-size:1.2rem}
  .car-btn.prev{left:-8px}
  .car-btn.next{right:-8px}
  .pd-equipo-grid{flex-direction:column}
  .pd-equipo-img{order:-1;min-height:220px}
  .pd-equipo-img::before{background:none}
  .pd-equipo-body{padding:28px 24px}
}

/* Carrusel de "Otras prácticas" (mismo patrón que el carrusel de
   especialistas/novedades de index.css, copiado acá para no depender
   de esa hoja en esta página) */
.carousel{position:relative}
.car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 2px 18px;-ms-overflow-style:none;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-btn{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--magenta);font-size:1.5rem;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:background .2s,transform .2s}
.car-btn:hover{background:var(--magenta);color:#fff;transform:translateY(-50%) scale(1.06)}
.car-btn.prev{left:-14px}
.car-btn.next{right:-14px}
.car-track .prac-card{scroll-snap-align:start;flex:0 0 280px}