/* ============================================================
   paginas.css  ·  Diseño de las páginas de contenido del sitio
   (Quiénes somos, FAQ, Términos, Privacidad, Legal…).
   Centra la columna de lectura y le da una presentación prolija,
   acorde al diseño del sitio. Usa las variables de publico.css.
   ============================================================ */

.pagina{padding:48px 0 60px}

/* Encabezado centrado con eyebrow + título */
.pagina__head{text-align:center;max-width:720px;margin:0 auto 34px}
.pagina__eyebrow{display:inline-block;font-size:12px;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase;color:var(--color-secundario,#c8a24b);margin-bottom:10px}
.pagina__titulo{font-family:"Fraunces",serif;font-weight:600;line-height:1.1;margin:0;
  font-size:clamp(28px,4.2vw,42px);letter-spacing:-.01em;color:var(--color-primario,#15140f)}
.pagina__bajada{margin:14px auto 0;max-width:620px;font-size:16px;line-height:1.6;color:#666}
.pagina__head::after{content:"";display:block;width:56px;height:3px;border-radius:3px;
  background:var(--color-secundario,#c8a24b);margin:20px auto 0}

/* Columna de lectura centrada, dentro de una tarjeta suave */
.pagina__cuerpo{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--linea,#ece9e2);
  border-radius:18px;padding:clamp(24px,4vw,46px);box-shadow:0 12px 40px rgba(20,20,15,.06)}
.pagina__cuerpo.contenido-html{font-size:16px;line-height:1.75;color:#3a3a3a}
.pagina__cuerpo.contenido-html > :first-child{margin-top:0}
.pagina__cuerpo.contenido-html > :last-child{margin-bottom:0}
.pagina__cuerpo.contenido-html h2{font-size:23px;margin-top:1.6em}
.pagina__cuerpo.contenido-html h2:first-child{margin-top:0}
.pagina__cuerpo.contenido-html h3{font-size:19px}
.pagina__cuerpo.contenido-html a{color:var(--color-primario,#15140f);text-decoration:underline;text-underline-offset:2px}
.pagina__cuerpo.contenido-html strong{color:var(--color-primario,#15140f)}
.pagina__cuerpo.contenido-html ul li,.pagina__cuerpo.contenido-html ol li{margin:.3em 0}
.pagina__cuerpo.contenido-html blockquote{margin:1.2em 0;padding:4px 0 4px 18px;
  border-left:3px solid var(--color-secundario,#c8a24b);color:#555;font-style:italic}

/* --- FAQ con mejor diseño --- */
.pagina--faq .faq-lista{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.pagina--faq .faq-cat{font-family:"Fraunces",serif;font-size:20px;color:var(--color-primario,#15140f);
  margin:22px 0 4px;text-align:center}
.pagina--faq .faq-cat:first-child{margin-top:0}
.pagina--faq .faq-item{background:#fff;border:1px solid var(--linea,#ece9e2);border-radius:14px;
  overflow:hidden;transition:box-shadow .15s,border-color .15s}
.pagina--faq .faq-item[open]{border-color:var(--color-secundario,#c8a24b);box-shadow:0 8px 26px rgba(20,20,15,.08)}
.pagina--faq .faq-item__q{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;
  font-size:16px;color:var(--color-primario,#15140f);display:flex;align-items:center;justify-content:space-between;gap:14px}
.pagina--faq .faq-item__q::-webkit-details-marker{display:none}
.pagina--faq .faq-item__q::after{content:"+";font-size:22px;font-weight:400;color:var(--color-secundario,#c8a24b);
  flex-shrink:0;transition:transform .18s}
.pagina--faq .faq-item[open] .faq-item__q::after{transform:rotate(45deg)}
.pagina--faq .faq-item__a{padding:0 22px 20px;color:#4a4a4a;line-height:1.7;font-size:15.5px}

/* Estado vacío */
.pagina__vacio{text-align:center;color:#888;max-width:520px;margin:0 auto;font-size:16px}

@media (max-width:560px){
  .pagina{padding:32px 0 44px}
  .pagina__cuerpo{border-radius:14px}
}