/* ============================================================
   Tema Apacigua
   Se carga después de viniciojarquin.css
   ============================================================ */

:root {
  --color-paper: #f6f1e9;
  --color-paper-card: #fffdf9;
  --color-paper-line: #e6dacb;

  --color-ink: #2f2a24;
  --color-ink-dark: #5f472c;
  --color-ink-muted: #766b5f;

  --color-red: #a35b52;
  --color-teal: #6f8f72;
  --color-gold: #8a6a43;

  --content-width: 1080px;
  --reading-width: 720px;

  --border-color: #e6dacb;
  --border-radius-small: 14px;
  --border-radius-medium: 24px;

  --shadow-card: 0 24px 70px rgba(58, 45, 32, 0.10);
}

body {
  background:
    radial-gradient(
      circle at top left,
      rgba(216, 196, 166, 0.28),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #f8f3eb 0%,
      var(--color-paper) 100%
    );

  font-size: 17px;
  line-height: 1.7;
}

/* ============================================================
   Encabezado
   ============================================================ */

.site-header {
  background:
    linear-gradient(
      180deg,
      #8a6a43 0%,
      #6b5032 100%
    );

  color: #ffffff;

  padding: 42px 24px 30px;

  text-align: center;

  box-shadow:
    0 8px 24px rgba(58, 45, 32, 0.14);
}

.site-logo {
  width: 180px;
  max-width: 80%;

  margin: 0 auto 16px;

  opacity: 1;
}

.site-header .site-title {
  display: none;

  color: #ffffff;
}

.site-role {
  margin: 10px auto 0;

  color: rgba(255, 255, 255, 0.88);

  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1.5;

  text-transform: none;
}

.site-header .site-subtitle {
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding: 58px 24px 34px;

  text-align: center;
}

.hero h1 {
  margin: 0 0 20px;

  font-size: clamp(42px, 7vw, 78px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -1px;
}

.hero p {
  max-width: 720px;

  margin: 0 auto;

  color: var(--color-ink-muted);

  font-size: 19px;
  line-height: 1.7;
}

/* ============================================================
   Barra de navegación
   ============================================================ */

.page-navigation {
  padding: 0 24px;

  margin-bottom: 28px;
}

.back-button {
  min-height: 48px;

  padding: 13px 24px;

  border: 1px solid #d8c4a6;
  border-radius: 999px;

  background: rgba(255, 253, 249, 0.72);

  color: #5f472c;

  font-weight: 700;

  box-shadow:
    0 8px 20px rgba(58, 45, 32, 0.05);
}

.back-button:hover {
  background: #fffaf3;

  border-color: #8a6a43;
}

/* ============================================================
   Contenido
   ============================================================ */

.site-main {
  padding: 0 24px;

  text-align: left;
}

.site-main > * {
  max-width: var(--content-width);
}

.card-list {
  width: 100%;
  max-width: var(--content-width);

  margin: 0 auto;
}

.card {
  background: var(--color-paper-card);

  border: 1px solid var(--border-color);
  border-radius: 24px;

  padding: 34px;

  text-align: left;

  box-shadow: var(--shadow-card);
}

.card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 30px 80px rgba(58, 45, 32, 0.12);
}

.card-list .card {
  margin-bottom: 24px;
}

.card-title {
  margin: 0 0 14px;

  color: var(--color-ink);

  font-size: 34px;
  font-weight: 400;
  line-height: 1.18;
}

.card-text {
  margin: 0 0 18px;

  color: var(--color-ink-muted);

  font-size: 17px;
  line-height: 1.7;
}

.link-list {
  margin-top: 12px;
}

.link-list li {
  color: var(--color-ink-muted);
}

.link-list a {
  color: #5f472c;
}

.link-list a:hover {
  color: #8a6a43;
}

/* ============================================================
   Botones
   ============================================================ */

.button,
.primary-button {
  min-height: 48px;

  padding: 13px 24px;

  border: 1px solid #8a6a43;
  border-radius: 999px;

  background: #8a6a43;

  color: #ffffff;

  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;

  box-shadow:
    0 10px 24px rgba(95, 71, 44, 0.18);
}

.button:hover,
.primary-button:hover {
  background: #5f472c;

  border-color: #5f472c;
}

.button-outline {
  min-height: 48px;

  padding: 13px 24px;

  border: 1px solid #d8c4a6;
  border-radius: 999px;

  background: transparent;

  color: #5f472c;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.button-outline:hover {
  background: #fffaf3;

  border-color: #8a6a43;
}

/* ============================================================
   Insignias
   ============================================================ */

.badge-warning {
  background: #fbf5e9;

  border-color: #b88746;

  color: #b88746;
}

/* ============================================================
   Pie de página
   ============================================================ */

.site-footer {
  margin-top: 70px;

  padding: 30px 24px;

  border-top: 1px solid var(--border-color);

  color: var(--color-ink-muted);

  font-size: 14px;
}

.footer-name {
  color: var(--color-ink);
}

.footer-company {
  color: var(--color-ink-muted);
}

.footer-whatsapp {
  color: #5f472c;

  font-weight: 700;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 700px) {
  .site-header {
    padding: 34px 18px 24px;
  }

  .site-logo {
    width: 150px;
  }

  .site-role {
    font-size: 13px;
  }

  .hero {
    padding: 40px 18px 24px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .site-main {
    padding: 0 18px;
  }

  .page-navigation {
    padding: 0 18px;

    gap: 10px;
  }

  .card {
    padding: 24px;
  }

  .card-title {
    font-size: 30px;
  }

  .button,
  .button-outline,
  .primary-button {
    width: 100%;
  }
}