/* ============================================================
   /rateus — página de calificación Geravolt
   Diseño de estrellas basado en star-rating-iker-fill.html
   ============================================================ */
html { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
*, *:before, *:after { box-sizing: inherit; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1C212E;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #fff;
}

.gv-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 40px 24px;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.gv-logo {
  width: 200px;
  max-width: 70%;
  height: auto;
  opacity: .95;
}

.gv-greeting {
  margin: 0;
  color: #9aa3b8;
  font-size: 1.05rem;
}

.gv-question {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

/* ---- bloques de formulario / agradecimiento ---- */
#gv-form-area { width: 100%; }
#gv-form-area.hidden { display: none; }

#gv-low {
  display: none;
  width: 100%;
  margin-top: 6px;
  text-align: left;
}
#gv-low.visible { display: block; animation: gvFadeIn .35s ease; }
#gv-low label {
  display: block;
  margin-bottom: 8px;
  color: #9aa3b8;
  font-size: .95rem;
}
#gv-low textarea {
  width: 100%;
  background: #252b3b;
  border: 1px solid #353B4E;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
}
#gv-low textarea:focus { border-color: #FFED76; }
#gv-low textarea::placeholder { color: #5d6678; }

#gv-actions { display: none; margin-top: 18px; }
#gv-actions.visible { display: block; animation: gvFadeIn .35s ease; }

.gv-btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 13px 40px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gv-btn:hover { transform: translateY(-1px); }
.gv-btn:disabled { opacity: .55; cursor: default; transform: none; }

.gv-btn-send {
  background: #FFED76;
  color: #1C212E;
  box-shadow: 0 4px 14px rgba(255, 237, 118, .25);
}

.gv-btn-google {
  background: #fff;
  color: #1C212E;
  margin-top: 6px;
}

#gv-error {
  display: none;
  margin: 12px 0 0;
  color: #ff8a8a;
  font-size: .9rem;
}
#gv-error.visible { display: block; }

.gv-card {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #252b3b;
  border-radius: 16px;
  padding: 28px 26px;
  width: 100%;
}
.gv-card.visible { display: flex; animation: gvFadeIn .4s ease; }
.gv-card.gv-already { display: flex; }
.gv-card h1, .gv-card h2 { margin: 0; font-size: 1.4rem; }
.gv-card p { margin: 0; color: #9aa3b8; line-height: 1.45; }
.gv-emoji { font-size: 2.2rem; }

@keyframes gvFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Componente de estrellas (port fiel de star-rating-iker-fill)
   ============================================================ */
.rating {
  --active: #FFED76;
  --active-pale: rgba(255, 237, 118, .36);
  --inactive: #353B4E;
  --face-active: #121621;
  --face-inactive: #1C212E;
  display: flex;
  position: relative;
  margin: 6px 0;
}

.rating ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  color: var(--inactive);
}

.rating ul li {
  --face: var(--face-inactive);
  cursor: pointer;
  position: relative;
}

/* ojos ::before — ocultos por defecto, solo en .current */
.rating ul li:before,
.rating ul li:after {
  content: '';
  position: absolute;
  z-index: 3;
  transition: all .2s ease;
  opacity: 0;
}

.rating ul li:before {
  --r: 0deg;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  top: 15px;
  left: 13px;
  transform: rotate(var(--r));
  filter: drop-shadow(8px 0 0 var(--face));
}

/* sparkles span */
.rating ul li span.sparkle {
  width: 2px;
  height: 2px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  margin: -1px 0 0 -1px;
  transform: scale(.6);
  opacity: 0;
  z-index: 3;
  box-shadow:
    16px -16px 0 var(--active-pale),
    -16px -16px 0 var(--active-pale),
    -21px 8px 0 var(--active-pale),
    21px 8px 0 var(--active-pale),
    0 22px 0 var(--active-pale);
}

/* ---- bocas por posición ---- */
.rating ul li:nth-child(1):after {
  width: 10px; height: 10px;
  top: 20px; left: 13px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--face);
}
.rating ul li:nth-child(3):after {
  width: 6px; left: 15px; top: 20px;
  height: 1px;
  background: var(--face);
}
.rating ul li:nth-child(4):after {
  width: 10px; height: 10px;
  top: 12px; left: 13px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-bottom-color: var(--face);
}
.rating ul li:nth-child(5):after {
  width: 6px; height: 3px;
  left: 15px; top: 20px;
  border-radius: 0 0 3px 3px;
  background: var(--face);
}

/* ---- current: cara visible ---- */
.rating ul li.current { --face: var(--face-active); }
.rating ul li.current:before { opacity: 1; background: var(--face); }
.rating ul li.current:after  { opacity: 1; }
.rating ul li.current svg.star-main { color: var(--active); fill: rgba(0,0,0,.2); }

/* ---- ojos estrella 5 ---- */
.rating ul li:last-child:before {
  --r: -45deg;
  width: 3px; height: 3px;
  border-top: 1px solid var(--face);
  border-right: 1px solid var(--face);
  border-radius: 0 1px 0 0;
  left: 12px;
  background: transparent;
  filter: drop-shadow(6px 6px 0 var(--face));
}
.rating ul li:not(:last-child):before { background: var(--face); }
.rating ul li:not(:last-child) { margin: 0 16px 0 0; }
.rating ul li:not(:last-child).current:before { animation: blink 3s linear infinite; }

/* ---- SVG base ---- */
.rating svg {
  width: 36px;
  height: 34px;
  display: block;
  fill: rgba(0,0,0,.04);
}

/* fill progresivo por estrella */
.rating ul li .star-wrap {
  position: relative;
  width: 36px;
  height: 34px;
  display: block;
}

.rating ul li .star-bg {
  position: absolute;
  top: 0; left: 0;
  color: var(--inactive);
  transition: color .2s ease;
}

.rating ul li .star-fill {
  position: absolute;
  top: 0; left: 0;
  color: var(--active);
  fill: rgba(0,0,0,.2);
  clip-path: inset(0 100% 0 0);
  transition: none;
  pointer-events: none;
}

.rating ul li .star-fill.filled {
  clip-path: inset(0 0% 0 0);
}

.rating ul li.current .star-fill {
  clip-path: inset(0 0% 0 0);
}
.rating ul li.current .star-bg {
  color: var(--active);
}

/* hover glow — desactivado con .no-hover durante animación */
.rating:not(.no-hover) ul li:hover .star-bg {
  color: color-mix(in srgb, var(--active) 50%, var(--inactive));
  filter: drop-shadow(0 0 5px rgba(255,237,118,0.5));
}
.rating:not(.no-hover) ul li.hover-lit .star-bg {
  color: color-mix(in srgb, var(--active) 35%, var(--inactive));
}
.rating:not(.no-hover) ul li.hover-lit .star-fill.filled {
  clip-path: inset(0 0% 0 0);
}
.rating.no-hover ul li { cursor: default; }
.rating.no-hover ul li .star-bg { filter: none !important; }

/* animaciones específicas */
.rating ul li:nth-child(4).current { animation: active-4 .4s ease; }
.rating ul li:nth-child(4).current .sparkle { animation: active-span .32s ease; }
.rating ul li:nth-child(5).current { animation: active-5 .72s ease; }
.rating ul li:nth-child(5).current .sparkle { animation: active-span .32s ease; }

.rating ul li:not(.current) .star-wrap { transition: transform .2s ease; }
.rating ul li:not(.current):active .star-wrap { transform: scale(.9); }

/* ---- Div flotante ---- */
.rating > div {
  left: 0; top: 0;
  position: absolute;
  display: none;
  transform: translateX(var(--x));
  transition: transform .3s cubic-bezier(0, 0, 0.265, 1.1) .24s;
  z-index: 10;
}
.rating > div span { display: block; }
.rating > div span svg {
  color: var(--active);
  fill: rgba(0,0,0,.2);
}

.rating.animate-left > div,
.rating.animate-right > div { display: block; }

.rating.animate-left > div span,
.rating.animate-right > div span { animation: scale .28s linear .24s; }

.rating.animate-left li.move-to:before  { animation: move-to-left .31s ease .36s; }
.rating.animate-left li.move-from:before { animation: move-to-right .28s ease; }
.rating.animate-left > div              { animation: double-left .32s linear .24s; }
.rating.animate-left > div span svg     { animation: left .3s ease, right-end .4s ease .4s; }

.rating.animate-right li.move-to:before  { animation: move-to-right .31s ease .36s; }
.rating.animate-right li.move-from:before { animation: move-to-left .28s ease; }
.rating.animate-right > div              { animation: double-right .32s linear .24s; }
.rating.animate-right > div span svg     { animation: right .3s ease, left-end .4s ease .4s; }

/* ======================== KEYFRAMES ======================== */
@keyframes active-4 { 40% { transform: scale(1.25); } }
@keyframes active-span {
  60%  { opacity: 1; }
  100% { transform: scale(1.16); opacity: 0; }
}
@keyframes active-5 {
  15%  { transform: rotate(180deg) scale(1.1); }
  30%  { transform: rotate(360deg) scale(1.2); }
  70%  { transform: rotate(360deg) translateY(14%) scaleY(.72); }
  100% { transform: rotate(360deg); }
}
@keyframes double-right {
  60% { filter: drop-shadow(-5px 0 1px var(--active-pale)) drop-shadow(4px 0 1px var(--active-pale)); }
}
@keyframes scale {
  60% { transform: scaleX(1.32); filter: blur(.5px); }
}
@keyframes blink {
  0%, 5%, 15%, 100% { transform: scaleY(1); }
  10% { transform: scaleY(.4); }
}
@keyframes double-left {
  60% { filter: drop-shadow(5px 0 1px var(--active-pale)) drop-shadow(-4px 0 1px var(--active-pale)); }
}
@keyframes right {
  0%, 100% { transform-origin: 17% 100%; }
  50% { transform: rotate(-12deg) skewX(12deg); }
}
@keyframes left {
  0%, 100% { transform-origin: 83% 100%; }
  50% { transform: rotate(12deg) skewX(-12deg); }
}
@keyframes right-end {
  0%, 100% { transform-origin: 17% 100%; }
  40%  { transform: rotate(-6deg) skewX(4deg) scaleX(.92); }
  70%  { transform: rotate(1deg) skewX(-8deg) scaleX(1.04); }
}
@keyframes left-end {
  0%, 100% { transform-origin: 83% 100%; }
  40%  { transform: rotate(6deg) skewX(-4deg) scaleX(.92); }
  70%  { transform: rotate(-1deg) skewX(8deg) scaleX(1.04); }
}
@keyframes move-to-right {
  40% { transform: translateX(3px) rotate(var(--r)); }
}
@keyframes move-to-left {
  40% { transform: translateX(-3px) rotate(var(--r)); }
}