:root{
  --xp-brand:#e4c387;
  --xp-topbar:#b9973a;
  --xp-bg: transparent;
  --xp-card-bg:#ffffff;
  --xp-text:#0a0a0a;
  --xp-muted:#444;
  --xp-link:#000000;
  --xp-star:#e4c387;
  --xp-verified:#138e50;
  --xp-focus:#0f4c81;
  --xp-shadow: 0 10px 30px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.08);
  --xp-radius:18px;
  --xp-minh-mobile:420px;
}

/* wrapper */
.xp-reviews-wrap{ position:relative; }
.xp-reviews{
  position:relative; padding:16px 8px 24px; background:var(--xp-bg);
  overflow:visible; max-width:100%;
}

/* Escritorio: grid 3 */
@media (min-width:992px){
  .xp-reviews{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px; padding:24px; align-items:stretch; height:auto !important;
  }
  .xp-reviews .xp-card{ display:none; }
  .xp-reviews .xp-card:nth-child(-n+3){ display:flex; }
}

/* Flechas */
.xp-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:none; border-radius:999px;
  background:#0a0a0a; color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25); cursor:pointer; z-index:50;
}
.xp-nav svg, .xp-nav svg path{ fill:currentColor; }
.xp-nav:focus-visible{ outline:2px solid var(--xp-focus); outline-offset:2px; }
.xp-prev{ left:-12px; }
.xp-next{ right:-12px; }
.xp-nav:hover{ background:#111; }
@media (min-width:992px){ .xp-nav{ display:flex; } }

/* Tarjeta */
.xp-card{
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:720px; margin:0 auto 16px;
  border-radius:var(--xp-radius); background:var(--xp-card-bg);
  box-shadow:var(--xp-shadow); color:var(--xp-text);
  user-select:none; touch-action:pan-y; will-change: transform;
  border:1px solid rgba(0,0,0,.06);
  overflow: visible;
}

/* franja superior (embebida para que no sobresalga) */
.xp-card::before{
  content:""; position:absolute;
  left:12px; right:12px; top:8px; height:8px;
  border-radius:6px;
  background: linear-gradient(90deg, var(--xp-topbar), #866a1b);
  pointer-events:none; z-index:0;
}

.xp-card__inner{ padding:18px 18px 14px; position:relative; display:flex; flex-direction:column; flex:1; }

/* miniatura con aro doble */
.xp-card__product-thumb{
  position:absolute; top:-22px; right:12px; width:84px; height:84px; padding:6px;
  border-radius:50%; background:#f2f2f2;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.12), 0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,.06);
  overflow:hidden;
}
.xp-card__product-thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; }

/* estrellas */
.xp-card__stars{ display:flex; gap:4px; margin-top:4px; }
.xp-card__stars .star{ fill:#d1d5db }
.xp-card__stars .star.filled{ fill:var(--xp-star) }

/* título */
.xp-card__title{
  font-size:21px; font-weight:800; margin:8px 0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* subtítulo */
.xp-card__subtitle{
  color:var(--xp-muted); margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

.xp-card__link a{
  color:var(--xp-link); text-decoration: underline; text-underline-offset: 2px; font-weight:700;
}
.xp-card__link a:hover{ text-decoration-thickness: 3px; }

/* contenido */
.xp-card__content{
  --clamp-lines-desktop: 3;
  --clamp-lines-mobile: 5;
  position:relative; margin:12px 0 10px; line-height:1.6; flex:1;
}
.xp-card__content p{ margin:0 0 8px; }

@media (min-width:992px){ .xp-card__content{ --clamp-lines: var(--clamp-lines-desktop); } }
@media (max-width:991.98px){ .xp-card__content{ --clamp-lines: var(--clamp-lines-mobile); } }

/* clamp + puntos + degradado */
.xp-card__content.is-clamped{
  display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp-lines); overflow:hidden;
}
.xp-card__content.is-clamped::after{
  content: "…"; position:absolute; left:12px; bottom:8px; font-weight:800; color:#555;
}
.xp-card__content .xp-fade{
  position:absolute; left:0; right:0; bottom:0; height:36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--xp-card-bg) 70%);
  pointer-events:none; display:none;
}
.xp-card__content.is-clamped .xp-fade{ display:block; }

/* botón ver más */
.xp-readmore{
  position:absolute; right:8px; bottom:6px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--xp-link);
  font-weight:800; line-height:1; white-space:nowrap; cursor:pointer; border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.xp-readmore .chev{ display:inline-block; transition:transform .2s ease; }
.xp-readmore[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.xp-readmore:focus-visible{ outline:2px solid var(--xp-focus); outline-offset:2px; }

/* footer */
.xp-card__footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; min-height:38px; }
.xp-card__author{ font-weight:700; white-space:nowrap; }
.xp-verified{ color:var(--xp-verified); font-weight:700; margin-left:10px; display:inline-flex; gap:6px; align-items:center; }
.xp-verified svg{ fill:currentColor; }

/* mano móvil (por defecto oculta) */
.xp-swipe-hint{
  display:none; align-items:center; gap:6px;
  color:rgba(0,0,0,.68); font-weight:800; white-space:nowrap; flex-shrink:0;
  pointer-events:none;
}
.xp-swipe-hint .hand{ animation: xp-swipe 1.6s ease-in-out infinite; }
@keyframes xp-swipe { 0%,100%{ transform: translateX(0); opacity:.85; } 50%{ transform: translateX(-8px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .xp-swipe-hint .hand{ animation:none } }

/* header del bloque */
.xp-reviews__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 16px 0; color:#0a0a0a; }
.xp-reviews__header-left{ display:flex; align-items:center; gap:10px; }
.xp-reviews__avg{ font-size:28px; font-weight:900; line-height:1; }
.xp-reviews__stars .star{ fill:#d1d5db } .xp-reviews__stars .star.filled{ fill:var(--xp-star) }
.xp-reviews__count{ font-weight:700; color:#222; }

/* adorno comillas */
.xp-card__content::before{
  content:"“"; position:absolute; left:-8px; top:-8px;
  font-size:52px; line-height:1; color:rgba(0,0,0,.06); font-weight:900;
}

/* sombra de apoyo */
.xp-card::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:8px;
  background: rgba(0,0,0,.08); filter: blur(8px); border-radius: 12px; z-index:-1;
}

/* tilts (solo escritorio) */
@media (min-width:992px){
  .xp-card{ transition: transform .18s ease; }
  .xp-card.tilt-1{ transform: rotate(-0.8deg); }
  .xp-card.tilt-2{ transform: rotate( 0.6deg); }
  .xp-card.tilt-3{ transform: rotate(-0.4deg); }
}

/* stack móvil + ajustes específicos */
@media (max-width: 991.98px){
  /* Ocultar header en móvil */
  .xp-reviews__header{ display:none !important; }

  .xp-reviews{ display:block; padding-inline:0; }
  .xp-card{
    position:absolute; left:16px; width: calc(100% - 32px); right:auto;
    min-height:var(--xp-minh-mobile);
  }

  /* Efecto abanico */
  .xp-card:nth-child(1){ z-index:30; }
  .xp-card:nth-child(2){ z-index:20; transform: scale(.985) translateY(8px) rotate(-1.2deg); }
  .xp-card:nth-child(3){ z-index:10; transform: scale(.97)  translateY(16px) rotate( 1.2deg); }
  .xp-card:nth-child(n+4){ display:none; }

  /* Solo la tarjeta superior muestra la mano; sin texto “Desliza” */
  .xp-card:nth-child(1) .xp-swipe-hint{ display:flex; }
  .xp-swipe-hint span{ display:none; }
}

/* Footer móvil: envolver “Compra verificada” y mantener la mano dentro */
@media (max-width: 575.98px){
  .xp-card__footer{
    display:flex;
    flex-wrap:wrap;               /* permite 2 líneas */
    align-items:flex-start;
    gap:8px 10px;
    min-height:auto;
  }
  .xp-card__author{
    white-space:normal;           /* deja quebrar nombres largos */
    display:flex;
    flex-wrap:wrap;
    gap:4px 8px;
  }
  .xp-verified{
    font-size:14px;               /* un poco más pequeño en móvil */
    line-height:1.2;
    flex-basis:100%;              /* ocupa línea completa si falta espacio */
    order:2;
  }
  /* La mano pasa a la derecha en su propia línea */
  .xp-card:nth-child(1) .xp-swipe-hint{
    order:3;
    width:100%;
    justify-content:flex-end;
    margin-top:2px;
  }
}

/* accesibilidad */
.screen-reader-text{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.xp-card a:focus-visible, .xp-card:focus-visible{ outline:2px solid var(--xp-focus); outline-offset:3px; border-radius:8px; }

/* dark mode */
@media (prefers-color-scheme: dark){
  .xp-reviews{
    --xp-bg:#0f0f0f; --xp-card-bg:#181818; --xp-text:#f3f3f3; --xp-muted:#c7c7c7;
    --xp-link:#8ab4f8; --xp-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.45); --xp-topbar:#6f5818;
  }
  .xp-card{ border-color: rgba(255,255,255,.08); }
  .xp-card__product-thumb{ background:#1f1f1f; box-shadow:0 2px 12px rgba(0,0,0,.5), 0 0 0 3px #181818, 0 0 0 6px rgba(255,255,255,.05); }
  .xp-card__stars .star{ fill:#333; }
  .xp-swipe-hint{ color: rgba(255,255,255,.75); }
  .xp-reviews__count{ color:#eaeaea; }
  .xp-nav{ background:#222; } .xp-nav:hover{ background:#1b1b1b; }
  .xp-card__content .xp-fade{ background: linear-gradient(to bottom, rgba(24,24,24,0), var(--xp-card-bg) 70%); }
  .xp-readmore{ background:rgba(24,24,24,.95); }
}

/* Alinear "Compra verificada" con el nombre en móvil */
@media (max-width: 575.98px){
  .xp-verified{
    margin-left: 0 !important;   /* antes 10px */
  }
}

/* Móvil: abanico sin cambio de tamaño al avanzar */
@media (max-width: 991.98px){
  .xp-card:nth-child(2){
    /* antes: scale(.985) translateY(8px) rotate(-1.2deg) */
    transform: translateY(8px) rotate(-1.2deg);
  }
  .xp-card:nth-child(3){
    /* antes: scale(.97) translateY(16px) rotate(1.2deg) */
    transform: translateY(16px) rotate(1.2deg);
  }
}
/* Fondo blanco para el círculo de la miniatura del producto */
.xp-card__product-thumb{
  background:#fff !important;
  /* aro doble manteniendo contraste */
  box-shadow:
    0 2px 12px rgba(0,0,0,.12),
    0 0 0 3px #fff,
    0 0 0 6px rgba(0,0,0,.06);
}

/* En dark mode, seguir usando fondo blanco para que no “ensucie” la imagen */
@media (prefers-color-scheme: dark){
  .xp-card__product-thumb{
    background:#fff !important;
    box-shadow:
      0 2px 12px rgba(0,0,0,.5),
      0 0 0 3px #fff,
      0 0 0 6px rgba(255,255,255,.08);
  }
}