/* TRECHO 3 — reviews em video (secao UGC de mydrenia.com/products/drenia), 11/09/2026.
   Copia medida em 390/768/1024/1440 (getComputedStyle + regras casadas via CDP).
   Tudo escopado em #lyn-tp3 e em px (a pagina de destino tem html{font-size:10px}).
   SEM all:revert: cada propriedade que importa e' declarada, nada e' devolvido ao UA.
   Valores da origem, ja' com a cascata dela resolvida:
     .drenia-page h2 vence .drenia-ugc-title -> margin 0 0 16px, line-height 1.15,
       clamp(28px,4vw,42px) e 26px em <=768 (por isso o titulo NAO fica centralizado
       no desktop: margin auto foi zerado pela regra do tema da origem)
     .drenia-page p vence .drenia-ugc-subtitle -> margin 0
   Breakpoints da origem: 768 (secao, titulo, grid, raio, legenda, hero) e 480 (padding). */

@font-face{font-family:"lyn-fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/lym/tp3/lyn-fraunces-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2010-2027,U+2030-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:"lyn-fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/lym/tp3/lyn-fraunces-ext.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0218-021B}
@font-face{font-family:"lyn-inter";font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/assets/lym/tp3/lyn-inter-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2010-2027,U+2030-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:"lyn-inter";font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/assets/lym/tp3/lyn-inter-ext.woff2) format("woff2");
  unicode-range:U+0100-017F,U+0218-021B}

#lyn-tp3{display:block;margin:0;padding:0;border:0;
  font-family:"lyn-inter",-apple-system,sans-serif;font-size:16px;font-weight:400;font-style:normal;
  line-height:1.55;letter-spacing:normal;text-transform:none;color:#1f2a26;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  --lyn-tp3-gap:18px}
#lyn-tp3 *,#lyn-tp3 *::before,#lyn-tp3 *::after{box-sizing:border-box}

/* .drenia-hero (fundo inline #fdfbf6; o padding-top dela e' da caixa de compra, nao entra) */
#lyn-tp3 .lyn-tp3__hero{display:flow-root;background:#fdfbf6;margin:0;padding:0 0 60px}
/* .drenia-container */
#lyn-tp3 .lyn-tp3__container{max-width:1200px;margin:0 auto;padding:0 24px}
/* .drenia-ugc-section */
#lyn-tp3 .lyn-tp3__section{display:flow-root;margin:56px 0 0;padding:40px 0 0;border:0;border-top:1px solid #e6e0d0}

#lyn-tp3 .lyn-tp3__title{display:block;font-family:"lyn-fraunces",Georgia,serif;font-size:clamp(28px,4vw,42px);
  font-weight:600;font-style:normal;line-height:1.15;letter-spacing:-.01em;text-transform:none;
  text-align:center;color:#1f2a26;margin:0 0 16px;padding:0;max-width:800px;overflow-wrap:break-word;border:0;background:none}
#lyn-tp3 .lyn-tp3__subtitle{display:block;font-family:"lyn-inter",-apple-system,sans-serif;font-size:15px;
  font-weight:400;font-style:normal;line-height:1.5;letter-spacing:normal;text-transform:none;
  text-align:center;color:#4a5650;margin:0;padding:0;max-width:600px;overflow-wrap:break-word}

/* .drenia-ugc-grid -> janela do carrossel. Mesma caixa (max 960, centrada).
   O padding/margem negativos verticais so' existem para a sombra dos cards nao ser
   cortada pelo overflow:hidden; a caixa util comeca e termina onde a grade comecava. */
#lyn-tp3 .lyn-tp3__viewport{position:relative;max-width:960px;margin:-14px auto -22px;padding:14px 0 22px;
  overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#lyn-tp3 .lyn-tp3__track{position:relative;display:flex;flex-wrap:nowrap;gap:var(--lyn-tp3-gap);margin:0;padding:0;width:100%}
/* .drenia-ugc-card: 1fr de 3 colunas = (largura - 2 gaps) / 3 */
#lyn-tp3 .lyn-tp3__card{flex:0 0 calc((100% - 2 * var(--lyn-tp3-gap)) / 3);min-width:0;
  display:flex;flex-direction:column;gap:10px;margin:0;padding:0;will-change:transform;backface-visibility:hidden}
/* .drenia-ugc-video-wrap */
#lyn-tp3 .lyn-tp3__media{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:#ede5d3;box-shadow:0 4px 18px rgba(31,42,38,.08);margin:0;padding:0;
  -webkit-mask-image:-webkit-radial-gradient(white,black)}
/* .drenia-ugc-video */
#lyn-tp3 .lyn-tp3__video{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;margin:0;padding:0;border:0;
  background:transparent;pointer-events:none;-webkit-user-drag:none}
/* .drenia-ugc-caption */
#lyn-tp3 .lyn-tp3__caption{display:block;font-family:"lyn-inter",-apple-system,sans-serif;font-size:13px;font-weight:500;
  font-style:normal;line-height:1.4;letter-spacing:normal;text-transform:none;color:#4a5650;text-align:center;margin:0;padding:0 4px}

/* DECISAO DO CEO (11/09/2026): no desktop, titulo e subtitulo CENTRALIZADOS.
   Na origem a regra .drenia-page h2/p do tema deles zera o margin:auto e as duas caixas
   (800 e 600 px) ficam encostadas a esquerda. So' isso muda: <=768 px segue identico
   a origem (la' o subtitulo de 600 px tambem fica a esquerda a 768 — mantido). */
@media (min-width:769px){
  #lyn-tp3 .lyn-tp3__title{margin-left:auto;margin-right:auto}
  #lyn-tp3 .lyn-tp3__subtitle{margin-left:auto;margin-right:auto}
}

@media (max-width:768px){
  #lyn-tp3{--lyn-tp3-gap:10px}
  #lyn-tp3 .lyn-tp3__hero{padding-bottom:32px}
  #lyn-tp3 .lyn-tp3__container{padding:0 18px}
  #lyn-tp3 .lyn-tp3__section{margin-top:40px;padding-top:28px}
  #lyn-tp3 .lyn-tp3__title{font-size:26px}
  #lyn-tp3 .lyn-tp3__subtitle{font-size:14px}
  #lyn-tp3 .lyn-tp3__media{border-radius:10px}
  #lyn-tp3 .lyn-tp3__caption{font-size:12px}
}
@media (max-width:480px){
  #lyn-tp3 .lyn-tp3__container{padding:0 14px}
}