/* =========================================================
   Diagonal CQ — Artículos
   Todo va bajo .dq-single o .dq-listado para no chocar con
   los estilos del tema.
   ========================================================= */

.dq-single{
  --col:760px;
  --ancho:1320px;
  --canal:24px;
  --lectura:#3A3733;
}

/* --- bandas --- */
.dq-single .banda{ padding:0 var(--canal); }
.dq-single .banda > .interior{ max-width:var(--ancho); margin:0 auto; }
.dq-single .banda.crema{ background:var(--cream); }
.dq-single .banda.crema-2{ background:var(--cream-2); }
.dq-single .banda.rosa{ background:var(--blush); }

/* --- barra de progreso (se inyecta dentro de header) --- */
header .dq-progreso{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--rose-deep); pointer-events:none;
}

/* =========================================================
   PORTADA
   ========================================================= */
.dq-single .portada{ padding-top:64px; padding-bottom:52px; }
.dq-single .portada .interior{ max-width:1080px; }

.dq-single .migas{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:30px;
}
.dq-single .migas span{ margin:0 9px; color:var(--blush-2); }
.dq-single .migas em{ font-style:normal; }
.dq-single .migas a:hover{ color:var(--ink); }

.dq-single .chip{
  display:inline-block; padding:7px 16px; border-radius:999px;
  background:var(--blush); color:var(--rose-deep);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.dq-single .chip:hover{ background:var(--blush-2); }

.dq-single .portada h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(38px,6vw,80px); line-height:1; letter-spacing:-.015em;
  margin:24px 0 0; max-width:15ch; text-wrap:balance;
}
.dq-single .portada .entradilla{
  font-family:var(--font-display); font-size:clamp(19px,2.1vw,26px);
  line-height:1.45; color:var(--taupe); margin-top:28px; max-width:38ch;
}

.dq-single .fila-datos{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
  margin-top:46px; padding-top:24px; border-top:1px solid rgba(38,36,34,.12);
}
.dq-single .firma{ display:flex; align-items:center; gap:13px; }
.dq-single .firma .cara{
  width:42px; height:42px; border-radius:50%; overflow:hidden;
  background:var(--cream-2); flex:0 0 42px;
}
.dq-single .firma .cara img{ width:100%; height:100%; object-fit:cover; }
.dq-single .firma b{ display:block; font-size:13.5px; font-weight:600; }
.dq-single .firma span{ display:block; font-size:11.5px; color:var(--taupe); margin-top:1px; }
.dq-single .datos{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-left:auto;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--taupe);
}
.dq-single .datos span{ white-space:nowrap; }

/* =========================================================
   FOTO DE PORTADA
   ========================================================= */
.dq-single .portada-foto{ padding-bottom:0; }
.dq-single .portada-foto .marco{
  border-radius:24px; overflow:hidden; background:var(--cream-2);
  aspect-ratio:21/9;
}
.dq-single .portada-foto .marco img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   CUERPO CON ÍNDICE
   ========================================================= */
.dq-single .lectura{ padding-top:72px; padding-bottom:72px; }
.dq-single .lectura .interior{
  display:grid; grid-template-columns:200px minmax(0,var(--col));
  gap:0 72px; justify-content:center; align-items:start;
}
.dq-single .indice{ position:sticky; top:104px; }
.dq-single .indice p{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--taupe); font-weight:600; margin-bottom:16px;
}
.dq-single .indice ol{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px; }
.dq-single .indice a{
  display:block; padding:7px 0 7px 16px; font-size:13.5px; line-height:1.4;
  color:var(--taupe); border-left:2px solid rgba(38,36,34,.12);
  transition:color .25s, border-color .25s;
}
.dq-single .indice a:hover{ color:var(--ink); }
.dq-single .indice a.activo{
  color:var(--ink); border-left-color:var(--rose-deep); font-weight:500;
}

/* --- tipografía del cuerpo --- */
.dq-single .texto{ min-width:0; }
.dq-single .texto > p{
  font-size:19px; line-height:1.75; color:var(--lectura); margin:0 0 28px;
}
.dq-single .texto > p:first-child{ font-size:22px; line-height:1.6; color:var(--ink); margin-bottom:38px; }
.dq-single .texto h2{
  font-family:var(--font-display); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(26px,3.2vw,34px); line-height:1.2; margin:64px 0 20px;
  text-wrap:balance; scroll-margin-top:110px;
}
.dq-single .texto h2:first-child{ margin-top:0; }
.dq-single .texto h3{
  font-family:var(--font-body); font-size:16px; font-weight:700;
  letter-spacing:0; margin:34px 0 10px;
}
.dq-single .texto ul,
.dq-single .texto ol{ margin:0 0 28px; padding-left:22px; }
.dq-single .texto li{ font-size:18px; line-height:1.7; color:var(--lectura); margin-bottom:12px; }
.dq-single .texto li::marker{ color:var(--rose); }
.dq-single .texto strong{ font-weight:600; color:var(--ink); }
.dq-single .texto a:not([class]){
  color:var(--ink); border-bottom:1.5px solid var(--rose);
}
.dq-single .texto a:not([class]):hover{ border-bottom-color:var(--ink); }
.dq-single .texto figure{ margin:36px 0; }
.dq-single .texto figure img{ border-radius:20px; }
.dq-single .texto figcaption{
  font-size:12px; line-height:1.6; color:var(--taupe); margin-top:12px;
}

/* =========================================================
   PIEZAS DEL EDITOR
   ========================================================= */
.dq-single .texto .dq-rotulo{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--rose-deep); margin-bottom:20px;
}

/* -- pasos numerados -- */
.dq-single .dq-pasos{
  background:var(--cream-2); border-radius:24px;
  padding:36px 34px 34px; margin:48px 0;
}
.dq-single .dq-pasos .dq-paso-num{
  font-family:var(--font-display); font-size:28px; line-height:1;
  color:var(--rose-deep); margin:0 0 12px;
}
.dq-single .dq-pasos h3{ font-size:15px; margin:0 0 8px; }
.dq-single .dq-pasos p:not(.dq-paso-num):not(.dq-rotulo){
  font-size:14px; line-height:1.65; color:var(--taupe); margin:0;
}

/* -- cita -- */
.dq-single .dq-cita{ margin:56px 0; text-align:center; }
.dq-single .dq-cita::before{
  content:""; display:block; width:52px; height:1px;
  background:var(--rose-deep); margin:0 auto 30px;
}
.dq-single .dq-cita .dq-cita-texto{
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:clamp(23px,3vw,34px); line-height:1.32; color:var(--ink);
  margin:0; text-wrap:balance;
}
.dq-single .dq-cita .dq-cita-firma{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--taupe); margin:24px 0 0;
}

/* -- pareja de imágenes: rompe la columna y llega al margen -- */
/* La columna de texto no esta centrada en la ventana (el indice
   la desplaza), asi que el truco de 100vw no vale. La rejilla mide
   200+72+760 = 1032px y va centrada, luego el borde izquierdo del
   texto siempre cae en 50vw - 244px. De ahi salen estos numeros. */
.dq-single .dq-duo{
  width:calc(100vw - (var(--canal) * 2)); max-width:none;
  margin-left:calc(268px - 50vw); margin-right:0;
  margin-top:56px; margin-bottom:56px;
  position:relative; z-index:2;
}
.dq-single .dq-duo .wp-block-columns{ gap:16px; margin:0; align-items:stretch; }
.dq-single .dq-duo figure{ margin:0; height:100%; }
.dq-single .dq-duo figure img{
  width:100%; height:100%; object-fit:cover; border-radius:20px;
  aspect-ratio:auto;
}
.dq-single .dq-duo .wp-block-column{ display:flex; }
.dq-single .dq-duo .wp-block-column > figure{ width:100%; aspect-ratio:1/1; }
.dq-single .dq-duo .wp-block-column:last-child > figure{ aspect-ratio:16/9; }
/* el pie vuelve a alinearse con la columna de texto */
.dq-single .dq-duo .dq-pie{
  max-width:none; margin:16px 0 0;
  padding-left:calc(50vw - 268px);
  font-size:12px; line-height:1.6; color:var(--taupe);
}

/* -- tabla comparativa -- */
.dq-single .dq-tabla{ margin:44px 0; overflow-x:auto; }
.dq-single .dq-tabla table{
  border-collapse:collapse; width:100%; min-width:520px;
  font-size:15px; background:transparent;
}
.dq-single .dq-tabla th{
  text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--taupe); padding:0 18px 14px;
  border-bottom:1px solid rgba(38,36,34,.18);
}
.dq-single .dq-tabla td{
  padding:16px 18px; line-height:1.6; color:var(--lectura);
  border-bottom:1px solid rgba(38,36,34,.10); vertical-align:top;
}
.dq-single .dq-tabla tr:last-child td{ border-bottom:0; }
.dq-single .dq-tabla td:first-child{ font-weight:600; color:var(--ink); }
.dq-single .dq-tabla figcaption{ margin-top:14px; }

/* -- preguntas frecuentes -- */
.dq-single .dq-faq{ margin:56px 0; }
.dq-single .dq-faq h2{ margin-bottom:22px; }
.dq-single .dq-faq-item{
  border-top:1px solid rgba(38,36,34,.14); padding:0;
}
.dq-single .dq-faq-item:last-of-type{ border-bottom:1px solid rgba(38,36,34,.14); }
.dq-single .dq-faq-item summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0;
  font-size:17px; font-weight:600; color:var(--ink); position:relative;
}
.dq-single .dq-faq-item summary::-webkit-details-marker{ display:none; }
.dq-single .dq-faq-item summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--rose-deep); border-bottom:1.5px solid var(--rose-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s ease;
}
.dq-single .dq-faq-item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.dq-single .dq-faq-item summary:hover{ color:var(--rose-deep); }
.dq-single .dq-faq-item > p{
  font-size:17px; line-height:1.7; color:var(--lectura);
  margin:0 0 22px; padding-right:40px;
}

/* -- ficha del médico -- */
.dq-single .dq-medico{
  background:var(--cream-2); border-radius:24px;
  padding:30px 32px; margin:48px 0;
}
.dq-single .dq-medico .wp-block-columns{ margin:0; gap:26px; }
.dq-single .dq-medico figure{ margin:0; }
.dq-single .dq-medico figure img{ border-radius:50%; aspect-ratio:1/1; object-fit:cover; }
.dq-single .dq-medico h3{ margin:0 0 6px; font-size:16px; }
.dq-single .dq-medico p:not(.dq-rotulo){
  font-size:14px; line-height:1.65; color:var(--taupe); margin:0;
}

/* -- caja de aviso -- */
.dq-single .dq-aviso{
  border:1px solid var(--blush-2); border-radius:20px;
  padding:26px 28px; margin:48px 0;
}
.dq-single .dq-aviso .dq-rotulo{ margin-bottom:9px; }
.dq-single .dq-aviso p:not(.dq-rotulo){
  font-size:15px; line-height:1.7; color:var(--taupe); margin:0;
}

/* -- llamada intermedia -- */
.dq-single .dq-llamada{
  background:var(--blush); border-radius:24px;
  padding:34px 34px 36px; margin:52px 0;
}
.dq-single .dq-llamada h3{
  font-family:var(--font-display); font-weight:400; font-size:24px; margin:0 0 10px;
}
.dq-single .dq-llamada p{ font-size:15px; line-height:1.7; color:var(--taupe); margin:0 0 22px; }
.dq-single .dq-llamada .wp-block-button__link{
  background:var(--ink); color:var(--cream); border:1px solid var(--ink);
  border-radius:999px; padding:14px 26px; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background .28s, color .28s;
}
.dq-single .dq-llamada .wp-block-button__link:hover{ background:transparent; color:var(--ink); }

/* =========================================================
   CIERRE
   ========================================================= */
.dq-single .cierre{ padding-bottom:76px; }
.dq-single .cierre .interior{ max-width:var(--col); }
.dq-single .cierre-fila{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px; padding-top:32px; border-top:1px solid rgba(38,36,34,.12);
}
.dq-single .temas{ display:flex; flex-wrap:wrap; gap:9px; }
.dq-single .tema{
  padding:7px 16px; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; border:1px solid rgba(38,36,34,.16); border-radius:999px;
  color:var(--taupe); transition:border-color .25s, color .25s;
}
.dq-single .tema:hover{ border-color:var(--ink); color:var(--ink); }
.dq-single .compartir{ display:flex; align-items:center; gap:10px; }
.dq-single .compartir > span{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--taupe); font-weight:600;
}
.dq-single .compartir a{
  width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  border:1px solid rgba(38,36,34,.16); color:var(--taupe);
  transition:background .25s, color .25s, border-color .25s;
}
.dq-single .compartir a:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.dq-single .compartir svg{ width:14px; height:14px; }

/* =========================================================
   LLAMADA Y RELACIONADOS
   ========================================================= */
.dq-single .llamada{ padding-top:66px; padding-bottom:66px; }
.dq-single .llamada .interior{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:30px;
}
.dq-single .llamada .rotulo{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--rose-deep); display:block; margin-bottom:10px;
}
.dq-single .llamada h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,3.2vw,34px); margin-bottom:12px;
}
.dq-single .llamada p{ font-size:15.5px; line-height:1.7; color:var(--taupe); max-width:48ch; }
.dq-single .boton{
  display:inline-flex; align-items:center; gap:9px; padding:15px 28px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ink); background:var(--ink); color:var(--cream);
  border-radius:999px; transition:background .28s, color .28s;
}
.dq-single .boton:hover{ background:transparent; color:var(--ink); }

.dq-single .relacionados{ padding-top:76px; padding-bottom:90px; }
.dq-single .rel-cabeza{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; margin-bottom:38px;
}
.dq-single .rel-cabeza h2{
  font-family:var(--font-display); font-weight:400; font-size:clamp(22px,2.6vw,30px);
}
.dq-single .rel-cabeza a{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--rose-deep);
}
.dq-single .rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.dq-single .rel-foto{
  aspect-ratio:16/11; border-radius:20px;
  background:var(--cream) center/cover no-repeat; margin-bottom:16px;
  transition:transform .45s ease;
}
.dq-single .rel:hover .rel-foto{ transform:translateY(-5px); }
.dq-single .rel .fecha{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--taupe); display:block; margin-bottom:9px;
}
.dq-single .rel h3{
  font-family:var(--font-display); font-weight:400;
  font-size:19px; line-height:1.32; margin-bottom:9px;
}
.dq-single .rel p{ font-size:14px; line-height:1.65; color:var(--taupe); }

/* =========================================================
   LISTADO DE ARTÍCULOS
   ========================================================= */
.dq-listado{ max-width:1320px; margin:0 auto; padding:0 24px 80px; }
.dq-filtros{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding-bottom:56px; }
.dq-filtro{
  padding:9px 20px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; border:1px solid rgba(0,0,0,.15); border-radius:999px;
  color:var(--taupe); transition:border-color .25s, color .25s, background .25s;
}
.dq-filtro:hover{ border-color:var(--ink); color:var(--ink); }
.dq-filtro.activo{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.dq-rejilla{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 32px; }
.dq-tarjeta-foto{
  aspect-ratio:16/11; border-radius:20px;
  background:var(--cream-2) center/cover no-repeat; margin-bottom:16px;
  transition:transform .45s ease;
}
.dq-tarjeta:hover .dq-tarjeta-foto{ transform:translateY(-5px); }
.dq-fecha{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--taupe); display:block; margin-bottom:10px;
}
.dq-tarjeta h3{
  font-family:var(--font-display); font-weight:400;
  font-size:19px; line-height:1.32; margin-bottom:10px;
}
.dq-tarjeta p{ font-size:14px; line-height:1.7; color:var(--taupe); margin-bottom:14px; }
.dq-leer{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--rose-deep);
}
.dq-vacio{ text-align:center; color:var(--taupe); font-size:15px; padding:40px 0; }

.dq-paginacion{ display:flex; justify-content:center; gap:8px; padding-top:56px; }
.dq-paginacion .page-numbers{
  min-width:38px; height:38px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:50%; font-size:13px; color:var(--taupe);
  border:1px solid transparent; transition:border-color .25s, color .25s;
}
.dq-paginacion .page-numbers:hover{ border-color:rgba(0,0,0,.2); color:var(--ink); }
.dq-paginacion .page-numbers.current{ background:var(--ink); color:var(--cream); }

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width:1080px){
  .dq-single .lectura .interior{ grid-template-columns:1fr; gap:0; }
  .dq-single .indice{ position:static; margin-bottom:42px; }
  .dq-single .indice[aria-hidden="true"]{ display:none; }
  .dq-single .indice ol{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .dq-single .indice a{
    padding:8px 15px; border-left:0; border:1px solid rgba(38,36,34,.16);
    border-radius:999px; font-size:12px;
  }
  .dq-single .indice a.activo{ border-color:var(--ink); }
  .dq-single .dq-duo{ width:auto; margin-left:0; margin-right:0; }
  .dq-single .dq-duo .dq-pie{ padding-left:0; }
}
@media (max-width:820px){
  .dq-single .portada{ padding-top:44px; }
  .dq-single .portada h1{ max-width:none; }
  .dq-single .datos{ margin-left:0; }
  .dq-single .portada-foto .marco{ aspect-ratio:4/3; }
  .dq-single .texto > p,
  .dq-single .texto li{ font-size:17px; }
  .dq-single .texto > p:first-child{ font-size:19px; }
  .dq-single .dq-duo{ width:auto; margin-left:0; margin-right:0; }
  .dq-single .dq-duo .dq-pie{ padding-left:0; }
  .dq-single .dq-duo .wp-block-columns{ flex-wrap:wrap; gap:12px; }
  .dq-single .dq-duo .wp-block-column{ flex-basis:100% !important; }
  .dq-single .dq-duo .wp-block-column > figure,
  .dq-single .dq-duo .wp-block-column:last-child > figure{ aspect-ratio:4/3; }
  .dq-single .dq-pasos{ padding:28px 24px; }
  .dq-single .llamada .interior{ flex-direction:column; align-items:flex-start; }
  .dq-single .rel-grid{ grid-template-columns:1fr; gap:38px; }
  .dq-rejilla{ grid-template-columns:1fr; gap:40px; }
}