/* ============================================================================
   PreciosAdictos · Contenido SEO de categorías v2 · clases plp2-*
   Bloque completo, listo para pegar al final de stylesheet.css (hoja global)
   o para integrarlo como mejor os encaje. MadMetrics · Agosto 2026
   ----------------------------------------------------------------------------
   · Todas las clases son nuevas (prefijo plp2-): no tocan las plp-* existentes
     ni ningún estilo de la plantilla. Conviven con el contenido ya cargado.
   · La plantilla solo emite el markup del BLOQUE DE CATEGORÍAS RELACIONADAS
     (sección 11). El resto de clases llegan dentro de los contenidos que se
     cargan con el import de SEO de categorías.
   · Selectores que apuntan a markup ya existente, solo dos: el del acordeón
     de FAQ (.xaccordion), siempre condicionado al wrapper .plp2-faq que
     también llega en el contenido (sin ese wrapper no cambia nada), y el del
     contenedor .seotx, que solo inicializa el contador de la numeración de
     cabeceras (si ese contenedor cambiara de clase, lo único que se perdería
     es la numeración continua; el resto del diseño no depende de él).
   ============================================================================ */

.plp2{
  --pa-brand:#007ED6;       /* azul de identidad */
  --pa-blue:#157DD2;        /* azul funcional: enlaces, indicadores */
  --pa-blue-ink:#00435B;    /* navy tipográfico */
  --pa-band:#EBF0F3;        /* gris de franja del sitio: cabeceras interiores */
  --pa-chip:#E8F4FD;        /* fondo suave azulado de los pills */
  --pa-chip-line:#CFE6F9;
  --pa-line:#DDDDDD;        /* hairline exterior */
  --pa-line-soft:#EFEFEF;   /* hairline interior */
  --pa-ink:#42484E;         /* titulares y datos (= color del H1 real) */
  --pa-muted:#6B747C;       /* etiquetas y valores secundarios */
  --pa-muted-2:#8A9198;     /* microetiquetas de campo */
  --pa-warn:#FFB339;        /* naranja: aviso "A tener en cuenta" */
  --pa-tint:#F5F9FF;        /* tinte azulado de fondos y hovers */

  --pa-r:12px;
  --pa-r-sm:10px;
  --pa-r-xs:8px;
  --pa-grad:linear-gradient(96deg,#007ED6 0%,#157DD2 100%);
  --pa-sh-1:0 1px 2px rgba(0,67,91,.05);
  --pa-sh-2:0 14px 30px -16px rgba(0,67,91,.24);
  --pa-sh-3:0 22px 44px -18px rgba(0,67,91,.34);

  max-width:1275px;
  font-family:"Open Sans",Roboto,Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--pa-ink);
}
.plp2 *,
.plp2 *::before,
.plp2 *::after{box-sizing:border-box;}

/* El contador de la numeración de cabeceras se inicializa en el contenedor
   del contenido SEO de la categoría, para que la cuenta sea continua aunque
   el contenido llegue en varios fragmentos (Texto Landing, Faqs y bloque de
   la plantilla). Inocuo en cualquier página sin cabeceras plp2. */
.seotx{counter-reset:plp2sec;}

/* --- 1. Enlaces --------------------------------------------------------- */
.plp2 a{color:var(--pa-blue-ink);text-decoration:none;}
.plp2 a:hover{color:var(--pa-blue);}
.plp2 a:focus-visible{outline:2px solid var(--pa-blue);outline-offset:2px;border-radius:4px;}

/* --- 2. Intro: tarjeta con rail degradado y texto de arranque en navy ---- */
.plp2-intro{
  position:relative;
  overflow:hidden;
  margin:0 0 26px;
  padding:24px 26px 24px 34px;
  background:#FFFFFF;
  border:1px solid var(--pa-line-soft);
  border-radius:var(--pa-r);
  box-shadow:var(--pa-sh-1),var(--pa-sh-2);
  font-size:17px;
  line-height:1.75;
  color:var(--pa-blue-ink);
}
.plp2-intro::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:linear-gradient(180deg,#007ED6 0%,#157DD2 100%);
}
/* En pantalla ancha la tarjeta va a todo el ancho pero la medida de lectura
   se mantiene en ~78ch con el aire a la derecha. */
@media (min-width:821px){
  .plp2-intro{padding-right:clamp(26px,42%,560px);}
}

/* --- 3. Sistema de sección: tarjeta + franja de azul pleno numerada ------
   La cabecera es una banda con el degradado de marca, texto en blanco y
   numeración automática (01, 02...) por contador CSS. El H2 de las FAQ
   llega sin clase dentro de #question, por eso el segundo selector. ------ */
.plp2-panel{
  margin:0 0 22px;
  background:#FFFFFF;
  border:1px solid var(--pa-line-soft);
  border-radius:var(--pa-r);
  box-shadow:var(--pa-sh-1),var(--pa-sh-2);
  overflow:hidden;
}
.plp2-band,
.plp2-faq #question > h2{
  counter-increment:plp2sec;
  display:flex;
  align-items:baseline;
  gap:15px;
  margin:0;
  padding:15px 22px;
  background:var(--pa-grad);
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.004em;
  color:#FFFFFF;
}
.plp2-band::before,
.plp2-faq #question > h2::before{
  content:counter(plp2sec,decimal-leading-zero);
  flex:0 0 auto;
  padding-right:15px;
  border-right:1px solid rgba(255,255,255,.42);
  font-size:20px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:rgba(255,255,255,.86);
}
.plp2-body{padding:20px 22px 22px;}

/* --- 4. Microetiqueta de campo en versalitas ----------------------------- */
.plp2-field{
  display:block;
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:700;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--pa-muted);
}

/* --- 5. Calidades: tarjetas con pestaña superior; BF8 destacada ---------- */
.plp2-calidades{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
  padding:20px 22px 22px;
  background:#FFFFFF;
}
.plp2-calidad{
  flex:1 1 208px;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#FFFFFF;
  border:1px solid var(--pa-line-soft);
  border-top:4px solid var(--pa-line-soft);
  border-radius:var(--pa-r-sm);
  box-shadow:0 1px 2px rgba(0,67,91,.04);
}
.plp2-calidad > strong{
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:700;
  font-size:13px;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pa-blue-ink);
  background:var(--pa-band);
  border-bottom:1px solid var(--pa-line-soft);
  padding:12px 15px;
}
.plp2-calidad > span{
  display:block;
  padding:14px 15px 18px;
  font-size:14.5px;
  line-height:1.68;
  color:var(--pa-ink);
}
/* Tarjeta destacada (calidad prioritaria del catálogo): tinte, pestaña azul
   y sombra propia. */
.plp2-calidad--bf8{
  background:var(--pa-tint);
  border-color:var(--pa-chip-line);
  border-top-color:var(--pa-brand);
  box-shadow:0 1px 2px rgba(0,67,91,.06),0 16px 32px -18px rgba(0,67,91,.42);
}
.plp2-calidad--bf8 > strong{
  background:var(--pa-chip);
  border-bottom-color:var(--pa-chip-line);
  color:var(--pa-blue-ink);
}
.plp2-calidad--bf8 > strong::before{
  content:"";
  display:inline-block;
  position:relative;
  top:-1px;
  width:9px;height:9px;
  margin-right:9px;
  border-radius:2px;
  background:var(--pa-brand);
  vertical-align:middle;
}

/* --- 6. Aviso "A tener en cuenta": cuerpo tintado + raíl de atención ----- */
.plp2-nota{background:var(--pa-tint);}
.plp2-nota p{
  margin:0;
  padding:3px 0 3px 17px;
  max-width:80ch;
  border-left:4px solid var(--pa-warn);
  font-size:14.5px;
  line-height:1.7;
}
.plp2-nota strong{
  margin-right:6px;
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:700;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--pa-blue-ink);
}

/* --- 7. Ficha técnica: tabla etiqueta/valor ------------------------------ */
.plp2-specs-eyebrow{margin:0 0 10px;}
.plp2-specs-scroll{
  overflow-x:auto;
  border:1px solid var(--pa-line-soft);
  border-radius:var(--pa-r-sm);
}
.plp2-specs-table{
  width:100%;
  min-width:280px;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:14.5px;
}
.plp2-specs-table th,
.plp2-specs-table td{
  text-align:left;
  vertical-align:top;
  padding:11px 16px;
  border-bottom:1px solid var(--pa-line-soft);
  transition:background-color .14s ease;
}
.plp2-specs-table th{
  width:210px;
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:700;
  font-size:11px;
  line-height:1.9;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--pa-muted);
  white-space:nowrap;
}
.plp2-specs-table td{
  font-weight:600;
  color:var(--pa-blue-ink);
  font-variant-numeric:tabular-nums;
}
.plp2-specs-table tr:hover th,
.plp2-specs-table tr:hover td{background:var(--pa-tint);}
.plp2-specs-table tr:last-child th,
.plp2-specs-table tr:last-child td{border-bottom:0;}

/* --- 8. Modelos compatibles debajo de la tabla, en el mismo panel --------
   Son <span> informativos, no enlaces. ------------------------------------ */
.plp2-modelos{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--pa-line-soft);
}
.plp2-modelos > strong{margin-bottom:11px;}
.plp2-chips{display:flex;flex-wrap:wrap;gap:8px;}
.plp2-chip{
  display:inline-block;
  padding:6px 15px;
  border:1px solid var(--pa-chip-line);
  border-radius:999px;
  background:var(--pa-chip);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  color:var(--pa-blue-ink);
  cursor:default;
}

/* --- 9. FAQ: restyle SOLO vía wrapper; markup xaccordion intacto ---------
   El JS de la plantilla añade la clase .actv al .xaccordion-item al abrir:
   ese es el único estado que se estiliza. --------------------------------- */
.plp2-faq .xaccordion{list-style:none;margin:0;padding:0;}
.plp2-faq .xaccordion-item{
  border-top:1px solid var(--pa-line-soft);
  transition:background-color .16s ease,box-shadow .16s ease;
}
.plp2-faq .xaccordion-item:first-child{border-top:0;}
.plp2-faq .xaccordion-title{
  position:relative;
  margin:0;
  padding:16px 64px 16px 22px;
  cursor:pointer;
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.5;
  color:var(--pa-blue-ink);
  transition:color .16s ease;
}
.plp2-faq .xaccordion-title::after{
  content:"+";
  position:absolute;
  right:20px;top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  line-height:26px;
  text-align:center;
  font-family:Roboto,"Open Sans",Arial,sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--pa-blue);
  background:#FFFFFF;
  border:1px solid var(--pa-chip-line);
  border-radius:var(--pa-r-xs);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.plp2-faq .xaccordion-item:hover{background:var(--pa-tint);}
.plp2-faq .xaccordion-title:hover{color:var(--pa-blue);}
.plp2-faq .xaccordion-title:hover::after{
  border-color:var(--pa-blue);
  box-shadow:0 4px 12px -4px rgba(0,67,91,.35);
}
.plp2-faq .xaccordion-item.actv{
  background:var(--pa-tint);
  box-shadow:inset 3px 0 0 0 var(--pa-brand);
}
.plp2-faq .xaccordion-item.actv .xaccordion-title{color:var(--pa-blue-ink);}
.plp2-faq .xaccordion-item.actv .xaccordion-title::after{
  content:"\2212";
  color:#FFFFFF;
  background:var(--pa-grad);
  border-color:var(--pa-blue);
}
.plp2-faq .xaccordion-content{margin:0;}
/* El padding vive en el <p>, no en el contenedor que anima el JS. */
.plp2-faq .xaccordion-content p{
  margin:0;
  padding:0 64px 18px 22px;
  max-width:80ch;
  font-size:14.5px;
  line-height:1.72;
  color:var(--pa-ink);
}

/* --- 10. Guías del blog -------------------------------------------------- */
.plp2-blog-list{list-style:none;margin:0;padding:0;}
.plp2-blog-list li{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:14px 22px;
  border-top:1px solid var(--pa-line-soft);
  transition:background-color .16s ease;
}
.plp2-blog-list li:first-child{border-top:0;}
.plp2-blog-list li:hover{background:var(--pa-tint);}
.plp2-blog-arrow{
  flex:0 0 auto;
  font-size:8px;
  line-height:2;
  color:var(--pa-blue);
  transition:transform .16s ease;
}
.plp2-blog-list li:hover .plp2-blog-arrow{transform:translateX(3px);}
.plp2-blog-list a{font-size:15px;font-weight:600;line-height:1.55;}
.plp2-blog-list a:hover{text-decoration:underline;}

/* --- 11. BLOQUE DE CATEGORÍAS RELACIONADAS (lo pinta la plantilla) -------
   La CABECERA del bloque (.plp2-rel-head) NO la pinta la plantilla: llega al
   final del contenido de la categoría. La plantilla emite solo el CUERPO
   (.plp2 > .plp2-rel-body > .plp2-rel-grid > tarjetas) inmediatamente
   después. El cuerpo lleva tarjeta completa propia: si en alguna categoría
   no hubiera cabecera, se pinta igualmente como panel correcto; cuando la
   cabecera está justo antes, la regla de adyacencia funde las dos piezas en
   un único panel. --------------------------------------------------------- */
.plp2-rel-head{
  margin-bottom:0;
  border-bottom:0;
  border-radius:var(--pa-r) var(--pa-r) 0 0;
  box-shadow:none;
}
.plp2-rel-body{
  padding:20px 22px 22px;
  background:#FFFFFF;
  border:1px solid var(--pa-line-soft);
  border-radius:var(--pa-r);
  box-shadow:var(--pa-sh-1),var(--pa-sh-2);
  margin:0 0 22px;
}
.plp2-rel-head + .plp2 .plp2-rel-body{
  border-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
}

/* Grid de tarjetas: auto-fill para que aguante N tarjetas sin huérfanas.
   El ORDEN de las tarjetas = orden de los IDs en el campo. */
.plp2-rel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.plp2-rel-card{
  display:flex;
  flex-direction:column;
  background:#FFFFFF;
  border:1px solid var(--pa-line-soft);
  border-radius:var(--pa-r);
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,67,91,.04);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
/* Escenario de la miniatura: proporción 171x132 del thumbnail real de
   categoría, con suelo de 112px y techo de 150px para no ampliar la imagen
   nativa. */
.plp2-rel-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:171/132;
  min-height:112px;
  max-height:150px;
  overflow:hidden;
  background:#FFFFFF;
  border-bottom:1px solid var(--pa-line-soft);
}
.plp2-rel-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.plp2-rel-foot{
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 14px 14px;
}
/* Tarjeta sin miniatura conviviendo con vecinas que sí la tienen: el pie baja
   al fondo y el nombre queda alineado con los de las demás tarjetas. */
.plp2-rel-foot:first-child{margin-top:auto;}
.plp2-rel-name{
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--pa-blue-ink);
  transition:color .18s ease;
}
.plp2-rel-foot::after{
  content:"\203A";
  flex:0 0 auto;
  margin-left:auto;
  width:26px;height:26px;
  line-height:23px;
  text-align:center;
  font-size:19px;
  color:var(--pa-blue);
  background:var(--pa-chip);
  border-radius:999px;
  transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.plp2-rel-card:hover{
  transform:translateY(-3px);
  border-color:var(--pa-chip-line);
  box-shadow:var(--pa-sh-3);
}
.plp2-rel-card:hover .plp2-rel-name{color:var(--pa-blue);}
.plp2-rel-card:hover .plp2-rel-foot::after{
  transform:translateX(3px);
  background:var(--pa-grad);
  color:#FFFFFF;
}

/* Estado sin imagen: si NINGUNA de las categorías del campo tiene imagen, el
   grid lleva además este modificador y las tarjetas se resuelven como tiras;
   la retícula no se rompe. */
.plp2-rel-grid--sinimg{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.plp2-rel-grid--sinimg .plp2-rel-foot{padding:16px 16px;}

/* --- 12. Responsive ------------------------------------------------------ */
@media (max-width:820px){
  .plp2-intro{font-size:16.5px;padding:20px 22px 20px 28px;}
  .plp2-band,
  .plp2-faq #question > h2{font-size:19px;padding:14px 18px;gap:13px;}
  .plp2-band::before,
  .plp2-faq #question > h2::before{font-size:19px;padding-right:13px;}
  .plp2-body,
  .plp2-calidades,
  .plp2-rel-body{padding:18px 18px 20px;}
  .plp2-blog-list li{padding:13px 18px;}
  .plp2-faq .xaccordion-title{padding:15px 60px 15px 18px;}
  .plp2-faq .xaccordion-content p{padding:0 60px 16px 18px;}
}
@media (max-width:640px){
  .plp2-intro{font-size:16px;line-height:1.7;margin-bottom:20px;padding:18px 18px 18px 24px;}
  .plp2-panel{margin-bottom:18px;border-radius:var(--pa-r);}
  .plp2-rel-head{margin-bottom:0;}
  .plp2-rel-body{margin-bottom:18px;}
  .plp2-band,
  .plp2-faq #question > h2{font-size:19px;padding:13px 16px;gap:12px;}
  .plp2-band::before,
  .plp2-faq #question > h2::before{padding-right:12px;}
  .plp2-body,
  .plp2-calidades,
  .plp2-rel-body{padding:16px 16px 18px;}
  .plp2-calidad{flex:1 1 100%;}
  .plp2-calidad > strong{padding:11px 14px;}
  .plp2-calidad > span{padding:13px 14px 16px;}
  .plp2-nota p{padding:2px 0 2px 14px;}
  .plp2-specs-table th{width:44%;white-space:normal;line-height:1.6;}
  .plp2-specs-table th,
  .plp2-specs-table td{padding:10px 14px;}
  .plp2-faq .xaccordion-title{font-size:15.5px;padding:14px 56px 14px 16px;}
  .plp2-faq .xaccordion-title::after{right:14px;}
  .plp2-faq .xaccordion-content p{padding:0 56px 15px 16px;}
  .plp2-blog-list li{padding:13px 16px;}
  .plp2-blog-list a{font-size:14.5px;}
  .plp2-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
  .plp2-rel-foot{padding:11px 11px 12px;gap:4px;}
  .plp2-rel-name{font-size:13.5px;}
  .plp2-rel-foot::after{width:22px;height:22px;line-height:19px;font-size:17px;}
  .plp2-rel-grid--sinimg{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:400px){
  .plp2-band,
  .plp2-faq #question > h2{gap:10px;}
  .plp2-band::before,
  .plp2-faq #question > h2::before{padding-right:10px;}
  .plp2-chip{padding:5px 12px;}
}

/* --- 13. Movimiento reducido --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .plp2 *{transition:none !important;animation:none !important;}
  .plp2-rel-card:hover{transform:none;}
  .plp2-rel-card:hover .plp2-rel-foot::after,
  .plp2-blog-list li:hover .plp2-blog-arrow{transform:none;}
}