/* Testimonials — CSS público del shortcode [bdmrev]. Prefijo único bdmrev-*
 * en todo (lección ya aprendida en este proyecto: los widgets HTML de
 * Elementor comparten cascada global sin aislamiento — dos widgets con la
 * misma clase se pisan). El Kit global de Elementor (.elementor-kit-2874)
 * tiene reglas tipo ".elementor-kit-2874 a{color:...}" con más especificidad
 * que una clase sola nuestra — por eso color/font-weight van con !important
 * donde compiten con eso. Ver CLAUDE.md raíz. */

.bdmrev-block{font-family:'DM Sans',sans-serif;padding:16px;border-radius:8px;box-sizing:border-box;line-height:1.4}
.bdmrev-block *{box-sizing:border-box}
.bdmrev-block h1,.bdmrev-block h2,.bdmrev-block h3{font-family:'Barlow Condensed',sans-serif}
.bdmrev-block .bdmrev-nm{font-family:'Roboto',sans-serif;font-weight:700}

.bdmrev-block .bdmrev-rev-summary{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.bdmrev-block .bdmrev-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff!important;font-weight:700;font-size:12.5px;flex-shrink:0;position:relative;overflow:hidden}
.bdmrev-block .bdmrev-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bdmrev-block .bdmrev-stars{color:#f0b400;letter-spacing:1px;font-size:14px}
.bdmrev-block .bdmrev-stars .bdmrev-empty{color:#e2e2e2}
.bdmrev-block .bdmrev-stars-summary .bdmrev-stars{font-size:16px!important;letter-spacing:0!important}

.bdmrev-block .bdmrev-valoranos-btn{display:inline-flex;align-items:center;gap:6px;background:#4285F4;color:#fff!important;font-weight:700;font-size:12px;padding:6px 14px;border-radius:30px;text-decoration:none!important;margin-bottom:16px}
.bdmrev-block .bdmrev-valoranos-btn:hover{background:#3367d6}
.bdmrev-block .bdmrev-valoranos-btn .bdmrev-g-circle{width:16px;height:16px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.bdmrev-block .bdmrev-valoranos-btn .bdmrev-g-circle svg{width:11px;height:11px}

.bdmrev-block .bdmrev-rev-carousel{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding-bottom:6px}
.bdmrev-block .bdmrev-rev-carousel.animating{overflow:hidden;padding-bottom:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.bdmrev-block .bdmrev-rev-track{display:flex;align-items:flex-start;gap:14px;width:max-content;animation-name:bdmrev-front-scroll;animation-timing-function:linear;animation-iteration-count:infinite}
.bdmrev-block .bdmrev-rev-track.bdmrev-dir-izq{animation-direction:reverse}
.bdmrev-block .bdmrev-rev-track.bdmrev-pausehover:hover{animation-play-state:paused}
@keyframes bdmrev-front-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.bdmrev-block .bdmrev-rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}

/* Altura fija a propósito: sin esto, una reseña de una línea da una tarjeta
   más baja que una de 3 líneas (o con/sin fotos) y el carrusel se ve
   desigual. Como el texto ya está topado a 3 líneas con "…" (line-clamp) y
   la reseña completa siempre está a un clic en el modal, no hay pérdida de
   información al reservar siempre el mismo alto. */
.bdmrev-block .bdmrev-rev-card{width:230px;flex:0 0 230px;height:288px;display:flex;flex-direction:column;background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:16px;overflow:hidden;cursor:pointer;transition:box-shadow .15s,transform .15s}
.bdmrev-block .bdmrev-rev-grid .bdmrev-rev-card{width:auto;flex-basis:auto}
.bdmrev-block .bdmrev-rev-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-2px)}
.bdmrev-block .bdmrev-rev-card .bdmrev-txt,.bdmrev-block .bdmrev-rev-card .bdmrev-nm{overflow-wrap:break-word;word-break:break-word}
.bdmrev-block .bdmrev-rev-card .bdmrev-leer-mas{display:block;font-size:11.5px;font-weight:700!important;color:var(--bdmrev-accent,#1F6675)!important;margin-top:4px}
.bdmrev-block .bdmrev-rev-card .bdmrev-top{display:flex;gap:10px;align-items:flex-start;margin-bottom:4px}
.bdmrev-block .bdmrev-rev-card .bdmrev-top .bdmrev-nm{font-weight:700;font-size:13px;letter-spacing:.01em;color:#1d2327!important}
.bdmrev-block .bdmrev-rev-card .bdmrev-top .bdmrev-dt{font-size:11.5px;color:#646970}
/* .bdmrev-rt también aparece suelto dentro del modal (fuera de .bdmrev-rev-card
   .bdmrev-top) — necesita su propio estilo base, si no hereda el tamaño de
   letra por defecto del tema (bug real visto en producción: se veía enorme). */
.bdmrev-block .bdmrev-rt{display:inline-block;font-size:10.5px!important;font-weight:400!important;color:var(--bdmrev-accent,#1F6675)!important;background:#EAF5F7;padding:1px 7px;border-radius:20px;margin-top:3px;line-height:1.4}
.bdmrev-block .bdmrev-rev-card .bdmrev-top .bdmrev-rt{display:inline-block;font-size:10.5px;color:var(--bdmrev-accent,#1F6675)!important;background:#EAF5F7;padding:1px 7px;border-radius:20px;margin-top:1px}
.bdmrev-block .bdmrev-rev-card .bdmrev-txt{font-size:14px;color:#3c434a!important;line-height:1.4;min-height:4.2em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bdmrev-block .bdmrev-rev-photos{display:flex;gap:6px;margin-top:10px}
.bdmrev-block .bdmrev-rev-photos img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex-shrink:0}

.bdmrev-block .bdmrev-google-badge{display:inline-flex;align-items:center;gap:5px}

@media (max-width:700px){
  .bdmrev-block{padding:12px}
  .bdmrev-block .bdmrev-rev-summary{gap:10px;margin-bottom:12px}
  .bdmrev-block .bdmrev-rev-summary .bdmrev-avatar{width:40px!important;height:40px!important;font-size:15px!important}
  .bdmrev-block .bdmrev-rev-card{width:min(320px,78vw);flex-basis:min(320px,78vw)}
  .bdmrev-block .bdmrev-rev-card .bdmrev-txt{font-size:14px!important}
  #bdmrev-front-modal-body .bdmrev-rev-txt{font-size:15px!important}
  .bdmrev-block .bdmrev-valoranos-btn{padding:5px 12px;font-size:11px}
}

/* modal — se prefija con bdmrev-* pero vive dentro de .bdmrev-block, así
   que no necesita un ámbito propio adicional en el front-end */
.bdmrev-block .bdmrev-overlay{position:fixed;inset:0;background:rgba(29,35,39,.6);display:none;align-items:center;justify-content:center;z-index:100000;padding:20px}
.bdmrev-block .bdmrev-overlay.open{display:flex}
.bdmrev-block .bdmrev-modal{background:#fff;border-radius:4px;max-width:560px;width:100%;max-height:88vh;box-shadow:0 4px 24px rgba(0,0,0,.3);font-family:'DM Sans',sans-serif;display:flex;flex-direction:column}
.bdmrev-block .bdmrev-modal-lg{max-width:540px}
@media (max-width:700px){
  .bdmrev-block .bdmrev-overlay{padding:0}
  .bdmrev-block .bdmrev-modal-lg{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0}
}
.bdmrev-block .bdmrev-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #dcdcde}
.bdmrev-block .bdmrev-modal-head h3{font-size:16px;font-weight:600!important;margin:0;color:#1d2327!important;font-family:'DM Sans',sans-serif}
.bdmrev-block .bdmrev-modal-head button{background:none;border:none;font-size:18px;color:#646970;cursor:pointer}
.bdmrev-block .bdmrev-modal-body{padding:18px 20px;color:#3c434a;overflow-y:auto;flex:1 1 auto;min-height:0}
.bdmrev-block .bdmrev-rev-txt{font-size:16px;font-weight:400!important;line-height:1.55;color:#3c434a!important;margin:0 0 14px}
/* 3 columnas a propósito: con hasta 6 fotos (el máximo pensado para esta
   galería) siempre llena filas completas (3, o 3+3). Alineado a la
   izquierda (no centrado) — con 1 o 2 fotos, centrar las dejaba flotando
   en medio de un modal ancho (540px), sin relación visual con el resto
   del contenido (nombre/fecha/texto), todo alineado a la izquierda. Con
   4 o 5 fotos, la fila incompleta queda pegada a la izquierda con hueco
   a la derecha — aceptado, consistente con el resto del modal. */
.bdmrev-block .bdmrev-rev-photos.bdmrev-rev-photos-lg{display:flex!important;flex-wrap:wrap;justify-content:flex-start;gap:6px}
.bdmrev-block .bdmrev-rev-photos.bdmrev-rev-photos-lg img{flex:0 0 auto!important;width:calc(33.333% - 4px)!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.bdmrev-block .bdmrev-modal-foot{padding:14px 20px;border-top:1px solid #dcdcde;display:flex;justify-content:flex-end;gap:8px;flex:0 0 auto}

/* botón "Reservar" — mismo azul real del sitio, #449EBC, ver wordpress_site_structure */
.bdmrev-block .bdmrev-btn-reservar{background:#449EBC!important;border-color:#449EBC!important;color:#fff!important;border-radius:0!important;text-transform:uppercase;letter-spacing:.08em;font-size:12px!important;font-weight:500!important;font-family:'DM Sans',sans-serif!important;height:26px!important;padding:0 12px!important;display:inline-flex;align-items:center;text-decoration:none!important}
.bdmrev-block .bdmrev-btn-reservar:hover{background:#357E96!important;border-color:#357E96!important}

/* botón "Ver reseña" — gris, secundario a propósito para no competir con "Reservar ahora" */
.bdmrev-block .bdmrev-btn-ver-resena{background:#f0f0f1!important;border:1px solid #dcdcde!important;color:#3c434a!important;border-radius:0!important;text-transform:uppercase;letter-spacing:.08em;font-size:12px!important;font-weight:500!important;font-family:'DM Sans',sans-serif!important;height:26px!important;padding:0 12px!important;display:inline-flex;align-items:center;text-decoration:none!important}
.bdmrev-block .bdmrev-btn-ver-resena:hover{background:#e2e2e3!important;border-color:#c3c4c7!important}