/* =============================================================================================
   PREGUNTAS EN PESTAÑAS · reemplaza el carrusel de faq-slider.css   (David 2026-08-09 / hecho 08-10)
   ---------------------------------------------------------------------------------------------
   Lo que había: #faq-list con scroll-snap horizontal, una pregunta a pantalla completa y flechas.
   Para leer la número 40 había que pasar 39. David lo vio y pidió "las pestañas como en Empresas".

   Lo que hay ahora, y es literalmente el patrón de .mfd en empresas.html: <details> nativo. Se ven
   TODAS las preguntas de un vistazo y se abre solo la respuesta que interesa. El <details> se abre
   aunque el JS no cargue y responde al teclado sin una línea de código propia. Encima, una fila de
   pestañas que filtra por tema.

   POR QUÉ NINGUNA REGLA DE AQUÍ USA display:none SOBRE EL TEXTO DE LA RESPUESTA. El contenido de
   los paneles cerrados viaja en el HTML servido y lo indexa Google; ocultarlo con CSS o inyectarlo
   por JS es lo que tira el beneficio. Lo único que se oculta es el PANEL entero cuando hay una
   pestaña activa, y eso lo hace el atributo [hidden] que pone el JS, nunca la hoja de estilos: sin
   JS no hay nada oculto.
   ============================================================================================= */

/* El hero de esta página venía forzado a 100svh por faq-slider.css para que el carrusel cupiera
   entero. Ya no hay carrusel: el hero vuelve al ritmo del resto del sitio. */
.faq-hero{min-height:auto}

.faqp{padding:clamp(30px,4vw,52px) 0 clamp(56px,7vw,96px);background:var(--black)}

/* ---------- Buscador y contador ---------- */
.faqp-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-bottom:18px}
.faqp-buscar{position:relative;flex:1 1 280px;min-width:0}
.faqp-buscar label{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;color:var(--gold-soft);margin-bottom:8px}
.faqp-buscar input{width:100%;background:rgba(255,255,255,.045);
  border:1px solid rgba(247,241,231,.2);color:var(--paper);font-family:var(--body);
  font-size:16px;padding:13px 16px;outline:none;border-radius:0}
.faqp-buscar input::placeholder{color:rgba(247,241,231,.4)}
.faqp-buscar input:focus{border-color:var(--gold)}
.faqp-cuenta{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:rgba(247,241,231,.55);white-space:nowrap;padding-bottom:13px;margin:0}

/* ---------- La fila de pestañas ---------- */
/* Dos comportamientos, y la frontera está medida, no supuesta: son diez pestañas y a 1280px
   ocupan 468px más de los que caben. En pantalla ancha se envuelven en dos filas, como
   .pr-tabs en empresas.html, porque una pestaña que hay que arrastrar para descubrir es una
   pestaña que nadie usa. En móvil se desplazan en horizontal, con un desvanecido a la derecha
   que avisa de que hay más: apilar diez chips en cuatro filas empuja la primera pregunta fuera
   de la pantalla y el pedido era justamente ver las preguntas. Cada pestaña conserva 44px de
   alto en los dos casos: es el piso táctil de la casa y no se negocia por caber. */
.faqp-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 10px;
  margin-bottom:clamp(20px,3vw,32px);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.faqp-tabs::-webkit-scrollbar{display:none}
@media (min-width:900px){
  .faqp-tabs{flex-wrap:wrap;overflow-x:visible;-webkit-mask-image:none;mask-image:none}
}
.faqp-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:10px 17px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(199,162,74,.38);background:transparent;
  font-family:var(--display);font-size:12px;letter-spacing:.1em;color:rgba(247,241,231,.76);
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.faqp-tab:hover{border-color:var(--gold-soft);color:var(--paper)}
.faqp-tab:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.faqp-tab b{font-weight:400;font-variant-numeric:lining-nums tabular-nums;
  font-size:11px;opacity:.62}
.faqp-tab[aria-selected="true"]{background:linear-gradient(100deg,#c7a24a,#f4e3ae 50%,#c7a24a);
  border-color:transparent;color:#0b2418;font-weight:600}
.faqp-tab[aria-selected="true"] b{opacity:.72}

/* ---------- Grupos y preguntas (patrón .mfd de empresas.html) ---------- */
.faqp-grupo{margin:0 0 clamp(30px,4vw,46px)}
.faqp-grupo:last-child{margin-bottom:0}
.faqp-h2{font-family:var(--display);font-size:clamp(12px,1.4vw,13px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-soft);margin:0 0 4px;font-weight:400;
  scroll-margin-top:96px}
.faqp-h2 span{color:rgba(247,241,231,.42);font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:.12em;margin-left:8px}

.faqp-q{border-top:1px solid rgba(199,162,74,.2);scroll-margin-top:96px}
.faqp-grupo .faqp-q:last-of-type{border-bottom:1px solid rgba(199,162,74,.2)}
.faqp-q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,1.9vw,22px) 4px;cursor:pointer;list-style:none}
.faqp-q summary::-webkit-details-marker{display:none}
.faqp-q summary:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-2px}
/* El h3 vive DENTRO del summary a propósito: <summary> admite un encabezado, y así la pregunta
   sigue siendo un encabezado real en el esquema del documento en vez de un <span> con aspecto de
   título. Eso es lo que lee un lector de pantalla al saltar por encabezados, y lo que lee Google. */
/* TIPOGRAFIA Y TAMANO DE LA PREGUNTA (David 2026-08-10: "colocar las preguntas al tamaño del
   texto de párrafos pequeño para que no quede tan larga esa zona, ponlas en EB Garamond").

   LA FUENTE. Antes decia var(--serif), que en cb-page.css vale "Playfair Display". Medido con
   getComputedStyle, las 97 preguntas salian en Playfair. Ahora va var(--body), que es EB Garamond
   en cb-page.css, con la familia literal detras: si un dia esta pagina dejara de cargar
   cb-page.css, un var() sin resolver invalida la declaracion entera y la pregunta caeria a la
   fuente heredada sin avisar. El respaldo hace que el peor caso siga siendo EB Garamond.

   EL TAMANO. 15.5px no es un numero elegido: es el parrafo pequeno de la casa, medido. Es lo que
   vale .mfd .cuerpo p en empresas.html (el mismo patron <details> del que salio este componente),
   .pr-sub y .pesoCierre en precios.html, y .faqp-r p aqui abajo, o sea la respuesta que cuelga de
   esta misma pregunta. Antes era clamp(16.5px,1.7vw,20px): 20px en escritorio y 16.5 en telefono.

   Y NO HACE FALTA PARTIR ESCRITORIO DE MOVIL. El piso tactil de David son 15px de texto y 15.5
   los pasa, asi que la pregunta se encoge por igual en los dos y sigue siendo un enlace que se
   puede tocar. El alto del summary tambien queda por encima de los 48px del piso; medido abajo. */
.faqp-q summary h3{margin:0;font-family:var(--body,"EB Garamond",Georgia,serif);
  font-size:15.5px;line-height:1.35;font-weight:400;color:var(--paper);
  transition:color .2s ease}
.faqp-q summary:hover h3{color:var(--gold-soft)}
.faqp-q summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;
  border-right:1.5px solid var(--gold-soft);border-bottom:1.5px solid var(--gold-soft);
  transform:rotate(45deg) translateY(-3px);transition:transform .24s ease}
.faqp-q[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faqp-q[open] summary h3{color:var(--gold-soft)}

.faqp-r{padding:0 4px clamp(19px,2.3vw,28px);max-width:74ch}
.faqp-r p{margin:0 0 12px;font-size:15.5px;line-height:1.62;color:rgba(247,241,231,.82)}
.faqp-r p:last-child{margin-bottom:0}
.faqp-r strong,.faqp-r b{color:var(--paper);font-weight:600}
.faqp-r a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.faqp-r ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.faqp-r li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.5;
  color:rgba(247,241,231,.82)}
.faqp-r li::before{content:"\2726";position:absolute;left:0;top:.2em;font-size:.62em;color:#8f6d2c}

.faqp-vacio{margin:26px 0 0;font-family:var(--body);font-size:16px;
  color:rgba(247,241,231,.62);text-align:center}

/* Con reduce-motion se apaga la animación de la flecha, no el componente: la pestaña sigue
   cambiando y el <details> sigue abriendo. Apagar el script aquí dejaría la página sin filtro. */
@media (prefers-reduced-motion:reduce){
  .faqp-q summary::after,.faqp-q summary h3,.faqp-tab{transition:none}
}