/* Opiniones: componentes sobre el sistema visual de Serenna. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/outfit-latin.woff2') format('woff2')}
.op-hero{padding:145px 0 76px;background:radial-gradient(ellipse at 88% 20%,rgba(46,139,126,.2),transparent 55%),var(--tinta);color:var(--crema)}
.op-breadcrumb{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-soft);margin-bottom:40px}
.op-breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.op-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:80px}
.op-hero h1{font-size:clamp(42px,4.8vw,68px);font-weight:600;line-height:1.04;letter-spacing:-.04em;max-width:14ch;margin:0 0 24px}
.op-hero h1 em{color:var(--teal-soft)}
.op-intro{max-width:49ch;font-size:19px;line-height:1.65;color:var(--ink-soft)}
.op-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.op-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.op-hero :focus-visible,.op-cta :focus-visible{outline-color:var(--teal-soft)}
.op-featured{position:relative;background:rgba(244,241,234,.04);border:1px solid rgba(132,194,181,.25);border-radius:24px;padding:36px}
.op-quote-mark{font-size:76px;line-height:.8;color:var(--teal-soft);font-weight:500;display:block;height:58px}
.op-featured blockquote{font-size:clamp(28px,2.7vw,39px);line-height:1.2;letter-spacing:-.025em;font-weight:400;max-width:16ch}
.op-person{display:flex;align-items:center;gap:13px;margin-top:28px}
.op-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:#e5efea;color:var(--teal-deep);font-weight:600;font-size:17px;letter-spacing:-.04em}
.op-featured .op-avatar{color:var(--teal-soft);background:rgba(132,194,181,.12)}
.op-person strong{display:block;font-size:16px;font-weight:600}
.op-person span:not(.op-avatar){display:block;font-size:13px;line-height:1.5;color:var(--dim);margin-top:3px}
.op-featured .op-person span:not(.op-avatar){color:var(--ink-soft)}
.op-featured .op-link{margin-top:26px;font-size:13px;color:var(--teal-soft)}
.op-clinic-logo{display:block;width:80px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px}
.op-portrait{object-fit:cover;object-position:50% 22%}
.op-person .op-clinic{display:block;color:var(--teal-deep);font-size:13px;font-weight:500;margin-top:5px;text-decoration:underline;text-underline-offset:3px}
.op-person .op-clinic span{display:inline!important;font-size:inherit!important;color:inherit!important}
.op-featured .op-person .op-clinic{color:var(--teal-soft)}
.op-brands{padding:30px 0 0}
.op-brands>.wrap>p{font-size:12px;letter-spacing:.06em;text-align:center;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.op-brand-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:26px}
.op-brand-grid>a{flex:0 1 140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:90px}
.op-brand-grid .brand-caption{font-size:12px;color:var(--dim);line-height:1.4;text-align:center}
.op-brand-logo{width:140px;height:60px;object-fit:contain}
.op-brand-logo.op-logo-dark{background:var(--tinta);border-radius:10px;padding:9px 20px}
.op-brand-link{display:block;margin-bottom:20px;width:max-content;max-width:100%}
.op-review-source{border-top:1px solid var(--line);padding-top:18px;color:var(--teal-deep)}
.op-review-source .op-link{font-size:14px}
.op-grid>.op-review:last-child:nth-child(odd){grid-column:1/-1}
.op-grid>.op-review:last-child:nth-child(odd) .op-excerpt{min-height:0;max-width:74ch}
.op-source-strip{border-bottom:1px solid var(--line);padding:22px 0}
.op-source-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.op-source-brand{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--dim)}
.op-source-brand img{width:28px;height:28px;object-fit:contain}
.op-source-brand strong{color:var(--tinta);font-weight:600}
.op-topics{display:flex;gap:8px;flex-wrap:wrap;list-style:none}
.op-topics a{display:block;border:1px solid rgba(15,82,73,.16);border-radius:100px;padding:8px 14px;font-size:13px;color:var(--teal-deep);transition:background .2s}
.op-topics a:hover{background:#e5efea}
.op-reviews{padding:72px 0}
.op-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:30px}
.op-section-head h2,.op-updates h2{font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1.1;letter-spacing:-.03em;max-width:20ch}
.op-section-head p{max-width:38ch;color:var(--dim);font-size:16px;line-height:1.6}
.op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.op-review{padding:32px;background:#fff;border:1px solid var(--line);border-radius:22px;scroll-margin-top:30px;box-shadow:0 16px 35px -28px rgba(14,26,23,.2)}
.op-review-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.op-tag{font-size:11px;letter-spacing:.09em;font-weight:600;text-transform:uppercase;color:var(--teal-deep)}
.op-source-small{font-size:12px;color:var(--dim)}
.op-review blockquote.op-excerpt{font-size:22px;line-height:1.45;font-weight:400;letter-spacing:-.015em;min-height:160px}
.op-review .op-person{margin:24px 0}
.op-review .op-person h3{font-size:16px;font-weight:600;text-wrap:initial}
.op-context{font-size:12px;color:var(--dim);line-height:1.6;margin-top:5px}
.op-review details{border-top:1px solid var(--line);padding-top:4px}
.op-review summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;padding:16px 0 4px;color:var(--teal-deep);font-size:14px;font-weight:500}
.op-review summary::-webkit-details-marker{display:none}
.op-review summary::after{content:'+';font-size:23px;font-weight:300;line-height:1}
.op-review details[open] summary::after{content:'−'}
.op-review-body{padding-top:22px;color:#36473f;font-size:15px;line-height:1.75}
.op-review-body h4{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--dim);margin:22px 0 8px}
.op-review-body h4:first-child{margin-top:0}
.op-review-body blockquote{font-size:15px;line-height:1.75}
.op-review-body .op-reply{background:#f1f6f3;border-left:2px solid var(--teal);padding:18px;margin-top:20px;border-radius:0 10px 10px 0}
.op-reply strong{display:block;color:var(--teal-deep);font-size:13px;margin-bottom:6px}
.op-review-body .op-link{font-size:13px;margin-top:20px;color:var(--teal-deep)}
.op-editorial-note{font-size:13px;color:var(--dim);line-height:1.6;margin-top:24px;max-width:85ch}
.op-updates{padding:0 0 72px}
.op-update-box{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;background:#e8ede6;border:1px solid rgba(15,82,73,.08);border-radius:24px;padding:44px}
.op-update-box .eyebrow{margin-bottom:18px}
.op-update-date{font-size:12px;color:var(--dim);margin-top:18px}
.op-update-copy>p{font-size:17px;line-height:1.65;color:#36473f}
.op-update-list{list-style:none;margin:20px 0;display:grid;gap:12px}
.op-update-list li{position:relative;padding-left:25px;font-size:16px;line-height:1.5}
.op-update-list li::before{content:'✓';position:absolute;left:0;color:var(--teal-deep);font-weight:600}
.op-update-status{border-top:1px solid rgba(15,82,73,.15);padding-top:16px;color:var(--dim);font-size:14px;line-height:1.6}
.op-update-copy .op-link{margin-top:20px;color:var(--teal-deep)}
.op-cta{padding:0 0 72px}
.op-cta-box{padding:50px;border-radius:24px;background:var(--teal-deep);color:var(--crema);display:flex;align-items:center;justify-content:space-between;gap:42px}
.op-cta h2{font-size:clamp(30px,3vw,42px);line-height:1.12;letter-spacing:-.03em;max-width:19ch;font-weight:500}
.op-cta p{font-size:17px;line-height:1.6;color:#dae6df;margin-top:16px;max-width:48ch}
.op-cta-actions{display:flex;flex-direction:column;align-items:center;gap:20px;flex-shrink:0}
.op-cta-actions .op-link{font-size:14px}
@media(max-width:1050px){.op-hero-grid{gap:36px}.op-featured{padding:28px}.op-update-box{gap:36px}.op-cta-box{padding:36px}.op-section-head{align-items:flex-start}}
@media(max-width:760px){
 .op-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.op-brand-grid>a:last-child:nth-child(3n+1){grid-column:2}.op-brand-grid .op-brand-logo{width:108px;height:48px}.op-brand-grid .op-brand-logo.op-logo-dark{padding:8px 14px}
 .op-hero{padding:116px 0 40px}.op-breadcrumb{margin-bottom:30px}.op-hero-grid{grid-template-columns:1fr;gap:32px}.op-hero h1{max-width:16ch}.op-intro{font-size:17px}.op-featured{padding:25px}.op-featured blockquote{max-width:23ch;font-size:30px}.op-quote-mark{font-size:60px;height:42px}
 .op-featured .op-person{margin-top:20px}.op-featured .op-link{margin-top:18px}.op-source-strip{padding:20px 0}.op-topics{gap:6px}.op-topics a{padding:8px 11px;font-size:12px}
 .op-reviews{padding:44px 0}.op-section-head{display:block;margin-bottom:24px}.op-section-head p{margin-top:16px}.op-grid{grid-template-columns:1fr;gap:18px}.op-review{padding:25px}.op-review blockquote.op-excerpt{min-height:0;font-size:21px}.op-review-top{margin-bottom:18px}
 .op-update-box{grid-template-columns:1fr;gap:24px;padding:28px}.op-updates{padding-bottom:44px}.op-update-box h2{max-width:20ch}.op-cta{padding-bottom:44px}.op-cta-box{flex-direction:column;align-items:flex-start;padding:28px;gap:28px}.op-cta-actions{align-items:flex-start;width:100%}.op-cta-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}