/*
 * Ferrolan · Guías de compra en categoría · v1.0.0
 * Se carga SOLO en categorías cuya descripción adicional contiene una guía (.fl-guide).
 *
 * Estructura HTML (ver README.md):
 *   .fl-guide
 *     .fl-guide__nav            índice lateral (en móvil, fila de pastillas)
 *       p.fl-guide__kicker      «Guía de compra»
 *       ol.fl-guide__toc > li > a[href="#id-seccion"]
 *       a.fl-guide__card        tarjeta de asesoramiento (opcional)
 *     .fl-guide__body
 *       h2 + p.fl-guide__lead
 *       div.fl-guide__sec#id-seccion  (h3 + p / tabla / lista)  ← solo divs de sección aquí
 *
 * Pestañas sin JavaScript: se muestra la sección del ancla (:target); sin ancla, la primera.
 * Navegadores sin :has() muestran todas las secciones (degradación segura).
 */

#js-product-list-footer .card:has(.fl-guide){border:0;box-shadow:none;background:none}
.category-additional-description:has(.fl-guide){max-width:none;padding:48px 0 24px}

.fl-guide{display:flex;align-items:flex-start;gap:48px;color:#4A4A4A}

/* Índice */
.fl-guide__nav{flex:0 0 250px;width:250px;position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
.fl-guide .fl-guide__kicker{margin:0 0 -2px 2px;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#C40731}
.fl-guide .fl-guide__toc{list-style:none;margin:0;padding:4px 18px;background:#EFEFEF;border-radius:12px;counter-reset:fl-toc}
.fl-guide .fl-guide__toc li{counter-increment:fl-toc;margin:0;padding:0}
.fl-guide .fl-guide__toc li + li{border-top:1px solid #E1E1E1}
.fl-guide .fl-guide__toc a{position:relative;display:flex;gap:12px;padding:12px 0 15px;font-size:14px;font-weight:600;line-height:1.4;color:#1C1C1A;text-decoration:none}
.fl-guide .fl-guide__toc a::before{content:counter(fl-toc,decimal-leading-zero);flex:none;width:18px;font-size:12px;font-weight:700;line-height:1.65;color:#707072}
.fl-guide .fl-guide__toc a::after{content:"";position:absolute;left:30px;bottom:7px;width:24px;height:2px;background:#C40731;transform:scaleX(0);transform-origin:left;transition:transform .15s ease}

/* Tarjeta de asesoramiento */
.fl-guide .fl-guide__card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:#EFEFEF;color:#1C1C1A;text-decoration:none}
.fl-guide__card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.fl-guide__card-k{padding:4px 4px 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C40731}
.fl-guide__card-t{padding:0 4px;font-size:15px;font-weight:700;line-height:1.3;color:#1C1C1A}
.fl-guide__card-x{padding:0 4px 6px;font-size:13px;font-weight:500;line-height:1.45;color:#5E5E5E}

/* Cuerpo */
.fl-guide__body{flex:1 1 auto;min-width:0;counter-reset:fl-sec}
.fl-guide .fl-guide__body > h2{margin:0 0 12px;padding:0;border:0;font-size:28px;font-weight:700;line-height:1.2;color:#1C1C1A}
.fl-guide__body > h2::before{content:"";display:block;width:40px;height:3px;margin:0 0 18px;background:#C40731}
.fl-guide .fl-guide__lead{margin:0;font-size:17px;line-height:1.7;color:#333}
.fl-guide__sec{padding-top:28px;counter-increment:fl-sec;scroll-margin-top:120px}
.fl-guide .fl-guide__sec h3{display:flex;align-items:baseline;gap:14px;margin:0 0 10px;font-size:20px;font-weight:700;line-height:1.3;color:#1C1C1A}
.fl-guide__sec h3::before{content:counter(fl-sec,decimal-leading-zero);flex:none;font-size:15px;font-weight:700;letter-spacing:.04em;color:#C40731}
.fl-guide .fl-guide__sec p{margin:0 0 12px;font-size:15px;line-height:1.75;color:#4A4A4A}
.fl-guide strong{font-weight:600;color:#1C1C1A}
.fl-guide__body a{color:#C40731;text-decoration:underline;text-underline-offset:2px}

/* Tablas */
.fl-guide__table{overflow-x:auto;margin:16px 0 4px;border-top:1px solid #1C1C1A}
.fl-guide__table table{width:100%;margin:0;border-collapse:collapse;border:0;font-size:14px;line-height:1.5}
.fl-guide__table th{padding:10px 18px 10px 0;border:0;border-bottom:1px solid #E1E1E1;background:none;text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#707072}
.fl-guide__table td{padding:12px 18px 12px 0;border:0;border-bottom:1px solid #ECECEC;background:none;vertical-align:top;color:#4A4A4A}
.fl-guide__table td:first-child{font-weight:600;color:#1C1C1A}

/* Listas */
.fl-guide .fl-guide__sec ul{list-style:none;margin:8px 0 12px;padding:0}
.fl-guide .fl-guide__sec ul li{position:relative;margin:0;padding:10px 0 10px 26px;border-bottom:1px solid #ECECEC;font-size:15px;line-height:1.55}
.fl-guide .fl-guide__sec ul li::before{content:"";position:absolute;left:0;top:21px;width:14px;height:2px;background:#C40731}
.fl-guide .fl-guide__note{margin:10px 0 0;font-size:13px;line-height:1.55;color:#707072}

/* Pestañas sin JavaScript (hasta 12 secciones) */
@supports selector(:has(*)){
  /* Ocultas sin display:none para que la numeración (01, 02…) siga contando todas las secciones */
  .fl-guide__sec{height:0;overflow:hidden;visibility:hidden;padding-top:0}
  .fl-guide__sec:target,
  .fl-guide:not(:has(.fl-guide__sec:target)) .fl-guide__sec:first-of-type{height:auto;overflow:visible;visibility:visible;padding-top:28px}
  .fl-guide:not(:has(.fl-guide__sec:target)) .fl-guide__toc li:first-child a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(1):target) .fl-guide__toc li:nth-child(1) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(2):target) .fl-guide__toc li:nth-child(2) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(3):target) .fl-guide__toc li:nth-child(3) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(4):target) .fl-guide__toc li:nth-child(4) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(5):target) .fl-guide__toc li:nth-child(5) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(6):target) .fl-guide__toc li:nth-child(6) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(7):target) .fl-guide__toc li:nth-child(7) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(8):target) .fl-guide__toc li:nth-child(8) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(9):target) .fl-guide__toc li:nth-child(9) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(10):target) .fl-guide__toc li:nth-child(10) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(11):target) .fl-guide__toc li:nth-child(11) a::after,
  .fl-guide:has(.fl-guide__sec:nth-of-type(12):target) .fl-guide__toc li:nth-child(12) a::after{transform:scaleX(1)}
}

/* Tablet y móvil */
@media (max-width:991px){
  .category-additional-description:has(.fl-guide){padding:32px 0 16px}
  .fl-guide{flex-direction:column;gap:20px}
  .fl-guide__nav{position:static;flex:none;width:100%;gap:12px}
  .fl-guide .fl-guide__toc{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;background:none;border-radius:0;scrollbar-width:none}
  .fl-guide .fl-guide__toc li + li{border-top:0}
  .fl-guide .fl-guide__toc a{padding:9px 14px;border-radius:999px;background:#EFEFEF;white-space:nowrap;font-size:13px}
  .fl-guide .fl-guide__toc a::before,.fl-guide .fl-guide__toc a::after{display:none}
  .fl-guide .fl-guide__card{display:none}
  .fl-guide__body{width:100%}
  .fl-guide .fl-guide__body > h2{font-size:24px}
  .fl-guide .fl-guide__sec h3{font-size:18px}
  .fl-guide__sec{scroll-margin-top:90px}
}
/* Pastilla activa en móvil */
@media (max-width:991px){
  @supports selector(:has(*)){
    .fl-guide:not(:has(.fl-guide__sec:target)) .fl-guide__toc li:first-child a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(1):target) .fl-guide__toc li:nth-child(1) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(2):target) .fl-guide__toc li:nth-child(2) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(3):target) .fl-guide__toc li:nth-child(3) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(4):target) .fl-guide__toc li:nth-child(4) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(5):target) .fl-guide__toc li:nth-child(5) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(6):target) .fl-guide__toc li:nth-child(6) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(7):target) .fl-guide__toc li:nth-child(7) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(8):target) .fl-guide__toc li:nth-child(8) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(9):target) .fl-guide__toc li:nth-child(9) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(10):target) .fl-guide__toc li:nth-child(10) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(11):target) .fl-guide__toc li:nth-child(11) a,
    .fl-guide:has(.fl-guide__sec:nth-of-type(12):target) .fl-guide__toc li:nth-child(12) a{background:#1C1C1A;color:#fff}
  }
}