/* ==========================================================================
   GUIA DO BEBÊ v2 — componentes de artigo (rr) premium
   ========================================================================== */

/* ---------- HERO DO ARTIGO ---------- */
.rr-hero{padding:64px 0 48px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.rr-hero::after{content:""; position:absolute; right:-160px; top:-140px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-soft) 0%, transparent 66%);}
.rr-hero .wrap{max-width:880px; position:relative; z-index:1;}
.breadcrumb{font-size:.82rem; color:var(--muted); margin:14px 0 18px; font-weight:600;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--blue-ink);}
.rr-hero h1{margin-bottom:.4em;}
.rr-hero .dek{font-size:1.18rem; line-height:1.75; color:var(--ink-2); max-width:720px;}
.rr-byline{display:flex; align-items:center; gap:14px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line-2);
  font-size:.9rem; color:var(--muted);}
.rr-byline .av{width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:1rem;}
.rr-byline b{color:var(--ink); font-weight:700;}

/* ---------- LAYOUT ---------- */
.rr-layout{max-width:var(--wrap); margin:56px auto; padding:0 24px; display:grid;
  grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start;}
.rr-art{min-width:0;}

/* capa do artigo */
.rr-lead{margin:0 0 34px;}
.rr-lead img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);}
.rr-lead figcaption{margin-top:11px; font-size:.78rem; color:var(--muted); font-style:italic;
  padding-left:14px; border-left:2px solid var(--gold);}

.rr-art h2{margin-top:2em; padding-top:.4em;}
.rr-art h2:first-of-type{margin-top:0; padding-top:0;}

/* links dentro do texto corrido precisam de um sinal além da cor (WCAG 1.4.1) */
.rr-art p a, .rr-art li a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.rr-intro{font-size:1.16rem; line-height:1.8; color:var(--ink-2);}
.rr-intro::first-letter{font-family:var(--serif); font-size:3.4em; float:left; line-height:.82;
  padding:6px 12px 0 0; color:var(--gold); font-weight:600;}
.rr-intro strong{color:var(--ink);}

/* ---------- ASIDE ---------- */
.rr-side{position:sticky; top:96px; display:flex; flex-direction:column; gap:24px;}
.rr-toc{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-sm);}
.rr-toc h3{font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); margin:0 0 12px;}
.rr-toc a{display:block; color:var(--ink-2); font-size:.93rem; font-weight:600; padding:9px 12px; border-radius:10px; transition:.15s;}
.rr-toc a:hover{background:var(--blue-soft); color:var(--blue-ink);}
.rr-sidecta{background:var(--ink); color:#c9d2e0; border-radius:var(--r-md); padding:28px; box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;}
.rr-sidecta::after{content:""; position:absolute; right:-60px; bottom:-60px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(216,154,174,.35), transparent 70%);}
.rr-sidecta h3{font-family:var(--serif); color:#fff; font-size:1.2rem; margin-bottom:8px;}
.rr-sidecta p{font-size:.92rem; margin-bottom:18px; position:relative; z-index:1;}
.rr-sidecta .btn{background:var(--paper); color:var(--ink); width:100%; position:relative; z-index:1;}
.rr-sidecta .btn:hover{background:#fff; color:var(--blue-ink); transform:translateY(-1px);}

/* ---------- CAIXAS EDITORIAIS ---------- */
.rr-box{border-radius:var(--r-md); padding:24px 26px; margin:30px 0; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative;}
.rr-box::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:3px; background:var(--gold);}
.rr-box.tip::before{background:var(--blue);}
.rr-box.warn{background:var(--rose-soft); border-color:#eed4dd;}
.rr-box.warn::before{background:var(--rose-d);}
.rr-box__title{font-family:var(--serif); font-weight:600; font-size:1.08rem; color:var(--ink);
  display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.rr-box p:last-child{margin-bottom:0;}

/* ---------- RR-CARD PRODUTO (padrao Guia da Guitarra) ---------- */
.rr-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); margin:34px 0; transition:box-shadow .2s;}
.rr-card:hover{box-shadow:var(--shadow-md);}

/* cabecalho escuro: numero + badge + nome */
.rr-card__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px 20px; background:#2b3a52;}
.rr-card__num{font-family:var(--serif); font-weight:700; font-size:1.1rem;
  color:var(--gold); flex:0 0 auto;}
.rr-card__badge{font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; background:var(--gold); color:#fff; border:0;
  padding:4px 11px; border-radius:5px; white-space:nowrap;}
.rr-card__name{font-family:var(--serif); font-weight:600; font-size:1.12rem;
  color:#fff; min-width:0; margin:0; line-height:1.25; letter-spacing:normal;}
.rr-card__name small{display:block; font-family:var(--sans); font-weight:500;
  font-size:.79rem; color:#9fb0c9; margin-top:2px;}

/* imagem 16/9 em largura total */
.rr-card__img{width:100%; background:var(--paper); position:relative;}
.rr-card__img .pcarousel{border:0; border-radius:0;}
.rr-card__img .pcarousel__slide{aspect-ratio:16/9;}
.rr-card__illus{position:absolute; right:9px; bottom:8px; z-index:2;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:#fff;
  background:rgba(17,22,32,.82); padding:3px 8px; border-radius:4px;}

/* veredito — logo abaixo da imagem */
.rr-card__verdict{background:var(--gold-soft); border-bottom:1px solid var(--line);
  padding:13px 20px;}
.rr-card__verdict b{display:block; font-size:.67rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:5px;}
.rr-card__verdict p{margin:0; font-size:.94rem; line-height:1.6; color:var(--ink);}

.rr-card__body{padding:18px 22px 22px;}
.rr-card__body > p{font-size:.95rem; line-height:1.7; margin:0 0 16px;}


/* specs: nota em bloco + ficha 2x2 */
.rr-specs{display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px;
  margin:0 0 4px; padding:0; list-style:none;}
.rr-specs__score{background:var(--ink); border-radius:var(--r-md); padding:14px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;}
.rr-specs__score b{font-family:var(--serif); font-weight:700; font-size:1.9rem;
  color:#fff; line-height:1;}
.rr-specs__score i{font-style:normal; color:var(--gold); font-size:.76rem;
  letter-spacing:1.5px; margin-top:6px;}
.rr-specs__score s{text-decoration:none; font-size:.57rem; color:#9fb0c9;
  text-transform:uppercase; letter-spacing:.13em; font-weight:700; margin-top:6px;}
.rr-specs__list{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden;}
.rr-specs__list li{background:#fff; padding:11px 14px; min-width:0;}
.rr-specs__list li span{display:block; font-size:.6rem; color:var(--muted);
  text-transform:uppercase; font-weight:700; letter-spacing:.08em; margin-bottom:4px;
  line-height:1.3;}
.rr-specs__list li b{display:block; font-size:.92rem; font-weight:700; color:var(--ink);
  line-height:1.3;}

/* ---------- CARROSSEL DO CARD ---------- */
/* Sem JS: vira uma faixa deslizante com scroll-snap. Com JS: ganha setas e dots. */
.pcarousel{position:relative; background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-md); overflow:hidden;}
.pcarousel__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.pcarousel__track::-webkit-scrollbar{display:none;}
.pcarousel__slide{flex:0 0 100%; scroll-snap-align:center; aspect-ratio:16/9;}
.pcarousel__slide img{width:100%; height:100%; object-fit:cover; display:block;}

.pcarousel__btn{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.92); color:var(--ink); font-size:1rem; line-height:1;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:.15s; padding:0;}
.pcarousel[data-enhanced] .pcarousel__btn{display:flex;}
.pcarousel__btn:hover{background:#fff; border-color:var(--gold); color:var(--gold);}
.pcarousel__btn:focus-visible{outline:2px solid var(--blue-d); outline-offset:2px;}
.pcarousel__btn[disabled]{opacity:.35; cursor:default;}
.pcarousel__btn--prev{left:8px;}
.pcarousel__btn--next{right:8px;}

.pcarousel__dots{position:absolute; left:0; right:0; bottom:9px; z-index:2;
  display:none; justify-content:center; gap:6px;}
.pcarousel[data-enhanced] .pcarousel__dots{display:flex;}
.pcarousel__dot{width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(28,37,52,.35); background:rgba(255,255,255,.85); transition:.15s;}
.pcarousel__dot[aria-current="true"]{background:var(--gold); border-color:var(--gold); transform:scale(1.25);}
.pcarousel__dot:focus-visible{outline:2px solid var(--blue-d); outline-offset:2px;}

@media(prefers-reduced-motion:reduce){
  .pcarousel__track{scroll-behavior:auto;}
  .pcarousel__dot{transition:none;}
}


/* prós/contras — cards */
.rr-pc{display:grid; grid-template-columns:1fr; gap:12px; margin:18px 0 0;}
@media(min-width:600px){.rr-pc{grid-template-columns:1fr 1fr; gap:16px;}}
.rr-pc > div{border-radius:var(--r-md); padding:18px 20px; border:1px solid var(--line);}
.rr-pc .pros{background:#f2f8f4; border-color:#d7e8dd;}
.rr-pc .cons{background:var(--rose-soft); border-color:#eed4dd;}
.rr-pc h4{font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; margin:0 0 10px;
  display:flex; align-items:center; gap:7px; padding-bottom:10px; border-bottom:1px solid rgba(28,37,52,.08);}
.rr-pc .pros h4{color:var(--green);} .rr-pc .cons h4{color:var(--red);}
.rr-pc .pros h4::before{content:"👍";} .rr-pc .cons h4::before{content:"👎";}
.rr-pc ul{list-style:none; padding:0; margin:0;}
.rr-pc li{font-size:.92rem; padding:6px 0 6px 24px; position:relative; color:var(--ink-2);}
.rr-pc li + li{border-top:1px dashed rgba(28,37,52,.08);}
.rr-pc .pros li::before{content:"✓"; position:absolute; left:0; top:6px; color:var(--green); font-weight:700;}
.rr-pc .cons li::before{content:"–"; position:absolute; left:2px; top:6px; color:var(--red); font-weight:700;}

/* CTA duplo */
.rr-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.rr-cta .btn{flex:1; min-width:170px;}
.rr-cta .btn-ml{background:var(--gold); color:#fff;}
.rr-cta .btn-ml:hover{filter:brightness(1.06); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md);}

/* nota de afiliado */
.aff-note{font-size:.84rem; color:var(--muted); font-style:italic; background:#fff; border:1px dashed var(--line);
  border-radius:var(--r-sm); padding:14px 18px; margin:26px 0;}

/* ---------- TABELA ---------- */
.rr-table-wrap{overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm);}
.rr-table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; background:#fff;}
.rr-table th{background:var(--ink); color:var(--paper); text-align:left; padding:14px 18px;
  font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;}
.rr-table td{padding:13px 18px; border-bottom:1px solid var(--line-2); color:var(--ink-2);}
.rr-table tr:last-child td{border-bottom:0;}
.rr-table tr:nth-child(even) td{background:var(--paper);}
.rr-table td:first-child{font-weight:700; color:var(--ink);}

/* ---------- GRID EDITORIAL (2 col) ---------- */
.enx-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0;}
.enx-cat{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-sm);}
.enx-cat h3{display:flex; align-items:center; gap:10px; font-size:1.1rem; margin-bottom:14px;}
.enx-cat h3 .em{font-size:20px;}
.enx-cat ul{list-style:none; padding:0; margin:0;}
.enx-cat li{padding:8px 0 8px 26px; position:relative; font-size:.94rem; color:var(--ink-2);}
.enx-cat li + li{border-top:1px dashed var(--line-2);}
.enx-cat li::before{content:"›"; position:absolute; left:6px; color:var(--gold); font-weight:700;}
.enx-cat li b{color:var(--ink);}

/* ---------- FAQ ---------- */
.faq{margin:22px 0;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden;
  transition:box-shadow .18s;}
.faq-item[open]{box-shadow:var(--shadow-sm);}
.faq-q{font-family:var(--serif); font-weight:600; font-size:1.05rem; padding:18px 22px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:14px; color:var(--ink);}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{content:"+"; color:var(--gold); font-size:1.4rem; line-height:1; font-family:var(--sans);}
.faq-item[open] .faq-q::after{content:"–";}
.faq-a{padding:0 22px 20px; color:var(--ink-2); font-size:.96rem;}

/* ---------- RELACIONADOS ---------- */
.rr-related{border-top:1px solid var(--line); margin-top:56px; padding-top:40px;}
.rr-related h2{text-align:center; margin-bottom:28px;}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.rel-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-sm);
  transition:.18s; text-decoration:none;}
.rel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#ddd2c2;}
.rel-card .em{font-size:24px;}
.rel-card b{display:block; font-family:var(--serif); font-weight:600; color:var(--ink); margin:10px 0 4px; font-size:1.05rem;}
.rel-card span{font-size:.87rem; color:var(--muted);}

@media(max-width:960px){
  .rr-layout{grid-template-columns:1fr; gap:34px;}
  .rr-side{position:static; order:2;}
  .rel-grid{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .rr-pc{grid-template-columns:1fr;}
  .enx-grid{grid-template-columns:1fr;}
  .rr-hero{padding:44px 0 36px;}
}

/* ---------- FONTES / E-E-A-T ---------- */
.rr-sources{background:var(--blue-soft); border:1px solid var(--line);
  border-radius:var(--r-md); padding:26px 28px; margin:34px 0;}
.rr-sources h2{margin-top:0;}
.rr-sources ul{margin:0 0 4px; padding-left:20px;}
.rr-sources li{margin-bottom:10px; line-height:1.6;}
.rr-sources a{color:var(--blue-ink); text-decoration:underline;
  text-underline-offset:2px;}
.rr-sources a:hover{color:var(--rose-d);}
.rr-note{background:var(--gold-soft); border-left:3px solid var(--gold);
  border-radius:var(--r-sm); padding:14px 16px; margin:18px 0 0;
  font-size:.93rem; line-height:1.6; color:var(--ink-2);}
.rr-byline a[rel="author"]{color:inherit; text-decoration:underline;
  text-underline-offset:2px;}
.rr-byline a[rel="author"]:hover{color:var(--rose-d);}
@media(max-width:680px){
  .rr-sources{padding:20px 18px;}
}


@media(max-width:680px){
  .rr-card__head{padding:13px 16px; gap:9px;}
  .rr-card__name{font-size:1.04rem; flex:1 1 100%;}
  .rr-card__verdict{padding:12px 16px;}
  .rr-card__body{padding:14px 16px 18px;}
}

@media(max-width:560px){
  .rr-specs{grid-template-columns:1fr; gap:10px;}
  .rr-specs__score{flex-direction:row; gap:11px; padding:11px 14px;
    justify-content:flex-start;}
  .rr-specs__score b{font-size:1.6rem;}
  .rr-specs__score i,.rr-specs__score s{margin-top:0;}
  .rr-specs__score s{margin-left:auto;}
  .rr-specs__list{grid-template-columns:1fr;}
}

/* ---------- PASSO A PASSO NUMERADO ---------- */
.rr-steps{list-style:none; counter-reset:passo; padding:0; margin:20px 0;
  display:grid; gap:12px;}
.rr-steps li{counter-increment:passo; position:relative; padding:14px 18px 14px 56px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  font-size:.96rem; line-height:1.6;}
.rr-steps li::before{content:counter(passo); position:absolute; left:16px; top:13px;
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-weight:700; font-size:.86rem;
  display:flex; align-items:center; justify-content:center;}
@media(max-width:680px){
  .rr-steps li{padding:12px 14px 12px 48px;}
  .rr-steps li::before{left:12px; top:11px; width:24px; height:24px; font-size:.8rem;}
}