/* estilos.css — la rc (Review Conec): una tarjeta de una sola pantalla, sin scroll.
   Los colores de cada cliente vienen de datos.js (tema) y reemplazan estos. */

:root {
  --c-principal: #1F4D45; /* títulos y botón Enviar */
  --c-texto: #17201E;
  --c-pagina: #EEF1F0;    /* lo que rodea a la tarjeta */
  --c-marco: #2C3331;     /* borde y sombra de la tarjeta, como la de PVC */
  --c-estrella: #FFD21F;
  --c-estrella-apagada: #D8DCDB;
  --c-linea: #C9D2CF;

  --fuente: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tamaño de la tarjeta: en celular ocupa casi toda la pantalla;
     en computadora toma la forma de una tarjeta de presentación vertical (54 × 85.6 mm). */
  --margen: 12px;
  --alto: min(calc(100vh - 2 * var(--margen)), 940px);
  --ancho: min(calc(100vw - 2 * var(--margen)), calc(var(--alto) * 0.631));
}
@supports (height: 100dvh) {
  /* dvh = el alto real visible del celular (sin la barra del navegador) */
  :root { --alto: min(calc(100dvh - 2 * var(--margen)), 940px); }
}
@media (min-width: 700px) and (min-height: 560px) {
  :root { --margen: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--c-pagina);
  color: var(--c-texto);
  font-family: var(--fuente);
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--c-principal);
  outline-offset: 3px;
}

/* ── La tarjeta ─────────────────────────────────────── */

.tarjeta {
  width: var(--ancho);
  height: var(--alto);
  padding: clamp(8px, 2.6%, 14px);
  background: #fff;
  border: 2px solid var(--c-marco);
  border-radius: clamp(22px, 7%, 36px) / clamp(22px, 4.4%, 36px);
  box-shadow: 3px 6px 0 var(--c-marco), 0 18px 40px rgba(0, 0, 0, .12);
}

.panel {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: clamp(16px, 5.5%, 28px) / clamp(16px, 3.4%, 28px);
  overflow: hidden;
  background: #F4F6F5 center / cover no-repeat;
  /* Las medidas de adentro se calculan con el tamaño de la tarjeta (cqw = % del ancho, cqh = % del alto) */
  container-type: size;
}
/* Velo blanco sobre la foto para que se lea el texto */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .76);
}

.panel__centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(2.4cqh, 4cqw);
  padding: 8cqh 7cqw 2cqh;
  text-align: center;
  overflow: auto; /* solo por si alguien tiene la letra del celular gigante */
}

.panel__logo {
  width: min(78cqw, 340px);
  max-height: 20cqh;
  object-fit: contain;
  margin-bottom: 1.5cqh;
}
/* Logos con fondo blanco (JPG): "multiply" hace que el blanco desaparezca sobre la foto */
.panel__logo,
.panel__simbolo { mix-blend-mode: multiply; }

/* Símbolo + nombre al lado (cuando el logo es solo el dibujo) */
.panel__marca {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  margin-bottom: 1.5cqh;
}
.panel__simbolo {
  width: min(24cqw, 13cqh, 120px);
  height: auto;
}
.panel__marca-texto {
  margin: 0;
  max-width: 11ch;
  font-size: min(7.4cqw, 4cqh, 2.3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.01em;
  text-align: left;
  color: var(--c-principal);
}

.panel__nombre { /* si el cliente no tiene logo */
  margin: 0 0 1.5cqh;
  font-size: min(9cqw, 5cqh);
  font-weight: 800;
  color: var(--c-principal);
}

.panel__titulo {
  margin: 0;
  max-width: 22ch;
  font-size: min(6.6cqw, 3.6cqh, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-principal);
  text-wrap: balance;
}

.panel__pregunta {
  margin: 1cqh 0 0;
  font-size: min(4.8cqw, 2.6cqh, 1.35rem);
  font-weight: 700;
  color: var(--c-texto);
  opacity: .85;
}

.panel__pie {
  display: flex;
  justify-content: center;
  padding: 0 0 6cqh;
}

/* ── Estrellas ──────────────────────────────────────── */

.estrellas {
  display: flex;
  justify-content: center;
  gap: min(2cqw, 10px);
  margin: 0;
  padding: 1.5cqh 0 0;
  border: 0;
}
.estrellas legend { /* el texto "¿Cuántas estrellas nos das?" para lectores de pantalla */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.estrella {
  --i: 1;
  display: grid;
  place-items: center;
  width: min(15cqw, 9cqh, 76px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  /* La "ola": cada estrella se levanta un segundo después de la anterior (animación del dueño) */
  animation: ola 8s infinite ease-in-out;
  animation-delay: calc(var(--i) * 1s);
}
.estrella svg {
  width: 100%;
  height: 100%;
  fill: var(--c-estrella);
  filter: drop-shadow(0 2px 2px rgba(120, 80, 0, .28));
  transition: fill .15s, transform .15s;
}

@keyframes ola {
  0%, 40% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px) rotate(-10deg) scale(1.2);
    filter: blur(1px) brightness(180%);
  }
  30% {
    filter: blur(0) brightness(100%);
  }
}

/* En computadora: al pasar el mouse se iluminan hasta esa estrella y la ola se detiene */
@media (hover: hover) {
  .estrellas:hover .estrella { animation-play-state: paused; }
  .estrella:hover svg { transform: scale(1.12); }
  .estrella:hover ~ .estrella svg { fill: var(--c-estrella-apagada); }
}
.estrella:active svg { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .estrella { animation: none; }
}

/* ── Logo de Review Conec (pie de la tarjeta y de las ventanas) ── */

.marca {
  display: block;
  width: min(30cqw, 120px);
  opacity: .95;
}
.marca img { width: 100%; height: auto; }

/* ── Ventanas (1 a 4 estrellas / 5 estrellas) ───────── */

.ventana {
  width: var(--ancho);
  max-width: none;
  max-height: calc(100% - 2 * var(--margen));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--c-texto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: auto;
  overscroll-behavior: contain;
}
.ventana::backdrop {
  background: rgba(15, 20, 19, .62);
}
.ventana[open] { animation: aparecer .22s ease-out; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .ventana[open] { animation: none; }
}

.ventana__foto {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 19vh;
  object-fit: cover;
}

.ventana__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #222;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.ventana__cerrar svg { width: 22px; height: 22px; fill: currentColor; }

.ventana__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  text-align: center;
}

.ventana__titulo {
  margin: 0;
  font-size: clamp(1.3rem, 6vw, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-principal);
  text-wrap: balance;
}
.ventana__texto {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.35;
  text-wrap: balance;
}
.ventana__invitacion {
  margin: 0;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 700;
  color: #666;
  text-wrap: balance;
}

.mini-estrellas {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
}
.mini-estrellas svg { width: 32px; height: 32px; fill: var(--c-estrella); }
.mini-estrellas .apagada { fill: var(--c-estrella-apagada); }

/* Formulario privado (1 a 4) */
.formulario {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.campo span { /* escondida: el texto se ve dentro de la casilla */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.campo ::placeholder { color: #8A938F; opacity: 1; }
.campo input,
.campo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--c-linea);
  border-radius: 10px;
  background: #fff;
  color: var(--c-texto);
  font: inherit;
  font-size: 1rem; /* 16 px o más: así el iPhone no hace zoom al escribir */
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--c-principal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-principal) 22%, transparent);
}
.trampa { /* campo invisible: solo lo llenan los robots que mandan basura */
  position: absolute;
  left: -9999px;
}

.enviar {
  min-height: 50px;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--c-principal);
  color: #fff;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  cursor: pointer;
}
.enviar:hover { filter: brightness(1.12); }
.enviar:disabled { opacity: .7; cursor: progress; }

.aviso-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FDECEC;
  color: #8A1C1C;
  font-size: .95rem;
}

/* La salida a Google que ven también quienes eligen 1 a 4 (para no "filtrar" reseñas) */
.tambien-publico {
  margin: 4px 0 0;
  font-size: .95rem;
  color: #555;
}
.tambien-publico a {
  color: var(--c-principal);
  font-weight: 700;
}

.gracias-icono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-principal) 14%, #fff);
  color: var(--c-principal);
}
.gracias-icono svg { width: 34px; height: 34px; fill: currentColor; }

/* Botones de plataformas (5 estrellas) */
.plataformas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 8px 0 4px;
  padding: 0;
  list-style: none;
}
.plataforma {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 56px;
  border: 1.5px solid #9AA3A0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 4px 0 #9AA3A0;
  color: #222;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.plataforma:hover { transform: translateY(-1px); box-shadow: 2px 5px 0 #9AA3A0; }
.plataforma:active { transform: translateY(3px); box-shadow: 0 1px 0 #9AA3A0; }
.plataforma svg {
  position: absolute;
  left: 18px;
  width: 30px;
  height: 30px;
}