@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/poppins-v24-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/poppins-v24-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/poppins-v24-latin-900.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/dancing-script-v29-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/dancing-script-v29-latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/press-start-2p-v16-latin-regular.woff2') format('woff2');
}

:root {
  font-family: 'Poppins', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --pink-light: #FF9999;
  --pink-deep: #FF1493;
  --pink-dark: #C71585;
  --pink-border: #ff6b9d;
  --pink-dark-soft: #E8A6B8;
  --gold: #E89B9B;
  --gold-dark: #D68585;
  --gold-light: #F2BFBF;
  --gold-text: #C9A962;
  --cream: #FDF8F3;
  --black: #000;
  --gray-dark: #333;
  --gray-text: #1f2937;
  --gray-medium: #6B6B6B;
  --gray-light: #999;
  --min-height-xs: 40px;
  --min-height-sm: 80px;
  --min-height-standard: 120px;
  --min-height-md: 180px;
  --min-height-lg: 200px;
  --min-height-xl: 220px;
  --min-height-2xl: 300px;
  --card-accordion-h: 16rem;
  --shadow-retro: 4px 4px 0px var(--black);
  --shadow-retro-sm: 2px 2px 0px var(--black);
  --shadow-retro-pink: 4px 4px 0px var(--pink-dark);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-pink-glow: 0 4px 12px rgba(255, 20, 147, 0.3);
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

#root {
  margin: 0;
}

appkit-modal, w3m-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  z-index: 9999 !important;
}

body {
  @apply w-full mx-auto text-center flex flex-col;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 80rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#content-portal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

#footer-portal {
  flex-shrink: 0;
  background: white;
  min-height: 56px;
  padding-bottom: 0;
  margin-top: auto;
}

@media (max-width: 639px) {
  .ios #footer-portal {
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 639px) {
    #footer-portal {
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }
  }
}

.sticky-nav-footer #navbar-portal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: white;
}

.sticky-nav-footer #footer-portal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
}

.sticky-nav-footer #content-portal {
  padding-top: 0;
  padding-bottom: 56px;
}

.puentes-sticky-header {
  position: fixed;
  top: calc(47px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 95;
  background: white;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.puentes-sticky-header .steps-breadcrumb {
  margin-top: 0;
}

.puentes-sticky-header .vale-header {
  background: linear-gradient(180deg, #FFF5F7 0%, #FFFFFF 100%);
  padding-bottom: 4px;
  margin-top: 0;
}

.sticky-nav-footer .puentes-lista {
  margin-top: calc(159px + env(safe-area-inset-top, 0px));
}

.layout-content-wrapper {
  @apply max-w-7xl w-full mx-auto flex flex-col flex-1;
}

.page-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

h1 {
  @apply text-5xl leading-tight;
}

h2 {
  @apply text-2xl leading-tight;
}

input:not([type="checkbox"]):not([type="radio"]) {
  @apply p-1 border rounded-md border-pink-200;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:not([type="checkbox"]):not([type="radio"]):focus {
  @apply border-pink-400;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 182, 193, 0.4);
}

canvas {
  @apply block w-full;
}

button {
  @apply rounded-[50px];
}

.canvas-puente {
  @apply w-full border-0 mb-0;
  touch-action: none;
  border-top: 2px solid #999;
}

.canvas-zona {
  @apply w-full mt-0 mb-5;
  border: 2px solid var(--gold-text);
  border-top: none;
}

.font-handwritten {
  font-family: 'Dancing Script', 'Caveat', cursive;
}

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes expandIn {
  from {
    opacity: 0;
    transform: scaleY(0.95);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes parpadeo-parcela {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slot-flip {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(180deg);
  }
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shine {
  from {
    left: -100%;
  }

  to {
    left: 200%;
  }
}

@keyframes floatLock {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slot-spin {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(-180deg);
  }
}

@keyframes candadoEntrada {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes pointer-move {

  0%,
  100% {
    left: 0;
  }

  50% {
    left: calc(100% - 28px);
  }
}

@layer components {
  .spaced-div {
    @apply pt-0.5 mt-0.5 sm:pt-1 sm:mt-1 md:pt-1.5 md:mt-1.5 lg:pt-2 lg:mt-2;
  }

  .btn-base {
    @apply inline-flex items-center justify-center rounded-md whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-150 gap-2;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-sm gap-2;
  }

  .btn-md {
    @apply px-6 py-3 text-base gap-2;
  }

  .btn-lg {
    @apply px-7 py-3.5 text-lg gap-2;
  }

  .btn-icon {
    @apply p-1 gap-0;
  }

  .btn-primary {
    @apply text-gray-700 font-normal border-2 text-sm;
    border-color: var(--pink-dark-soft);
    background-color: transparent;
    box-shadow: 2px 2px 0px var(--pink-dark-soft);
    transition: all 150ms ease;
  }

  .btn-primary:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--pink-dark-soft);
    background-color: var(--pink-light);
  }

  .btn-hero {
    @apply text-white font-bold text-lg px-8 py-4;
    background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
    border: 3px solid var(--pink-dark);
    box-shadow: 4px 4px 0px var(--black), 0 8px 20px rgba(199, 21, 133, 0.4);
    transition: all 200ms ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .btn-hero:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--black), 0 4px 12px rgba(199, 21, 133, 0.3);
    background: linear-gradient(135deg, var(--pink-dark) 0%, var(--pink-deep) 100%);
  }

  .btn-hero:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--black);
  }

  .btn-secondary {
    @apply bg-gray-300 text-gray-800 hover:bg-gray-400;
  }

  .btn-pink {
    @apply bg-rose-200 text-rose-900 hover:bg-rose-300;
  }

  .btn-cancel {
    @apply bg-gray-500 text-white hover:bg-gray-600 font-medium;
  }

  .btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600;
  }

  .btn-outline {
    @apply border-2 border-gray-300 text-gray-700 hover:bg-gray-100;
  }

  .btn-google {
    @apply bg-white text-[#3C4043] text-sm border border-gray-300 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-blue-500/40;
  }

  .btn-icon-delete {
    @apply text-red-600 hover:bg-red-50 border-0 shadow-none;
  }

  .btn-icon-view {
    @apply text-rose-400 hover:text-rose-600 hover:bg-rose-50 border-0 shadow-none;
  }

  .btn-icon-edit {
    @apply text-blue-400 hover:text-blue-600 hover:bg-blue-50 border-0 shadow-none;
  }

  .btn-icon-generic {
    @apply text-gray-400 hover:text-gray-600 hover:bg-gray-50 border-0 shadow-none;
  }

  .btn-expand {
    @apply bg-gradient-to-r from-pink-500 to-pink-600 text-white font-bold border border-pink-700/20;
    box-shadow: 4px 4px 0px rgba(219, 39, 119, 0.3);
    transition: all 150ms ease;
  }

  .btn-expand:hover {
    @apply from-pink-600 to-pink-700;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(219, 39, 119, 0.3);
  }

  .btn-expand svg {
    @apply w-5 h-5 transition-transform duration-300;
  }

  .btn-expand-icon {
    @apply w-4 h-4 transition-transform duration-300;
  }

  .btn-expand-icon--rotated {
    transform: rotate(180deg);
  }

  .btn-expand--expanded svg {
    @apply rotate-180;
  }

  .bridge-cta {
    @apply w-full bg-gradient-to-b from-white to-pink-50 border-t-2 border-b border-pink-300 shadow-sm px-3 py-2 sm:px-6 sm:py-4;
  }

  .bridge-cta__row {
    @apply grid items-center gap-2 grid-cols-1 sm:grid-cols-[1fr_auto] sm:gap-4;
  }

  .bridge-cta__text {
    @apply text-center sm:text-left;
  }

  .bridge-cta__headline {
    @apply text-xs sm:text-base font-semibold text-gray-900 leading-tight;
  }

  .bridge-cta__subline {
    @apply text-xs sm:text-sm text-gray-600 font-medium;
  }

  .bridge-cta__subline-row {
    @apply flex flex-col sm:flex-row items-center justify-center sm:justify-start gap-0.5 sm:gap-1 leading-tight mt-0.5;
  }

  .bridge-cta__buttons {
    @apply w-full grid grid-cols-1 gap-2 sm:flex sm:justify-end sm:gap-3 sm:w-auto;
  }

  .bridge-cta__buttons>button {
    @apply btn-sm w-full px-3 py-2 text-xs sm:text-sm font-semibold min-h-[2rem];
  }

  .bridge-cta--tight {
    @apply gap-1;
  }

  .card-header {
    @apply flex w-full px-3 py-2 border-b-2 border-black;
    min-height: 3rem;
  }

  .card-header>div {
    @apply w-full;
  }

  .card-header-neutral {
    @apply card-header bg-gray-50;
  }

  .card-header-info {
    @apply card-header bg-blue-50;
  }

  .card-header-warning {
    @apply card-header bg-amber-50;
  }

  .card-header-rose {
    @apply card-header bg-pink-50;
  }

  .card-body {
    @apply p-3 sm:p-4 flex flex-col gap-2;
    flex: 0 0 auto;
  }

  .card-footer {
    @apply flex items-center justify-start px-3 py-1 text-xs text-gray-600 border-t-2 border-black bg-gray-50;
    column-gap: 0.5rem;
    min-height: 2.75rem;
    margin-top: auto;
  }

  .card-footer>* {
    @apply relative;
  }

  .card-footer button,
  .card-footer a {
    @apply gap-0 flex items-center justify-center text-center gap-2 px-2 py-1 w-full sm:w-auto text-xs sm:text-sm;
    min-height: 2rem;
  }

  .card-footer--two {
    @apply flex flex-col gap-1 px-0;
  }

  .card-footer--two>*::after {
    content: none;
  }

  .card-footer--two> :not(.card-footer-badge) {
    @apply grid grid-cols-2 gap-0.5 w-full px-1 pt-1;
  }

  .card-footer--two> :not(.card-footer-badge) button,
  .card-footer--two> :not(.card-footer-badge) a {
    @apply w-full px-2;
    font-size: 10px;
  }

  .card-footer-badge {
    @apply flex justify-center pt-1 whitespace-nowrap;
  }

  .card-accordion {
    @apply max-h-0 opacity-0 overflow-hidden;
    transition: max-height 300ms ease, opacity 300ms ease;
  }

  .card-accordion-inner {
    min-height: var(--card-accordion-h);
  }

  .card-footer-status {
    @apply w-full text-center py-1 text-xs font-semibold border-t-2 border-black -mx-2 -mb-1.5 mt-1 whitespace-nowrap;
    width: calc(100% + 1rem);
  }

  .card-footer-status--neutral {
    @apply bg-gray-100 text-gray-700;
  }

  .card-footer-status--info {
    @apply bg-blue-100 text-blue-800;
  }

  .card-footer-status--warning {
    @apply bg-amber-100 text-amber-800;
  }

  .card-footer-status--success {
    @apply bg-emerald-100 text-emerald-800;
  }

  .card-footer--neutral {
    @apply bg-gray-100;
  }

  .card-footer--info {
    @apply bg-blue-100;
  }

  .card-footer--warning {
    @apply bg-amber-100;
  }

  .card-footer--success {
    @apply bg-emerald-100;
  }

  .card-social-icons {
    @apply flex justify-center gap-4 py-1.5 bg-white text-black;
    position: relative;
    margin-top: 0;
  }

  .card-social-icons::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: black;
  }

  .card-social-icons a svg {
    @apply w-5 h-5 transition-colors duration-200;
  }

  .card-social-icons a:hover svg {
    @apply text-pink-500;
  }

  .section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin-top: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #9d174d;
    background: #fce7f3;
    border: none;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    transition: all 0.15s ease;
  }

  .section-toggle:hover {
    background: #fbcfe8;
  }

  .section-toggle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    background: var(--pink-deep);
    color: white;
  }

  .user-tabs {
    @apply w-full;
  }

  .user-tabs__nav {
    display: flex;
    background: #fce7f3;
    border-top: 1px solid black;
    border-bottom: 2px solid black;
  }

  .user-tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    background: #fce7f3;
    color: #9d174d;
    border: none;
    border-right: 1px solid #f9a8d4;
    border-radius: 0;
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .user-tabs__tab:last-child {
    border-right: none;
  }

  .user-tabs__tab:hover {
    background: #fbcfe8;
    color: #831843;
  }

  .user-tabs__tab--active {
    background: white;
    color: var(--pink-deep);
    font-weight: 600;
  }

  .user-tabs__tab--active:hover {
    background: white;
  }

  .user-tabs__badge {
    font-size: 11px;
    font-weight: 600;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f9a8d4;
    color: #831843;
  }

  .user-tabs__tab--active .user-tabs__badge {
    background: var(--pink-deep);
    color: white;
  }

  .user-tabs__icon {
    display: none;
  }

  .user-tabs__content {
    background: white;
    padding: 16px;
  }

  .user-tabs__empty {
    @apply flex flex-col items-center justify-center gap-3;
    text-align: center;
    padding: 32px 16px;
    color: #6b7280;
  }

  .user-tabs__empty-icon {
    @apply w-12 h-12 text-pink-300;
  }

  .user-tabs--mobile {
    margin-top: 0;
  }

  .user-tabs__nav--mobile {
    display: flex;
    background: #fce7f3;
    border-top: 1px solid black;
    border-bottom: 2px solid black;
  }

  .user-tabs__tab--mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    background: #fce7f3;
    color: #9d174d;
    border: none;
    border-right: 1px solid #f9a8d4;
    border-radius: 0;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .user-tabs__tab--mobile:last-child {
    border-right: none;
  }

  .user-tabs__tab--mobile .user-tabs__icon {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }

  .user-tabs__tab--mobile .user-tabs__badge {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .user-tabs__tab--mobile.user-tabs__tab--active {
    background: white;
    color: var(--pink-deep);
    font-weight: 600;
  }

  .user-tabs__content--mobile {
    background: white;
    padding: 8px;
  }

  .mis-vales-container {
    @apply space-y-6 p-4;
  }

  .mis-vales-header {
    @apply p-4 bg-gradient-to-r from-pink-50 to-white rounded-xl border border-pink-100;
  }

  .mis-vales-checkbox {
    @apply flex items-center gap-3 text-sm text-gray-700 cursor-pointer font-medium;
  }

  .mis-vales-checkbox input {
    all: unset;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border: 2px solid var(--pink-deep);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mis-vales-checkbox input:checked {
    background-color: var(--pink-deep);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mis-vales-grid {
    @apply grid gap-2;
    grid-template-columns: repeat(2, 1fr);
  }

  .vale-card {
    @apply relative overflow-hidden bg-white rounded-lg border border-pink-200 shadow-sm transition-all duration-200;
  }

  .vale-card:hover {
    @apply shadow-md border-pink-300;
  }

  .vale-card__header {
    @apply px-2 py-1.5 bg-gradient-to-r from-pink-100 to-pink-50 border-b border-pink-200;
  }

  .vale-card__bridge {
    @apply text-xs font-semibold text-gray-800 flex items-center gap-1 truncate;
  }

  .vale-card__bridge-icon {
    @apply w-3.5 h-3.5 flex-shrink-0 text-pink-500;
  }

  .vale-card__body {
    @apply p-2;
  }

  .vale-card__code {
    @apply text-xs font-mono text-pink-600 bg-pink-50 px-2 py-1.5 rounded border border-pink-100 text-center tracking-wider;
  }

  .vale-card__message {
    @apply text-sm text-gray-600 mt-1 truncate text-center;
    font-family: 'Dancing Script', cursive;
  }

  .vale-card__used {
    @apply text-xs text-gray-500 italic flex items-center gap-1 mt-2;
  }

  .vale-card__used::before {
    content: '✓';
    @apply text-emerald-500 font-bold;
  }

  .vale-card__actions {
    @apply flex items-center justify-center mt-2 pt-2 w-full border-t border-pink-100 bg-pink-50/50 -mx-2 px-2 -mb-2 pb-2;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: calc(100% + 1rem);
  }

  .vale-card__actions .btn-outline {
    @apply w-full justify-center;
  }

  .vale-card__use {
    @apply flex items-center gap-1 text-xs text-gray-700 cursor-pointer leading-none;
    height: 24px;
  }

  .vale-card__divider {
    @apply leading-none;
    color: var(--pink-deep);
    height: 24px;
    display: flex;
    align-items: center;
  }

  .vale-card__share {
    @apply flex items-center justify-center gap-4 mt-2 text-black;
  }

  .vale-card__share-btn {
    @apply p-0 border-0 bg-transparent cursor-pointer text-black;
  }

  .vale-card__use input {
    all: unset;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border: 2px solid var(--pink-deep);
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .vale-card__use input:checked {
    background-color: var(--pink-deep);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .vale-card__share-icon {
    @apply flex items-center justify-center w-9 h-9 rounded-full text-gray-500 bg-gray-100 transition-all duration-200;
  }

  .vale-card__share-icon:hover {
    @apply bg-gray-200;
  }

  .vale-card__share-icon svg {
    @apply w-4 h-4;
  }

  button.vale-card__share-icon {
    @apply p-0 border-0;
    min-width: 24px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
  }

  .vale-card__share-icon--whatsapp {
    @apply text-green-600 bg-green-50;
  }

  .vale-card__share-icon--whatsapp:hover {
    @apply bg-green-100;
  }

  .vale-card__share-icon--telegram {
    @apply text-sky-600 bg-sky-50;
  }

  .vale-card__share-icon--telegram:hover {
    @apply bg-sky-100;
  }

  .vale-card--pending {
    @apply border-emerald-300;
  }

  .vale-card--pending .vale-card__header {
    @apply bg-gradient-to-r from-emerald-100 to-emerald-50 border-emerald-200;
  }

  .vale-card--pending .vale-card__bridge::before {
    @apply bg-emerald-500;
  }

  .vale-card--pending .vale-card__code {
    @apply text-emerald-600 bg-emerald-50 border-emerald-100;
  }

  .vale-card--consumed {
    @apply border-gray-200 opacity-60;
  }

  .vale-card--consumed .vale-card__header {
    @apply bg-gradient-to-r from-gray-100 to-gray-50 border-gray-200;
  }

  .vale-card--consumed .vale-card__bridge::before {
    @apply bg-gray-400;
  }

  .vale-card--consumed .vale-card__code {
    @apply text-gray-500 bg-gray-50 border-gray-200;
  }

  @media (min-width: 640px) {
    .mis-vales-grid {
      @apply gap-3;
      grid-template-columns: repeat(4, 1fr);
    }

    .vale-card__header {
      @apply px-3 py-2;
    }

    .vale-card__bridge {
      @apply text-sm gap-2;
    }

    .vale-card__bridge::before {
      @apply w-2 h-2;
    }

    .vale-card__body {
      @apply p-3;
    }

    .vale-card__code {
      @apply text-sm px-3 py-2;
    }

    .vale-card__used {
      @apply text-sm gap-2 mt-3;
    }

    .vale-card__actions {
      @apply mt-3;
    }

    .vale-card__use {
      @apply text-sm gap-2;
      height: 28px;
    }

    .vale-card__divider {
      height: 28px;
    }

    .vale-card__share {
      @apply gap-3;
    }

    .vale-card__use input {
      width: 16px;
      height: 16px;
      min-width: 16px;
      min-height: 16px;
    }

    .vale-card__share-icon {
      @apply w-10 h-10;
    }

    .vale-card__share-icon svg {
      @apply w-5 h-5;
    }
  }

  @media (min-width: 1024px) {
    .mis-vales-grid {
      @apply gap-4;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .vale-card__header {
      @apply px-4 py-3;
    }

    .vale-card__body {
      @apply p-4;
    }

    .vale-card__actions {
      @apply mt-4 pt-3 pb-3;
      margin-left: -1rem;
      margin-right: -1rem;
      margin-bottom: -1rem;
      padding-left: 1rem;
      padding-right: 1rem;
      width: calc(100% + 2rem);
    }

    .vale-card__use {
      height: 32px;
    }

    .vale-card__divider {
      height: 32px;
    }

    .vale-card__share-icon {
      @apply w-11 h-11;
    }

    .vale-card__share-icon svg {
      @apply w-5 h-5;
    }
  }

  .mis-vales-section-title {
    @apply text-base font-bold text-gray-800 mb-4 mt-6 first:mt-0 flex items-center gap-2;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pink-deep);
  }

  .mis-vales-section-title::before {
    content: '';
    @apply w-1 h-5 bg-pink-500 rounded-full;
  }

  .debug-info {
    @apply mt-4 p-3 bg-gray-900 text-green-400 rounded-lg text-left text-xs overflow-x-auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  }

  .debug-info pre {
    @apply whitespace-pre-wrap break-all m-0;
    line-height: 1.4;
  }

  .debug-info summary {
    @apply cursor-pointer text-yellow-400 font-bold mb-2;
  }

  .debug-info details {
    @apply mb-2;
  }

  .auth-banner {
    @apply flex items-center justify-center gap-3 px-4 py-2;
    background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
    border-bottom: 2px solid var(--pink-deep);
  }

  .auth-banner--connected {
    @apply py-1.5;
    background: transparent;
    border-bottom: 1px solid rgba(255, 20, 147, 0.2);
  }

  .auth-banner__text {
    @apply text-xs font-medium text-gray-600 hidden sm:block;
  }

  .auth-banner__buttons {
    @apply flex items-center gap-2;
  }

  .auth-banner__wallet-btn {
    @apply flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium;
    background: white;
    color: var(--gray-dark);
    border: 1.5px solid #e0e0e0;
    border-radius: 4px;
    transition: all 150ms ease;
    height: 40px;
    min-width: 160px;
  }

  .auth-banner__wallet-btn:hover {
    border-color: var(--pink-deep);
    background: #fff5f8;
  }

  .auth-banner__wallet-btn svg {
    @apply w-3.5 h-3.5;
    color: var(--pink-deep);
  }

  .auth-banner__buttons .auth-button-google,
  .auth-banner__buttons>div:first-child {
    @apply flex items-center;
  }

  .auth-banner__buttons iframe {
    height: 40px !important;
  }

  .mis-nft-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: start;
  }

  .mis-nft-grid .card {
    font-size: 13px;
  }

  .mis-nft-grid .card-body {
    padding: 0 !important;
    gap: 0 !important;
  }

  .mis-nft-grid .flip-container-compact,
  .mis-nft-grid .flip-container-square {
    margin: 0;
  }

  .mis-nft-grid .slot-box-image {
    padding: 0;
  }

  .mis-nft-grid .card-footer {
    padding: 8px;
  }

  .mis-nft-grid .bridge-card__cta {
    font-size: 11px;
    padding: 6px 10px;
  }

  .mis-nft-grid .user-price-input-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .mis-nft-grid .user-receive-info-wrapper {
    padding-top: 8px;
    padding-bottom: 4px;
  }

  @media (min-width: 768px) {
    .mis-nft-grid {
      gap: 16px;
    }

    .mis-nft-grid .card {
      font-size: inherit;
    }

    .mis-nft-grid .card-body {
      padding: 0 !important;
      display: block !important;
      gap: 0 !important;
    }

    .mis-nft-grid .flip-container-square {
      border-bottom: 2px solid black;
    }

    .mis-nft-grid .user-price-input-wrapper {
      margin: 0;
      padding: 8px;
    }

    .mis-nft-grid .user-receive-info-wrapper {
      margin: 0;
      padding: 0 8px 8px 8px;
    }

    .mis-nft-grid .card-footer {
      padding: revert;
    }

    .mis-nft-grid .bridge-card__cta {
      font-size: inherit;
      padding: revert;
    }
  }

  @media (min-width: 1024px) {
    .mis-nft-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .mis-nft-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .mis-nft-grid--list {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin: 0 auto;
  }

  .mis-nft-grid--list .card {
    font-size: inherit;
  }

  .mis-nft-grid--list .card-body {
    padding: revert;
    padding-bottom: 12px;
  }

  .mis-nft-grid--list .card-footer {
    padding: revert;
  }

  .mis-nft-grid--list .bridge-card__cta {
    font-size: inherit;
    padding: revert;
  }

  .mis-nft-grid--list .card-footer--two> :not(.card-footer-badge) button {
    font-size: inherit;
    padding: revert;
  }

  .mis-nft-view-toggle {
    @apply p-1.5 flex items-center justify-center rounded-md ml-2 transition-colors;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: var(--pink-deep);
  }

  .mis-nft-view-toggle:hover {
    background: #f3f4f6;
  }

  .mis-nft-container {
    width: 100%;
    padding: 8px;
  }

  @media (min-width: 768px) {
    .mis-nft-container {
      padding: 16px;
    }
  }

  .mis-nft-filter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
  }

  .mis-nft-filter__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: white;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .mis-nft-filter__btn > span:first-of-type {
    display: inline;
    flex: 1;
    text-align: left;
  }

  .mis-nft-filter__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    opacity: 0.6;
    transition: opacity 0.15s ease;
  }

  .mis-nft-filter__btn:hover {
    border-color: #f9a8d4;
  }

  .mis-nft-filter__btn:hover .mis-nft-filter__icon {
    opacity: 1;
  }

  .mis-nft-filter__btn--active {
    border-color: var(--pink-deep);
    color: var(--pink-deep);
  }

  .mis-nft-filter__btn--active .mis-nft-filter__icon {
    opacity: 1;
    color: var(--pink-deep);
  }

  .mis-nft-filter__count {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin-left: auto;
    padding: 0;
    background: none;
    min-width: auto;
    border-radius: 0;
  }

  .mis-nft-filter__btn:hover .mis-nft-filter__count {
    color: #9d174d;
    background: none;
  }

  .mis-nft-filter__btn--active .mis-nft-filter__count {
    color: var(--pink-deep);
    background: none;
  }

  .mis-nft-filter-sort {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 3px;
    background: #e5e7eb;
    border-radius: 10px;
    padding: 4px;
  }

  .mis-nft-filter-sort__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    font-weight: 500;
  }

  .mis-nft-filter-sort__btn svg {
    flex-shrink: 0;
  }

  .mis-nft-filter-sort__btn:hover {
    color: #9d174d;
    background: rgba(255, 255, 255, 0.5);
  }

  .mis-nft-filter-sort__btn--active {
    background: white;
    color: var(--pink-deep);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .mis-nft-filter-sort__count {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.12);
    padding: 2px 6px;
    border-radius: 10px;
  }

  .mis-nft-filter-sort__btn--active .mis-nft-filter-sort__count {
    background: rgba(255, 20, 147, 0.15);
  }

  .mis-nft-filter-sort__sep {
    width: 2px;
    height: 24px;
    background: #9ca3af;
    flex-shrink: 0;
    border-radius: 1px;
  }

  .mis-nft-empty {
    text-align: center;
    padding: 24px 16px;
    color: #6b7280;
    font-style: italic;
    font-size: 13px;
  }

  @media (min-width: 640px) {
    .mis-nft-filter {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px;
      margin-bottom: 16px;
      padding-bottom: 16px;
    }

    .mis-nft-filter__btn {
      flex: 0 0 auto;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
    }

    .mis-nft-filter__icon {
      width: 16px;
      height: 16px;
    }

    .mis-nft-filter__count {
      font-size: 12px;
    }

    .mis-nft-filter-sort {
      grid-column: auto;
      margin-left: 0;
    }

    .mis-nft-empty {
      padding: 32px 16px;
      font-size: 14px;
    }
  }

  .cart-container {
    @apply max-w-4xl space-y-2 pt-2 pb-4 sm:px-0;
    padding-left: 2px;
    padding-right: 2px;
    margin-left: auto;
    margin-right: auto;
  }

  .cart-empty-state {
    @apply flex flex-col items-center justify-center bg-gradient-to-br from-gray-50 to-pink-50/30 rounded-xl border border-gray-200 p-12 text-center;
  }

  .cart-empty-icon {
    @apply text-6xl text-gray-300 mb-4;
  }

  .cart-empty-title {
    @apply text-xl font-bold text-gray-700 mb-2;
  }

  .cart-empty-subtitle {
    @apply text-sm text-gray-500;
  }

  .cart-item {
    @apply bg-white rounded-lg overflow-hidden transition-all duration-200 relative;
    border: 2px solid rgba(0, 0, 0, 0.06);
  }

  .cart-item:hover {
    @apply border-pink-200;
  }

  .cart-item--selected {
    @apply bg-white;
    border-color: rgba(244, 114, 182, 0.4);
  }

  .cart-item--unselected {
    @apply opacity-50;
  }

  .cart-item--unselected .cart-item-content {
    pointer-events: none;
  }

  .cart-item--unselected .cart-delete-btn {
    pointer-events: none;
  }

  .cart-header {
    @apply flex items-center px-2.5 py-1.5 border-b border-pink-100 gap-2;
    background-color: #fff5f8;
  }

  .cart-header .cart-delete-btn {
    margin-left: auto;
  }

  .cart-action-badge--clickable {
    cursor: pointer;
  }

  .cart-action-badge--clickable:hover {
    filter: brightness(0.95);
  }

  .cart-action-badge--white {
    @apply bg-white text-pink-600 border-pink-300;
  }

  input[type="checkbox"].cart-checkbox-inline {
    all: unset;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1.5px solid var(--pink-deep);
    background-color: white;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
  }

  input[type="checkbox"].cart-checkbox-inline:checked {
    background-color: var(--pink-deep);
    border-color: var(--pink-deep);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .cart-action-badge {
    @apply inline-flex items-center gap-1 px-2 rounded text-[10px] font-medium whitespace-nowrap;
    border: 1px solid currentColor;
    height: 20px;
    line-height: 1;
    box-sizing: border-box;
  }

  .cart-delete-btn {
    @apply flex-shrink-0 p-1;
  }

  .cart-delete-btn svg {
    width: 14px;
    height: 14px;
  }

  .cart-item-content {
    @apply p-2.5 flex flex-col gap-2;
  }

  .cart-row-info {
    @apply flex items-center justify-between gap-2 bg-gray-50 rounded-md px-2 py-1.5;
  }

  .cart-location-compact {
    @apply flex items-center gap-1 text-xs text-gray-600 flex-1 min-w-0;
  }

  .cart-location-compact>span {
    @apply truncate;
  }

  .cart-location-icon {
    @apply text-pink-500 text-xs flex-shrink-0;
  }

  .cart-location-separator {
    @apply text-gray-400 flex-shrink-0;
  }

  .cart-price-compact {
    @apply px-2.5 py-0.5 rounded text-xs font-bold bg-emerald-100 text-emerald-700 flex-shrink-0;
  }

  .cart-lovers {
    @apply flex items-center justify-center gap-2 text-sm text-pink-700 bg-pink-50 rounded-lg px-3 py-1.5 mt-2 border border-pink-200;
  }

  .cart-lover-name {
    @apply font-medium truncate max-w-[100px];
  }

  .cart-lover-heart {
    @apply text-pink-500 flex-shrink-0;
    font-size: 0.875rem;
  }

  .cart-voucher-applied {
    @apply flex items-center gap-2 text-xs bg-emerald-50 text-emerald-700 rounded-md px-2 py-1.5 border border-emerald-200;
  }

  .cart-voucher-label {
    @apply text-emerald-600;
  }

  .cart-voucher-code {
    @apply font-mono font-semibold text-emerald-700 flex-1;
  }

  .cart-voucher-remove {
    @apply ml-auto w-5 h-5 flex items-center justify-center rounded-full text-emerald-600 hover:bg-emerald-200 hover:text-emerald-800 transition-colors text-sm font-bold leading-none;
  }

  .cart-row-buttons {
    @apply flex gap-1.5;
  }

  .cart-btn-third {
    @apply flex-1 flex items-center justify-center gap-1 py-1.5 px-1 rounded text-[11px] font-medium transition-all;
    border: 1px solid var(--pink-border);
    color: var(--pink-deep);
    background: white;
  }

  .cart-btn-third:hover {
    background-color: #fff5f8;
    border-color: var(--pink-deep);
  }

  .cart-continue-shopping {
    @apply flex justify-center py-2;
  }

  .cart-btn-secondary {
    @apply flex items-center justify-center gap-1.5 px-4 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg transition-colors border border-gray-400 w-full;
  }

  .cart-btn-secondary:hover {
    @apply bg-gray-200;
  }

  .cart-btn-secondary-icon {
    @apply w-3 h-3;
  }

  .cart-btn-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .cart-action-button {
    @apply text-[11px] px-2.5 py-1 whitespace-nowrap;
    line-height: 1.3;
  }

  .cart-action-button--pink {
    @apply border-pink-400 text-pink-600;
  }

  .cart-action-button--pink:hover {
    @apply bg-pink-50 border-pink-500;
  }

  .cart-icon-pink {
    width: 14px;
    height: 14px;
    color: var(--pink-deep);
    flex-shrink: 0;
  }

  .cart-action-badge--blue {
    @apply bg-blue-50 text-blue-700 border-blue-200;
  }

  .cart-action-badge--orange {
    @apply bg-orange-50 text-orange-700 border-orange-200;
  }

  .cart-action-badge--pink {
    @apply bg-pink-50 text-pink-700 border-pink-200;
  }

  .cart-action-badge--green {
    @apply bg-emerald-50 text-emerald-700 border-emerald-200;
  }

  .cart-badge-separator {
    @apply mx-1 opacity-50;
  }

  .cart-badge-voucher {
    @apply font-mono font-bold;
  }

  .cart-action-badge--gold {
    background-color: #FEF3C7;
    color: #1f2937;
    border-color: #D97706;
  }

  .cart-action-badge--gray {
    @apply bg-gray-50 text-gray-600 border-gray-200;
  }

  .cart-action-icon {
    @apply flex-shrink-0;
    width: 10px;
    height: 10px;
    font-size: 10px;
  }

  .cart-row-location {
    @apply w-full;
  }

  .cart-location {
    @apply flex items-center gap-1.5 text-xs text-gray-600 bg-gray-50 rounded-md px-3 py-2 border border-gray-100;
  }

  .cart-row-footer {
    @apply flex items-center justify-between gap-2;
  }

  .cart-price-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-emerald-50 text-emerald-700;
    border: 1px solid rgba(16, 185, 129, 0.3);
  }

  .cart-vouchers-section {
    @apply bg-emerald-50 rounded-xl border border-emerald-200 px-3 py-2.5 mt-3;
  }

  .cart-vouchers-title {
    @apply flex items-center gap-2 text-sm font-semibold text-emerald-700 mb-2;
  }

  .cart-vouchers-icon {
    @apply w-4 h-4;
  }

  .cart-vouchers-list {
    @apply flex flex-col gap-2;
  }

  .cart-voucher-item {
    @apply flex items-center gap-2 bg-white rounded-lg px-3 py-2 border border-emerald-200;
  }

  .cart-voucher-code {
    @apply text-sm font-mono font-semibold text-emerald-700;
  }

  .cart-voucher-bridge {
    @apply text-xs text-gray-500 flex-1;
  }

  .cart-voucher-remove {
    @apply p-1 text-gray-400 hover:text-red-500 transition-colors rounded;
  }

  .cart-cupones-section {
    @apply bg-white rounded-lg border border-gray-800 mb-2 overflow-hidden max-w-4xl;
    margin-left: auto;
    margin-right: auto;
  }

  .cart-cupones-header {
    @apply text-xs font-semibold text-gray-800 px-2 py-1.5 bg-amber-300 border-b border-gray-800;
  }

  .cart-cupones-list {
    @apply flex flex-col px-2 py-1;
  }

  .cart-cupon-item {
    @apply flex items-center justify-between gap-2 py-2 border-b border-gray-300 last:border-b-0;
  }

  .cart-cupon-left {
    @apply flex flex-col flex-1 min-w-0;
  }

  .cart-cupon-message {
    @apply text-xs text-gray-500 text-left truncate;
    font-family: 'Dancing Script', cursive;
  }

  .cart-cupon-bridge {
    @apply text-xs text-gray-600 truncate text-left;
  }

  .cart-cupon-code {
    @apply text-xs font-mono font-bold text-amber-800 bg-amber-100 px-1.5 py-0.5 rounded whitespace-nowrap;
  }

  .cart-cupon-remove {
    @apply px-1.5 text-gray-500 hover:text-red-500 transition-colors rounded text-base font-bold leading-none;
  }

  .cart-footer {
    @apply bg-white rounded-xl border border-gray-200 px-3 py-2.5 mt-3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .cart-footer-content {
    @apply flex flex-col gap-3;
  }

  .cart-footer-total {
    @apply flex flex-wrap items-center justify-between gap-2 pb-3 border-b border-gray-200;
  }

  .cart-footer-total-hint {
    @apply w-full text-xs text-amber-700 bg-amber-50 rounded-md px-2 py-1 italic;
  }

  .cart-footer-buttons {
    @apply flex flex-row items-center justify-center gap-4;
  }

  .cart-footer-buttons--single {
    @apply flex-col;
  }

  .cart-footer-buttons--single .cart-footer-button {
    @apply w-full;
  }

  .cart-footer-total-label {
    @apply text-sm text-gray-500 font-medium;
  }

  .cart-footer-total-amount {
    @apply text-lg font-bold text-gray-900;
  }

  .cart-footer-notice {
    @apply text-sm text-amber-600 font-medium text-center py-3 px-4 bg-amber-50 rounded-lg border border-amber-200;
  }

  .cart-footer-button {
    @apply flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-semibold text-white transition-all;
    background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  }

  .cart-footer-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
  }

  .cart-footer-button:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .cart-footer-button-icon {
    @apply text-sm;
  }

  .cart-readonly-footer {
    @apply bg-gradient-to-r from-gray-50 to-pink-50/30 rounded-lg p-4 text-center border border-gray-200;
  }

  .cart-readonly-total {
    @apply text-base font-bold text-gray-900;
  }

  .accordion-container {
    @apply max-w-none mt-0 px-0;
  }

  .accordion-item {
    border-bottom: 1px solid var(--pink-deep);
  }

  .accordion-item:first-child {
    border-top: 1px solid var(--pink-deep);
  }

  .accordion-question {
    @apply m-0 text-sm sm:text-base font-semibold text-black;
  }

  .accordion-icon {
    @apply text-lg sm:text-xl font-light text-black leading-none flex-shrink-0 ml-2;
  }

  .accordion-content {
    @apply pb-4 sm:pb-6;
  }

  .accordion-content.is-closed {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }

  .accordion-answer {
    @apply text-xs sm:text-sm text-gray-600 leading-relaxed pl-3 sm:pl-4 text-justify;
    border-left: 2px solid var(--pink-deep);
  }

  .accordion-answer a {
    @apply text-[var(--pink-deep)] no-underline hover:underline;
  }

  .accordion-answer ul {
    @apply mt-2 ml-4 sm:ml-6 p-0;
  }

  .accordion-answer li {
    @apply mb-1;
  }

  .btn-faq {
    @apply w-full justify-between bg-transparent hover:bg-gray-50 transition-colors duration-200 border-0 shadow-none rounded-none py-3 sm:py-4 flex flex-row items-center;
  }

  .faq-section {
    @apply w-full py-8 sm:py-12;
  }

  .faq-layout {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
    @apply grid grid-cols-1 lg:grid-cols-[60%_40%] gap-8 lg:gap-12;
  }

  .faq-column-left {
    @apply w-full;
  }

  .faq-column-right {
    @apply w-full;
  }

  .faq-info-box {
    @apply p-0 sm:p-0 h-full bg-white;
  }

  .faq-info-title {
    @apply text-xl sm:text-2xl font-bold text-black mb-4 py-3 sm:py-4;
    border-bottom: 1px solid var(--pink-deep);
  }

  .faq-info-text {
    @apply text-sm sm:text-base text-gray-600 leading-relaxed mb-4 text-justify;
  }

  .faq-info-text:last-child {
    @apply mb-0;
  }

  .faq-gallery-flow {
    @apply flex flex-wrap items-center justify-center gap-2 mt-4 py-4;
    background: linear-gradient(135deg, var(--pink-light) 0%, #fff5f7 100%);
    border-radius: 12px;
  }

  .faq-gallery-item {
    @apply flex flex-col items-center text-center;
    width: 70px;
  }

  .faq-gallery-step {
    @apply w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white mb-1;
    background: var(--pink-deep);
  }

  .faq-gallery-item img {
    @apply w-14 h-14 object-cover rounded-lg;
    border: 2px solid var(--pink-deep);
  }

  .faq-gallery-placeholder {
    @apply w-14 h-14 rounded-lg;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border: 2px dashed var(--pink-light);
  }

  .faq-gallery-caption {
    @apply text-[10px] text-gray-600 mt-1 leading-tight;
  }

  .faq-gallery-arrow {
    @apply text-pink-400 text-lg font-bold;
  }

  @media (min-width: 640px) {
    .faq-gallery-flow {
      @apply gap-3 py-5;
    }

    .faq-gallery-item {
      width: 90px;
    }

    .faq-gallery-step {
      @apply w-7 h-7 text-sm mb-2;
    }

    .faq-gallery-item img,
    .faq-gallery-placeholder {
      @apply w-16 h-16;
    }

    .faq-gallery-caption {
      @apply text-xs;
    }

    .faq-gallery-arrow {
      @apply text-xl;
    }
  }

  .image-cropper-container {
    @apply w-full flex flex-col gap-4 mx-auto relative;
    max-width: 900px;
  }

  .image-cropper-layout {
    @apply flex flex-col gap-5 items-stretch;
  }

  .image-cropper-section {
    @apply w-full;
  }

  .image-cropper-input-file {
    @apply hidden;
  }

  .image-cropper-upload-area {
    @apply relative w-full flex justify-center items-center overflow-hidden mt-3;
    min-height: var(--min-height-2xl);
  }

  .image-cropper-upload-area--empty {
    @apply cursor-pointer;
  }

  .image-cropper-placeholder {
    @apply text-rose-300;
  }

  .image-cropper-image-wrapper {
    @apply relative inline-block;
    line-height: 0;
  }

  .image-cropper-image {
    @apply block max-w-full w-auto h-auto select-none pointer-events-none;
    max-height: 600px;
  }

  .image-cropper-selection-square {
    @apply absolute border-4 border-[var(--pink-deep)] rounded cursor-grab;
    background: rgba(248, 175, 203, 0.08);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.5);
    transition: border-color 0.2s ease;
  }

  .image-cropper-selection-square:active {
    @apply cursor-grabbing;
    border-color: #e879a0;
  }

  .image-cropper-corner {
    @apply absolute border-4 border-[var(--pink-deep)];
    width: 20px;
    height: 20px;
  }

  .image-cropper-corner--top-left {
    @apply rounded-tl;
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
  }

  .image-cropper-corner--top-right {
    @apply rounded-tr;
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
  }

  .image-cropper-corner--bottom-left {
    @apply rounded-bl;
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
  }

  .image-cropper-corner--bottom-right {
    @apply rounded-br;
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
  }

  .image-cropper-overlay {
    @apply absolute pointer-events-none;
    background: rgba(0, 0, 0, 0.5);
  }

  .image-cropper-preview-container {
    @apply w-full flex flex-col items-center justify-center;
  }

  .image-cropper-preview-wrapper {
    @apply inline-flex bg-gray-200 rounded-lg p-1 border border-gray-300;
  }

  .image-cropper-preview-image {
    @apply max-w-full h-auto block rounded;
  }

  .image-cropper-preview-placeholder {
    @apply w-full border border-gray-300 bg-gray-200 rounded-lg flex items-center justify-center text-sm;
    min-height: var(--min-height-2xl);
  }

  .image-cropper-controls {
    @apply mt-3 flex flex-col items-center gap-3 w-full;
  }

  .image-cropper-size-control {
    @apply flex gap-2 items-center w-[70%] max-w-md;
  }

  .image-cropper-slider {
    @apply flex-1;
    accent-color: var(--pink-deep);
  }

  .image-cropper-buttons-wrapper {
    @apply w-full mt-0;
  }

  .image-cropper-buttons-row {
    @apply grid grid-cols-2 gap-4 w-full;
  }

  .image-cropper-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: #dc2626;
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
    background: #fef2f2;
    border-radius: 0.5rem;
    border: 2px dashed #fca5a5;
  }

  .terminos-modal-container {
    @apply flex flex-col;
    width: 100%;
    max-height: 80vh;
  }

  .terminos-modal-close {
    @apply flex items-center justify-center transition-all;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: #999;
    flex-shrink: 0;
  }

  .terminos-modal-close:hover {
    color: var(--pink-deep);
  }

  .terminos-modal-close svg {
    width: 20px;
    height: 20px;
  }

  .terminos-modal-header {
    @apply flex justify-between items-center mb-4 pb-4 border-b border-gray-200;
  }

  .terminos-modal-title {
    @apply text-lg md:text-xl font-bold;
    color: var(--pink-deep);
    flex: 1;
  }

  .terminos-modal-content {
    @apply flex-1 p-3 md:p-5 bg-gray-50 rounded-lg relative;
    max-height: 55vh;
    overflow-y: scroll;
    border: 1px solid #ddd;
  }

  .terminos-modal-content-wrapper {
    @apply relative;
  }

  .terminos-modal-content-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(249, 250, 251, 0.95));
    pointer-events: none;
    border-radius: 0 0 8px 8px;
  }

  .terminos-modal-content-wrapper.at-bottom::after {
    display: none;
  }

  .terminos-modal-footer {
    @apply flex flex-col gap-3 mt-4 pt-4 border-t border-gray-200;
  }

  .terminos-modal-scroll-hint {
    @apply text-sm text-gray-500 text-center italic;
  }

  .terminos-modal-buttons {
    @apply flex flex-col sm:flex-row gap-3;
  }
}

.slot-box {
  @apply rounded-md p-2 flex items-center justify-center font-medium w-full text-center flex-shrink-0 text-sm;
}

.slot-box-image {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
  border: 2px solid black;
}

@media (min-width: 768px) {
  .slot-box-image {
    border: none;
  }
}

.slot-box-image>div {
  width: 100%;
  height: 100%;
}

.slot-box-image img {
  width: 100%;
  height: auto;
  display: block;
}

.flip-container {
  perspective: 1000px;
  width: 100%;
  min-height: var(--min-height-standard);
}

.flip-card {
  margin-top: 0;
  width: 100%;
  min-height: inherit;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  min-height: inherit;
  backface-visibility: hidden;
}

.flip-card-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-front.slot-box-image,
.flip-card-back.slot-box-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

.flip-container-compact {
  min-height: var(--min-height-xs);
  height: var(--min-height-xs);
}

.flip-container-compact .flip-card,
.flip-container-compact .flip-card-front,
.flip-container-compact .flip-card-back {
  height: var(--min-height-xs);
  min-height: var(--min-height-xs);
}

.flip-container-expanded {
  min-height: fit-content;
}

.flip-container-expanded .flip-card,
.flip-container-expanded .flip-card-front,
.flip-container-expanded .flip-card-back {
  min-height: fit-content;
  height: auto;
}

.flip-container-expanded .flipped {
  transform: none;
}

.flip-container-expanded .flipped .flip-card-front {
  display: none;
}

.flip-container-expanded .flipped .flip-card-back {
  position: relative;
  transform: none;
}

.flip-container-square {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.flip-container-square .flip-card {
  min-height: 0;
  position: relative;
}

.flip-container-square .flip-card-front,
.flip-container-square .flip-card-back {
  position: relative;
  min-height: 0;
}

.flip-container-square .flip-card-back {
  position: absolute;
  inset: 0;
}

.flip-container-square .slot-box-image,
.flip-container-square .slot-box-image img,
.flip-container-square .slot-box-image * {
  width: 100%;
  border-radius: 0 !important;
}

.flip-container-square .slot-box-image img {
  width: 100%;
  height: auto;
}

.flip-container-square .flip-card-back .slot-box-image {
  aspect-ratio: 1 / 1;
}

.flip-container-square .flip-card-back .slot-box-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.flip-container-square .flip-card-back .lock-card-modern {
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.flip-container-square .flip-card-back .lock-card-image-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.flip-card-front.parcela-number-modern {
  min-height: var(--min-height-standard);
  border-top: 2px solid var(--pink-border);
  border-bottom: 2px solid var(--pink-border);
}

.user-parcela-disponible {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  width: 100%;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.user-parcela-disponible > span {
  font-size: clamp(0.875rem, 3vw, 1rem);
}

.lock-card-image-full {
  @apply w-full rounded-none;
  display: block;
  height: 100%;
  object-fit: cover;
}

.lock-card-no-image {
  @apply flex flex-col items-center justify-center gap-2 text-gray-400;
  width: 100%;
  min-height: var(--min-height-lg);
}

.lock-card-no-image-icon {
  @apply text-4xl;
}

.lock-card-modern {
  background: white;
  border-radius: 0;
  padding: 20px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.lock-card-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pink-border);
  flex-shrink: 0;
  text-align: left;
}

.lock-card-name {
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  line-height: 1.3;
  text-align: left;
}

.lock-card-info-table {
  display: grid;
  gap: 10px;
  flex-shrink: 0;
}

.lock-card-info-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--pink-border);
  text-align: left;
}

.lock-card-info-row:last-child {
  border-bottom: none;
}

.lock-card-info-value {
  font-size: 13px;
  color: #212529;
  line-height: 1.4;
  text-align: justify;
}

body:has(.modal-overlay) {
  overflow: hidden;
}

.modal-overlay {
  @apply fixed inset-0 z-[9999] flex justify-center;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 32px;
  overflow-y: auto;
}

.modal-backdrop {
  @apply fixed inset-0 transition-opacity duration-300 bg-black bg-opacity-60;
}

.modal-backdrop--locked {
  @apply bg-opacity-80;
}

.modal-content {
  @apply relative z-10 w-full max-w-xs p-6 bg-white rounded-xl shadow-lg transform transition-all duration-300;
  animation: fadeInScale 1s ease-out forwards;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.modal-content:has(.terminos-modal-container) {
  @apply max-w-4xl p-4 md:p-6;
}

.modal-close-button {
  @apply absolute top-2 right-2 text-gray-500 hover:text-gray-800 text-2xl bg-transparent rounded-full transition-colors;
}

.modal-header {
  @apply flex items-center justify-between px-4 py-3 -mx-4 -mt-4 mb-4 rounded-t-xl;
  background: linear-gradient(135deg, var(--pink-deep) 0%, #ec4899 100%);
}

.modal-header__title {
  @apply text-white font-semibold text-base;
}

.modal-header__close {
  @apply text-white text-2xl leading-none hover:opacity-80 transition-opacity;
  background: none;
  border: none;
  cursor: pointer;
}

.modal-body {
  @apply px-0;
}


.card {
  @apply bg-white rounded-lg sm:rounded-xl overflow-hidden border-2 border-black flex flex-col transition-all duration-300;
  box-shadow: 3px 3px 0px var(--black);
}

.card--expanded {
  min-height: auto;
}

.card-header-neutral,
.card-header-warning,
.card-header-info {
  @apply px-1 py-0.5 flex items-center text-center border-b-2 border-black;
  font-size: 0.75rem;
  line-height: 1.2;
  min-height: auto;
  position: relative;
}

.card-header-neutral > span,
.card-header-warning > span,
.card-header-info > span {
  flex: 1;
  text-align: center;
  font-size: clamp(0.6rem, 2.5vw, 0.875rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .card-header-neutral,
  .card-header-warning,
  .card-header-info {
    @apply px-2 py-0.5 gap-2;
    font-size: 0.875rem;
  }
}

.card-header-neutral::before,
.card-header-warning::before,
.card-header-info::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cpath d='M10 1 A7 7 0 0 0 3 8 A7 7 0 0 0 6 14 L6 24 Q6 27 10 27 Q14 27 14 24 L14 14 A7 7 0 0 0 17 8 A7 7 0 0 0 10 1 Z' fill='white' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card-header-neutral {
  @apply bg-gray-100;
}

.card-header-warning {
  @apply bg-amber-100;
}

.card-header-info {
  @apply bg-blue-100;
}

.card-bridge-name {
  font-size: clamp(0.65rem, 2.5vw, 0.8rem);
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.3;
}

.card-body .flip-card-back .cart-lock-image-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body .flip-card-back.slot-box {
  padding: 0;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
}

.card-body .lock-card-modern {
  box-shadow: none;
}

.card-body .flip-container-square {
  border-top: 2px solid black;
}

.card-body .flip-container .user-slot-disponible {
  border-top: 2px solid black;
  border-bottom: none;
  padding: 0.25rem 0.5rem;
  min-height: auto;
  border-radius: 0;
}

.card-body > .card-footer-status {
  margin: 0;
  width: 100%;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 0.2rem 0;
}

.card-body .flip-card-back .user-parcela-disponible {
  border-top: 2px solid black;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.4rem 0.5rem;
  margin: 0;
  background: #f9fafb;
}

.card-body .flip-card-back .nft-info-panel {
  padding: 16px 20px;
  margin-top: 0;
  flex: 1;
  box-sizing: border-box;
}

.card.card-todo-expanded .card-body {
  min-height: fit-content;
  gap: 0.5rem;
  overflow: hidden;
}

.tbtermgen {
  @apply w-full;
}

.tbtermgen thead,
.tbtermgen tbody,
.tbtermgen tr,
.tbtermgen td {
}

.tbtermgen th {
  @apply hidden;
}

.tbtermgen td {
  @apply text-justify;
}

.tbtermgen tbody td {
  @apply pt-2 pb-2 leading-relaxed;
}

.tbtermgen tbody td.en {
  @apply text-gray-700;
}

.tbtermgen tbody td.section-start {
  @apply pt-6 mt-4;
  border-top: 2px dotted var(--pink-deep);
}

.tbtermgen tbody tr:first-child td.section-start {
  @apply border-t-0 pt-6;
}

.tbtermgen tbody td.section-end {
  @apply mb-4;
}

.tbtermgen tbody td.list-item {
  @apply pl-4;
}

.tbtermgen h1 {
  @apply text-xl font-bold text-center mb-4;
}

.tbtermgen h2 {
  @apply text-base font-bold text-gray-800 mb-2 mt-3;
}

.tbtermgen tbody tr:first-child h2 {
  @apply text-center;
}

.tbtermgen h3,
.tbtermgen h4 {
  @apply text-sm font-semibold text-gray-700 mt-2 mb-1;
}

.navbar-container {
  @apply bg-white/95 backdrop-blur-sm px-3 pt-1 pb-0 mb-0 flex items-center justify-between border-t-2 border-t-black border-b border-b-[var(--pink-deep)] z-50;
  height: 47px;
}


.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-button svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

.nav-button--inactive,
.nav-button--active {
  background: white;
  color: var(--pink-deep);
  border: 1px solid var(--pink-deep);
  padding: 6px 12px;
  border-radius: 8px;
  height: 35px;
  min-height: 35px;
}

.nav-button--inactive:hover,
.nav-button--active:hover {
  background: var(--pink-deep);
  color: white;
  border-color: var(--pink-deep);
}

.navbar-logo-container {
  @apply flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity duration-200;
}

.loveinblock-banner-title {
  font-family: 'Press Start 2P', cursive;
  color: var(--pink-deep);
  text-shadow: 1.5px 1.5px 0px var(--pink-dark), 3px 3px 0px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.02em;
  margin: 0;
  user-select: none;
  display: inline-block;
  line-height: 1.4;
  white-space: nowrap;
  font-size: 2rem;
}

.loveinblock-navbar-title {
  font-family: 'Press Start 2P', cursive;
  color: var(--pink-deep);
  text-shadow: 1px 1px 0px var(--pink-dark);
  margin: 0;
  user-select: none;
  display: inline-block;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-size: 1.32rem;
  cursor: pointer;
}

.bridge-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  width: 100%;
  background: white;
  min-height: 76px;
}

.bridge-stats--three-cols {
  grid-template-columns: 1fr 1fr 1fr;
}

.bridge-stats__item {
  text-align: left;
  padding: 10px 8px 10px 12px;
  background: white;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bridge-stats__item.bridge-stats__btn {
  text-align: center;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #E91E63;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  border-radius: 6px;
}

.bridge-stats__item.bridge-stats__btn:hover {
  background: #C2185B;
}

.bridge-stats__btn svg {
  width: 16px;
  height: 16px;
}

.bridge-stats__btn span {
  font-size: 0.7rem;
  font-weight: 600;
}

.bridge-stats__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #E91E63;
}

.bridge-stats__label {
  font-size: 0.6rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.canvas-zona--gold {
  border-top: 3px solid #D4AF37;
}

.canvas-zona:not(.canvas-zona--disabled) {
  cursor: pointer;
}

.canvas-zona--disabled {
  opacity: 0.25;
  pointer-events: none;
  filter: grayscale(100%);
  margin-bottom: 0;
}

.canvas-zona-wrapper {
  position: relative;
}

.canvas-zona-wrapper:has(.canvas-zona--disabled) {
  border: 2px solid black;
}

.bridge-view {
  position: relative;
  overflow: hidden;
}

.bridge-image-wrapper {
  position: relative;
  max-height: 650px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out;
  opacity: 1;
}

.bridge-image-wrapper--hidden {
  max-height: 0;
  opacity: 0;
}

.canvas-zona-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(180, 180, 180, 0.5);
  padding: 10px 0;
  border-top: 1px solid rgba(100, 100, 100, 0.3);
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}

.canvas-zona-overlay__text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .canvas-zona-overlay {
    padding: 24px 0;
  }
  .canvas-zona-overlay__text {
    font-size: 1.9rem;
    letter-spacing: 2.5px;
  }
}

.bridge-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.bridge-overlay__lock {
  width: 48px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(233, 30, 99, 0.3));
}

.bridge-overlay__arrow {
  width: 28px;
  height: 28px;
  color: #E91E63;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.bridge-overlay__arrow--left {
  animation: arrow-bounce-left 1.5s ease-in-out infinite;
}

.bridge-overlay__arrow--right {
  animation: arrow-bounce-right 1.5s ease-in-out infinite;
}

@keyframes arrow-bounce-left {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(-6px); opacity: 0.5; }
}

@keyframes arrow-bounce-right {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(6px); opacity: 0.5; }
}

.steps-breadcrumb {
  width: 100%;
  background: white;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #eee;
}

.steps-breadcrumb__track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 20, 147, 0.1);
}

.steps-breadcrumb__progress {
  height: 100%;
  background: linear-gradient(90deg, #FF1493 0%, #C71585 100%);
  transition: width 0.3s ease-out;
}

.steps-breadcrumb__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.steps-breadcrumb__step {
  padding: 8px 4px;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps-breadcrumb__step::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C71585' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

.steps-breadcrumb__step:last-child::after {
  display: none;
}

.steps-breadcrumb__step-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps-breadcrumb__step-label {
  font-size: 11px;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.steps-breadcrumb__step--completed .steps-breadcrumb__step-label {
  color: #C71585;
}

.steps-breadcrumb__step--completed::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C71585' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

.steps-breadcrumb__step--active {
  background: linear-gradient(180deg, rgba(255, 20, 147, 0.08) 0%, rgba(255, 20, 147, 0.02) 100%);
}

.steps-breadcrumb__step--active .steps-breadcrumb__step-label {
  color: #C71585;
  font-weight: 700;
}

.steps-breadcrumb__step--pending .steps-breadcrumb__step-label {
  color: #bbb;
}

.steps-breadcrumb__step--pending::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

.steps-breadcrumb__step--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-left: 1px dashed #ccc;
}

.steps-breadcrumb__step--disabled .steps-breadcrumb__step-label {
  color: #aaa;
}

.steps-breadcrumb__step--no-arrow::after {
  display: none;
}

.steps-breadcrumb__step--clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.steps-breadcrumb__step--clickable:hover {
  background: rgba(255, 20, 147, 0.08);
}

.steps-breadcrumb__step--clickable:hover .steps-breadcrumb__step-label {
  color: #C71585;
}


.btn-auth-wallet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
  height: 36px;
  min-height: 36px;
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  border: 1px solid #fce7f3;
  border-radius: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--pink-deep);
  cursor: pointer;
  padding: 0 12px;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-shadow: 2px 2px 0px var(--pink-dark);
}

.btn-auth-wallet svg {
  width: 14px;
  height: 14px;
  color: var(--pink-deep);
  flex-shrink: 0;
}

.btn-auth-wallet:hover {
  background: linear-gradient(180deg, #fff5f8 0%, #fce7f3 100%);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--pink-dark);
}

.btn-auth-wallet:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--pink-dark);
}

.puentes-bg-cloudy {
  position: relative;
  flex: 1;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 35%,
      rgba(255, 248, 252, 0.95) 0%,
      rgba(248, 215, 234, 0.85) 35%,
      rgba(232, 195, 222, 0.9) 65%,
      rgba(225, 185, 216, 1) 100%
    );
  background-attachment: fixed;
  background-size: cover;
}

.puentes-bg-cloudy::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at top,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.15) 35%,
      transparent 70%
    ),
    radial-gradient(ellipse at bottom,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.12) 40%,
      transparent 75%
    );
}

.puentes-bg-cloudy::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: 0.12;
  filter: blur(0.2px);
}

.puentes-lista {
  @apply relative z-10 px-3 pt-6 pb-3 flex-1;
}

.puentes-grid {
  @apply grid grid-cols-1 gap-4 items-stretch;
}

.puentes-grid--jumping {
  pointer-events: none !important;
}

.puentes-grid--jumping,
.puentes-grid--jumping * {
  transition: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.puentes-load-more {
  height: 50px;
  width: 100%;
}

.puentes-card-wrapper {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.92);
  opacity: 0.7;
}

.puentes-card-wrapper--centered {
  transform: scale(1);
  opacity: 1;
}

.puentes-card-wrapper--centered .bridge-card {
  box-shadow: 0 8px 30px rgba(255, 20, 147, 0.25);
}

.puentes-progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: #e0e0e0;
}

.puentes-progress-bar__fill {
  position: absolute;
  height: 100%;
  background: var(--pink-deep);
  transition: left 0.3s ease;
}

.puentes-progress-bar__fill--no-transition {
  transition: none;
  animation: progress-wrap 0.2s ease;
}

@keyframes progress-wrap {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.puentes-divider {
  width: calc(100% + 24px);
  margin-left: -12px;
  margin-right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px dashed #1a1a1a;
  padding: 10px 0;
}

.puentes-divider__lines {
  display: none;
}

.puentes-divider__line {
  display: none;
}

.puentes-divider__icon {
  width: 20px;
  height: 20px;
  color: #1a1a1a;
}

.puentes-divider__count {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin: 0 8px;
}

.puentes-divider__text {
  display: none;
}

.puentes-expand {
  @apply mt-6 flex justify-center;
  grid-column: 1 / -1;
}

.puentes-expand__btn {
  @apply inline-flex items-center justify-center gap-2 py-2.5 px-6 text-sm font-semibold cursor-pointer;
  color: white;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  border: none;
  border-radius: 25px;
  box-shadow: 0 3px 10px rgba(255, 20, 147, 0.3);
  transition: all 0.2s ease;
}

.puentes-expand__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 20, 147, 0.4);
}

.puentes-expand__bridge-icon {
  @apply w-5 h-5;
}

.puentes-expand__icon {
  @apply text-xs transition-transform duration-200;
}

.puentes-expand__icon--open {
  transform: rotate(180deg);
}

.puentes-pagination {
  @apply flex items-center justify-center gap-4;
  grid-column: 1 / -1;
}

.puentes-pagination__arrow {
  @apply flex items-center justify-center w-8 h-8 cursor-pointer;
  background: transparent;
  border: 1px solid black;
  border-radius: 50%;
  color: black;
  transition: all 0.2s ease;
}

.puentes-pagination__arrow svg {
  @apply w-4 h-4;
}

.puentes-pagination__arrow:hover:not(:disabled) {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
  background: rgba(255, 20, 147, 0.05);
}

.puentes-pagination__arrow--disabled,
.puentes-pagination__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.puentes-pagination__count {
  @apply font-medium;
  color: black;
  font-size: 13px;
  min-width: 50px;
  text-align: center;
}

.puentes-pagination__separator {
  @apply mx-0.5;
  color: black;
}

.puentes-pagination__icon--mobile {
  @apply block;
}

.puentes-pagination__icon--desktop {
  @apply hidden;
}

@media (min-width: 768px) {
  .puentes-pagination__icon--mobile {
    @apply hidden;
  }

  .puentes-pagination__icon--desktop {
    @apply block;
  }
}

.bridge-card {
  --bc-text: #1A1A1A;
  --bc-text-muted: var(--gray-medium);
  --bc-text-light: var(--gray-light);
  --bc-text-lighter: #A8A8A8;
  --bc-gold-accent: #C9A962;
  --bc-gold-dark: #B8963F;
  --bc-pink-alpha-5: rgba(255, 20, 147, 0.05);
  --bc-pink-alpha-15: rgba(255, 20, 147, 0.15);
  --bc-pink-alpha-20: rgba(255, 20, 147, 0.2);
  --bc-gold-alpha-8: rgba(232, 155, 155, 0.08);
  --bc-gold-alpha-15: rgba(201, 169, 98, 0.15);
  --bc-border-alpha: rgba(232, 155, 155, 0.2);
  --bc-pink-border-alpha: rgba(255, 107, 157, 0.25);
  @apply relative bg-white overflow-hidden flex flex-col;
  min-height: auto;
  padding: 12px;
  padding-bottom: 8px;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.15),
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.1);
  transform: rotate(-0.5deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: cardFadeIn 0.4s ease-out forwards;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
}

.bridge-card:hover {
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 28px 56px rgba(0, 0, 0, 0.15);
  transform: rotate(0deg) scale(1.02);
}

.bridge-card__header {
  @apply flex items-center justify-center py-2 gap-1;
  background: linear-gradient(180deg, rgba(255, 20, 147, 0.35) 0%, rgba(255, 20, 147, 0.55) 100%);
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  position: relative;
}

.bridge-card__header-title {
  @apply text-[11px] font-semibold text-center uppercase tracking-wider;
  color: #1a1a1a;
  letter-spacing: 0.08em;
  margin: 0;
}

.bridge-card__title {
  display: none;
}

.bridge-card__header-meta {
  display: none;
}

.bridge-card__header-lock {
  width: 16px;
  height: 16px;
}

.bridge-card__header-location {
  @apply text-[10px] text-center uppercase tracking-wider;
  color: #1a1a1a;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.bridge-card__header-location::before {
  content: '·';
  margin-right: 6px;
}

.bridge-card__heart {
  display: none;
}

.bridge-card__caption {
  @apply text-center mt-2 text-sm tracking-widest uppercase font-medium;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
  color: #1a1a1a;
  letter-spacing: 0.15em;
  padding: 4px 0;
}

.bridge-card__status-footer {
  @apply w-full text-center py-1.5 text-[10px] font-medium uppercase tracking-wider;
  letter-spacing: 0.15em;
  background: transparent;
  color: #1a1a1a;
  border: 1px dashed #1a1a1a;
  border-radius: 2px;
  margin-top: 8px;
}

.bridge-card__status-footer--proximamente {
  background: transparent;
  color: var(--bc-gold-accent);
  border-color: var(--bc-gold-accent);
}

.bridge-card__image-container {
  @apply relative;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.bridge-card__image-link {
  @apply block w-full h-full cursor-pointer;
}

.bridge-card__image-wrapper {
  @apply relative w-full overflow-hidden;
  height: 100px;
}

.bridge-card__image {
  @apply w-full h-full object-cover;
  transition: transform 0.5s ease;
}

.bridge-card__image--zoomed {
  transform: scale(1.05);
}

.bridge-card__image-placeholder {
  @apply w-full h-full;
  background: linear-gradient(135deg, var(--cream), #E8E0D5);
}

.bridge-card__image-overlay {
  @apply absolute inset-0 pointer-events-none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
}

.bridge-card__ticket-area {
  @apply relative;
  background: linear-gradient(145deg, var(--gold), var(--gold-dark));
  height: 306px;
  border-top: 2px solid var(--bc-text);
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px),
      96% 100%, 92% calc(100% - 12px), 88% 100%, 84% calc(100% - 12px), 80% 100%,
      76% calc(100% - 12px), 72% 100%, 68% calc(100% - 12px), 64% 100%,
      60% calc(100% - 12px), 56% 100%, 52% calc(100% - 12px), 48% 100%,
      44% calc(100% - 12px), 40% 100%, 36% calc(100% - 12px), 32% 100%,
      28% calc(100% - 12px), 24% 100%, 20% calc(100% - 12px), 16% 100%,
      12% calc(100% - 12px), 8% 100%, 4% calc(100% - 12px), 0% 100%);
}

.bridge-card__progress-container {
  @apply px-3 py-2;
  background: rgba(255, 20, 147, 0.03);
  border: 1px solid #1a1a1a;
  border-top: none;
  border-radius: 0 0 2px 2px;
  margin-top: -1px;
}

.bridge-card__progress {
  @apply mb-0;
}

.bridge-card__progress-header {
  @apply flex justify-between items-center mb-0.5;
}

.bridge-card__progress-label {
  @apply text-xs;
  color: var(--bc-text-muted);
}

.bridge-card__progress-value {
  @apply font-bold;
  color: var(--pink-deep);
}

.bridge-card__progress-total {
  @apply font-normal;
  color: var(--bc-text-light);
}

.bridge-card__progress-percent {
  @apply text-[10px] font-medium;
  color: var(--bc-text-lighter);
}

.bridge-card__progress-bar {
  @apply w-full h-1.5 rounded-full overflow-hidden;
  background: var(--bc-gold-alpha-15);
}

.bridge-card__progress-fill {
  @apply h-full rounded-full;
  background: linear-gradient(90deg, var(--pink-light), var(--pink-deep));
  transition: width 0.5s ease;
}

.bridge-card__progress-footer {
  @apply flex justify-between items-center mt-1.5 pt-1.5;
  border-top: 1px dashed var(--bc-pink-alpha-15);
}

.bridge-card__progress-avg-label {
  @apply text-[9px] uppercase tracking-wider;
  color: var(--bc-text-light);
  letter-spacing: 0.05em;
}

.bridge-card__progress-avg-value {
  @apply text-[10px] font-medium;
  color: var(--pink-deep);
}

.bridge-card__content {
  @apply flex flex-col py-0;
  flex: 1;
  padding-top: 8px;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  margin-top: 8px;
  background: white;
}

.bridge-card__price-row {
  @apply flex justify-between items-center px-3 py-2;
  border-bottom: 1px dashed rgba(255, 20, 147, 0.2);
}

.bridge-card__price-label {
  @apply text-xs uppercase;
  color: var(--bc-text-muted);
}

.bridge-card__price-value {
  @apply text-sm font-semibold;
  color: var(--pink-deep);
}

.bridge-card__price-value-large {
  @apply text-xl font-bold px-2 py-0.5 rounded;
  color: var(--pink-deep);
  border: 1px solid black;
}

.bridge-card__cta-container {
  @apply mb-0 px-3 pb-3 pt-1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bridge-card__cta-container > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bridge-card__legend {
  @apply text-[9px] bg-gray-50 rounded px-2;
  color: #1a1a1a;
  text-align: justify;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.bridge-card__cta-link {
  @apply block w-full;
}

.bridge-card__cta {
  @apply w-full py-2.5 text-xs font-medium uppercase tracking-wider;
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: 0.1em;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bridge-card__cta--available {
  background: white;
  color: var(--pink-deep);
  border: 1px solid black;
}

.bridge-card__cta--available:hover {
  background: var(--pink-deep);
  color: white;
}

.bridge-card__cta--available.bridge-card__cta--inverted {
  background: linear-gradient(180deg, rgba(255, 20, 147, 0.15) 0%, rgba(255, 20, 147, 0.35) 100%);
  color: #1a1a1a;
  border: 1px solid black;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.bridge-card__cta--available.bridge-card__cta--inverted .bridge-card__cta-icon {
  fill: #1a1a1a;
}

.bridge-card__cta--available.bridge-card__cta--inverted:hover {
  background: linear-gradient(180deg, rgba(255, 20, 147, 0.35) 0%, rgba(255, 20, 147, 0.55) 100%);
  color: #1a1a1a;
}

.bridge-card__cta--available.bridge-card__cta--inverted:hover .bridge-card__cta-icon {
  fill: #1a1a1a;
}

.bridge-card__timer {
  @apply w-full flex items-center justify-center gap-1;
  padding: 3px 0;
  margin-top: 6px;
  border: 1px dashed var(--pink-deep);
  background: transparent;
}

.bridge-card__timer-label {
  @apply uppercase;
  font-size: 8px;
  color: var(--bc-text-lighter);
  letter-spacing: 0.03em;
}

.bridge-card__timer-value {
  @apply font-semibold font-mono;
  font-size: 8px;
  color: var(--bc-text-muted);
}

.bridge-card__desc-details {
  @apply mt-1 mb-2;
}

.bridge-card__desc-toggle {
  @apply w-full flex items-center justify-center gap-2 cursor-pointer list-none;
  height: 38px;
  min-height: 38px;
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  border: 1px solid #fce7f3;
  border-radius: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--pink-deep);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.bridge-card__desc-toggle:hover {
  background: linear-gradient(180deg, #fff5f8 0%, #fce7f3 100%);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--pink-dark);
}

.bridge-card__desc-toggle::-webkit-details-marker {
  display: none;
}

.bridge-card__desc-arrow {
  @apply text-[10px];
  color: var(--pink-deep);
}

.bridge-card__desc-icon {
  @apply text-[10px];
  color: var(--pink-deep);
  display: none;
}

.bridge-card__desc-details[open] .bridge-card__desc-icon {
  display: inline;
}

.bridge-card__desc-details[open] .bridge-card__desc-arrow {
  display: none;
}

.bridge-card__desc-details[open] .bridge-card__desc-toggle span:nth-child(2) {
  display: none;
}

.bridge-card__desc-details[open] .bridge-card__desc-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
  box-shadow: none;
  transform: none;
}

.bridge-card__desc-content {
  @apply mt-0 px-2 pt-2 pb-2;
  background: linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);
  border: 1px solid #fce7f3;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.bridge-card__desc-content p {
  @apply text-xs leading-relaxed text-justify p-2.5;
  color: var(--bc-text-muted);
  background: #fafafa;
  border-radius: 3px;
}

.bridge-card--proximamente {
  min-height: auto;
}

.bridge-card__locked-container {
  position: relative;
  flex: 1;
  min-height: 160px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  margin-top: 8px;
}

.bridge-card__locked-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) grayscale(30%);
  transform: scale(1.1);
}

.bridge-card__locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}

.bridge-card__locked-icon {
  width: 80px;
  height: 80px;
  color: white;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: pulse-lock 2s ease-in-out infinite;
}

@keyframes pulse-lock {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

.bridge-card--proximamente .bridge-card__content {
  flex: 0;
  padding-bottom: 12px;
}

.bridge-card__cta--white {
  background: white;
  font-size: 0.7rem;
  padding: 0.4rem 0.4rem;
  line-height: 1.2;
  white-space: nowrap;
}

.bridge-card__cta--white:hover {
  background: var(--pink-deep);
  color: white;
}

.puentes-grid .bridge-card:nth-child(1) {
  animation-delay: 0.05s;
}

.puentes-grid .bridge-card:nth-child(2) {
  animation-delay: 0.1s;
}

.puentes-grid .bridge-card:nth-child(3) {
  animation-delay: 0.15s;
}

.puentes-grid .bridge-card:nth-child(4) {
  animation-delay: 0.2s;
}

.puentes-grid .bridge-card:nth-child(5) {
  animation-delay: 0.25s;
}

.puentes-grid .bridge-card:nth-child(6) {
  animation-delay: 0.3s;
}

.bridge-card__cta-with-icon {
  display: grid;
  grid-template-columns: 80% 20%;
  align-items: center;
  @apply px-2;
}

.bridge-card__cta-with-icon span {
  text-align: left;
  padding-left: 8px;
}

.bridge-card__cta-with-icon.group:hover .bridge-card__cta-icon {
  @apply text-white;
}

.bridge-card__cta-icon {
  @apply w-4 h-4;
  justify-self: center;
  transition: fill 0.2s ease;
}

.bridge-card__options-list .bridge-card__cta {
  @apply text-xs py-2.5;
}

.bridge-card__options-list .bridge-card__cta-icon {
  @apply w-4 h-4;
}

.bridge-card__option-desc {
  @apply text-[9px] text-gray-400 text-center bg-gray-50 rounded px-2;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.bridge-card__options-list {
  @apply flex flex-col gap-1;
}

.info-section {
  @apply pb-8;
}

.info-banner-header {
  @apply w-full;
  border-bottom: 2px solid black;
}

.info-banner {
  @apply w-full rounded-lg mb-6;
  max-height: 300px;
  object-fit: cover;
}

.info-banner-inline {
  @apply w-full mt-4;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.info-content {
  @apply px-4 py-6 mx-auto;
  max-width: 800px;
}

.info-legal {
  @apply text-sm sm:text-base text-gray-700 leading-relaxed;
}

.info-legal-title {
  @apply text-xl sm:text-2xl font-bold text-center mb-6;
  color: var(--pink-deep);
}

.info-legal-meta {
  @apply mb-8 text-xs sm:text-sm;
  border-collapse: collapse;
}

.info-legal-meta tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.info-legal-meta tr:last-child {
  border-bottom: none;
}

.info-legal-meta td {
  @apply px-1 py-1 text-left;
}

.info-legal-meta td:first-child {
  white-space: nowrap;
}

.info-legal-toc {
  @apply w-full mb-8 hidden;
}

.info-legal-subtitle {
  @apply text-lg sm:text-xl font-semibold mb-4 mt-8 pb-2 border-b;
  color: var(--pink-deep);
  border-color: var(--pink-light);
}

.info-legal-text {
  @apply mb-6 text-justify leading-relaxed;
}

.info-legal-content {
  @apply w-full mt-8;
}

.info-legal-content thead {
  @apply hidden;
}

.info-legal-content td {
  @apply text-justify py-2 leading-relaxed;
}

.info-legal-content td.section-start {
  @apply pt-6 mt-4;
  border-top: 1px solid var(--pink-light);
}

.info-legal-content tr:first-child td.section-start {
  @apply border-t-0;
}

.info-legal-content h2 {
  @apply text-base sm:text-lg font-bold mb-2 mt-4;
  color: var(--pink-deep);
}

.info-legal-content h3,
.info-legal-content h4 {
  @apply text-sm font-semibold text-gray-700 mt-3 mb-1;
}

.info-legal-content td.list-item {
  @apply pl-4;
}

.info-text {
  @apply text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600 leading-relaxed text-justify;
}

.info-bands {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.info-band--hero {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: white;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  animation: fadeIn 0.4s ease-out forwards;
  border-bottom: 1px solid black;
}

.info-hero-heart {
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C20 60 5 40 5 25 C5 12 15 2 30 2 C40 2 48 10 50 15 C52 10 60 2 70 2 C85 2 95 12 95 25 C95 40 80 60 50 88Z' fill='rgba(255,255,255,0.5)' stroke='white' stroke-width='5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-right: 15px;
}

.info-hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.info-hero-decoration {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.info-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.info-step {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-step--1 {
  background: #FFF5F5;
}

.info-step--2 {
  background: #FFECEC;
}

.info-step--3 {
  background: #FFE0E0;
}

.info-step--4 {
  background: #FFD4D4;
}

.info-step-number {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  opacity: 0.15;
  -webkit-text-stroke: 1px var(--black);
  text-stroke: 1px var(--black);
  color: white;
  line-height: 1;
}

.info-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-step-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--gold-dark);
}

.info-step-desc {
  font-size: 0.85rem;
  margin: 0;
  color: #4a4a4a;
  line-height: 1.5;
}

.info-hero-subtitle {
  font-size: 1.1rem;
  margin: 8px 0 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.info-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.info-service-card {
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  border-right: 2px solid var(--black);
  transition: background-color 0.3s ease;
}

.info-service-card:nth-child(1) {
  background: #FFF5F5;
}

.info-service-card:nth-child(2) {
  background: #FFECEC;
}

.info-service-card:nth-child(3) {
  background: #FFE0E0;
  border-right: none;
}

.info-service-card:hover {
  background: #FFD4D4;
}

.info-service-icon {
  width: 80px;
  height: 80px;
  color: var(--gold-dark);
}

.info-service-icon svg {
  width: 100%;
  height: 100%;
}

.info-service-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: var(--black);
}

.info-service-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--gold-dark);
}

.info-service-desc {
  font-size: 0.9rem;
  margin: 0;
  color: #4a4a4a;
  line-height: 1.6;
  max-width: 280px;
}

.info-service-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  text-align: left;
  width: 100%;
}

.info-service-steps li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #4a4a4a;
  line-height: 1.4;
}

.info-service-steps li:last-child {
  margin-bottom: 0;
}

.info-service-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--gold-dark);
  border-radius: 50%;
}

.info-service-steps li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 5px;
  height: 3px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
}

.info-gallery {
  padding: 0;
  background: #FFF5F5;
  border-bottom: 2px solid var(--black);
}

.info-gallery-header {
  background: white;
  padding: 15px 15px 0 15px;
}

.info-gallery--alt {
  background: #FFECEC;
}

.info-gallery-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  color: var(--black);
}

.info-gallery-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  margin: 4px 0 15px 0;
  padding-bottom: 15px;
  color: var(--gold-dark);
  border-bottom: 1px solid #ddd;
}

.info-gallery-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 10px 4px;
  justify-items: center;
  align-items: start;
  padding: 20px 15px;
}

.info-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.info-gallery-flow > :nth-child(1) { grid-column: 1; grid-row: 1; }
.info-gallery-flow > :nth-child(2) { grid-column: 2; grid-row: 1; }
.info-gallery-flow > :nth-child(3) { grid-column: 3; grid-row: 1; }
.info-gallery-flow > :nth-child(4) { display: none; }
.info-gallery-flow > :nth-child(5) { grid-column: 1; grid-row: 2; }
.info-gallery-flow > :nth-child(6) { grid-column: 2; grid-row: 2; }
.info-gallery-flow > :nth-child(7) { grid-column: 3; grid-row: 2; }
.info-gallery-arrow {
  display: flex;
  align-self: center;
  padding-top: 0;
  font-size: 1rem;
  color: var(--gold-dark);
}

.info-gallery-image {
  position: relative;
  width: 170px;
  height: 226px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  border: 2px solid var(--black);
}

.info-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.info-gallery-step {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  background: var(--black);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.info-gallery-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FFE0E0 0%, #FFF5F5 100%);
}

.info-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--black);
  text-align: center;
  margin: 0;
  padding: 6px 4px;
  background: white;
  border-top: 1px solid var(--black);
}

.info-gallery-arrow {
  font-size: 1.2rem;
  color: var(--gold-dark);
  font-weight: bold;
  padding-top: 85px;
  flex-shrink: 0;
}

.info-gallery-hint {
  display: none;
}

@media (min-width: 768px) {
  .info-gallery {
    padding: 40px 30px;
  }

  .info-gallery-title {
    font-size: 1.5rem;
  }

  .info-gallery-subtitle {
    font-size: 1rem;
    margin: 8px 0 30px 0;
  }

  .info-gallery-flow {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
  }

  .info-gallery-flow > :nth-child(1),
  .info-gallery-flow > :nth-child(2),
  .info-gallery-flow > :nth-child(3),
  .info-gallery-flow > :nth-child(4),
  .info-gallery-flow > :nth-child(5),
  .info-gallery-flow > :nth-child(6),
  .info-gallery-flow > :nth-child(7) {
    display: flex;
    grid-column: auto;
    grid-row: auto;
  }

  .info-gallery-item {
    gap: 10px;
  }

  .info-gallery-image {
    width: 140px;
    height: 240px;
    border-radius: 16px;
    border: 3px solid var(--black);
  }

  .info-gallery-step {
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .info-gallery-caption {
    font-size: 0.75rem;
    padding: 8px 6px;
  }

  .info-gallery-arrow {
    font-size: 1.5rem;
    padding-top: 100px;
    align-self: auto;
  }

  .info-band--hero {
    padding: 0 20px;
    height: 50px;
  }

  .info-hero-heart {
    width: 40px;
    height: 40px;
  }

  .info-hero-title {
    font-size: 1.3rem;
  }
}

.inicio-container {
  @apply overflow-x-hidden;
}

.inicio-title-section {
  padding: 1rem 0;
  text-align: center;
  background: #f9fafb;
}

.inicio-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 340px;
}

.inicio-banner--no-overlay {
  min-height: auto;
}

.inicio-banner--no-overlay .inicio-banner-image {
  position: static;
  width: 100%;
  height: auto;
}

.inicio-banner-image {
  @apply absolute inset-0 w-full h-full object-contain;
  object-position: center bottom;
}

.inicio-banner-logo-container {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 95%;
  max-width: 700px;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inicio-button-section {
  @apply p-0 bg-gray-50 text-center;
}

.inicio-button-container {
  @apply relative z-10 text-center px-0 sm:px-2 flex flex-col items-center gap-4 w-full;
}

.inicio-button-container #button-portal,
.inicio-button-container #button-portal button,
.inicio-button-container .btn-hero {
  width: 100%;
  max-width: 350px;
}

.inicio-button-description-text {
  @apply font-black mx-auto mb-0 px-2 leading-none;
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 3.5rem);
  background: linear-gradient(135deg, var(--pink-deep) 0%, #9b59b6 50%, var(--pink-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  width: 100%;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.inicio-button-description-text br {
  display: block;
}

.inicio-description-cards-section {
  @apply py-6;
  padding-inline: 10px;
}

.inicio-description-cards-container {
  @apply max-w-6xl mx-auto;
}

.inicio-cards-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
}

@media (max-width: 639px) {
  .inicio-cards-row {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

.inicio-card-link,
.inicio-feature-link {
  text-decoration: none;
  color: inherit;
  display: contents;
}

.inicio-card {
  flex: 1;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  border: 3px solid #f9a8d4;
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

@media (max-width: 639px) {
  .inicio-card {
    max-width: 100%;
    width: 100%;
  }
}

.inicio-card:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 20, 147, 0.3);
}

.inicio-card img {
  @apply w-full h-full object-cover;
}

.inicio-feature-section {
  @apply w-full py-4 bg-white text-center;
  cursor: pointer;
}

.inicio-feature-title {
  @apply font-black mx-auto mb-3 px-4 leading-none;
  text-align: center;
  font-size: clamp(1.3rem, 5vw, 2rem);
  background: linear-gradient(135deg, var(--pink-deep) 0%, #9b59b6 50%, var(--pink-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.inicio-feature-image {
  @apply mx-auto;
  width: calc(100% - 2rem);
  max-width: 400px;
  border-radius: 20px;
  overflow: hidden;
  border: 4px solid #f9a8d4;
  box-shadow: 0 8px 24px rgba(255, 20, 147, 0.25);
}

.inicio-feature-image img {
  @apply w-full h-auto;
}

.inicio-cta-banner-link {
  text-decoration: none;
  display: block;
}

.inicio-cta-banner {
  @apply w-full py-4 sm:py-8;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #FF1493 0%, #9b59b6 50%, #FF1493 100%);
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
  border-top: 2px solid #000;
  cursor: pointer;
  transition: all 0.3s ease;
}

.inicio-cta-banner:hover {
  filter: brightness(1.1);
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.inicio-cta-text {
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(0.6rem, 2.8vw, 2.5rem);
  color: #fff;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.3);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
  padding: 0 0.5rem;
  white-space: nowrap;
}

.inicio-cta-banner:hover .inicio-cta-text {
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.5);
}

.inicio-brand-banners {
  @apply w-full py-6;
  background: #ffffff;
}

.brand-banners-container {
  @apply flex justify-center items-center gap-2 sm:gap-4;
  max-width: 100%;
  padding: 0 1rem;
}

.brand-banner {
  @apply flex-1 text-center font-black uppercase tracking-wider;
  font-size: clamp(2rem, 8vw, 5rem);
  padding: 0.5rem 1rem;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.brand-banner:hover {
  transform: scale(1.05);
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

.brand-banner--love {
  color: #ff1493;
}

.brand-banner--in {
  color: #ffffff;
}

.brand-banner--block {
  color: #ff1493;
}

.btn-footer-black {
  @apply px-4 py-1 font-semibold text-sm transition-all duration-200;
  background: white;
  color: black;
  border: 2px solid black;
  min-width: 90px;
}

.btn-footer-black:hover {
  background: black;
  color: white;
}

.inicio-parcela-section {
  @apply flex flex-col justify-center items-center min-h-[150px] sm:min-h-[250px] lg:min-h-[220px] px-4 sm:px-6 text-center py-4 gap-6;
}

.inicio-parcela-container {
  @apply flex flex-col items-center gap-6;
}

.inicio-parcela-title {
  @apply font-black leading-tight text-[var(--pink-light)] tracking-wide sm:whitespace-nowrap;
  font-size: clamp(2rem, 10vw, 4rem);
  text-shadow:
    2px 2px 0 var(--black),
    -1px -1px 0 var(--black),
    1px -1px 0 var(--black),
    -1px 1px 0 var(--black),
    0 0 8px rgba(0, 0, 0, 0.3);
}

.inicio-typing-section {
  @apply relative w-full h-[360px] sm:h-[420px] lg:h-[600px] overflow-hidden;
  border-bottom: 1px solid black;
}

.pago-container {
  @apply w-full flex flex-col items-center justify-start px-4 py-8 gap-4 flex-1;
  background: linear-gradient(180deg, #FDF8F3 0%, #fff5f8 100%);
}

.pago-card {
  @apply w-full max-w-lg bg-white rounded-xl overflow-hidden;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0px var(--black);
  animation: fadeInScale 0.3s ease-out;
}

.pago-card--checkout {
  @apply max-w-lg;
}

.pago-checkout__grid {
  display: contents;
}

.pago-checkout__main {
  @apply flex flex-col gap-5;
}

.pago-checkout__sidebar {
  @apply flex flex-col gap-4 border border-black rounded-lg p-4;
}

.pago-checkout__sidebar .auth-notice {
  font-size: 11px;
}

@media (min-width: 768px) {
  .pago-card--checkout {
    max-width: 56rem;
  }

  .pago-checkout__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .pago-checkout__sidebar {
    position: sticky;
    top: 1rem;
  }

  .pago-checkout__sidebar .pago-section__grid {
    grid-template-columns: 1fr;
  }

  .pago-checkout__sidebar .pago-card__actions {
    @apply border-t-0 mt-0 pt-0;
  }
}

.pago-card__header {
  @apply flex items-center justify-center gap-3 px-6 py-4 border-b-2 border-black;
}

.pago-card__header--auth {
  @apply bg-blue-50;
}

.pago-card__header--auth svg {
  @apply text-blue-600;
}

.pago-card__header--payment {
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
}

.pago-card__header--payment svg {
  @apply text-white;
}

.pago-card__header--payment .pago-card__title {
  @apply text-white;
}

.pago-card__header--error {
  @apply bg-red-50 flex-col py-6;
}

.pago-card__header--error svg {
  @apply text-red-500;
}

.pago-card__header--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.pago-card__title {
  @apply text-lg font-bold m-0;
  color: var(--gray-dark);
}

.pago-card__body {
  @apply p-6 flex flex-col gap-5;
}

.pago-card__text {
  @apply text-sm text-gray-600 text-center leading-relaxed m-0;
}

.pago-card__actions {
  @apply flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-100 mt-2;
}

.pago-card__actions button {
  @apply flex-1;
}

.pago-card__header--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.pago-auth-wrapper {
  @apply flex justify-center pt-4;
}

.pago-section {
  @apply flex flex-col gap-2;
}

.pago-section__grid {
  @apply grid gap-4;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pago-section__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.pago-section__title {
  @apply text-xs font-semibold uppercase tracking-wider m-0 flex items-center gap-2;
  color: var(--gray-medium);
}

.pago-section__hint {
  @apply text-xs font-normal normal-case tracking-normal;
  color: var(--gray-light);
}

.pago-summary {
  @apply rounded-lg p-3 flex flex-col gap-2;
  background: linear-gradient(135deg, #fff5f8 0%, #fdf2f8 100%);
  border: 1px solid var(--pink-light);
}

.pago-summary__row {
  @apply flex justify-between items-center;
}

.pago-summary__label {
  @apply text-sm text-gray-500;
}

.pago-summary__value {
  @apply text-sm font-medium text-gray-700;
}

.pago-debug {
  @apply w-full max-w-lg text-xs;
}

.pago-debug summary {
  @apply cursor-pointer text-gray-400 hover:text-gray-600;
}

.pago-debug pre {
  @apply mt-1 p-2 bg-gray-800 text-green-400 rounded text-[10px] overflow-x-auto;
  max-height: 150px;
  overflow-y: auto;
}

.pago-country-select {
  @apply relative;
}

.pago-country-trigger {
  @apply w-full flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer transition-all duration-200;
  border: 2px solid #e5e7eb;
  background: white;
}

.pago-country-trigger:hover {
  @apply border-pink-300;
}

.pago-country-trigger--open {
  border-color: var(--pink-deep);
  border-radius: 0.5rem 0.5rem 0 0;
}

.pago-country-trigger__name {
  @apply flex-1 text-sm font-medium text-gray-700 text-left;
}

.pago-country-trigger__vat {
  @apply text-xs px-2 py-0.5 rounded-full;
  background: var(--pink-light);
  color: white;
}

.pago-country-trigger__placeholder {
  @apply flex-1 text-sm text-gray-400 text-left;
}

.pago-country-trigger svg:last-child {
  @apply text-gray-400 transition-transform duration-200;
}

.pago-country-trigger--open svg:last-child {
  @apply rotate-180;
}

.pago-country-dropdown {
  @apply absolute z-20 w-full bg-white rounded-b-lg overflow-hidden;
  border: 1px solid #fce7f3;
  border-top: 1px solid #f3f4f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 280px;
  overflow-y: auto;
}

.pago-country-dropdown::-webkit-scrollbar {
  width: 6px;
}

.pago-country-dropdown::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

.pago-country-dropdown::-webkit-scrollbar-thumb {
  @apply bg-pink-300 rounded-full;
}

.pago-country-item {
  @apply w-full flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors duration-150 text-left;
  border: none;
  background: white;
  border-radius: 0;
}

.pago-country-item:hover {
  background: rgba(255, 20, 147, 0.05);
}

.pago-country-item--selected {
  background: rgba(255, 20, 147, 0.08) !important;
}

.pago-country-item__name {
  @apply flex-1 text-sm text-gray-700;
}

.pago-country-item__vat {
  @apply text-xs text-gray-400;
}

.pago-country-item__check {
  @apply w-5 h-5 rounded-full flex items-center justify-center;
  background: var(--pink-deep);
}

.pago-country-item__check svg {
  @apply w-3 h-3 text-white;
}

.pago-country-loading {
  @apply flex items-center justify-center gap-3 py-4 text-sm text-gray-500;
}

.pago-flag-icon {
  @apply flex-shrink-0;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pago-pricing {
  @apply bg-gray-50 rounded-lg p-4 flex flex-col gap-2;
}

.pago-pricing__row {
  @apply flex justify-between items-center text-sm;
}

.pago-pricing__row--vat {
  @apply text-gray-500 pb-2;
  border-bottom: 1px dashed #e5e7eb;
}

.pago-pricing__row--total {
  @apply pt-2 font-bold text-base;
}

.pago-pricing__total {
  @apply text-xl font-bold;
  color: var(--pink-deep);
}

.pago-security {
  @apply flex items-center justify-center gap-2 py-2 px-4 rounded-full text-xs;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.pago-security svg {
  @apply w-3.5 h-3.5;
}

.pago-preparing {
  @apply flex items-center justify-center gap-3 py-3 px-4 rounded-lg text-sm;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.pago-loading-spinner {
  @apply w-12 h-12 rounded-full mb-4;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--pink-deep);
  animation: spin 1s linear infinite;
}

.pago-loading-spinner--small {
  @apply w-5 h-5 mb-0;
  border-width: 2px;
}

.pago-success-title {
  color: #059669;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pago-error-title {
  @apply text-lg font-bold text-gray-800 text-center m-0 mb-2;
}

.pago-btn-pay {
  @apply relative overflow-hidden;
}

.pago-btn-pay::before {
  content: '';
  @apply absolute inset-0 opacity-0 transition-opacity duration-300;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.pago-btn-pay:hover:not(:disabled)::before {
  @apply opacity-100;
  animation: shimmer 1.5s infinite;
}

.pago-actions-column {
  @apply flex flex-col;
  gap: 0.75rem;
}

.pago-actions-column .pago-btn-pay {
  @apply w-full;
}

.pago-back-row {
  @apply flex justify-end;
}

.pago-btn-back {
  @apply text-xs;
  padding: 0.25rem 0.75rem;
  font-family: 'Poppins', system-ui, sans-serif;
}

.pago-billing__title {
  @apply text-xs font-semibold text-gray-700 mb-2 mt-1 flex items-center gap-1 flex-wrap;
}
.pago-billing__title .pago-section__hint {
  @apply w-auto mt-0 ml-auto;
}

.pago-billing__form {
  @apply flex flex-col gap-3;
}

.pago-billing__input {
  @apply w-full px-3 py-2 rounded-lg text-sm text-gray-700 transition-all duration-200;
  border: 1px solid #e5e7eb;
  background: white;
}

.pago-billing__input:focus {
  @apply outline-none;
  border-color: var(--pink-deep);
}

.pago-billing__input::placeholder {
  @apply text-gray-400;
}

.pago-billing__actions {
  @apply pt-2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pago-billing__actions button {
  @apply flex-1;
}

.pago-billing__error {
  @apply text-sm text-red-500 mt-1;
}

@media (min-width: 640px) {
  .pago-billing__title {
    @apply text-sm mb-2 gap-2;
  }

  .pago-billing__form {
    @apply gap-3;
  }

  .pago-billing__input {
    @apply px-4 py-3;
    border-width: 2px;
  }

  .pago-billing__actions {
    @apply justify-end;
  }

  .pago-billing__actions button {
    flex: none;
  }
}

.pago-billing-view {
  @apply flex flex-col items-center justify-center gap-4 p-4 rounded-lg;
  background: linear-gradient(135deg, #fff5f8 0%, #fdf2f8 100%);
  border: 1px solid var(--pink-light);
}

.pago-billing-view__data {
  @apply w-full max-w-sm flex flex-col;
}
.pago-billing-view__data:empty {
  @apply hidden;
}

.pago-billing-view__row {
  @apply flex justify-between items-center text-sm py-2;
  border-bottom: 1px dashed #f3e0e8;
}

.pago-billing-view__row:last-child {
  border-bottom: none;
}

.pago-billing-view__label {
  @apply text-gray-500;
}

.pago-billing-view__value {
  @apply font-medium text-gray-700;
}

.pago-billing-view__country {
  @apply flex items-center gap-2;
}

.factura-container {
  @apply space-y-4;
}

.factura-billing-wrapper {
  @apply max-w-xl mx-auto overflow-hidden rounded-lg;
  border: 1px solid var(--pink-light);
  background: white;
}

.factura-billing-wrapper .pago-section {
  @apply p-0;
  background: white;
  border: none;
  box-shadow: none;
}

.factura-billing-wrapper .pago-billing__title {
  @apply m-0 px-4 py-2 text-xs font-semibold text-gray-700;
  background: linear-gradient(135deg, #fff0f5 0%, #fdf2f8 100%);
  border-bottom: 1px solid var(--pink-light);
}

.factura-billing-wrapper .pago-country-select {
  @apply p-4;
}

.factura-billing-wrapper .pago-country-trigger {
  @apply w-full;
}

.factura-billing-wrapper .pago-country-dropdown {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.factura-billing-wrapper .pago-country-trigger__vat {
  white-space: nowrap;
}

.factura-billing-wrapper .pago-section > button {
  @apply w-full rounded-none m-0 text-xs;
  background: linear-gradient(135deg, #fff0f5 0%, #fdf2f8 100%);
  border: none;
}

.factura-billing-wrapper .pago-billing__form {
  @apply p-4 gap-2;
}

.factura-billing-wrapper .pago-billing__input {
  @apply py-2 px-3 text-xs;
}

.factura-billing-wrapper .pago-billing__actions {
  margin: 0;
  padding: 0;
}

.factura-billing-wrapper .pago-billing__actions button {
  @apply rounded;
}

.factura-list {
  @apply grid gap-2;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .factura-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .factura-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.factura-item {
  @apply flex items-center justify-between px-3 py-2 rounded-lg bg-white transition-all duration-200;
  border: 1px solid #fce7f3;
}

.factura-item:hover {
  @apply shadow-sm;
  border-color: var(--pink-light);
}

.factura-item--pending {
  @apply opacity-60;
}

.factura-item__number {
  @apply text-xs font-medium text-gray-700;
  font-variant-numeric: tabular-nums;
}

.factura-item__status {
  @apply text-xs text-gray-400 italic;
}

.factura-item__actions {
  @apply flex items-center gap-1;
}

.factura-item__pdf {
  @apply inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-md transition-colors duration-150 no-underline;
  color: var(--pink-deep);
  background: rgba(255, 20, 147, 0.08);
}

.factura-item__pdf:hover {
  background: rgba(255, 20, 147, 0.15);
}

.factura-item__resend {
  @apply inline-flex items-center gap-1 text-xs text-gray-500 transition-colors duration-150 bg-transparent border-0 cursor-pointer px-2 py-1 rounded-md;
}

.factura-item__resend:hover {
  @apply bg-gray-100 text-gray-700;
}

.crypto-pay {
  @apply w-full max-w-4xl mx-auto px-3 py-2 sm:px-0 sm:py-3;
}

.crypto-pay__card {
  @apply bg-white rounded-lg overflow-hidden;
  border: 1px solid #fce7f3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.crypto-pay__card--error {
  @apply text-center py-8 px-6;
  border-color: #ef4444;
  box-shadow: 4px 4px 0px #dc2626;
}

.crypto-pay__empty-cart {
  @apply flex flex-col items-center text-center py-4 px-4 gap-4;
}

.crypto-pay__empty-cart-text {
  @apply text-gray-600;
}

.crypto-pay__error-icon {
  @apply text-red-500 mb-4 flex justify-center;
}

.crypto-pay__error-text {
  @apply text-gray-700 mb-6;
}

.crypto-pay__wallet-info {
  @apply flex items-center gap-1 px-2 py-0.5;
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-bottom: 1px solid #a7f3d0;
}

.crypto-pay__wallet-address {
  @apply font-mono text-xs text-gray-700 flex-1 text-center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.crypto-pay__wallet-icon {
  @apply p-0.5 rounded transition-all cursor-pointer flex-shrink-0;
  background: transparent;
  border: none;
}

.crypto-pay__wallet-icon svg {
  width: 12px;
  height: 12px;
}

.crypto-pay__wallet-icon:hover {
  @apply bg-emerald-200;
}

.crypto-pay__wallet-icon:active {
  transform: scale(0.95);
}

.crypto-pay__connect-banner {
  @apply flex items-center justify-center px-4 py-4;
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%);
  border-bottom: 2px solid var(--pink-deep);
}

.crypto-pay__connect-btn {
  @apply flex items-center gap-2 px-6 py-3 text-sm font-semibold text-white rounded-lg;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  border: none;
  transition: all 150ms ease;
}

.crypto-pay__connect-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

.crypto-pay__connect-btn svg {
  @apply w-5 h-5;
}

.crypto-pay__provider {
  @apply flex items-center justify-center gap-1.5 px-3 py-1.5 text-[10px] text-pink-700 font-medium;
  background-color: #fff5f8;
  border-bottom: 1px solid #fce7f3;
}

.crypto-pay__provider svg {
  @apply w-3 h-3 text-pink-500;
}

.crypto-pay__section {
  @apply p-3;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
}

.crypto-pay__section-title {
  @apply text-xs font-semibold text-gray-800 mb-2;
}

.crypto-pay__coins {
  @apply flex flex-col gap-2;
}

.crypto-pay__coin {
  @apply w-full px-3 py-2 rounded-md flex items-center justify-between transition-all duration-200;
  background: #fefefe;
  border: 1px solid #fce7f3;
}

.crypto-pay__coin:hover:not(:disabled) {
  border-color: var(--pink-deep);
  background: #fdf2f8;
}

.crypto-pay__coin:active:not(:disabled) {
  transform: scale(0.99);
}

.crypto-pay__coin--disabled {
  @apply opacity-50 cursor-not-allowed;
  background: #f1f5f9;
}

.crypto-pay__coin-name {
  @apply text-sm font-bold text-gray-800;
}

.crypto-pay__coin-right {
  @apply text-right;
}

.crypto-pay__coin-balance {
  @apply text-xs font-normal text-gray-600;
}

.crypto-pay__coin-balance--low {
  @apply text-red-500;
}

.crypto-pay__coin-loading {
  @apply text-gray-400 text-sm;
}

.crypto-pay__notice {
  @apply flex items-center gap-2 p-3 rounded-lg mb-4 text-sm;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.crypto-pay__allowance-text {
  @apply text-sm text-gray-600 mb-4;
  text-align: justify;
}

.crypto-pay__allowance-buttons {
  @apply grid grid-cols-2 gap-3;
}

.crypto-pay__processing {
  @apply flex items-center justify-center gap-3 p-4 text-sm text-gray-600;
}

.crypto-pay__loading {
  @apply flex flex-col items-center justify-center py-12 px-6;
}

.crypto-pay__loading-text {
  @apply text-lg font-semibold text-gray-800 mt-4 mb-1;
}

.crypto-pay__loading-subtext {
  @apply text-sm text-gray-500;
}

.crypto-pay__spinner {
  @apply w-12 h-12 rounded-full;
  border: 3px solid #fce7f3;
  border-top-color: var(--pink-deep);
  animation: spin 1s linear infinite;
}

.crypto-pay__spinner--small {
  @apply w-5 h-5;
  border-width: 2px;
}

.crypto-pay__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #db2777;
  font-weight: 500;
  padding: 0.75rem;
  transition: color 0.2s;
}

.crypto-pay__back-btn:hover {
  color: #be185d;
}

.crypto-pay__section--no-wallet {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
}

.crypto-pay__option-card {
  padding: 1.25rem;
  border-radius: 12px;
  text-align: center;
}

.crypto-pay__option-card--primary {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border: 2px solid #f9a8d4;
  padding: 1.5rem;
}

.crypto-pay__option-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.crypto-pay__option-title {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.crypto-pay__option-desc {
  text-align: justify;
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.crypto-pay__section-title.text-pink-600 {
  color: var(--pink-deep);
}

.aviso-signer {
  background: #fef3c7;
  color: #92400e;
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid #fcd34d;
}

.auth-notice {
  background: #fef3c7;
  color: #92400e;
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #fcd34d;
}

.account-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: #fdf2f8;
}

.account-bar__separator {
  display: none;
}

.account-bar__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: white;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #fce7f3;
  box-shadow: 0 1px 2px rgba(157, 23, 77, 0.05);
  transition: all 0.15s ease;
}

.account-bar__item:hover {
  border-color: #f9a8d4;
}

.account-bar__item svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  padding: 2px;
  background: #fdf2f8;
  border-radius: 4px;
  color: var(--pink-deep);
}

.account-bar__wallet,
.account-bar__email {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.account-bar__email {
  font-family: inherit;
  color: #4b5563;
  max-width: 140px;
}

.account-bar__item--wallet {
  justify-content: center;
}

.account-bar__eth-icon {
  width: 18px;
  height: 18px;
  padding: 3px;
  background: linear-gradient(135deg, #627eea, #3b5998);
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
}

.account-bar__wallet-prefix {
  color: #9ca3af;
}

.account-bar__divider-wrapper {
  display: none;
}

.account-bar__divider {
  width: 80%;
  max-width: 260px;
  height: 1px;
  background: linear-gradient(to right, transparent, #f9a8d4, transparent);
}

@media (min-width: 480px) {
  .account-bar {
    gap: 12px;
    padding: 14px 20px;
  }

  .account-bar__item {
    width: auto;
    flex: 1;
    max-width: 200px;
  }
}

@media (min-width: 640px) {
  .account-bar__divider {
    width: 50%;
    max-width: 400px;
  }
}

.user-guest-title-wrapper {
  background: #fff5f8;
  text-align: center;
  padding: 16px 24px 0;
}

.user-guest-section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  padding: 48px 24px;
  background: linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);
}

.user-guest-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 400px;
}

.user-guest-image {
  width: 160px;
  height: auto;
  margin-bottom: 24px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.user-guest-title {
  font-family: 'Dancing Script', cursive;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pink-deep);
  margin: 0 0 15px 0;
  line-height: 1.2;
  white-space: nowrap;
}

.user-guest-description {
  font-size: 1rem;
  color: var(--gray-medium);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

@media (min-width: 640px) {
  .user-guest-section {
    padding: 64px 32px;
  }

  .user-guest-image {
    width: 200px;
    margin-bottom: 32px;
  }

  .user-guest-title {
    font-size: 2.5rem;
  }

  .user-guest-description {
    font-size: 1.125rem;
  }
}

.vale-header {
  @apply relative z-10 bg-white border-b-2 border-black;
}

.vale-title {
  @apply text-center py-1 px-2;
}

.vale-title__text {
  @apply font-handwritten text-xl sm:text-3xl text-pink-500;
}

.compra-vale {
  @apply relative z-10 flex items-center justify-center px-4 py-8;
  min-height: 80vh;
}

.compra-vale__card {
  @apply w-full max-w-md bg-white overflow-hidden;
  border: 2px solid var(--black);
  box-shadow: var(--shadow-retro);
}

.compra-vale__header {
  @apply flex items-center gap-3 px-4 py-3;
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
  border-bottom: 2px solid var(--black);
}

.compra-vale__bridge-icon {
  @apply flex items-center justify-center w-10 h-10 rounded-full bg-white;
  border: 2px solid var(--pink-dark);
}

.compra-vale__bridge-icon svg {
  @apply w-5 h-5;
  color: var(--pink-deep);
}

.compra-vale__bridge-name {
  @apply text-lg font-bold text-white m-0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.compra-vale__body {
  @apply p-5 flex flex-col gap-4;
  background: #FAFAFA;
}

.compra-vale__description {
  @apply text-sm font-medium text-gray-700 text-center m-0;
}

.compra-vale__subdesc {
  @apply text-xs text-gray-500 text-center m-0 -mt-2;
}

.compra-vale__input-group {
  @apply flex flex-col items-center gap-2 mt-2;
}

.compra-vale__label {
  @apply text-xs font-semibold text-gray-600 uppercase tracking-wide;
}

.compra-vale__input-wrapper {
  @apply flex items-center gap-0;
  border: 2px solid var(--pink-border);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.compra-vale__stepper {
  @apply flex items-center justify-center w-10 h-10 bg-gray-50 transition-all duration-150;
  border: none;
  cursor: pointer;
  border-radius: 0;
}

.compra-vale__stepper:hover:not(:disabled) {
  background: var(--pink-light);
}

.compra-vale__stepper:disabled {
  @apply opacity-40 cursor-not-allowed;
}

.compra-vale__stepper svg {
  @apply w-4 h-4;
  color: var(--pink-deep);
}

.compra-vale__stepper--minus {
  border-right: 1px solid var(--pink-border);
}

.compra-vale__stepper--plus {
  border-left: 1px solid var(--pink-border);
}

.compra-vale__input {
  @apply w-16 h-10 text-center text-lg font-bold text-gray-800;
  border: none;
  background: white;
  -moz-appearance: textfield;
}

.compra-vale__input::-webkit-outer-spin-button,
.compra-vale__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.compra-vale__input:focus {
  outline: none;
}

.compra-vale__available {
  @apply text-xs text-gray-500;
}

.compra-vale__price-section {
  @apply mt-4 pt-4 flex flex-col gap-2;
  border-top: 1px dashed var(--pink-border);
}

.compra-vale__price-row {
  @apply flex items-center justify-between text-sm text-gray-600;
}

.compra-vale__price-label,
.compra-vale__price-total-label {
  @apply font-medium;
}

.compra-vale__price-unit {
  @apply font-semibold text-gray-700;
}

.compra-vale__price-total-row {
  @apply flex items-center justify-between text-lg font-bold;
  color: var(--pink-deep);
}

.compra-vale__price-total {
  @apply text-xl;
}

.compra-vale__footer {
  @apply flex gap-3 p-4;
  background: white;
  border-top: 2px solid var(--black);
}

.compra-vale__btn {
  @apply flex-1 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold transition-all duration-150;
  border-radius: 6px;
}

.compra-vale__btn--primary {
  @apply text-white;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  border: 2px solid var(--pink-dark);
  box-shadow: 2px 2px 0px var(--black);
}

.compra-vale__btn--primary:hover:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--black);
}

.compra-vale__btn--primary:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.compra-vale__btn--primary svg {
  @apply w-4 h-4;
}

.compra-vale__btn--secondary {
  @apply text-gray-700;
  background: white;
  border: 2px solid var(--gray-light);
  box-shadow: 2px 2px 0px var(--gray-light);
}

.compra-vale__btn--secondary:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--gray-light);
  background: #f5f5f5;
}

.compra-vale__error {
  @apply flex flex-col items-center justify-center gap-4 p-8 bg-white max-w-sm mx-auto text-center;
  border: 2px solid var(--black);
  box-shadow: var(--shadow-retro);
}

.compra-vale__error-icon {
  @apply w-16 h-16 flex items-center justify-center rounded-full bg-red-50;
}

.compra-vale__error-icon svg {
  @apply w-8 h-8 text-red-500;
}

.compra-vale__error-text {
  @apply text-sm text-gray-700 font-medium m-0;
}

.consume-vale {
  @apply relative z-10 flex items-center justify-center px-4 py-8;
  min-height: 80vh;
}

.consume-vale__card {
  @apply w-full max-w-sm bg-white p-8 flex flex-col items-center text-center gap-4;
  border: 2px solid var(--black);
  box-shadow: var(--shadow-retro);
}

.consume-vale__card--success {
  box-shadow: var(--shadow-retro-pink);
  animation: fadeInScale 0.3s ease-out;
  overflow: hidden;
}

.consume-vale__card--loading {
  box-shadow: var(--shadow-retro-pink);
  overflow: hidden;
}

.consume-vale__card--error {
  border-color: #EF4444;
  box-shadow: 4px 4px 0px #EF4444;
  overflow: hidden;
}

.consume-vale__header {
  @apply flex items-center gap-3 px-4 py-3 w-full;
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
  border-bottom: 2px solid var(--black);
  margin: -2rem -2rem 0 -2rem;
  width: calc(100% + 4rem);
}

.consume-vale__header--error {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.consume-vale__header-icon {
  @apply flex items-center justify-center w-10 h-10 rounded-full bg-white;
  border: 2px solid var(--pink-dark);
}

.consume-vale__header-icon--error {
  border-color: #DC2626;
}

.consume-vale__header-icon svg {
  @apply w-5 h-5;
  color: var(--pink-deep);
}

.consume-vale__header-icon--error svg {
  color: #EF4444;
}

.consume-vale__bridge-name {
  @apply text-lg font-bold text-white m-0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.consume-vale__body {
  @apply flex flex-col items-center text-center gap-4 pt-6;
}

.consume-vale__icon {
  @apply w-20 h-20 flex items-center justify-center rounded-full;
}

.consume-vale__icon svg {
  @apply w-10 h-10;
}

.consume-vale__icon--success {
  background: linear-gradient(135deg, var(--pink-light), #FFB6C1);
}

.consume-vale__icon--success svg {
  color: var(--pink-deep);
}

.consume-vale__icon--loading {
  @apply bg-pink-50;
  animation: pulse 2s infinite;
}

.consume-vale__icon--loading svg {
  color: var(--pink-deep);
}

.consume-vale__icon--error {
  @apply bg-red-50;
}

.consume-vale__icon--error svg {
  @apply text-red-500;
}

.consume-vale__title {
  @apply text-lg font-bold text-gray-800 m-0;
}

.consume-vale__title--error {
  @apply text-red-600;
}

.consume-vale__gift-message {
  font-family: 'Dancing Script', cursive;
  font-size: 1.25rem;
  color: #4a4a4a;
  padding: 1rem 1.25rem;
  background: rgba(255, 182, 193, 0.15);
  border-radius: 8px;
  line-height: 1.6;
}

.consume-vale__separator {
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink-light), transparent);
}

.consume-vale__message {
  @apply text-sm text-gray-600 m-0;
  text-align: justify;
}

.consume-vale__bridge-name-inline {
  color: var(--pink-deep);
  font-weight: 700;
}

.consume-vale__actions {
  @apply flex flex-col gap-2 w-full mt-4;
}

.consume-vale__btn {
  @apply w-full px-4 py-2.5 text-sm font-semibold transition-all duration-150;
  border-radius: 6px;
}

.consume-vale__btn--primary {
  @apply text-white;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  border: 2px solid var(--pink-dark);
  box-shadow: 2px 2px 0px var(--black);
}

.consume-vale__btn--primary:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--black);
}

.consume-vale__btn--secondary {
  @apply text-gray-600;
  background: white;
  border: 2px solid var(--gray-light);
}

.consume-vale__btn--secondary:hover {
  background: #f5f5f5;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.url-error {
  @apply relative z-10 flex items-center justify-center px-4 py-8;
  min-height: 80vh;
}

.url-error__card {
  @apply w-full max-w-sm bg-white flex flex-col items-center text-center;
  border: 2px solid #EF4444;
  box-shadow: 4px 4px 0px #EF4444;
  overflow: hidden;
}

.url-error__header {
  @apply flex items-center gap-3 px-4 py-3 w-full;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border-bottom: 2px solid var(--black);
}

.url-error__header-icon {
  @apply flex items-center justify-center w-10 h-10 rounded-full bg-white;
  border: 2px solid #DC2626;
}

.url-error__header-icon svg {
  @apply w-5 h-5;
  color: #EF4444;
}

.url-error__title {
  @apply text-lg font-bold text-white m-0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.url-error__body {
  @apply flex flex-col items-center text-center gap-4 p-8;
}

.url-error__message {
  @apply text-sm text-gray-600 m-0;
}

.limpia-auth {
  @apply relative z-10 flex items-center justify-center px-4 py-8;
  min-height: 80vh;
}

.limpia-auth__card {
  @apply w-full max-w-sm bg-white flex flex-col items-center text-center;
  border: 2px solid var(--pink-dark);
  box-shadow: var(--shadow-retro-pink);
  overflow: hidden;
}

.limpia-auth__card--success {
  animation: fadeInScale 0.3s ease-out;
}

.limpia-auth__header {
  @apply flex items-center gap-3 px-4 py-3 w-full;
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
  border-bottom: 2px solid var(--black);
}

.limpia-auth__header--success {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
}

.limpia-auth__header-icon {
  @apply flex items-center justify-center w-10 h-10 rounded-full bg-white;
  border: 2px solid var(--pink-dark);
}

.limpia-auth__header-icon--success {
  border-color: #10B981;
}

.limpia-auth__header-icon svg {
  @apply w-5 h-5;
  color: var(--pink-deep);
}

.limpia-auth__header-icon--success svg {
  color: #10B981;
}

.limpia-auth__title {
  @apply text-lg font-bold text-white m-0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.limpia-auth__body {
  @apply flex flex-col items-center text-center gap-4 p-8;
}

.limpia-auth__message {
  @apply text-sm text-gray-600 m-0;
}

.modal-content:has(.default-modal) {
  max-width: 450px;
  width: 100%;
  padding: 0;
  border: 2px solid black;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.default-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 213px;
  border: 1px solid #1a1a1a;
  overflow: hidden;
}

.default-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
  border-bottom: 2px solid var(--pink-dark);
  position: relative;
  border-radius: 0;
}

.default-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: white;
  opacity: 0.8;
}
.default-modal-close:hover {
  opacity: 1;
}
.default-modal-close svg {
  width: 18px;
  height: 18px;
}

.default-modal-icon {
  width: 20px;
  height: 20px;
  color: white;
}

.default-modal-header--error {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  border-bottom: 2px solid #dc2626;
}

.default-modal-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: white;
}

.modal-content:has(.default-modal) > .modal-close-button {
  position: absolute;
  right: 10px;
  top: 0;
  height: 42px;
  display: flex;
  align-items: center;
  color: white;
  z-index: 10;
  font-size: 28px;
}

.default-modal-content {
  padding: 20px 16px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.default-modal-subtitle {
  font-size: 14px;
  color: var(--pink-dark);
  text-align: justify;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.modal-content:has(.pago-modal) {
  max-width: 450px;
  width: 100%;
  padding: 0;
  border: 2px solid black;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pago-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pago-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
  border-bottom: 2px solid var(--pink-dark);
  position: relative;
  border-radius: 0;
}

.pago-modal-icon {
  width: 20px;
  height: 20px;
  color: white;
}

.pago-modal-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: white;
}

.pago-modal .modal-close-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.pago-modal-content {
  padding: 20px 16px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pago-modal-subtitle {
  font-size: 14px;
  color: var(--pink-dark);
  text-align: center;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.pago-modal-footer {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 20, 147, 0.15);
  background: white;
  border-radius: 0;
}

.pago-modal-footer button {
  flex: 1;
  text-align: center;
}

.pago-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid rgba(255, 20, 147, 0.2);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pago-option-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--pink-deep);
}

.pago-option-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-dark);
}

.pago-option:hover {
  border-color: rgba(255, 20, 147, 0.4);
  background: rgba(255, 240, 245, 0.5);
}

.pago-option--selected {
  border-color: var(--pink-deep);
  background: rgba(255, 240, 245, 0.8);
}

.pago-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--pink-deep);
}

.default-modal-footer {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 20, 147, 0.15);
  background: #FAFAFA;
  border-radius: 0;
}

.default-modal-footer button {
  flex: 1;
  text-align: center;
}

.default-modal-footer--vertical {
  flex-direction: column;
}

.default-modal-label {
  @apply text-gray-600 text-sm font-medium mt-2;
}

.candado-form-section {
  @apply w-full flex flex-col items-center py-6 sm:py-10 px-3;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 105, 180, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #FFF5F7 0%, #FDF2F4 50%, #FFFFFF 100%);
}

.candado-form-wrapper {
  @apply w-full max-w-md mx-auto;
  animation: candadoEntrada 0.6s ease-out forwards;
}

.candado-polaroid {
  @apply bg-white p-3 pb-8;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.12);
  transform: rotate(-1deg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.candado-polaroid:hover {
  transform: rotate(0deg) scale(1.01);
  transition: transform 0.3s ease;
}

.candado-polaroid--flat {
  transform: none;
}

.candado-polaroid--flat:hover {
  transform: scale(1.01);
}

.candado-polaroid:focus-within {
  transform: rotate(0deg);
  transition: none;
}

.candado-polaroid-caption {
  @apply text-center mt-3 text-base tracking-widest uppercase font-medium;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
  color: #1a1a1a;
  letter-spacing: 0.2em;
}

.candado-cuerpo {
  @apply relative bg-white overflow-hidden;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
}


.candado-header-icon {
  width: 36px;
  height: 36px;
  color: white;
}

.candado-flip-container {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.candado-flip-card {
  position: relative;
  width: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.candado-flip-card--flipped {
  transform: rotateY(180deg);
}

.candado-flip-front,
.candado-flip-back {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.candado-flip-front {
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.candado-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotateY(180deg);
}

.candado-cuerpo--back {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.candado-form-content--back {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.candado-form-content--back .candado-label {
  flex-shrink: 0;
}

.candado-image-center-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.candado-form-content--back .candado-flip-button {
  flex-shrink: 0;
  margin-top: auto;
}

.candado-flip-button {
  @apply flex items-center justify-center gap-2 w-full py-3 mt-4;
  background: linear-gradient(135deg, #f8f4ff 0%, #fff0f5 100%);
  border: 2px dashed rgba(255, 20, 147, 0.3);
  border-radius: 12px;
  color: var(--pink-deep);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.candado-flip-button:hover {
  background: linear-gradient(135deg, #fff0f5 0%, #ffe4ec 100%);
  border-color: var(--pink-deep);
  transform: scale(1.02);
}

.candado-flip-button-icon {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.candado-flip-button:hover .candado-flip-button-icon {
  transform: rotate(180deg);
}

.candado-flip-button-icon--reverse {
  transform: scaleX(-1);
}

.candado-flip-button:hover .candado-flip-button-icon--reverse {
  transform: scaleX(-1) rotate(180deg);
}

.candado-flip-button-preview {
  @apply h-12 rounded-md object-cover;
}

.candado-footer-section {
  @apply mt-4 bg-white rounded-2xl p-4;
  border: 2px solid rgba(255, 20, 147, 0.2);
}

.candado-form-header {
  @apply flex items-center justify-center py-3;
  background: linear-gradient(180deg, rgba(255, 20, 147, 0.08) 0%, rgba(255, 20, 147, 0.02) 100%);
  border-bottom: 2px solid rgba(255, 20, 147, 0.15);
}

.candado-form-content {
  @apply p-4 space-y-4;
}

.candado-input-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 gap-4;
}

.candado-input-column {
  @apply flex flex-col;
}

.candado-label {
  @apply text-sm font-semibold flex items-center gap-2;
  color: var(--pink-dark);
}

.candado-label-icon {
  @apply w-4 h-4 opacity-70;
}

.candado-input {
  @apply mt-2 w-full px-4 py-3 text-sm transition-all duration-200;
  border: 2px solid rgba(255, 20, 147, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9FB 100%);
  color: var(--gray-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.candado-input::placeholder {
  color: rgba(255, 20, 147, 0.35);
}

.candado-input:focus {
  @apply outline-none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.1), 0 4px 12px rgba(255, 20, 147, 0.15);
}

.candado-textarea {
  @apply mt-2 w-full px-4 py-3 text-sm resize-none transition-all duration-200;
  border: 2px solid rgba(255, 20, 147, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9FB 100%);
  color: var(--gray-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.candado-textarea::placeholder {
  color: rgba(255, 20, 147, 0.35);
}

.candado-textarea:focus {
  @apply outline-none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.1), 0 4px 12px rgba(255, 20, 147, 0.15);
}

.candado-textarea-wrapper {
  @apply relative mt-2;
}

.candado-textarea-wrapper .candado-textarea {
  @apply mt-0;
  padding-bottom: 28px;
}

.candado-char-counter {
  @apply absolute text-xs font-medium;
  right: 12px;
  bottom: 10px;
  color: var(--pink-dark);
  opacity: 0.6;
  pointer-events: none;
}

.candado-date-input {
  @apply mt-2 w-full px-4 py-3 text-sm transition-all duration-200;
  border: 2px solid rgba(255, 20, 147, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9FB 100%);
  color: var(--gray-dark);
}

.candado-date-input::-webkit-calendar-picker-indicator {
  filter: invert(25%) sepia(90%) saturate(2000%) hue-rotate(310deg) brightness(95%) contrast(105%);
  cursor: pointer;
}

.candado-date-input:focus {
  @apply outline-none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.1), 0 4px 12px rgba(255, 20, 147, 0.15);
}

.candado-separator {
  @apply flex items-center gap-3 my-4;
}

.candado-separator-line {
  @apply flex-1;
  height: 1px;
  background-color: #000000;
}

.candado-separator-icon {
  @apply w-3 h-3;
  color: #FFB6C1;
}

.candado-separator-icon--lock {
  @apply w-3.5 h-3.5;
  color: var(--pink-deep);
}

.candado-checkbox-section {
  @apply relative flex items-stretch cursor-pointer transition-all duration-300 overflow-hidden;
  border: 1px solid #000000;
  background: #ffffff;
}

.candado-checkbox-section:hover {
  border-color: #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.candado-icon-box {
  @apply flex-shrink-0 flex items-center justify-center transition-all duration-300;
  width: 70px;
  background: #000000;
}

.candado-icon-box svg {
  @apply w-6 h-6 sm:w-7 sm:h-7 text-white;
}

.candado-icon-box--abierto {
  background: #333333;
}

.candado-checkbox-text {
  @apply flex-1 p-3;
  text-align: justify;
}

.candado-checkbox-title {
  @apply text-xs font-bold;
  color: #000000;
  display: inline;
}

.candado-checkbox-description {
  @apply text-xs leading-relaxed;
  color: #000000;
  display: inline;
}

.candado-voucher-applied {
  @apply flex flex-col gap-1 p-3 rounded-lg mt-4 mb-4;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
}

.candado-voucher-applied__header {
  @apply flex items-center gap-2;
}

.candado-voucher-applied__icon {
  @apply text-amber-600 text-sm;
}

.candado-voucher-applied__code {
  @apply text-xs font-mono font-bold text-amber-800;
}

.candado-voucher-applied__message {
  @apply text-xs text-amber-700 truncate;
  font-family: 'Dancing Script', cursive;
}

.candado-button-container {
  @apply pt-4;
}

.candado-submit-button {
  @apply w-full py-4 text-base font-bold uppercase tracking-wider transition-all duration-200;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(199, 21, 133, 0.5), 0 6px 20px rgba(255, 20, 147, 0.3);
}

.candado-submit-button:hover:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(199, 21, 133, 0.5), 0 4px 15px rgba(255, 20, 147, 0.25);
}

.candado-submit-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.candado-change-parcel {
  @apply mt-4 pt-4 flex flex-row items-center justify-center gap-3;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.candado-change-parcel__info {
  @apply text-sm text-gray-600;
  max-width: calc(100% - 3rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .candado-change-parcel__info {
    @apply text-xs;
    max-width: 180px;
  }
}

@media (max-width: 767px) {
  .lock-card-modern {
    border-radius: 0;
  }

  .mis-nft-grid .card {
    box-shadow: none;
    border-radius: 0;
  }
}

.candado-change-parcel__button {
  @apply flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200;
  color: var(--pink-deep);
  background: rgba(255, 20, 147, 0.1);
  border: 1px solid rgba(255, 20, 147, 0.3);
  cursor: pointer;
}

.candado-change-parcel__button:hover {
  background: var(--pink-deep);
  color: white;
}

.candado-image-selector {
  @apply mt-2 w-full cursor-pointer transition-all duration-300 overflow-hidden;
  border: 2px dashed rgba(255, 20, 147, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 20, 147, 0.02) 0%, rgba(255, 182, 193, 0.05) 100%);
  aspect-ratio: 1 / 1;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

.candado-image-selector:hover {
  border-color: var(--pink-deep);
  background: rgba(255, 20, 147, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.15);
}

.candado-image-placeholder {
  @apply flex flex-col items-center justify-center h-full px-4;
}

.candado-image-placeholder-icon {
  @apply w-10 h-10 mb-3;
  color: rgba(255, 20, 147, 0.4);
}

.candado-image-placeholder-text {
  @apply text-sm font-medium;
  color: var(--pink-dark);
}

.candado-image-placeholder-hint {
  @apply text-xs mt-1;
  color: var(--gray-medium);
}

.candado-image-preview {
  @apply relative w-full h-full;
}

.candado-image-preview-img {
  @apply w-full h-full block;
  object-fit: cover;
  border-radius: 10px;
}

.candado-image-preview-overlay {
  @apply absolute inset-0 flex flex-col items-center justify-center opacity-0 transition-opacity duration-300;
  background: rgba(255, 20, 147, 0.7);
  color: white;
  border-radius: 10px;
}

.candado-image-preview:hover .candado-image-preview-overlay {
  @apply opacity-100;
}

.candado-image-preview-icon {
  @apply w-8 h-8 mb-2;
}

.candado-image-preview-overlay span {
  @apply text-sm font-medium;
}

.modal-content:has(.candado-image-modal) {
  max-width: 600px;
  width: 100%;
  padding: 0;
  border: 2px solid black;
  border-radius: 0;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.candado-image-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.candado-image-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--pink-light) 0%, #FFB6C1 100%);
  border-bottom: 2px solid var(--pink-dark);
  position: relative;
}

.candado-image-modal-icon {
  width: 20px;
  height: 20px;
  color: white;
}

.candado-image-modal-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: white;
}

.candado-image-modal .modal-close-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.candado-image-modal-content {
  padding: 16px;
  background: #FAFAFA;
  border-radius: 0;
  flex: 1;
  overflow-y: auto;
}

.candado-image-modal .image-cropper-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.candado-image-modal .image-cropper-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candado-image-modal .image-cropper-labels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: rgba(255, 240, 245, 0.5);
  margin: -16px -16px 16px -16px;
  padding: 12px 16px;
  border-bottom: 1px solid black;
}

.candado-image-modal .image-cropper-labels-row .candado-label {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--pink-dark);
  margin: 0 auto;
  padding: 0;
  display: block;
  width: 100%;
}

.candado-image-modal .image-cropper-label-mobile {
  display: none;
}

.candado-image-modal .image-cropper-section:last-child .image-cropper-upload-area {
  aspect-ratio: 1 / 1;
  max-width: 250px;
  margin: 0 auto;
}

.candado-image-modal .image-cropper-section:last-child .image-cropper-upload-area:not(.image-cropper-upload-area--empty) {
  border: 2px solid rgba(255, 20, 147, 0.3);
  background: rgba(255, 240, 245, 0.3);
}

.candado-image-modal .image-cropper-image-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  max-height: 350px;
}

.candado-image-modal .image-cropper-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 240, 245, 0.9);
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.candado-image-modal .image-cropper-controls-desktop {
  margin: 16px -16px 0 -16px;
  width: calc(100% + 32px);
}

.candado-image-modal .image-cropper-controls-mobile {
  display: none;
}

.candado-image-modal .image-cropper-size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pink-dark);
  font-weight: 500;
  flex: 7;
}

.candado-image-modal .image-cropper-slider {
  flex: 1;
}

.candado-image-modal .image-cropper-change-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px;
  white-space: nowrap;
  flex: 3;
}

.candado-image-modal .image-cropper-change-btn:hover {
  color: var(--pink-deep);
}

.candado-image-modal .image-cropper-change-btn svg {
  width: 16px;
  height: 16px;
}

.candado-image-modal .image-cropper-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 12px !important;
  background: white;
  border: 2px solid rgba(255, 20, 147, 0.25);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(255, 20, 147, 0.08);
}

.candado-image-modal .image-cropper-upload-area {
  width: 100%;
  min-height: 140px;
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f8f8;
  border: 1px solid rgba(255, 20, 147, 0.15);
  margin-bottom: 12px !important;
}

.candado-image-modal .image-cropper-upload-area--empty {
  border: 2px dashed rgba(255, 20, 147, 0.3);
  background: rgba(255, 240, 245, 0.5);
  cursor: pointer;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  max-height: 140px;
}

.candado-image-modal .image-cropper-upload-area--empty:hover {
  border-color: var(--pink-deep);
  background: rgba(255, 240, 245, 0.8);
}

.candado-image-modal .image-cropper-image-wrapper {
  position: relative;
  line-height: 0;
  max-width: 100%;
}

.candado-image-modal .image-cropper-image {
  display: block;
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
}

.candado-image-modal .image-cropper-selection-square {
  position: absolute;
  border: 2px solid var(--pink-deep);
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
  touch-action: none;
}

.candado-image-modal .image-cropper-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  background: var(--pink-deep);
}

.candado-image-modal .image-cropper-corner--top-left {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.candado-image-modal .image-cropper-corner--top-right {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}

.candado-image-modal .image-cropper-corner--bottom-left {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}

.candado-image-modal .image-cropper-corner--bottom-right {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.candado-image-modal .image-cropper-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.candado-image-modal .image-cropper-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff8fa 0%, #fff0f5 100%);
  border: 1px solid rgba(255, 20, 147, 0.15);
  border-radius: 8px;
  margin-bottom: 12px !important;
}

.candado-image-modal .image-cropper-toolbar--empty {
  justify-content: center;
  padding: 10px;
  background: rgba(255, 240, 245, 0.3);
  border: 2px dashed rgba(255, 20, 147, 0.3);
}

.image-cropper-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.image-cropper-toolbar-btn svg {
  width: 18px;
  height: 18px;
}

.image-cropper-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.image-cropper-toolbar-btn--change {
  border-color: rgba(255, 20, 147, 0.3);
  color: var(--pink-deep);
}

.image-cropper-toolbar-btn--change:hover:not(:disabled) {
  background: rgba(255, 20, 147, 0.1);
  border-color: var(--pink-deep);
  transform: scale(1.05);
}

.image-cropper-toolbar-btn--confirm {
  border-color: #d1d5db;
  color: #9ca3af;
  background: #f3f4f6;
}

.image-cropper-toolbar-btn--confirm.image-cropper-toolbar-btn--active {
  border-color: #10b981;
  color: white;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.image-cropper-toolbar-btn--confirm.image-cropper-toolbar-btn--active:hover:not(:disabled) {
  transform: scale(1.08);
}

.image-cropper-toolbar-btn--select-full {
  width: auto;
  padding: 10px 16px;
  gap: 6px;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
}

.image-cropper-toolbar-btn--select-full:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
}

.image-cropper-toolbar-slider {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.image-cropper-toolbar-slider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink-deep);
  opacity: 0.7;
}

.image-cropper-toolbar-slider-icon svg {
  width: 16px;
  height: 16px;
}

.image-cropper-toolbar-slider-icon--large svg {
  width: 18px;
  height: 18px;
}

.image-cropper-toolbar-slider .image-cropper-slider,
.candado-image-modal .image-cropper-slider {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, rgba(255, 20, 147, 0.15) 0%, rgba(255, 20, 147, 0.35) 100%);
  cursor: pointer;
}

.image-cropper-toolbar-slider .image-cropper-slider::-webkit-slider-thumb,
.candado-image-modal .image-cropper-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(255, 20, 147, 0.4);
  cursor: grab;
}

.image-cropper-toolbar-slider .image-cropper-slider::-webkit-slider-thumb:active,
.candado-image-modal .image-cropper-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.image-cropper-toolbar-slider .image-cropper-slider::-moz-range-thumb,
.candado-image-modal .image-cropper-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-dark) 100%);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(255, 20, 147, 0.4);
  cursor: grab;
}

.image-cropper-toolbar-size {
  flex: 1;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-medium);
}

.candado-image-modal .image-cropper-result-area {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 200px;
  margin: 0 auto;
  border: 1px solid rgba(255, 20, 147, 0.2);
  border-radius: 8px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.candado-image-modal .image-cropper-result-area:has(.image-cropper-preview-wrapper) {
  border-color: var(--pink-deep);
  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.15);
}

.candado-image-modal .image-cropper-preview-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.candado-image-modal .image-cropper-preview-wrapper img,
.candado-image-modal .image-cropper-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.candado-image-modal .image-cropper-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}

.candado-image-modal .image-cropper-placeholder-icon {
  width: 32px;
  height: 32px;
  color: rgba(255, 20, 147, 0.35);
}

.candado-image-modal .image-cropper-placeholder-text {
  font-size: 11px;
  color: var(--pink-dark);
  opacity: 0.6;
}

.candado-image-modal .image-cropper-placeholder--result .image-cropper-placeholder-icon {
  width: 28px;
  height: 28px;
}

.candado-image-modal .image-cropper-processing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--pink-deep);
  font-size: 10px;
  font-weight: 500;
}

.candado-image-modal .image-cropper-labels-row,
.candado-image-modal .image-cropper-layout,
.candado-image-modal .image-cropper-section,
.candado-image-modal .image-cropper-controls-row,
.candado-image-modal .image-cropper-controls-mobile,
.candado-image-modal .image-cropper-controls-desktop,
.candado-image-modal .image-cropper-label-mobile {
  display: none !important;
}

#navbar-placeholder {
  width: 100%;
  max-width: 1110px;
  height: 47px;
  margin: 0 auto;
}

#button-placeholder,
#button-placeholder-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: white;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: 1.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #FF1493 0%, #C71585 100%);
  border: 3px solid #C71585;
  box-shadow: 4px 4px 0px #000, 0 8px 20px rgba(199, 21, 133, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

#footer-placeholder {
  width: 100%;
  max-width: 1110px;
  height: 56px;
  margin: 0 auto;
}

#footer-portal {
  min-height: 56px;
}

.user-price-input-wrapper {
  position: relative;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

.user-price-input {
  width: 100%;
  padding: 6px 50px 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  box-sizing: border-box;
}

.user-price-input:focus {
  outline: none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.user-price-input-currency {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  pointer-events: none;
}

.user-receive-info-wrapper {
  padding: 0 12px;
  box-sizing: border-box;
  width: 100%;
}

.user-receive-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 4px 8px;
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  border-radius: 6px;
  border: 1px solid #fbcfe8;
  box-sizing: border-box;
  width: 100%;
}

.user-receive-info__label {
  font-size: 10px;
  font-weight: 600;
  color: #9d174d;
  white-space: nowrap;
}

.user-receive-info__amount {
  font-size: 10px;
  font-weight: 700;
  color: var(--pink-deep);
  white-space: nowrap;
}

.user-receive-info__amount::before {
  content: '$ ';
}

@media (min-width: 480px) {
  .steps-breadcrumb__step {
    padding: 6px 4px;
  }

  .steps-breadcrumb__step-label {
    font-size: 10px;
  }

  .steps-breadcrumb__step::after {
    font-size: 11px;
    right: -4px;
  }

  .loveinblock-banner-title {
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 0px var(--pink-dark), 4px 4px 0px rgba(0, 0, 0, 0.3);
  }

  .loveinblock-navbar-title {
    font-size: 1.56rem;
    letter-spacing: 0.08em;
  }

  .candado-polaroid {
    padding: 16px;
    padding-bottom: 40px;
  }

  .candado-header-icon {
    width: 42px;
    height: 42px;
  }

  .candado-image-selector {
    max-width: 280px;
  }
  .auth-banner {
    @apply flex-row gap-4 py-4;
  }

  .auth-banner__text {
    @apply inline text-left text-sm;
  }

  .auth-banner__buttons {
    @apply flex-row w-auto gap-3;
  }

  .auth-banner__wallet-btn {
    @apply w-auto justify-start;
  }

  .auth-banner__buttons .auth-button-google,
  .auth-banner__buttons>div:first-child {
    @apply w-auto;
  }

  .auth-banner__buttons iframe {
    width: auto !important;
  }

  .crypto-pay {
    @apply px-4 py-5;
  }

  .crypto-pay__connect-banner {
    @apply flex-row gap-4 py-4 text-left;
  }

  .crypto-pay__connect-btn {
    @apply w-auto justify-start;
  }

  .crypto-pay__wallet-info {
    @apply gap-2 py-1;
  }

  .crypto-pay__wallet-address {
    @apply text-xs;
  }

  .crypto-pay__allowance-buttons {
    @apply grid-cols-2;
  }

  .btn-auth-wallet {
    font-size: 13px;
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    gap: 8px;
  }

  .btn-auth-wallet svg {
    width: 16px;
    height: 16px;
  }

  .account-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 20px 32px;
    background: linear-gradient(to bottom, #fff5f8, #fdf2f8);
  }

  .account-bar__separator {
    display: none;
  }

  .account-bar__item {
    padding: 12px 20px;
    gap: 12px;
    flex: 1;
    max-width: 240px;
  }

  .account-bar__item svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 5px;
  }

  .account-bar__wallet,
  .account-bar__email {
    font-size: 14px;
    max-width: 320px;
  }

  .inicio-banner-logo-container {
    top: 20%;
  }

  .info-container .divider-line {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid var(--pink-deep);
  }

  .info-container .step-number {
    min-width: 32px;
    height: 32px;
  }
}


button,
.cursor-pointer {
  min-height: 44px;
  min-width: 44px;
}

.card-header {
  @apply pt-3 pb-3;
  min-height: 4rem;
}

.slot-box {
  @apply p-3 text-sm;
  min-height: var(--min-height-sm);
}

.lock-card-modern {
  padding: 16px;
  gap: 12px;
}

.lock-card-name {
  font-size: 16px;
}

.info-steps-grid {
  grid-template-columns: 1fr;
}

.modal-content {
  -webkit-overflow-scrolling: touch;
}


.info-band--hero {
  padding: 0 16px;
  height: 50px;
  flex-direction: row;
  justify-content: space-between;
}

.info-band__number {
  font-size: 3rem;
  right: 10px;
}

.info-band__content {
  flex-direction: column;
  text-align: center;
  gap: 14px;
}

.info-step-icon {
  width: 48px;
  height: 48px;
}

.info-options {
  justify-content: center;
}

.info-tip {
  flex-direction: column;
  text-align: center;
}

.info-highlight {
  width: 100%;
  justify-content: center;
}

.pago-container {
  @apply px-3 py-4;
}

.pago-card {
  box-shadow: 3px 3px 0px var(--black);
}

.pago-card__body {
  @apply p-4 gap-4;
}

.pago-card__header {
  @apply px-4 py-3;
}

.pago-card__title {
  @apply text-base;
}

.pago-card__actions {
  @apply flex-row;
}

.pago-card__actions button {
  @apply flex-1;
}

.pago-country-trigger {
  @apply px-3 py-2.5;
}

.pago-country-trigger__name {
  @apply text-xs;
}

.pago-country-item {
  @apply px-3 py-2;
}

.pago-flag-icon {
  width: 20px;
  height: 14px;
}

.pago-section__title {
  @apply flex-wrap;
}

.pago-section__hint {
  @apply w-full mt-0.5;
}

.modal-overlay:has(.candado-image-modal) {
  padding: 0;
}

.modal-content:has(.candado-image-modal) {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-content:has(.candado-image-modal)>.modal-close-button {
  position: absolute;
  right: 6px;
  top: 0;
  height: 44px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: white;
  font-size: 24px;
  line-height: 1;
}

.candado-image-modal {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.candado-image-modal-header {
  padding: 8px 12px;
  padding-right: 36px;
}

.candado-image-modal-content {
  flex: 1;
  min-height: 0;
  padding: 8px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.candado-image-modal .image-cropper-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px !important;
  margin: 0;
  gap: 0;
}

.candado-image-modal .image-cropper-labels-row,
.candado-image-modal .image-cropper-label-mobile {
  display: none;
}

.candado-image-modal .image-cropper-layout {
  grid-template-columns: 1fr;
  gap: 8px;
  flex: 1;
  align-content: center;
}

.candado-image-modal .image-cropper-upload-area {
  flex: 1;
  min-height: 150px;
  max-height: 50vh;
}

.candado-image-modal .image-cropper-upload-area--empty {
  width: 70vw;
  height: 70vw;
  max-width: 280px;
  max-height: 280px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.candado-image-modal .image-cropper-upload-area:not(.image-cropper-upload-area--empty) {
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  margin: 0 auto;
}

.candado-image-modal .image-cropper-section:last-child .image-cropper-upload-area {
  width: 70vw;
  height: 70vw;
  max-width: 280px;
  max-height: 280px;
  aspect-ratio: 1 / 1;
}

.candado-image-modal .image-cropper-image {
  max-height: 45vh;
}

.candado-image-modal .image-cropper-image-wrapper {
  touch-action: none;
}

.candado-image-modal .image-cropper-placeholder {
  padding: 8px;
  gap: 4px;
}

.candado-image-modal .image-cropper-placeholder-icon {
  width: 32px;
  height: 32px;
}

.candado-image-modal .image-cropper-placeholder-text {
  font-size: 12px;
}

.candado-image-modal .image-cropper-placeholder-hint {
  font-size: 10px;
}

.candado-image-modal .image-cropper-controls-desktop {
  display: none;
}

.candado-image-modal .image-cropper-controls-mobile {
  display: flex;
  margin: 0;
  padding: 4px 8px;
  width: 100%;
}

.candado-image-modal .image-cropper-controls-row {
  gap: 6px;
}

.candado-image-modal .image-cropper-size-control {
  font-size: 10px;
  gap: 4px;
}

.candado-image-modal .image-cropper-change-btn {
  font-size: 9px;
}

.candado-image-modal .image-cropper-change-btn svg {
  width: 12px;
  height: 12px;
}

.candado-image-modal .image-cropper-toolbar {
  flex-shrink: 0;
}

.candado-image-modal .image-cropper-result-area {
  flex-shrink: 0;
  max-width: 180px;
  margin: 0 auto;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .candado-image-modal-content {
  padding: 0;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .image-cropper-layout {
  gap: 8px;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .image-cropper-controls-mobile {
  margin: 0;
  width: 100%;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .image-cropper-section:first-child {
  margin: 0;
  padding: 0;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .image-cropper-section:first-child .image-cropper-upload-area {
  border-radius: 0;
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .image-cropper-image-wrapper {
  margin: 0;
}

.candado-image-modal:has(.image-cropper-image-wrapper) .image-cropper-labels-row {
  display: none;
}

.modal-overlay:has(.terminos-modal-container) {
  padding: 0;
  align-items: stretch;
}

.modal-content:has(.terminos-modal-container) {
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.terminos-modal-container {
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.terminos-modal-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
  flex-shrink: 0;
}

.terminos-modal-title {
  font-size: 1rem;
}

.terminos-modal-content-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.terminos-modal-content {
  flex: 1;
  max-height: none;
  min-height: 0;
  padding: 12px;
  font-size: 13px;
}

.terminos-modal-footer {
  margin-top: 12px;
  padding-top: 12px;
  flex-shrink: 0;
}

.terminos-modal-scroll-hint {
  font-size: 12px;
  margin-bottom: 8px;
}

.terminos-modal-buttons {
  flex-direction: column;
  gap: 8px;
}

.terminos-modal-buttons button {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
}

#navbar-placeholder {
  height: 47px;
}

.nav-button {
  padding: 6px 10px;
  font-size: 11px;
  gap: 5px;
}

.nav-button svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 640px) {
  button,
  .cursor-pointer {
    min-height: auto;
    min-width: auto;
  }

  .card-header {
    @apply pt-4 pb-4;
    min-height: auto;
  }

  .slot-box {
    @apply p-2 text-base;
    min-height: auto;
  }

  .lock-card-modern {
    padding: 12px;
    gap: 8px;
  }

  .lock-card-name {
    font-size: 18px;
  }

  .info-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .info-band--hero {
    padding: 0 24px;
    height: 60px;
  }

  .info-band__number {
    font-size: 4rem;
    right: 16px;
  }

  .info-band__content {
    flex-direction: row;
    text-align: left;
    gap: 20px;
  }

  .info-step-icon {
    width: 56px;
    height: 56px;
  }

  .info-options {
    justify-content: flex-start;
  }

  .info-tip {
    flex-direction: row;
    text-align: left;
  }

  .info-highlight {
    width: auto;
    justify-content: flex-start;
  }

  .pago-container {
    @apply px-6 py-6;
  }

  .pago-card {
    box-shadow: 4px 4px 0px var(--black);
  }

  .pago-card__body {
    @apply p-6 gap-6;
  }

  .pago-card__header {
    @apply px-6 py-4;
  }

  .pago-card__title {
    @apply text-lg;
  }

  .pago-country-trigger {
    @apply px-4 py-3;
  }

  .pago-country-trigger__name {
    @apply text-sm;
  }

  .pago-country-item {
    @apply px-4 py-2.5;
  }

  .pago-flag-icon {
    width: 24px;
    height: 18px;
  }

  .pago-section__title {
    @apply flex-nowrap;
  }

  .pago-section__hint {
    @apply w-auto mt-0;
  }

  .modal-overlay:has(.candado-image-modal) {
    padding: 20px;
  }

  .modal-content:has(.candado-image-modal) {
    width: auto;
    height: auto;
    max-width: 800px;
    max-height: 90vh;
    margin: auto;
    border: 2px solid var(--pink-deep);
    border-radius: 16px;
  }

  .modal-content:has(.candado-image-modal)>.modal-close-button {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
  }

  .candado-image-modal {
    height: auto;
    max-height: none;
  }

  .candado-image-modal-header {
    padding: 16px 20px;
    padding-right: 48px;
  }

  .candado-image-modal-content {
    padding: 20px;
    margin-top: 0;
  }

  .candado-image-modal .image-cropper-container {
    padding: 20px !important;
    gap: 16px;
  }

  .candado-image-modal .image-cropper-labels-row {
    display: flex;
  }

  .candado-image-modal .image-cropper-layout {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .candado-image-modal .image-cropper-upload-area {
    min-height: auto;
    max-height: none;
  }

  .candado-image-modal .image-cropper-upload-area--empty {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .candado-image-modal .image-cropper-section:last-child .image-cropper-upload-area {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .candado-image-modal .image-cropper-image {
    max-height: 400px;
  }

  .candado-image-modal .image-cropper-placeholder {
    padding: 16px;
    gap: 8px;
  }

  .candado-image-modal .image-cropper-placeholder-icon {
    width: 48px;
    height: 48px;
  }

  .candado-image-modal .image-cropper-placeholder-text {
    font-size: 14px;
  }

  .candado-image-modal .image-cropper-placeholder-hint {
    font-size: 12px;
  }

  .candado-image-modal .image-cropper-controls-desktop {
    display: flex;
  }

  .candado-image-modal .image-cropper-controls-mobile {
    display: none;
  }

  .candado-image-modal .image-cropper-result-area {
    max-width: 220px;
  }

  .modal-overlay:has(.terminos-modal-container) {
    padding: 20px;
    align-items: center;
  }

  .modal-content:has(.terminos-modal-container) {
    max-width: 960px;
    width: 90%;
    height: auto;
    max-height: 85vh;
    margin: auto;
    border-radius: 16px;
    padding: 24px;
  }

  .terminos-modal-container {
    max-height: none;
    height: auto;
  }

  .terminos-modal-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .terminos-modal-title {
    font-size: 1.25rem;
  }

  .terminos-modal-content {
    max-height: 400px;
    padding: 16px;
    font-size: 14px;
  }

  .terminos-modal-footer {
    margin-top: 16px;
    padding-top: 16px;
  }

  .terminos-modal-scroll-hint {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .terminos-modal-buttons {
    flex-direction: row;
    gap: 12px;
  }

  .terminos-modal-buttons button {
    width: auto;
    padding: 10px 24px;
    font-size: 14px;
  }

  #navbar-placeholder {
    height: 47px;
  }

  .nav-button {
    padding: 6px 10px;
    font-size: 11px;
    gap: 5px;
  }

  .nav-button svg {
    width: 14px;
    height: 14px;
  }

  .inicio-banner {
    min-height: 400px;
  }

  .inicio-banner--no-overlay {
    min-height: auto;
  }

  .inicio-parcela-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
  }

  .loveinblock-banner-title {
    font-size: 2.5rem;
    letter-spacing: 0.08em;
  }

  .loveinblock-navbar-title {
    font-size: 1.5rem;
    text-shadow: 1.5px 1.5px 0px var(--pink-dark), 3px 3px 0px rgba(0, 0, 0, 0.25);
  }

  .card {
    box-shadow: 4px 4px 0px var(--black);
  }

  .card-footer button {
    min-height: 2rem;
  }

  .card-footer--two> :not(.card-footer-badge) {
    @apply gap-3;
  }

  .card-footer--two> :not(.card-footer-badge) button {
    font-size: 10px;
  }

  .card-accordion {
    @apply hidden;
  }

  .mis-nft-grid {
    grid-auto-rows: auto;
  }

  .puentes-lista {
    @apply px-4 pt-8 pb-4;
  }

  .puentes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    align-items: stretch;
  }

  .bridge-card__header {
    @apply py-2;
  }

  .bridge-card__header-title {
    @apply text-[10px];
  }

  .bridge-card__image-wrapper {
    height: 140px;
  }

  .bridge-card__content {
    @apply pt-2 pb-4;
  }

  .bridge-card__caption {
    @apply text-base;
  }

  .bridge-card__cta {
    @apply py-2.5 text-sm;
  }

  .bridge-ticket__price-circle {
    @apply w-28 h-28;
  }

  .bridge-ticket__price-circle-amount {
    @apply text-3xl;
  }

  .bridge-ticket__price-circle-unit {
    @apply text-[10px];
  }

  .account-bar__wallet {
    max-width: 100%;
  }

  .crypto-pay__section--no-wallet {
    padding: 1rem;
  }

  .crypto-pay__option-card {
    padding: 1.5rem 2rem;
  }

  .crypto-pay__option-title {
    font-size: 1.125rem;
  }

  .crypto-pay__option-desc {
    font-size: 0.9375rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) {
  .loveinblock-banner-title {
    font-size: 3rem;
    text-shadow: 3px 3px 0px var(--pink-dark), 6px 6px 0px rgba(0, 0, 0, 0.3);
  }

  .loveinblock-navbar-title {
    font-size: 1.75rem;
    letter-spacing: 0.1em;
  }

  .inicio-banner-logo-container {
    top: 22%;
  }

  .info-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 30px 0;
  }

  .step-title {
    font-size: 0.95rem;
  }

  .step-description {
    font-size: 0.8rem;
  }
}

@media (min-width: 1024px) {
  .inicio-banner {
    min-height: 500px;
  }

  .inicio-banner--no-overlay {
    min-height: auto;
  }

  .inicio-button-description-text br {
    display: block;
  }

  .inicio-banner-logo-container {
    top: 24%;
  }

  .loveinblock-banner-title {
    font-size: 4rem;
    letter-spacing: 0.1em;
  }

  .loveinblock-navbar-title {
    font-size: 2rem;
    letter-spacing: 0.12em;
    text-shadow: 2px 2px 0px var(--pink-dark), 4px 4px 0px rgba(0, 0, 0, 0.3);
  }

  .card>.card-body {
    @apply flex gap-2 relative items-start;
  }

  .card>.card-body>div {
    @apply flex-1 flex flex-col m-0;
  }

  .card>.card-body .slot-box {
    @apply m-0 w-full;
  }

  .card.card-todo-expanded .card-body {
    grid-template-rows: auto;
    gap: 0.75rem;
  }

  .puentes-lista {
    @apply px-6 pt-10 pb-5;
  }

  .bridge-card__image-wrapper {
    height: 100px;
  }

  .puentes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    align-items: stretch;
  }

  .puentes-grid .bridge-card {
    width: 100%;
  }

  .bridge-card__content {
    @apply pt-2;
    padding-bottom: 10px;
  }

  .bridge-card__progress-label {
    @apply text-sm;
  }

  .bridge-card__price-row {
    @apply mb-2 px-3;
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .bridge-card__caption {
    @apply text-sm;
  }

  .bridge-card__price-value {
    @apply text-lg;
  }

  .bridge-card__cta {
    @apply py-3;
  }

  .bridge-card__desc-toggle {
    height: 36px;
    min-height: 36px;
    font-size: 12px;
  }

  .bridge-card__cta-container > div {
    display: flex;
    flex-direction: column;
  }

  .bridge-card__desc-details > .bridge-card__desc-content {
    display: block !important;
    border-radius: 8px;
    border: 1px solid #fce7f3;
  }

  .bridge-card__desc-details .bridge-card__options-list {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
  }

  .puentes-expand__btn {
    @apply px-6 py-2.5 text-sm;
  }
}

@media (min-width: 1280px) {
  .loveinblock-banner-title {
    font-size: 5rem;
  }

  .loveinblock-navbar-title {
    font-size: 2.25rem;
  }

  .inicio-banner-logo-container {
    top: 26%;
  }
}

.termgen-toc {
  display: none;
}

@media print {
  /*.tbtermgen {
    @apply absolute top-0 left-0 bg-white;
    display: table;
    z-index: 99999;
  }*/

  .space-top {
    margin-top: 8rem;
  }

  .page-break {
    page-break-before: always;
    break-before: page;
  }

  .termgen-toc {
    display: table;
  }

  .tbtermgen thead {
    display: table-header-group;
  }

  .tbtermgen tbody {
    display: table-row-group;
  }

  .tbtermgen tr {
    display: table-row;
  }

  .tbtermgen td {
    @apply px-8;
    display: table-cell;
  }

  .tbtermgen th {
    @apply bg-gray-300 text-black;
    display: table-cell;
  }

  .noimprimir {
    @apply hidden;
  }

  .tbtermgen tbody td.section-start {
    border-top: none;
  }
}

.text-ellipsis-line {
  @apply overflow-hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.nft-info-btn-compact {
  padding: 4px !important;
  height: 24px !important;
  width: 24px !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  background: white !important;
}

.nft-info-btn-compact:hover {
  background: #1a1a1a !important;
  color: white !important;
}

.nft-info-btn-plus {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a1a;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.nft-info-btn-compact svg {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

.nft-info-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  gap: 8px;
  padding: 16px 20px;
}

.nft-info-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  text-decoration: none;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
  border: 2px solid #1a1a1a;
  border-radius: 6px;
  background: white;
}

.nft-info-cell:hover {
  background: #f3f4f6;
}

.nft-info-cell--disabled {
  color: #9ca3af;
  cursor: default;
}

.nft-info-cell--disabled:hover {
  background: transparent;
}

.nft-info-cell-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: #374151;
}

.nft-info-cell-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nft-info-cell-value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: #6b7280;
  word-break: break-all;
  text-align: center;
}

@media (min-width: 640px) {
  .nft-info-cell-icon {
    width: 64px;
    height: 64px;
  }

  .nft-info-cell-label {
    font-size: 0.8rem;
  }

  .nft-info-cell-value {
    font-size: 0.8rem;
  }
}

.nft-info-share {
  @apply flex items-center justify-center gap-2 mt-3 pt-3 border-t border-gray-200;
}

.nft-info-share-label {
  @apply text-xs text-gray-500 font-medium;
}

.nft-info-vernft-btn {
  padding: 0.5rem 0.5rem;
  font-size: 0.75rem;
  margin: 0.2rem 0 0;
  width: 100%;
  min-height: 0;
  line-height: 1;
}

.nft-info-vernft-btn:hover {
  background-color: deeppink;
  color: white;
  border-color: deeppink;
}

.nft-info-vernft-link--image {
  display: none;
}

.nft-info-vernft-link--btn {
  display: flex;
}

.mis-nft-grid--list .nft-info-vernft-link--image {
  display: flex;
}

.mis-nft-grid--list .nft-info-vernft-link--btn {
  display: none;
}

@media (min-width: 640px) {
  .nft-info-vernft-link--image {
    display: flex;
  }

  .nft-info-vernft-link--btn {
    display: none;
  }
}

.nft-info-share-icons {
  @apply flex items-center gap-2;
}

.nft-info-share-icon {
  @apply flex items-center justify-center w-8 h-8 rounded-full text-gray-500 bg-gray-100 transition-all duration-200;
}

.nft-info-share-icon:hover {
  @apply bg-gray-200 scale-110;
}

.nft-info-share-icon svg {
  @apply w-4 h-4;
}

.nft-info-share-icon--whatsapp {
  @apply text-green-600 bg-green-50;
}

.nft-info-share-icon--whatsapp:hover {
  @apply bg-green-100;
}

.nft-info-share-icon--telegram {
  @apply text-sky-600 bg-sky-50;
}

.nft-info-share-icon--telegram:hover {
  @apply bg-sky-100;
}

.nft-info-share-icon--x {
  @apply text-gray-800 bg-gray-100;
}

.nft-info-share-icon--x:hover {
  @apply bg-gray-200;
}

.gift-messages-container {
  @apply mt-4 space-y-3;
}

.gift-message-wrapper {
}

.gift-message-input-container {
  @apply relative;
}

.gift-message-input {
  @apply w-full px-4 py-3 border-2 border-gray-200 rounded-lg text-sm transition-all duration-200;
  @apply focus:outline-none focus:border-pink-400 focus:ring-2 focus:ring-pink-200;
  @apply placeholder-gray-400;
}

.gift-message-input:hover {
  @apply border-gray-300;
}

.gift-message-label {
  @apply block mb-2 text-sm font-medium text-gray-700;
}

.gift-message-counter {
  @apply absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400;
}