/* =========================================================
   NECORA Landing — 16-reviews.css
   EXTRAÍDO DESDE landing.css v30.5
   Scope:
   - reviews head
   - summary pill
   - google button
   - carousel
   - review cards
   - dots
   - half star
   ========================================================= */

/* =========================================================
   @reviews
   19) REVIEWS — GLASS PRO FINAL (scoped)
   ✅ Jerarquía + summary tipo Trustpilot
   ✅ Botón Google PRO
   ✅ Carrusel iOS: snap + peeking + sin scrollbar feel
   ✅ Cards: width estable + clamp + line-clamp
   ✅ Dots: SOLO reviews (no pisa plans)
   ========================================================= */

.nl-reviews{
  --nl-rev-blue: var(--nl-brand, #00a1df);
  --nl-rev-ink: rgba(12,18,28,.92);
  --nl-rev-muted: rgba(12,18,28,.64);
  --nl-rev-line: rgba(12,18,28,.10);

  --nl-star-on:  #f6c343;
  --nl-star-off: rgba(12,18,28,.18);

  --nl-rev-h2:   clamp(24px, 2.25vw, 34px);
  --nl-rev-sub:  clamp(13.5px, 1.2vw, 16px);
  --nl-rev-meta: clamp(12px, 1vw, 13px);
  --nl-rev-body: clamp(14.5px, 1.15vw, 16.5px);

  /* carousel tokens */
  --rev-card-w: clamp(280px, 78vw, 460px);
  --rev-gap: 14px;
  --rev-pad-x: 14px;
  --rev-radius: 26px;
}

/* -------------------------
   Head layout
------------------------- */
.nl-reviews .nl-reviews__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px 18px;
  flex-wrap:wrap;
}

.nl-reviews .nl-reviews__titleBlock{
  width: 100%;
  max-width: 780px;
}

/* Title + sub */
.nl-reviews .nl-h2{
  font-size: var(--nl-rev-h2);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--nl-rev-ink);
  margin: 0;
}

.nl-reviews .nl-sub{
  font-size: var(--nl-rev-sub);
  line-height: 1.35;
  color: var(--nl-rev-muted);
  margin-top: 6px;
  max-width: 62ch;
}

/* -------------------------
   Summary pill
------------------------- */
.nl-reviews .nl-reviews__summary{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;

  border-radius: 999px;
  border: 1px solid rgba(0,161,223,.20);
  background:
    radial-gradient(900px 260px at 14% 0%, rgba(0,161,223,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.86));
  box-shadow:
    0 18px 44px rgba(10,20,35,.10),
    0 12px 28px rgba(0,161,223,.08),
    inset 0 1px 0 rgba(255,255,255,.82);

  max-width: 100%;
}

.nl-reviews .nl-reviews__score{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 13.5px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(0,161,223,.18);
  background: rgba(0,161,223,.09);
  color: var(--nl-rev-ink);
  font-weight: 980;
  min-width: 64px;
  text-align:center;
}

.nl-reviews .nl-reviews__stars{
  display:inline-flex;
  align-items:center;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-.5px);
}

.nl-reviews .nl-reviews__stars .nl-star{ color: var(--nl-star-off); }

.nl-reviews .nl-reviews__stars .nl-star.is-on{
  color: var(--nl-star-on);
  text-shadow: 0 6px 18px rgba(246,195,67,.18);
}

.nl-reviews .nl-reviews__src{
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  font-size: var(--nl-rev-meta);
  color: var(--nl-rev-muted);
  font-weight: 850;
  white-space: nowrap;
}

.nl-reviews .nl-reviews__provider{
  color: var(--nl-rev-blue);
  font-weight: 980;
}

.nl-reviews .nl-reviews__count{ color: rgba(12,18,28,.54); }

@media (max-width: 520px){
  .nl-reviews .nl-reviews__summary{
    flex-wrap: wrap;
    row-gap: 7px;
    width: 100%;
  }

  .nl-reviews .nl-reviews__src{
    white-space: normal;
    line-height: 1.2;
  }
}

/* -------------------------
   Botón Google (PRO)
------------------------- */
.nl-reviews .nl-reviews__topActions{
  width: auto;
  margin-top: 10px;
}

.nl-reviews .nl-reviews__topActions .nl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  height: 46px;
  padding: 0 16px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 950;
  letter-spacing: .01em;

  color: var(--nl-rev-blue);
  background: rgba(0,161,223,.08);
  border: 1px solid rgba(0,161,223,.24);

  box-shadow:
    0 14px 34px rgba(10,20,35,.10),
    0 10px 22px rgba(0,161,223,.08),
    inset 0 1px 0 rgba(255,255,255,.82);

  text-decoration: none;
  user-select:none;
  white-space: nowrap;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

@media (hover:hover){
  .nl-reviews .nl-reviews__topActions .nl-btn:hover{
    transform: translateY(-1px);
    background: rgba(0,161,223,.12);
    border-color: rgba(0,161,223,.34);
    box-shadow:
      0 18px 44px rgba(10,20,35,.12),
      0 14px 34px rgba(0,161,223,.12),
      inset 0 1px 0 rgba(255,255,255,.86);
  }
}

.nl-reviews .nl-reviews__topActions .nl-btn:focus-visible{
  outline: 3px solid rgba(0,161,223,.26);
  outline-offset: 3px;
}

.nl-reviews .nl-reviews__topActions .nl-btn .nl-gIcon{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(12,18,28,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.nl-reviews .nl-reviews__topActions .nl-btn .nl-gIcon svg{
  width: 18px;
  height: 18px;
  display:block;
}

@media (min-width: 860px){
  .nl-reviews .nl-reviews__head{ flex-wrap: nowrap; }
  .nl-reviews .nl-reviews__titleBlock{ flex: 1 1 auto; }
  .nl-reviews .nl-reviews__topActions{ margin-top: 36px; }
}

@media (max-width: 640px){
  .nl-reviews .nl-reviews__topActions{
    width: 100%;
    display:flex;
    justify-content:center;
    margin-top: 12px;
  }

  .nl-reviews .nl-reviews__topActions .nl-btn{ height: 48px; }
}

/* =========================================================
   19.1) REVIEWS — CAROUSEL / iOS feel
   ========================================================= */
.nl-reviews .nl-reviews__carousel{
  position: relative;
  margin-top: 16px;
}

/* Fade edges */
.nl-reviews .nl-reviews__carousel::before,
.nl-reviews .nl-reviews__carousel::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events:none;
  z-index: 2;
}

.nl-reviews .nl-reviews__carousel::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}

.nl-reviews .nl-reviews__carousel::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}

/* Track: snap + peeking */
.nl-reviews .nl-reviews__track{
  display:flex;
  gap: var(--rev-gap);
  overflow:auto;
  padding: 12px var(--rev-pad-x) 18px;

  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rev-pad-x);
  scroll-padding-right: var(--rev-pad-x);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;

  scrollbar-width: none;
}

.nl-reviews .nl-reviews__track::-webkit-scrollbar{ height: 0; }

/* Desktop: menos fades */
@media (min-width: 980px){
  .nl-reviews .nl-reviews__carousel::before,
  .nl-reviews .nl-reviews__carousel::after{ display:none; }
}

/* =========================================================
   19.2) REVIEWS — CARDS / hierarchy
   ========================================================= */
.nl-reviews .nl-reviewCard{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: var(--rev-card-w);

  border-radius: var(--rev-radius);
  padding: 16px 18px 14px;

  border: 1px solid rgba(12,18,28,.08);
  background:
    radial-gradient(900px 340px at 14% 0%, rgba(0,161,223,.07), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.86));

  box-shadow:
    0 18px 44px rgba(10,20,35,.10),
    0 10px 24px rgba(10,20,35,.06),
    inset 0 1px 0 rgba(255,255,255,.82);

  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease;
}

@media (hover:hover){
  .nl-reviews .nl-reviewCard:hover{
    transform: translateY(-1px);
    box-shadow:
      0 22px 54px rgba(10,20,35,.12),
      0 12px 30px rgba(10,20,35,.08),
      inset 0 1px 0 rgba(255,255,255,.84);
  }
}

.nl-reviews .nl-reviewCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.nl-reviews .nl-reviewStars{
  display:inline-flex;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
}

.nl-reviews .nl-reviewStars .nl-star{ color: var(--nl-star-off); }

.nl-reviews .nl-reviewStars .nl-star.is-on{
  color: var(--nl-star-on);
  text-shadow: 0 6px 18px rgba(246,195,67,.18);
}

.nl-reviews .nl-reviewDate{
  font-size: 12.5px;
  color: rgba(12,18,28,.52);
  font-weight: 850;
  white-space: nowrap;
}

.nl-reviews .nl-reviewText{
  font-size: var(--nl-rev-body);
  line-height: 1.55;
  color: rgba(12,18,28,.86);
  margin: 6px 0 6px;
  letter-spacing: -.01em;

  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow:hidden;
}

.nl-reviews .nl-reviewBy{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin-top: 2px;
}

.nl-reviews .nl-reviewName{
  font-size: 15px;
  font-weight: 980;
  color: rgba(12,18,28,.92);
}

.nl-reviews .nl-reviewSrc{
  font-size: 12px;
  color: rgba(0,161,223,.82);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* Mobile tuning */
@media (max-width: 640px){
  .nl-reviews .nl-h2{ font-size: clamp(28px, 7vw, 36px); }
  .nl-reviews .nl-sub{ font-size: 15px; }
  .nl-reviews{ --rev-radius: 22px; --rev-card-w: min(84vw, 360px); }
  .nl-reviews .nl-reviewText{ -webkit-line-clamp: 5; }
  .nl-reviews .nl-reviews__carousel::before,
  .nl-reviews .nl-reviews__carousel::after{ width: 26px; }
}

/* =========================================================
   19.3) REVIEWS — DOTS / iOS PRO
   ========================================================= */
.nl-reviews .nl-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 0 6px;
  min-height: 24px;
  position: relative;
  z-index: 3;
}

.nl-reviews .nl-dot{
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(12,18,28,.16);
  border: 1px solid rgba(12,18,28,.12);
  cursor:pointer;
  padding:0;
  flex: 0 0 auto;
  transition: transform .18s ease, width .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .nl-reviews .nl-dot:hover{
    background: rgba(0,161,223,.26);
    border-color: rgba(0,161,223,.28);
    transform: translateY(-1px);
  }
}

.nl-reviews .nl-dot.is-active{
  width: 34px;
  background: rgba(0,161,223,.92);
  border-color: rgba(0,161,223,1);
  box-shadow: 0 10px 20px rgba(0,161,223,.18);
  transform: translateY(-1px);
}

.nl-reviews .nl-dot.is-active::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events:none;
}

.nl-reviews .nl-dot:focus-visible{
  outline: 3px solid rgba(0,161,223,.22);
  outline-offset: 4px;
}

@media (max-width: 520px){
  .nl-reviews .nl-dots{ gap: 12px; }
  .nl-reviews .nl-dot{ width: 11px; height: 11px; }
  .nl-reviews .nl-dot.is-active{ width: 36px; }
}

.nl-star.is-half{
  position:relative;
  opacity:.45;
}

.nl-star.is-half::before{
  content:"★";
  position:absolute;
  left:0;
  top:0;
  width:50%;
  overflow:hidden;
  opacity:1;
}