/* RT Habich - Reseñas y promoción flotante. Archivo aparte para no tocar estilos.css. */

/* ---------- Estrellas (solo visual) ---------- */
.estrellas { display: inline-flex; gap: 0.1rem; font-size: 1.15rem; line-height: 1; letter-spacing: 0; }
.estrellas__e { color: #c9d3de; }
.estrellas__e.es-llena { color: var(--color-amarillo-oscuro); }

/* ---------- Página /resena (QR) ---------- */
.seccion--resena { background: var(--color-fondo-suave); min-height: 70vh; }
.contenedor--estrecho { width: min(100% - 2rem, 38rem); margin-inline: auto; }
.resena-caja {
    padding: clamp(1.25rem, 5vw, 2.25rem);
    background: #fff; border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg); box-shadow: var(--sombra-md);
}
.resena-caja__titulo { font-family: var(--fuente-titulos); font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.25; color: var(--color-azul-900); margin-bottom: 0.6rem; }
.resena-caja .encabezado-seccion { margin-bottom: 1.5rem; }

.calificacion { border: 0; margin: 0; padding: 0; text-align: center; }
.calificacion__estrellas { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.calificacion__estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calificacion__estrellas label {
    margin: 0; padding: 0.1rem 0.2rem; cursor: pointer;
    font-size: clamp(2.6rem, 14vw, 3.4rem); line-height: 1; color: #c9d3de;
    transition: color 0.15s, transform 0.15s;
}
.calificacion__estrellas label:hover,
.calificacion__estrellas label:hover ~ label,
.calificacion__estrellas input:checked ~ label { color: var(--color-amarillo); }
.calificacion__estrellas label:hover { transform: scale(1.12); }
.calificacion__estrellas input:focus-visible + label { outline: 3px solid var(--color-azul-600); outline-offset: 2px; border-radius: 0.4rem; }
.calificacion__texto { min-height: 1.6em; margin-top: 0.4rem; font-weight: 700; color: var(--color-azul-700); }

.formulario select {
    display: block; width: 100%; padding: 0.8rem 1rem; background: #fff;
    border: 1.5px solid #b9c7d6; border-radius: var(--radio-sm); font: inherit;
}
.formulario select:focus { outline: none; border-color: var(--color-azul-600); box-shadow: 0 0 0 4px rgba(15, 103, 184, 0.18); }

.resena-gracias { text-align: center; display: grid; gap: 1rem; }
.resena-gracias__icono { font-size: 3.5rem; line-height: 1; color: var(--color-amarillo); }
.resena-gracias h2 { font-family: var(--fuente-titulos); color: var(--color-azul-900); }
.resena-gracias__google { padding: 1.1rem; background: var(--color-azul-50); border: 1px solid var(--color-azul-100); border-radius: var(--radio-md); display: grid; gap: 0.8rem; }
.resena-gracias__nota { font-size: 0.9rem; color: var(--color-exito); font-weight: 600; }

/* ---------- Opiniones publicadas ---------- */
.rejilla--resenas { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .rejilla--resenas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .rejilla--resenas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-resena {
    display: flex; flex-direction: column; gap: 0.8rem; padding: 1.4rem;
    background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-md); box-shadow: var(--sombra-sm);
}
.tarjeta-resena__texto { flex: 1; }
.tarjeta-resena__autor { font-size: 0.9rem; color: var(--color-texto-suave); }
.tarjeta-resena__autor strong { color: var(--color-azul-900); }
.resumen-resenas { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.resumen-resenas__nota { font-family: var(--fuente-titulos); font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--color-azul-900); }
.resena-invitacion { margin-top: 3rem; padding: 2rem 1.25rem; text-align: center; display: grid; justify-items: center; gap: 0.9rem; background: var(--color-azul-50); border-radius: var(--radio-lg); }
.resena-invitacion h2 { font-family: var(--fuente-titulos); color: var(--color-azul-900); }

/* ---------- Promoción flotante ---------- */
.promo[hidden] { display: none; }
.promo { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.promo__fondo { position: absolute; inset: 0; background: rgba(8, 47, 87, 0.6); animation: promo-fondo 0.3s ease both; }
.promo__caja {
    position: relative; width: min(100%, 26rem); max-height: calc(100vh - 2rem); overflow-y: auto;
    background: #fff; border-radius: var(--radio-lg); box-shadow: var(--sombra-lg);
    animation: promo-entrada 0.35s cubic-bezier(.2,.8,.2,1) both;
}
.promo__caja:focus { outline: none; }
.promo__imagen { width: 100%; height: auto; max-height: 14rem; object-fit: cover; }
.promo__cuerpo { padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: 0.7rem; text-align: center; }
.promo__etiqueta {
    justify-self: center; padding: 0.2rem 0.8rem; font-family: var(--fuente-titulos); font-size: 0.75rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-azul-900); background: var(--color-amarillo); border-radius: 999px;
}
.promo__titulo { font-family: var(--fuente-titulos); font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.2; color: var(--color-azul-900); }
.promo__texto { color: var(--color-texto-suave); }
.promo__vigencia { font-size: 0.85rem; font-weight: 700; color: var(--color-naranja); }
.promo__no { justify-self: center; padding: 0.4rem 0.8rem; background: none; border: 0; font: inherit; font-size: 0.9rem; color: var(--color-texto-suave); cursor: pointer; text-decoration: underline; }
.promo__cerrar {
    position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
    font-size: 1.7rem; line-height: 1; color: var(--color-azul-900); background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 50%; cursor: pointer; box-shadow: var(--sombra-sm);
}
.promo__cerrar:hover { background: #fff; }

/* Tarjeta en la esquina: no bloquea la página */
.promo--tarjeta { inset: auto auto 1rem 1rem; padding: 0; pointer-events: none; }
.promo--tarjeta .promo__fondo { display: none; }
.promo--tarjeta .promo__caja { width: min(calc(100vw - 2rem), 21rem); pointer-events: auto; animation-name: promo-tarjeta; }
.promo--tarjeta .promo__cuerpo { padding: 1.1rem; text-align: left; }
.promo--tarjeta .promo__etiqueta { justify-self: start; }
.promo--tarjeta .promo__no { justify-self: start; padding-left: 0; }
.promo--tarjeta .promo__imagen { max-height: 9rem; }

@keyframes promo-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes promo-entrada { from { opacity: 0; transform: translateY(1.5rem) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes promo-tarjeta { from { opacity: 0; transform: translateX(-1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo__fondo, .promo__caja { animation: none; } }

/* ---------- Invitaciones a calificar (inicio y pie) ---------- */
.seccion--califica { background: var(--color-azul-900); color: #fff; padding-block: clamp(2.5rem, 6vw, 4rem); }
.seccion--califica h2 { font-family: var(--fuente-titulos); color: #fff; margin: 0.4rem 0 0.8rem; }
.seccion--califica .encabezado-seccion__etiqueta { color: var(--color-amarillo); }
.califica__estrellas { display: flex; justify-content: center; gap: 0.2rem; margin-bottom: 0.8rem; }
.califica__estrellas a, .pie__estrellas a { text-decoration: none; line-height: 1; color: rgba(255,255,255,.35); transition: color .15s, transform .15s; }
.califica__estrellas a { font-size: clamp(2.8rem, 12vw, 3.8rem); padding: 0 0.15rem; }
.califica__estrellas:hover a, .pie__estrellas:hover a { color: var(--color-amarillo); }
.califica__estrellas a:hover ~ a, .pie__estrellas a:hover ~ a { color: rgba(255,255,255,.35); }
.califica__estrellas a:hover { transform: scale(1.15); }
.pie__resena { padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); }
.pie__estrellas { display: flex; gap: 0.2rem; }
.pie__estrellas a { font-size: 2rem; padding: 0 0.1rem; }