/* ===== 09 · Opiniones (A–E) ===== */

/* ---------- A · Cita grande ---------- */
.quotes-a{background:var(--u-navy);padding:clamp(6rem,12vw,10rem) 0}
.quotes-a__in{max-width:1400px}
.quotes-a__stage{display:grid}
.quotes-a__q{grid-area:1/1;opacity:0;visibility:hidden}
.quotes-a__q.on{opacity:1;visibility:visible}
.quotes-a__q blockquote{font-family:var(--f-head);font-weight:700;font-size:clamp(1.9rem,4.4vw,4.3rem);line-height:1.06;letter-spacing:-.04em}
.quotes-a__q .qw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.quotes-a__q .qw > span{display:inline-block}
.quotes-a__q figcaption{margin-top:2rem;color:var(--u-muted);font-size:1.05rem}
.quotes-a__q figcaption b{color:var(--u-paper);font-weight:600}
.quotes-a__nav{display:flex;align-items:center;gap:1rem;margin-top:3rem;flex-wrap:wrap}
.quotes-a__btn{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--u-line);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.quotes-a__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.quotes-a__btn:hover{background:var(--u-paper);color:var(--u-navy);border-color:var(--u-paper)}
.quotes-a__g{margin-left:auto;color:var(--u-blue)}
@media (max-width:600px){.quotes-a__g{margin-left:0;flex-basis:100%}}

/* ---------- B · Baraja ---------- */
.quotes-b{background:radial-gradient(120% 90% at 80% 20%,var(--u-navy-2),var(--u-night) 70%);padding:clamp(6rem,11vw,9rem) 0;overflow:hidden}
.quotes-b__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.quotes-b__head .lead{margin-top:1.5rem}
.quotes-b__g{margin-top:2rem;color:var(--u-blue)}
.quotes-b__deck-wrap{display:flex;flex-direction:column;align-items:center;gap:2rem}
.quotes-b__deck{position:relative;width:min(460px,100%);aspect-ratio:4/4.6}
.quotes-b__card{position:absolute;inset:0;margin:0;border-radius:22px;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:space-between;background:var(--u-paper);color:var(--u-ink);box-shadow:0 30px 70px rgba(0,0,0,.4);touch-action:pan-y;user-select:none;will-change:transform;cursor:grab}
.quotes-b__card:active{cursor:grabbing}
.quotes-b__card:nth-child(4n+2){background:#DCE8F4}
.quotes-b__card:nth-child(4n+3){background:var(--u-blue)}
.quotes-b__card:nth-child(4n+4){background:#FFFFFF}
.quotes-b__stars{color:var(--u-blue-strong);letter-spacing:.15em;font-size:1.1rem}
.quotes-b__card blockquote{font-family:var(--f-head);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.18;letter-spacing:-.03em}
.quotes-b__who{display:flex;align-items:center;gap:.9rem}
.quotes-b__av{width:48px;height:48px;border-radius:50%;background:var(--u-ink);color:var(--u-blue);display:grid;place-items:center;font-family:var(--f-head);font-weight:800;flex:none}
.quotes-b__who b{display:block;font-family:var(--f-head);font-weight:700}
.quotes-b__who span{color:var(--u-muted-dark);font-size:.9rem}
.quotes-b__nav{display:flex;align-items:center;gap:1.2rem}
.quotes-b__btn{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--u-line);display:grid;place-items:center;transition:background .3s,color .3s}
.quotes-b__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.quotes-b__btn:hover{background:var(--u-paper);color:var(--u-night)}
@media (max-width:900px){.quotes-b__in{grid-template-columns:1fr}.quotes-b__deck{width:min(420px,88vw)}}

/* ---------- C · Muro ---------- */
.quotes-c{background:var(--u-paper);color:var(--u-ink);padding:clamp(6rem,11vw,9rem) 0 clamp(4rem,8vw,6rem)}
.quotes-c__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.quotes-c__side{text-align:right}
.quotes-c__score{display:flex;align-items:center;gap:.8rem;justify-content:flex-end}
.quotes-c__score b{font-family:var(--f-head);font-weight:800;font-size:clamp(3rem,6vw,5rem);letter-spacing:-.05em;line-height:1}
.quotes-c__stars{color:#E8A800;font-size:1.3rem;letter-spacing:.1em}
.quotes-c__side .mono{color:var(--u-muted-dark);margin-top:.4rem}
.quotes-c__pause{margin-top:1rem;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--u-ink);font-weight:600;font-size:.88rem;transition:background .3s,color .3s}
.quotes-c__pause:hover{background:var(--u-ink);color:var(--u-paper)}
.quotes-c__wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;height:clamp(560px,78vh,760px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.quotes-c__col{display:flex;flex-direction:column;gap:18px;will-change:transform}
.quotes-c__card{margin:0;background:#fff;border:1px solid var(--u-line-dark);border-radius:18px;padding:1.6rem;box-shadow:0 14px 34px rgba(26,26,46,.07);transition:transform .4s var(--ease),box-shadow .4s}
.quotes-c__card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 22px 50px rgba(26,26,46,.13)}
.quotes-c__card .s{color:#E8A800;letter-spacing:.12em}
.quotes-c__card blockquote{margin:.9rem 0 1.2rem;font-weight:500;font-size:1.02rem;line-height:1.5}
.quotes-c__card b{display:block;font-family:var(--f-head);font-weight:700}
.quotes-c__card span{color:var(--u-muted-dark);font-size:.88rem}
.quotes-c__card--big{background:var(--u-navy);color:var(--u-paper);border-color:var(--u-navy)}
.quotes-c__card--big blockquote{font-family:var(--f-head);font-weight:700;font-size:1.3rem;line-height:1.25;letter-spacing:-.02em}
.quotes-c__card--big span{color:var(--u-muted)}
@media (max-width:900px){.quotes-c__wall{grid-template-columns:repeat(2,1fr)}.quotes-c__col:nth-child(3){display:none}}
@media (max-width:560px){.quotes-c__wall{grid-template-columns:1fr;height:620px}.quotes-c__col:nth-child(2){display:none}.quotes-c__side{text-align:left}.quotes-c__score{justify-content:flex-start}}

/* ---------- D · Pantalla completa ---------- */
.quotes-d{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--u-night)}
.quotes-d__stage{position:absolute;inset:0}
.quotes-d__slide{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 100%);visibility:hidden}
.quotes-d__slide.on{clip-path:inset(0 0 0 0);visibility:visible;z-index:2}
.quotes-d__slide.prev{visibility:visible;z-index:1;clip-path:inset(0 0 0 0)}
.quotes-d__slide img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.quotes-d__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,16,29,.94) 0%,rgba(16,16,29,.78) 45%,rgba(16,16,29,.35) 100%),linear-gradient(0deg,rgba(16,16,29,.7),transparent 40%)}
.quotes-d__body{position:absolute;z-index:2;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);max-width:1100px}
.quotes-d__logo{height:52px;width:auto;margin-bottom:2rem;background:#fff;padding:10px 16px;border-radius:10px}
.quotes-d__body blockquote{font-family:var(--f-head);font-weight:800;font-size:clamp(2rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.045em}
.quotes-d__body figcaption{margin-top:2rem;font-size:1.05rem;color:var(--u-muted)}
.quotes-d__body figcaption b{color:var(--u-paper);font-weight:600}
.quotes-d__photo{position:absolute;z-index:2;right:var(--pad);top:clamp(96px,13vh,130px);color:var(--u-muted);font-size:.68rem}
.quotes-d__ui{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(96px,13vh,130px);padding-bottom:110px;pointer-events:none}
.quotes-d__ui > *{pointer-events:auto}
.quotes-d__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.quotes-d__dots{display:flex;gap:8px}
.quotes-d__dots button{width:52px;height:44px;display:flex;align-items:center}
.quotes-d__dots button i{display:block;width:100%;height:3px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden;position:relative}
.quotes-d__dots button i::after{content:"";position:absolute;inset:0;background:var(--u-blue);transform-origin:0 50%;transform:scaleX(0)}
.quotes-d__dots button.done i::after{transform:scaleX(1)}
.quotes-d__dots button[aria-selected="true"] i::after{animation:quotesDFill var(--t,6s) linear forwards}
.quotes-d.is-paused .quotes-d__dots button[aria-selected="true"] i::after{animation-play-state:paused}
@keyframes quotesDFill{to{transform:scaleX(1)}}
.quotes-d__g{color:var(--u-blue)}
@media (max-width:700px){.quotes-d__slide::after{background:linear-gradient(0deg,rgba(16,16,29,.96) 30%,rgba(16,16,29,.6))}.quotes-d__photo{top:auto;bottom:170px;right:auto;left:var(--pad)}.quotes-d__dots button{width:40px}}

/* ---------- E · Valoración ---------- */
.quotes-e{background:var(--u-paper);color:var(--u-ink);padding:clamp(6rem,11vw,9rem) 0}
.quotes-e__in{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,7vw,7rem);align-items:center}
.quotes-e__num{font-family:var(--f-head);font-weight:900;font-size:clamp(7rem,17vw,15rem);line-height:.82;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.quotes-e__num small{font-size:.22em;font-weight:700;color:var(--u-muted-dark);letter-spacing:-.02em;margin-left:.2em}
.quotes-e__stars{display:flex;gap:8px;margin:1.6rem 0 1.4rem}
.quotes-e__stars span{position:relative;width:clamp(34px,4vw,48px);aspect-ratio:1;background:#D8DEE8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat}
.quotes-e__stars i{position:absolute;inset:0;background:#E8A800;transform-origin:0 50%}
.quotes-e__stars i[data-last]{transform:scaleX(.9)}
.quotes-e__based{color:var(--u-muted-dark);max-width:30ch;font-size:1.05rem}
.quotes-e__based b{color:var(--u-ink)}
.quotes-e__type{position:relative;background:#fff;border-radius:24px;padding:clamp(2rem,4vw,3.4rem);box-shadow:0 30px 70px rgba(26,26,46,.1);min-height:clamp(320px,34vw,420px);display:flex;flex-direction:column}
.quotes-e__mark{font-family:var(--f-head);font-weight:900;font-size:7rem;line-height:.6;color:var(--u-blue);height:3.4rem}
.quotes-e__q{font-family:var(--f-head);font-weight:700;font-size:clamp(1.4rem,2.5vw,2.2rem);line-height:1.18;letter-spacing:-.03em;flex:1;margin-top:1rem}
.quotes-e__caret{display:inline-block;width:3px;height:1em;background:var(--u-blue-strong);vertical-align:-.12em;margin-left:3px;animation:quotesECaret .9s steps(1) infinite}
@keyframes quotesECaret{50%{opacity:0}}
.quotes-e__who{margin-top:1.6rem;color:var(--u-muted-dark);min-height:1.6em}
.quotes-e__who b{color:var(--u-ink);font-family:var(--f-head);font-weight:700}
.quotes-e__bars{display:flex;gap:6px;margin-top:1.6rem}
.quotes-e__bars button{flex:1;height:44px;display:flex;align-items:center}
.quotes-e__bars button i{display:block;width:100%;height:4px;border-radius:4px;background:#E4E9F0;transition:background .3s}
.quotes-e__bars button[aria-selected="true"] i{background:var(--u-blue-strong)}
@media (max-width:900px){.quotes-e__in{grid-template-columns:1fr}}