/* Eco Reviews — widget público (v1.6.0).
   Neutro a propósito: hereda tipografía del tema del cliente (esto vive en
   sitios de negocios muy distintos entre sí). Lo que sí es nuestro: el
   acento dorado de marca, las sombras suaves y los avatares con iniciales
   cuando Google no trae foto — antes esos casos quedaban sin avatar. */
:root{
  --eco-accent:#C8920A;
  --eco-ink:#1f1a10;
  --eco-ink-soft:#5c5648;
  --eco-border:rgba(31,26,16,.08);
  --eco-card-bg:rgba(255,255,255,.7);
}
.eco-reviews{margin:1.5em 0}
.eco-summary{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;margin-bottom:1.3em}
.eco-summary-rating{font-size:2.3em;font-weight:800;line-height:1;letter-spacing:-.02em}
.eco-summary-total{opacity:.72;font-size:.95em}
.eco-star{color:var(--eco-accent);font-size:1.05em;letter-spacing:.05em}
.eco-star-empty{color:#d6d3cb}
.eco-star-half{position:relative;color:#d6d3cb}
.eco-star-half::before{content:"★";position:absolute;left:0;width:50%;overflow:hidden;color:var(--eco-accent)}

.eco-cards{
  display:grid;gap:1.1em;align-items:start;
  grid-template-columns:repeat(var(--eco-cols, auto-fit), minmax(240px,1fr));
}
.eco-layout-carousel .eco-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6em}
.eco-layout-carousel .eco-card{flex:0 0 300px;scroll-snap-align:start}
@media (max-width:760px){ .eco-cards.eco-has-cols{ --eco-cols:2 !important; } }
@media (max-width:520px){ .eco-cards.eco-has-cols{ --eco-cols:1 !important; } }

.eco-card{
  border:1px solid var(--eco-border);border-radius:14px;
  padding:1.2em 1.3em;background:var(--eco-card-bg);
  box-shadow:0 1px 2px rgba(31,26,16,.03), 0 10px 22px -18px rgba(31,26,16,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.eco-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px -4px rgba(31,26,16,.12), 0 16px 30px -20px rgba(31,26,16,.3);}

.eco-card-head{display:flex;align-items:center;gap:.75em;margin-bottom:.6em}
.eco-card-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.eco-card-avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:16px;
}
.eco-card-author{font-weight:700;font-size:.96em;color:var(--eco-ink);}
.eco-card-date{font-size:.8em;opacity:.62}
.eco-card-stars{margin-bottom:.55em}
.eco-card-text{font-size:.92em;line-height:1.6;margin:0;opacity:.88;color:var(--eco-ink);}

/* ── Reseñas largas: colapsables con <details> nativo ──────────────────
   El texto completo SIEMPRE está en el HTML (Google y los motores de IA
   lo leen íntegro); solo se oculta visualmente. Se usa <details> en vez
   de CSS line-clamp porque los page builders con selectores de alta
   especificidad (Divi) anulaban la regla visual, y line-clamp además
   aplica por elemento, no al conjunto. Los !important son deliberados:
   estos widgets viven en sitios de clientes con temas impredecibles. */
.eco-card-more{margin:0;}
.eco-card-more > summary{
  display:block !important;list-style:none !important;cursor:pointer;
}
.eco-card-more > summary::-webkit-details-marker{display:none !important;}
.eco-card-more > summary::marker{content:"" !important;}
.eco-card-text-full{display:block;margin-top:0;}
/* Al abrir, la vista corta desaparece y queda solo el texto completo. */
.eco-card-more[open] > summary .eco-card-text-short{display:none !important;}
.eco-card-more-label{
  display:inline-block;margin-top:.55em;
  font-size:.85em;font-weight:700;color:var(--eco-accent);
}
.eco-card-more-label:hover{text-decoration:underline;}
.eco-card-more[open] .eco-card-more-label .eco-lbl-more{display:none !important;}
.eco-card-more:not([open]) .eco-card-more-label .eco-lbl-less{display:none !important;}
.eco-all-link{margin-top:1.1em;font-size:.9em}
.eco-all-link a{text-decoration:none;font-weight:700;color:var(--eco-accent);}
.eco-all-link a:hover{text-decoration:underline;}

/* v1.5.0 — página de evidencia */
.eco-pagination{display:flex;align-items:center;gap:1em;margin-top:1.3em;font-size:.92em}
.eco-pagination a{text-decoration:none;font-weight:700;color:var(--eco-accent);}
.eco-pagination-current{opacity:.65}

/* v1.5.0 — feedback privado (no-gating: el enlace público siempre visible) */
.eco-feedback{margin:1.6em 0;max-width:560px}
.eco-fb-intro{font-size:.95em;color:var(--eco-ink-soft);}
.eco-fb-label{display:block;margin:.85em 0;font-size:.95em}
.eco-fb-label textarea,.eco-fb-label input,.eco-fb-label select{
  display:block;width:100%;margin-top:.35em;padding:.6em .7em;
  border:1px solid var(--eco-border);border-radius:10px;font:inherit;
  background:#fff;
}
.eco-fb-submit{
  margin-top:.6em;padding:.75em 1.5em;border:0;border-radius:10px;
  background:var(--eco-accent);color:#fff;font-weight:700;cursor:pointer;
  transition:opacity .15s;
}
.eco-fb-submit:hover{opacity:.9;}
.eco-fb-submit:disabled{opacity:.55;cursor:wait}
.eco-fb-status{margin-left:.8em;font-size:.9em}
.eco-fb-public{margin-top:1.1em;font-size:.92em}
.eco-fb-public a{color:var(--eco-accent);font-weight:600;}

@media (prefers-reduced-motion:reduce){
  .eco-card{transition:none;}
}