/* Reference CSS scoped to this section. */
@scope (#customer-stories){

/* Sección sobre foto: colores fijos claros/oscuros a propósito */
:scope{
  --navy:#0F1B2D;
  --text:#3E4A5E;
  --mute:#6B7588;
  --line:#E3E6EC;
  --card:#FFFFFF;
  --red:#B3261E;
  --gold:#E2A33B;
  --cream:#F3E6CF;
  --ease:cubic-bezier(.65,0,.15,1);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --card:#141E2E; --navy:#E8ECF3; --text:#C3CBD8; --mute:#8A94A6; --line:#26324A; color-scheme:dark; }
}
:root[data-theme="dark"]{ --card:#141E2E; --navy:#E8ECF3; --text:#C3CBD8; --mute:#8A94A6; --line:#26324A; color-scheme:dark; }
*,*::before,*::after{ box-sizing:inherit; }
.reviews{ margin:0; background:#0E1A2C; font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; color:var(--text); }

.reviews{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(6rem,11vw,8.5rem) clamp(1.25rem,4vw,2.5rem) clamp(3.5rem,6vw,5rem); }
/* ▼ Cambia por tu foto de flores: background-image:url(tu-foto.jpg) */
.bg{
  position:absolute; inset:-4%; z-index:-2;
  background:
    radial-gradient(40% 30% at 80% 25%, rgba(255,214,170,.35), transparent 70%),
    radial-gradient(120% 60% at 50% 120%, #2F4A2E 0, #3D5A3A 30%, transparent 62%),
    linear-gradient(180deg, #3E5E86 0%, #6E86A2 32%, #9DA88E 55%, #4C6646 75%, #2B3E2A 100%);
  background-size:cover; background-position:center;
  animation:drift 40s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:scale(1) translate(0,0) } to{ transform:scale(1.08) translate(-1.5%,-1%) } }
.reviews::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,18,32,.62) 0%, rgba(10,18,32,.38) 35%, rgba(10,18,32,.18) 60%, rgba(10,18,32,.45) 100%); }

header{ text-align:center; color:#fff; }
.crumbs{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.9; }
h2{ margin:1rem 0 0; font-weight:500; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.04; letter-spacing:-.045em; text-shadow:0 8px 30px rgba(0,0,0,.25); }
h2 span{ display:block; color:var(--cream); }
.sub{ margin:1rem auto 0; max-width:34rem; color:rgba(255,255,255,.92); text-shadow:0 2px 16px rgba(0,0,0,.45); }
.rating{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; padding:.5rem .95rem; border-radius:999px; font-size:.9rem; text-decoration:none;
}
.rating b{ font-size:1.05rem; }
.rating .s{ color:var(--gold); letter-spacing:.08em; }
.rating:hover{ background:rgba(255,255,255,.22); }
.rating:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.sample{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.12rem .45rem; border-radius:6px; background:#FFE9A8; color:#5A4300; vertical-align:middle; }

/* ═════ Tarjeta ═════ */
.card{
  position:relative; max-width:860px; margin:clamp(2.5rem,5vw,3.25rem) auto 0;
  background:color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:24px; overflow:hidden; box-shadow:0 50px 100px -50px rgba(0,0,0,.6);
  touch-action:pan-y;
}
.scene{ position:relative; overflow:hidden; }
.scene div{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:opacity .9s var(--ease), transform 7s linear;
}
.scene div.on{ opacity:1; transform:scale(1); }
/* Escenas de ambiente sin personas (cámbialas por fotos reales) */
.sc1{ background:radial-gradient(60% 50% at 30% 30%, #FFF4E0, #E8CFA8 40%, #B98E5E 75%, #6D4C30); }
.sc2{ background:radial-gradient(60% 50% at 70% 30%, #EEF3E6, #BFD0A8 40%, #7E9A64 75%, #44593A); }
.sc3{ background:radial-gradient(60% 50% at 40% 35%, #F2F0EC, #D3CABA 40%, #A0927C 75%, #5E5445); }
.sc4{ background:radial-gradient(60% 50% at 60% 30%, #EAF0F7, #B7C7DA 40%, #7E93AE 75%, #43546C); }
.scene .ph{ position:absolute; left:16px; bottom:14px; font-size:.72rem; color:rgba(255,255,255,.8); z-index:2; }

.body{ padding:clamp(1.5rem,3.5vw,2.6rem) clamp(1.5rem,4.5vw,3.4rem); display:flex; flex-direction:column; }
.top{ display:flex; align-items:center; gap:1rem; }
.prog{ flex:1; display:flex; gap:6px; }
.prog button{ flex:1; height:16px; padding:0; border:0; background:none; cursor:pointer; position:relative; }
.prog button::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; border-radius:3px; background:var(--line); }
.prog i{ position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:0; border-radius:3px; background:var(--red); }
.prog button:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:4px; }
.tag{ color:var(--red); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }

.stars{ display:flex; gap:4px; margin-top:1.5rem; }
.stars svg{ width:22px; height:22px; fill:var(--line); transition:fill .3s; }
.stars svg.lit{ fill:var(--gold); animation:pop .5s cubic-bezier(.3,1.7,.5,1); }
@keyframes pop{ 0%{ transform:scale(.4) rotate(-40deg) } 100%{ transform:none } }

.quote{ position:relative; margin:.9rem 0 0; min-height:5.2em; }
.quote blockquote{ margin:0; color:var(--navy); font-weight:500; font-size:clamp(1.35rem,2.3vw,1.85rem); line-height:1.25; letter-spacing:-.03em; }
.quote blockquote::before{ content:"“"; position:absolute; left:-.55em; top:-.15em; color:var(--red); opacity:.85; }
.w{ display:inline-block; opacity:0; transform:translateY(.4em); filter:blur(6px); animation:wIn .6s var(--ease) forwards; }
@keyframes wIn{ to{ opacity:1; transform:none; filter:none; } }
.quote.out blockquote{ animation:qOut .35s ease-in forwards; }
@keyframes qOut{ to{ opacity:0; transform:translateY(-.4em); filter:blur(6px); } }

.who{ display:flex; align-items:center; gap:.85rem; margin-top:1.4rem; }
.avatar{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem; flex:none; }
.who b{ display:block; color:var(--navy); font-weight:600; }
.who small{ color:var(--mute); font-size:.85rem; }
.who a{ color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--red); }
.who a:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.foot{ margin-top:0; padding-top:1.4rem; border-top:1px solid var(--line); margin-top:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.foot p{ margin:0; font-size:.75rem; color:var(--mute); max-width:24rem; }
.nav{ display:flex; gap:.5rem; }
.nav button{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); color:var(--navy); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.nav button:hover{ border-color:var(--navy); transform:translateY(-2px); }
.nav button:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ═════ Cinta de reseñas cortas ═════ */
.ribbon-wrap{ margin-top:clamp(2rem,4vw,3rem); }
.ribbon-note{ text-align:center; margin:.9rem 0 0; color:rgba(255,255,255,.8); font-size:.75rem; }
.ribbon{ display:grid; gap:12px; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track{ display:flex; gap:12px; width:max-content; animation:slide 60s linear infinite; }
.track.rev{ animation-direction:reverse; animation-duration:70s; }
.ribbon:hover .track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.chip{
  display:flex; align-items:center; gap:.7rem; white-space:nowrap;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:.65rem 1rem; border-radius:14px; font-size:.92rem;
}
.chip .s{ color:var(--gold); font-size:.8rem; letter-spacing:.05em; }
.chip small{ opacity:.7; }

@media (max-width:860px){
  .quote{ min-height:0; }
  .quote blockquote::before{ position:static; margin-right:.1em; }
  .foot{ flex-direction:column-reverse; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .bg{ animation:none; }
  .w, .quote.out blockquote, .stars svg.lit{ animation:none; opacity:1; transform:none; filter:none; }
  .track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .track[aria-hidden]{ display:none; }
  .scene div{ transition:none; }
}

}
#customer-stories.reviews{background:#0E1A2C;position:relative;overflow:hidden}
#customer-stories .bg{background-image:url("/public/testimonials/cinematic-garden-nano-banana.png")!important;background-size:cover;background-position:center;z-index:0!important}
#customer-stories::after{z-index:0!important;pointer-events:none}
#customer-stories>header,#customer-stories>.card,#customer-stories>.ribbon-wrap{position:relative;z-index:1}
#customer-stories .card{max-width:860px!important;display:block!important;grid-template-columns:none!important}
#customer-stories .ribbon-wrap{overflow:hidden}
#customer-stories .rating{cursor:default}