﻿/* Carrusel de portada, estrellas, ventana de opiniones e iconos de estética */

/* Carrusel */
.carousel{position:relative;height:100%}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;transition:opacity .9s var(--ease-soft)}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.slide.is-active{opacity:1;z-index:1}
.slide.is-active img{transform:scale(1)}
.car-ui{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:1rem;padding:2.6rem 1.1rem 1rem;background:linear-gradient(0deg,rgba(26,21,17,.6),transparent)}
.bars{display:flex;gap:.4rem;flex:1}
.bar{position:relative;flex:1;height:3px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.4);cursor:pointer}
.bar::before{content:"";position:absolute;inset:-12px 0}
.bar i{position:absolute;inset:0;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left}
.bar.done i{transform:scaleX(1)}
.bar.is-active i{animation:fill var(--dur,5s) linear forwards}
.carousel.paused .bar.is-active i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.car-btns{display:flex;gap:.35rem}
.car-btn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(26,21,17,.35);color:#fff;font-size:1.1rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .16s var(--ease),background-color .2s}
.car-btn:active{transform:scale(.94)}
@media (hover:hover){.car-btn:hover{background:rgba(26,21,17,.6)}}
.carousel.is-static .bar.is-active i{animation:none;transform:scaleX(1)}

/* Estrellas y verificación */
.stars{display:inline-flex;gap:.15rem;color:var(--gold-text);font-size:1.2rem}
.stars-ink{color:var(--on-brand);margin-bottom:.5rem}
.verified{display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;font-weight:500;color:var(--gold-text)}
.verified i{font-size:1.15rem}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;margin-bottom:.8rem}
.c-d .btn{align-self:flex-start}
#opiniones .modal-box{width:min(40rem,100%)}
.modal-single{grid-template-columns:1fr}
.rating-line{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:.95rem}
.op-list{display:grid;gap:1.1rem;margin:1.2rem 0}
.op-list li+li{padding-top:1.1rem;border-top:1px solid var(--line)}
.op-q{font:500 1.15rem/1.3 var(--display);margin:0 0 .3rem!important;color:var(--fg)!important}
.op-m{font-size:.85rem;margin:0!important;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center}

/* Iconos de estética con anillo dorado (eco del círculo del logotipo) */
.section>.wrap,.people-flow{position:relative}
.deco{position:absolute;display:flex;gap:1.1rem;pointer-events:none}
.deco-title{right:0;top:0}
.deco-people{top:.3rem}
.dc{position:relative;display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:50%;box-shadow:0 0 0 1px var(--gold);color:var(--gold-text)}
.dc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--gold);opacity:0;animation:halo 4s var(--ease-soft) infinite}
.dc:nth-child(2)::after{animation-delay:-1.3s}
.dc:nth-child(3)::after{animation-delay:-2.6s}
.dc i{font-size:1.9rem;animation:float 6s ease-in-out infinite alternate}
.dc:nth-child(2) i{animation-duration:7.5s;animation-delay:-2s}
.dc:nth-child(3) i{animation-duration:5.5s;animation-delay:-4s}
@keyframes float{from{transform:translateY(-5px) rotate(-6deg)}to{transform:translateY(5px) rotate(6deg)}}
@keyframes halo{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
.deco-big{top:6%;right:30%;gap:1.6rem}
.deco-big .dc{width:5rem;height:5rem}
.deco-big .dc i{font-size:2.3rem}
@media (max-width:1000px){.deco-title{display:none}}
@media (max-width:760px){.deco-big{display:none}}
@media (prefers-reduced-motion:reduce){.dc::after,.dc i{animation:none}}

/* Google: insignia, opiniones que rotan y lista completa */
.g-badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:500;color:var(--fg)}
.g-badge i{font-size:1.35rem;color:#4285F4}
.g-line{margin:.2rem 0 1rem}
.c-b .rot{position:relative;flex:1;min-height:7.5rem;margin:.4rem 0 .8rem}
.rot-item{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rot-item.is-on{opacity:1;transform:none;pointer-events:auto}
.rot-dots{display:flex;gap:.4rem}
.rot-dots button{position:relative;width:1.5rem;height:3px;padding:0;border:0;border-radius:2px;background:var(--line-strong);cursor:pointer;transition:background-color .2s}
.rot-dots button::before{content:"";position:absolute;inset:-10px -2px}
.rot-dots button.is-on{background:var(--gold-text)}
#opiniones{align-items:start}
#opiniones .modal-box{margin:1.5rem auto}
.op-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.op-head strong{display:block;font-weight:500;line-height:1.25}
.av{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--brand);color:var(--on-brand);font:500 1.05rem var(--display)}
.stars-sm{display:flex;font-size:.9rem}
.op-list .op-q{font:400 1rem/1.55 var(--sans);color:var(--fg-soft)!important;margin:0!important}
.rating-line{margin-top:.4rem}
.btn-ink{background:var(--fg);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.btn-ink:hover{opacity:.86}}
