/* ==========================================================================
    guia.css
    Folha própria das páginas de guia do AquaristaPRO.
    Depende das variáveis definidas em ../style.css.
    ========================================================================== */

/* --------------------------------------------------------------------------
    1. Estrutura base e tipografia de leitura
    -------------------------------------------------------------------------- */

.guide-article p {
   text-indent: 2.5rem;
   text-align: justify;
}

body.guide-page {
   background:
      radial-gradient(circle at top, rgba(138, 216, 231, 0.14), transparent 32%),
      linear-gradient(180deg, #fbfeff 0%, #f4fbfd 100%);
}

.guide-shell {
   width: min(100%, 1440px);
   max-width: 1440px;
   margin: 0 auto;
   padding: 2rem 1.25rem 4rem;
}

.guide-article {
   font-size: 18px;
   line-height: 1.6;
}

.guide-hero {
   padding-top: 4rem;
   padding-bottom: 8.2rem;
   background: linear-gradient(180deg, #eff8fb 0%, #dff1f6 100%);
   color: var(--text);
}

.guide-hero-content {
   max-width: 1440px;
}

.guide-hero-inner {
   display: grid;
   grid-template-columns: minmax(240px, 320px) minmax(680px, 760px) minmax(240px, 320px);
   justify-content: center;
   align-items: start;
   gap: 1rem;
   text-align: left;
}

.guide-hero-copy {
   grid-column: 2;
   width: 100%;
   max-width: 760px;
}

.guide-content {
   max-width: 800px;
   margin: auto;
}

.guide-content > section[id],
.faq-section[id] {
   scroll-margin-top: 6.5rem;
}

.guide-content h2 {
   margin-top: 2.4rem;
   margin-bottom: 0.8rem;
   font-size: 1.6rem;
   line-height: 1.3;
}

.guide-content h3 {
   margin-top: 1.8rem;
   margin-bottom: 0.6rem;
   font-size: 1.25rem;
   line-height: 1.35;
}

.guide-content p,
.guide-content li {
   font-size: 1rem;
   line-height: 1.6;
}

.guide-content ul,
.guide-content ol {
   padding-left: 1.4rem;
   margin: 0.9rem 0;
}

.guide-content li + li {
   margin-top: 0.4rem;
}

.img-card-guia {
   margin: 0 0 0 0;
   border: 1px solid var(--border);
   border-radius: 0 0 22px 22px;
   overflow: hidden;
   background:
      linear-gradient(180deg, rgba(220, 238, 242, 0.72) 0%, rgba(255, 255, 255, 0.98) 100%);
   box-shadow: 0 18px 40px rgba(18, 49, 63, 0.14);
}

.img-card-guia img {
   display: block;
   width: 100%;
   max-width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}

.img-card-guia figcaption {
   padding: 0.85rem 1rem 1rem;
   color: var(--muted);
   font-size: 0.92rem;
   line-height: 1.55;
}

/* .guide-image-placeholder-card {
   background: linear-gradient(180deg, rgba(216, 239, 244, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
} */

.guide-image-placeholder {
   display: grid;
   place-items: center;
   min-height: 300px;
   /* padding: 1.5rem; */
   color: var(--primary);
   font-size: 1rem;
   font-weight: 700;
   text-align: center;
   background:
      radial-gradient(circle at top right, rgba(122, 211, 230, 0.32), transparent 40%),
      linear-gradient(135deg, rgba(11, 122, 138, 0.08), rgba(138, 216, 231, 0.22));
   
}

.guide-image-placeholder img {
   display: block;  
   max-width: 100%;
   max-height: 400px;
   aspect-ratio: auto;
   object-fit: contain;
}

@media (max-width: 640px) {
   .img-card-guia {
      margin: 1.15rem 0;
      border-radius: 18px;
   }

   .guide-image-placeholder {
      min-height: 220px;
      font-size: 0.94rem;
   }
}

/* --------------------------------------------------------------------------
    2. Header do artigo
    -------------------------------------------------------------------------- */

.guide-header {
   margin: 0;
   padding: 0;
   border: 0;
   text-align: left;
}

.guide-badge {
   display: inline-block;
   margin: 0 0 0.55rem;
   color: rgba(255, 255, 255, 0.92);
   font-weight: 800;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.3em;
}

.guide-title {
   font-size: clamp(1.9rem, 4vw, 2.6rem);
   line-height: 1.2;
   margin: 0;
   color: var(--text);
   padding-bottom: 20px;
}

@media (max-width: 1199px) {
   .guide-hero {
      padding-top: 3rem;
      padding-bottom: 6.5rem;
   }

   .guide-hero-inner {
      justify-items: center;
      text-align: center;
   }

   .guide-header {
      text-align: center;
   }
}

/* --------------------------------------------------------------------------
    3. Bloco introdutório sobreposto ao hero
    -------------------------------------------------------------------------- */

.guide-intro-card {
   margin-top: -80px;
   margin-bottom: 1.6rem;
   padding: 1.35rem 1.45rem;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 18px 42px rgba(18, 49, 63, 0.12);
   backdrop-filter: blur(10px);
}

.guide-intro-kicker,
.guide-intro-title,
.guide-intro-summary,
.guide-intro-meta {
   opacity: 0;
   transform: translateY(14px);
   animation: guideIntroReveal 0.55s ease forwards;
}

.guide-intro-kicker {
   margin: 0 0 0.55rem;
   color: var(--primary);
   font-size: 0.8rem;
   font-weight: 800;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   animation-delay: 0.05s;
}

.guide-intro-title {
   margin: 0;
   color: var(--text);
   font-size: clamp(1.35rem, 2.2vw, 1.85rem);
   line-height: 1.28;
   animation-delay: 0.12s;
}

.guide-intro-summary {
   margin: 0.85rem 0 0;
   color: var(--muted);
   font-size: 1rem;
   line-height: 1.65;
   animation-delay: 0.2s;
}

.guide-intro-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.9rem;
   margin-top: 1rem;
   color: var(--muted);
   font-size: 0.92rem;
   font-weight: 600;
   animation-delay: 0.28s;
}

@keyframes guideIntroReveal {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 1199px) {
   .guide-intro-card {
      margin-top: -4.9rem;
   }
}

@media (max-width: 640px) {
   .guide-intro-card {
      margin-top: -4.2rem;
      padding: 1.2rem 1.1rem;
   }

   .guide-intro-meta {
      flex-direction: column;
      gap: 0.45rem;
   }
}

/* --------------------------------------------------------------------------
    4. Sumário / Índice interativo
    -------------------------------------------------------------------------- */

.guide-layout {
   display: block;
}

.guide-body {
   min-width: 0;
}

.guide-toc {
   padding: 1.1rem 1.25rem;
   margin-bottom: 1.8rem;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: var(--surface);
}

.guide-toc-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.9rem;
   margin-bottom: 0.75rem;
}

.guide-toc-title {
   margin: 0;
   font-weight: 800;
   text-transform: uppercase;
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   color: var(--muted);
}

.guide-toc-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
   padding: 0;
   border-radius: 999px;
   background: #dceef2;
   color: var(--text);
   border: 1px solid var(--border);
   box-shadow: none;
   flex-shrink: 0;
}

.guide-toc-list {
   margin: 0;
   padding-left: 1.1rem;
   display: grid;
   gap: 0.45rem;
}

.guide-toc-link {
   color: var(--text);
   font-weight: 600;
   text-decoration: none;
   border-bottom: 2px solid transparent;
   transition: color 0.2s ease, border-color 0.2s ease;
}

.guide-toc-link:hover {
   color: var(--primary);
}

.guide-toc-link.is-active {
   color: var(--primary);
   border-bottom-color: var(--primary);
}

.guide-toc-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   left: 1rem;
   bottom: 1rem;
   z-index: 70;
   padding: 0.85rem 1.1rem;
   border: 0;
   border-radius: 999px;
   background: var(--primary);
   color: white;
   font-weight: 700;
   box-shadow: 0 10px 24px rgba(18, 49, 63, 0.28);
   cursor: pointer;
   visibility: visible;
   opacity: 1;
}

.guide-toc-backdrop {
   position: fixed;
   inset: 0;
   z-index: 39;
   background: rgba(18, 49, 63, 0.4);
}

.guide-toc-backdrop[hidden] {
   display: none;
}

body.guide-toc-open {
   overflow: hidden;
}

@media (max-width: 1199px) {
   .guide-hero-inner {
      grid-template-columns: minmax(0, 1fr);
      justify-items: stretch;
      gap: 0;
   }

   .guide-hero-copy {
      grid-column: auto;
   }

   .guide-toc {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 46;
      width: min(80vw, 420px);
      max-width: 80vw;
      height: 100vh;
      max-height: 100vh;
      margin-bottom: 0;
      padding: 1.25rem;
      border-radius: 0 20px 20px 0;
      overflow-y: auto;
      box-shadow: 0 22px 48px rgba(18, 49, 63, 0.24);
      transform: translateX(-100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.28s ease, opacity 0.2s ease, visibility 0.2s ease;
   }

   .guide-toc.is-open {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }
}

@media (min-width: 1200px) {
   .guide-shell {
      display: grid;
      grid-template-columns: minmax(240px, 320px) minmax(680px, 760px) minmax(240px, 320px);
      justify-content: center;
      align-items: start;
      gap: 1rem;
      width: min(100%, 1440px);
      max-width: 1440px;
   }

   .guide-article,
   .guide-layout {
      display: contents;
   }

   .guide-toc-toggle,
   .guide-toc-backdrop,
   .guide-toc-close {
      display: none;
   }

   .guide-body {
      grid-column: 2;
      width: 100%;
      max-width: 760px;
      min-width: 0;
      margin: 0;
   }

   .guide-toc {
      grid-column: 1;
      position: sticky;
      top: 6rem;
      width: min(80vw, 420px);
      max-width: 100%;
      height: auto;
      max-height: calc(100vh - 7.5rem);
      padding: 1.1rem 1.25rem;
      border-radius: 16px;
      overflow-y: auto;
      box-shadow: none;
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }
}

/* --------------------------------------------------------------------------
    5. Resumo em 30 segundos
    -------------------------------------------------------------------------- */

.summary-box {
   padding: 1.1rem 1.25rem;
   margin-bottom: 2rem;
   border-radius: 16px;
   border: 1px solid var(--accent);
   background: linear-gradient(135deg, rgba(11, 122, 138, 0.08), rgba(138, 216, 231, 0.14));
   overflow: hidden;
}

.summary-box-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.8rem;
   padding: 0;
   margin-top: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: inherit;
   font: inherit;
   text-align: left;
   box-shadow: none;
}

.summary-box-toggle:hover {
   transform: none;
   box-shadow: none;
   background: transparent;
}

.summary-box-title {
   margin: 0;
   font-weight: 800;
   color: var(--primary);
   text-align: left;
   text-indent: 0;
   margin-bottom: 0.5rem;
}

.summary-box-icon {
   flex-shrink: 0;
   font-size: 1.2rem;
   line-height: 1;
   color: var(--primary);
   transition: transform 0.2s ease;
}

.summary-box-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease, padding 0.3s ease;
}

.summary-box.is-open .summary-box-content {
   padding-top: 0;
}

.summary-box.is-open .summary-box-icon {
   transform: rotate(45deg);
}

.summary-box-list {
   margin: 0;
   padding-left: 1.2rem;
   display: grid;
   gap: 0.4rem;
}

/* --------------------------------------------------------------------------
    6. Caixas de dica e aviso
    -------------------------------------------------------------------------- */

.tip-box,
.alert-box {
   padding: 1rem 1.1rem;
   margin: 1.2rem 0;
   border-radius: 14px;
   border: 1px solid;
}

.tip-box {
   background: #eaf6ec;
   border-color: #a9d9b1;
   color: #1f5c30;
}

.alert-box {
   background: #fff6df;
   border-color: #f0d78a;
   color: #7a5900;
}

.alert-box.alert-box-danger {
   background: #fdecea;
   border-color: #f3b7ad;
   color: #7a2b1f;
}

.tip-box strong,
.alert-box strong {
   display: block;
   margin-bottom: 0.3rem;
}

.tip-box p,
.alert-box p {
   margin: 0;
}

/* --------------------------------------------------------------------------
    7. Tabela comparativa responsiva
    -------------------------------------------------------------------------- */

.comparison-table-wrapper {
   margin: 1.4rem 0;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: 1px solid var(--border);
   border-radius: 14px;
}

.comparison-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 480px;
}

.comparison-table th,
.comparison-table td {
   padding: 0.75rem 1rem;
   text-align: left;
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
}

.comparison-table thead th {
   background: rgba(11, 122, 138, 0.08);
   color: var(--primary);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.comparison-table tbody tr:last-child td {
   border-bottom: none;
}

td[scope="row"] {
   background: rgba(11, 122, 138);
   position: sticky;
   left: 0;
   color: white;
}

/* --------------------------------------------------------------------------
    8. Produtos recomendados
    -------------------------------------------------------------------------- */

.product-recommendations {
   margin: 2.4rem 0;
}

.affiliate-disclosure {
   color: var(--muted);
   font-size: 0.85rem;
   margin: 0.4rem 0 1.4rem;
}

.product-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 1.1rem;
}

.product-card {
   display: flex;
   flex-direction: column;
   padding: 1.1rem;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: var(--surface);
   box-shadow: 0 4px 10px rgba(18, 49, 63, 0.04);
   transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
   box-shadow: 0 14px 28px rgba(18, 49, 63, 0.12);
   transform: translateY(-3px);
}

.product-card-badge {
   align-self: flex-start;
   padding: 0.3rem 0.75rem;
   margin: 0 0 0.8rem;
   border-radius: 999px;
   background: rgba(11, 122, 138, 0.1);
   color: var(--primary);
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }

 

.product-card-photo {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 160px;
   margin-bottom: 0.9rem;
   border-radius: 12px;
   overflow: hidden;
   background: linear-gradient(135deg, rgba(11, 122, 138, 0.08), rgba(138, 216, 231, 0.16));
}

.product-card-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.product-card-name {
   margin: 0 0 0.8rem;
   font-size: 1.1rem;
}

.product-recommendations .product-card .button-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-top: 0.7rem;
   color: white;
}

.product-card-lists {
   display: grid;
   gap: 0.7rem;
   margin-bottom: 1rem;
}

.product-card-list-title {
   margin: 0 0 0.3rem;
   font-size: 0.85rem;
   font-weight: 800;
}

.product-card-list-title-pro {
   color: #1f5c30;
}

.product-card-list-title-con {
   color: #a03b2f;
}

.product-card-list {
   margin: 0;
   padding-left: 1.1rem;
   font-size: 0.92rem;
   display: grid;
   gap: 0.3rem;
}

.btn-afiliado {
   margin-top: auto;
   display: inline-block;
   padding: 0.85rem 1rem;
   border-radius: 999px;
   background: var(--primary);
   color: white;
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   transition: background 0.2s ease, transform 0.2s ease;
   width: 100%;
}

.affiliate-button-row {
   display: flex;
   justify-content: flex-end;
   margin: 1rem 0 1.35rem;
}

.btn-afiliado:hover {
   background: #095e6b;
   transform: translateY(-1px);
}
.product-review{
   border: 1px solid var(--border);
   border-radius: 14px;
   margin-bottom: 1.2rem;
   overflow: hidden;
}

.product-review h3{
   margin: 0;
   text-align: center;
   padding: 0.8rem 1rem;
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--primary);
   background: rgba(11, 122, 138, 0.08);
}
/* --------------------------------------------------------------------------
    9. FAQ Accordion
    -------------------------------------------------------------------------- */

.faq-section {
   margin: 2.4rem 0;
}

.faq-item {
   border: 1px solid var(--border);
   border-radius: 14px;
   margin-bottom: 0.8rem;
   overflow: hidden;
}

.faq-question {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.8rem;
   padding: 1rem 1.1rem;
   border: 0;
   background: var(--surface);
   color: var(--text);
   font: inherit;
   font-weight: 700;
   text-align: left;
   cursor: pointer;
}

.faq-question-icon {
   flex-shrink: 0;
   font-size: 1.2rem;
   line-height: 1;
   transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-question-icon {
   transform: rotate(45deg);
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   padding: 0 1.1rem;
   background: #f7fdff;
   transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.is-open .faq-answer {
   padding: 0.2rem 1.1rem 1.1rem;
}

.faq-answer p {
   margin: 0;
}

/* --------------------------------------------------------------------------
    10. Chamada para ação final
    -------------------------------------------------------------------------- */

.guide-cta {
   margin-top: 2.6rem;
   padding: 1.6rem 1.4rem;
   border-radius: 18px;
   text-align: center;
   background: linear-gradient(135deg, #0f8ea6 0%, #7bd3e6 100%);
   color: white;
}

.guide-cta h2 {
   margin: 0 0 0.6rem;
   color: white;
}

.guide-cta p {
   margin: 0 auto 1.1rem;
   max-width: 520px;
   color: rgba(255, 255, 255, 0.92);
}

.guide-cta .button-link {
   background: white;
   color: var(--primary);
}

/* --------------------------------------------------------------------------
    11. Responsividade
    -------------------------------------------------------------------------- */

@media (max-width: 640px) {
   .guide-shell {
      padding: 1.5rem 1rem 3rem;
   }

   .guide-article {
      font-size: 17px;
   }

   .product-grid {
      grid-template-columns: 1fr;
   }

   .affiliate-button-row {
      justify-content: center;
   }

   .affiliate-button-row .btn-afiliado {
      width: min(90%, 22rem);
   }
}