/**
 * assets/css/seo-extra.css — estilos de las piezas anadidas por
 * inc/whatsapp.php e inc/seo-content.php: boton flotante de WhatsApp, FAQ en
 * <details> de la pagina de modelo, intro extra de marca/modelo, "Leer mas"
 * plegable de descripciones largas, tarjetas de la pagina "Guias" y estilo de
 * lectura de paginas de contenido largo (page.php). Reutiliza SIEMPRE los
 * tokens de assets/css/main.css (color, tipografia, espaciado, duracion y
 * curva de easing) — nunca valores sueltos — para que nada de esto se sienta
 * "pegado" al sistema visual ya existente. Encolado desde inc/seo-content.php.
 */

/* ---------------------------------------------------------------------
   WhatsApp FAB
   --------------------------------------------------------------------- */
.sij-whatsapp-fab{
  position:fixed;
  right:var(--sp-5);
  bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  border:var(--bw) solid var(--c-line-strong);
  border-radius:var(--radius-pill);
  background:var(--c-paper);
  color:var(--c-ink);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.sij-whatsapp-fab svg{width:24px;height:24px;}
.sij-whatsapp-fab:active{transform:scale(.94);}
[data-theme="dark"] .sij-whatsapp-fab{box-shadow:0 2px 10px rgba(0,0,0,.45);}
@media (hover:hover) and (pointer:fine){
  .sij-whatsapp-fab:hover{border-color:var(--c-signal);color:var(--c-signal);transform:translateY(-2px);}
}
.sij-whatsapp-fab:focus-visible{border-color:var(--c-signal);color:var(--c-signal);}
@media (min-width:640px){
  .sij-whatsapp-fab{right:var(--sp-6);bottom:var(--sp-6);width:56px;height:56px;}
  .sij-whatsapp-fab svg{width:26px;height:26px;}
}

/* ---------------------------------------------------------------------
   FAQ (pagina de modelo) — mismo patron visual que .brand-accordion__item
   --------------------------------------------------------------------- */
.sij-faq{padding-block:var(--sp-7);border-top:var(--bw) solid var(--c-line);}
.sij-faq h2{font-size:var(--fs-2);margin-bottom:var(--sp-5);}
.sij-faq__list{display:flex;flex-direction:column;max-width:72ch;}
.sij-faq__item{border-top:var(--bw) solid var(--c-line);}
.sij-faq__item:last-child{border-bottom:var(--bw) solid var(--c-line);}
.sij-faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) 0;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-0);
  cursor:pointer;list-style:none;
  transition:color var(--dur-base) var(--ease-out);
}
.sij-faq__item summary::-webkit-details-marker{display:none;}
.sij-faq__item summary::after{
  content:"+";font-family:var(--font-mono);color:var(--c-mute);font-size:var(--fs-1);flex:none;
  transition:color var(--dur-base) var(--ease-out);
}
.sij-faq__item[open] summary::after{content:"–";}
@media (hover:hover) and (pointer:fine){
  .sij-faq__item summary:hover{color:var(--c-signal);}
  .sij-faq__item summary:hover::after{color:var(--c-signal);}
}
.sij-faq__answer{padding-bottom:var(--sp-4);color:var(--c-mute);max-width:65ch;}
.sij-faq__answer p{margin:0;}

/* ---------------------------------------------------------------------
   Intro extra (modelo/marca)
   --------------------------------------------------------------------- */
.sij-intro-extra{margin-top:var(--sp-2);max-width:60ch;}

/* ---------------------------------------------------------------------
   "Leer mas" plegable (descripcion de categoria/marca/modelo)
   El recorte a 4 lineas es SIEMPRE CSS puro (-webkit-line-clamp), activo
   desde el primer pintado — nunca hay un salto de layout (CLS) al cargar el
   JS. JS solo decide si hace falta el boton (mide si el texto se corta de
   verdad) y quita el recorte al pulsarlo, con un fundido breve para que la
   reordenacion del texto no se sienta brusca.
   --------------------------------------------------------------------- */
.sij-catalog-desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  transition:opacity var(--dur-base) var(--ease-out);
}
.sij-catalog-desc.sij-desc--revealing{opacity:.4;}
.sij-catalog-desc.sij-desc--expanded{display:block;-webkit-line-clamp:unset;overflow:visible;}
.sij-desc__toggle{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  margin-top:var(--sp-2);background:none;border:0;padding:0;
  color:var(--c-mute);font-family:var(--font-mono);font-size:var(--fs-000);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sij-desc__toggle:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .sij-desc__toggle:hover{color:var(--c-ink);}
}

/* ---------------------------------------------------------------------
   Tarjetas de la pagina "Guias"
   --------------------------------------------------------------------- */
.sij-guide-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr;margin-top:var(--sp-6);}
@media (min-width:640px){ .sij-guide-grid{grid-template-columns:repeat(2,1fr);} }
.sij-guide-card{
  display:flex;flex-direction:column;gap:var(--sp-2);position:relative;
  padding:var(--sp-5);border:var(--bw) solid var(--c-line);
  color:var(--c-ink);text-decoration:none;
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.sij-guide-card:active{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){
  .sij-guide-card:hover{border-color:var(--c-signal);}
  .sij-guide-card:hover .sij-guide-card__arrow{color:var(--c-signal);transform:translate(2px,-2px);}
}
.sij-guide-card:focus-visible{border-color:var(--c-signal);}
.sij-guide-card h3{font-size:var(--fs-1);margin:0;padding-right:var(--sp-6);}
.sij-guide-card p{margin:0;font-size:var(--fs-00);}
.sij-guide-card__arrow{
  position:absolute;top:var(--sp-5);right:var(--sp-5);width:20px;height:20px;color:var(--c-mute);
  transition:transform var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------
   Lectura larga (page.php: legal, Mi cuenta, paginas de "Guias")
   .sij-entry-content ya trae ancho de 70ch, color y parrafos desde
   assets/css/main.css; aqui solo se completa jerarquia de titulos,
   espaciado de listas y tablas dentro de scroll horizontal en movil.
   --------------------------------------------------------------------- */
.sij-entry-content h2{font-size:var(--fs-2);margin-top:var(--sp-7);}
.sij-entry-content h3{font-size:var(--fs-1);margin-top:var(--sp-5);}
.sij-entry-content ul,.sij-entry-content ol{margin:0 0 var(--sp-4);padding-left:1.25em;}
.sij-entry-content li{margin-bottom:var(--sp-2);}
.sij-entry-content li>ul,.sij-entry-content li>ol{margin-top:var(--sp-2);margin-bottom:0;}
.sij-entry-content .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--sp-3) 0 var(--sp-5);}
.sij-entry-content table{width:100%;border-collapse:collapse;font-size:var(--fs-00);}
.sij-entry-content table th,.sij-entry-content table td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:var(--bw) solid var(--c-line);vertical-align:top;}
.sij-entry-content table th{font-family:var(--font-mono);font-weight:500;color:var(--c-mute);white-space:nowrap;}