/* ==========================================================================
   Derma Péptidos · CSS base del tema hijo (GeneratePress / Kadence)
   Pegar en Apariencia › Personalizar › CSS adicional, o en style.css del hijo.
   Nada aquí depende de JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  --porcelana:      #EEF1F0;
  --blanco:         #FFFFFF;
  --petroleo:       #0F2C2E;
  --petroleo-borde: #274546;
  --petroleo-texto: #C9D2D1;
  --petroleo-tenue: #8FA3A3;
  --tinta:          #14201F;
  --cobre:          #A85E33;  /* solo relleno: 4.28:1 sobre porcelana */
  --cobre-texto:    #8A4B28;  /* único cobre para texto: 5.92:1 */
  --cobre-claro:    #E4B692;  /* solo sobre petróleo: 8.4:1 */
  --cobre-azul:     #256B85;  /* datos y etiquetas: 5.25:1 */
  --cobre-azul-15:  #DCE9EE;  /* resaltado de búsqueda */
  --linea:          #D3D8D6;
  --linea-suave:    #C7CDCB;
  --gris-nodo:      #A9B2B0;
  --gris-texto:     #5E6C6B;

  --radio:   2px;                              /* valor único */
  --sombra:  0 1px 2px rgba(15, 44, 46, .08);  /* valor único */

  --contenedor: 1180px;
  --lectura:    700px;
  --canalon:    24px;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  --f-display: Newsreader, Georgia, "Times New Roman", serif;
  --f-cuerpo:  "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-datos:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-etiqueta: .6875rem;
  --t-pie:      .8125rem;
  --t-pequeno:  .9375rem;
  --t-h6:       .95rem;
  --t-cuerpo:   clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --t-h5:       1.1rem;
  --t-h4:       1.3rem;
  --t-h3:       clamp(1.4rem, 1.3rem + .5vw, 1.6rem);
  --t-h2:       clamp(1.75rem, 1.4rem + 1.2vw, 2.2rem);
  --t-h1:       clamp(2.25rem, 1.6rem + 2.2vw, 3.05rem);
}

/* --------------------------------------------------------------------------
   2 · Tipografía y base
   -------------------------------------------------------------------------- */
body {
  background: var(--porcelana);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--petroleo);
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin-top: var(--e-6); }
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
h4 { font-size: var(--t-h4); font-weight: 500; line-height: 1.3; }
h5 { font-family: var(--f-cuerpo); font-size: var(--t-h5); font-weight: 600; line-height: 1.4; color: var(--petroleo); }
h6 {
  font-family: var(--f-datos); font-size: var(--t-h6); font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--petroleo);
}

p { margin: 0 0 var(--e-4); max-width: 68ch; }
.entry-content > p { line-height: 1.65; }
.entry-content > p:has(.dp-evidencia) { line-height: 1.85; } /* la cadena en línea necesita aire */

small, .dp-pequeno { font-size: var(--t-pequeno); }
figcaption, .dp-pie {
  font-family: var(--f-datos); font-size: var(--t-pie);
  line-height: 1.6; color: var(--cobre-azul);
}

/* Firma de artículo: autor · fecha · minutos de lectura.
   Nombre aparte de "dp-pie" para no chocar con el pie de página (más abajo,
   componente 14): misma familia tipográfica, sin fondo. */
.dp-firma {
  font-family: var(--f-datos); font-size: var(--t-pie);
  line-height: 1.6; color: var(--cobre-azul);
  margin-bottom: var(--e-5);
}

a { color: var(--cobre-texto); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--petroleo); }
:focus-visible { outline: 2px solid var(--cobre-azul); outline-offset: 2px; }

mark { background: var(--cobre-azul-15); color: var(--tinta); padding: 0 2px; }

/* Etiqueta mono de sección */
.dp-etiqueta {
  font-family: var(--f-datos); font-weight: 500; font-size: var(--t-etiqueta);
  letter-spacing: .12em; text-transform: uppercase; color: var(--cobre-azul);
  display: block; margin-bottom: var(--e-3);
}
.dp-dato { font-family: var(--f-datos); font-weight: 500; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   3 · Rejilla
   -------------------------------------------------------------------------- */
.dp-contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--e-5); }
.dp-lectura    { max-width: var(--lectura); }
.dp-rejilla    { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--canalon); }

.dp-tarjeta-base,
.dp-ficha, .dp-inci, .dp-proscontras, .dp-autoria,
.dp-newsletter, .dp-tarjeta, .dp-aviso, .dp-tabla {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

/* --------------------------------------------------------------------------
   4 · Indicador de Evidencia (elemento de firma)
   -------------------------------------------------------------------------- */
.dp-evidencia {
  display: inline-flex;
  align-items: center;
  vertical-align: -1px;
  --nodo: 9px;
  --enlace: 8px;
  --grosor: 1.5px;
}
.dp-evidencia--grande { --nodo: 20px; --enlace: 18px; --grosor: 2px; }
.dp-evidencia--media  { --nodo: 16px; --enlace: 14px; --grosor: 2px; }

.dp-evidencia i {
  display: block;
  width: var(--nodo); height: var(--nodo);
  border-radius: 50%;
  background: var(--cobre);
}
.dp-evidencia b {
  display: block;
  width: var(--enlace); height: var(--grosor);
  background: var(--cobre);
}
.dp-evidencia i.vacio  { background: none; box-shadow: inset 0 0 0 var(--grosor) var(--gris-nodo); }
.dp-evidencia b.vacio  { background: var(--linea-suave); }

.dp-evidencia-etiqueta {
  font-family: var(--f-datos); font-weight: 500; font-size: var(--t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--petroleo);
  margin-left: var(--e-2);
}
/* Bloque: cadena + etiqueta + explicación */
.dp-evidencia-bloque { display: flex; flex-direction: column; gap: var(--e-2); }
.dp-evidencia-bloque .dp-evidencia-etiqueta { margin-left: 0; font-size: 13px; letter-spacing: .12em; }

/* Sobre petróleo */
.dp-negativo .dp-evidencia i           { background: var(--cobre-claro); }
.dp-negativo .dp-evidencia b           { background: var(--cobre-claro); }
.dp-negativo .dp-evidencia i.vacio     { background: none; box-shadow: inset 0 0 0 var(--grosor) #5A7273; }
.dp-negativo .dp-evidencia b.vacio     { background: #5A7273; }
.dp-negativo .dp-evidencia-etiqueta    { color: var(--blanco); }

/* Una tinta */
.dp-monocromo .dp-evidencia i          { background: var(--tinta); }
.dp-monocromo .dp-evidencia b          { background: var(--tinta); }
.dp-monocromo .dp-evidencia i.vacio    { background: none; box-shadow: inset 0 0 0 var(--grosor) var(--gris-nodo); }
.dp-monocromo .dp-evidencia b.vacio    { background: var(--gris-nodo); }

/*  Marcado:
    <span class="dp-evidencia" role="img" aria-label="Evidencia moderada">
      <i></i><b></b><i></i><b class="vacio"></b><i class="vacio"></i>
    </span>
    <span class="dp-evidencia-etiqueta">Evidencia moderada</span>
    La etiqueta va SIEMPRE visible: nunca en tooltip ni dependiente de hover. */

/* --------------------------------------------------------------------------
   5 · Aviso de afiliación
   -------------------------------------------------------------------------- */
.dp-aviso {
  border-left: 2px solid var(--cobre);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-5);
}
.dp-aviso .dp-etiqueta { color: var(--cobre-texto); margin-bottom: var(--e-1); }
.dp-aviso p { font-size: var(--t-pequeno); line-height: 1.55; margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   6 · Ficha de producto
   -------------------------------------------------------------------------- */
.dp-ficha {
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 200px 1fr 260px;
}
.dp-ficha__img    { border-right: 1px solid var(--linea); padding: var(--e-5); display: flex; align-items: center; }
.dp-ficha__img img { width: 100%; height: auto; border-radius: var(--radio); }
.dp-ficha__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); }
.dp-ficha__compra { border-left: 1px solid var(--linea); padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); }
.dp-ficha__precio { font-family: var(--f-datos); font-weight: 500; font-size: 1.375rem; color: var(--tinta); }
.dp-ficha__precio span { display: block; font-size: .875rem; color: var(--cobre-azul); }
.dp-ficha__nota   { font-family: var(--f-datos); font-size: .6875rem; line-height: 1.7; color: var(--gris-texto); }

.dp-cta {
  display: block; min-height: 44px;
  background: var(--cobre); color: var(--blanco);
  font-weight: 600; font-size: 1rem; line-height: 20px;
  text-align: center; text-decoration: none;
  padding: 12px var(--e-4); border-radius: var(--radio);
}
.dp-cta:hover, .dp-cta:focus { background: var(--cobre-texto); color: var(--blanco); }
.dp-cta--secundario {
  background: none; color: var(--petroleo);
  border: 1px solid var(--petroleo);
}
.dp-cta--secundario:hover { background: var(--petroleo); color: var(--blanco); }

/* --------------------------------------------------------------------------
   7 · Tabla comparativa (rejilla, no <table>: en móvil son tarjetas)
   -------------------------------------------------------------------------- */
.dp-tabla { overflow: hidden; }
.dp-tabla__fila {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.3fr .9fr 1fr .9fr;
  border-bottom: 1px solid var(--linea);
}
.dp-tabla__fila:last-child { border-bottom: 0; }
.dp-tabla__fila--cabecera {
  background: var(--porcelana);
  font-family: var(--f-datos); font-size: var(--t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--cobre-azul);
}
.dp-tabla__celda { padding: var(--e-4); font-size: var(--t-pequeno); line-height: 1.5; }
.dp-tabla__fila--cabecera .dp-tabla__celda { padding: var(--e-3) var(--e-4); }
.dp-tabla__celda--producto { font-weight: 600; color: var(--petroleo); }
.dp-tabla__etiqueta { display: none; } /* solo móvil */

/* --------------------------------------------------------------------------
   8 · Veredicto rápido
   -------------------------------------------------------------------------- */
.dp-veredicto {
  background: var(--petroleo);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: var(--e-6);
  margin-bottom: var(--e-6);
}
.dp-veredicto .dp-etiqueta { color: var(--cobre-claro); }
.dp-veredicto__tesis {
  font-family: var(--f-display); font-weight: 500; font-size: 1.625rem;
  line-height: 1.3; letter-spacing: -.015em; margin: 0 0 var(--e-5); max-width: 36ch;
}
.dp-veredicto__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-5);
  border-top: 1px solid var(--petroleo-borde); padding-top: var(--e-5);
}
.dp-veredicto__datos dt {
  font-family: var(--f-datos); font-size: var(--t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--petroleo-tenue);
  margin-bottom: var(--e-2);
}
.dp-veredicto__datos dd { margin: 0; font-size: 1rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   9 · Bloque INCI
   -------------------------------------------------------------------------- */
.dp-inci { padding: var(--e-5); margin-bottom: var(--e-6); }
.dp-inci__cab {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3);
  border-bottom: 1px solid var(--linea); padding-bottom: var(--e-3); margin-bottom: var(--e-4);
}
.dp-inci__lista {
  font-family: var(--f-datos); font-size: .875rem; line-height: 2;
  color: var(--tinta); margin: 0; max-width: none;
}
.dp-inci__lista .peptido { color: var(--cobre-azul); font-weight: 500; }

/* --------------------------------------------------------------------------
   10 · Pros / Contras (equilibrio deliberado)
   -------------------------------------------------------------------------- */
.dp-proscontras { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--e-6); }
.dp-proscontras > div { padding: var(--e-5); }
.dp-proscontras > div:first-child { border-right: 1px solid var(--linea); }
.dp-proscontras h3 {
  font-family: var(--f-datos); font-weight: 500; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo);
  border-bottom: 1px solid var(--linea); padding-bottom: var(--e-3); margin-bottom: var(--e-4);
}
.dp-proscontras ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.dp-proscontras li { position: relative; padding-left: var(--e-5); font-size: 1rem; line-height: 1.55; }
.dp-proscontras li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cobre);
}
.dp-proscontras .contras li::before { background: none; box-shadow: inset 0 0 0 1.5px var(--gris-texto); }

/* --------------------------------------------------------------------------
   11 · Caja de autoría
   -------------------------------------------------------------------------- */
.dp-autoria { padding: var(--e-5); display: flex; gap: var(--e-5); }
.dp-autoria img { width: 96px; height: 96px; flex: none; border-radius: var(--radio); }
.dp-autoria__nombre { font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; color: var(--petroleo); }
.dp-autoria__meta {
  font-family: var(--f-datos); font-size: .75rem; color: var(--cobre-azul);
  border-top: 1px solid var(--linea); padding-top: var(--e-3); margin-top: var(--e-1);
  display: flex; flex-wrap: wrap; gap: var(--e-4);
}

/* --------------------------------------------------------------------------
   12 · Newsletter
   -------------------------------------------------------------------------- */
.dp-newsletter {
  border-top: 2px solid var(--petroleo);
  padding: var(--e-6);
  display: flex; flex-wrap: wrap; gap: var(--e-6); align-items: flex-start;
}
.dp-newsletter > * { flex: 1 1 260px; }
.dp-newsletter__form { display: flex; flex-direction: column; gap: var(--e-3); }
.dp-newsletter__linea { display: flex; gap: var(--e-2); }
.dp-campo {
  flex: 1; min-width: 0; height: 44px;
  border: 1px solid var(--gris-nodo); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta);
  font-family: var(--f-datos); font-size: .8125rem; padding: 0 var(--e-3);
}
.dp-campo::placeholder { color: var(--gris-texto); }

/* --------------------------------------------------------------------------
   13 · Tarjeta de artículo
   -------------------------------------------------------------------------- */
.dp-tarjeta { overflow: hidden; display: flex; flex-direction: column; }
.dp-tarjeta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--linea); }
.dp-tarjeta__cuerpo { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.dp-tarjeta h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: 0; }
.dp-tarjeta h3 a { color: var(--petroleo); text-decoration: none; }
.dp-tarjeta h3 a:hover { text-decoration: underline; }
.dp-tarjeta__pie {
  display: flex; align-items: center; gap: var(--e-2);
  border-top: 1px solid var(--linea); padding-top: var(--e-3); margin-top: var(--e-1);
  font-family: var(--f-datos); font-size: .6875rem; color: var(--gris-texto);
}
.dp-listado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--canalon); }

/* --------------------------------------------------------------------------
   14 · Cabecera y pie
   -------------------------------------------------------------------------- */
.dp-cabecera { background: var(--petroleo); }
.dp-cabecera__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-4) var(--e-5); padding: var(--e-4) var(--e-5);
}
.dp-cabecera nav { display: flex; align-items: center; gap: 20px; }
.dp-cabecera nav a { color: var(--petroleo-texto); text-decoration: none; font-size: 1rem; white-space: nowrap; }
.dp-cabecera nav a:hover { color: var(--blanco); }
.dp-cabecera nav .actual {
  color: var(--blanco); font-weight: 600;
  border-bottom: 2px solid var(--cobre); padding-bottom: 2px;
}
.dp-cabecera__buscador { flex: 1 1 190px; min-width: 0; }
.dp-cabecera__buscador .dp-campo { background: transparent; border-color: #3E5A5B; color: var(--blanco); width: 100%; }
.dp-cabecera__silos {
  border-top: 1px solid var(--petroleo-borde); padding: var(--e-2) var(--e-5);
  display: flex; flex-wrap: wrap; gap: var(--e-5);
  font-family: var(--f-datos); font-size: var(--t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase;
}
.dp-cabecera__silos a { color: var(--petroleo-tenue); text-decoration: none; }
.dp-cabecera__silos a:hover { color: var(--cobre-claro); }

.dp-pie-sitio { background: var(--petroleo); color: var(--petroleo-texto); padding: var(--e-7) var(--e-5) var(--e-5); }
.dp-pie__cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e-6);
  border-bottom: 1px solid var(--petroleo-borde); padding-bottom: var(--e-6);
}
.dp-pie-sitio a { color: var(--petroleo-texto); text-decoration: none; }
.dp-pie-sitio a:hover { color: var(--blanco); text-decoration: underline; }
.dp-pie__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4);
  padding-top: var(--e-5);
  font-family: var(--f-datos); font-size: var(--t-etiqueta); line-height: 1.8;
  color: var(--petroleo-tenue);
}

/* --------------------------------------------------------------------------
   15 · Índice lateral pegajoso (sin JS)
   -------------------------------------------------------------------------- */
.dp-pilar { display: grid; grid-template-columns: 240px minmax(0, var(--lectura)) 1fr; gap: var(--canalon); }
.dp-indice { position: sticky; top: var(--e-5); align-self: start; }
.dp-indice a {
  display: block; color: var(--tinta); text-decoration: none;
  border-left: 2px solid var(--linea); padding: 0 0 0 var(--e-3);
  font-size: var(--t-pequeno); line-height: 1.4; margin-bottom: 10px;
}
.dp-indice a.actual { color: var(--petroleo); font-weight: 600; border-left-color: var(--cobre); }

/* --------------------------------------------------------------------------
   16 · Paginación
   -------------------------------------------------------------------------- */
.dp-paginacion { display: flex; align-items: center; gap: var(--e-2); }
.dp-paginacion a, .dp-paginacion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 var(--e-2);
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font-family: var(--f-datos); font-size: .875rem; border-radius: var(--radio);
  text-decoration: none;
}
.dp-paginacion .actual { background: var(--petroleo); border-color: var(--petroleo); color: var(--blanco); }

/* --------------------------------------------------------------------------
   19 · Héroe de portada (cadena de silos)
   Única sección con fondo petróleo dentro del área de contenido (no es la
   cabecera). La cadena es navegación real a las páginas pilar, no adorno.
   -------------------------------------------------------------------------- */
.dp-hero {
  background: var(--petroleo);
  color: var(--porcelana);
  padding: var(--e-8) var(--e-5);
  border-radius: var(--radio);
  margin-bottom: var(--e-6);
}
.dp-hero .dp-etiqueta { color: var(--cobre-claro); }
.dp-hero h1 { color: var(--blanco); max-width: 22ch; margin-bottom: var(--e-4); }
.dp-hero__intro { color: var(--petroleo-texto); max-width: 62ch; margin: 0; }
.dp-hero__cadena {
  display: flex;
  gap: var(--e-4);
  margin: var(--e-7) 0 0;
  padding-top: var(--e-6);
  border-top: 1px solid var(--petroleo-borde);
  list-style: none;
}
.dp-hero__nodo {
  flex: 1;
  position: relative;
  padding-top: var(--e-4);
  text-decoration: none;
  color: inherit;
}
.dp-hero__nodo::before {
  content: "";
  position: absolute;
  top: 5px; left: -50%;
  width: 100%; height: 1px;
  background: var(--petroleo-borde);
}
.dp-hero__nodo:first-child::before { display: none; }
.dp-hero__nodo::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--cobre);
}
.dp-hero__nodo-nombre {
  display: block;
  font-family: var(--f-datos); font-weight: 500; font-size: .95rem;
  color: var(--blanco); margin-bottom: 2px;
}
.dp-hero__nodo-desc { display: block; font-size: var(--t-pequeno); color: var(--petroleo-texto); }
.dp-hero__nota {
  text-align: center; margin-top: var(--e-5);
  font-family: var(--f-datos); font-size: var(--t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--petroleo-tenue);
}

/* --------------------------------------------------------------------------
   20 · Listas numeradas y de pasos
   Dos variantes: .dp-numerada (metodología, sin línea) y .dp-pasos (rutinas,
   con línea vertical y nodo, para representar una secuencia con orden real).
   -------------------------------------------------------------------------- */
.dp-numerada { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-6); }
.dp-numerada > li { display: grid; grid-template-columns: 32px 1fr; gap: var(--e-4); }
.dp-numerada__num {
  font-family: var(--f-datos); font-weight: 500; font-size: var(--t-pequeno);
  color: var(--cobre-texto);
}
.dp-numerada h3, .dp-numerada h4 { margin: 0 0 var(--e-1); }

.dp-pasos { list-style: none; margin: 0; padding: 0 0 0 var(--e-5); position: relative; }
.dp-pasos::before {
  content: "";
  position: absolute; top: 6px; bottom: 6px; left: 3px;
  width: 1px; background: var(--linea);
}
.dp-pasos > li { position: relative; padding-bottom: var(--e-6); }
.dp-pasos > li:last-child { padding-bottom: 0; }
.dp-pasos > li::before {
  content: "";
  position: absolute; top: 6px; left: calc(-1 * var(--e-5) + 1px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cobre);
}
.dp-pasos > li.opcional::before { background: none; box-shadow: inset 0 0 0 1.5px var(--gris-nodo); }
.dp-pasos__etiqueta {
  display: block; font-family: var(--f-datos); font-size: var(--t-etiqueta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--cobre-azul); margin-bottom: var(--e-1);
}
.dp-pasos h3, .dp-pasos h4 { margin: 0 0 var(--e-2); }

/* Variante compacta de .dp-pasos para cajas oscuras (resumen en una columna) */
.dp-negativo .dp-pasos::before { background: var(--petroleo-borde); }
.dp-negativo .dp-pasos > li::before { background: var(--cobre-claro); }
.dp-negativo .dp-pasos > li.opcional::before { box-shadow: inset 0 0 0 1.5px var(--petroleo-tenue); }
.dp-negativo .dp-pasos__etiqueta { color: var(--petroleo-tenue); }

/* --------------------------------------------------------------------------
   17 · Puntos de ruptura
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .dp-pilar   { grid-template-columns: 1fr; }
  .dp-indice  { position: static; }
  .dp-listado { grid-template-columns: repeat(2, 1fr); }
  .dp-pie__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .dp-listado { grid-template-columns: 1fr; }
  .dp-pie__cols { grid-template-columns: 1fr; gap: var(--e-5); }

  /* Héroe: la cadena pasa de fila a columna, cada nodo con su propia línea */
  .dp-hero { padding: var(--e-6) var(--e-4); }
  .dp-hero__cadena { flex-direction: column; gap: var(--e-5); }
  .dp-hero__nodo::before { display: none; }

  /* Ficha: una columna */
  .dp-ficha { grid-template-columns: 1fr; }
  .dp-ficha__img    { border-right: 0; border-bottom: 1px solid var(--linea); }
  .dp-ficha__compra { border-left: 0; border-top: 1px solid var(--linea); }
  .dp-cta { min-height: 48px; padding: 14px var(--e-4); }

  /* Tabla comparativa → tarjetas apiladas. Nunca scroll horizontal. */
  .dp-tabla { border: 0; background: none; }
  .dp-tabla__fila--cabecera { display: none; }
  .dp-tabla__fila {
    grid-template-columns: 96px 1fr;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    margin-bottom: var(--e-4);
    padding: var(--e-4);
    gap: var(--e-1) var(--e-3);
  }
  .dp-tabla__celda { padding: 0; }
  .dp-tabla__celda--producto { grid-column: 1 / -1; font-size: 1.0625rem; margin-bottom: var(--e-3); }
  .dp-tabla__etiqueta {
    display: block;
    font-family: var(--f-datos); font-size: .625rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--cobre-azul);
    padding-top: 3px;
  }

  /* Pros/contras: apilados, mismo peso */
  .dp-proscontras { grid-template-columns: 1fr; }
  .dp-proscontras > div:first-child { border-right: 0; border-bottom: 1px solid var(--linea); }

  /* Autoría y newsletter */
  .dp-autoria { flex-direction: column; gap: var(--e-4); }
  .dp-autoria img { width: 64px; height: 64px; }
  .dp-newsletter { padding: var(--e-5); }
  .dp-newsletter__linea { flex-direction: column; }
  .dp-newsletter__linea .dp-cta { width: 100%; }

  /* Veredicto */
  .dp-veredicto { padding: var(--e-5); }
  .dp-veredicto__tesis { font-size: 1.3125rem; }

  /* Cabecera */
  .dp-cabecera nav { display: none; }        /* sustituida por el menú desplegable del tema */
  .dp-cabecera__silos { flex-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --------------------------------------------------------------------------
   18 · Movimiento e impresión
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .dp-cabecera, .dp-pie, .dp-newsletter, .dp-cta { display: none; }
  body { background: #FFFFFF; }
  .dp-ficha, .dp-tarjeta { box-shadow: none; }
}