/* ==========================================================================
   Páginas de recursos (guías, plantilla, glosario) — Fase 2 SEO
   Reutiliza .phero de editorial.css y las variables de styles.css.
   ========================================================================== */

.phero--resource {
  padding-bottom: 56px;
}

.phero--resource .phero__title {
  max-width: 18ch;
  font-size: clamp(38px, 5vw, 68px);
}

.resource-answer {
  max-width: 760px;
  margin: 28px 0 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #334155;
}

.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.resource {
  padding: 8px 0 96px;
  background: #ffffff;
}

/* Mismo borde izquierdo que el hero (.phero .container en editorial.css) */
.resource .resource__body {
  max-width: none;
  margin: 0;
  padding-left: calc(max(0px, (100vw - 1200px) / 2) + clamp(24px, 5vw, 100px));
  padding-right: clamp(24px, 5vw, 72px);
}

.resource__body > * {
  max-width: 820px;
}

.resource__body {
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.7;
}

.resource__body h2 {
  margin: 56px 0 16px;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0e1236;
}

.resource__body p {
  margin: 0 0 16px;
}

.resource__body ul,
.resource__body ol {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.resource__body li {
  margin-bottom: 8px;
}

.resource__body a {
  color: var(--cta-primary, #3c48ba);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resource__body strong {
  color: #0e1236;
}

/* Tabla comparativa */
.resource-table {
  overflow-x: auto;
  margin: 8px 0 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.resource-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.resource-table th,
.resource-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e2e8f0;
}

.resource-table thead th {
  background: #f1f3ff;
  color: #0e1236;
  font-weight: 700;
}

.resource-table tbody th {
  width: 22%;
  color: #0e1236;
  font-weight: 600;
}

.resource-table tr:last-child th,
.resource-table tr:last-child td {
  border-bottom: 0;
}

/* Casos */
.resource-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 8px 0 16px;
}

.resource-case {
  padding: 20px 22px;
  border-radius: 12px;
  background: #f8fafc;
  border-left: 4px solid #6d7bff;
}

.resource-case p {
  margin: 0;
}

.resource-case__tag {
  margin-bottom: 8px !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f5bd5;
}

/* Pasos numerados */
.resource-steps li {
  margin-bottom: 12px;
}

/* FAQ: reutiliza la tarjeta .faq-item de styles.css (la de la home)
   y le da el espaciado y el ícono propios de <details>. */
.resource-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resource-faq .faq-item summary {
  position: relative;
  display: block;
  padding: 20px 60px 20px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.45;
  color: #0e1236;
}

.resource-faq .faq-item summary::-webkit-details-marker {
  display: none;
}

.resource-faq .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: #6d7bff;
}

.resource-faq .faq-item[open] summary::after {
  content: "\2013";
}

.resource-faq .faq-item > div {
  padding: 0 24px 20px;
}

.resource-faq .faq-item > div p:last-child {
  margin-bottom: 0;
}

/* Relacionadas */
.resource-related {
  margin: 56px 0 0;
  padding: 24px 28px;
  border-radius: 12px;
  background: #f8fafc;
}

.resource-related__title {
  margin: 0 0 10px !important;
  font-weight: 700;
  color: #0e1236;
}

.resource-related ul {
  margin: 0;
}

/* Cierre (igual en todas las páginas) */
.resource-cta {
  margin-top: 48px;
  padding: 36px 32px;
  border-radius: 16px;
  background: #10133a;
  color: #c7cbef;
}

.resource-cta__title {
  margin: 0 0 8px !important;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.resource-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.resource-cta .resource-cta__link {
  color: #c7cbef;
}

/* Botones (styles.css define .btn base sin variantes de color) */
.resource-page .btn--primary {
  background: #6d7bff;
  color: #ffffff;
}

.resource-page .btn--primary:hover {
  background: #5563f0;
}

.resource-page .btn--ghost {
  background: transparent;
  color: var(--cta-primary, #3c48ba);
  border: 1px solid currentColor;
}

/* Plantilla de brief */
.brief {
  margin: 8px 0 24px;
  padding: 28px 32px;
  border: 2px dashed #c7cdfa;
  border-radius: 16px;
  background: #fbfbff;
}

.brief__title {
  margin: 0 0 16px !important;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0e1236;
}

.brief__list li {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef0fb;
}

.brief__list li:last-child {
  border-bottom: 0;
}

/* Glosario */
.glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  max-width: 900px;
}

.glossary-index a {
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f3ff;
  color: #3c48ba;
  font-size: 0.9rem;
  text-decoration: none;
}

.glossary-term {
  scroll-margin-top: 110px;
}

.glossary-term__why {
  padding-left: 14px;
  border-left: 3px solid #fdc134;
}

@media (max-width: 640px) {
  .resource-answer {
    font-size: 1.05rem;
  }

  .resource-cta,
  .brief {
    padding: 24px 20px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .no-print,
  .scroll-to-top,
  .phero__mark {
    display: none !important;
  }

  .phero--resource {
    padding: 0 0 16px;
  }

  .brief {
    border: 1px solid #94a3b8;
  }

  .brief__list li {
    min-height: 3.2em;
  }
}