/* HV Reseñas — todo va con .hvr.hvr para ganarle al tema y al kit de Elementor */
.hvr.hvr{
  --hvr-ink:#1D1D1D; --hvr-text:#606060; --hvr-muted:#7A7A7A; --hvr-line:#E9E9E9;
  --hvr-soft:#FAFAFA; --hvr-soft2:#F6F6F6; --hvr-naranja:#FAA308; --hvr-naranja-osc:#EF9100;
  font-family:"Josefin Sans",sans-serif; color:var(--hvr-text); font-size:16px; line-height:1.55;
  box-sizing:border-box; width:100%;
}
/* se acomoda al ancho de su columna, no al de la pantalla */
.hvr.hvr:not(.hvr-modal):not(.hvr-lb){container-type:inline-size; container-name:hvr}
.hvr.hvr *, .hvr.hvr *::before, .hvr.hvr *::after{box-sizing:border-box}
.hvr.hvr [hidden]{display:none!important}
.hvr.hvr button, .hvr.hvr button:hover, .hvr.hvr button:focus, .hvr.hvr button:active{
  all:unset; box-sizing:border-box; cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.hvr.hvr button:focus-visible{outline:2px solid var(--hvr-ink); outline-offset:2px}
.hvr.hvr p{margin:0}
.hvr.hvr img{display:block; max-width:100%; border:0; border-radius:0; box-shadow:none}

/* estrellas */
.hvr.hvr .hvr-stars{display:inline-flex; gap:2px; vertical-align:middle}
.hvr.hvr .hvr-stars svg{width:14px; height:14px; fill:var(--hvr-line)}
.hvr.hvr .hvr-stars svg.on{fill:var(--hvr-naranja)}
.hvr.hvr .hvr-stars.lg svg{width:22px; height:22px}

/* botón principal */
.hvr.hvr .hvr-btn, .hvr.hvr .hvr-btn:hover, .hvr.hvr .hvr-btn:focus{
  display:inline-flex; align-items:center; justify-content:center; background:var(--hvr-naranja); color:#fff;
  border-radius:4px; padding:13px 22px 11px; font-weight:600; font-size:15px; line-height:1.2; letter-spacing:.02em;
  transition:background .2s; text-align:center;
}
.hvr.hvr .hvr-btn:hover{background:var(--hvr-naranja-osc)}
.hvr.hvr .hvr-btn[disabled]{opacity:.6; cursor:default}

/* estructura */
.hvr.hvr .hvr-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; align-items:start}
.hvr.hvr .hvr-title{font-family:inherit; font-size:26px; line-height:1.2; font-weight:600; color:var(--hvr-ink); margin:0; letter-spacing:-.01em; text-transform:none}
.hvr.hvr .hvr-score{font-size:48px; line-height:1; font-weight:300; color:var(--hvr-ink); letter-spacing:-.03em; margin:16px 0 6px}
.hvr.hvr .hvr-count{margin:4px 0 18px; font-size:14px}
.hvr.hvr .hvr-empty{margin-top:14px; font-size:15px}
.hvr.hvr .hvr-hint{font-size:13px; color:var(--hvr-muted); margin-top:10px}

/* navegación del carrusel (arriba) */
.hvr.hvr .hvr-nav{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.hvr.hvr .hvr-bar{flex:1; height:2px; background:var(--hvr-line); position:relative}
.hvr.hvr .hvr-bar i{position:absolute; left:0; top:0; height:2px; width:100%; background:var(--hvr-ink); transition:left .3s,width .3s}
.hvr.hvr .hvr-arrow, .hvr.hvr .hvr-arrow:hover, .hvr.hvr .hvr-arrow:focus{
  width:38px; height:38px; border:1px solid var(--hvr-line); background:#fff; border-radius:50%;
  display:grid; place-items:center; color:var(--hvr-ink); transition:border-color .2s; flex:none;
}
.hvr.hvr .hvr-arrow:hover{border-color:var(--hvr-ink)}
.hvr.hvr .hvr-arrow[disabled]{opacity:.35; cursor:default; border-color:var(--hvr-line)}
.hvr.hvr .hvr-arrow svg, .hvr.hvr .hvr-lb-nav svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6}
.hvr.hvr .hvr-nav.solo .hvr-arrow{display:none}

/* tarjetas */
.hvr.hvr .hvr-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:max(240px, calc((100% - 60px)/3.4)); gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; outline:none;
  max-width:none;
}
.hvr.hvr .hvr-track::-webkit-scrollbar{display:none}
.hvr.hvr .hvr-card{scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid var(--hvr-line); border-radius:6px; overflow:hidden; background:#fff; margin:0}
.hvr.hvr .hvr-ph, .hvr.hvr .hvr-ph:hover, .hvr.hvr .hvr-ph:focus{display:block; position:relative; overflow:hidden; background:var(--hvr-soft2); aspect-ratio:16/10; width:100%}
.hvr.hvr .hvr-ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s; mix-blend-mode:multiply}
.hvr.hvr .hvr-ph:hover img{transform:scale(1.04)}
.hvr.hvr .hvr-more-ph{position:absolute; right:8px; bottom:8px; background:rgba(29,29,29,.75); color:#fff; font-size:11px; line-height:1; padding:4px 7px 2px; border-radius:3px}
.hvr.hvr .hvr-body{padding:14px 16px; display:flex; flex-direction:column; flex:1}
.hvr.hvr .hvr-text{margin:8px 0 4px; color:var(--hvr-ink); font-size:14px; font-weight:400; line-height:1.55; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; word-break:break-word}
.hvr.hvr .hvr-text.open{-webkit-line-clamp:unset; display:block}
.hvr.hvr .hvr-readmore, .hvr.hvr .hvr-readmore:hover, .hvr.hvr .hvr-readmore:focus{align-self:flex-start; color:var(--hvr-ink); font-size:13px; font-weight:600; border-bottom:1px solid var(--hvr-naranja); margin-bottom:12px; padding-bottom:1px}
.hvr.hvr .hvr-fill{flex:1}
.hvr.hvr .hvr-card.noimg{background:var(--hvr-soft)}
.hvr.hvr .hvr-card.noimg .hvr-text{font-size:18px; line-height:1.45; font-weight:300; margin-top:12px; -webkit-line-clamp:8}
.hvr.hvr .hvr-foot{border-top:1px solid var(--hvr-line); padding-top:10px; margin-top:8px; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.hvr.hvr .hvr-who{color:var(--hvr-ink); font-weight:600; font-size:14px; letter-spacing:.02em}
.hvr.hvr .hvr-when{color:var(--hvr-muted); font-size:12px; white-space:nowrap}

/* formulario */
.hvr.hvr.hvr-modal{position:fixed; inset:0; z-index:99999; background:rgba(29,29,29,.55); padding:16px; overflow-y:auto; display:grid; place-items:center}
.hvr.hvr.hvr-modal[hidden]{display:none!important}
.hvr.hvr .hvr-sheet{background:#fff; width:100%; max-width:560px; border-radius:6px; padding:36px 36px 32px; position:relative; margin:0}
.hvr.hvr .hvr-sheet-title{font-family:inherit; margin:0 0 4px; font-size:24px; line-height:1.2; font-weight:600; color:var(--hvr-ink); text-transform:none}
.hvr.hvr .hvr-sub{margin:0 0 8px; font-size:14px; color:var(--hvr-muted)}
.hvr.hvr .hvr-x, .hvr.hvr .hvr-x:hover, .hvr.hvr .hvr-x:focus{position:absolute; right:12px; top:10px; width:40px; height:40px; display:grid; place-items:center; font-size:28px; line-height:1; color:var(--hvr-muted)}
.hvr.hvr .hvr-label{display:block; font-size:13px; font-weight:600; color:var(--hvr-ink); letter-spacing:.04em; margin:18px 0 8px}
.hvr.hvr .hvr-label small{font-weight:400; color:var(--hvr-muted); letter-spacing:0}
.hvr.hvr .hvr-sheet .hvr-input{
  display:block; width:100%; border:1px solid var(--hvr-line); border-radius:4px; padding:12px 14px 10px; margin:0;
  font-family:inherit; font-size:15px; line-height:1.4; color:var(--hvr-ink); background:#fff; box-shadow:none; min-height:0;
}
.hvr.hvr .hvr-sheet .hvr-input:focus{outline:none; border-color:var(--hvr-ink)}
.hvr.hvr .hvr-sheet .hvr-input.err{border-color:#C0392B}
.hvr.hvr .hvr-sheet textarea.hvr-input{min-height:110px; resize:vertical}
.hvr.hvr .hvr-rate{display:flex; gap:4px}
.hvr.hvr .hvr-rate.err svg{fill:#F2C7C0}
.hvr.hvr .hvr-rate button, .hvr.hvr .hvr-rate button:hover, .hvr.hvr .hvr-rate button:focus{padding:2px}
.hvr.hvr .hvr-rate svg{width:32px; height:32px; fill:var(--hvr-line); transition:fill .15s}
.hvr.hvr .hvr-rate button.on svg{fill:var(--hvr-naranja)}
.hvr.hvr .hvr-drop{border:1px dashed #C9C9C9; border-radius:4px; padding:18px; display:flex; align-items:center; gap:14px; cursor:pointer; color:var(--hvr-muted); font-size:14px; line-height:1.4; margin:0}
.hvr.hvr .hvr-drop:hover{border-color:var(--hvr-ink)}
.hvr.hvr .hvr-drop svg{width:28px; height:28px; stroke:var(--hvr-ink); fill:none; stroke-width:1.4; flex:none}
.hvr.hvr .hvr-drop strong{color:var(--hvr-ink); font-weight:600}
.hvr.hvr .hvr-drop input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.hvr.hvr .hvr-previews{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.hvr.hvr .hvr-previews img{width:64px; height:64px; object-fit:cover; border-radius:3px}
.hvr.hvr .hvr-msg{margin-top:18px; font-size:14px; color:var(--hvr-ink)}
.hvr.hvr .hvr-msg:empty{display:none}
.hvr.hvr .hvr-msg.err{color:#C0392B}
.hvr.hvr .hvr-actions{margin-top:22px}

/* visor de fotos */
.hvr.hvr.hvr-lb{position:fixed; inset:0; z-index:100000; background:rgba(20,20,20,.92); display:grid; place-items:center; padding:24px}
.hvr.hvr.hvr-lb[hidden]{display:none!important}
.hvr.hvr.hvr-lb figure{margin:0}
.hvr.hvr.hvr-lb img{max-height:82vh; max-width:min(86vw,1000px); width:auto; height:auto; object-fit:contain}
.hvr.hvr.hvr-lb figcaption{color:#ddd; text-align:center; margin-top:14px; font-size:14px}
.hvr.hvr.hvr-lb .hvr-x, .hvr.hvr.hvr-lb .hvr-x:hover{color:#fff; right:16px; top:12px; position:absolute}
.hvr.hvr .hvr-lb-nav, .hvr.hvr .hvr-lb-nav:hover, .hvr.hvr .hvr-lb-nav:focus{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center}
.hvr.hvr .hvr-lb-nav.prev{left:16px}
.hvr.hvr .hvr-lb-nav.next{right:16px}

/* tablet */
@container hvr (max-width:900px){
  .hvr.hvr .hvr-grid{grid-template-columns:minmax(0,1fr); gap:28px}
  .hvr.hvr .hvr-side{display:grid; grid-template-columns:auto 1fr; column-gap:24px; align-items:center}
  .hvr.hvr .hvr-title{grid-column:1/-1}
  .hvr.hvr .hvr-score{grid-row:2/4}
  .hvr.hvr .hvr-count{margin:0}
  .hvr.hvr .hvr-side .hvr-btn, .hvr.hvr .hvr-hint, .hvr.hvr .hvr-empty{grid-column:1/-1}
  .hvr.hvr .hvr-side .hvr-btn{margin-top:20px; justify-self:start}
  .hvr.hvr .hvr-track{grid-auto-columns:max(220px, calc((100% - 40px)/2.6))}
}
/* celular */
@container hvr (max-width:560px){
  .hvr.hvr .hvr-title{font-size:22px}
  .hvr.hvr .hvr-side .hvr-btn{width:100%; justify-self:stretch}
  .hvr.hvr .hvr-track{grid-auto-columns:78%; gap:14px}
}
@media (max-width:700px){
  .hvr.hvr .hvr-sheet{padding:28px 20px 24px}
  .hvr.hvr .hvr-lb-nav.prev{left:6px}
  .hvr.hvr .hvr-lb-nav.next{right:6px}
}

/* aviso para administradores */
.hvr-diag{font-family:monospace,monospace; font-size:12px; line-height:1.5; color:#1D1D1D; background:#FFF8E5; border:1px solid #FAA308; padding:12px 14px; margin:0 0 20px; word-break:break-word}
.hvr-diag ul{margin:6px 0 0; padding-left:18px}
