/* ============================================================
   JUEGO DE VOCES — App Styles
   Device: Xiaomi POCO C71 (720×1640, 269 PPI, ~360px logical)
   WebView / Fully Kiosk compatible (-webkit- prefixes)
   ============================================================ */

/* --- @font-face: Ofelia Text (local) --- */
@font-face {
  font-family: 'Ofelia Text';
  src: url('../assets/ofelia_text_medium.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ofelia Text';
  src: url('../assets/ofelia_text_medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ofelia Text';
  src: url('../assets/ofelia_text_bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ofelia Text';
  src: url('../assets/ofelia_text_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables (from Design System) --- */
:root {
  --color-violet-50:  #F5EEFA;
  --color-violet-100: #E8D5F5;
  --color-violet-200: #D1ABEB;
  --color-violet-300: #BA80E0;
  --color-violet-400: #A856D6;
  --color-violet-500: #bb57f7;
  --color-violet-600: #8526DB;
  --color-violet-700: #6E1DB7;
  --color-violet-800: #571593;
  --color-violet-900: #862d7d;

  --color-gold-50:  #FFF9E6;
  --color-gold-100: #FFF0BF;
  --color-gold-200: #FFE080;
  --color-gold-300: #FFD040;
  --color-gold-400: #FFC20E;
  --color-gold-500: #F0A500;

  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E8E8E8;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-white:       #FFFFFF;

  --color-success: #10B981;
  --color-warning: #F59E0B;

  --font-display: 'Ofelia Text', sans-serif;
  --font-body:    'Ofelia Text', sans-serif;
  --font-mono:    'Ofelia Text', monospace;

  --shadow-sm: 0 2px 8px rgba(23, 23, 23, 0.08);
  --shadow-md: 0 4px 16px rgba(23, 23, 23, 0.10);

  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.22, 1.00, 0.36, 1);
}

/* --- Page Loader --- */
.page-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: #fee600;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
}

.page-loader.hide {
  opacity: 0;
  pointer-events: none;
}

.page-loader-logo {
  width: 248px;
  height: auto;
  -webkit-animation: loaderPulse 2s ease-in-out infinite;
  animation: loaderPulse 2s ease-in-out infinite;
}

@-webkit-keyframes loaderPulse {
  0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
  50%      { -webkit-transform: scale(1.15); transform: scale(1.15); }
}
@keyframes loaderPulse {
  0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
  50%      { -webkit-transform: scale(1.15); transform: scale(1.15); }
}

/* --- Entrance Animations --- */
.brand-section.animate-in {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

.question-banner h2 {
  overflow: hidden;
  border-right: 2px solid transparent;
}

.question-banner h2.typing {
  border-right-color: var(--color-white);
  -webkit-animation: blinkCursor 0.6s step-end infinite;
  animation: blinkCursor 0.6s step-end infinite;
}

.question-banner h2.typed {
  border-right-color: transparent;
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes blinkCursor {
  50% { border-right-color: transparent; }
}
@keyframes blinkCursor {
  50% { border-right-color: transparent; }
}

.option-card {
  opacity: 0;
  -webkit-transition: -webkit-transform 0.15s var(--ease-spring);
  transition: transform 0.15s var(--ease-spring);
}

.option-card.slide-from-left {
  -webkit-animation: slideFromLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation: slideFromLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.option-card.slide-from-right {
  -webkit-animation: slideFromRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation: slideFromRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@-webkit-keyframes slideFromLeft {
  from { opacity: 0; -webkit-transform: translateX(-60px); transform: translateX(-60px); }
  to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideFromLeft {
  from { opacity: 0; -webkit-transform: translateX(-60px); transform: translateX(-60px); }
  to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}

@-webkit-keyframes slideFromRight {
  from { opacity: 0; -webkit-transform: translateX(60px); transform: translateX(60px); }
  to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideFromRight {
  from { opacity: 0; -webkit-transform: translateX(60px); transform: translateX(60px); }
  to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-neutral-50);
  color: var(--color-neutral-800);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* --- App Shell --- */
.app-shell {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.background-diagonal {
  width: 100%;
  height: 100vh;
  background-image: url('../assets/v2/back.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Sponsor Header (Mercado Pago) --- */
.sponsor-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 32px 20px 12px 20px;
  background: transparent;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.sponsor-header img {
  width: 140px;
  height: auto;
}

/* --- Brand Section (JDV Logo) --- */
.brand-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 25px 16px 12px;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-section img {
  max-height: 180px;
  width: auto;
}

/* --- Question Banner (hidden in v2) --- */
.question-banner {
  display: none;
}

/* --- Option Grid --- */
.option-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 24px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

/* --- Option Card (image button) --- */
.option-card {
  padding: 0;
  text-align: center;
  display: block;
  width: 100%;
  max-width: 340px;
}

.option-card:active {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
}

.option-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Thank You Page --- */
.thankyou-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 24px 16px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.thankyou-message {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.voted-display {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.voted-display-img {
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.voted-display-img img {
  width: 100%;
  height: auto;
  display: block;
}

.voted-display-img .placeholder-icon {
  font-size: 64px;
  color: var(--color-white);
  -webkit-user-select: none;
  user-select: none;
}

.voted-display-name {
  display: none;
}

/* --- Countdown --- */
.countdown-section {
  width: 100%;
  padding: 0 24px;
  margin-top: auto;
  padding-bottom: 32px;
}

.countdown-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 10px;
}

.countdown-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-full);
  width: 100%;
  -webkit-transition: width 1s linear;
  transition: width 1s linear;
}

.countdown-fill.warning {
  background: var(--color-warning);
}

.countdown-fill.done {
  background: var(--color-success);
}

.countdown-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  letter-spacing: 0.01em;
}

.countdown-text.warning {
  color: var(--color-white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 700;
}

.countdown-text.done {
  color: var(--color-white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 700;
}

/* --- Footer --- */
.app-footer {
  padding: 12px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.footer-countdown {
  margin-bottom: 8px;
}