@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap);
@charset "UTF-8";
/* Fonts */
/* Color Palette */
/* Color Palette */
/* Breakpoints */
/* Ratio (applied to padding property) */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  scroll-behavior: smooth;
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
.text-primary {
  color: #0f3d2e !important;
}
.text-secondary {
  color: #db9917 !important;
}
.text-tertiary {
  color: #c4e8cc !important;
}
.bg-primary {
  background-color: #0f3d2e !important;
}
.bg-secondary {
  background-color: #db9917 !important;
}
.bg-tertiary {
  background-color: #c4e8cc !important;
}
/* Fade */
.fade-in { /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
  animation: fade-in 1s forwards;
}
.fade-out { /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
  animation: fade-o 1s forwards;
}
@keyframes fade-in {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@keyframes pulse {
  0% {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }
  100% {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}
* {
  word-wrap: break-word;
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}
:root {
  font-size: 100%;
}
body {
  font-family: "Poppins", sans-serif;
  color: #333;
  line-height: 1.5;
  background-color: #FEFBF1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", serif;
  line-height: 1.1;
  margin: 0 0 1rem;
}
h1,
._text-style.-h1 {
  font-size: 4.65rem;
  font-weight: 400;
}
h2,
._text-style.-h2 {
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 125%;
}
h3,
._text-style.-h3 {
  font-size: 3rem;
  font-weight: 100;
}
h4,
._text-style.-h4 {
  font-size: 2rem;
  font-weight: 500;
}
h5,
._text-style.-h5 {
  font-size: 1.6rem;
  font-weight: 500;
}
h6,
._text-style.-h6 {
  font-size: 1.3rem;
  font-weight: 500;
}
p {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: 500;
}
ul.-horizontal {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.-horizontal li {
  display: inline-block;
  margin: 0 10px;
}
ul.-horizontal li:first-child {
  margin-left: 0;
}
ul.-horizontal li:last-child {
  margin-right: 0;
}
ol,
ul {
  margin-bottom: 1rem;
}
a {
  text-decoration: none;
}
a:hover, a:focus, a:active {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
img.alignright {
  float: right;
  margin: 0 0 1em 1em;
}
img.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
iframe,
svg {
  max-width: 100%;
}
sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em;
}
sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em;
}
blockquote {
  font-size: initial;
}
button {
  cursor: pointer;
}
button._no-default {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
}
input[type=text],
select {
  width: 100%;
  padding: 1rem;
  margin: 0 0 1rem;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
select {
  position: relative;
  cursor: pointer;
}
select:before {
  content: "˅";
  font-size: 24px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
svg {
  width: auto;
  height: 1.2rem;
  vertical-align: middle;
}
svg.-full-width {
  width: 100%;
  height: auto;
}
._grid {
  display: grid;
}
._grid.-col-2 {
  grid-template-columns: repeat(2, 1fr);
}
._grid.-col-3 {
  grid-template-columns: repeat(3, 1fr);
}
._grid.-col-4 {
  grid-template-columns: repeat(4, 1fr);
}
._grid.-col-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1199px) {
  ._grid.-collapse-lg {
    grid-template-columns: 100%;
  }
}
@media (max-width: 992px) {
  ._grid.-collapse-md {
    grid-template-columns: 100%;
  }
}
@media (max-width: 768px) {
  ._grid.-collapse-sm {
    grid-template-columns: 100%;
  }
}
@media (max-width: 521px) {
  ._grid.-collapse-xs {
    grid-template-columns: 100%;
  }
}
._grid.-align-center {
  align-items: center;
}
._grid.-justify-center {
  justify-content: center;
}
._grid.-sidebar {
  grid-template-columns: 2fr 1fr;
}
._grid.-sidebar.-left {
  grid-template-columns: 1fr 2fr;
}
._grid.-gap-15 {
  grid-gap: 15px;
}
._grid.-gap-25 {
  grid-gap: 25px;
}
._grid.-gap-35 {
  grid-gap: 35px;
}
._grid > *:nth-child(1) {
  -ms-grid-column: 1;
}
._grid > *:nth-child(2) {
  -ms-grid-column: 2;
}
._grid > *:nth-child(3) {
  -ms-grid-column: 3;
}
._grid > *:nth-child(4) {
  -ms-grid-column: 4;
}
._grid > *:nth-child(5) {
  -ms-grid-column: 5;
}
._grid > *:nth-child(6) {
  -ms-grid-column: 6;
}
@media (max-width: 600px) {
  ._grid {
    display: block;
  }
}
._flex {
  display: flex;
}
._flex.-row-wrap {
  flex-flow: row wrap;
}
._flex.-column-wrap {
  flex-flow: column wrap;
}
._flex.-space-between {
  justify-content: space-between;
}
._flex.-justify-center {
  justify-content: center;
}
._column {
  padding: 0 15px;
}
._video-thumbnail {
  background-color: #000;
}
._video-thumbnail div {
  position: relative;
  overflow: hidden;
  height: 0px;
  padding: 56.25% 0 0 0;
  cursor: pointer;
}
._video-thumbnail video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.6s;
  will-change: opacity;
}
._video-thumbnail svg {
  opacity: 1;
  transition: 0.6s;
  height: 180px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  transform: translateY(-50%);
}
._video-thumbnail:hover video {
  opacity: 0.8;
}
._modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  pointer-events: none;
  opacity: 0;
  transition: 0.6s;
  background-color: rgba(0, 0, 0, 0.9);
}
._modal .modal-close {
  font-size: 24px;
  text-align: right;
  cursor: pointer;
  padding: 0 10px;
}
._modal.-active {
  pointer-events: auto;
  opacity: 1;
}
._modal .modal-content {
  background-color: #fff;
  padding: 3rem;
}
._modal .modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  padding: 30px;
}
._modal .modal-container ._grid {
  grid-template-columns: 300px auto;
}
@media (max-width: 768px) {
  ._modal .modal-container ._grid {
    display: block;
  }
  ._modal .modal-container {
    margin: 0;
  }
}
._modal.-video-modal > div {
  background-color: transparent;
}
._embed-container {
  position: relative;
  padding: 56.25% 0 0 0;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
._embed-container iframe,
._embed-container object,
._embed-container embed,
._embed-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
._embed-container img {
  -o-object-fit: cover;
     object-fit: cover;
}
._dark-background {
  color: #fff;
}
._dark-background h1,
._dark-background h2,
._dark-background h3,
._dark-background h4,
._dark-background h5,
._dark-background h6,
._dark-background p,
._dark-background a {
  color: #fff;
}
._art-container {
  position: relative;
  overflow: hidden;
}
._art-container ._art-background {
  position: absolute;
  left: 50%;
  top: 0;
  right: auto;
  width: 3000px;
  height: 100%;
  z-index: 1;
  margin: auto;
  transform: translateX(-50%);
  text-align: center;
}
._art-container ._art-foreground {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  ._display-desktop {
    display: none;
  }
}
._display-mobile {
  display: none;
}
@media (max-width: 768px) {
  ._display-mobile {
    display: block;
  }
  ._display-mobile.-inline-block {
    display: inline-block;
  }
}
._button {
  display: inline-flex;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: 3px solid;
  font-weight: 700;
  letter-spacing: 2px;
  background-color: #0f3d2e;
  border-color: #0f3d2e;
  color: #fff;
  transition: 0.6s;
  align-items: center;
  justify-content: space-between;
}
._button:hover, ._button:focus, ._button:active {
  background-color: rgb(25.0657894737, 101.9342105263, 76.8684210526);
  border-color: rgb(25.0657894737, 101.9342105263, 76.8684210526);
  color: #fff;
}
._button.-transparent {
  position: relative;
  border-color: #0f3d2e;
  background-color: transparent;
  color: #0f3d2e;
  padding: 0.5rem 2rem;
}
._button.-wide {
  padding: 1rem 2.5rem;
  font-weight: 500;
  letter-spacing: 4px;
}
._button.-light {
  font-weight: 400;
}
._button span {
  vertical-align: middle;
}
._button svg {
  vertical-align: middle;
  width: auto;
  height: 1rem;
  margin: 0 0 0 10px;
}
._section-wrapper {
  padding: 2rem 2rem;
}
._section-wrapper.-medium {
  padding: 3rem 0;
}
._section-wrapper.-large {
  padding: 6rem 0;
}
@media (max-width: 1200px) {
  ._section-wrapper {
    padding: 2rem 2rem;
  }
}
@media (max-width: 992px) {
  ._section-wrapper {
    padding: 2rem 1rem;
  }
}
._relative {
  position: relative;
}
._form label {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
._form input[type=text],
._form input[type=password],
._form select {
  font-family: Arial, serif;
  width: 100%;
  padding: 1.5rem;
  font-size: 1.5rem;
  border: none;
}
._form p,
._form input[type=submit] {
  margin: 2rem 0 0.5rem;
  font-weight: 500;
}
._form input[type=submit] {
  min-width: 200px;
  justify-content: center;
}
._aspect-container {
  position: relative;
}
._aspect-container.-sixteen-nine {
  padding: 56.25% 0 0 0;
}
._aspect-container.-three-one {
  padding: 33% 0 0 0;
}
._aspect-container.-two-one {
  padding: 50% 0 0 0;
}
._aspect-container.-one-one {
  padding: 100% 0 0 0;
}
._aspect-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
._aspect.-sixteen-nine {
  height: 56.25vw;
}
._aspect.-one-one {
  height: 100vw;
}
._loading-screen {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
  text-align: center;
}
._loading-screen svg {
  width: 4rem;
  margin: 0 0 1rem;
}
._loading-screen p {
  color: #fff;
  text-transform: uppercase;
  margin: 0;
}
.-loading ._loading-screen {
  display: flex;
}
._raindrop-image-carousel {
  position: relative;
}
._raindrop-image-carousel img.rd-carousel-item {
  transition: 0.6s;
  position: absolute;
  z-index: 1;
  opacity: 0;
}
._raindrop-image-carousel img.rd-carousel-item-active {
  opacity: 1;
  z-index: 2;
}
@media (max-width: 600px) {
  ._flkty.-mobile-disabled .flickity-viewport {
    pointer-events: none;
    height: auto !important;
  }
  ._flkty.-mobile-disabled .flickity-slider {
    position: relative !important;
    transform: none !important;
  }
  ._flkty.-mobile-disabled .carousel-cell {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    margin: 0 0 10px;
  }
  ._flkty.-mobile-disabled .flkty-controls {
    display: none;
  }
}
._input-with-icon {
  position: relative;
}
._input-with-icon svg {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
._smallcaps {
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.3rem;
}
._overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
._overlay.-shadow-top {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#00000000",GradientType=0 ); /* IE6-9 */
}
._hidden {
  display: none;
}
._background.-primary {
  background: #0f3d2e;
}
._background.-secondary {
  background: #db9917;
}
._align-center {
  text-align: center;
}
:root {
  --color-primary: #333373;
  --color-primary-light: #4747d9;
  --color-accent: #0806ae;
  --color-text-dark: #000019;
  --color-text-medium: #414d64;
  --color-text-light: #ffffff;
  --color-bg-main: #ffffff;
  --color-bg-sidebar: #e6e6ee;
  --color-border: #cbcbe3;
  --font-main: "Inter", sans-serif;
  --font-heading: "Rubik", sans-serif;
}
* {
  box-sizing: border-box;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  padding: 0;
  background: none;
}
.profile-client-template.dashboard-wrapper {
  max-width: 1440px;
  min-height: 900px;
  margin: 0 auto;
  background-color: var(--color-bg-main);
  display: flex;
  position: relative;
}
.profile-client-template .main-content {
  flex-grow: 1;
  padding: 71px 55px 60px 87px;
  position: relative;
  overflow: hidden;
}
.profile-client-template .header-bg-shape {
  position: absolute;
  top: -159px;
  right: -161px;
  width: 389px;
  height: 389px;
  z-index: 0;
}
.profile-client-template .dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 25px;
  border-bottom: 1.5px solid var(--color-border);
  position: relative;
  z-index: 2;
}
.profile-client-template .traveler-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  color: var(--color-accent);
}
.profile-client-template .user-profile {
  display: flex;
  align-items: center;
  gap: 7px;
}
.profile-client-template .user-name {
  font-size: 16.35px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: right;
  line-height: 1.2;
}
.profile-client-template .user-avatar {
  width: 60px;
  height: 60px;
  position: relative;
  filter: drop-shadow(0px 12px 21px rgba(5, 4, 104, 0.15));
}
.profile-client-template .user-avatar img {
  width: 100%;
  height: 100%;
}
.profile-client-template .welcome-section {
  margin-top: 39px;
  position: relative;
  z-index: 1;
}
.profile-client-template .welcome-bubble {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  padding: 13px 30px;
  border-radius: 31px;
  font-size: 23px;
  width: 278px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  margin-bottom: -27px; /* Overlap */
  z-index: 2;
}
.profile-client-template .welcome-bubble::after {
  content: "";
  position: absolute;
  bottom: -21px;
  left: 141px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 22px solid var(--color-primary);
}
.profile-client-template .cta-area {
  display: flex;
  align-items: center;
  gap: 50px;
  padding-left: 40px;
}
.profile-client-template .character-illustration {
  position: relative;
  width: 253px;
  height: 247px;
  flex-shrink: 0;
}
.profile-client-template .cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profile-client-template .cta-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 27px;
  color: var(--color-primary);
  margin: 0 0 26px 0;
}
.profile-client-template .cta-buttons {
  display: flex;
  gap: 31px;
}
.profile-client-template .btn {
  background: linear-gradient(353deg, #000050 0%, #4747d9 346.8%);
  box-shadow: 0px 7px 12.3px 0px rgba(5, 4, 104, 0.35);
  border-radius: 27px;
  padding: 14px 21px;
  color: var(--color-text-light);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  min-width: 208px;
}
.profile-client-template .orders-section {
  margin-top: 60px;
}
.profile-client-template .section-header {
  position: relative;
  padding-bottom: 10px;
}
.profile-client-template .section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.profile-client-template .title-underline {
  position: absolute;
  left: 0;
  bottom: -15px;
  opacity: 0.25;
  width: 309px;
}
.profile-client-template .stats-cards-grid {
  margin-top: 41px;
  display: flex;
  gap: 26.5px;
}
.profile-client-template .stat-card {
  flex: 1;
  background-color: var(--color-bg-main);
  border-radius: 13px;
  box-shadow: 0px 0px 3.5px 0.9px rgba(5, 4, 104, 0.1);
  padding: 30px 27px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.profile-client-template .stat-card::before {
  content: "";
  position: absolute;
  width: 169px;
  height: 169px;
  background-color: #fffbeb;
  border-radius: 50%;
  top: -50px;
  right: -50px;
  z-index: 0;
}
.profile-client-template .card-content {
  position: relative;
  z-index: 1;
}
.profile-client-template .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-medium);
  line-height: 1.2;
  margin: 0 0 5px 0;
  min-height: 38px;
}
.profile-client-template .card-value {
  font-size: 80px;
  font-weight: 700;
  color: var(--color-text-medium);
  line-height: 1;
  margin: 0;
}
.profile-client-template .card-value.small {
  font-size: 69px;
}
.profile-client-template .card-icon-wrapper {
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 95px;
  height: 68px;
  z-index: 1;
}
@media (max-width: 1200px) {
  .profile-client-template .main-content {
    padding: 40px;
  }
  .profile-client-template .cta-area {
    flex-direction: column;
    text-align: center;
  }
  .profile-client-template .cta-content {
    align-items: center;
  }
  .profile-client-template .stats-cards-grid {
    flex-direction: column;
    align-items: center;
  }
  .profile-client-template .stat-card {
    width: 100%;
    max-width: 350px;
  }
}
@media (max-width: 768px) {
  .profile-client-template.dashboard-wrapper {
    flex-direction: column;
  }
  .profile-client-template .main-content {
    padding: 20px;
  }
  .profile-client-template .header-bg-shape {
    display: none;
  }
}
.sidebar-client-section {
  padding: 36px 30px 32px 22px;
  background: linear-gradient(271deg, var(--color-bg-sidebar) 0%, var(--color-bg-main) 141.93%);
  display: none;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9999;
}
@media (min-width: 768px) {
  .sidebar-client-section {
    display: block;
    max-width: 238px;
    width: 100%;
    padding: 50px 26px 32px 18px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section {
    max-width: 290px;
    padding: 60px 40px 45px 40px;
  }
}
@media (min-width: 1360px) {
  .sidebar-client-section {
    max-width: 328px;
    padding: 63px 64px 60px 61px;
  }
}
.sidebar-client-section__container #header-logo {
  width: 192px;
  height: auto;
  display: inline-block;
}
@media (min-width: 768px) {
  .sidebar-client-section__container #header-logo {
    width: 150px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section__container #header-logo {
    width: 192px;
  }
}
.sidebar-client-section__container #header-logo img {
  width: 192px;
  height: auto;
}
@media (min-width: 768px) {
  .sidebar-client-section__container .nav-sidebar-desktop {
    margin-top: 30px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section__container .nav-sidebar-desktop {
    margin-top: 60px;
  }
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu {
  display: flex;
  gap: 32px;
  flex-direction: column;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a {
  color: #414d64;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  display: block;
}
@media (min-width: 768px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a {
    font-size: 18px;
  }
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a svg {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
  margin-right: 14px;
}
@media (min-width: 768px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a svg {
    margin-right: 10px;
    width: 36px;
    height: 36px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a svg {
    margin-right: 14px;
    width: 40px;
    height: 40px;
  }
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li a .svg-hover {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li .sub-menu {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li:hover a {
  color: #0806ae;
  font-weight: 700;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li:hover a svg {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li:hover a .svg-hover {
  display: inline-block;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item a {
  color: #0806ae;
  font-weight: 700;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item a svg {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item a .svg-hover {
  display: inline-block;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu {
  display: flex !important;
  flex-direction: column;
  gap: 15px;
  padding: 16px 0 0 12px;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a {
  color: #414d64;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  display: block;
}
@media (min-width: 768px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a {
    font-size: 18px;
  }
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a > svg {
  width: 29px;
  height: 29px;
  aspect-ratio: 1/1;
  margin-right: 14px;
  display: inline-block;
}
@media (min-width: 768px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a > svg {
    margin-right: 10px;
    width: 26px;
    height: 26px;
  }
}
@media (min-width: 1200px) {
  .sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a > svg {
    margin-right: 14px;
    width: 29px;
    height: 29px;
  }
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li a > .svg-hover {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li.-active-item a {
  color: #0806ae;
  font-weight: 700;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li.-active-item a svg {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li.-active-item a .svg-hover {
  display: inline-block;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li:hover a {
  color: #0806ae;
  font-weight: 700;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li:hover a svg {
  display: none;
}
.sidebar-client-section__container .nav-sidebar-desktop ul.main-menu li.-active-item ul.sub-menu li:hover a .svg-hover {
  display: inline-block;
}
:root {
  --c-primary: #0806ae;
  --c-primary-dark: #050468;
  --c-text-dark: #000019;
  --c-text-main: #333373;
  --c-text-light: #414d64;
  --c-text-disabled: #ccccdc;
  --c-bg-light: #e6e6ee;
  --c-bg-white: #ffffff;
  --ff-main: "Inter", sans-serif;
  --ff-display: "Rubik", sans-serif;
}
body {
  margin: 0;
  font-family: var(--ff-main);
  background-color: var(--c-bg-white);
  color: var(--c-text-dark);
}
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.dashboard-container {
  display: flex;
  width: 100%;
  background-color: var(--c-bg-white);
}
.sidebar {
  width: 328px;
  flex-shrink: 0;
  background: linear-gradient(271deg, #e6e6ee 0%, #ffffff 141.93%);
  padding: 63px 40px;
  display: flex;
  flex-direction: column;
}
.sidebar__logo {
  width: 192px;
  margin-left: 14px;
}
.sidebar__nav {
  margin-top: 75px;
}
.sidebar__nav ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 400;
  color: var(--c-text-dark);
  padding: 8px 0;
}
.nav-item--sub {
  padding-left: 43px;
  position: relative;
}
.nav-item--sub::before {
  content: "→";
  position: absolute;
  left: 14px;
  color: var(--c-primary);
}
.nav-item__icon {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item__icon.icon-group {
  position: relative;
}
.nav-item__text--primary {
  color: var(--c-primary);
  font-weight: 700;
}
.nav-item__text--light {
  color: var(--c-text-light);
}
.nav-item--active .nav-item__text {
  font-weight: 700;
  color: var(--c-text-dark);
  position: relative;
}
.nav-item--active .nav-item__text::after {
  content: "";
  position: absolute;
  left: -29px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 4px;
  background-color: var(--c-text-dark);
}
.main-content {
  flex-grow: 1;
  padding: 57px 63px 75px 63px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.svg-circle-yellow {
  position: absolute;
  top: -11px;
  right: 0;
  width: 278px;
  height: auto;
  aspect-ratio: 10/9;
  z-index: 0;
}
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.back-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--c-primary);
}
.stepper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 800px;
  width: 100%;
  margin: 22px auto 0;
  position: relative;
}
.stepper__line {
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--c-text-disabled);
  z-index: 0;
}
.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  padding: 0 15px;
}
.stepper__circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 16px;
  background-color: var(--c-bg-light);
  color: var(--c-primary-dark);
}
.stepper__label {
  font-size: 12px;
  font-weight: 300;
  color: var(--c-text-disabled);
  white-space: nowrap;
}
.stepper__step--active .stepper__circle {
  background-color: var(--c-primary-dark);
  color: var(--c-bg-light);
  font-size: 18.6px;
}
.stepper__step--active .stepper__label {
  color: var(--c-text-dark);
}
.add-item-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
.add-item-section__title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text-main);
  margin: 0;
}
.add-item-section__content {
  margin-top: 66px;
  display: flex;
  align-items: center;
  gap: 74px;
}
.illustration-container {
  position: relative;
  width: 182px;
  height: 178px;
  flex-shrink: 0;
}
.illustration-container .svg-Frame {
  width: 182px;
  height: auto;
}
.actions-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: auto;
  height: auto;
  padding: 15px 96px;
  background-color: #f5f5f5;
  border: 1px solid var(--c-text-main);
  border-radius: 40px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
}
.add-item-btn svg {
  width: 28px;
  height: auto;
  aspect-ratio: 1/1;
}
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}
.checkbox__input {
  display: none;
}
.checkbox__custom {
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-primary);
  border-radius: 5px;
  background-color: var(--c-bg-white);
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
}
.checkbox__input:checked + .checkbox__custom {
  /* Add checkmark style here if needed */
}
.checkbox__label {
  font-size: 16px;
  color: var(--c-text-dark);
}
@media (max-width: 1200px) {
  .main-content {
    padding: 40px;
  }
  .add-item-section__content {
    gap: 40px;
  }
}
@media (max-width: 1024px) {
  .add-item-section__content {
    flex-direction: column;
    gap: 50px;
  }
  .actions-container {
    align-items: center;
  }
}
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    padding: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar__nav {
    margin-top: 0;
    /* A real implementation would use a hamburger menu */
    display: none;
  }
  .main-content {
    padding: 16px;
  }
  .main-header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    /* display: none;*/
  }
  .user-profile {
    /*align-self: flex-end;*/
    display: none !important;
  }
  /* .stepper {
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px 20px;
     margin-top: 40px;
   }*/
  .stepper {
    display: none;
  }
  .svg-circle-yellow {
    display: none;
  }
  .stepper__line {
    display: none;
  }
}
:root {
  --primary-brand: #0806ae;
  --primary-dark: #000019;
  --primary-dark-blue: #333373;
  --primary-blue-gray: #050468;
  --text-light: #ccccdc;
  --text-medium: #414d64;
  --accent-red: #ff8179;
  --background-light: #ffffff;
  --background-medium: #f5f5f5;
  --background-gradient-start: #e6e6ee;
  --background-accent: #fffbeb;
  --border-color: #cbcbe3;
}
.form-section {
  max-width: 986px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.form-title {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-dark-blue);
  margin: 0 0 44px 0;
}
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 358px;
}
.input-group {
  position: relative;
  border: 1px solid var(--primary-brand);
  border-radius: 5px;
  padding: 5px 16px 5.5px 16px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  background-color: var(--background-light);
  min-height: 59px;
}
.input-group label {
  background-color: var(--background-light);
  font-size: 12px;
  color: var(--primary-dark);
}
.input-group .svg-triangle-input {
  aspect-ratio: 2/1;
  width: 12px;
}
.input-group input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
  color: var(--primary-dark-blue);
  background: transparent;
  margin: 0;
  padding: 0;
}
.select-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  flex-direction: column;
  position: relative;
}
.select-group svg {
  position: absolute;
  top: 25px;
  right: 12px;
}
.select-content {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  color: var(--primary-dark-blue);
}
.form-row {
  display: flex;
  gap: 16px;
}
.form-row > .input-group {
  flex: 1;
}
.value-row {
  background-color: #f0f0f7;
  border-radius: 5px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.value-row .input-group {
  width: 116px;
  flex-shrink: 0;
  margin-left: auto;
}
.value-display {
  font-size: 16px;
  color: var(--primary-dark);
}
.remove-item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-red);
  font-weight: 700;
  font-size: 12px;
  margin-top: 30px;
  align-self: flex-start;
}
.add-item-btn {
  background-color: var(--background-medium);
  border: 1px solid var(--primary-dark-blue);
  border-radius: 31px;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-brand);
  cursor: pointer;
  align-self: center;
  width: 299px;
}
.discount-note {
  text-align: center;
  font-size: 14px;
  color: var(--primary-dark-blue);
  margin: 13px 0 0;
}
.discount-note b {
  font-weight: 700;
}
@media (max-width: 1200px) {
  .page-container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    min-height: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
  }
  .main-nav {
    /* In a real scenario, this would be a hamburger menu */
    display: none;
  }
  .main-content {
    padding: 20px;
  }
  .background-shape {
    display: none;
  }
  .main-header {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .user-profile {
    align-self: flex-end;
  }
  .stepper-container {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  form {
    max-width: 100%;
    align-items: center;
  }
  form > * {
    width: 100%;
    max-width: 400px;
  }
  .add-item-btn {
    width: 100%;
    max-width: 400px;
  }
}
.dashboard-container {
  display: flex;
  height: 100vh; /* ocupa toda la pantalla */
  overflow: hidden; /* evita doble scroll */
}
.main-content {
  overflow-y: auto;
  /* Chrome, Edge, Safari */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge viejo */
}
.main-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
/* ================= MOBILE VIEW ================= */
.mobile-quote-view {
  display: none;
}
/* Desktop */
@media (min-width: 769px) {
  .mobile-quote-view {
    display: none;
  }
}
/* Mobile */
@media (max-width: 768px) {
  /* ocultamos vista desktop */
  .add-item-section,
  .stepper,
  .main-header,
  .sidebar-client {
    display: none !important;
  }
  .mobile-quote-view {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fff;
  }
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .mobile-header h1 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 auto;
    transform: translateX(-12px);
    font-family: "Inter";
    color: #333373;
  }
  .mobile-back svg {
    width: 20px;
    height: 20px;
  }
  .mobile-tabs {
    display: flex;
    background: #f1f3f9;
    border-radius: 30px;
    padding: 4px;
    margin: 12px 0 24px 0;
  }
  .mobile-tabs .tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
  }
  .mobile-tabs .tab.active {
    background: #050468;
    color: #fff;
  }
  .mobile-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding-bottom: 40px;
  }
  .mobile-illustration svg {
    width: 160px;
    height: auto;
  }
  .mobile-text {
    font-size: 18px;
    color: #444;
    margin: 10px 0 0 0;
  }
  .mobile-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 30px;
    border: 1.5px solid #050468;
    background: #fff;
    color: #0806AE;
    font-weight: 600;
    font-size: 16px;
    width: -webkit-fill-available;
  }
  .mobile-add-btn svg {
    width: 18px;
    height: 18px;
  }
  .mobile-help {
    margin-top: 180px;
    font-size: 12px;
    color: #0806AE;
  }
}
#main-menu {
  height: 0px;
  overflow: hidden;
  position: relative;
}
#main-menu ._container {
  padding: 36px 1rem;
  position: relative;
  z-index: 9;
}
#main-menu ._container div.buttons-cta {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 25px;
}
#main-menu ._container div.buttons-cta a.btn-secondary {
  max-width: 400px;
  text-align: center;
  width: 100%;
}
#main-menu ._container div.buttons-cta a.btn-login {
  border-radius: 35px;
  font-size: 22px;
  font-weight: 600;
  max-width: 400px;
  padding: 14px 20px 10px;
  text-align: center;
  width: 100%;
}
#main-menu ._container div.buttons-cta a.btn-login svg {
  height: 30px;
  margin-right: 4px;
}
#main-menu .svg-balls {
  height: auto;
  position: absolute;
  right: -11%;
  top: 180px;
  width: 325px;
  z-index: 0;
}
#main-menu .svg-balls g path {
  fill: #fff7e0;
}
.-main-menu-active {
  overflow-y: hidden;
}
.-main-menu-active #main-menu {
  z-index: 1;
  background-color: #fefbf1;
  display: none;
  height: auto;
  height: -moz-max-content;
  height: max-content;
  min-height: 100vh;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}
.-main-menu-active #main-menu .menu-item a {
  color: #0f3d2e;
  font-size: 24px;
  font-weight: 700;
  transition: color 300ms;
}
.-main-menu-active #main-menu .menu-item a:hover {
  color: #db9917;
}
@media (max-width: 1200px) {
  .-main-menu-active #main-menu {
    display: block;
  }
}
#main-header-menu-mobile {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 25px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#main-header-menu-mobile ul {
  list-style-type: none;
}
#main-header-menu-mobile a {
  display: block;
  margin: 0 0 10px;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: transparent;
  color: #000;
}
.menu-mobile {
  display: none;
  height: 65px;
  width: 65px;
}
@media (max-width: 1200px) {
  .menu-mobile {
    align-items: center;
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .menu-mobile {
    height: 40px;
    width: 40px;
  }
}
#main-menu-toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
}
#main-menu-toggle .svg-close {
  display: none;
}
#main-menu-toggle .svg-balls {
  display: block;
  fill: #fff;
}
#main-menu-toggle > div {
  height: 30px;
}
#main-menu-toggle .svg-close {
  height: auto;
  width: 28px;
}
@media (max-width: 768px) {
  #main-menu-toggle .svg-close {
    width: 21px;
  }
}
#main-menu-toggle .svg-bar-menu {
  height: auto;
  width: 45px;
}
@media (max-width: 768px) {
  #main-menu-toggle .svg-bar-menu {
    width: 32px;
  }
}
@media (max-width: 992px) {
  #main-menu-toggle {
    display: inline-block;
  }
}
body.-main-menu-active #main-menu-toggle .svg-close {
  display: block;
}
body.-main-menu-active #main-menu-toggle .svg-bar-menu {
  display: none;
}
/* Sidebar Navigation */
.widget {
  margin-bottom: 35px;
}
.widgettitle {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 23px;
  margin: 0 0 10px 0;
  color: #0f3d2e;
}
.widget_categories ul,
.widget_archive ul,
.widget_recent_entries ul,
.widget_nav_menu ul {
  padding: 0;
  list-style-type: none;
}
.widget_categories li,
.widget_archive li,
.widget_recent_entries li,
.widget_nav_menu li {
  border-top: 1px solid #a4a4a4;
  padding: 10px 0;
  position: relative;
}
.widget_categories li:last-child,
.widget_archive li:last-child,
.widget_recent_entries li:last-child,
.widget_nav_menu li:last-child {
  border-bottom: 1px solid #a4a4a4;
}
.widget_categories li:after,
.widget_archive li:after,
.widget_recent_entries li:after,
.widget_nav_menu li:after {
  content: "›";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 24px;
  font-family: "Times";
  position: absolute;
  right: 0;
  top: 47%;
  color: #0f3d2e;
  transform: translateY(-50%);
  z-index: 1;
}
.widget_categories li a,
.widget_archive li a,
.widget_recent_entries li a,
.widget_nav_menu li a {
  display: block;
  padding-right: 40px;
  color: #000;
  z-index: 2;
  position: relative;
}
.widget_categories li a:hover,
.widget_archive li a:hover,
.widget_recent_entries li a:hover,
.widget_nav_menu li a:hover {
  color: #999999;
}
@media (max-width: 768px) {
  #sidebar {
    margin-top: 40px;
  }
}
body {
  margin: 0;
}
/* FUENTES */
/* OVERLAY */
.recover-pass-screen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
.recover-pass-screen.is-active {
  display: flex;
}
/* CONTENEDOR POPUP */
.recover-pass-container {
  position: relative;
  background: white;
  width: 100%;
  max-width: 600px;
  /*min-height: 480px;*/
  padding: 50px 30px 40px;
  border-radius: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
/* PASOS */
.view-step {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.view-step.is-visible {
  display: flex;
}
/* CERRAR */
.close-modal-recover {
  position: absolute;
  top: 25px;
  right: 50px;
  font-size: 24px;
  color: #333373;
  cursor: pointer;
  line-height: 1;
  font-weight: bold;
  z-index: 10;
  transition: transform 0.3s ease;
}
.close-modal-recover:hover {
  transform: scale(1.1);
}
/* TITULO */
.title-recover-pass {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center;
}
/* FORM */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 16px;
  max-width: 358px;
}
input:focus {
  outline: none;
}
/* INPUT */
.change-pass {
  height: 60px;
  width: 100%;
  max-width: 354px;
  border: 1px solid #0806AE;
  border-radius: 5px;
  font-size: 16px;
  padding: 0 30px;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1019607843);
  box-sizing: border-box;
}
/* BOTON */
.btn-recover-pass {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 100%;
  max-width: 356px;
  height: 52px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px;
  border: none;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  cursor: pointer;
  margin-bottom: 10px;
}
/* ERROR */
.error-msg {
  color: red;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  margin-bottom: 10px;
  max-width: 356px;
}
/* IMAGEN */
.rider {
  width: 120px;
  margin-top: auto;
}
/* LOGO */
.logo-pass {
  margin: 0 auto;
  display: block;
}
/* SUCCESS VIEW */
.success-view .rider {
  width: 120px;
  margin-bottom: 25px;
}
.success-view .success-title {
  font-size: 22px;
  font-family: "Inter", sans-serif;
  color: #050468;
  font-weight: 700;
  margin-bottom: 15px;
}
.success-view .success-text {
  font-size: 16px;
  font-family: "Rubik", sans-serif;
  color: #333373;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}
/* MOBILE */
@media (max-width: 480px) {
  .recover-pass-container {
    max-width: 100%;
    min-height: auto;
    /*padding: 40px 20px 30px;*/
    border-radius: 50px 50px 0px 0px;
    margin-top: 510px;
  }
  .close-modal-recover {
    top: 15px;
    right: 25px;
  }
  .title-recover-pass {
    font-size: 15px;
  }
  .change-pass {
    height: 54px;
    font-size: 15px;
  }
  .btn-recover-pass {
    height: 48px;
    font-size: 15px;
    margin-bottom: 20px;
  }
  .rider {
    width: 100px;
  }
}
.menu-client-mobile {
  display: flex;
  height: auto;
  bottom: 0;
  padding: 20px 15px 0px;
  width: 100%;
  z-index: 9999;
  position: fixed;
  background-color: #fff;
  border-radius: 32px 32px 0 0;
  box-shadow: 0px 8px 51px 14px rgba(5, 4, 104, 0.15);
}
@media (min-width: 768px) {
  .menu-client-mobile {
    display: none;
  }
}
.menu-client-mobile .container-icons {
  max-width: 460px;
  width: 100%;
  height: auto;
  display: flex;
  margin: auto;
  justify-content: space-between;
}
.menu-client-mobile .container-icon {
  width: 39.8px;
  height: 62px;
}
.menu-client-mobile .icon-menu {
  width: 31.85px;
  height: 31.85px;
  display: flex;
  margin: auto;
  margin-bottom: 6px;
}
.menu-client-mobile p {
  font-size: 9.73px;
  font-family: "Inter", sans-serif;
  color: #000019;
}
.avatar-container {
  width: 800px;
  border: 2px solid #000050;
  border-radius: 100px;
  margin: auto;
  height: 600px;
  margin-top: 80px;
  background: white;
  /* Slider styles moved from avatars.php */
  /* Aplicar mismo estilo de selección para los avatares dentro de slides */
  /* Evitar selección/arrastre de imágenes y ajustar cursor al arrastrar */
}
.avatar-container .avatar-section {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1rem 1rem;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
}
.avatar-container .avatar-section .title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.avatar-container .avatar-section .avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}
.avatar-container .avatar-section .avatar-grid img {
  width: auto;
  height: 127px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  border: 3px solid transparent;
  border-radius: 15px;
}
.avatar-container .avatar-section .avatar-grid img:hover {
  transform: scale(1.08);
}
.avatar-container .avatar-section .avatar-grid img.selected {
  border: 3px solid #2E2E72;
  box-shadow: 0 4px 12px rgba(46, 46, 114, 0.3);
}
.avatar-container .avatar-section .btn-create {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 356px;
  height: 52px;
  align-items: center;
  background: rgb(0, 0, 80);
  border-radius: 31px;
  border: none;
  display: block;
  font-weight: bold;
  margin: 40px auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  padding: 11px;
  margin-top: 70px;
}
@media (max-width: 768px) {
  .avatar-container {
    border: none;
    width: 90%;
    max-width: 360px;
    height: 550px; /* ⬅️ Altura fija más grande */
    margin-top: 80px;
    background: white;
    border-radius: 40px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
  }
  .avatar-container .avatar-section {
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ⬅️ Separar contenido */
  }
  .avatar-container .avatar-section .title {
    font-size: 18px;
    margin-bottom: 30px;
    margin-top: 10px;
  }
  .avatar-container .avatar-section .avatar-grid {
    gap: 20px;
    margin-top: 0;
    margin-bottom: 0;
    flex-grow: 1; /* ⬅️ Ocupa espacio disponible */
    align-content: center;
  }
  .avatar-container .avatar-section .avatar-grid img {
    height: 90px; /* ⬅️ Tamaño medio */
    width: auto;
  }
  .avatar-container .avatar-section .btn-create {
    width: 100%;
    max-width: 280px;
    margin: 20px auto 0;
    font-size: 14px;
    height: 48px;
  }
}
.avatar-container .avatar-slider-wrapper {
  position: relative;
  overflow: hidden;
}
.avatar-container .avatar-slider-container {
  position: relative;
  width: 100%;
}
.avatar-container .avatar-slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
  cursor: grab;
}
.avatar-container .avatar-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
}
.avatar-container .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(46, 46, 114, 0.8);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10;
  transition: background 0.3s ease, transform 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.avatar-container .slider-arrow:hover {
  background: rgb(46, 46, 114);
  transform: translateY(-50%) scale(1.1);
}
.avatar-container .slider-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.avatar-container .slider-arrow.disabled {
  background: rgba(200, 200, 200, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}
.avatar-container .slider-arrow-left {
  left: -50px;
}
.avatar-container .slider-arrow-right {
  right: -50px;
}
.avatar-container .slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.avatar-container .slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  border: 2px solid transparent;
}
.avatar-container .slider-dot:hover {
  background: #bbb;
  transform: scale(1.2);
}
.avatar-container .slider-dot.active {
  background: #2E2E72;
  border-color: #2E2E72;
  transform: scale(1.3);
}
.avatar-container .avatar-slide img.selected,
.avatar-container .avatar.selected {
  border: 3px solid #2E2E72;
  box-shadow: 0 4px 12px rgba(46, 46, 114, 0.3);
  border-radius: 15px;
}
.avatar-container .avatar-slide img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.avatar-container .avatar-slider.grabbing {
  cursor: grabbing;
}
@media (max-width: 768px) {
  .avatar-container {
    /* Ocultar flechas en mobile (solo mostrar en escritorio) */
  }
  .avatar-container .slider-arrow-left {
    left: -15px;
  }
  .avatar-container .slider-arrow-right {
    right: -15px;
  }
  .avatar-container .slider-arrow {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  .avatar-container .avatar-slide img {
    height: 90px;
    width: auto;
  }
  .avatar-container .slider-arrow {
    display: none;
  }
}
/* Ensure avatars modal displays as overlay even when page lacks .profile-main */
#avatars-modal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(180, 179, 179, 0.84);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#avatars-modal.modal-overlay.active {
  display: flex;
}
#avatars-modal .avatar-container {
  /* keep existing avatar-container sizing but make sure it stacks */
  z-index: 10000;
}
.mail-sent {
  margin: 50px 13px;
}
.mail-sent .rider {
  width: 146px;
  height: 160px;
  display: flex;
  margin: auto;
  margin-bottom: 20px;
  /*margin-top: 250px;*/
}
.mail-sent .email-display {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 20px 16px;
  width: 100%;
  max-width: 354px;
  margin: 0 auto 46px auto;
}
.mail-sent .email-text {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  word-break: break-all;
}
@media (min-width: 768px) {
  .mail-sent {
    border: 2px solid #1a1a5c;
    border-radius: 50px;
    padding: 40px;
    max-width: 600px;
    margin: 200px auto;
  }
}
@media (max-width: 767px) {
  .mail-sent {
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;
    padding: 30px 20px;
    margin-bottom: 250px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
}
.profile-header {
  background-color: #e6e6ee;
  height: 137px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-header .container {
  max-width: 1440px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 25px;
}
.profile-header .back-button {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 45px;
}
.profile-header .back-button img {
  width: 100%;
  height: 100%;
}
.profile-header .header-title {
  color: #333373;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 29px;
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  .profile-header .header-title {
    font-size: 24px;
  }
}
.profile-main {
  display: flex;
  justify-content: center;
  /* ===== MODAL ===== */
  /* Dirección*/
  /*  Agregar direccion */
  /* METODOS DE PAGO */
  /* Agregar metodos de pago */
  /* Reviews */
  /*  ESTILOS DEL MODAL */
}
.profile-main .profile-card {
  position: relative;
  z-index: 1;
  margin-top: -46px;
  background-color: #ffffff;
  border-radius: 32px;
  box-shadow: 0 -10px 10px -5px rgba(5, 4, 104, 0.15);
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-height: 900px) and (max-width: 768px) {
  .profile-main .profile-card {
    max-height: 95vh;
    overflow-y: auto;
  }
}
.profile-main .profile-card .profile-picture-wrapper {
  position: relative;
  margin-top: 23px;
  width: 130px;
  height: 130px;
}
.profile-main .profile-card .profile-picture-wrapper .profile-avatar {
  position: relative;
  width: 130px;
  height: 130px;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
  border-radius: 50%;
  overflow: hidden;
}
.profile-main .profile-card .profile-picture-wrapper .profile-avatar .avatar {
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 130px;
  height: 130px;
}
.profile-main .profile-card .profile-picture-wrapper .edit-profile-button {
  position: absolute;
  right: -7px;
  bottom: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: #CECDEF;
  border-radius: 100%;
}
.profile-main .profile-card .profile-picture-wrapper .edit-profile-button .edit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}
.profile-main .profile-card .user-info {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-main .profile-card .user-info .username {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #333373;
  margin: 0;
}
.profile-main .profile-card .user-info .user-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile-main .profile-card .user-info .user-rating img {
  width: 25px;
  height: 25px;
}
.profile-main .profile-card .user-info .user-rating .rating-text {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  color: #333373;
}
.profile-main .profile-card .profile-menu {
  width: 345px;
  margin-top: 35px;
}
.profile-main .profile-card .profile-menu span {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #050468;
}
.profile-main .profile-card .profile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-main .profile-card .profile-menu li {
  border-bottom: 1px solid #ccccdc;
}
.profile-main .profile-card .profile-menu .b-extra {
  border-top: 1px solid #ccccdc;
}
.profile-main .profile-card .profile-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16.5px 10px;
  text-decoration: none;
  color: #050468;
  font-size: 16px;
  line-height: 21px;
}
.profile-main .profile-card .profile-menu a img {
  width: 32px;
  height: 32px;
}
.profile-main .profile-card .action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 43px;
  width: 100%;
  padding: 0 10px;
  position: static;
}
.profile-main .profile-card .action-buttons .btn {
  width: 100%;
  max-width: 356px;
  height: 58px;
  border-radius: 31px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-main .profile-card .action-buttons .btn-primary {
  background: linear-gradient(180deg, #3b42c4 0%, #1e248a 100%);
  color: #ffffff;
  border-radius: 50px;
  border: none;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-main .profile-card .action-buttons .btn-secondary {
  background-color: #f5f5f5;
  border: 1px solid #ff8179;
  color: #ff8179;
}
@media (min-width: 768px) {
  .profile-main .profile-card .profile-picture-wrapper {
    width: 186px;
    height: 186px;
  }
  .profile-main .profile-card .profile-picture-wrapper .profile-avatar {
    width: 100%;
    height: 100%;
  }
  .profile-main .profile-card .profile-picture-wrapper .profile-avatar .avatar {
    width: 185.58px;
    height: 185.58px;
  }
  .profile-main .profile-card .profile-picture-wrapper .edit-profile-button {
    width: 52px;
    height: 52px;
    right: -10px;
    bottom: 3px;
    position: absolute;
  }
  .profile-main .profile-card .profile-picture-wrapper .edit-profile-button .edit-icon {
    width: 29px;
    height: 29px;
  }
}
.profile-main .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(180, 179, 179, 0.84);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.profile-main .modal-overlay.active {
  display: flex;
}
.profile-main .personal-info-section .personal-info-card {
  position: relative;
  max-width: 800px;
  width: 100%;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  padding: 46px 150px 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.profile-main .personal-info-section .personal-info-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.profile-main .personal-info-section .personal-info-card .personal-info-title,
.profile-main .personal-info-section .personal-info-card .personal-info-form {
  position: relative;
  z-index: 1;
}
.profile-main .personal-info-section .personal-info-card .personal-info-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33.18px;
  text-align: center;
  margin: 0 0 16px 0;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  justify-content: normal; /* Se justifica  de esta manera para que no se desalineen, no cambiar */
  flex-grow: 1;
  width: 500px;
  height: 59px;
  position: relative;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group.dropdown-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group.dropdown-field .dropdown-icon {
  transition: transform 0.3s ease;
  width: 12px;
  height: auto;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group.dropdown-field:focus-within .dropdown-icon {
  transform: rotate(180deg);
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form input {
  border: none;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form input[type=text] {
  padding: 0;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .select-group {
  position: relative;
  width: 100%;
  height: 100%;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .select-group select {
  border: none;
  background: transparent;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
  width: 100%;
  height: 100%;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  cursor: pointer;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .name-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .lastname-group label {
  color: #000000;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 500px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .dob-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .alias-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .dob-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .alias-group {
  width: calc(60% - 10px);
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .gender-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .country-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .gender-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .country-group {
  width: calc(40% - 10px);
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .dob-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .gender-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .address-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .phone-group label {
  color: #000019;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .dob-group {
  width: 340px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .gender-group {
  width: 137px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  margin-top: 6px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
}
@media (max-width: 768px) {
  .profile-main .personal-info-section {
    padding: 0;
  }
  .profile-main .personal-info-section .personal-info-card {
    border: none;
    padding: 0 20px;
    border-radius: 73px 73px 0 0;
    padding-top: 30px;
    position: absolute;
    bottom: 0;
    max-width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-title {
    width: 100%;
    text-align: center;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form {
    width: 100%;
    padding-bottom: 20px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-group {
    width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .dob-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .gender-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .alias-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .country-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .dob-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .gender-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .alias-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .country-group {
    width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .select-group {
    width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .submit-button {
    width: 100%;
  }
}
.profile-main .addresses-section {
  position: relative;
  max-width: 800px;
  width: 100%;
  background-color: #fff;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-main .addresses-section .addresses-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  height: 600px;
  padding: 46px 150px 57px;
}
.profile-main .addresses-section .addresses-content .addresses-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33px;
  text-align: center;
  margin: 0;
  margin-bottom: 28px;
}
.profile-main .addresses-section .addresses-content .address-list {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
}
.profile-main .addresses-section .addresses-content .address-list .address-scroll {
  display: contents;
}
.profile-main .addresses-section .addresses-content .address-list .address-card {
  background-color: #e6e6ee;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  width: 500px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.profile-main .addresses-section .addresses-content .address-list .address-card:hover {
  background-color: #d1d1e4;
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 50, 0.15);
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 50px;
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-info .address-name {
  color: #000050;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  margin: 0;
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-info .address-details {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  width: 177px;
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-icon {
  width: 12px;
  height: 6px;
  flex-shrink: 0;
}
.profile-main .addresses-section .addresses-content .add-address-btn {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  width: 355px;
  max-width: 100%;
  height: 58px;
  bottom: 30px;
  position: absolute;
  margin: 0 0 40px 0;
}
@media (max-width: 768px) {
  .profile-main .addresses-section {
    border: none;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
  }
  .profile-main .addresses-section .addresses-content {
    width: 367px;
    padding: 47px 0;
  }
  .profile-main .addresses-section .addresses-content .addresses-title {
    width: 357px;
    text-align: left;
  }
  .profile-main .addresses-section .addresses-content .address-list .address-card {
    width: 354px;
    height: 98px;
  }
  .profile-main .addresses-section .addresses-content .address-list .address-card .address-info {
    padding-left: 0;
  }
}
.profile-main .add-address-section .add-address-card {
  position: relative;
  max-width: 800px;
  width: 100%;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  padding: 46px 150px 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.profile-main .add-address-section .add-address-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.profile-main .add-address-section .add-address-card .add-address-title,
.profile-main .add-address-section .add-address-card .add-address-form {
  position: relative;
  z-index: 1;
}
.profile-main .add-address-section .add-address-card .add-address-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33.18px;
  text-align: center;
  margin: 20px 0 15px 0;
}
.profile-main .add-address-section .add-address-card .add-address-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  /* Estilos específicos para select en form-row */
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 500px;
  height: 59px;
  box-sizing: border-box;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group select.value {
  width: 100%;
  border: none;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 18.75px;
  color: #000019;
  cursor: pointer;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
}
.profile-main .add-address-section .add-address-card .add-address-form input {
  border: none;
}
.profile-main .add-address-section .add-address-card .add-address-form input[type=text] {
  padding: 0;
}
.profile-main .add-address-section .add-address-card .add-address-form .name-group label,
.profile-main .add-address-section .add-address-card .add-address-form .lastname-group label {
  color: #000000;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row {
  display: flex;
  gap: 20px;
  width: 500px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 9px 12px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field .input-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field .dropdown-icon {
  transition: transform 0.3s ease;
  width: 12px;
  height: auto;
  margin-left: 8px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field:focus-within .dropdown-icon {
  transform: rotate(180deg);
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row-num {
  width: 500px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group div[style*="position: relative"] {
  width: 100%;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group select {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group {
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group .select-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group select.value {
  width: 100%;
  border: none;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  padding-right: 24px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 18.75px;
  color: #000019;
  cursor: pointer;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group .address-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-200%);
  width: 10px;
  pointer-events: none;
}
.profile-main .add-address-section .add-address-card .add-address-form .dob-group label,
.profile-main .add-address-section .add-address-card .add-address-form .gender-group label,
.profile-main .add-address-section .add-address-card .add-address-form .address-group label,
.profile-main .add-address-section .add-address-card .add-address-form .phone-group label {
  color: #000019;
}
.profile-main .add-address-section .add-address-card .add-address-form .dob-group {
  width: 240px;
}
.profile-main .add-address-section .add-address-card .add-address-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  margin-top: 36px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
  margin: 0 0 40px 0;
}
@media (max-width: 768px) {
  .profile-main .add-address-section {
    padding: 0;
  }
  .profile-main .add-address-section .add-address-card {
    border: none;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
    padding: 0 46px 0;
  }
  .profile-main .add-address-section .add-address-card .add-address-title {
    width: 354px;
    text-align: center;
  }
  .profile-main .add-address-section .add-address-card .add-address-form {
    width: 354px;
    padding-bottom: 20px;
    align-content: end;
    display: grid;
  }
  .profile-main .add-address-section .add-address-card .add-address-form .form-group {
    width: 354px;
  }
  .profile-main .add-address-section .add-address-card .add-address-form .form-row {
    display: contents;
  }
  .profile-main .add-address-section .add-address-card .add-address-form .form-row-num {
    width: 206px;
    padding-right: 0;
  }
}
.profile-main .payment-methods-section {
  position: relative;
  max-width: 800px;
  width: 100%;
  background-color: #fff;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-main .payment-methods-section .payment-methods-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  height: 600px;
  padding: 46px 150px 57px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33px;
  text-align: center;
  margin: 0;
  margin-bottom: 28px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-bottom: 110px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 15px;
  margin-right: -15px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card {
  background-color: transparent;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  border: 1px solid #0806ae;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
  height: 75px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card:hover {
  background-color: #f8f8ff;
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(8, 6, 174, 0.2);
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info .payment-name {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  margin: 0;
  align-items: center;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info .payment-details {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  width: 177px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-icon {
  width: 12px;
  height: 6px;
  flex-shrink: 0;
}
.profile-main .payment-methods-section .payment-methods-content .add-payment-btn {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  width: 355px;
  max-width: 100%;
  height: 58px;
  bottom: 30px;
  position: absolute;
  margin: 40px;
}
@media (max-width: 768px) {
  .profile-main .payment-methods-section {
    border: none;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
    padding-top: 50px;
  }
  .profile-main .payment-methods-section .payment-methods-content {
    width: 367px;
    padding: 5px;
  }
  .profile-main .payment-methods-section .payment-methods-content .payment-methods-title {
    width: 357px;
    text-align: left;
  }
  .profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card {
    width: 354px;
    height: 59px;
  }
  .profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info {
    padding-left: 0;
  }
}
.profile-main .add-payment-methods-card {
  position: relative;
  width: 600px;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  padding: 27px 120px 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.profile-main .add-payment-methods-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.profile-main .add-payment-methods-card .add-payment-methods-title,
.profile-main .add-payment-methods-card .add-payment-methods-form {
  position: relative;
  z-index: 1;
}
.profile-main .add-payment-methods-card .add-payment-methods-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 33.18px;
  width: 354px;
  margin: 0 0 14px 0;
}
.profile-main .add-payment-methods-card .add-payment-methods-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 354px;
  height: 59px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form input {
  border: none;
}
.profile-main .add-payment-methods-card .add-payment-methods-form input[type=text] {
  padding: 0;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group:has(input[name=card_number]) {
  height: 75px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group:has(input[name=card_expiracion]) {
  position: relative;
}
.profile-main .add-payment-methods-card .add-payment-methods-form #expiry-calendar-icon {
  transition: opacity 0.2s ease;
}
.profile-main .add-payment-methods-card .add-payment-methods-form #expiry-calendar-icon:hover {
  opacity: 0.7;
}
.profile-main .add-payment-methods-card .add-payment-methods-form #expiry-calendar-icon:active {
  opacity: 0.5;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-row .form-group {
  flex: 1;
  width: auto;
  min-width: 0;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-row-num {
  width: 250px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .dob-group label {
  color: #000019;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .dob-group {
  width: 240px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  margin: 30px 0 45px 0;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
}
@media (max-width: 768px) {
  .profile-main .add-payment-methods-card {
    border: none;
    width: 100%;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
    padding: 30px 0 0 0;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-title {
    width: 354px;
    text-align: justify;
    font-weight: 700;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-form {
    width: 354px;
    padding-bottom: 20px;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-form .form-group {
    width: 354px;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-form .form-row-num {
    width: 206px;
    padding-right: 0;
  }
}
.profile-main .modal-overlay-reviews {
  position: fixed;
  inset: 0;
  background-color: rgb(230, 230, 238);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.profile-main .modal-overlay-reviews.active {
  display: flex;
}
.profile-main .reviews-page {
  width: 100%;
  height: 100%;
  justify-content: center;
}
.profile-main .reviews-page .main-container {
  width: 100%;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}
.profile-main .reviews-page .page-header {
  padding: 34px 25px 0 25px;
  position: relative;
  z-index: 10;
}
.profile-main .reviews-page .header-content {
  display: flex;
  align-items: center;
  position: relative;
}
.profile-main .reviews-page .back-arrow {
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.profile-main .reviews-page .page-title {
  font-family: "Inter", sans-serif;
  flex-grow: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
  color: rgb(5, 4, 104);
  margin: 0;
  margin-right: 56px;
}
.profile-main .reviews-page .content-card {
  background-color: #ffffff;
  border-radius: 32px 32px 0 0;
  margin-top: 12px;
  min-height: 823px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0px 8px 51px 0px rgba(5, 4, 104, 0.15);
}
.profile-main .reviews-page .profile-column {
  width: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  align-content: center;
  display: block;
}
.profile-main .reviews-page .avatar-container {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
  border-radius: 100%;
}
.profile-main .reviews-page .avatar-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.profile-main .reviews-page .avatar-face-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.profile-main .reviews-page .face-part {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
}
.profile-main .reviews-page .rating-badge {
  position: absolute;
  bottom: 0px;
  right: -27px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.profile-main .reviews-page .badge-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.profile-main .reviews-page .badge-text {
  position: relative;
  z-index: 2;
  font-weight: 700;
  font-size: 22px;
  margin-right: 2px;
  background: rgb(230, 230, 247);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: #333373;
  padding: 8px;
}
.profile-main .reviews-page .badge-star {
  position: absolute;
  top: -9px;
  right: -5px;
  width: 25px;
  height: 25px;
  display: flex;
  z-index: 9999;
}
.profile-main .reviews-page .username {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgb(51, 51, 115);
  margin: 10px 0 5px 0;
  text-align: center;
}
.profile-main .reviews-page .user-role {
  font-size: 16px;
  color: #000019;
  margin: 0 0 40px 0;
  font-family: "Rubik", sans-serif;
  text-align: center;
}
.profile-main .reviews-page .user-stats {
  display: flex;
  justify-content: center;
  gap: 21px;
  margin: 34px;
  text-align: center;
}
.profile-main .reviews-page .user-stats .line {
  border-right: 1px solid #CCCCDC;
  padding-right: 10px;
}
.profile-main .reviews-page .user-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-main .reviews-page .user-stats .stat-item .stat-number {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.profile-main .reviews-page .user-stats .stat-item .stat-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Rubik", sans-serif;
}
.profile-main .reviews-page .rating-metrics {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  align-items: center;
}
.profile-main .reviews-page .metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.profile-main .reviews-page .stars-row {
  display: flex;
  gap: 8px;
}
.profile-main .reviews-page .stars-row svg {
  width: auto;
  height: 35px;
}
.profile-main .reviews-page .metric-label {
  font-size: 18px;
  color: #333373;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
}
.profile-main .reviews-page .reviews-column {
  flex-grow: 1;
  padding: 40px 9.8%;
  display: flex;
  flex-direction: column;
}
.profile-main .reviews-page .reviews-title {
  font-size: 14px;
  color: rgb(51, 51, 115);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 30px;
  font-family: "Rubik", sans-serif;
}
.profile-main .reviews-page .reviews-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.profile-main .reviews-page .no-reviews-banner {
  background: #f8f9fa;
  border: 1px dashed #ccc;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  color: #666;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.profile-main .reviews-page .no-reviews-banner img {
  width: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}
.profile-main .reviews-page .no-reviews-banner .banner-title {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  margin: 0;
  color: #666;
}
.profile-main .reviews-page .no-reviews-banner .banner-subtitle {
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 0;
  color: #888;
}
.profile-main .reviews-page .review-card {
  display: flex;
  align-items: flex-start;
}
.profile-main .reviews-page .review-icon-wrapper {
  width: 30px;
  flex-shrink: 0;
}
.profile-main .reviews-page .review-icon-merged {
  position: relative;
  width: 19px;
  height: 19px;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
  border-radius: 100%;
}
.profile-main .reviews-page .icon-bg {
  width: 100%;
  height: 100%;
}
.profile-main .reviews-page .review-content-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-main .reviews-page .container-text {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px 16px;
  width: auto;
}
.profile-main .reviews-page .review-rating {
  display: flex;
  gap: 4px;
}
.profile-main .reviews-page .review-rating svg {
  width: auto;
  height: 15px; /* Size for review cards */
}
.profile-main .reviews-page .review-text {
  font-size: 12px;
  color: #000000;
  line-height: 1.4;
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
}
.profile-main .reviews-page .review-meta {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #000000;
  opacity: 0.6;
  margin: 0;
  margin-top: 4px;
}
.profile-main .reviews-page .load-more-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  width: auto;
}
.profile-main .reviews-page .load-more-link {
  font-size: 13px;
  color: rgb(51, 51, 115);
  font-weight: 400;
  text-decoration: underline;
  font-family: "Rubik", sans-serif;
}
@media (min-width: 768px) {
  .profile-main .reviews-page .main-container {
    overflow: hidden;
  }
  .profile-main .reviews-page .page-header .back-arrow {
    width: 56px;
    height: 45px;
  }
  .profile-main .reviews-page .page-header .page-title {
    font-size: 24px;
  }
  .profile-main .reviews-page .content-card {
    height: auto;
    flex-direction: row;
  }
  .profile-main .reviews-page .content-card .profile-column {
    width: auto;
    max-width: 420px;
    padding: 0 6%;
    border-right: 2px solid #e0e0e0;
  }
  .profile-main .reviews-page .content-card .profile-column .avatar-container {
    width: 174.55px;
    height: 174.55px;
  }
  .profile-main .reviews-page .content-card .profile-column .rating-badge {
    right: -18px;
  }
  .profile-main .reviews-page .content-card .profile-column .face-part {
    width: 174.55px;
    height: 174.55px;
  }
  .profile-main .reviews-page .content-card .profile-column .badge-star {
    top: -13px;
    right: -5px;
  }
  .profile-main .reviews-page .content-card .profile-column .user-stats {
    display: none;
  }
  .profile-main .reviews-page .content-card .profile-column .rating-metrics .stars-row svg {
    width: auto;
    height: 40px; /* Slightly larger on desktop? or keep 35? User said 35 */
  }
  .profile-main .reviews-page .reviews-column {
    padding: 40px 9%;
  }
  .profile-main .reviews-page .reviews-column .reviews-title {
    font-size: 20px;
  }
  .profile-main .reviews-page .reviews-column .review-text {
    font-size: 16px;
  }
  .profile-main .reviews-page .reviews-column .container-text {
    width: auto;
    max-width: 625px;
  }
  .profile-main .reviews-page .reviews-column .load-more-container {
    width: auto;
    max-width: 651px;
  }
}
.profile-main #dui-modal-wrapper {
  z-index: 10000;
  /* ESTILO MÓVIL  */
  align-items: flex-end !important;
  padding: 0 !important;
  /* Botón cerrar en Móvil */
  /*ADAPTACIÓN PARA DESKTOP */
}
.profile-main #dui-modal-wrapper .dui-modal-card {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 100%;
  height: 85vh;
  border-radius: 73px 73px 0 0;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.profile-main #dui-modal-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.profile-main #dui-modal-wrapper #close-dui-modal {
  position: absolute;
  top: 25px;
  right: 30px;
  z-index: 100;
  /* Apariencia */
  background: rgba(0, 0, 0, 0.05); /* Color base */
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  /* Texto/Icono */
  font-weight: bold;
  color: #000050;
  font-size: 18px;
  /* Alineación */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Interacción (Hover) */
  transition: background-color 0.2s ease;
}
.profile-main #dui-modal-wrapper #close-dui-modal:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .profile-main #dui-modal-wrapper {
    align-items: center !important;
    padding: 20px !important;
    justify-content: center;
  }
  .profile-main #dui-modal-wrapper .dui-modal-card {
    max-width: 800px;
    max-height: 700px;
    width: 100%;
    height: 100%;
    border-radius: 90px;
    border: 2px solid #000050;
    margin: auto;
  }
  .profile-main #dui-modal-wrapper #close-dui-modal {
    top: 35px !important;
    right: 50px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    width: 36px;
    height: 36px;
  }
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
/* === CONTENEDOR PRINCIPAL === */
.dui-verification {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0px;
  /* Tarjeta del formulario */
  /* Títulos y Textos */
  /* Formulario e Inputs */
  /* Estilos de inputs limpios */
  /* Icono Dropdown */
  /* Botones de Carga (Evidencia) */
  /* Botón Submit */
}
.dui-verification .dui-card {
  position: relative;
  width: 100%;
  max-width: 375px;
  height: 697px;
  max-height: 100%;
  background-color: #ffffff;
  border-radius: 60px 60px 0px 0px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 55px 12px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Estado de alerta (error/éxito) */
}
.dui-verification .dui-card.modo-alerta {
  padding-top: 20px !important;
}
@media (max-width: 750px) {
  .dui-verification .dui-card.modo-alerta .submit-btn {
    margin-top: 15px;
  }
}
.dui-verification .card-title {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  color: #333373;
  font-size: 22px;
  margin: 35px 10px 15px 0px;
  text-align: left;
  max-width: 350px !important;
  width: 100%;
  height: 26px;
}
.dui-verification .card-description {
  color: #000000;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 300;
  margin: 0 0 22px 0;
  text-align: left;
  font-family: "Inter", sans-serif;
  word-wrap: break-word;
}
.dui-verification .form-container {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dui-verification .input-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  height: 59px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  max-width: 354px;
  width: 100%;
}
.dui-verification .input-group:focus-within {
  border: 1px solid #0806ae !important;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.2) !important;
}
.dui-verification .input-group:focus-within .dropdown-icon {
  transform: rotate(180deg);
}
.dui-verification .input-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.dui-verification .input-label {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  margin-bottom: 2px;
}
.dui-verification .input-value,
.dui-verification select.input-value,
.dui-verification input.input-value {
  color: #000050;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 300;
  width: 100%;
  height: 19px;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.dui-verification .input-value::-moz-placeholder, .dui-verification select.input-value::-moz-placeholder, .dui-verification input.input-value::-moz-placeholder {
  color: #ccc;
  font-weight: 300;
}
.dui-verification .input-value::placeholder,
.dui-verification select.input-value::placeholder,
.dui-verification input.input-value::placeholder {
  color: #ccc;
  font-weight: 300;
}
.dui-verification .input-value:focus, .dui-verification .input-value:active, .dui-verification .input-value:invalid,
.dui-verification select.input-value:focus,
.dui-verification select.input-value:active,
.dui-verification select.input-value:invalid,
.dui-verification input.input-value:focus,
.dui-verification input.input-value:active,
.dui-verification input.input-value:invalid {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.dui-verification .dropdown-icon {
  width: 12px;
  height: auto;
  transition: transform 0.3s ease;
}
.dui-verification .upload-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}
.dui-verification .section-label {
  color: #000000;
  font-size: 16px;
  font-weight: 300;
  margin-left: -2px;
}
.dui-verification .upload-btn {
  background-color: #f5f5f5;
  border: 1px solid #333373;
  border-radius: 31px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 477px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s;
}
.dui-verification .upload-btn:hover {
  background-color: #e0e0e0;
}
.dui-verification .btn-text {
  color: #0806ae;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 300;
}
.dui-verification .btn-icon {
  width: 28px;
  height: 28px;
}
.dui-verification .submit-btn {
  margin-top: 10px;
  height: 62px;
  max-width: 355px;
  width: 100%;
  border-radius: 31px;
  background: linear-gradient(90deg, #4747d9 0%, #000050 100%);
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.35);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s;
}
.dui-verification .submit-btn:active {
  transform: scale(0.98);
}
/* === ESTILOS DEL VISOR DE CÁMARA & MODALES === */
/* Sacado fuera de .dui-verification para evitar problemas de z-index o anidamiento */
.visor-camara {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  /* Contenedor Base (Blanco) */
  /* === ESTILOS DEL MODAL DE SELECCIÓN === */
}
.visor-camara .contenido-camara {
  background: white;
  padding: 20px;
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Estilos específicos de la Cámara */
}
.visor-camara .contenido-camara h3 {
  font-family: "Rubik", sans-serif;
  color: #000050;
  font-weight: 500px;
  margin-bottom: 15px;
}
.visor-camara .contenido-camara .video-wrapper {
  width: 100%;
  height: 350px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visor-camara .contenido-camara .video-wrapper video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.visor-camara .contenido-camara .botones-camara {
  display: flex;
  gap: 20px;
}
.visor-camara .contenido-camara .botones-camara button {
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  border: none;
}
.visor-camara .contenido-camara .botones-camara .btn-cancelar {
  background: #eee;
  color: #333;
}
.visor-camara .contenido-camara .botones-camara .btn-tomar {
  background: linear-gradient(90deg, #4747d9 0%, #000050 100%);
  color: white;
}
.visor-camara .modal-seleccion {
  max-width: 360px !important;
  padding: 35px 25px;
  border-radius: 25px;
  text-align: center;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease-out;
}
.visor-camara .modal-seleccion h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 25px;
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  /* Botón Cámara */
  /* Botón Galería */
  /* Botón Cancelar */
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-opcion {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-opcion:active {
  transform: scale(0.98);
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-camara {
  background: linear-gradient(90deg, #4747d9 0%, #000050 100%);
  color: #ffffff;
  box-shadow: 0px 4px 12px rgba(8, 6, 174, 0.2);
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-camara:hover {
  background-color: #000050;
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-galeria {
  background-color: transparent;
  color: #000050;
  border: 2px solid #000050;
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-galeria:hover {
  background-color: #f0f0ff;
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-cancelar-texto {
  margin-top: 10px;
  color: #888;
  font-size: 14px;
  text-decoration: underline;
}
.visor-camara .modal-seleccion .contenedor-botones-seleccion .btn-cancelar-texto:hover {
  color: #333;
}
/* Animación */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === RESPONSIVE (DESKTOP) === */
@media (min-width: 768px) {
  .dui-verification .dui-card {
    max-width: 800px;
    height: 700px;
    border-radius: 25px;
    margin-top: -20px !important;
    padding: 30px 20px;
    border: 0px solid #000050;
  }
  .dui-verification .card-title {
    width: 476px;
    text-align: center;
  }
  .dui-verification .card-description {
    max-width: 476px;
    height: auto;
    margin: 0 0 38px 0;
  }
  .dui-verification .input-label,
  .dui-verification .input-group,
  .dui-verification .upload-btn,
  .dui-verification .submit-btn {
    width: 100%;
    max-width: 477px;
  }
}
@media (max-width: 350px) {
  .dui-verification .card-description {
    margin-top: 20px;
    font-size: 14px;
  }
}
.avatar-container {
  width: 800px;
  border: 2px solid #000050;
  border-radius: 100px;
  margin: auto;
  height: 600px;
  margin-top: 80px;
  background: white;
  /* Slider styles moved from avatars.php */
  /* Aplicar mismo estilo de selección para los avatares dentro de slides */
  /* Evitar selección/arrastre de imágenes y ajustar cursor al arrastrar */
}
.avatar-container .avatar-section {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1rem 1rem;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
}
.avatar-container .avatar-section .title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.avatar-container .avatar-section .avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}
.avatar-container .avatar-section .avatar-grid img {
  width: auto;
  height: 127px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  border: 3px solid transparent;
  border-radius: 15px;
}
.avatar-container .avatar-section .avatar-grid img:hover {
  transform: scale(1.08);
}
.avatar-container .avatar-section .avatar-grid img.selected {
  border: 3px solid #2E2E72;
  box-shadow: 0 4px 12px rgba(46, 46, 114, 0.3);
}
.avatar-container .avatar-section .btn-create {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 356px;
  height: 52px;
  align-items: center;
  background: rgb(0, 0, 80);
  border-radius: 31px;
  border: none;
  display: block;
  font-weight: bold;
  margin: 40px auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  padding: 11px;
  margin-top: 70px;
}
@media (max-width: 768px) {
  .avatar-container {
    border: none;
    width: 90%;
    max-width: 360px;
    height: 550px; /* ⬅️ Altura fija más grande */
    margin-top: 80px;
    background: white;
    border-radius: 40px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
  }
  .avatar-container .avatar-section {
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ⬅️ Separar contenido */
  }
  .avatar-container .avatar-section .title {
    font-size: 18px;
    margin-bottom: 30px;
    margin-top: 10px;
  }
  .avatar-container .avatar-section .avatar-grid {
    gap: 20px;
    margin-top: 0;
    margin-bottom: 0;
    flex-grow: 1; /* ⬅️ Ocupa espacio disponible */
    align-content: center;
  }
  .avatar-container .avatar-section .avatar-grid img {
    height: 90px; /* ⬅️ Tamaño medio */
    width: auto;
  }
  .avatar-container .avatar-section .btn-create {
    width: 100%;
    max-width: 280px;
    margin: 20px auto 0;
    font-size: 14px;
    height: 48px;
  }
}
.avatar-container .avatar-slider-wrapper {
  position: relative;
  overflow: hidden;
}
.avatar-container .avatar-slider-container {
  position: relative;
  width: 100%;
}
.avatar-container .avatar-slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
  cursor: grab;
}
.avatar-container .avatar-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
}
.avatar-container .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(46, 46, 114, 0.8);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 10;
  transition: background 0.3s ease, transform 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.avatar-container .slider-arrow:hover {
  background: rgb(46, 46, 114);
  transform: translateY(-50%) scale(1.1);
}
.avatar-container .slider-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.avatar-container .slider-arrow.disabled {
  background: rgba(200, 200, 200, 0.5);
  cursor: not-allowed;
  pointer-events: none;
}
.avatar-container .slider-arrow-left {
  left: -50px;
}
.avatar-container .slider-arrow-right {
  right: -50px;
}
.avatar-container .slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.avatar-container .slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  border: 2px solid transparent;
}
.avatar-container .slider-dot:hover {
  background: #bbb;
  transform: scale(1.2);
}
.avatar-container .slider-dot.active {
  background: #2E2E72;
  border-color: #2E2E72;
  transform: scale(1.3);
}
.avatar-container .avatar-slide img.selected,
.avatar-container .avatar.selected {
  border: 3px solid #2E2E72;
  box-shadow: 0 4px 12px rgba(46, 46, 114, 0.3);
  border-radius: 15px;
}
.avatar-container .avatar-slide img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.avatar-container .avatar-slider.grabbing {
  cursor: grabbing;
}
@media (max-width: 768px) {
  .avatar-container {
    /* Ocultar flechas en mobile (solo mostrar en escritorio) */
  }
  .avatar-container .slider-arrow-left {
    left: -15px;
  }
  .avatar-container .slider-arrow-right {
    right: -15px;
  }
  .avatar-container .slider-arrow {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  .avatar-container .avatar-slide img {
    height: 90px;
    width: auto;
  }
  .avatar-container .slider-arrow {
    display: none;
  }
}
/* Ensure avatars modal displays as overlay even when page lacks .profile-main */
#avatars-modal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(180, 179, 179, 0.84);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#avatars-modal.modal-overlay.active {
  display: flex;
}
#avatars-modal .avatar-container {
  /* keep existing avatar-container sizing but make sure it stacks */
  z-index: 10000;
}
.mail-sent {
  margin: 50px 13px;
}
.mail-sent .rider {
  width: 146px;
  height: 160px;
  display: flex;
  margin: auto;
  margin-bottom: 20px;
  /*margin-top: 250px;*/
}
.mail-sent .email-display {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 20px 16px;
  width: 100%;
  max-width: 354px;
  margin: 0 auto 46px auto;
}
.mail-sent .email-text {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  word-break: break-all;
}
@media (min-width: 768px) {
  .mail-sent {
    border: 2px solid #1a1a5c;
    border-radius: 50px;
    padding: 40px;
    max-width: 600px;
    margin: 200px auto;
  }
}
@media (max-width: 767px) {
  .mail-sent {
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;
    padding: 30px 20px;
    margin-bottom: 250px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
}
.profile-header {
  background-color: #e6e6ee;
  height: 137px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-header .container {
  max-width: 1440px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 25px;
}
.profile-header .back-button {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 45px;
}
.profile-header .back-button img {
  width: 100%;
  height: 100%;
}
.profile-header .header-title {
  color: #333373;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 29px;
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  .profile-header .header-title {
    font-size: 24px;
  }
}
.profile-main {
  display: flex;
  justify-content: center;
  /* ===== MODAL ===== */
  /* Dirección*/
  /*  Agregar direccion */
  /* METODOS DE PAGO */
  /* Agregar metodos de pago */
  /* Reviews */
  /*  ESTILOS DEL MODAL */
}
.profile-main .profile-card {
  position: relative;
  z-index: 1;
  margin-top: -46px;
  background-color: #ffffff;
  border-radius: 32px;
  box-shadow: 0 -10px 10px -5px rgba(5, 4, 104, 0.15);
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-height: 900px) and (max-width: 768px) {
  .profile-main .profile-card {
    max-height: 95vh;
    overflow-y: auto;
  }
}
.profile-main .profile-card .profile-picture-wrapper {
  position: relative;
  margin-top: 23px;
  width: 130px;
  height: 130px;
}
.profile-main .profile-card .profile-picture-wrapper .profile-avatar {
  position: relative;
  width: 130px;
  height: 130px;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
  border-radius: 50%;
  overflow: hidden;
}
.profile-main .profile-card .profile-picture-wrapper .profile-avatar .avatar {
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 130px;
  height: 130px;
}
.profile-main .profile-card .profile-picture-wrapper .edit-profile-button {
  position: absolute;
  right: -7px;
  bottom: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: #CECDEF;
  border-radius: 100%;
}
.profile-main .profile-card .profile-picture-wrapper .edit-profile-button .edit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}
.profile-main .profile-card .user-info {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-main .profile-card .user-info .username {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #333373;
  margin: 0;
}
.profile-main .profile-card .user-info .user-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile-main .profile-card .user-info .user-rating img {
  width: 25px;
  height: 25px;
}
.profile-main .profile-card .user-info .user-rating .rating-text {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  color: #333373;
}
.profile-main .profile-card .profile-menu {
  width: 345px;
  margin-top: 35px;
}
.profile-main .profile-card .profile-menu span {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #050468;
}
.profile-main .profile-card .profile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-main .profile-card .profile-menu li {
  border-bottom: 1px solid #ccccdc;
}
.profile-main .profile-card .profile-menu .b-extra {
  border-top: 1px solid #ccccdc;
}
.profile-main .profile-card .profile-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16.5px 10px;
  text-decoration: none;
  color: #050468;
  font-size: 16px;
  line-height: 21px;
}
.profile-main .profile-card .profile-menu a img {
  width: 32px;
  height: 32px;
}
.profile-main .profile-card .action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  margin-bottom: 43px;
  width: 100%;
  padding: 0 10px;
  position: static;
}
.profile-main .profile-card .action-buttons .btn {
  width: 100%;
  max-width: 356px;
  height: 58px;
  border-radius: 31px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-main .profile-card .action-buttons .btn-primary {
  background: linear-gradient(180deg, #3b42c4 0%, #1e248a 100%);
  color: #ffffff;
  border-radius: 50px;
  border: none;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-main .profile-card .action-buttons .btn-secondary {
  background-color: #f5f5f5;
  border: 1px solid #ff8179;
  color: #ff8179;
}
@media (min-width: 768px) {
  .profile-main .profile-card .profile-picture-wrapper {
    width: 186px;
    height: 186px;
  }
  .profile-main .profile-card .profile-picture-wrapper .profile-avatar {
    width: 100%;
    height: 100%;
  }
  .profile-main .profile-card .profile-picture-wrapper .profile-avatar .avatar {
    width: 185.58px;
    height: 185.58px;
  }
  .profile-main .profile-card .profile-picture-wrapper .edit-profile-button {
    width: 52px;
    height: 52px;
    right: -10px;
    bottom: 3px;
    position: absolute;
  }
  .profile-main .profile-card .profile-picture-wrapper .edit-profile-button .edit-icon {
    width: 29px;
    height: 29px;
  }
}
.profile-main .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(180, 179, 179, 0.84);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.profile-main .modal-overlay.active {
  display: flex;
}
.profile-main .personal-info-section .personal-info-card {
  position: relative;
  max-width: 800px;
  width: 100%;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  padding: 46px 150px 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.profile-main .personal-info-section .personal-info-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.profile-main .personal-info-section .personal-info-card .personal-info-title,
.profile-main .personal-info-section .personal-info-card .personal-info-form {
  position: relative;
  z-index: 1;
}
.profile-main .personal-info-section .personal-info-card .personal-info-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33.18px;
  text-align: center;
  margin: 0 0 16px 0;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  justify-content: normal; /* Se justifica  de esta manera para que no se desalineen, no cambiar */
  flex-grow: 1;
  width: 500px;
  height: 59px;
  position: relative;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group.dropdown-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group.dropdown-field .dropdown-icon {
  transition: transform 0.3s ease;
  width: 12px;
  height: auto;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group.dropdown-field:focus-within .dropdown-icon {
  transform: rotate(180deg);
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form input {
  border: none;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form input[type=text] {
  padding: 0;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .select-group {
  position: relative;
  width: 100%;
  height: 100%;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .select-group select {
  border: none;
  background: transparent;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
  width: 100%;
  height: 100%;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  cursor: pointer;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .name-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .lastname-group label {
  color: #000000;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 500px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .dob-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .alias-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .dob-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .alias-group {
  width: calc(60% - 10px);
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .gender-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .country-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .gender-group,
.profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .country-group {
  width: calc(40% - 10px);
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .dob-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .gender-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .address-group label,
.profile-main .personal-info-section .personal-info-card .personal-info-form .phone-group label {
  color: #000019;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .dob-group {
  width: 340px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .gender-group {
  width: 137px;
}
.profile-main .personal-info-section .personal-info-card .personal-info-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  margin-top: 6px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
}
@media (max-width: 768px) {
  .profile-main .personal-info-section {
    padding: 0;
  }
  .profile-main .personal-info-section .personal-info-card {
    border: none;
    padding: 0 20px;
    border-radius: 73px 73px 0 0;
    padding-top: 30px;
    position: absolute;
    bottom: 0;
    max-width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-title {
    width: 100%;
    text-align: center;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form {
    width: 100%;
    padding-bottom: 20px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-group {
    width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .dob-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .gender-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .alias-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-one .country-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .dob-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .gender-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .alias-group,
  .profile-main .personal-info-section .personal-info-card .personal-info-form .form-row-two .country-group {
    width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .select-group {
    width: 100%;
  }
  .profile-main .personal-info-section .personal-info-card .personal-info-form .submit-button {
    width: 100%;
  }
}
.profile-main .addresses-section {
  position: relative;
  max-width: 800px;
  width: 100%;
  background-color: #fff;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-main .addresses-section .addresses-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  height: 600px;
  padding: 46px 150px 57px;
}
.profile-main .addresses-section .addresses-content .addresses-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33px;
  text-align: center;
  margin: 0;
  margin-bottom: 28px;
}
.profile-main .addresses-section .addresses-content .address-list {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
}
.profile-main .addresses-section .addresses-content .address-list .address-scroll {
  display: contents;
}
.profile-main .addresses-section .addresses-content .address-list .address-card {
  background-color: #e6e6ee;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  width: 500px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.profile-main .addresses-section .addresses-content .address-list .address-card:hover {
  background-color: #d1d1e4;
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 50, 0.15);
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 50px;
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-info .address-name {
  color: #000050;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  margin: 0;
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-info .address-details {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  width: 177px;
}
.profile-main .addresses-section .addresses-content .address-list .address-card .address-icon {
  width: 12px;
  height: 6px;
  flex-shrink: 0;
}
.profile-main .addresses-section .addresses-content .add-address-btn {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  width: 355px;
  max-width: 100%;
  height: 58px;
  bottom: 30px;
  position: absolute;
  margin: 0 0 40px 0;
}
@media (max-width: 768px) {
  .profile-main .addresses-section {
    border: none;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
  }
  .profile-main .addresses-section .addresses-content {
    width: 367px;
    padding: 47px 0;
  }
  .profile-main .addresses-section .addresses-content .addresses-title {
    width: 357px;
    text-align: left;
  }
  .profile-main .addresses-section .addresses-content .address-list .address-card {
    width: 354px;
    height: 98px;
  }
  .profile-main .addresses-section .addresses-content .address-list .address-card .address-info {
    padding-left: 0;
  }
}
.profile-main .add-address-section .add-address-card {
  position: relative;
  max-width: 800px;
  width: 100%;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  padding: 46px 150px 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.profile-main .add-address-section .add-address-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.profile-main .add-address-section .add-address-card .add-address-title,
.profile-main .add-address-section .add-address-card .add-address-form {
  position: relative;
  z-index: 1;
}
.profile-main .add-address-section .add-address-card .add-address-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33.18px;
  text-align: center;
  margin: 20px 0 15px 0;
}
.profile-main .add-address-section .add-address-card .add-address-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  /* Estilos específicos para select en form-row */
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 500px;
  height: 59px;
  box-sizing: border-box;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group select.value {
  width: 100%;
  border: none;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 18.75px;
  color: #000019;
  cursor: pointer;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
}
.profile-main .add-address-section .add-address-card .add-address-form input {
  border: none;
}
.profile-main .add-address-section .add-address-card .add-address-form input[type=text] {
  padding: 0;
}
.profile-main .add-address-section .add-address-card .add-address-form .name-group label,
.profile-main .add-address-section .add-address-card .add-address-form .lastname-group label {
  color: #000000;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row {
  display: flex;
  gap: 20px;
  width: 500px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 9px 12px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field .input-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field .dropdown-icon {
  transition: transform 0.3s ease;
  width: 12px;
  height: auto;
  margin-left: 8px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group.dropdown-field:focus-within .dropdown-icon {
  transform: rotate(180deg);
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row-num {
  width: 500px;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group div[style*="position: relative"] {
  width: 100%;
}
.profile-main .add-address-section .add-address-card .add-address-form .form-row .form-group select {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group {
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group .select-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group select.value {
  width: 100%;
  border: none;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  padding-right: 24px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 18.75px;
  color: #000019;
  cursor: pointer;
}
.profile-main .add-address-section .add-address-card .add-address-form .doc-type-group .address-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-200%);
  width: 10px;
  pointer-events: none;
}
.profile-main .add-address-section .add-address-card .add-address-form .dob-group label,
.profile-main .add-address-section .add-address-card .add-address-form .gender-group label,
.profile-main .add-address-section .add-address-card .add-address-form .address-group label,
.profile-main .add-address-section .add-address-card .add-address-form .phone-group label {
  color: #000019;
}
.profile-main .add-address-section .add-address-card .add-address-form .dob-group {
  width: 240px;
}
.profile-main .add-address-section .add-address-card .add-address-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  margin-top: 36px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
  margin: 0 0 40px 0;
}
@media (max-width: 768px) {
  .profile-main .add-address-section {
    padding: 0;
  }
  .profile-main .add-address-section .add-address-card {
    border: none;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
    padding: 0 46px 0;
  }
  .profile-main .add-address-section .add-address-card .add-address-title {
    width: 354px;
    text-align: center;
  }
  .profile-main .add-address-section .add-address-card .add-address-form {
    width: 354px;
    padding-bottom: 20px;
    align-content: end;
    display: grid;
  }
  .profile-main .add-address-section .add-address-card .add-address-form .form-group {
    width: 354px;
  }
  .profile-main .add-address-section .add-address-card .add-address-form .form-row {
    display: contents;
  }
  .profile-main .add-address-section .add-address-card .add-address-form .form-row-num {
    width: 206px;
    padding-right: 0;
  }
}
.profile-main .payment-methods-section {
  position: relative;
  max-width: 800px;
  width: 100%;
  background-color: #fff;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-main .payment-methods-section .payment-methods-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 800px;
  height: 600px;
  padding: 46px 150px 57px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 33px;
  text-align: center;
  margin: 0;
  margin-bottom: 28px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-bottom: 110px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 15px;
  margin-right: -15px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card {
  background-color: transparent;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  border: 1px solid #0806ae;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
  height: 75px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card:hover {
  background-color: #f8f8ff;
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(8, 6, 174, 0.2);
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info .payment-name {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 19px;
  margin: 0;
  align-items: center;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info .payment-details {
  color: #000019;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  width: 177px;
}
.profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-icon {
  width: 12px;
  height: 6px;
  flex-shrink: 0;
}
.profile-main .payment-methods-section .payment-methods-content .add-payment-btn {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  width: 355px;
  max-width: 100%;
  height: 58px;
  bottom: 30px;
  position: absolute;
  margin: 40px;
}
@media (max-width: 768px) {
  .profile-main .payment-methods-section {
    border: none;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
    padding-top: 50px;
  }
  .profile-main .payment-methods-section .payment-methods-content {
    width: 367px;
    padding: 5px;
  }
  .profile-main .payment-methods-section .payment-methods-content .payment-methods-title {
    width: 357px;
    text-align: left;
  }
  .profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card {
    width: 354px;
    height: 59px;
  }
  .profile-main .payment-methods-section .payment-methods-content .payment-methods-list .payment-methods-card .payment-info {
    padding-left: 0;
  }
}
.profile-main .add-payment-methods-card {
  position: relative;
  width: 600px;
  border: 2px solid #000050;
  border-radius: 100px;
  overflow: hidden;
  padding: 27px 120px 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}
.profile-main .add-payment-methods-card .card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.profile-main .add-payment-methods-card .add-payment-methods-title,
.profile-main .add-payment-methods-card .add-payment-methods-form {
  position: relative;
  z-index: 1;
}
.profile-main .add-payment-methods-card .add-payment-methods-title {
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 33.18px;
  width: 354px;
  margin: 0 0 14px 0;
}
.profile-main .add-payment-methods-card .add-payment-methods-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 354px;
  height: 59px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form input {
  border: none;
}
.profile-main .add-payment-methods-card .add-payment-methods-form input[type=text] {
  padding: 0;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group:has(input[name=card_number]) {
  height: 75px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-group:has(input[name=card_expiracion]) {
  position: relative;
}
.profile-main .add-payment-methods-card .add-payment-methods-form #expiry-calendar-icon {
  transition: opacity 0.2s ease;
}
.profile-main .add-payment-methods-card .add-payment-methods-form #expiry-calendar-icon:hover {
  opacity: 0.7;
}
.profile-main .add-payment-methods-card .add-payment-methods-form #expiry-calendar-icon:active {
  opacity: 0.5;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-row .form-group {
  flex: 1;
  width: auto;
  min-width: 0;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .form-row-num {
  width: 250px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .dob-group label {
  color: #000019;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .dob-group {
  width: 240px;
}
.profile-main .add-payment-methods-card .add-payment-methods-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  margin: 30px 0 45px 0;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
}
@media (max-width: 768px) {
  .profile-main .add-payment-methods-card {
    border: none;
    width: 100%;
    border-radius: 73px 73px 0 0;
    bottom: 0;
    position: absolute;
    padding: 30px 0 0 0;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-title {
    width: 354px;
    text-align: justify;
    font-weight: 700;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-form {
    width: 354px;
    padding-bottom: 20px;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-form .form-group {
    width: 354px;
  }
  .profile-main .add-payment-methods-card .add-payment-methods-form .form-row-num {
    width: 206px;
    padding-right: 0;
  }
}
.profile-main .modal-overlay-reviews {
  position: fixed;
  inset: 0;
  background-color: rgb(230, 230, 238);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.profile-main .modal-overlay-reviews.active {
  display: flex;
}
.profile-main .reviews-page {
  width: 100%;
  height: 100%;
  justify-content: center;
}
.profile-main .reviews-page .main-container {
  width: 100%;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}
.profile-main .reviews-page .page-header {
  padding: 34px 25px 0 25px;
  position: relative;
  z-index: 10;
}
.profile-main .reviews-page .header-content {
  display: flex;
  align-items: center;
  position: relative;
}
.profile-main .reviews-page .back-arrow {
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.profile-main .reviews-page .page-title {
  font-family: "Inter", sans-serif;
  flex-grow: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
  color: rgb(5, 4, 104);
  margin: 0;
  margin-right: 56px;
}
.profile-main .reviews-page .content-card {
  background-color: #ffffff;
  border-radius: 32px 32px 0 0;
  margin-top: 12px;
  min-height: 823px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0px 8px 51px 0px rgba(5, 4, 104, 0.15);
}
.profile-main .reviews-page .profile-column {
  width: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  align-content: center;
  display: block;
}
.profile-main .reviews-page .avatar-container {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
  border-radius: 100%;
}
.profile-main .reviews-page .avatar-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.profile-main .reviews-page .avatar-face-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.profile-main .reviews-page .face-part {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
}
.profile-main .reviews-page .rating-badge {
  position: absolute;
  bottom: 0px;
  right: -27px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.profile-main .reviews-page .badge-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.profile-main .reviews-page .badge-text {
  position: relative;
  z-index: 2;
  font-weight: 700;
  font-size: 22px;
  margin-right: 2px;
  background: rgb(230, 230, 247);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: #333373;
  padding: 8px;
}
.profile-main .reviews-page .badge-star {
  position: absolute;
  top: -9px;
  right: -5px;
  width: 25px;
  height: 25px;
  display: flex;
  z-index: 9999;
}
.profile-main .reviews-page .username {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgb(51, 51, 115);
  margin: 10px 0 5px 0;
  text-align: center;
}
.profile-main .reviews-page .user-role {
  font-size: 16px;
  color: #000019;
  margin: 0 0 40px 0;
  font-family: "Rubik", sans-serif;
  text-align: center;
}
.profile-main .reviews-page .user-stats {
  display: flex;
  justify-content: center;
  gap: 21px;
  margin: 34px;
  text-align: center;
}
.profile-main .reviews-page .user-stats .line {
  border-right: 1px solid #CCCCDC;
  padding-right: 10px;
}
.profile-main .reviews-page .user-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-main .reviews-page .user-stats .stat-item .stat-number {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.profile-main .reviews-page .user-stats .stat-item .stat-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  font-family: "Rubik", sans-serif;
}
.profile-main .reviews-page .rating-metrics {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  align-items: center;
}
.profile-main .reviews-page .metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.profile-main .reviews-page .stars-row {
  display: flex;
  gap: 8px;
}
.profile-main .reviews-page .stars-row svg {
  width: auto;
  height: 35px;
}
.profile-main .reviews-page .metric-label {
  font-size: 18px;
  color: #333373;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
}
.profile-main .reviews-page .reviews-column {
  flex-grow: 1;
  padding: 40px 9.8%;
  display: flex;
  flex-direction: column;
}
.profile-main .reviews-page .reviews-title {
  font-size: 14px;
  color: rgb(51, 51, 115);
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 30px;
  font-family: "Rubik", sans-serif;
}
.profile-main .reviews-page .reviews-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.profile-main .reviews-page .no-reviews-banner {
  background: #f8f9fa;
  border: 1px dashed #ccc;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  color: #666;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.profile-main .reviews-page .no-reviews-banner img {
  width: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}
.profile-main .reviews-page .no-reviews-banner .banner-title {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  margin: 0;
  color: #666;
}
.profile-main .reviews-page .no-reviews-banner .banner-subtitle {
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 0;
  color: #888;
}
.profile-main .reviews-page .review-card {
  display: flex;
  align-items: flex-start;
}
.profile-main .reviews-page .review-icon-wrapper {
  width: 30px;
  flex-shrink: 0;
}
.profile-main .reviews-page .review-icon-merged {
  position: relative;
  width: 19px;
  height: 19px;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
  border-radius: 100%;
}
.profile-main .reviews-page .icon-bg {
  width: 100%;
  height: 100%;
}
.profile-main .reviews-page .review-content-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-main .reviews-page .container-text {
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px 16px;
  width: auto;
}
.profile-main .reviews-page .review-rating {
  display: flex;
  gap: 4px;
}
.profile-main .reviews-page .review-rating svg {
  width: auto;
  height: 15px; /* Size for review cards */
}
.profile-main .reviews-page .review-text {
  font-size: 12px;
  color: #000000;
  line-height: 1.4;
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
}
.profile-main .reviews-page .review-meta {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #000000;
  opacity: 0.6;
  margin: 0;
  margin-top: 4px;
}
.profile-main .reviews-page .load-more-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  width: auto;
}
.profile-main .reviews-page .load-more-link {
  font-size: 13px;
  color: rgb(51, 51, 115);
  font-weight: 400;
  text-decoration: underline;
  font-family: "Rubik", sans-serif;
}
@media (min-width: 768px) {
  .profile-main .reviews-page .main-container {
    overflow: hidden;
  }
  .profile-main .reviews-page .page-header .back-arrow {
    width: 56px;
    height: 45px;
  }
  .profile-main .reviews-page .page-header .page-title {
    font-size: 24px;
  }
  .profile-main .reviews-page .content-card {
    height: auto;
    flex-direction: row;
  }
  .profile-main .reviews-page .content-card .profile-column {
    width: auto;
    max-width: 420px;
    padding: 0 6%;
    border-right: 2px solid #e0e0e0;
  }
  .profile-main .reviews-page .content-card .profile-column .avatar-container {
    width: 174.55px;
    height: 174.55px;
  }
  .profile-main .reviews-page .content-card .profile-column .rating-badge {
    right: -18px;
  }
  .profile-main .reviews-page .content-card .profile-column .face-part {
    width: 174.55px;
    height: 174.55px;
  }
  .profile-main .reviews-page .content-card .profile-column .badge-star {
    top: -13px;
    right: -5px;
  }
  .profile-main .reviews-page .content-card .profile-column .user-stats {
    display: none;
  }
  .profile-main .reviews-page .content-card .profile-column .rating-metrics .stars-row svg {
    width: auto;
    height: 40px; /* Slightly larger on desktop? or keep 35? User said 35 */
  }
  .profile-main .reviews-page .reviews-column {
    padding: 40px 9%;
  }
  .profile-main .reviews-page .reviews-column .reviews-title {
    font-size: 20px;
  }
  .profile-main .reviews-page .reviews-column .review-text {
    font-size: 16px;
  }
  .profile-main .reviews-page .reviews-column .container-text {
    width: auto;
    max-width: 625px;
  }
  .profile-main .reviews-page .reviews-column .load-more-container {
    width: auto;
    max-width: 651px;
  }
}
.profile-main #dui-modal-wrapper {
  z-index: 10000;
  /* ESTILO MÓVIL  */
  align-items: flex-end !important;
  padding: 0 !important;
  /* Botón cerrar en Móvil */
  /*ADAPTACIÓN PARA DESKTOP */
}
.profile-main #dui-modal-wrapper .dui-modal-card {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 100%;
  height: 85vh;
  border-radius: 73px 73px 0 0;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.profile-main #dui-modal-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.profile-main #dui-modal-wrapper #close-dui-modal {
  position: absolute;
  top: 25px;
  right: 30px;
  z-index: 100;
  /* Apariencia */
  background: rgba(0, 0, 0, 0.05); /* Color base */
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  /* Texto/Icono */
  font-weight: bold;
  color: #000050;
  font-size: 18px;
  /* Alineación */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Interacción (Hover) */
  transition: background-color 0.2s ease;
}
.profile-main #dui-modal-wrapper #close-dui-modal:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .profile-main #dui-modal-wrapper {
    align-items: center !important;
    padding: 20px !important;
    justify-content: center;
  }
  .profile-main #dui-modal-wrapper .dui-modal-card {
    max-width: 800px;
    max-height: 700px;
    width: 100%;
    height: 100%;
    border-radius: 90px;
    border: 2px solid #000050;
    margin: auto;
  }
  .profile-main #dui-modal-wrapper #close-dui-modal {
    top: 35px !important;
    right: 50px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    width: 36px;
    height: 36px;
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background-color: #f0f2f5;
}
.product-categories {
  padding: 20px 0;
}
.categories-container {
  position: relative;
  /*max-width: 375px;*/
  width: 60%;
  margin: 0 auto;
  box-sizing: border-box;
}
.bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 711px;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-radius: 40px 40px 40px 40px; /* Ovalado arriba, recto abajo */
  padding: 40px 20px 40px 20px;
  box-sizing: border-box;
  margin-top: 100px;
}
.title {
  font-family: "Rubik", sans-serif;
  font-weight: 700 !important;
  font-size: 30px !important;
  color: #333373;
  text-align: center;
  margin: 0 0 40px 0;
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 100%;
  max-width: 340px;
}
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.category-image {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Hace las imágenes completamente redondas */
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 12px;
}
.category-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #0806ae;
  margin: 0;
}
/* Elimina cualquier borde no deseado */
* {
  box-sizing: border-box;
}
img {
  display: block;
  border: none;
  outline: none;
}
/* Desktop: 3 columnas */
@media (min-width: 769px) {
  .categories-container {
    max-width: 80%;
  }
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 600px;
  }
  .category-image {
    width: 160px;
    height: 160px;
  }
}
/* Mobile: ajustes responsivos */
@media (max-width: 768px) {
  .categories-container {
    margin-top: 80px;
    width: 100%;
  }
  .content-wrapper {
    padding: 40px 20px calc(100px + env(safe-area-inset-bottom)) 20px;
    border-radius: 40px 40px 0 0;
    min-height: 80vh;
  }
  .categories-grid {
    gap: 20px;
  }
  .category-image {
    width: 130px;
    height: 130px;
  }
}
/* User Profile Component Styles */
:root {
  --c-text-main: #333373;
}
.user-profile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  top: 12px;
  position: absolute;
  right: 0%;
}
.user-profile .svg-Triangle {
  width: 18px;
  height: 9px;
  aspect-ratio: 2/1;
  margin-top: 16px;
  z-index: 1;
}
.top-right-area {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.top-right-area::before {
  content: "";
  position: absolute;
  top: -135px;
  right: -124px;
  width: 340px;
  height: 340px;
  background: #FDFBCF;
  border-radius: 50%;
  z-index: 0;
  display: none;
}
@media (min-width: 768px) {
  .top-right-area::before {
    display: block;
  }
}
.user-profile__name {
  font-size: 16px;
  font-weight: 600;
  color: #333373;
  text-align: right;
  margin-top: 12px;
  line-height: 1.2;
  z-index: 1;
}
.user-profile__avatar-link {
  text-decoration: none;
  display: inline-block;
}
.user-profile__avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0px 12px 21px 0px rgba(5, 4, 104, 0.15);
  margin-left: 16px;
  overflow: hidden;
  z-index: 1;
  background-color: white;
}
.user-profile__avatar img {
  -o-object-fit: fill;
     object-fit: fill;
  width: 100%;
  height: 100%;
}
.register-viajero {
  overflow-y: auto;
  max-height: 100vh;
  /* Radio & Checkbox Styles */
  /* Ocultamos el checkbox real */
  /* Círculo */
  /* Estado activo */
  /* Puntito interior */
  /*   .radio-option,
    .checkbox-option {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .radio-option span,
    .checkbox-option span {
      font-size: 14px;
      color: #000019;
    } */
  /* .radio-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #333373;
    background-color: #ffffff;
    flex-shrink: 0;
  } */
  /*  .checkbox-box.checked {
     background-color: #333373;
     border-color: #333373;
   }

   .checkbox-box.checked img {
     width: 10px;
     height: auto;
   } */
  /* Input Styles */
  /* Textarea */
  /* Chips */
  /* Button */
}
.register-viajero #section-header {
  width: 100%;
  /* max-width: 1440px; */
  display: flex;
  justify-content: center;
}
.register-viajero .header-container {
  width: 100%;
  /*  height: 137px; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 0 10px;
}
.register-viajero .header-content {
  position: relative;
  width: 100%;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
.register-viajero .back-arrow {
  position: absolute;
  left: 25px;
  width: 56px;
  height: 45px;
}
.register-viajero .page-title {
  font-size: 30px; /* Estimated from design */
  font-weight: 700;
  font-family: "Rubik", sans-serif;
  color: #333373;
  margin: 0;
  text-align: center;
}
@media (max-width: 768px) {
  .register-viajero .header-container {
    height: 80px;
  }
  .register-viajero .back-arrow {
    width: 30px;
    height: auto;
    left: 15px;
  }
  .register-viajero .page-title {
    font-size: 18px;
    padding-left: 40px; /* Space for arrow */
  }
}
.register-viajero #section-main-content {
  width: 100%;
  /*  max-width: 1440px; */
  display: flex;
  justify-content: center;
  padding-bottom: 56px;
}
.register-viajero .form-card {
  background-color: #ffffff;
  width: 100%;
  max-width: 659px;
  border-radius: 40px 40px 0 0; /* Visual approximation */
  padding: 52px 30px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}
.register-viajero .input-group-register {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.register-viajero .question-label {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  line-height: 1.3;
  font-family: "Rubik", sans-serif;
}
.register-viajero .radio-group,
.register-viajero .radio-group-vertical,
.register-viajero .checkbox-group-vertical {
  display: flex;
  gap: 119px;
  width: 59.1%;
  align-self: center;
}
.register-viajero .checkbox-group-vertical {
  align-self: center;
}
.register-viajero .radio-group-vertical,
.register-viajero .checkbox-group-vertical {
  flex-direction: column;
  gap: 12px;
}
.register-viajero .group-row {
  display: flex;
  gap: 53px;
}
.register-viajero .checkbox-circle {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  font-size: 16px;
}
.register-viajero .checkbox-circle input {
  display: none;
}
.register-viajero .checkbox-circle .checkmark {
  width: 15px;
  height: 15px;
  border: 1px solid #050468;
  border-radius: 50%;
  /* position: relative; */
}
.register-viajero .checkbox-circle input:checked + .checkmark {
  background-color: #050468;
}
.register-viajero .checkbox-circle input:checked + .checkmark::after {
  content: "";
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.register-viajero .checkbox-option input {
  width: 15px;
  height: 15px;
}
.register-viajero .checkbox-box {
  width: 15px;
  height: 15px;
  border: 1px solid #333373;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.register-viajero .text-input-container,
.register-viajero .select-input-container {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  padding: 8px 16px;
  height: 59px;
  display: flex;
  align-items: center;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  position: relative;
  width: 59.1%;
  align-self: center;
}
.register-viajero .input-content,
.register-viajero .select-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.register-viajero .input-label-small,
.register-viajero .select-label-small {
  font-size: 12px;
  color: #000000;
  margin-bottom: 2px;
  font-family: "Inter", sans-serif;
}
.register-viajero .input-value,
.register-viajero value {
  font-size: 16px;
  color: #050468;
  border: none;
  font-family: "Rubik", sans-serif;
}
.register-viajero textarea {
  width: 100%;
  height: 80px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #ffffff;
  position: relative;
  width: calc(100% + 37px);
}
.register-viajero .resize-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
}
.register-viajero .chips-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.register-viajero .chip {
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  color: #000000;
}
.register-viajero .dropdown-arrow {
  width: 12px;
  height: 6px;
  margin-left: 10px;
}
.register-viajero .submit-button {
  height: 58px;
  border-radius: 31px;
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.35);
  margin-top: 20px;
  width: 100%;
  max-width: 355px;
  align-self: center;
}
@media (max-width: 768px) {
  .register-viajero .form-card {
    padding: 20px;
  }
  .register-viajero .text-input-container,
  .register-viajero .select-input-container {
    height: auto;
    min-height: 59px;
  }
}
.type-of-service-section {
  display: block;
  background-color: #E6E6EE;
  /*   .top-right-area {
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none;
      z-index: 0;
    }
    .top-right-area::before {
      content: "";
      position: absolute;
      top: -125px;      
      right: -145px;
      width: 389px;
      height: 389px;
      background: #FDFBCF; 
      border-radius: 50%;
      z-index: 0;      
      display: none;   
    } */
  /*  .user-profile {
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 1;
    position: relative;
  }

  .user-name {
    font-size: 16.35px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: right;
    line-height: 1.2;
    margin-right: 6px;
  }

  .user-avatar {
    width: 60px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0px 12px 21px rgba(5, 4, 104, 0.15));
  } */
}
.type-of-service-section .main-content {
  flex-grow: 1;
  padding: 40px 0 0px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.type-of-service-section .user-profile {
  top: 42px;
  right: 19px;
}
.type-of-service-section .top-right-area::before {
  top: -144px;
  right: -105px;
}
.type-of-service-section .back-header {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  width: auto;
  justify-content: flex-start;
}
.type-of-service-section .back-header p {
  margin: auto;
}
.type-of-service-section .back-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0806ae;
  font-weight: 600;
  margin-bottom: 15px;
  width: -moz-fit-content;
  width: fit-content;
}
.type-of-service-section .back-link span {
  display: none;
}
.type-of-service-section .container {
  background: white;
  padding: 6px 10px 51px;
  border-radius: 40px 40px 0 0;
  height: 90vh;
}
.type-of-service-section .content-header-items {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  width: 100%;
}
.type-of-service-section .content-header-items .stepper-container {
  display: flex !important;
  justify-content: start;
  margin-bottom: 40px;
  max-width: 800px;
}
.type-of-service-section .content-header-items .stepper-container .stepper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  justify-content: space-between;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  background-color: transparent;
  padding: 0;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000019;
  background-color: #e6e6ee;
  font-family: "Rubik", sans-serif;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-circle.completed {
  background: #4DBA8C;
  color: #050468;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-circle.active {
  background: #0806AE;
  color: #fff;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-circle.inactive {
  background: #E6E6EE;
  color: #050468;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step:has(.step-circle.active) .step-label {
  color: #000019;
  font-weight: 600;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step:has(.step-circle.completed) .step-label {
  color: #000019;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-label {
  font-size: 12px;
  color: #ccccdc;
  font-family: "Inter", sans-serif;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-line-desk,
.type-of-service-section .content-header-items .stepper-container .stepper .step-line {
  flex-grow: 1;
  height: 1px;
  background-color: #ccccdc;
  margin: 0 -31px;
  margin-bottom: 20px;
}
.type-of-service-section .content-header-items .stepper-container .stepper .step-line-desk {
  display: none;
}
.type-of-service-section .section-movil {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 80%;
  margin: auto;
  margin: 0 auto 36px;
}
.type-of-service-section .section-movil .rider-movil {
  width: 114px;
  height: 108px;
  margin-top: auto;
  justify-self: flex-end;
}
@media (min-width: 768px) {
  .type-of-service-section .section-movil {
    display: none;
  }
}
.type-of-service-section .types-section {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 37px;
}
.type-of-service-section .types-section .first-type,
.type-of-service-section .types-section .second-type {
  max-width: 360px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.type-of-service-section .types-section .first-type .rider,
.type-of-service-section .types-section .second-type .rider {
  width: 182px;
  margin: 0 auto 25px;
  display: none;
}
.type-of-service-section .types-section .first-type p,
.type-of-service-section .types-section .second-type p {
  font-size: 18px;
  color: #000019;
  text-align: center;
  padding: 0 3px;
  margin-bottom: 30px;
}
.type-of-service-section .types-section .second-type {
  order: 1;
  border-bottom: 2px solid #DADADA;
}
.type-of-service-section .types-section .first-type {
  order: 2;
}
.type-of-service-section .types-section .second-type-btn,
.type-of-service-section .types-section .first-type-btn {
  color: #0806AE;
  font-size: 16px;
  background-color: #f5f5f5;
  border: 1px solid #333373;
  border-radius: 31px;
  padding: 18px 20px;
  text-align: center;
  font-weight: 700;
  height: 58px;
  margin: 0 2px;
  font-family: "Inter", sans-serif;
}
.type-of-service-section .types-section .second-type-btn:hover,
.type-of-service-section .types-section .first-type-btn:hover {
  background-color: #eeeded;
}
.type-of-service-section .types-section .second-type {
  margin: auto;
}
.type-of-service-section .types-section .second-type .rider-second {
  width: 203px;
  margin: 0 auto 25px;
  display: none;
}
@media (min-width: 768px) {
  .type-of-service-section .types-section {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 43px;
    margin-top: 105px;
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
  .type-of-service-section .types-section .first-type {
    order: 1;
  }
  .type-of-service-section .types-section .first-type .rider {
    display: block;
  }
  .type-of-service-section .types-section .second-type {
    order: 2;
    border-bottom: none;
  }
  .type-of-service-section .types-section .second-type .rider-second {
    display: block;
  }
}
.type-of-service-section .section-footer {
  /* ocultar checkbox real */
  /* casilla */
  /* check */
  /* solo aparece el check */
}
.type-of-service-section .section-footer .custom-checkbox {
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #111;
  justify-content: center;
}
.type-of-service-section .section-footer .custom-checkbox input {
  display: none;
}
.type-of-service-section .section-footer .checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #0806AE;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type-of-service-section .section-footer .checkmark::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #0806AE;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  display: none;
}
.type-of-service-section .section-footer .custom-checkbox input:checked + .checkmark::after {
  display: block;
}
.type-of-service-section .section-footer .text {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #000019;
}
.type-of-service-section .section-footer a {
  display: none;
}
@media (min-width: 768px) {
  .type-of-service-section .section-footer a {
    display: flex;
  }
  .type-of-service-section {
    display: flex;
    min-height: 100vh;
    background-color: white;
  }
  .type-of-service-section .main-content {
    /*  height: 100vw; */
    padding: 30px 19px 53px 50px;
    /* .top-right-area::before{
      display: block;
    }
    .user-profile{
      display: flex;
    } */
  }
  .type-of-service-section .main-content .back-header {
    justify-content: space-between;
  }
  .type-of-service-section .main-content .back-header p {
    display: none;
  }
  .type-of-service-section .main-content .back-header span {
    display: block;
  }
  .type-of-service-section .main-content .back-link {
    margin-bottom: 30px;
  }
  .type-of-service-section .main-content .container {
    background-color: transparent;
    padding: 0;
    width: auto;
    height: 100%;
  }
  .type-of-service-section .main-content .container .content-header-items {
    width: 81%;
  }
  .type-of-service-section .main-content .container .content-header-items .step-line-desk {
    display: block;
  }
}
#singular-template {
  margin-bottom: 50px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - 530px);
}
@media (max-width: 992px) {
  #singular-template {
    min-height: calc(100vh - 700px);
  }
}
#singular-template section {
  padding: 2rem 2rem;
}
@media (max-width: 1200px) {
  #singular-template section {
    padding: 2rem 2rem;
  }
}
@media (max-width: 992px) {
  #singular-template section {
    padding: 2rem 1.5rem;
  }
}
#singular-template section_content {
  margin: 0 auto;
  max-width: 800px;
}
#post-not-found {
  padding: 100px 0;
  text-align: center;
}
body {
  margin: 0;
}
html {
  margin-top: 0 !important;
}
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #E6E6EE;
}
.login .circle {
  height: 757px;
  background-color: white;
  border-radius: 0 0 100% 100% !important;
  position: relative;
  z-index: 9999;
  width: 757px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 15px 40px rgba(138, 125, 255, 0.25);
  top: -67%;
}
.login .circle .container-circle {
  position: relative;
  bottom: -77%;
  display: flex;
  flex-direction: column;
}
.login .logo-container {
  width: 100%;
  margin-bottom: 40px;
  order: -1;
}
.login .logo {
  margin: auto;
  display: block;
}
.login .text-bienvenida {
  text-align: center;
  color: #050468;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  /* margin-top: 100px; */
}
.login .botton {
  /*   height: 70%; */
  position: absolute;
  width: 100%;
}
.login .container {
  position: absolute;
  /*bottom: 50px;*/
  bottom: 0px;
  width: 100%;
  height: auto;
}
.login h1 {
  display: none;
  font-family: "Inter", sans-serif;
  color: #000019;
  font-weight: bold;
}
.login .subtitle {
  text-align: center;
  color: #000019;
  font-family: "Inter", sans-serif;
}
.login .btns-options-login {
  display: flex;
  margin: auto;
  color: white;
  border-radius: 31px;
  height: 52px;
  width: 356px;
  border: none;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}
.login .btn-apple {
  background-color: #000019;
}
.login .btn-text {
  display: unset;
  margin: auto 10px;
  font-family: "Inter", sans-serif;
}
.login .btn-facebook {
  background-color: #0806AE;
}
.login .btn-google {
  background: #FFFFFF;
  color: #8e8d8d;
}
.login .btn-email {
  background: #333373;
  text-decoration: none;
}
.login .text-footer {
  text-align: center;
  color: #333373;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  margin: auto 20px 20px 20px;
}
.login strong {
  font-weight: 600;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .login {
    display: flex;
  }
  .login .circle {
    height: 1682px;
    width: 1682px;
    left: 16%;
    top: 50%;
    border-radius: 100% !important;
    transform: translate(-80%, -50%);
  }
  .login .container-circle {
    width: 412px;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  .login .text-bienvenida {
    width: 412px;
    font-size: 18px;
  }
  .login .container {
    position: relative;
    right: -50%;
    width: 356px;
    transform: translate(0%, 80%);
  }
  .login .container h1 {
    display: flex;
    font-size: 28px;
  }
  .login .subtitle {
    text-align: start;
  }
  .login .btn-text {
    font-size: 16px;
  }
  .login .botton {
    height: 100%;
  }
  .login .text-footer {
    display: none;
  }
}
@media (min-width: 1025px) {
  .login {
    display: flex;
  }
  .login .circle {
    height: 1682px;
    width: 1682px;
    left: 25%;
    top: 50%;
    border-radius: 100% !important;
    transform: translate(-80%, -50%);
  }
  .login .container-circle {
    width: 412px;
    top: 50.5%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  .login .logo-eride {
    width: 345px;
    height: 110.18px;
    margin: auto;
  }
  .login .text-bienvenida {
    width: 412px;
    font-size: 24px;
  }
  .login .container {
    position: relative;
    right: -60%;
    width: 442px;
    transform: translate(0%, 50%);
  }
  .login .container h1 {
    display: flex;
    font-family: "Inter", sans-serif;
    font-size: 38px;
    color: #000019;
    font-weight: bold;
  }
  .login .subtitle {
    text-align: start;
    width: 440px;
    font-size: 22px;
  }
  .login .btns-options-login {
    width: 442.95px;
    height: 64.7px;
  }
  .login .btns-options-login img {
    width: 24.88px;
    height: 24.88px;
  }
  .login .btn-text {
    font-size: 16px;
  }
  .login .botton {
    height: 100%;
  }
  .login .text-footer {
    display: none;
  }
}
@media (max-width: 768px) {
  .login .logo-eride {
    position: absolute;
    top: -40%;
    justify-self: anchor-center;
  }
  .login .text-bienvenida {
    margin-top: 30px;
  }
  .login .circle {
    top: -65%;
  }
}
body {
  margin: 0;
  background-color: white;
}
html {
  margin-top: 0;
}
.conteiner-bg strong {
  font-weight: 600;
}
.conteiner-bg .terminos-condiciones {
  height: 100%;
  top: 92px;
  position: relative;
  margin: auto 5px;
  /* Semicírculo */
  /* oculta el input */
  /*  ícono uno sobre otro */
  /* inicial:OFF */
  /* cuando se activa el checkbox */
}
.conteiner-bg .terminos-condiciones .card {
  display: none;
  position: relative;
  width: auto;
  height: 250px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.conteiner-bg .terminos-condiciones .card::before {
  content: "";
  position: absolute;
  top: -125px;
  right: -145px;
  width: 340px;
  height: 340px;
  background: #FDFBCF;
  border-radius: 100%;
  z-index: 0;
}
.conteiner-bg .terminos-condiciones .logo-dashboard {
  width: 100px;
  height: 31.94px;
  top: 30%;
  position: absolute;
  margin-left: 20px;
}
.conteiner-bg .terminos-condiciones .container {
  position: relative;
  z-index: 999999;
  top: -10%;
}
.conteiner-bg .terminos-condiciones .title {
  color: #333373;
  font-weight: bold;
  font-size: 22px;
  font-family: "Rubik", sans-serif;
  margin-top: -20px;
}
.conteiner-bg .terminos-condiciones .subtitle {
  font-size: 15.5px;
  font-family: "Inter", sans-serif;
  font-weight: normal;
}
.conteiner-bg .terminos-condiciones .text {
  font-size: 14px;
  font-family: "Inter", sans-serif;
  letter-spacing: -0.5px;
  font-weight: 300;
  color: #000000;
}
.conteiner-bg .terminos-condiciones .subtitle-terms {
  font-size: 15.5px;
  font-family: "Inter", sans-serif;
  font-weight: normal;
  width: auto;
  max-width: 360px;
  margin: 0;
  line-height: 1.2;
}
.conteiner-bg .terminos-condiciones .btn-terminos {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  padding: 16px 146.5px 16px 146.5px;
  width: 356px;
  height: 52px;
  align-items: center;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px 31px 31px 31px;
  border: none;
  display: block;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  cursor: pointer;
  margin: 0 0 80px -20px;
}
.conteiner-bg .terminos-condiciones .accept-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  margin-left: 20px;
}
.conteiner-bg .terminos-condiciones .accept {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 260px;
}
.conteiner-bg .terminos-condiciones .fa-toggle {
  position: relative;
  cursor: pointer;
  width: 51px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.conteiner-bg .terminos-condiciones .fa-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.conteiner-bg .terminos-condiciones .fa-toggle i {
  position: absolute;
  font-size: 44px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.conteiner-bg .terminos-condiciones .icon-off {
  color: #666;
  opacity: 1;
  transform: scale(1);
}
.conteiner-bg .terminos-condiciones .icon-on {
  color: #4DBA8C;
  opacity: 0;
  transform: scale(0.8);
}
.conteiner-bg .terminos-condiciones .fa-toggle input:checked ~ .icon-off {
  opacity: 0;
  transform: scale(0.8);
}
.conteiner-bg .terminos-condiciones .fa-toggle input:checked ~ .icon-on {
  opacity: 1;
  transform: scale(1);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .conteiner-bg {
    display: flex;
    justify-content: center;
    background-color: #E6E6EE;
    height: 1500px;
  }
  .conteiner-bg .terminos-condiciones {
    background-color: white;
    box-shadow: 0 15px 40px rgba(138, 125, 255, 0.25);
    top: 26px;
    width: auto;
    height: 90%;
    margin-top: 30px;
    margin-bottom: 0;
  }
  .conteiner-bg .terminos-condiciones .card {
    display: flex !important;
  }
  .conteiner-bg .terminos-condiciones .card .logo-dashboard {
    margin-left: 130px;
  }
  .conteiner-bg .terminos-condiciones .container {
    position: relative;
    top: -1%;
    margin: -100px 80px;
    padding-left: 5%;
    padding-right: 5%;
  }
  .conteiner-bg .terminos-condiciones .container .title {
    font-size: 32px;
  }
  .conteiner-bg .terminos-condiciones .container .subtitle {
    font-size: 19px;
  }
  .conteiner-bg .terminos-condiciones .container .text {
    font-size: 19px;
  }
  .conteiner-bg .terminos-condiciones .container .subtitle-terms {
    font-size: 17.57px;
    width: 317px;
  }
  .conteiner-bg .terminos-condiciones .container .accept-container {
    margin-top: 50px;
    display: -webkit-box;
  }
  .conteiner-bg .terminos-condiciones .container .btn-terminos {
    width: 390.96px;
    height: 57.11px;
    font-size: 17.57px;
    margin-left: 60px;
  }
}
@media (min-width: 1024px) {
  .conteiner-bg {
    display: flex;
    justify-content: center;
    background-color: #E6E6EE;
    height: 1530px;
  }
  .conteiner-bg .terminos-condiciones {
    background-color: white;
    box-shadow: 0 15px 40px rgba(138, 125, 255, 0.25);
    top: 26px;
    width: 1024px;
    height: 95%;
    margin-top: 30px;
    margin-bottom: 0;
  }
  .conteiner-bg .terminos-condiciones .card {
    display: flex !important;
  }
  .conteiner-bg .terminos-condiciones .card .logo-dashboard {
    margin-left: 80px;
  }
  .conteiner-bg .terminos-condiciones .container {
    position: relative;
    top: -1%;
    margin: -100px 80px;
  }
  .conteiner-bg .terminos-condiciones .container .title {
    font-size: 32px;
  }
  .conteiner-bg .terminos-condiciones .container .subtitle {
    font-size: 22px;
  }
  .conteiner-bg .terminos-condiciones .container .text {
    font-size: 22px;
  }
  .conteiner-bg .terminos-condiciones .container .subtitle-terms {
    font-size: 17.57px;
    width: 317px;
  }
  .conteiner-bg .terminos-condiciones .container .accept-container {
    margin-top: 50px;
    display: -webkit-box;
  }
  .conteiner-bg .terminos-condiciones .container .btn-terminos {
    width: 390.96px;
    height: 57.11px;
    font-size: 17.57px;
    margin-left: 60px;
  }
}
@media (max-width: 768px) {
  .conteiner-bg .accept-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
    margin-left: 5px;
  }
  .conteiner-bg .accept {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .conteiner-bg .btn-terminos {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
body {
  margin: 0;
}
html {
  margin-top: 0 !important;
}
.login-email {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.login-email .circle-bg {
  height: 757px;
  background-color: white;
  border-radius: 0 0 100% 100% !important;
  position: relative;
  z-index: 9999;
  width: 757px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 15px 40px rgba(138, 125, 255, 0.25);
  top: -67%;
}
.login-email .circle-bg .container-circle-bg {
  position: relative;
  bottom: -77%;
}
.login-email .circle-bg .logo-container-bg {
  width: 100%;
  margin-bottom: 40px;
}
.login-email .circle-bg .logo-bg {
  margin: auto;
  display: block;
}
.login-email .circle-bg .text-bienvenida {
  display: none;
  text-align: center;
}
.login-email .container-form {
  position: absolute;
  top: 30%;
  width: 100%;
}
.login-email .container-form .title-form {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  text-align: center;
  margin: 40px 50px;
  color: #000019;
}
.login-email .container-form .form-login {
  max-width: 356px;
  width: 100%;
  margin: 0 auto;
  display: block;
}
.login-email .container-form .container-input {
  border: 1px solid #0806AE;
  height: 59px;
  width: 356px;
  border-radius: 5px;
  margin: 20px auto;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1019607843);
}
.login-email .container-form .text-header-input {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #000019;
  padding-left: 12px;
  margin: 12px 0 0;
}
.login-email .container-form .input-content {
  border: none;
  color: #333373;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  padding-left: 12px;
  width: 320px;
  background-color: transparent;
}
.login-email .container-form input:focus {
  outline: none;
}
.login-email .container-form .toggle-password {
  position: absolute;
  cursor: pointer;
}
.login-email .container-form input[type=text] {
  padding: 0;
  padding-left: 12px;
}
.login-email .container-form .btn-register {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 356px;
  height: 52px;
  align-items: center;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px 31px 31px 31px;
  border: none;
  display: block;
  font-weight: bold;
  margin: auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
@media (min-width: 769px) {
  .login-email {
    display: flex;
    background-color: #E6E6EE;
  }
  .login-email .circle-bg {
    height: 1682px;
    width: 1682px;
    left: 25%;
    top: 50%;
    border-radius: 100% !important;
    transform: translate(-80%, -50%);
  }
  .login-email .container-circle-bg {
    width: 412px;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  .login-email .logo-bg {
    width: 345px;
    height: 110.18px;
  }
  .login-email .text-bienvenida {
    display: flex !important;
    justify-content: center;
    color: #050468;
    width: 412px;
    font-size: 24px;
    font-family: "Inter", sans-serif;
  }
  .login-email .container-form {
    left: 20%;
    transform: translate(0%, -20%);
  }
  .login-email .container-form .title-form {
    font-size: 26px;
  }
  .login-email .container-form .container-input {
    background-color: #FFFFFF;
  }
  .login-email .btn-register-movil {
    background-color: #F5F5F5 !important;
  }
}
.message-error-login {
  color: red;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  margin: 15px auto;
  width: 356px;
  text-align: center;
}
@media (min-width: 769px) {
  .message-error-login {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .login-email .circle-bg {
    top: -65%;
  }
}
@media (min-width: 1300px) {
  /* Large-screen specific layout adjustments removed for .form-login
     so the form remains centered like the title. */
}
.dashboard {
  /*   overflow-y: auto; */
  min-height: 100vh;
  position: relative;
  background-color: white;
  /* .user-profile {
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 999999;
    position: relative;
  }

  .user-name {
    font-size: 16.35px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: right;
    line-height: 1.2;
        margin-right: 6px;
  }

  .user-avatar {
    width: 60px;
    height: 60px;
    position: relative;
    filter: drop-shadow(0px 12px 21px rgba(5, 4, 104, 0.15));
  } */
  /* Semicírculo */
}
@media (max-width: 767px) {
  .dashboard .container {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: white;
  }
}
.dashboard .header-bg-shape {
  position: absolute;
  top: -159px;
  right: -161px;
  width: 389px;
  height: 389px;
  z-index: 0;
}
.dashboard .dashboard-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 25px;
  border-bottom: 1.5px solid var(--color-border);
  position: relative;
}
.dashboard .traveler-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  color: var(--color-accent);
}
.dashboard .user-profile {
  top: 52px;
}
.dashboard .header-mobile {
  position: relative;
  width: auto;
  height: 190px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.dashboard .header-mobile::before {
  content: "";
  position: absolute;
  top: -125px;
  right: -145px;
  width: 310px;
  height: 310px;
  background: #FDFBCF;
  border-radius: 50%;
  z-index: 0;
}
.dashboard .icono-area {
  position: absolute;
  /* top: 30%;
   right:13px;
   z-index: 1;*/
  top: 30%;
  right: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard .icono-area img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto 5px;
}
.dashboard .avatar-selected {
  border: 2px solid white;
  border-radius: 100%;
  background: white;
}
.dashboard .icon-air {
  left: -50px;
  width: 34.2px;
  height: 31.86px;
}
.dashboard .logo-dashboard {
  width: 138px;
  height: 44.07px;
  top: 30%;
  position: absolute;
  margin-left: 20px;
}
.dashboard .greeting {
  position: relative;
  height: 100%;
}
.dashboard .speech-bubble {
  display: inline-block;
  background-color: #2E2E6F;
  color: white;
  padding: 12px 24px;
  border-radius: 20px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  position: absolute;
  left: 50%;
  top: -30%;
  width: auto;
}
.dashboard .speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  height: 0;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #2E2E6F transparent;
  transform: translateX(-50%);
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #2E2E6F;
}
.dashboard .rider {
  position: relative;
  margin: auto;
  z-index: 99999;
  height: 192px;
  width: 196.6601867676px;
  left: 30%;
  bottom: -131px;
  transform: translate(-50%, -50%);
}
.dashboard .container-bottom {
  background-color: #E6E6EE;
  border-radius: 15% 15% 0 0;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 40px;
  padding-bottom: 20px;
}
.dashboard .container-bottom .btn-dtk {
  display: none;
  justify-content: center;
}
.dashboard .title {
  font-size: 27px;
  font-family: "Inter", sans-serif;
  color: #333373;
  font-weight: 700;
  text-align: center;
}
.dashboard .new {
  color: #2F2F30;
  font-family: "Inter", sans-serif;
  text-align: center;
  font-size: 14px;
}
.dashboard .btn-cotizar {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 239px;
  height: 58px;
  align-items: center;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px 31px 31px 31px;
  border: none;
  display: block;
  font-weight: bold;
  margin: auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  padding: 14px;
  margin-bottom: 19px;
  text-align: center;
}
.dashboard .faq {
  color: #0806AE;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  text-align: center;
}
.dashboard .container-menu {
  display: flex;
  height: 100px;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  position: fixed;
  background-color: white;
  border-radius: 32px 32px 0 0;
}
.dashboard .container-menu .container-icons {
  width: 344.236328125px;
  height: 61.9308319092px;
  display: flex;
  margin: auto;
  justify-content: space-between;
}
.dashboard .container-menu .container-icon {
  width: 39.8126792908px;
  height: 61.9308319092px;
}
.dashboard .container-menu .icon-menu {
  width: 31.85px;
  height: 31.85px;
  display: flex;
  margin: auto;
  margin-bottom: 6px;
}
.dashboard .container-menu p {
  font-size: 9.73px;
  font-family: "Inter", sans-serif;
  color: #000019;
}
@media (min-width: 768px) {
  .dashboard {
    /* max-width: 1440px; */
    min-height: 900px;
    margin: 0 auto;
    background-color: var(--color-bg-main);
    display: flex;
    position: relative;
  }
  .dashboard .container-dashboard {
    flex-grow: 1;
    padding: 71px 55px 60px 87px;
    position: relative;
    overflow: hidden;
  }
  .dashboard .container-dashboard .dashboard-header {
    padding-top: 40px;
  }
  .dashboard .dashboard-header {
    display: flex;
    position: relative;
  }
  .dashboard .dashboard-header::before {
    content: "";
    position: absolute;
    /*   top: -125px;
      right: -145px;
      width: 340px;
      height: 340px;
      background: #FDFBCF;
      border-radius: 100%;
      z-index: 0; */
  }
  .dashboard .header-mobile {
    display: none;
  }
  .dashboard .header-mobile::before {
    width: 389px;
    height: 389px;
  }
  .dashboard .icon-air {
    display: none;
  }
  .dashboard .icono-area {
    top: 8%;
    right: 40px;
    border: 2px solid white;
    border-radius: 100%;
    background: white;
    z-index: 3; /* sit above the yellow circle */
  }
  .dashboard .user-avatar {
    position: relative;
    z-index: 3; /* ensure header avatar sits above the yellow circle */
  }
  .dashboard .icono-area img {
    width: 60px;
    height: 60px;
  }
  .dashboard .container {
    position: absolute;
    margin: auto;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 300px;
    max-width: 900px;
  }
  .dashboard .container .greeting {
    margin: auto;
    position: relative;
    display: inline-block;
  }
  .dashboard .container .speech-bubble {
    top: -70px;
    width: -moz-max-content;
    width: max-content;
  }
  .dashboard .rider {
    position: relative;
    display: flex;
    width: 252px;
    height: 246.91px;
    margin: 0;
    transform: translate(-50%, -50%);
    top: 50%;
  }
  .dashboard .logo-dashboard {
    display: none;
  }
  .dashboard .container-bottom {
    background-color: transparent;
    width: auto;
    position: relative;
    margin: auto;
    height: auto;
    padding-top: 0;
  }
  .dashboard .container-bottom .title {
    margin-bottom: 30px;
  }
  .dashboard .container-bottom .btns-desktop {
    display: flex;
    gap: 80px;
    margin-bottom: 40px;
  }
  .dashboard .container-bottom .btn-desk {
    width: 208px;
    height: 50.9px;
  }
  .dashboard .container-bottom .btn-dtk {
    display: flex;
    width: 208px;
    height: 50.9px;
  }
  .dashboard .container-bottom .btn-movil {
    display: none;
  }
  .dashboard .container-bottom .new {
    display: none;
  }
  .dashboard .container-bottom .new2 {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1070px) {
  .dashboard .container-bottom .btns-desktop {
    display: contents;
  }
}
body {
  margin: 0;
}
.register {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.register .circle-register {
  height: 757px;
  background-color: white;
  border-radius: 0 0 100% 100% !important;
  position: relative;
  z-index: 9999;
  width: 757px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 15px 40px rgba(138, 125, 255, 0.25);
  top: -67%;
}
.register .circle-register .container-circle-register {
  position: relative;
  bottom: -77%;
}
.register .logo-container-register {
  width: 100%;
  margin-bottom: 40px;
}
.register .logo-register {
  margin: auto;
  display: block;
}
.register .title {
  display: none;
  text-align: center;
}
.register .container-form-register {
  position: absolute;
  top: 28%;
  width: 100%;
}
.register .container-form-register .title-form {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  text-align: center;
  margin-bottom: 50px;
  color: #000019;
}
.register .container-form-register .container-input {
  position: relative;
  border: 1px solid #0806AE;
  height: 59px;
  width: 356px;
  border-radius: 5px;
  margin: 20px auto;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1019607843);
}
.register .container-form-register .text-header-input {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #000019;
  padding-left: 12px;
  margin: 12px 0 0;
}
.register .container-form-register .input-content {
  border: none;
  color: #333373;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  padding: 0 2px 1px 12px !important;
  width: 320px;
}
.register .container-form-register input:focus {
  outline: none;
}
.register .container-form-register .toggle-password {
  position: absolute;
  right: 15px;
  bottom: 12px;
  cursor: pointer;
}
.register .container-form-register input[type=text] {
  padding: 0;
  padding-left: 12px;
}
.register .container-form-register .btn-register {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 356px;
  height: 52px;
  align-items: center;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px;
  border: none;
  display: block;
  font-weight: bold;
  margin: 30px auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
@media (min-width: 769px) {
  .register {
    display: flex;
    background-color: #E6E6EE;
  }
  .register .circle-register {
    height: 1682px;
    width: 1682px;
    left: 25%;
    top: 50%;
    border-radius: 100% !important;
    transform: translate(-80%, -50%);
  }
  .register .container-circle-register {
    width: 412px;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  .register .logo-register {
    width: 345px;
    height: 110.18px;
  }
  .register .title {
    display: flex !important;
    justify-content: center;
    color: #050468;
    width: 412px;
    font-size: 24px;
    font-family: "Inter", sans-serif;
  }
  .register .container-form-register {
    left: 65%;
    top: 50%;
    width: auto;
    transform: translate(-50%, -50%);
  }
  .register .container-form-register .title-form {
    font-size: 26px;
  }
  .register .container-form-register .container-input {
    background-color: #FFFFFF;
  }
}
.dashboard-offers {
  /*   overflow-y: scroll; */
  height: 800px;
  /* ----------------------------------- */
}
.dashboard-offers .header-bg-shape {
  position: absolute;
  top: -159px;
  right: -161px;
  width: 389px;
  height: 389px;
  z-index: 0;
}
.dashboard-offers .dashboard-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--color-border);
  position: relative;
}
.dashboard-offers .dashboard-header .top-right-area {
  top: -39px;
}
.dashboard-offers .traveler-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  color: var(--color-accent);
}
.dashboard-offers .header-mobile {
  position: relative;
  width: auto;
  height: 190px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.dashboard-offers .header-mobile .top-right-area::before {
  display: block;
  content: "";
  position: absolute;
  top: -125px;
  right: -145px;
  width: 310px;
  height: 310px;
  background: #FDFBCF;
  border-radius: 50%;
  z-index: 0;
}
.dashboard-offers .icono-area {
  position: absolute;
  top: 30%;
  right: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard-offers .icono-area img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto 5px;
}
.dashboard-offers .avatar-selected {
  border: 2px solid white;
  border-radius: 100%;
  background: white;
}
.dashboard-offers .icon-air {
  left: -50px;
  width: 34.2px;
  height: 31.86px;
}
.dashboard-offers .logo-dashboard {
  width: 138px;
  height: 44.07px;
  top: 30%;
  position: absolute;
  margin-left: 20px;
}
.dashboard-offers .greeting {
  display: none;
  position: relative;
  height: 100%;
}
.dashboard-offers .speech-bubble {
  display: inline-block;
  background-color: #2E2E6F;
  color: white;
  padding: 12px 24px;
  border-radius: 20px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  position: absolute;
  left: 50%;
  top: -30%;
  width: auto;
}
.dashboard-offers .speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  height: 0;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #2E2E6F transparent;
  transform: translateX(-50%);
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #2E2E6F;
}
.dashboard-offers .rider {
  position: relative;
  margin: auto;
  z-index: 99999;
  height: 192px;
  width: 196.6601867676px;
  left: 50%;
  bottom: -131px;
  transform: translate(-50%, -50%);
}
.dashboard-offers .container-bottom {
  background-color: #E6E6EE;
  border-radius: 15% 15% 0 0;
  position: absolute;
  width: 100%;
  height: 540px;
  bottom: -100px;
  padding-top: 40px;
}
.dashboard-offers .container-bottom .btn-dtk {
  display: none;
  justify-content: center;
}
.dashboard-offers .title {
  font-size: 27px;
  font-family: "Inter", sans-serif;
  color: #333373;
  font-weight: 700;
  text-align: center;
  display: none;
}
.dashboard-offers .btns-desktop {
  display: none;
}
.dashboard-offers .new {
  color: #2F2F30;
  font-family: "Inter", sans-serif;
  text-align: center;
  font-size: 14px;
  display: none;
}
.dashboard-offers .new2 {
  display: none;
}
.dashboard-offers .btn-cotizar {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  width: 239px;
  height: 58px;
  align-items: center;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px 31px 31px 31px;
  border: none;
  font-weight: bold;
  margin: auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  padding: 14px;
  margin-bottom: 19px;
  text-align: center;
  display: none;
}
.dashboard-offers .faq {
  color: #0806AE;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  justify-content: center;
  display: none;
}
.dashboard-offers .container-menu {
  display: flex;
  height: 100px;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  position: fixed;
  background-color: white;
  border-radius: 32px 32px 0 0;
}
.dashboard-offers .container-menu .container-icons {
  width: 344.236328125px;
  height: 61.9308319092px;
  display: flex;
  margin: auto;
  justify-content: space-between;
}
.dashboard-offers .container-menu .container-icon {
  width: 39.8126792908px;
  height: 61.9308319092px;
}
.dashboard-offers .container-menu .icon-menu {
  width: 31.85px;
  height: 31.85px;
  display: flex;
  margin: auto;
  margin-bottom: 6px;
}
.dashboard-offers .container-menu p {
  font-size: 9.73px;
  font-family: "Inter", sans-serif;
  color: #000019;
}
@media (min-width: 768px) {
  .dashboard-offers {
    /* max-width: 1440px; */
    min-height: 900px;
    margin: 0 auto;
    background-color: var(--color-bg-main);
    display: flex;
    position: relative;
  }
  .dashboard-offers .container-dashboard {
    flex-grow: 1;
    padding: 30px 19px 53px 50px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    /*  overflow: hidden; */
    /*   .header-mobile::before{
        width: 389px;
        height: 389px;
      } */
  }
  .dashboard-offers .container-dashboard .dashboard-header {
    display: flex;
  }
  .dashboard-offers .container-dashboard .header-mobile {
    display: none;
  }
  .dashboard-offers .container-dashboard .icon-air {
    display: none;
  }
  .dashboard-offers .container-dashboard .icono-area {
    top: 8%;
    right: 40px;
    border: 2px solid white;
    border-radius: 100%;
    background: white;
  }
  .dashboard-offers .container-dashboard .icono-area img {
    width: 60px;
    height: 60px;
  }
  .dashboard-offers .container-dashboard .container {
    position: absolute;
    margin: auto;
    display: flex;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 300px;
    max-width: 900px;
  }
  .dashboard-offers .container-dashboard .container .greeting {
    margin: auto;
    position: relative;
    display: inline-block;
  }
  .dashboard-offers .container-dashboard .container .speech-bubble {
    top: -70px;
    width: -moz-max-content;
    width: max-content;
  }
  .dashboard-offers .container-dashboard .rider {
    position: relative;
    display: flex;
    width: 252px;
    height: 246.91px;
    margin: 0;
    transform: translate(-50%, -50%);
    top: 50%;
  }
  .dashboard-offers .container-dashboard .logo-dashboard {
    display: none;
  }
  .dashboard-offers .container-dashboard .container-bottom {
    background-color: transparent;
    width: auto;
    position: relative;
    margin: auto;
    height: auto;
    padding-top: 0;
    bottom: 0;
  }
  .dashboard-offers .container-dashboard .container-bottom .title {
    margin-bottom: 30px;
    text-align: start;
    display: flex;
  }
  .dashboard-offers .container-dashboard .container-bottom .btns-desktop {
    display: flex;
    gap: 80px;
    margin-bottom: 40px;
  }
  .dashboard-offers .container-dashboard .container-bottom .btn-desk {
    width: 208px;
    height: 50.9px;
    display: flex;
    justify-content: center;
  }
  .dashboard-offers .container-dashboard .container-bottom .btn-dtk {
    display: flex;
    width: 208px;
    height: 50.9px;
  }
  .dashboard-offers .container-dashboard .container-bottom .btn-movil {
    display: none;
  }
  .dashboard-offers .container-dashboard .container-bottom .new {
    display: none;
  }
  .dashboard-offers .container-dashboard .container-bottom .faq {
    display: flex;
  }
  .dashboard-offers .container-dashboard .container-bottom .new2 {
    display: none;
  }
  .dashboard-offers .container-dashboard .main-content {
    height: auto;
    bottom: -500px;
  }
  .dashboard-offers .container-dashboard .main-content .greeting_ {
    display: none;
  }
  .dashboard-offers .container-dashboard .main-content .subtitle {
    display: none;
  }
  .dashboard-offers .container-dashboard .main-content .cta-section {
    display: none;
  }
  .dashboard-offers .container-dashboard .main-content .offers-list {
    display: ruby;
    bottom: 90px;
  }
  .dashboard-offers .container-dashboard .main-content .offer-card {
    width: 327.23px;
    height: 147.48px;
    padding: 13px 20px;
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .dashboard-offers .container-dashboard .main-content .info-label {
    font-size: 12.9px;
  }
  .dashboard-offers .container-dashboard .main-content .info-value-green {
    font-size: 14.75px;
  }
  .dashboard-offers .container-dashboard .main-content .info-value-dark {
    font-size: 14.75px;
  }
  .dashboard-offers .container-dashboard .main-content .provider-label {
    font-size: 12.9px;
  }
  .dashboard-offers .container-dashboard .main-content .provider-avatar {
    width: 32.26px;
    height: 32.26px;
  }
  .dashboard-offers .container-dashboard .main-content .title-offer {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
}
@media (min-width: 768px) and (max-width: 1070px) {
  .dashboard-offers .container-bottom .btns-desktop {
    display: contents;
  }
}
.dashboard-offers .page-container {
  max-width: 375px;
  margin: 0 auto;
  background-color: var(--background-white);
  position: relative;
  overflow-x: hidden;
}
.dashboard-offers a {
  text-decoration: none;
  color: inherit;
}
.dashboard-offers .main-content {
  position: relative;
  padding: 0 10px;
  /*   height: 40%;
   bottom: 10px; */
}
.dashboard-offers .main-content .background-shape {
  position: absolute;
  top: 365px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.dashboard-offers .main-content .content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /*padding: 0 10px;*/
  margin-top: -30px;
}
.dashboard-offers .main-content .greeting_ {
  font-size: 18px;
  font-weight: 400;
  color: #050468;
  line-height: 22px;
  font-family: "Inter", sans-serif;
}
.dashboard-offers .main-content .subtitle {
  margin: 19px 0 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: #000019;
  font-family: "Inter", sans-serif;
}
.dashboard-offers .main-content .title-offer {
  display: none;
}
.dashboard-offers .main-content .offers-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard-offers .main-content .offer-card {
  border-radius: 15px;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: white;
  border: 1px solid #CCCCDC;
  height: 170px;
}
.dashboard-offers .main-content .card-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dashboard-offers .main-content .card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dashboard-offers .main-content .card-info .info-label {
  font-size: 14px;
  font-weight: 400;
  color: #000019;
}
.dashboard-offers .main-content .card-info .info-value {
  font-size: 16px;
  font-weight: 700;
}
.dashboard-offers .main-content .card-info .info-value-green {
  color: #4DBA8C;
}
.dashboard-offers .main-content .card-info .info-value-dark {
  color: #000019;
}
.dashboard-offers .main-content .divider {
  border: none;
  height: 1px;
  margin: 0;
  border-bottom: 1px solid #CCCCDC;
  width: 100%;
  z-index: 999999;
}
.dashboard-offers .main-content .provider-info {
  gap: 12px;
}
.dashboard-offers .main-content .provider-label {
  font-size: 14px;
  font-weight: 400;
  color: #000019;
  font-family: "Inter", sans-serif;
}
.dashboard-offers .main-content .provider-details {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.dashboard-offers .main-content .provider-details .provider-avatar {
  width: 35px;
  height: 35px;
  position: relative;
  border-radius: 50%;
}
.dashboard-offers .main-content .provider-name {
  font-size: 14px;
  font-weight: 300;
  color: #000000;
}
.dashboard-offers .main-content .provider-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 400;
  color: #000019;
}
.dashboard-offers .main-content .provider-rating .star-icon {
  width: 14px;
  height: 14px;
}
.dashboard-offers .main-content .cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 150px;
}
.dashboard-offers .main-content .cta-section .cta-button {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 355px;
  width: 100%;
  height: 58px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  margin-bottom: 17px;
  font-family: "Inter", sans-serif;
  margin-top: 20px;
}
.dashboard-offers .main-content .cta-section .cta-link {
  font-size: 16px;
  font-weight: 400;
  color: #0806AE;
  line-height: 19px;
  padding: 12px 0;
  font-family: "Inter", sans-serif;
}
@media (max-width: 768px) {
  .dashboard-offers .cta-section {
    padding-top: 10px;
    background-color: #E6E6EE;
  }
}
/* ============================================
     ESTILOS GLOBALES
     ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background-color: #F0F0F7;
}
/* ============================================
   ESTILOS DEL CARRUSEL
   ============================================ */
.carousel-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.carousel-wrapper {
  display: flex;
  width: 600vw;
  /* 6 slides */
  height: 100vh;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.navigation-dots {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.3px;
  z-index: 1000;
  width: 362.42px;
  transition: opacity 0.6s ease;
}
@media (max-width: 768px) {
  .navigation-dots {
    width: 100%;
    left: 0;
    transform: none;
  }
}
.dot {
  flex: 1;
  height: 5px;
  background-color: rgba(204, 204, 220, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dot.active {
  background-color: #ccccdc;
}
.carousel-slide {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.carousel-slide > section {
  min-height: 100vh;
  width: 100%;
}
.click-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #050468;
  font-size: 14px;
  opacity: 0.7;
  animation: pulse 2s infinite;
  z-index: 10;
  pointer-events: none;
}
.carousel-slide:nth-child(3) .click-indicator,
.carousel-slide:nth-child(4) .click-indicator,
.carousel-slide:nth-child(6) .click-indicator {
  color: #ffffff;
}
.carousel-slide:nth-child(2) .click-indicator,
.carousel-slide:nth-child(5) .click-indicator {
  color: #050468;
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
}
@media (max-height: 667px) {
  .classic-service-section .title {
    font-size: 24px;
    line-height: 1.2;
  }
  .classic-service-section .description {
    font-size: 15px;
    line-height: 1.3;
  }
  .classic-service-section .text-content {
    margin-top: 28%;
  }
}
/* ============================================
   SLIDE 1: LOADING SECTION
   ============================================ */
.loading-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(295deg, #e6e6ee 0%, #ffffff 132.03%);
}
.loading-section__background-shape {
  position: absolute;
  width: 100%;
  height: 976px;
  top: -63.6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  filter: drop-shadow(0px 8px 51px rgba(5, 4, 104, 0.1));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.loading-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}
.icon-card {
  width: 275px;
  height: 275px;
  background-color: #ffffff;
  border-radius: 32px;
  box-shadow: 0px 8px 51px 14px rgba(5, 4, 104, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 110px;
}
.icon-card__icon {
  width: 165.57px;
  height: 175.7px;
}
.loading-section__title {
  color: #050468;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.21;
  text-align: center;
  margin: 0;
}
/* ============================================
   SLIDE 2: HERO SECTION
   ============================================ */
.hero-container {
  max-width: 1440px;
  height: 900px;
  background-color: #000050;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.progress-bar {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 11px;
  width: 1044px;
}
.progress-segment,
.progress-segment-active {
  height: 5px;
  width: 200px;
}
.progress-segment {
  background-color: rgba(204, 204, 220, 0.5);
}
.progress-segment-active {
  background-color: #ccccdc;
}
.hero-image {
  position: absolute;
  width: 40%;
  height: 90%;
  z-index: 1;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center left;
     object-position: center left;
}
.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hero-logo-group {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 350px;
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
}
.hero-logo {
  width: 150px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 11;
  margin-top: 15%;
  position: absolute;
}
.hero-ovalo {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 10;
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
}
.hero-title {
  position: absolute;
  top: 273px;
  left: 836px;
  width: 302px;
  margin: 0;
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 57px;
}
.logo-wrapper {
  position: absolute;
  top: 550px;
  right: -100px;
  width: 500px;
  height: 500px;
}
.logo-background-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}
.logo-bg-main-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.logo-foreground {
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: auto;
}
/* ============================================
   SLIDE 3 y 4: CLASSIC Y PRIME SERVICE SECTION
   ============================================ */
.classic-service-section {
  background-color: #000050;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 900px;
}
.background-ellipse {
  position: absolute;
  left: -11.94%;
  transform: translateY(-20%);
  width: 60%;
  height: 100%;
  z-index: 1;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}
.decorative-ellipse {
  position: absolute;
  top: -17.66%;
  left: 80.69%;
  width: 27%;
  height: auto;
  z-index: 1;
}
.progress-indicator {
  position: absolute;
  top: 3.88%;
  left: 13.75%;
  width: 72.5%;
  height: 5px;
  display: flex;
  gap: 11px;
  z-index: 3;
}
.progress-indicator .bar {
  flex: 1;
  background-color: rgba(204, 204, 220, 0.5);
}
.progress-indicator .bar.active {
  background-color: #ccccdc;
}
.content-area {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 5%;
}
.visual-content {
  flex: 1 1 50%;
  position: relative;
  min-height: 600px;
}
.text-content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
  text-align: center;
}
.text-content1 {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* Cambia de center a flex-start */
  padding-left: 10%;
  padding-top: 10%;
  text-align: center;
}
.logo {
  position: absolute;
  top: -10%;
  left: 25%;
  transform: translateX(-50%);
  width: 45%;
  max-width: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.logo1 {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  max-width: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.illustration1 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: auto;
  min-width: 150px;
  min-height: 145px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.illustration {
  position: absolute;
  top: 15%;
  left: 25%;
  transform: translateX(-50%);
  width: 25%;
  height: auto;
  min-width: 150px;
  min-height: 145px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.title {
  font-family: "Rubik", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 40px 0;
  text-align: center;
}
.title strong {
  font-weight: 700;
}
.description {
  font-family: "Rubik", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  max-width: 400px;
  text-align: center;
}
.description strong {
  font-weight: 700;
}
/* ============================================
   SLIDE 5: SHIPPING SECTION
   ============================================ */
.shipping-section {
  background-color: #000050;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
@media (min-width: 768px) {
  .shipping-container {
    display: flex;
    min-height: 900px;
    width: 100%;
  }
}
.progress-bars {
  position: absolute;
  top: 35px;
  left: 198px;
  display: flex;
  gap: 11px;
  z-index: 5;
}
.progress-bars .bar {
  width: 200px;
  height: 5px;
  background-color: rgba(204, 204, 220, 0.5);
}
.progress-bars .bar.active {
  background-color: #ccccdc;
}
.small-circle-deco {
  position: absolute;
  top: -159px;
  right: 278px;
  width: 389px;
  height: 389px;
  z-index: 1;
}
.main-graphic-container {
  position: absolute;
  top: 370px;
  right: -176px;
  width: 770px;
  height: 748px;
  z-index: 2;
}
.large-circle-bg {
  position: absolute;
  top: 0;
  left: 30px;
  width: 95%;
  height: 100%;
  box-shadow: 0px 8px 51px 14px rgba(5, 4, 104, 0.1);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.main-graphic-container .logo {
  position: absolute;
  top: 142px;
  left: 121px;
  width: 335.05px;
  height: 107px;
  z-index: 3;
}
.character-illustration {
  position: absolute;
  top: 289px;
  left: 228px;
  width: 176px;
  height: 171px;
  z-index: 4;
}
/* ============================================
   SLIDE 6: CTA SECTION
   ============================================ */
.cta-section {
  background-color: #000050;
  max-width: 1440px;
  height: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 35px;
  color: #ffffff;
}
.cta-decoration-ellipse {
  position: absolute;
  top: -159px;
  left: 1162px;
  width: 389px;
  height: 389px;
  z-index: 1;
}
.cta-section .progress-bar {
  display: flex;
  gap: 11px;
  margin-bottom: 78px;
  z-index: 2;
  position: static;
  transform: none;
}
.progress-bar__item {
  width: 200px;
  height: 5px;
  background-color: rgba(204, 204, 220, 0.5);
}
.progress-bar__item--active {
  background-color: #ccccdc;
}
.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  padding: 0 20px;
}
@media (min-width: 769px) {
  .cta-content {
    margin-top: 80px;
  }
}
.cta-heading {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 57px;
  margin: 0 0 16px;
}
.cta-subheading {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 38px;
  margin: 0 0 20px;
}
.cta-button {
  background: linear-gradient(353deg, #000050 0%, #4747d9 346.8%);
  border-radius: 31px;
  padding: 16px 24px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.35);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  border: none;
  cursor: pointer;
  min-width: 332px;
}
.laptop-image-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 60px auto 0;
  z-index: 1;
  transform: none;
  left: auto;
  top: auto;
}
.laptop-image-frame,
.laptop-image-screen {
  position: relative;
}
.laptop-image-frame {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.laptop-image-screen {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  display: block;
  margin-top: -50px;
  left: auto;
}
/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1440px) {
  .hero-container {
    width: 100vw;
    height: 62.5vw;
    min-height: initial;
  }
}
/* Para tablet 769-1118px */
@media (min-width: 769px) and (max-width: 1118px) {
  /* Hero - Slide 2: Hacer que quepa todo */
  .hero-container {
    overflow: visible;
    height: 100vh;
  }
  .hero-image {
    width: 50%;
    height: 70%;
    left: 5%;
    top: 15%;
  }
  .hero-title {
    left: 52%;
    top: 40%;
    font-size: 32px;
    width: 250px;
  }
  .logo-wrapper {
    left: 52%;
    top: 60%;
    width: 350px;
    height: 350px;
  }
  .logo-bg-main-circle {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .logo-foreground {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
  }
  /* Classic y Prime sections */
  .classic-service-section {
    min-height: auto;
    height: auto;
  }
  .content-area {
    flex-direction: column;
    padding: 5%;
  }
  .visual-content {
    min-height: 400px;
    width: 100%;
  }
  .text-content {
    padding-left: 5%;
    padding-right: 5%;
  }
  .logo {
    width: 40%;
  }
  .illustration {
    width: 30%;
  }
  .logo1 {
    width: 35%;
  }
  .illustration1 {
    width: 20%;
  }
  /* Shipping section */
  .shipping-container {
    flex-direction: column;
    padding: 5%;
  }
  .text-content1 {
    padding-left: 5%;
    padding-right: 5%;
  }
  .main-graphic-container {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 30px auto 0;
  }
  .large-circle-bg {
    width: 100%;
    height: auto;
    left: auto;
  }
  .main-graphic-container .logo {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 200px;
    margin: 20px auto;
  }
  .logo1 {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 200px;
    margin: 20px auto;
  }
  .illustration1 {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 150px;
    min-width: 0;
    min-height: 0;
  }
  /* CTA section */
  .cta-section {
    min-height: auto;
    height: auto;
    padding: 60px 20px;
  }
  .cta-content {
    margin-bottom: 40px;
  }
  .laptop-image-container {
    max-width: 100%;
    margin: 40px 0;
    width: 100%;
  }
  .laptop-image-screen {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .hero-logo-group {
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    height: 250px;
  }
  .loading-section__background-shape {
    display: none;
    -o-object-fit: auto;
       object-fit: auto;
    -o-object-position: auto;
       object-position: auto;
  }
  .large-circle-bg {
    position: absolute;
    top: -375px;
    left: 30px;
    width: 95%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .background-ellipse {
    left: 50%;
    top: 250px;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .hero-image {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .logo-bg-main-circle {
    top: auto;
    bottom: -185px;
    right: 50%;
    transform: translateX(-48%);
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .logo {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .logo1 {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .illustration {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .illustration1 {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .laptop-image-screen {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: auto;
       object-position: auto;
  }
  .icon-card {
    width: 220px;
    height: 220px;
    margin-bottom: 80px;
  }
  .icon-card__icon {
    width: 132px;
    height: 140px;
  }
  .loading-section__title {
    font-size: 28px;
  }
  .hero-container {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 30px;
  }
  .progress-bar {
    position: static;
    transform: none;
    width: 100%;
    gap: 5px;
  }
  .progress-segment,
  .progress-segment-active {
    flex-grow: 1;
    width: auto;
  }
  .hero-image {
    width: 100%;
    height: 45%;
    left: 50%;
    transform: translateX(-50%);
    top: 5%;
  }
  .hero-content {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }
  .hero-title {
    position: absolute;
    top: 65%;
    left: 10%;
    transform: translateY(-50%);
    font-size: 40px;
    line-height: 1.4;
    text-align: left;
  }
  .logo {
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
  }
  .logo1 {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    max-width: 335px;
  }
  .illustration1 {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    min-width: 0;
    min-height: 0;
  }
  .illustration {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: auto;
    min-width: 0;
    min-height: 0;
  }
  .title-light {
    font-size: 45px;
    word-wrap: break-word;
    display: block;
    /* para que haga salto de línea */
    text-align: center;
    /* centra el texto */
  }
  .title-bold {
    font-size: 50px;
    display: block;
    /* también en línea separada */
    text-align: center;
    font-weight: bold;
    /* centra el texto */
  }
  .text-content1 {
    margin-top: 50px;
    text-align: center;
    /* centra también el párrafo si querés */
  }
  .laptop-image-screen {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  .laptop-image-container {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 40px auto 0;
    left: auto;
    bottom: auto;
    transform: none;
  }
  .text-content {
    position: absolute;
    top: 80%;
    left: 10%;
    transform: translateY(-50%);
    max-width: 80%;
    color: #fff;
    text-align: left;
    line-height: 1.5;
  }
  .title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 30px;
    text-align: center;
  }
  .title strong {
    font-weight: 700;
  }
  .description {
    font-size: 0.9rem;
    color: #dcdcdc;
    font-size: 20px;
    text-align: start;
  }
  .logo-wrapper {
    position: static;
    width: 250px;
    height: 250px;
  }
  .logo-bg-secondary-circle {
    display: none;
  }
  .logo-foreground {
    width: 50%;
    height: auto;
    top: 93%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cta-section .progress-bar {
    display: none;
  }
  .cta-section {
    padding-top: 60px;
    padding-bottom: 45vw;
  }
  .cta-heading {
    font-size: 24px;
    line-height: 1.2;
    margin-top: 90px;
  }
  .cta-subheading {
    font-size: 20px;
    line-height: 1.3;
  }
  .cta-button {
    margin-top: 80px;
  }
  .laptop-image-container {
    width: 95vw;
    bottom: -8%;
  }
}
@media (max-width: 400px) {
  .illustration {
    top: 60px;
  }
  .text-content {
    top: 460px;
  }
}
html,
body {
  height: 100%;
}
body {
  overflow: hidden;
}
.carousel-container {
  z-index: 9999;
}
.carousel-slide,
.carousel-slide > section {
  width: 100vw;
  min-height: 100vh;
}
/* Quitar límites que recortaban (max-width/height fija) */
.loading-section,
.hero-container,
.classic-service-section,
.shipping-section,
.cta-section {
  max-width: none !important;
  width: 100vw !important;
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
}
/* Si alguna imagen se desborda, que no recorte */
img {
  max-width: 100%;
  height: auto;
}
.modal-clothing-weight .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.modal-clothing-weight .modal-content {
  height: 100%;
  display: flex;
  align-items: center;
}
.modal-clothing-weight .clothing-guide-container {
  bottom: 0;
  position: absolute;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  padding: 43px 0 34px 0;
  overflow: hidden;
  justify-self: center;
  border-radius: 63px 63px 0 0;
  width: 100%;
}
.modal-clothing-weight .clothing-guide-container .content-title {
  justify-self: center;
}
.modal-clothing-weight .clothing-guide-container .illustration-wrapper {
  position: relative;
  width: 156.8193359375px;
  height: 153.0236968994px;
  justify-self: center;
}
.modal-clothing-weight .clothing-guide-container .illustration-wrapper img {
  position: absolute;
}
.modal-clothing-weight .clothing-guide-container .img-frame {
  width: 100%;
  height: 100%;
}
.modal-clothing-weight .clothing-guide-container .guide-title {
  font-family: "Inter", sans-serif;
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  margin-top: 25px;
}
.modal-clothing-weight .clothing-guide-container picture img {
  margin: auto;
  padding: 0 20px;
}
.modal-clothing-weight .clothing-guide-container .ok-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  width: 355px;
  height: 58px;
  font-family: "Inter", sans-serif;
  border-radius: 31px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  margin: auto;
  margin-top: 23px;
}
@media (min-width: 768px) {
  .modal-clothing-weight .clothing-guide-container {
    border-radius: 78px;
    max-width: 1087px;
    width: 100%;
    margin: 40px auto;
    display: flex;
    border: 2px solid #000050;
    padding: 43px 10px 34px 10px;
    position: relative;
  }
  .modal-clothing-weight .content-title {
    display: flex;
  }
  .modal-clothing-weight .content-title .guide-title {
    font-size: 24px;
    max-width: 100%;
    align-self: center;
  }
}
@media (min-width: 1200px) {
  .modal-clothing-weight .clothing-guide-container {
    height: 628.9800415039px;
    width: 1087px;
  }
}
.modal-peso {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.modal-peso.active {
  display: block;
}
.confirmation-message {
  height: 100vh;
}
.confirmation-message .container-message {
  background-color: white;
  bottom: 0;
  position: fixed;
  padding: 40px 20px;
  border-radius: 73px 73px 0 0;
  width: 100%;
}
.confirmation-message .rider {
  width: 140px;
  display: flex;
  margin: auto;
  margin-bottom: 34px;
}
.confirmation-message .sm-title {
  font-size: 22px;
}
.confirmation-message .btn {
  font-size: 16px;
  color: white;
  font-family: "Inter", sans-serif;
  max-width: 355px;
  width: 100%;
  height: 58px;
  align-items: center;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px 31px 31px 31px;
  border: none;
  display: block;
  font-weight: bold;
  margin: auto;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  margin-top: 30px;
}
@media (min-width: 768px) {
  .confirmation-message .container-message {
    border: 2px solid #000050;
    border-radius: 41px;
    padding: 43px 10px 34px 10px;
    margin: auto;
    max-width: 651px;
    width: 100%;
    height: 558px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .confirmation-message .rider {
    width: 230px;
  }
  .confirmation-message .sm-title {
    font-size: 26px;
  }
}
.article-links {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 5px;
}
.article-links .container {
  position: fixed;
  max-width: 800px;
  width: 100%;
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  bottom: 0;
  padding: 27px;
  border-radius: 73px 73px 0 0;
}
.article-links .container .title-article-links {
  color: #050468;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 33.18px;
  text-align: center;
}
.article-links .container .info-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.article-links .container .info-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 355px;
  width: 100%;
  height: 59px;
  margin: auto;
}
.article-links .container .info-form .form-group h5 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin-bottom: 2px;
}
.article-links .container .info-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
  cursor: pointer;
}
.article-links .container .info-form .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
  margin-top: 26px;
}
@media (min-width: 768px) {
  .article-links {
    padding: 2rem;
  }
  .article-links .container {
    border: 2px solid #000050;
    border-radius: 49px;
    padding: 47px 26px 20px;
    width: 651px;
    height: 558px;
    position: relative;
  }
  .article-links .container .title-article-links {
    margin-bottom: 20px;
  }
  .article-links .container .info-form .submit-button {
    margin-top: 5px;
  }
}
.dashboard-item-to-quote {
  display: block;
  height: 90vh;
  background-color: #E6E6EE;
  margin: 0 auto;
  overflow-x: hidden;
  /*  .top-right-area {
     position: absolute;
     top: 0;
     right: 0;
     pointer-events: none;
     z-index: 0;
   }
   .top-right-area::before {
     content: "";
     position: absolute;
     top: -125px;      
     right: -145px;
     width: 389px;
     height: 389px;
     background: #FDFBCF; 
     border-radius: 50%;
     z-index: 0;      
     display: none;   
   } */
  /*  .user-profile {
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 1;
    position: relative;
  }

  .user-name {
    font-size: 16.35px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: right;
    line-height: 1.2;
    margin-right: 6px;
  } */
  /*  .user-avatar {
     width: 60px;
     height: 60px;
     position: relative;
     filter: drop-shadow(0px 12px 21px rgba(5, 4, 104, 0.15));
   } */
  /* popup */
}
.dashboard-item-to-quote .main-content {
  flex-grow: 1;
  padding: 40px 0 0px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.dashboard-item-to-quote .main-content .user-profile {
  padding-right: 19px;
  top: 42px;
}
.dashboard-item-to-quote .main-content .top-right-area::before {
  right: -106px;
  top: -144px;
}
.dashboard-item-to-quote .back-header {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  width: auto;
  justify-content: flex-start;
}
.dashboard-item-to-quote .back-header p {
  margin: auto;
}
.dashboard-item-to-quote .back-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0806ae;
  font-weight: 600;
  margin-bottom: 15px;
  width: -moz-fit-content;
  width: fit-content;
}
.dashboard-item-to-quote .back-link span {
  display: none;
}
.dashboard-item-to-quote .container {
  background: white;
  padding: 6px 10px 30px;
  border-radius: 40px 40px 0 0;
  height: 80vh;
}
.dashboard-item-to-quote .content-header-items {
  /*  margin-bottom: 40px; */
  position: relative;
  z-index: 1;
  padding: 0 10px;
}
.dashboard-item-to-quote .content-header-items .stepper-container {
  display: flex;
  justify-content: start;
  margin-bottom: 40px;
  max-width: 800px;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  justify-content: space-between;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  background-color: transparent;
  padding: 0;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000019;
  background-color: #e6e6ee;
  font-family: "Rubik", sans-serif;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-circle.completed {
  background: #4DBA8C;
  color: #050468;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-circle.active {
  background: #0806AE;
  color: #fff;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-circle.inactive {
  background: #E6E6EE;
  color: #050468;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step:has(.step-circle.active) .step-label {
  color: #000019;
  font-weight: 600;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-label {
  font-size: 12px;
  color: #ccccdc;
  font-family: "Inter", sans-serif;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-line-desk,
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-line {
  flex-grow: 1;
  height: 1px;
  background-color: #ccccdc;
  margin: 0 -31px;
  margin-bottom: 20px;
}
.dashboard-item-to-quote .content-header-items .stepper-container .stepper .step-line-desk {
  display: none;
}
.dashboard-item-to-quote .items-section {
  flex-grow: 1;
  position: relative;
  z-index: 1;
  max-width: 410px;
  margin: auto;
  width: 100%;
}
.dashboard-item-to-quote .items-section .page-title {
  font-size: 22px;
  color: #333373;
  margin-bottom: 30px;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  padding-left: 10px;
}
.dashboard-item-to-quote .items-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-x: scroll;
  align-items: center;
}
.dashboard-item-to-quote .item-card {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ccccdc;
  width: 453px;
  padding-left: 54px;
}
.dashboard-item-to-quote .item-image {
  width: 108.5222015381px;
  height: 73px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.dashboard-item-to-quote .item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.dashboard-item-to-quote .item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 40px;
}
.dashboard-item-to-quote .item-name {
  font-size: 16px;
  font-weight: 700;
  color: #333373;
  margin: 0;
  font-family: "Rubik", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.dashboard-item-to-quote .item-link,
.dashboard-item-to-quote .item-desc {
  font-size: 14px;
  color: #333373;
  margin: 0;
  font-family: "Inter", sans-serif;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.dashboard-item-to-quote .item-price {
  font-size: 16px;
  font-weight: 700;
  color: #0806ae;
  margin: 0;
  font-family: "Inter", sans-serif;
}
.dashboard-item-to-quote .item-actions {
  gap: 15px;
  margin-left: 20px;
  display: flex;
}
.dashboard-item-to-quote .action-btn {
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.dashboard-item-to-quote .action-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.dashboard-item-to-quote .action-btn:hover {
  opacity: 1;
}
.dashboard-item-to-quote .special-card .item-image {
  background-color: #fdfbcf;
  position: relative;
}
.dashboard-item-to-quote .content-footer {
  margin-top: 30px;
  display: contents;
  grid-template-columns: repeat(1, 1fr);
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 1;
  padding: 0 10px;
}
.dashboard-item-to-quote .footer-character {
  margin-bottom: -20px;
  display: none;
}
.dashboard-item-to-quote .footer-actions {
  display: grid;
  gap: 15px;
}
.dashboard-item-to-quote .buttons-row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 20px;
}
.dashboard-item-to-quote .btn {
  width: 100%;
  max-width: 356px;
  height: 58px;
  border-radius: 30px;
  padding: 20px 17px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.1s;
  font-family: "Inter", sans-serif;
  margin: auto;
}
.dashboard-item-to-quote .btn:active {
  transform: scale(0.98);
}
.dashboard-item-to-quote .btn-secondary {
  background-color: #f5f5f5;
  border: 1px solid #333373;
  color: #0806ae;
}
.dashboard-item-to-quote .btn-primary {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  color: #ffffff;
  min-width: 200px;
}
.dashboard-item-to-quote .btn-icon {
  width: 28px;
  height: 28px;
}
.dashboard-item-to-quote .footer-note {
  font-size: 14px;
  color: #333373;
  margin: 0;
  font-family: "Inter", sans-serif;
}
.dashboard-item-to-quote .movil {
  margin: 10px 0;
  text-align: center;
}
.dashboard-item-to-quote .desktop {
  display: none;
}
@media (min-width: 768px) {
  .dashboard-item-to-quote {
    display: flex;
    min-height: 100vh;
    background-color: white;
  }
  .dashboard-item-to-quote .main-content {
    /*    height: 100vw; */
    padding: 30px 19px 53px 50px;
    /* .top-right-area::before{
      display: block;
    }
    .user-profile{
      display: flex;
    } */
  }
  .dashboard-item-to-quote .main-content .back-header {
    justify-content: space-between;
  }
  .dashboard-item-to-quote .main-content .back-header p {
    display: none;
  }
  .dashboard-item-to-quote .main-content .back-header span {
    display: block;
  }
  .dashboard-item-to-quote .main-content .back-link {
    margin-bottom: 30px;
  }
  .dashboard-item-to-quote .main-content .container {
    background-color: transparent;
    padding: 0;
    width: 85%;
  }
  .dashboard-item-to-quote .main-content .container .content-header-items .line {
    display: block;
  }
  .dashboard-item-to-quote .items-section {
    max-width: 619px;
    width: 100%;
  }
  .dashboard-item-to-quote .items-section .page-title {
    padding-left: 0;
  }
  .dashboard-item-to-quote .items-section .info-movil {
    display: none;
  }
  .dashboard-item-to-quote .items-section .items-list {
    overflow-x: auto;
    width: 582.6851196289px;
    justify-self: center;
  }
  .dashboard-item-to-quote .items-section .items-list .item-card {
    width: 582.6851196289px;
  }
  .dashboard-item-to-quote .items-section .items-list .item-card .item-image {
    width: 179.4192352295px;
    height: 120.4986801147px;
  }
  .dashboard-item-to-quote .items-section .items-list .item-card .item-actions {
    display: flex;
  }
  .dashboard-item-to-quote .footer-actions {
    margin: auto;
  }
  .dashboard-item-to-quote .footer-actions .buttons-row {
    gap: 20px;
    /* display: contents; */
    /*  grid-template-columns: repeat(2, 1fr); */
  }
  .dashboard-item-to-quote .footer-actions .btn {
    width: 272px;
    height: 60px;
  }
  .dashboard-item-to-quote .footer-actions .movil {
    display: none;
  }
  .dashboard-item-to-quote .footer-actions .desktop {
    display: block;
  }
  .dashboard-item-to-quote .content-footer {
    margin-top: 60px;
    display: flex;
    /*   grid-template-columns: repeat(2, 1fr); */
  }
  .dashboard-item-to-quote .content-footer .footer-character {
    display: block;
  }
}
@media (min-width: 992px) {
  .dashboard-item-to-quote .buttons-row {
    display: flex;
  }
}
.dashboard-item-to-quote .delete-section {
  /* Overlay */
  /* show popup */
  /* Content Column */
}
.dashboard-item-to-quote .delete-section .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.dashboard-item-to-quote .delete-section .modal-overlay.active {
  display: flex;
}
.dashboard-item-to-quote .delete-section .card-container {
  flex-direction: column;
  position: absolute;
  width: 100%;
  background-color: #ffffff;
  border: none;
  border-radius: 73px 73px 0 0;
  display: flex;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
  gap: 20px;
  height: 493px;
  bottom: 0;
}
.dashboard-item-to-quote .delete-section .illustration-wrapper {
  position: relative;
  width: 137.8101348877px;
  height: 145px;
  align-self: center;
}
.dashboard-item-to-quote .delete-section .ill-part {
  position: absolute;
}
.dashboard-item-to-quote .delete-section .content-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.dashboard-item-to-quote .delete-section .card-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  font-family: "Rubik", sans-serif;
  color: rgb(51, 51, 115);
  text-align: center;
  margin: 0 0 54px 0;
  max-width: 444px;
}
.dashboard-item-to-quote .delete-section .buttons-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: center;
}
.dashboard-item-to-quote .delete-section .action-btn {
  width: 100%;
  max-width: 216px;
  height: 39px;
  border-radius: 31px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-item-to-quote .delete-section .action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 10px 18px rgba(5, 4, 104, 0.45);
}
.dashboard-item-to-quote .delete-section .action-btn:active {
  transform: translateY(0);
}
.dashboard-item-to-quote .delete-section .btn-text {
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .dashboard-item-to-quote .delete-section .card-container {
    border: 2px solid #000050;
    width: 100%;
    max-width: 650px;
    border-radius: 100px;
    position: relative;
    flex-direction: row;
  }
  .dashboard-item-to-quote .delete-section .card-container .illustration-wrapper {
    width: 208px;
    height: 219px;
    position: relative;
    align-self: center;
    right: -43px;
    bottom: -54px;
  }
  .dashboard-item-to-quote .delete-section .card-container .card-title {
    font-size: 24px;
  }
  .dashboard-item-to-quote .delete-section .card-container .action-btn {
    max-width: 253px;
    height: 46px;
  }
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal .add-article-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal .add-article-modal.active {
  display: block;
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal .content-wrapper {
  background: #fff;
  border-radius: 40px 40px 0 0;
  padding: 40px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  max-width: 852px;
  margin: 0 auto;
  box-sizing: border-box;
  border: none;
  bottom: 0;
  position: absolute;
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal .category-container {
  width: 100%;
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal .category-img {
  width: 131px;
  height: 131px;
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal .category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  width: 100%;
  margin: 0 auto;
}
.dashboard-item-to-quote .items-to-quote-addArticle-modal #product-categories {
  width: 100%;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .dashboard-item-to-quote .items-to-quote-addArticle-modal .content-wrapper {
    border: 2px solid #000050;
    position: relative;
    border-radius: 40px;
  }
  .dashboard-item-to-quote .items-to-quote-addArticle-modal .category-container {
    width: 60%;
  }
  .dashboard-item-to-quote .items-to-quote-addArticle-modal .category-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px 66px;
  }
}
/* ============================= */
/* MODAL VER ENLACES DE ROPA */
/* ============================= */
.ropa-links-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.ropa-links-modal.active {
  display: block;
}
.ropa-links-modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9998;
}
.ropa-links-modal .modal-content-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-radius: 73px 73px 0 0;
  padding: 27px;
  z-index: 9999;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.ropa-links-modal .close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: #050468;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  font-weight: 300;
  z-index: 10000;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ropa-links-modal .close-modal:hover {
  opacity: 0.7;
}
.ropa-links-modal .links-container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.ropa-links-modal .title-article-links {
  color: #050468;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 33.18px;
  text-align: center;
  margin: 0 0 20px 0;
}
.ropa-links-modal .info-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ropa-links-modal .info-form .form-group {
  background-color: #ffffff;
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 355px;
  width: 100%;
  min-height: 59px;
  margin: 0 auto;
  gap: 4px;
}
.ropa-links-modal .info-form .form-group h5 {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14.52px;
  margin: 0;
  color: #333373;
}
.ropa-links-modal .info-form .form-group .value {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #000019;
  line-height: 18.75px;
  cursor: pointer;
  text-decoration: none;
  word-break: break-all;
}
.ropa-links-modal .info-form .form-group .value:hover {
  color: #0806ae;
  text-decoration: underline;
}
.ropa-links-modal .info-form .form-group .value-input {
  width: 100%;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: #000019;
  line-height: 18.75px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0 0 2px 0;
  outline: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.ropa-links-modal .info-form .form-group .value-input::-webkit-scrollbar {
  height: 4px;
}
.ropa-links-modal .info-form .form-group .value-input::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}
.ropa-links-modal .info-form .form-group .value-input::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}
.ropa-links-modal .info-form .form-group .value-input::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.ropa-links-modal .info-form .form-group .value-input:hover {
  color: #0806ae;
}
.ropa-links-modal .info-form .form-group .value-input:focus {
  outline: none;
}
.ropa-links-modal .submit-button {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  border-radius: 31px;
  padding: 16px 24px;
  width: 355px;
  max-width: 100%;
  align-self: center;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19.36px;
  text-align: center;
  height: 58px;
  margin: 26px auto 0;
  display: block;
}
.ropa-links-modal .submit-button:hover {
  opacity: 0.9;
}
@media (min-width: 768px) {
  .ropa-links-modal .modal-content-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    border-radius: 49px;
    border: 2px solid #000050;
    width: 651px;
    max-width: 90vw;
    padding: 47px 26px 20px;
    animation: fadeInCenter 0.3s ease-out;
  }
  @keyframes fadeInCenter {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
  .ropa-links-modal .title-article-links {
    margin-bottom: 20px;
  }
  .ropa-links-modal .info-form .submit-button {
    margin-top: 5px;
  }
}
/* Estilo para el botón "Ver enlaces" */
.item-link-button {
  background: none;
  border: none;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #0806ae;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.item-link-button:hover {
  color: #050468;
  opacity: 0.8;
}
.edit-section {
  display: block;
  height: 85vh;
  background-color: #E6E6EE;
  margin: 0 auto;
  overflow-x: hidden;
  /*   .top-right-area {
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none;
      z-index: 0;
    }
    .top-right-area::before {
      content: "";
      position: absolute;
      top: -125px;      
      right: -145px;
      width: 389px;
      height: 389px;
      background: #FDFBCF; 
      border-radius: 50%;
      z-index: 0;      
      display: none;   
    } */
  /* .user-profile {
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 999999;
    position: relative;

    #avatar-seleccionado {
      width: 60px;
      height: 54px;
      margin-bottom: -45px;
      margin-left: 2px;   
    }

    a{
      border-radius: 100%;
      background-color: white;
      height: 60px;
      width: 60px;

    }

  } */
  /*   .user-name {
     font-size: 16.35px;
     font-weight: 600;
     color: var(--color-primary);
     text-align: right;
     line-height: 1.2;
     margin-right: 6px;
   } */
  /*  .user-avatar {
     width: 60px;
     height: 60px;
     position: relative;
     filter: drop-shadow(0px 12px 21px rgba(5, 4, 104, 0.15));
   } */
  /* -------------------------- */
}
.edit-section .main-content {
  flex-grow: 1;
  padding: 49px 0 0px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.edit-section .main-content .top-right-area::before {
  top: -100px;
}
.edit-section .back-header {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  width: auto;
  gap: 80px;
  justify-content: space-between;
}
.edit-section .back-link {
  display: none;
  align-items: center;
  gap: 10px;
  color: #0806ae;
  font-weight: 600;
  margin-bottom: 30px;
  width: -moz-fit-content;
  width: fit-content;
}
.edit-section .container {
  background: white;
  padding: 30px 10px;
  border-radius: 40px 40px 0 0;
}
.edit-section .content-header {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  display: none;
}
.edit-section .content-header .stepper-container {
  display: flex;
  justify-content: start;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0;
}
.edit-section .content-header .stepper-container .stepper {
  display: flex;
  align-items: center;
  max-width: 100%;
  /*   max-width: 800px; */
  justify-content: space-between;
}
.edit-section .content-header .stepper-container .stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  background-color: transparent;
}
.edit-section .content-header .stepper-container .stepper .step-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000019;
  background-color: #e6e6ee;
  font-family: "Rubik", sans-serif;
}
.edit-section .content-header .stepper-container .stepper .step.active .step-circle {
  background-color: #0806AE;
  color: #fff;
}
.edit-section .content-header .stepper-container .stepper .step.active .step-label {
  color: #000019;
}
.edit-section .content-header .stepper-container .stepper .step:first-child .step-circle {
  background-color: #e6e6ee;
  color: #000019;
}
.edit-section .content-header .stepper-container .stepper .step-label {
  font-size: 12px;
  color: #ccccdc;
  font-family: "Inter", sans-serif;
}
.edit-section .content-header .stepper-container .stepper .step:first-child .step-label {
  color: #000019;
}
.edit-section .content-header .stepper-container .stepper .step-line {
  flex-grow: 1;
  height: 1px;
  background-color: #ccccdc;
  margin: 0 -38px;
  margin-bottom: 20px;
}
.edit-section .content-header .stepper-container .stepper .line {
  display: none;
}
.edit-section .dashboard-container-edit {
  max-width: 375px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  /* Footer */
}
.edit-section .dashboard-container-edit .main-content {
  flex-grow: 1;
  padding: 40px 60px;
  position: relative;
}
.edit-section .dashboard-container-edit .form-container {
  max-width: 900px;
  margin: 0 auto;
}
.edit-section .dashboard-container-edit .page-title {
  font-size: 22px;
  color: #333373;
  margin-bottom: 20px;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
}
.edit-section .dashboard-container-edit .checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 29px;
  cursor: pointer;
}
.edit-section .dashboard-container-edit .checkbox-icon {
  width: 22px;
  height: 22px;
  border: 1px solid #0806AE;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-section .dashboard-container-edit .checkbox-label {
  color: #000019;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.edit-section .dashboard-container-edit .product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
  margin-bottom: 60px;
  /*  width: 800px; */
  margin: auto;
}
.edit-section .dashboard-container-edit .movil {
  display: block;
}
.edit-section .dashboard-container-edit .desktop {
  display: none;
}
.edit-section .dashboard-container-edit .product-image-col {
  flex: 0 0 237px;
  width: 355px;
  height: 190px;
}
.edit-section .dashboard-container-edit .product-img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 100%;
}
.edit-section .dashboard-container-edit .product-details-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
}
.edit-section .dashboard-container-edit .input_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-section .dashboard-container-edit .input_group label {
  font-size: 12px;
  color: #000019;
}
.edit-section .dashboard-container-edit .input-box,
.edit-section .dashboard-container-edit .input-link-m,
.edit-section .dashboard-container-edit .input-box-d {
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  width: 355px;
  height: 59px;
}
.edit-section .dashboard-container-edit .input-link-m {
  flex-direction: row;
  justify-content: space-between;
  max-width: 355px;
  width: 100%;
}
.edit-section .dashboard-container-edit .input-link-m .link-text {
  display: grid;
}
.edit-section .dashboard-container-edit .input-link-m .link-text span {
  cursor: pointer;
}
.edit-section .dashboard-container-edit .input-link-m .label p {
  margin: 5px 0 1rem;
  font-size: 16px;
  color: #0806AE;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
.edit-section .dashboard-container-edit .input-box-d {
  display: none;
}
.edit-section .dashboard-container-edit .input-value {
  font-size: 16px;
  color: #333373;
  font-family: "Inter", sans-serif;
}
.edit-section .dashboard-container-edit .text-value {
  color: #000000;
  font-weight: 500;
}
.edit-section .dashboard-container-edit .input-row-split {
  display: flex;
  gap: 10px;
  width: 355px;
  flex-direction: row-reverse;
}
.edit-section .dashboard-container-edit .value-group {
  flex: 2;
}
.edit-section .dashboard-container-edit .quantity-group {
  flex: 1;
}
.edit-section .dashboard-container-edit .value-box {
  background-color: #e6e6ee;
  border: none;
  justify-content: space-between;
  width: 228px;
  height: 59px;
  border-radius: 5px;
  display: flex;
  padding: 16px 16px;
}
.edit-section .dashboard-container-edit .label-inline {
  font-size: 16px;
  color: #000019;
}
.edit-section .dashboard-container-edit .value-inline {
  font-size: 16px;
  font-weight: 700;
  color: #0806AE;
}
.edit-section .dashboard-container-edit .quantity-box {
  justify-content: space-between;
  padding: 8px 16px;
  width: 116px;
}
.edit-section .dashboard-container-edit .qty-content {
  display: flex;
  flex-direction: column;
}
.edit-section .dashboard-container-edit .qty-content .content-select-qty {
  display: flex;
}
.edit-section .dashboard-container-edit .select-icon {
  width: 12px;
  height: 6px;
}
.edit-section .dashboard-container-edit .label-small {
  font-size: 12px;
  color: #000019;
}
.edit-section .dashboard-container-edit .qty-value {
  font-size: 16px;
  color: #000000;
  padding: 0;
}
.edit-section .dashboard-container-edit .form-footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 37px;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.edit-section .dashboard-container-edit .btn-save {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  color: white;
  padding: 16px 48px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  max-width: 355px;
  width: 100%;
  transition: transform 0.2s;
  height: 58px;
  font-family: "Inter", sans-serif;
}
.edit-section .dashboard-container-edit .btn-save:hover {
  transform: translateY(-2px);
}
.edit-section .dashboard-container-edit .discount-text {
  color: #333373;
  font-size: 14px;
  margin: 0;
  text-align: right;
  width: 355px;
  display: none;
}
@media (min-width: 992px) {
  .edit-section .dashboard-container-edit .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .edit-section .stepper-container {
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .edit-section {
    display: flex;
    min-height: 100vh;
    background-color: white;
  }
  .edit-section .main-content {
    padding: 71px 37px 40px 60px;
    height: auto;
  }
  .edit-section .main-content .top-right-area::before {
    display: block;
  }
  .edit-section .main-content .user-profile {
    display: flex;
  }
  .edit-section .main-content .avatar-group {
    display: block;
  }
  .edit-section .main-content .back-header .back-link {
    display: flex;
  }
  .edit-section .main-content .container {
    padding: 0;
    background-color: transparent;
  }
  .edit-section .main-content .container .content-header {
    display: block;
  }
  .edit-section .main-content .container .content-header .line {
    display: block;
  }
  .edit-section .main-content .stepper-container {
    padding-left: 40px;
    padding-right: 40px;
  }
  .edit-section .dashboard-container-edit {
    width: 100%;
  }
  .edit-section .dashboard-container-edit .form-container .text-movil {
    display: none;
  }
  .edit-section .dashboard-container-edit .form-container .checkbox-row {
    margin-bottom: 40px;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid {
    max-width: 800px;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .movil {
    display: none;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .desktop {
    display: flex;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .product-image-col {
    width: auto;
    height: auto;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .product-img {
    width: auto;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .input-row-split {
    display: flex;
    flex-direction: row;
  }
  .edit-section .dashboard-container-edit .form-container .form-footer {
    align-items: flex-end;
  }
  .edit-section .dashboard-container-edit .form-container .form-footer .discount-text {
    display: block;
  }
}
.tutorial-traer {
  --primary-bg: #000050;
  --text-light: #ffffff;
  --content-bg: #ffffff;
  --status-bar-bg: #000000;
  --primary-text: #ffffff;
  --accent-color-1: #ccccdc;
  --accent-color-2: rgba(204, 204, 220, 0.5);
  --step-number-text: #333373;
  --shadow-color: rgba(5, 4, 104, 0.35);
  font-family: "Rubik", sans-serif;
  background-color: var(--primary-bg);
  color: var(--primary-text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ===== SLIDER CONTAINER GENERAL ===== */
  /* =========================================================
     SLIDE 1 (data-slide="0") - HERO + INFO REFACTORIZADO
     ========================================================= */
  /* =========================================================
     SLIDE 2 (Paso 1)
     ========================================================= */
  /* =========================================================
     SLIDE 3 (Paso 2)
     ========================================================= */
  /* =========================================================
     SLIDE 5 (CTA FINAL)
     ========================================================= */
  /* =========================================================
     RESPONSIVE
     ========================================================= */
}
.tutorial-traer * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.tutorial-traer *,
.tutorial-traer *::before,
.tutorial-traer *::after {
  box-sizing: border-box;
}
.tutorial-traer .slider-container {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
.tutorial-traer .slider-wrapper {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  width: 500vw;
  will-change: transform;
}
.tutorial-traer .slide {
  min-width: 100vw;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
.tutorial-traer .navigation-dots {
  display: none;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  gap: 12px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.tutorial-traer .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}
.tutorial-traer .dot.active {
  background: var(--accent-color-1);
  transform: scale(1.3);
}
.tutorial-traer .slide[data-slide="0"] {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 16px;
}
.tutorial-traer .page-wrapper {
  width: 100%;
  max-width: 420px;
  min-height: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tutorial-traer .hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 0 32px;
  position: relative;
  z-index: 1;
}
.tutorial-traer .hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 960px;
  z-index: 0;
  display: block;
}
.tutorial-traer .hero-bg-img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.tutorial-traer .hero-header,
.tutorial-traer .illustration-container {
  position: relative;
  z-index: 1;
}
.tutorial-traer .status-bar {
  width: 100%;
  height: 51px;
  background-color: var(--status-bar-bg);
  flex-shrink: 0;
}
.tutorial-traer .hero-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 0 24px;
}
.tutorial-traer .logo {
  max-width: 160px;
  height: auto;
  display: block;
}
.tutorial-traer .illustration-container {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.tutorial-traer .illustration-content {
  position: relative;
  width: 224px;
  height: 196px;
}
.tutorial-traer .package-character {
  text-align: center;
  position: absolute;
  bottom: 50px;
}
.tutorial-traer .package-character .img-part:nth-child(1) {
  width: 100%;
}
.tutorial-traer .package-character .img-part:nth-child(2) {
  margin-top: 2.5rem;
  width: 50%;
  justify-self: center;
}
.tutorial-traer .paper-plane {
  position: absolute;
  top: 0;
  left: 109px;
  width: 114.36px;
  height: 114.36px;
  transform: rotate(2.95deg);
}
.tutorial-traer .info-section {
  margin-top: 100px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tutorial-traer .info-content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.tutorial-traer .tagline {
  color: var(--text-light);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.tutorial-traer .steps-heading {
  color: var(--text-light);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  margin: 5rem 0;
  font-family: "Rubik", sans-serif;
}
.tutorial-traer .slide[data-slide="0"] {
  position: relative;
}
.tutorial-traer .slide[data-slide="0"] .click-section {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}
.tutorial-traer .slide[data-slide="0"] .click-section picture {
  display: block;
}
.tutorial-traer .slide[data-slide="0"] .click-section .click-img {
  width: 60px;
  height: auto;
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}
.tutorial-traer .main-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
.tutorial-traer .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tutorial-traer .progress-indicator1,
.tutorial-traer .progress-indicator2,
.tutorial-traer .progress-indicator3 {
  display: flex;
  width: 100%;
  max-width: 568px;
  gap: 8px;
  margin: 60px auto 30px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.tutorial-traer [class^=progress-indicator] .bar {
  height: 3px;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.tutorial-traer [class^=progress-indicator] .bar.active {
  background-color: #ffffff;
}
.tutorial-traer .step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
  padding: 0 10px;
  margin-top: 30px;
}
.tutorial-traer .step-header1 {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px;
}
.tutorial-traer .step-number-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-traer .step-circle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0px 8px 14px var(--shadow-color));
}
.tutorial-traer .step-number {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--step-number-text);
  line-height: 1;
}
.tutorial-traer .step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  font-family: "Rubik", sans-serif;
}
.tutorial-traer .step-title1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  text-align: left;
}
.tutorial-traer .step-text {
  color: var(--primary-text);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  max-width: 26rem;
  text-align: left;
}
.tutorial-traer .phone-mockup {
  width: 100%;
  max-width: 960px;
}
.tutorial-traer .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tutorial-traer .phone-screen-content img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  place-self: center;
}
.tutorial-traer .phone-mockup-wrapper {
  position: absolute;
  top: 234px;
  left: 10px;
  width: 354.39px;
  height: 628px;
}
.tutorial-traer .phone-screen-container {
  position: absolute;
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
  border-radius: 38px;
  overflow: hidden;
  z-index: 5;
  background-color: #f5f5f5;
}
.tutorial-traer .phone-screen-image {
  width: 273px;
  height: 708px;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: -0.43px;
  left: -0.11px;
}
.tutorial-traer .frame-element {
  position: absolute;
}
.tutorial-traer .shadow-main {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
.tutorial-traer .screen-glare {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
.tutorial-traer .border {
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
}
.tutorial-traer .camera-notch {
  top: 22.34px;
  left: 155.62px;
  width: 43.69px;
  height: 5.04px;
}
.tutorial-traer .shadow-bottom {
  top: 584.34px;
  left: 51.67px;
  width: 251.05px;
  height: 40.75px;
}
.tutorial-traer .base-stand {
  top: 617.81px;
  left: 0;
  width: 354.39px;
  height: 10.19px;
}
.tutorial-traer .cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000050;
  text-align: center;
  min-height: 90vh;
  width: 100%;
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  padding: 40px 0;
}
.tutorial-traer .cta-container .picture-img {
  width: 120%;
  margin-top: 25px;
}
.tutorial-traer .cta-container .picture-img .cta-image {
  width: 120%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .picture-img .cta-image {
    max-width: 445px;
    margin: 0 auto;
    border-radius: 12px;
  }
}
.tutorial-traer .cta-container .cta-title {
  font-size: 32px;
  font-weight: 700;
  margin: 15px 0 15px;
  padding: 0 20px;
  font-family: "Rubik", sans-serif;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .cta-title {
    font-size: 40px;
  }
}
.tutorial-traer .cta-container .cta-description1,
.tutorial-traer .cta-container .cta-description2 {
  width: 100%;
  padding: 0 24px;
  font-size: 16px;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .cta-description1,
  .tutorial-traer .cta-container .cta-description2 {
    max-width: 450px;
    padding: 0;
    font-size: 18px !important;
  }
}
.tutorial-traer .cta-container .cta-description2 {
  margin-top: 15px;
}
.tutorial-traer .cta-container .cta-button1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 48px);
  max-width: 320px;
  height: 60px;
  margin-top: 30px;
  background: linear-gradient(180deg, #3b42c4 0%, #1e248a 100%);
  border-radius: 50px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .cta-button1 {
    margin-top: 45px;
  }
}
.tutorial-traer .cta-container .cta-button1:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}
@media (min-width: 768px) {
  .tutorial-traer .slide[data-slide="0"] .click-section {
    bottom: 40px;
    right: 40px;
  }
  .tutorial-traer .slide[data-slide="0"] .click-section .click-img {
    width: 100px;
  }
}
@media (max-width: 375px) {
  .tutorial-traer .cta-container {
    padding-left: 21px;
    padding-right: 21px;
  }
}
@media (max-width: 576px) {
  .tutorial-traer .slide[data-slide="0"] {
    padding: 0;
    align-items: stretch;
  }
  .tutorial-traer .page-wrapper {
    min-height: 812px;
    border-radius: 0;
    box-shadow: none;
  }
  .tutorial-traer .hero-bg {
    width: 100%;
  }
  .tutorial-traer .hero-header {
    margin-top: 24px;
    padding: 0 20px;
  }
  .tutorial-traer .info-section {
    padding: 0 24px 72px;
    margin-top: 60px;
  }
  .tutorial-traer .package-character {
    bottom: 0;
  }
  .tutorial-traer .step-number-wrapper {
    width: 50px;
    height: 50px;
  }
  .tutorial-traer .step-title {
    font-size: 1.2rem;
  }
  .tutorial-traer .main-section {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }
  .tutorial-traer .slide[data-slide="1"] .phone-mockup,
  .tutorial-traer .slide[data-slide="2"] .phone-mockup,
  .tutorial-traer .slide[data-slide="3"] .phone-mockup {
    height: auto;
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tutorial-traer .slide[data-slide="1"] .phone-screen-content,
  .tutorial-traer .slide[data-slide="2"] .phone-screen-content,
  .tutorial-traer .slide[data-slide="3"] .phone-screen-content {
    width: 100%;
    height: auto;
  }
  .tutorial-traer .slide[data-slide="1"] .phone-screen-content img,
  .tutorial-traer .slide[data-slide="2"] .phone-screen-content img,
  .tutorial-traer .slide[data-slide="3"] .phone-screen-content img {
    width: 100%;
    height: auto !important;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  .tutorial-traer .cta-container {
    max-width: 100%;
  }
  .tutorial-traer .cta-title {
    font-size: 20px;
    margin-top: 40px;
  }
  .tutorial-traer .cta-description {
    margin-top: 10px;
  }
  .tutorial-traer .cta-image {
    width: 100%;
  }
  .tutorial-traer .cta-button1 {
    margin-top: 40px;
  }
}
@media (min-width: 768px) {
  .tutorial-traer .page-wrapper {
    max-width: 960px;
    min-height: 640px;
  }
}
body.page-template-tutorial-enviar-php {
  --primary-bg: #000050;
  --text-light: #ffffff;
  --content-bg: #ffffff;
  --status-bar-bg: #000000;
  --primary-text: #ffffff;
  --accent-color-1: #ccccdc;
  --accent-color-2: rgba(204, 204, 220, 0.5);
  --step-number-text: #333373;
  --shadow-color: rgba(5, 4, 104, 0.35);
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
  background-color: var(--primary-bg);
  color: var(--primary-text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ===== SLIDER CONTAINER GENERAL ===== */
  /* =========================================================
     IMAGEN HAZCLICK (SOLO DESKTOP) - Slide 1
     ========================================================= */
  /* =========================================================
     SLIDE 1 (data-slide="0") - HERO + INFO
     ========================================================= */
  /* =========================================================
     SLIDE 2 (Paso 1)
     ========================================================= */
  /* =========================================================
     SLIDE 3 (Paso 2)
     ========================================================= */
  /* =========================================================
     SLIDE 5 (CTA FINAL)
     ========================================================= */
  /* =========================================================
     RESPONSIVE (MOBILE + DESKTOP)
     ========================================================= */
}
body.page-template-tutorial-enviar-php * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body.page-template-tutorial-enviar-php *, body.page-template-tutorial-enviar-php *::before, body.page-template-tutorial-enviar-php *::after {
  box-sizing: border-box;
}
body.page-template-tutorial-enviar-php .slider-container {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .slider-wrapper {
  display: flex;
  height: 100vh;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-template-tutorial-enviar-php .slide {
  min-width: 100vw;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .navigation-dots {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.3px;
  z-index: 1000;
  width: 362.42px;
  transition: opacity 0.6s ease;
}
body.page-template-tutorial-enviar-php .dot {
  flex: 1;
  height: 5px;
  background-color: var(--accent-color-2);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
body.page-template-tutorial-enviar-php .dot.active {
  background-color: var(--accent-color-1);
}
body.page-template-tutorial-enviar-php .hazclick-indicator {
  display: none;
}
@media (min-width: 768px) {
  body.page-template-tutorial-enviar-php .hazclick-indicator {
    display: block;
    position: absolute;
    /* ===== AJUSTES DE POSICIÓN ===== */
    /* Modifica estos valores para ajustar la ubicación */
    bottom: 40px;
    right: 60px;
    /* ===== AJUSTES DE TAMAÑO ===== */
    /* Modifica estos valores para cambiar el tamaño de la imagen */
    width: 250px;
    height: auto;
    z-index: 100;
    pointer-events: none;
  }
}
body.page-template-tutorial-enviar-php .slide[data-slide="0"] {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
}
body.page-template-tutorial-enviar-php .page-wrapper {
  width: 100%;
  max-width: 420px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .hero-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 24px 32px;
  position: relative;
  z-index: 1;
}
body.page-template-tutorial-enviar-php .hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 960px;
  z-index: 0;
  display: block;
}
body.page-template-tutorial-enviar-php .hero-bg-img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
body.page-template-tutorial-enviar-php .hero-header,
body.page-template-tutorial-enviar-php .illustration-container {
  position: relative;
  z-index: 1;
}
body.page-template-tutorial-enviar-php .status-bar {
  width: 100%;
  height: 51px;
  background-color: var(--status-bar-bg);
  flex-shrink: 0;
}
body.page-template-tutorial-enviar-php .hero-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 0 24px;
}
body.page-template-tutorial-enviar-php .logo {
  max-width: 160px;
  height: auto;
  display: block;
}
body.page-template-tutorial-enviar-php .illustration-container {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
body.page-template-tutorial-enviar-php .illustration-content {
  position: relative;
  width: 336px;
  height: 294px;
}
body.page-template-tutorial-enviar-php .package-character {
  text-align: center;
  position: absolute;
  bottom: 50px;
}
body.page-template-tutorial-enviar-php .package-character .img-part:nth-child(1) {
  width: 100%;
}
body.page-template-tutorial-enviar-php .package-character .img-part:nth-child(2) {
  margin-top: 2.5rem;
  width: 35%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body.page-template-tutorial-enviar-php .paper-plane {
  position: absolute;
  top: 0;
  left: 109px;
  width: 114.36px;
  height: 114.36px;
  transform: rotate(2.95deg);
}
body.page-template-tutorial-enviar-php .info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 32px 24px;
}
body.page-template-tutorial-enviar-php .info-content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
body.page-template-tutorial-enviar-php .tagline {
  color: var(--text-light);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .steps-heading {
  color: var(--text-light);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 5rem 0;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .main-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page-template-tutorial-enviar-php .step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 80px;
  margin-bottom: 60px;
  padding: 0 10px;
}
body.page-template-tutorial-enviar-php .step-header1 {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px;
}
body.page-template-tutorial-enviar-php .step-number-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-template-tutorial-enviar-php .step-circle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0px 8px 14px var(--shadow-color));
}
body.page-template-tutorial-enviar-php .step-number {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--step-number-text);
  line-height: 1;
}
body.page-template-tutorial-enviar-php .step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .step-title1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  text-align: left;
}
body.page-template-tutorial-enviar-php .step-text {
  color: var(--primary-text);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  max-width: 26rem;
  text-align: left;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .phone-mockup {
  width: 100%;
  max-width: 960px;
}
body.page-template-tutorial-enviar-php .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body.page-template-tutorial-enviar-php .phone-screen-content img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
body.page-template-tutorial-enviar-php .phone-mockup-wrapper {
  position: absolute;
  top: 234px;
  left: 10px;
  width: 354.39px;
  height: 628px;
}
body.page-template-tutorial-enviar-php .phone-screen-container {
  position: absolute;
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
  border-radius: 38px;
  overflow: hidden;
  z-index: 5;
  background-color: #f5f5f5;
}
body.page-template-tutorial-enviar-php .phone-screen-image {
  width: 273px;
  height: 708px;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: -0.43px;
  left: -0.11px;
}
body.page-template-tutorial-enviar-php .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}
body.page-template-tutorial-enviar-php .frame-element {
  position: absolute;
}
body.page-template-tutorial-enviar-php .shadow-main {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
body.page-template-tutorial-enviar-php .screen-glare {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
body.page-template-tutorial-enviar-php .border {
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
}
body.page-template-tutorial-enviar-php .camera-notch {
  top: 22.34px;
  left: 155.62px;
  width: 43.69px;
  height: 5.04px;
}
body.page-template-tutorial-enviar-php .shadow-bottom {
  top: 584.34px;
  left: 51.67px;
  width: 251.05px;
  height: 40.75px;
}
body.page-template-tutorial-enviar-php .base-stand {
  top: 617.81px;
  left: 0;
  width: 354.39px;
  height: 10.19px;
}
body.page-template-tutorial-enviar-php .cta-container {
  max-width: 70%;
  margin: 0 auto;
  background-color: #000050;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 100px;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .picture-img {
  width: 100%;
  text-align: center;
}
body.page-template-tutorial-enviar-php .cta-image {
  width: 70%;
  height: auto;
  border-radius: 5px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
}
body.page-template-tutorial-enviar-php .cta-title {
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 28px;
  text-align: center;
}
body.page-template-tutorial-enviar-php .cta-description {
  color: #ffffff;
  font-weight: 300;
  font-size: 20px;
  line-height: 19px;
  text-align: center;
  max-width: 450px;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .cta-description strong {
  font-weight: 700;
}
body.page-template-tutorial-enviar-php .cta-description .regular-text {
  font-weight: 400;
}
body.page-template-tutorial-enviar-php .cta-button1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 332px;
  min-height: 58px;
  padding: 16px 24px;
  background: linear-gradient(353deg, #000050 0%, #4747d9 100%);
  border-radius: 31px !important;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.35);
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 19.36px;
  text-decoration: none;
  text-align: center;
}
@media (max-width: 375px) {
  body.page-template-tutorial-enviar-php .cta-container {
    padding-left: 21px;
    padding-right: 21px;
  }
}
@media (max-width: 576px) {
  body.page-template-tutorial-enviar-php .slide[data-slide="0"] {
    padding: 0;
    align-items: stretch;
  }
  body.page-template-tutorial-enviar-php .page-wrapper {
    min-height: 812px;
    border-radius: 0;
    box-shadow: none;
  }
  body.page-template-tutorial-enviar-php .hero-bg {
    width: 100%;
  }
  body.page-template-tutorial-enviar-php .hero-header {
    margin-top: 24px;
    padding: 0 20px;
  }
  body.page-template-tutorial-enviar-php .hero-section {
    flex: 0 0 45%;
  }
  body.page-template-tutorial-enviar-php .illustration-container {
    margin-top: -32px;
  }
  body.page-template-tutorial-enviar-php .info-section {
    flex: 0 0 55%;
    justify-content: flex-start;
    padding: 32px 20px;
  }
  body.page-template-tutorial-enviar-php .package-character {
    bottom: 0;
  }
  body.page-template-tutorial-enviar-php .package-character .img-part:nth-child(1) {
    width: 70%;
    display: block;
    margin: 0 auto;
  }
  body.page-template-tutorial-enviar-php .step-number-wrapper {
    width: 50px;
    height: 50px;
  }
  body.page-template-tutorial-enviar-php .step-title {
    font-size: 1.2rem;
  }
  body.page-template-tutorial-enviar-php .main-section {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-mockup {
    height: auto;
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-screen-content,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-screen-content,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-screen-content {
    width: 100%;
    height: auto;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-screen-content img {
    width: 100%;
    height: auto !important;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  body.page-template-tutorial-enviar-php .cta-container {
    max-width: 100%;
  }
  body.page-template-tutorial-enviar-php .cta-title {
    font-size: 20px;
    margin-top: 40px;
  }
  body.page-template-tutorial-enviar-php .cta-description {
    margin-top: 10px;
  }
  body.page-template-tutorial-enviar-php .cta-image {
    width: 100%;
  }
  body.page-template-tutorial-enviar-php .cta-button1 {
    margin-top: 40px;
  }
  body.page-template-tutorial-enviar-php .avion-img {
    position: absolute;
    top: 48%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: auto;
    z-index: 10;
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  body.page-template-tutorial-enviar-php .page-wrapper {
    max-width: 960px;
    min-height: 640px;
  }
  body.page-template-tutorial-enviar-php .cta-image {
    width: 60%;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"],
  body.page-template-tutorial-enviar-php .slide[data-slide="2"],
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] {
    position: relative;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-mockup {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-screen-content img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .picture-img {
    margin-bottom: 32px;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .cta-title {
    margin-top: 0;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .cta-description {
    margin-top: 8px;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .cta-button1 {
    margin-top: 24px;
  }
  body.page-template-tutorial-enviar-php .avion-img {
    position: absolute;
    top: 52%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: auto;
    z-index: 10;
    pointer-events: none;
  }
}
/* --- _paquetes.scss (MOBILE FIRST) --- */
/* 1. CLASES DE UTILIDAD PARA VISIBILIDAD */
.desktop-only {
  display: none !important;
}
.mobile-only {
  display: block;
}
/* === FONDO GRIS GENERAL === */
.dashboard .container-dashboard {
  background-color: #F5F5F9;
  padding: 0;
  height: 100vh !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;
}
/* 2. HEADER MÓVIL (Tus valores restaurados) */
.mobile-header-paquetes {
  display: flex;
  flex-direction: column;
  padding: 50px 25px 15px 25px;
  /* 3. TABS ESTILO CÁPSULA */
}
.mobile-header-paquetes .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
  margin-top: -10px;
  padding-bottom: 30px;
}
.mobile-header-paquetes .top-bar .back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.mobile-header-paquetes .top-bar .back-icon img {
  width: 24px;
  height: auto;
}
.mobile-header-paquetes .top-bar .mobile-title {
  font-family: "Inter", sans-serif;
  font-size: 19px;
  color: #333373;
  font-weight: 500;
  margin: 0;
  text-align: center;
}
.mobile-header-paquetes .top-bar .spacer {
  width: 30px;
}
.mobile-header-paquetes .mobile-tabs-capsule {
  display: flex;
  background-color: #E6E6EE;
  border-radius: 50px;
  margin-top: 0px;
  margin-bottom: -90px;
  width: 100%;
  position: relative;
  z-index: 10;
}
.mobile-header-paquetes .mobile-tabs-capsule .capsule-link {
  flex: 1;
  text-align: center;
  padding: 8.5px 0;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333373;
  border-radius: 50px;
  transition: all 0.3s ease;
  z-index: 1;
}
.mobile-header-paquetes .mobile-tabs-capsule .capsule-link.active {
  background-color: #050468;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}
.container-paquetes {
  width: 100%;
  font-family: "Inter", sans-serif;
  background-color: #FFFFFF;
  border-radius: 40px 40px 0 0;
  padding: 94px 20px;
  min-height: calc(100vh - 200px);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.02);
  /*  margin-top: 10px;  */
  position: relative;
  z-index: 1;
  /* === ESTILOS ESPECÍFICOS SOLO PARA LA VISTA DE DETALLE === */
  /* IMPORT CARD */
  /* EXPORT CARD */
  /*  (Flechas) */
}
.container-paquetes.view-mode-detail {
  margin-top: -72px;
  padding: 60px 20px 80px 20px;
}
.container-paquetes .cards-carousel-wrapper {
  overflow: visible;
  margin-bottom: 20px;
}
.container-paquetes .cards-grid.scroll-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-paquetes .cards-grid.scroll-grid .card-import,
.container-paquetes .cards-grid.scroll-grid .card-export {
  width: 100%;
  max-width: 100%;
  /*  margin: 0 auto; */
}
.container-paquetes .card {
  /*    max-height: 261px; */
  height: auto;
  border-radius: 15px;
  border: 1px solid #E6E6EE;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.container-paquetes .card .card-body {
  padding: 20px;
  flex-grow: 1;
}
.container-paquetes .card .card-footer {
  padding: 15px 16px;
  text-align: center;
}
.container-paquetes .card .card-footer .status-text {
  font-size: 14px;
  color: #0806AE;
  font-weight: 500;
  display: inline-block;
  /*   max-width: 299px; */
  width: 100%;
}
.container-paquetes .card-import {
  background-color: #FFFFFF;
}
.container-paquetes .card-import .card-header-images {
  padding: 6px 15px 0;
  height: 38px;
  margin-top: 10px;
  margin-bottom: 2px;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper {
  position: relative;
  height: 60px;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img {
  position: absolute;
  width: 86px;
  height: 64px;
  border-radius: 42px;
  border: 1.65px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  align-self: flex-start;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-3 {
  left: 120px;
  z-index: 3;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-2 {
  left: 60px;
  z-index: 2;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-1 {
  left: 0px;
  z-index: 1;
}
.container-paquetes .card-import .item-count {
  color: #333373;
  font-size: 14px;
  font-weight: 400;
  margin: 14px 0 5px 0;
}
.container-paquetes .card-import .info-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.container-paquetes .card-import .info-grid .label {
  font-size: 10px;
  color: #000019;
  margin-bottom: 4px;
}
.container-paquetes .card-import .info-grid .value {
  display: block;
  font-size: 16px;
  color: #0806AE;
  font-weight: 500;
}
.container-paquetes .card-import .card-footer {
  border-top: 1px solid #F0F0F0;
  min-height: 61px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.container-paquetes .card-export .card-footer {
  border-top: 1px solid #F0F0F0;
  min-height: 61px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.container-paquetes .card-export {
  background-color: #E9E9F0;
  border: none;
}
.container-paquetes .card-export .export-header {
  margin-bottom: 20px;
}
.container-paquetes .card-export .export-header .export-title {
  font-size: 16px;
  font-weight: 700;
  color: #333373;
  margin-bottom: 5px;
}
.container-paquetes .card-export .export-header .export-price {
  font-size: 16px;
  color: #000019;
}
.container-paquetes .card-export .export-header .export-price strong {
  font-weight: bold;
}
.container-paquetes .card-export .export-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.container-paquetes .card-export .export-details .detail-label {
  font-size: 14px;
  color: #666;
}
.container-paquetes .card-export .export-details .offers-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}
.container-paquetes .card-export .export-details .offers-badge .offers-count {
  color: #0806AE;
  font-weight: 700;
  font-size: 14px;
}
.container-paquetes .card-export .export-details .offers-badge .badge-dot {
  width: 6px;
  height: 6px;
  background-color: #FF5E5E;
  border-radius: 50%;
}
.container-paquetes .card-export .card-footer {
  border-top: 1px solid #DCDCDF;
}
.container-paquetes .route-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 0px -5px -1px;
}
.container-paquetes .route-display .flag-icon {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container-paquetes .route-display .arrow-line {
  flex-grow: 1;
  height: 2px;
  margin: 0 15px;
  position: relative;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(51, 51, 115, 0.1) 0%, #333373 100%);
}
.container-paquetes .route-display .arrow-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #333373;
}
/* ==========================================================================
   VISTA DE DETALLE DE PAQUETE 
   ========================================================================== */
/* Ajustamos el padding y borde superior del contenedor en modo detalle */
.container-paquetes.view-mode-detail {
  padding-top: 35px;
  background-color: #fff;
  border-radius: 40px 40px 0 0; /* Curva suave arriba */
  padding: 0;
}
@media (min-width: 768px) {
  .container-paquetes.view-mode-detail {
    padding: 14px 20px 80px 20px;
    background-color: transparent;
    margin-top: 20px;
  }
}
.detalle-paquete-container {
  animation: fadeIn 0.4s ease-in-out;
  /* Título "Artículos" */
  /* --- INFO PRINCIPAL --- */
  /* Separador Grueso */
}
.detalle-paquete-container .detail-top-header {
  margin-bottom: 20px;
}
.detalle-paquete-container .detail-top-header .page-title-mob,
.detalle-paquete-container .detail-top-header .page-title-desk {
  font-family: "Inter", sans-serif;
  color: #333373; /* Azul oscuro */
  font-weight: 700;
  margin-top: 25px;
  text-align: left; /* Alineado a la izquierda como en Figma */
}
.detalle-paquete-container .detail-top-header .page-title-mob {
  display: flex;
  font-size: 16px;
  padding: 35px 20px 10px;
}
.detalle-paquete-container .detail-top-header .page-title-desk {
  display: none;
}
@media (min-width: 768px) {
  .detalle-paquete-container .detail-top-header .page-title-desk {
    font-size: 23px;
    display: flex;
    margin-top: 30px;
  }
  .detalle-paquete-container .detail-top-header .page-title-mob {
    display: none;
  }
}
.detalle-paquete-container .package-main-info {
  display: flex;
  flex-direction: column; /* Apilado vertical en móvil */
  gap: 20px;
  margin-bottom: 30px;
  /* Cluster de Imágenes */
  /* Fechas y Precios */
  /* Botón Editar Centrado */
}
.detalle-paquete-container .package-main-info .images-cluster {
  position: relative;
  width: 140px;
  height: 80px;
  margin-bottom: 5px;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img {
  position: absolute;
  width: 86px;
  height: 64px;
  border-radius: 42px;
  border: 1.65px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  align-self: flex-start;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img.img-3 {
  left: 120px;
  z-index: 3;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img.img-2 {
  left: 60px;
  z-index: 2;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img.img-1 {
  left: 0px;
  z-index: 1;
}
.detalle-paquete-container .package-main-info .meta-data-row {
  display: flex;
  justify-content: space-between; /* Uno a cada extremo */
  width: 100%;
  align-items: flex-start;
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col {
  display: flex;
  flex-direction: column;
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col .label {
  font-size: 12px;
  color: #000019; /* Negro suave */
  margin-bottom: 5px;
  font-family: "Inter", sans-serif;
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col .value {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0806AE; /* Azul brillante */
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col .value.price {
  font-weight: 500;
  font-size: 16px;
}
.detalle-paquete-container .package-main-info .route-info {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Separados */
  width: 100%;
  margin-top: 10px;
}
.detalle-paquete-container .package-main-info .route-info .flag {
  width: 28px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.detalle-paquete-container .package-main-info .route-info .route-arrow-long {
  flex-grow: 1;
  height: 2px;
  margin: 0 15px;
  position: relative;
  background: linear-gradient(90deg, rgba(51, 51, 115, 0.1) 0%, #333373 100%);
  /* Punta de flecha */
}
.detalle-paquete-container .package-main-info .route-info .route-arrow-long::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid #333373;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.detalle-paquete-container .package-main-info .edit-action-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.detalle-paquete-container .package-main-info .edit-action-container .edit-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0806AE;
  font-weight: 500;
  text-decoration: none;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
  /* Ajuste visual icono */
}
.detalle-paquete-container .package-main-info .edit-action-container .edit-link svg {
  margin-bottom: -2px;
}
.detalle-paquete-container .package-main-info .edit-action-container .edit-link:hover {
  text-decoration: underline;
}
.detalle-paquete-container .separator-line-thick {
  width: 120%;
  margin-left: -10%;
  height: 10px;
  background-color: #F5F5F9;
  margin-bottom: 30px;
  display: none;
}
@media (min-width: 768px) {
  .detalle-paquete-container .separator-line-thick {
    display: flex;
  }
}
/* ==========================================================================
   SECCIÓN DE OFERTAS 
   ========================================================================== */
.offers-section {
  background-color: #E6E6EE;
  padding: 30px 14px 80px;
  /* Título */
  /* Controles (Solo visibles en Desktop) */
  /* === GRID DE OFERTAS (CONTENEDOR) === */
}
.offers-section .offers-title {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #333373;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.offers-section .carousel-controls {
  /* Por defecto ocultos en móvil si usas la clase .desktop-only en el HTML,
     pero aquí aseguramos estilos base por si acaso */
}
.offers-section .carousel-controls .nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E6E6EE;
  background: white;
  color: #333373;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  transition: all 0.2s;
}
.offers-section .carousel-controls .nav-btn:hover {
  background: #0806ae;
  color: white;
  border-color: #0806ae;
}
.offers-section .cards-grid.scroll-grid {
  /* 1. COMPORTAMIENTO MÓVIL (Vertical Stack) */
  display: flex;
  flex-direction: column; /* Apilados uno abajo del otro */
  gap: 20px;
  padding: 0; /* Sin padding lateral extra en móvil */
  overflow: visible; /* Scroll nativo de la página */
}
.offers-section .cards-grid.scroll-grid .offer-card {
  /* En móvil ocupan todo el ancho disponible */
  width: 100%;
  max-width: 100%;
  height: auto;
  /* Estilos Visuales Base */
  background: #fff;
  border: 1px solid #E6E6EE;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  /* Partes internas de la tarjeta (Anidación corregida) */
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top {
  padding: 20px;
  display: flex;
  /*  justify-content: space-between; */
  background-color: #FAFAFA;
  gap: 4%;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .label {
  font-size: 14px;
  color: #000019;
  margin-bottom: 5px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .value {
  font-size: 16px;
  color: #333;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .green-text {
  color: #27AE60;
  font-weight: 700;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .bold-text {
  font-weight: 700;
  font-family: "Rubik", sans-serif;
  color: #000;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .small-text {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom {
  padding: 15px 20px;
  border-top: 1px solid #E6E6EE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile .avatar-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile .avatar-circle img {
  width: 100%;
  height: 100%;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile .username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .rating {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .rating .star {
  color: #0806AE;
  font-size: 16px;
}
@media (min-width: 768px) {
  .offers-section {
    background-color: transparent;
  }
  .offers-section .offers-title {
    font-size: 23px;
    text-align: left;
  }
  .offers-section .cards-grid.scroll-grid {
    /* Cambiamos a horizontal */
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 20px; /* Espacio para la sombra */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .offers-section .cards-grid.scroll-grid::-webkit-scrollbar {
    display: none;
  }
  .offers-section .cards-grid.scroll-grid .offer-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 310px;
    margin-right: 0;
    scroll-snap-align: start;
    scroll-margin-left: 0;
  }
  .offers-section .cards-grid.scroll-grid .offer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  .offers-section .cards-grid.scroll-grid .offer-card .card-top {
    padding: 20px 13px;
  }
}
/* --- ADAPTACIÓN MÓVIL ESPECÍFICA --- */
@media (max-width: 768px) {
  .detalle-paquete-container .package-main-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 20px;
  }
  .detalle-paquete-container .package-main-info .meta-data-row {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
  }
  .detalle-paquete-container .package-main-info .meta-data-row .edit-link {
    width: 100%;
    margin-top: 5px;
  }
}
/* Animación de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   NAVEGACIÓN Y MODAL
   ========================================================================== */
/* 1. Flecha Regresar ) */
.detail-navigation {
  margin-bottom: 20px;
}
.detail-navigation .back-link-arrow {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Rubik", sans-serif;
  color: #000019;
  font-weight: 500;
  font-size: 16px;
}
.detail-navigation .back-link-arrow svg {
  transition: transform 0.2s;
}
.detail-navigation .back-link-arrow:hover svg {
  transform: translateX(-5px);
}
/* 2. MODAL DE EDICIÓN (Diseño Mobile First - Ajustado a Figma) */
.package-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  /* LISTA CON SCROLL */
  /* FILA DE ARTÍCULO */
  /* Botón Continuar */
}
.package-modal-overlay.show {
  opacity: 1;
}
.package-modal-overlay .modal-content-card {
  background: #fff;
  width: 90%;
  max-width: 340px; /* Ancho más controlado para parecerse a la imagen */
  border-radius: 20px;
  padding: 25px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none; /* Quitamos bordes extras si los hubiera */
}
.package-modal-overlay.show .modal-content-card {
  transform: translateY(0);
}
.package-modal-overlay .modal-title {
  font-family: "Rubik", sans-serif;
  font-size: 18px; /* Tamaño ajustado a imagen */
  color: #333373;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}
.package-modal-overlay .items-list-scroll {
  width: 100%;
  max-height: 40vh; /* Altura máxima cómoda en móvil */
  overflow-y: auto;
  margin-bottom: 10px;
  padding-right: 5px;
  /* Scrollbar fina */
}
.package-modal-overlay .items-list-scroll::-webkit-scrollbar {
  width: 4px;
}
.package-modal-overlay .items-list-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.package-modal-overlay .modal-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F0F0F5; /* Línea gris muy suave */
  /* Ícono Eliminar (Basurero Rojo) */
}
.package-modal-overlay .modal-item-row:last-child {
  border-bottom: none;
}
.package-modal-overlay .modal-item-row .item-thumb {
  width: 75px;
  height: 75px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px; /* Bordes un poco más cuadrados como en la imagen */
  border: 1px solid #eee;
}
.package-modal-overlay .modal-item-row .item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  gap: 4px;
}
.package-modal-overlay .modal-item-row .item-details .item-name {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #333373; /* Azul oscuro */
  font-weight: 700;
  line-height: 1.2;
}
.package-modal-overlay .modal-item-row .item-details .item-price {
  font-family: "Rubik", sans-serif; /* Precio también en Rubik según imagen */
  font-size: 16px;
  color: #0806AE; /* Azul brillante */
  font-weight: 500;
}
.package-modal-overlay .modal-item-row .btn-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px; /* Área de toque */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.package-modal-overlay .modal-item-row .btn-delete svg {
  stroke: #FF5E5E;
  width: 24px;
  height: 24px;
}
.package-modal-overlay .modal-item-row .btn-delete:hover {
  transform: scale(1.1);
}
.package-modal-overlay .modal-separator {
  width: 100%;
  height: 1px;
  background-color: #F0F0F5;
  margin-bottom: 20px;
}
.package-modal-overlay .btn-continue-modal {
  background-color: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px; /* Pill shape completo */
  padding: 12px 60px; /* Ancho generoso */
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
  transition: background-color 0.2s;
  max-width: 272px;
  width: 100%;
}
.package-modal-overlay .btn-continue-modal:active {
  transform: scale(0.98);
}
/* ==========================================================================
   ESTILOS MODAL DE CONFIRMACIÓN (HÍBRIDO)
   ========================================================================== */
.confirmation-card {
  max-width: 563px; /* Un poco más ancho para que quepa todo */
  max-height: 415px;
  width: 100%;
  height: 100%;
  border: none; /* Diseño limpio */
}
.confirmation-card .text-center {
  text-align: center;
}
.confirmation-card .sad-box-mobile {
  display: none;
}
.confirmation-card .modal-title {
  font-family: "Rubik", sans-serif;
  font-size: 24px;
  color: #333373;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  margin-left: 145px;
  margin-top: 40px;
}
.confirmation-card .confirmation-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
  /* Ilustración */
  /* Botones apilados */
}
.confirmation-card .confirmation-body .sad-box-illustration {
  flex: 0 0 auto;
}
.confirmation-card .confirmation-body .sad-box-illustration img {
  width: 184px;
  margin-left: 10px;
  height: 194px;
  -o-object-fit: contain;
     object-fit: contain;
}
.confirmation-card .confirmation-body .confirmation-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: -35px;
  flex-grow: 1;
  /* Botón Conservar */
  /* Botón Eliminar */
}
.confirmation-card .confirmation-body .confirmation-actions .btn-modal-action {
  width: 100%;
  padding: 12px 20px;
  border-radius: 50px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.confirmation-card .confirmation-body .confirmation-actions .btn-modal-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.confirmation-card .confirmation-body .confirmation-actions .btn-modal-action:active {
  transform: translateY(0);
}
.confirmation-card .confirmation-body .confirmation-actions .btn-keep {
  background-color: #1A1A80;
  color: white;
  width: 219px;
  height: 39px;
  align-self: anchor-center;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
}
.confirmation-card .confirmation-body .confirmation-actions .btn-confirm-delete {
  background-color: #1A1A80;
  color: white;
  width: 219px;
  height: 39px;
  align-self: anchor-center;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
  /* Si quisieras diferenciarlo: */
  /* background-color: #fff; color: #1A1A80; border: 2px solid #1A1A80; */
}
/* ==========================================================================
   MODO CRÍTICO 
   ========================================================================== */
.critical-icon-wrapper,
.critical-text {
  display: none !important;
}
.confirmation-card.is-critical {
  max-width: 563px !important;
  padding: 30px !important;
  /* --- TEXTO DE ADVERTENCIA  */
  /* --- BOTONES --- */
}
.confirmation-card.is-critical .modal-title {
  color: #333373 !important;
  margin-left: 145px !important;
  margin-top: 30px !important;
  margin-bottom: 5px !important;
  text-align: center !important;
  font-size: 24px;
  line-height: 1.2 !important;
  max-width: 350px;
}
.confirmation-card.is-critical .critical-text {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #666;
  text-align: center;
  line-height: 1.4;
  margin-left: 145px;
  margin-bottom: 10px;
  padding: 0 10px;
  max-width: 350px;
}
.confirmation-card.is-critical .sad-box-illustration {
  display: block !important;
}
.confirmation-card.is-critical .critical-icon-wrapper {
  display: none !important;
}
.confirmation-card.is-critical .confirmation-actions {
  margin-top: -35px !important;
}
.confirmation-card.is-critical .confirmation-actions .btn-keep,
.confirmation-card.is-critical .confirmation-actions .btn-confirm-delete {
  color: white !important;
  border: none !important;
  font-size: 16px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
/* RESPONSIVE: Ajuste para móvil en modo crítico */
@media (max-width: 480px) {
  .confirmation-card.is-critical .modal-title, .confirmation-card.is-critical .critical-text {
    margin-left: 0 !important;
  }
  .confirmation-card.is-critical .sad-box-illustration {
    margin-bottom: 15px;
  }
}
/* RESPONSIVE CONFIRMATION */
@media (max-width: 480px) {
  #confirmTitle {
    font-size: 18px;
    margin: auto;
  }
  .confirmation-card .confirmation-body {
    flex-direction: column; /* En móvil, imagen arriba, botones abajo */
    margin-top: 0;
    margin-top: 15px;
  }
  .confirmation-card .confirmation-body .sad-box-illustration img {
    width: 137.81px;
    height: 145px;
    display: none;
  }
  .confirmation-card .confirmation-body .confirmation-actions {
    width: 100%;
    padding-top: 28px;
  }
  .confirmation-card .sad-box-mobile {
    display: flex;
    width: 137.81px;
    height: 145px;
  }
}
/* === ANIMACIÓN GLOBAL DE ENTRADA SUAVE === */
.fade-in-animate {
  /* 'both' asegura que mantenga el estado inicial y final */
  animation: fadeInGlobal 0.4s ease-out both;
  margin-top: 20px;
  padding-bottom: 156px;
}
@keyframes fadeInGlobal {
  0% {
    opacity: 0;
    transform: translateY(10px); /* Ligero deslizamiento desde abajo */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   VISTA 3: ACEPTAR OFERTA & MODALES (FINAL PIXEL-PERFECT)
   ========================================================================== */
/* --- 1. CONTENEDOR PRINCIPAL --- */
.accept-offer-container {
  padding-top: 10px;
  animation: fadeIn 0.4s ease-in-out;
  /* --- COLUMNA IZQUIERDA (Info + Pagos) --- */
  /* Radio Buttons (Los Cuadritos) */
  /* Selector de Tarjeta (Dropdown Style) */
  /* Links Agregar/Pago Seguro */
  /* Alerta de Efectivo (Sirenita) */
  /* Desglose de Precios */
  /* --- COLUMNA DERECHA (Artículos) --- */
}
.accept-offer-container .text-center {
  text-align: center;
}
.accept-offer-container .mb-4 {
  margin-bottom: 30px;
}
.accept-offer-container .page-title {
  display: none;
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 23px;
  font-weight: 700;
}
.accept-offer-container .section-subtitle {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}
.accept-offer-container .accept-offer-grid {
  display: flex;
  flex-direction: column; /* Mobile First: Columna única */
  gap: 40px;
  padding: 0 10px;
}
.accept-offer-container .rider-info-card {
  background: #FCFCFC;
  border: none;
  border-radius: 0;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 10px;
  flex-direction: column;
}
.accept-offer-container .rider-info-card .rider-avatar {
  position: relative;
  width: 58px;
  height: 58px;
}
.accept-offer-container .rider-info-card .rider-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
}
.accept-offer-container .rider-info-card .rider-avatar .rating-badge-pill {
  position: absolute;
  bottom: -5px;
  right: -10px;
  background: #E6E6F7;
  color: #333373;
  border-radius: 100%;
  font-size: 12px;
  font-weight: bold;
  width: 27px;
  height: 27px;
  text-align: center;
  align-content: center;
}
.accept-offer-container .rider-info-card .rider-details {
  /*  font-size: 13px; */
}
.accept-offer-container .rider-info-card .rider-details .delivery-label {
  color: #333373;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  font-family: "Rubik", sans-serif;
}
.accept-offer-container .rider-info-card .rider-details .rider-name-date {
  color: #333373;
  margin: 2px 0 0 0;
  font-size: 17px;
  font-weight: bold;
}
.accept-offer-container .rider-info-card .rider-details .green-text {
  color: #27AE60;
  font-weight: 700;
  font-size: 17px;
}
.accept-offer-container .payment-options {
  display: flex;
  gap: 30px;
  margin-bottom: 15px;
}
.accept-offer-container .payment-options .radio-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  /* Círculo personalizado */
  /* Punto interior al seleccionar */
}
.accept-offer-container .payment-options .radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.accept-offer-container .payment-options .radio-container .radio-mark {
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #333373;
  border-radius: 50%;
  position: relative;
}
.accept-offer-container .payment-options .radio-container input:checked ~ .radio-mark:after {
  content: "";
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333373;
}
.accept-offer-container .payment-options .radio-container .radio-label {
  font-size: 16px;
  color: #333373;
  font-weight: 400;
  font-family: "Inter", sans-serif;
}
.accept-offer-container .card-selector-trigger {
  background-color: #fff;
  border: 1px solid #0806AE; /* Borde azul brillante */
  border-radius: 5px;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: 0px 4px 10px rgba(5, 4, 104, 0.05);
  transition: all 0.2s;
}
.accept-offer-container .card-selector-trigger:hover {
  background-color: #F8F8FF;
}
.accept-offer-container .card-selector-trigger .selected-card-info {
  display: flex;
  flex-direction: column;
}
.accept-offer-container .card-selector-trigger .selected-card-info .card-text {
  font-size: 13px;
  font-weight: 500;
  color: #000;
  font-family: "Inter", sans-serif;
}
.accept-offer-container .card-selector-trigger .selected-card-info .card-subtext {
  font-size: 13px;
  color: #000;
  font-family: "Inter", sans-serif;
  margin-top: 2px;
}
.accept-offer-container .card-selector-trigger .placeholder-text {
  font-size: 14px;
  color: #666;
}
.accept-offer-container .card-selector-trigger svg {
  height: auto;
}
.accept-offer-container .payment-actions-links {
  display: flex;
  gap: 62px;
  font-size: 13px;
  margin-bottom: 30px;
  justify-content: center;
}
.accept-offer-container .payment-actions-links svg {
  width: 27.38px;
  height: 24px;
}
.accept-offer-container .payment-actions-links .add-card-link {
  color: #0806AE;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.accept-offer-container .payment-actions-links .secure-payment {
  color: #333373;
  display: none;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 16px;
}
.accept-offer-container .cash-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.accept-offer-container .cash-warning-box .icon-wrapper {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.accept-offer-container .cash-warning-box .icon-wrapper img {
  width: 100%;
  height: 100%;
}
.accept-offer-container .cash-warning-box .warning-text {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: #000019;
  line-height: 1.4;
  margin: 0;
}
.accept-offer-container .price-breakdown {
  margin-bottom: 30px;
  margin: 0;
}
.accept-offer-container .price-breakdown .price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #000;
  font-weight: 500;
  max-width: 369px;
  width: 100%;
}
.accept-offer-container .price-breakdown .price-row span {
  font-size: 18px;
  color: #333373;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
}
.accept-offer-container .price-breakdown .price-row p {
  font-size: 16px;
  font-weight: 200;
}
.accept-offer-container .price-breakdown .price-row .red-value {
  color: #FF8179;
}
.accept-offer-container .price-breakdown .price-row.discount, .accept-offer-container .price-breakdown .price-row.code {
  color: #FF5E5E;
}
.accept-offer-container .price-breakdown .price-row.total {
  font-size: 16px;
  color: #333373;
  font-weight: 700;
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: 10px;
}
.accept-offer-container .price-breakdown .price-row.total .total-amount {
  color: #27AE60;
  font-size: 18px;
  font-weight: bold;
}
.accept-offer-container .btn-reserve-space {
  padding: 15px;
  background: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
  max-width: 355px;
  width: 100%;
  height: 58px;
  display: block;
  justify-self: center;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
.accept-offer-container .btn-reserve-space:hover {
  background: #0806AE;
  transform: translateY(-2px);
}
.accept-offer-container .secure-payment-mobile {
  color: #333373;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  justify-self: center;
  margin-top: 15px;
}
.accept-offer-container .right-column {
  display: none;
  /* Lista con scroll en móvil */
}
.accept-offer-container .right-column h3 {
  font-size: 22px;
}
.accept-offer-container .right-column .helper-text {
  display: flex;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.4;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile {
  max-height: 250px; /* Altura máxima en móvil */
  overflow-y: auto; /* Scroll vertical */
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile::-webkit-scrollbar {
  width: 4px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card img {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card .item-info {
  display: flex;
  flex-direction: column;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card .item-info .item-name {
  font-weight: 700;
  color: #333373;
  font-size: 14px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card .item-info .item-price {
  color: #0806AE;
  font-weight: 500;
  font-size: 14px;
}
/* --- 2. MODAL SELECCIONAR PAGO (Lista) --- */
.select-payment-card {
  position: relative;
  width: 100%;
  max-width: 800px !important;
  background-color: #fff;
  border: 2px solid #000050 !important;
  border-radius: 60px !important;
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.select-payment-card .modal-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
}
.select-payment-card .saved-methods-list {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}
.select-payment-card .saved-methods-list .method-option {
  background-color: #fff;
  border: 1px solid #0806AE;
  border-radius: 8px;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
  transition: background 0.2s;
}
.select-payment-card .saved-methods-list .method-option img {
  max-width: 12px;
}
.select-payment-card .saved-methods-list .method-option:hover {
  background-color: #F8F8FF;
}
.select-payment-card .saved-methods-list .method-option .method-info {
  display: flex;
  flex-direction: column;
}
.select-payment-card .saved-methods-list .method-option .method-info .method-name {
  color: #000019;
  font-size: 13px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
}
.select-payment-card .saved-methods-list .method-option .method-info .method-details {
  color: #000019;
  font-size: 13px;
  margin-top: 2px;
}
.select-payment-card .btn-continue-modal {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px;
  padding: 15px 40px;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  max-width: 355px;
  width: 100%;
}
/* --- 3. MODAL AGREGAR TARJETA (CORREGIDO DESKTOP/MOBILE) --- */
.add-card-ui {
  position: relative;
  width: 100%;
  max-width: 650px !important;
  background-color: #fff;
  border: 2px solid #000050 !important;
  border-radius: 60px !important;
  padding: 50px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  box-sizing: border-box;
}
.add-card-ui .modal-title-centered {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}
.add-card-ui .add-card-form-styled {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Estilo CAJA DE INPUT */
  /* FILA DIVIDIDA (Flex Corregido) */
}
.add-card-ui .add-card-form-styled .input-box {
  background-color: #ffffff;
  border: 1px solid #0806ae; /* Borde Azul */
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1); /* Sombra */
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 60px; /* Altura fija */
  width: 100%;
  box-sizing: border-box;
}
.add-card-ui .add-card-form-styled .input-box label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #000019;
  margin-bottom: 2px;
  white-space: nowrap;
}
.add-card-ui .add-card-form-styled .input-box input {
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  color: #333373;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  width: 100%;
}
.add-card-ui .add-card-form-styled .input-box input::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
.add-card-ui .add-card-form-styled .input-box input::placeholder {
  color: #aaa;
  font-weight: 300;
}
.add-card-ui .add-card-form-styled .form-row-split {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-direction: row;
}
.add-card-ui .add-card-form-styled .form-row-split .input-box {
  flex: 1;
  width: auto;
  min-width: 0;
}
.add-card-ui .add-card-form-styled .btn-save-card {
  margin-top: 20px;
  width: 100%;
  padding: 15px;
  background: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.3);
  transition: transform 0.2s;
}
.add-card-ui .add-card-form-styled .btn-save-card:hover {
  transform: translateY(-2px);
}
/* ==========================================================================
   DISEÑO MODAL PERFIL RIDER 
   ========================================================================== */
.rider-profile-card {
  width: 90%;
  max-width: 600px !important;
  background-color: #fff;
  border-radius: 25px !important;
  padding: 0 40px 40px 40px !important; /* Quitamos padding top para que suba */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  /* CLAVE PARA EL EFECTO POP-OUT */
  overflow: visible !important; /* Permite que la imagen salga */
  margin-top: 60px; /* Empujamos la tarjeta abajo para que quepa la cabeza */
  /* HEADER: Avatar y Nombre */
  /* ESTADÍSTICAS (Seguidores, etc) */
  /* INFO VIAJE */
  /* RATINGS BREAKDOWN (Estrellas) */
}
.rider-profile-card .profile-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  width: 100%;
}
.rider-profile-card .profile-header-center .avatar-ring-container {
  position: relative;
  width: 110px;
  height: 110px;
  margin-bottom: 15px;
  /* CLAVE: Margen negativo para subirlo */
  margin-top: -55px;
  background: #fff; /* Fondo blanco detrás por si acaso */
  border-radius: 50%;
  padding: 0;
  /* Sombra para que se vea elevado */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.rider-profile-card .profile-header-center .avatar-ring-container .modal-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid #fff;
  background: #fff;
  padding: 3px; /* Espacio entre foto y borde verde */
}
.rider-profile-card .profile-header-center .avatar-ring-container .rating-badge-circle {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: #E6E6EE;
  color: #333373;
  font-weight: 800;
  font-size: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Rubik", sans-serif;
  z-index: 2;
}
.rider-profile-card .profile-header-center .rider-name-title {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #333373;
  font-weight: 800;
  margin: 10px 0 0 0;
}
.rider-profile-card .rider-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}
.rider-profile-card .rider-stats-row .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}
.rider-profile-card .rider-stats-row .stat-item .stat-num {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #333373;
}
.rider-profile-card .rider-stats-row .stat-item .stat-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #333373;
  font-weight: 500;
}
.rider-profile-card .rider-stats-row .vertical-divider {
  width: 1px;
  height: 30px;
  background-color: #E6E6EE;
}
.rider-profile-card .trip-info-block {
  text-align: center;
  margin-bottom: 30px;
}
.rider-profile-card .trip-info-block .trip-label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #333373;
  margin-bottom: 2px;
  font-weight: 700;
}
.rider-profile-card .trip-info-block .trip-date {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #333373;
}
.rider-profile-card .ratings-breakdown-grid {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.rider-profile-card .ratings-breakdown-grid .rating-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.rider-profile-card .ratings-breakdown-grid .rating-category .stars {
  display: flex;
  gap: 3px;
}
.rider-profile-card .ratings-breakdown-grid .rating-category .cat-label {
  font-size: 12px;
  color: #666;
  font-family: "Inter", sans-serif;
  text-align: center;
}
/* === ADAPTACIÓN DESKTOP === */
@media (min-width: 768px) {
  .accept-offer-container .page-title {
    display: block;
    margin-top: 46px;
    margin-bottom: 48px;
  }
  .accept-offer-container .accept-offer-grid {
    display: flex;
    flex-direction: row; /* Pone las columnas una al lado de la otra */
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px; /* Separación amplia como en Figma */
    /* Columna Izquierda (Pagos) */
    /* Columna Derecha (Artículos) */
  }
  .accept-offer-container .accept-offer-grid .left-column {
    flex: 1;
    max-width: 452px;
    width: auto;
  }
  .accept-offer-container .accept-offer-grid .left-column .rider-info-card {
    border: 1px solid #E6E6EE;
    flex-direction: row;
    border-radius: 12px;
    padding: 9px 43px;
    gap: 40px;
  }
  .accept-offer-container .accept-offer-grid .left-column .rider-info-card .rider-avatar img {
    width: 50px;
    height: 50px;
  }
  .accept-offer-container .accept-offer-grid .left-column .payment-section {
    max-width: 405px;
    margin: auto;
    width: 100%;
  }
  .accept-offer-container .accept-offer-grid .left-column .payment-section .secure-payment {
    display: flex;
  }
  .accept-offer-container .accept-offer-grid .left-column .price-breakdown {
    max-width: 405px;
    margin: auto;
    width: 100%;
  }
  .accept-offer-container .accept-offer-grid .right-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 450px;
    width: auto;
    margin-top: 0;
  }
  .accept-offer-container .accept-offer-grid .right-column .items-list-summary.scrollable-mobile {
    max-height: none;
    overflow-y: visible;
  }
  .accept-offer-container .btn-reserve-space {
    max-width: 382px;
    width: 100%;
  }
  .accept-offer-container .secure-payment-mobile {
    display: none;
  }
}
/* === RESPONSIVE MODALES MÓVIL === */
@media (max-width: 768px) {
  /* Modales pegados abajo en móvil */
  .select-payment-card, .add-card-ui {
    border-radius: 60px 60px 0 0 !important;
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    max-width: 100% !important;
    padding: 40px 20px !important;
    border: none !important;
  }
  .add-card-ui .add-card-form-styled .form-row-split {
    gap: 15px;
  }
}
/* ==========================================================================
   UTILIDAD GLOBAL: OCULTAR BARRAS DE SCROLL 
   ========================================================================== */
/* 1. Contenedor Principal del Dashboard */
.dashboard .container-dashboard {
  -ms-overflow-style: none;
  overflow-x: hidden !important;
  scrollbar-width: none;
}
.dashboard .container-dashboard::-webkit-scrollbar {
  display: none;
}
/* 2. Listas de Artículos (Móvil y Modales) */
.items-list-summary.scrollable-mobile,
.items-list-scroll,
.saved-methods-list,
.payment-methods-list,
.address-list,
.personal-info-form {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.items-list-summary.scrollable-mobile::-webkit-scrollbar,
.items-list-scroll::-webkit-scrollbar,
.saved-methods-list::-webkit-scrollbar,
.payment-methods-list::-webkit-scrollbar,
.address-list::-webkit-scrollbar,
.personal-info-form::-webkit-scrollbar {
  display: none;
}
/* 3. Carruseles Horizontales */
.cards-grid.scroll-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cards-grid.scroll-grid::-webkit-scrollbar {
  display: none;
}
/* 4. Asegurar que cualquier contenedor con scroll en móvil no muestre la barra */
@media (max-width: 768px) {
  * {
    scrollbar-width: none;
  }
  .container-paquetes,
  .accept-offer-container,
  .detalle-paquete-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .container-paquetes::-webkit-scrollbar,
  .accept-offer-container::-webkit-scrollbar,
  .detalle-paquete-container::-webkit-scrollbar {
    display: none;
  }
  .container-paquetes .section-header-wrapper {
    margin-top: 20px;
  }
}
/* ==========================================================================
   VISTA 4: PEDIDO CONFIRMADO (SUCCESS PAGE - MOBILE FIRST AJUSTADO)
   ========================================================================== */
.order-success-container {
  width: 100%;
  min-height: calc(100vh - 100px);
  padding: 0px 20px 60px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* Tarjeta de Dirección */
  /* Botones de Acción */
}
.order-success-container .happy-box-illustration {
  order: -1;
  margin-top: 10px;
  margin-bottom: 35px;
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.order-success-container .happy-box-illustration img {
  width: 180px;
  height: auto;
  animation: bounce 2s infinite;
  margin-top: -25px;
  margin-bottom: -30px;
}
.order-success-container .success-content-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  padding-bottom: 35px;
}
.order-success-container .success-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 15px;
  width: 100%;
  text-align: justify;
}
.order-success-container .success-title .highlight {
  color: #333373;
  font-weight: 800;
}
.order-success-container .address-instruction {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #000019;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  font-weight: 400;
}
.order-success-container .shipping-address-card {
  width: 100%;
  max-width: 340px;
  background: #fff;
  margin-bottom: 20px;
}
.order-success-container .shipping-address-card .address-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 5px;
}
.order-success-container .shipping-address-card .address-row:last-child {
  border-bottom: none;
}
.order-success-container .shipping-address-card .address-row .addr-label {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
  text-align: left;
  width: 40%;
}
.order-success-container .shipping-address-card .address-row .addr-value {
  color: #555;
  font-family: "Inter", sans-serif;
  text-align: right;
  font-size: 16px;
  font-weight: 300;
  width: 60%;
  word-break: break-word;
}
.order-success-container .copy-link {
  font-family: "Rubik", sans-serif;
  color: #0806AE;
  font-size: 16px;
  text-decoration: none;
  font-weight: 400;
  display: inline-block;
  padding: 10px;
  margin-top: -20px;
  margin-bottom: 10px;
}
.order-success-container .copy-link:active {
  opacity: 0.7;
}
.order-success-container .success-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 356px;
}
.order-success-container .success-actions .btn-action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s;
  box-sizing: border-box;
}
.order-success-container .success-actions .btn-action.btn-outline {
  border: 1px solid #0806AE;
  color: #0806AE;
  background: #F5F5F5;
}
.order-success-container .success-actions .btn-action.btn-outline:active {
  background: #F5F5FF;
}
.order-success-container .success-actions .btn-action.btn-filled {
  background: #F5F5F5;
  border: 1px solid #0806AE;
  color: #0806AE;
}
.order-success-container .success-actions .btn-action.btn-filled:active {
  background: #E0E0E5;
}
.order-success-container .success-actions .link-home {
  font-family: "Inter", sans-serif;
  color: #0806AE;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  margin-top: -2px;
}
/* Animación de rebote suave */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (min-width: 768px) {
  .order-success-container {
    padding-top: 80px;
    max-width: 1000px;
    margin: 0 auto;
    display: block; /* Importante: Volvemos a bloque en desktop */
    /* Cajita Feliz: FLOTA A LA DERECHA en pantallas grandes */
  }
  .order-success-container .success-content-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }
  .order-success-container .success-title {
    text-align: center;
    margin-bottom: 12px;
  }
  .order-success-container .shipping-address-card {
    max-width: 400px;
    background: transparent;
    border: none;
    position: relative;
    right: -18px;
  }
  .order-success-container .shipping-address-card .address-row {
    border-bottom: none;
  }
  .order-success-container .shipping-address-card .address-row .addr-value {
    text-align: left;
  }
  .order-success-container .happy-box-illustration {
    /* En desktop ya no aplica el 'order', usamos posición absoluta */
    position: absolute;
    right: 50px;
    bottom: 50px;
    margin-top: 0;
    margin-bottom: 0; /* Reseteamos el margen móvil */
    width: auto;
    justify-content: flex-end;
  }
  .order-success-container .happy-box-illustration img {
    width: 200px;
  }
}
/* ==========================================================================
   TOAST NOTIFICATION (Mensaje Flotante - Versión Superior)
   ========================================================================== */
.toast-notification {
  visibility: hidden;
  min-width: 250px;
  background-color: #333373;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 13px 20px;
  position: fixed;
  z-index: 9999; /* Muy alto para que flote sobre el header */
  left: 50%;
  /* CAMBIO: Posición inicial arriba */
  top: 30px;
  transform: translateX(-50%);
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  /* CAMBIO: Animamos 'top' en lugar de 'bottom' */
  transition: opacity 0.3s, top 0.3s;
}
/* Estado visible */
.toast-notification.show {
  visibility: visible;
  opacity: 1;
  top: 50px;
  display: sticky;
  z-index: 40;
}
@media (min-width: 1400px) {
  .order-success-container .happy-box-illustration {
    right: 0;
  }
  .order-success-container .happy-box-illustration img {
    width: 250px;
  }
}
/* ==========================================================================
   === ESTILOS VISTA SEGUIMIENTO  === 
   ========================================================================== */
.seguimiento-container {
  padding-top: 20px;
  max-width: 900px;
  margin: 0 auto;
  /* 1. MAGIA FLEXBOX: Convertimos el contenedor en columna para reordenar */
  display: flex;
  flex-direction: column;
  /* Asignamos un orden base para Móvil */
  /* ¡Los botones se van al FONDO en móvil! */
  /* --- HEADER (Imágenes + Fechas) --- */
  /* --- BOTONES DE CONTACTO (Rider / Dirección) --- */
  /* =========================================================
     === NUEVO STEPPER INTEGRADO (MOBILE FIRST) ===
  ========================================================= */
  /* --- ADAPTACIÓN DESKTOP (STEPPER HORIZONTAL Y ORDEN ORIGINAL) --- */
}
.seguimiento-container .page-title {
  order: 1;
}
.seguimiento-container .tracking-header-card {
  order: 2;
}
.seguimiento-container .stepper-main-container {
  order: 3;
}
.seguimiento-container .success-box, .seguimiento-container .review-box {
  order: 4;
}
.seguimiento-container .rider-actions-row {
  order: 5;
}
.seguimiento-container .page-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}
.seguimiento-container .tracking-header-card {
  display: flex;
  align-items: center;
  gap: 55px;
  margin-bottom: 30px;
}
.seguimiento-container .tracking-header-card .images-cluster-small {
  position: relative;
  width: 100px;
  height: 60px;
}
.seguimiento-container .tracking-header-card .images-cluster-small .circle-img {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.2s ease, z-index 0s;
}
.seguimiento-container .tracking-header-card .images-cluster-small .circle-img:hover {
  transform: scale(1.15);
  z-index: 100 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.seguimiento-container .tracking-header-card .deadline-info .label {
  font-size: 13px;
  color: #333;
  margin: 0;
}
.seguimiento-container .tracking-header-card .deadline-info .value-date {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #333373;
  margin: 5px 0 0 0;
}
.seguimiento-container .rider-actions-row {
  display: flex;
  flex-direction: column; /* Apilados verticalmente en móvil */
  gap: 15px;
  margin-top: 20px; /* Separación del contenido de arriba */
  margin-bottom: 40px;
  width: 100%;
}
.seguimiento-container .rider-actions-row .btn-action {
  width: 100%; /* Ocupan todo el ancho en móvil */
  padding: 16px 20px; /* Un poco más de padding vertical */
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  font-size: 14px; /* Letra un poco más grande */
  font-weight: 700; /* Letra más gruesa */
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}
.seguimiento-container .rider-actions-row .btn-action.btn-outline {
  border: 1px solid #333373;
  color: #333373;
  background: transparent;
}
.seguimiento-container .rider-actions-row .btn-action:hover {
  background: #F5F5FF;
  transform: translateY(-2px);
}
.seguimiento-container .stepper-main-container {
  display: flex;
  flex-direction: column; /* Móvil: Vertical */
  position: relative;
  margin-bottom: 40px;
  padding-left: 10px;
  /* GRUPO DE PASO (Icono + Texto + Acciones) */
}
.seguimiento-container .stepper-main-container .step-group {
  position: relative;
  /* CABECERA DEL PASO */
  /* CONTENIDO ANIDADO (Botones y Links) */
  /* LÍNEA CONECTORA VERTICAL */
  /* --- ESTADOS DE COLOR --- */
}
.seguimiento-container .stepper-main-container .step-group .step-header {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}
.seguimiento-container .stepper-main-container .step-group .step-header .step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F2F2F5;
  color: #9EA0A5;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #fff;
  transition: all 0.3s ease;
}
.seguimiento-container .stepper-main-container .step-group .step-header .step-label {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #9EA0A5;
  line-height: 1.2;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper {
  padding-left: 47px; /* Alineado bajo el texto */
  padding-bottom: 30px;
  position: relative;
  /* Botones de Acción (Tus estilos exactos) */
  /* Enlaces de texto (Ver factura, fotos) */
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 20px;
  border-radius: 28px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 14px;
  width: 213px;
  height: 40px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
  text-align: center;
  transition: transform 0.2s;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.primary {
  max-width: auto;
  width: 80%;
  background-color: #1A1A80;
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(26, 26, 128, 0.2);
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.secondary {
  max-width: auto;
  width: 80%;
  background-color: #F8F8FA;
  color: #333373;
  border: 1px solid #333373;
  margin-left: 5px;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.outline {
  max-width: auto;
  width: 80%;
  background-color: #F8F8FA;
  color: #333373;
  border: 1px solid #333373;
  margin-right: 10px;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action:active {
  transform: scale(0.98);
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .link-step-action {
  display: inline-block;
  margin-top: 8px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: #0806AE;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .warning-text-small {
  font-size: 13px;
  color: #E67E22;
  margin-top: 8px;
  font-weight: 500;
}
.seguimiento-container .stepper-main-container .step-group .step-connector {
  position: absolute;
  top: 32px;
  left: 16px;
  width: 2px;
  height: calc(100% - 32px);
  background-color: #E6E6EE;
  z-index: 1;
}
.seguimiento-container .stepper-main-container .step-group:last-child .step-connector {
  display: none;
}
.seguimiento-container .stepper-main-container .step-group:last-child .step-content-wrapper {
  padding-bottom: 0;
}
.seguimiento-container .stepper-main-container .step-group.completed .step-icon {
  background-color: #27AE60;
  color: white;
}
.seguimiento-container .stepper-main-container .step-group.completed .step-label {
  color: #27AE60;
  font-weight: 600;
}
.seguimiento-container .stepper-main-container .step-group.completed .step-connector {
  background-color: #27AE60;
}
.seguimiento-container .stepper-main-container .step-group.active-neutral .step-icon {
  background-color: #333373;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(51, 51, 115, 0.1);
}
.seguimiento-container .stepper-main-container .step-group.active-neutral .step-label {
  color: #333373;
  font-weight: 700;
}
.seguimiento-container .stepper-main-container .step-group.active-warning .step-icon {
  background-color: #F2994A;
  color: white;
  animation: pulseWarning 2s infinite;
}
.seguimiento-container .stepper-main-container .step-group.active-warning .step-label {
  color: #F2994A;
  font-weight: 700;
}
.seguimiento-container .stepper-main-container .step-group.active-danger .step-icon {
  background-color: #EB5757;
  color: white;
}
.seguimiento-container .stepper-main-container .step-group.active-danger .step-label {
  color: #EB5757;
  font-weight: 700;
}
@media (min-width: 992px) {
  .seguimiento-container {
    /* Revertimos el orden para Desktop */
  }
  .seguimiento-container .stepper-main-container {
    order: 4;
  }
  .seguimiento-container .success-box, .seguimiento-container .review-box {
    order: 5;
  }
  .seguimiento-container .rider-actions-row {
    order: 3; /* Los botones suben debajo del header */
    flex-direction: row; /* Uno al lado del otro */
    margin-top: 0;
    margin-bottom: 50px;
  }
  .seguimiento-container .rider-actions-row .btn-action {
    flex: 1;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    width: auto;
  }
  .seguimiento-container .stepper-main-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 0;
    margin-top: 50px;
    gap: 0;
  }
  .seguimiento-container .stepper-main-container .step-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
    /* Header Vertical en Desktop */
    /* Contenido Flotante */
    /* Línea Horizontal  */
  }
  .seguimiento-container .stepper-main-container .step-group .step-header {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    width: 100%;
  }
  .seguimiento-container .stepper-main-container .step-group .step-header .step-label {
    max-width: 120px;
    font-size: 14px;
    margin: 0 auto;
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper {
    padding-left: 0;
    padding-top: 15px;
    border-left: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action {
    width: auto;
    min-width: 160px;
    padding: 10px 20px;
    font-size: 13px;
    margin-top: 5px;
    /* Reseteamos los anchos de móvil */
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.primary, .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.secondary, .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.outline {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action:hover {
    transform: translateY(-3px);
  }
  .seguimiento-container .stepper-main-container .step-group .step-connector {
    display: none;
  }
  .seguimiento-container .stepper-main-container .step-group::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #E6E6EE;
    z-index: 0;
  }
  .seguimiento-container .stepper-main-container .step-group:last-child::after {
    display: none;
  }
  .seguimiento-container .stepper-main-container .step-group.completed::after {
    background-color: #27AE60;
  }
}
@keyframes pulseWarning {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 153, 74, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(242, 153, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 153, 74, 0);
  }
}
/* Boton review  */
.review-box .btn-action-primary {
  padding: 15px;
  background: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
  max-width: 355px;
  width: 100%;
  height: 58px;
  display: block;
  justify-self: center;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
/* ==========================================================================
   === MODALES (DIRECCIÓN, CARGA, CONFIRMACIÓN, ) === 
   ========================================================================== */
.package-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* TARJETA BASE */
}
.package-modal-overlay.show {
  opacity: 1;
}
.package-modal-overlay .modal-content-card {
  background: #fff;
  border-radius: 32px;
  padding: 40px 30px;
  width: 90%;
  max-width: 700px;
  position: absolute;
  border: 1px solid #333373;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease-out;
  /* --- LAYOUT DIRECCIÓN (FIGMA) --- */
  /* --- LAYOUT SUCCESS (FIGMA) --- */
}
.package-modal-overlay .modal-content-card .btn-close-corner {
  position: absolute;
  top: 25px;
  left: 25px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333373;
  transition: transform 0.2s;
}
.package-modal-overlay .modal-content-card .btn-close-corner:hover {
  transform: scale(1.1);
}
.package-modal-overlay .modal-content-card.modal-address-layout {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}
@media (min-width: 768px) {
  .package-modal-overlay .modal-content-card.modal-address-layout {
    flex-direction: row;
    align-items: flex-start;
    padding: 50px;
  }
  .package-modal-overlay .modal-content-card.modal-address-layout .modal-illustration-side {
    width: 40%;
  }
  .package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side {
    width: 60%;
  }
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-illustration-side {
  display: flex;
  justify-content: center;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-illustration-side .illustration-img {
  width: 100%;
  max-width: 205px;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: 112px;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side {
  width: 60%;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .modal-title-left {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 5px 0;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .modal-subtitle-left {
  font-family: "Inter", sans-serif;
  color: #666;
  font-size: 14px;
  margin: 0 0 25px 0;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 30px;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid .data-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid .data-row .d-label {
  font-weight: 700;
  color: #111;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid .data-row .d-value {
  color: #555;
  text-align: right;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .btn-copy-address {
  width: 100%;
  left: -110px;
  position: relative;
  padding: 14px;
  border: 1px solid #333373;
  background: #fff;
  color: #333373;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .btn-copy-address:hover {
  background: #f4f4fa;
  transform: translateY(-2px);
}
.package-modal-overlay .modal-content-card.modal-success-layout {
  text-align: center;
  max-width: 500px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .success-illustration-wrapper {
  margin-bottom: 25px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .success-illustration-wrapper img {
  max-width: 160px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .modal-title-center {
  font-family: "Rubik", sans-serif;
  color: #1A1A80;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .modal-text-center {
  color: #333373;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 35px;
  padding: 0 20px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .btn-modal-primary {
  background: #1A1A80;
  color: white;
  border: none;
  padding: 16px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  font-family: "Rubik", sans-serif;
  box-shadow: 0 8px 20px rgba(26, 26, 128, 0.25);
}
.package-modal-overlay .modal-content-card.modal-success-layout .btn-modal-primary:hover {
  background: #2b2b95;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .package-modal-overlay .modal-content-card {
    /* position: relative; */
    border-radius: 32px 32px 0 0;
    border: none;
    bottom: 0;
    width: 100%;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* --- Modal review detallada --- */
/* --- LAYOUT SELECCIÓN ENTREGA (FASE 4) --- */
.delivery-selection-card {
  max-width: 500px !important;
  padding: 50px 40px !important;
}
.delivery-selection-card .custom-radio-label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  cursor: pointer;
  position: relative;
  /* ESTADO SELECCIONADO */
}
.delivery-selection-card .custom-radio-label input[type=radio] {
  display: none; /* Ocultamos el input nativo */
}
.delivery-selection-card .custom-radio-label .radio-circle {
  width: 22px;
  height: 22px;
  border: 2px solid #333373; /* Borde azul normal */
  border-radius: 50%;
  position: relative;
  transition: all 0.2s;
  /* Punto interior cuando está seleccionado */
}
.delivery-selection-card .custom-radio-label .radio-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1A1A80;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.delivery-selection-card .custom-radio-label .radio-text {
  color: #4A4A68;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s;
}
.delivery-selection-card .custom-radio-label input[type=radio]:checked ~ .radio-circle {
  border-color: #1A1A80;
}
.delivery-selection-card .custom-radio-label input[type=radio]:checked ~ .radio-circle::after {
  transform: translate(-50%, -50%) scale(1);
}
.delivery-selection-card .custom-radio-label input[type=radio]:checked ~ .radio-text {
  color: #1A1A80;
  font-weight: 600;
}
/* --- LAYOUT TRACKING FINAL --- */
.tracking-delivery-card {
  padding: 60px 40px 40px 40px !important;
}
/* --- Modal Review --- */
.review-premium-card {
  max-width: 850px !important;
  width: 90%;
  border-radius: 60px !important;
  padding: 40px 60px !important;
  background: #fff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  /* Ajuste para pantallas más pequeñas (Móviles/Tablets) */
}
.review-premium-card .review-top-layout {
  display: flex;
  justify-content: space-between; /* Esto empuja automáticamente uno a la izq y otro a la der */
  align-items: center;
  margin-bottom: 40px;
  width: 100%;
  /* Carrusell de imágenes apiladas */
}
.review-premium-card .review-top-layout .rider-profile-mini {
  display: flex;
  align-items: center;
  gap: 20px;
  /* ELIMINAMOS position: absolute y left: 50px; */
}
.review-premium-card .review-top-layout .rider-profile-mini .avatar-wrapper img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #FFF9E7;
  -o-object-fit: cover;
     object-fit: cover; /* Mantiene la imagen sin deformarse */
}
.review-premium-card .review-top-layout .rider-profile-mini .rider-info h3 {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}
.review-premium-card .review-top-layout .rider-profile-mini .rider-info .btn-follow-lite {
  margin-top: 8px;
  padding: 5px 25px;
  border: 1.5px solid #333373;
  border-radius: 20px;
  background: transparent;
  color: #333373;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.review-premium-card .review-top-layout .rider-profile-mini .rider-info .btn-follow-lite:hover {
  background: #333373;
  color: #fff;
}
.review-premium-card .review-top-layout .package-images-preview {
  display: flex;
  /* ELIMINAMOS margin-left: 200px; */
}
.review-premium-card .review-top-layout .package-images-preview .img-stack {
  width: 130px;
  height: 130px;
  margin-left: -40px;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid #000;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.review-premium-card .review-top-layout .package-images-preview .img-stack img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.review-premium-card .review-top-layout .package-images-preview .img-stack:first-child {
  margin-left: 0;
}
.review-premium-card .review-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  text-align: left;
}
.review-premium-card .review-main-grid .section-title {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  color: #333373;
  font-weight: 800;
  margin-bottom: 25px;
}
.review-premium-card .review-main-grid .eval-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.review-premium-card .review-main-grid .eval-row span {
  color: #666;
  font-size: 15px;
}
.review-premium-card .review-main-grid .eval-row .stars-eval {
  display: flex;
  flex-direction: row-reverse;
}
.review-premium-card .review-main-grid .eval-row .stars-eval input {
  display: none;
}
.review-premium-card .review-main-grid .eval-row .stars-eval label {
  font-size: 24px;
  color: #E6E6EE;
  cursor: pointer;
  margin-left: 5px;
  transition: color 0.2s;
}
.review-premium-card .review-main-grid .eval-row .stars-eval input:checked ~ label, .review-premium-card .review-main-grid .eval-row .stars-eval label:hover, .review-premium-card .review-main-grid .eval-row .stars-eval label:hover ~ label {
  color: #0806AE;
}
.review-premium-card .review-main-grid .recommendation-area {
  margin-top: 30px;
  text-align: center;
}
.review-premium-card .review-main-grid .recommendation-area p {
  color: #333373;
  font-weight: 700;
  margin-bottom: 15px;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group .btn-thumb {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group .btn-thumb img {
  width: 35px;
  opacity: 0.6;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group .btn-thumb.active img {
  opacity: 1;
  transform: scale(1.2);
}
.review-premium-card .review-main-grid .right-comment-col textarea {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #E6E6EE;
  padding: 15px;
  font-size: 14px;
  margin-bottom: 40px;
  resize: none; /* Evita que rompan el diseño arrastrando la caja */
}
.review-premium-card .review-main-grid .right-comment-col textarea::-moz-placeholder {
  color: #999;
}
.review-premium-card .review-main-grid .right-comment-col textarea::placeholder {
  color: #999;
}
.review-premium-card .review-main-grid .right-comment-col textarea:focus {
  outline: none;
  border-color: #1A1A80;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-send-blue {
  width: 250px;
  padding: 15px;
  background: #1A1A80;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(26, 26, 128, 0.3);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-send-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(26, 26, 128, 0.4);
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-omit-text {
  background: none;
  border: none;
  color: #333373;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-omit-text:hover {
  text-decoration: underline;
}
@media (max-width: 800px) {
  .review-premium-card {
    padding: 30px !important;
    border-radius: 30px !important;
  }
  .review-premium-card .review-top-layout {
    flex-direction: column;
    gap: 30px;
  }
  .review-premium-card .review-top-layout .package-images-preview {
    margin: 0 auto;
  }
  .review-premium-card .review-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.unified-thanks-card {
  max-width: 650px !important;
  padding: 40px 45px !important;
  border-radius: 30px !important;
  background: #fff !important;
  /* --- Responsivo para Celulares --- */
}
.unified-thanks-card .unified-thanks-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 30px !important;
}
.unified-thanks-card .unified-thanks-layout .illustration-side {
  flex: 0 0 40% !important;
  text-align: center !important;
}
.unified-thanks-card .unified-thanks-layout .illustration-side img {
  width: 100% !important;
  max-width: 220px !important;
  display: block !important;
  margin: 0 auto !important;
}
.unified-thanks-card .unified-thanks-layout .text-side {
  flex: 1 1 60% !important;
  text-align: left !important;
  width: 100% !important;
}
.unified-thanks-card .unified-thanks-layout .text-side h3 {
  font-family: "Rubik", sans-serif !important;
  color: #1A1A80 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
.unified-thanks-card .unified-thanks-layout .text-side p {
  color: #666 !important;
  font-size: 15px !important;
  margin-bottom: 25px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.unified-thanks-card .unified-thanks-layout .text-side .btn-send-blue {
  width: 100% !important;
  padding: 15px !important;
  border-radius: 50px !important;
  background: #1A1A80 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.25) !important;
}
@media (max-width: 600px) {
  .unified-thanks-card {
    padding: 35px 20px !important;
  }
  .unified-thanks-card .unified-thanks-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .unified-thanks-card .unified-thanks-layout .illustration-side {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .unified-thanks-card .unified-thanks-layout .illustration-side img {
    max-width: 150px !important;
  }
  .unified-thanks-card .unified-thanks-layout .text-side {
    text-align: center !important;
  }
  .unified-thanks-card .unified-thanks-layout .text-side h3 {
    font-size: 20px !important;
    text-align: center !important;
  }
  .unified-thanks-card .unified-thanks-layout .text-side p {
    text-align: center !important;
  }
}
/* --- TARJETAS DE DIRECCIONES GUARDADAS --- */
.saved-address-card {
  display: block;
  border: 1px solid #E6E6EE;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  /* ESTADO SELECCIONADO */
}
.saved-address-card input[type=radio] {
  display: none;
}
.saved-address-card .address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.saved-address-card .address-header .address-title {
  font-weight: 700;
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-size: 15px;
}
.saved-address-card .address-header .address-price {
  color: #27AE60;
  font-weight: 700;
  font-size: 14px;
}
.saved-address-card .address-body {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}
.saved-address-card.selected {
  border-color: #1A1A80;
  background: #FAFAFC;
  box-shadow: 0 4px 10px rgba(26, 26, 128, 0.05);
}
.btn-add-new-address {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px dashed #333373;
  border-radius: 12px;
  color: #333373;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 5px;
}
.btn-add-new-address:hover {
  background: #F5F5FF;
}
/* --- TABS MÉTODO DE PAGO --- */
.payment-method-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.payment-method-tabs .pay-tab {
  flex: 1;
  text-align: center;
  padding: 12px 5px;
  background: #FAFAFC;
  border: 1px solid #E6E6EE;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}
.payment-method-tabs .pay-tab input[type=radio] {
  display: none;
}
.payment-method-tabs .pay-tab.active {
  background: #F0F0FF;
  border-color: #1A1A80;
  color: #1A1A80;
}
/* =======================================================
   === MODAL DE PAGO (2 COLUMNAS - DISEÑO FIGMA) ===
   ======================================================= */
.checkout-twocolumn-card {
  max-width: 650px !important;
  padding: 35px 40px !important;
  border-radius: 20px !important;
  background: #fff;
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
/* --- COLUMNA IZQUIERDA --- */
.delivery-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.delivery-title {
  color: #1A1A80;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.delivery-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0 0 2px 0;
}
.delivery-date {
  color: #1A1A80;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.box-mascot-img {
  width: 80px;
  height: auto;
}
.divider-line {
  border: none;
  border-top: 1px solid #E6E6EE;
  margin: 20px 0;
}
.payment-section-title {
  color: #1A1A80;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 15px 0;
}
/* Radio Buttons */
.payment-radios {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.radio-label input[type=radio] {
  accent-color: #1A1A80;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.info-icon {
  font-size: 12px;
  color: #333;
}
/* --- CONTENEDORES DINÁMICOS (TARJETA, TRANSFERENCIA, EFECTIVO) --- */
/* 1. Tarjeta */
.figma-style-trigger {
  border: 1px solid #333373 !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  margin-bottom: 8px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.figma-style-trigger .trigger-label {
  font-size: 11px;
  color: #333;
  display: block;
  margin-bottom: 2px;
}
.figma-style-trigger .card-text {
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 400 !important;
}
.payment-actions-links-left {
  text-align: left;
  margin-top: 10px;
}
.add-card-link-figma {
  color: #1A1A80;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 2. Transferencia */
.figma-upload-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #333373;
  border-radius: 50px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}
.figma-upload-pill:hover {
  background: #f0f0ff;
}
#transfer-upload-text {
  color: #333373;
  font-size: 14px;
  font-weight: 500;
}
/* 3. Efectivo */
.figma-cash-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
}
.figma-cash-warning p {
  font-size: 13px;
  color: #333;
  margin: 0;
  line-height: 1.4;
}
/* --- COLUMNA DERECHA (RECIBO) --- */
.details-title {
  color: #1A1A80;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 20px 0;
}
.receipt-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}
.receipt-lines .line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}
.receipt-divider {
  border-top: 1px solid #E6E6EE; /* Línea separadora sutil */
  margin: 5px 0;
}
.receipt-lines .total {
  margin-top: 5px;
}
.green-total {
  color: #27AE60;
  font-size: 15px;
  font-weight: 800;
}
/* Botón Confirmar */
.btn-confirm-dark {
  width: 100%;
  background: #191970; /* Azul muy oscuro */
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(25, 25, 112, 0.3);
  transition: background 0.2s;
}
.btn-confirm-dark:hover {
  background: #111155;
}
/* Estado Bloqueado (Transferencia sin comprobante - Lavanda Figma) */
.btn-confirm-dark:disabled {
  background: #B3B3D6 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
/* Responsive para Móvil */
@media (max-width: 650px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .checkout-twocolumn-card {
    padding: 25px 20px !important;
  }
}
/* 
   === MODAL INFO BANCOS (TRANSFERENCIAS) ===
 */
.bank-accounts-box {
  border: 1px solid #333373;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
}
.bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  position: relative;
}
.bank-row .bank-name {
  font-weight: 700;
  color: #1A1A80;
  font-size: 14px;
}
.bank-row .bank-number {
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}
/* Efectos para filas copiables */
.copyable-row {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}
.copyable-row:hover {
  background: #F0F0FF; /* Fondo morado clarito al pasar el mouse */
}
/* Feedback de "¡Copiado!" oculto por defecto */
.copy-feedback {
  position: absolute;
  right: 5px;
  background: #27AE60;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.copy-feedback.show {
  opacity: 1;
}
/* Filas de texto estático (Receptor y Correo) */
.static-row {
  padding: 5px;
}
.static-row .bank-name {
  font-weight: 600;
  color: #333;
}
.static-row .bank-number {
  font-weight: 600;
  color: #333;
}
/* ==========================================================================
    VISTA CONFIRMAR ARTICULOS  
   ========================================================================== */
.confirm-articles-page {
  padding: 20px 20px 80px 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  animation: fadeIn 0.4s ease-out;
  /* LISTA DE ARTÍCULOS */
  /* BOTÓN INFERIOR */
}
.confirm-articles-page .internal-nav {
  margin-bottom: 25px;
}
.confirm-articles-page .internal-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #333373;
  font-weight: 500;
  font-size: 16px;
}
.confirm-articles-page .internal-nav .back-link:hover {
  opacity: 0.8;
}
.confirm-articles-page .page-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.confirm-articles-page .instruction-text {
  font-size: 14px;
  color: #000019;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 600px;
}
.confirm-articles-page .items-list-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.confirm-articles-page .items-list-container .article-row {
  display: flex;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
  position: relative;
}
.confirm-articles-page .items-list-container .article-row .img-wrapper {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
  border: 1px solid #E6E6EE;
}
.confirm-articles-page .items-list-container .article-row .img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper .item-name {
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  color: #333373;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper .item-link {
  font-size: 13px;
  color: #666;
  text-decoration: none;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper .item-link:hover {
  text-decoration: underline;
  color: #333373;
}
.confirm-articles-page .items-list-container .article-row .circle-select-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #333373;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.confirm-articles-page .items-list-container .article-row .circle-select-btn:hover {
  background: #E6E6EE;
  transform: scale(1.1);
}
.confirm-articles-page .items-list-container .article-row .circle-select-btn:active {
  transform: scale(0.95);
  background: #333373;
}
.confirm-articles-page .items-list-container .divider {
  width: 100%;
  height: 1px;
  background: #E6E6EE;
}
.confirm-articles-page .bottom-action-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.confirm-articles-page .bottom-action-container .btn-confirm-all {
  background: #fff;
  border: 1px solid #333373;
  color: #333373;
  padding: 14px 35px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}
.confirm-articles-page .bottom-action-container .btn-confirm-all:hover {
  background: #333373;
  color: #fff;
  box-shadow: 0 4px 12px rgba(51, 51, 115, 0.2);
}
/* ==========================================================================
   2. ESTILOS DEL MODAL (GLOBALES / RAÍZ)
   ========================================================================== */
.modal-overlay-custom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Click-through cuando está oculto */
}
.modal-overlay-custom.active {
  opacity: 1;
  pointer-events: all;
}
.modal-overlay-custom .modal-card-date {
  background: #fff;
  width: 90%;
  max-width: 380px;
  border-radius: 24px;
  padding: 35px 30px;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Para prevenir que crezca infinito */
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay-custom.active .modal-card-date {
  transform: translateY(0);
}
.modal-overlay-custom .modal-date-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 25px;
}
.modal-overlay-custom .selected-item-preview {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  text-align: left;
  padding: 10px;
  background: #F9F9FB;
  border-radius: 12px;
}
.modal-overlay-custom .selected-item-preview img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 15px;
  border: 1px solid #eee;
}
.modal-overlay-custom .selected-item-preview .info .name {
  display: block;
  font-weight: 700;
  color: #333373;
  font-size: 14px;
  margin-bottom: 2px;
}
.modal-overlay-custom .selected-item-preview .info .site {
  font-size: 12px;
  color: #666;
  font-family: "Inter";
}
.modal-overlay-custom .btn-confirm-date {
  width: 100%;
  background: #1A1A80;
  color: #fff;
  padding: 16px;
  border-radius: 50px;
  border: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(26, 26, 128, 0.25);
  margin-bottom: 20px;
  transition: transform 0.2s;
}
.modal-overlay-custom .btn-confirm-date:active {
  transform: scale(0.98);
}
.modal-overlay-custom .link-remove-item {
  color: #FF5E5E;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
}
.modal-overlay-custom .link-remove-item:hover {
  text-decoration: underline;
}
/* ==========================================================================
   3. Modal Fecha (GLOBAL / RAÍZ)
   ========================================================================== */
.custom-ios-picker {
  position: relative;
  width: 100%;
  height: 200px !important;
  background: #fff;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 25px;
  /* Máscara para simular profundidad */
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.custom-ios-picker .picker-columns {
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
.custom-ios-picker .picker-col {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-align: center;
  padding: 0;
  /* Scroll Snapping por defecto (Activo cuando sueltas) */
  scroll-snap-type: y mandatory;
  /* CURSOR DE "MANITA" PARA DESKTOP */
  cursor: grab;
  cursor: -webkit-grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.custom-ios-picker .picker-col::-webkit-scrollbar {
  display: none;
}
.custom-ios-picker .picker-col.is-dragging {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.custom-ios-picker .picker-item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  scroll-snap-align: center;
  transition: all 0.2s;
}
.custom-ios-picker .picker-item.selected-snap {
  color: #000;
  font-size: 19px;
  font-weight: 700;
  transform: scale(1.1);
}
.custom-ios-picker .picker-spacer {
  height: 80px;
  width: 100%;
}
.custom-ios-picker .picker-selection-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40px;
  margin-top: -20px;
  border-top: 1px solid #E6E6EE;
  border-bottom: 1px solid #E6E6EE;
  pointer-events: none;
  z-index: 1;
}
/* --- ESTILOS DE ESTADO CONFIRMADO (Check Verde) --- */
.confirm-articles-page .items-list-container .article-row {
  /* Cuando el artículo está confirmado */
}
.confirm-articles-page .items-list-container .article-row.confirmed .circle-select-btn {
  background-color: #27AE60; /* Verde Éxito */
  border-color: #27AE60;
  transform: scale(1.1);
  /* Dibujamos el check blanco con CSS puro o Icono */
  /* Desactivamos click para que no lo reabran (opcional) */
  /* pointer-events: none; */
  /* Ocultamos el puntito azul anterior */
}
.confirm-articles-page .items-list-container .article-row.confirmed .circle-select-btn::after {
  content: "✔";
  color: white;
  font-size: 14px;
  font-weight: bold;
}
.confirm-articles-page .items-list-container .article-row.confirmed .circle-select-btn .inner-circle {
  display: none;
}
/* --- SECCIÓN SUBIR COMPROBANTE (Oculta por defecto) --- */
.upload-proof-section {
  display: none; /* Se activa con JS */
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 40px;
  animation: fadeIn 0.5s ease-out;
  /* Estilo para el link "Más tarde" */
}
.upload-proof-section .helper-text-proof {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 25px;
  max-width: 500px;
}
.upload-proof-section .helper-text-proof strong {
  color: #000;
  font-weight: 700;
}
.upload-proof-section .btn-upload-proof {
  background-color: #1A1A80;
  color: #fff;
  padding: 16px 40px;
  border-radius: 50px;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.3);
  transition: transform 0.2s;
}
.upload-proof-section .btn-upload-proof:hover {
  transform: translateY(-2px);
  background-color: #0806AE;
}
.upload-proof-section .btn-upload-proof:active {
  transform: scale(0.98);
}
.upload-proof-section .link-skip-step {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.upload-proof-section .link-skip-step:hover {
  color: #333373;
}
/* ==========================================================================
   ESTADOS VACÍOS (EMPTY STATES)
   ========================================================================== */
/* 1. ESTADO VACÍO GLOBAL (Cuando NO HAY NADA en absoluto) */
/* Visible en Móvil y Desktop */
.global-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  min-height: 50vh;
  animation: fadeInGlobal 0.5s ease-out;
}
.global-empty-state .empty-icon {
  font-size: 50px;
  margin-bottom: 20px;
  opacity: 0.5;
  /* 
     width: 150px; height: auto; object-fit: contain; margin-bottom: 20px; 
  */
}
.global-empty-state .empty-title {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  color: #333373;
  font-weight: 700;
  margin-bottom: 15px;
}
.global-empty-state .empty-text {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #666;
  max-width: 350px;
  margin-bottom: 35px;
  line-height: 1.5;
}
.global-empty-state .btn-cotizar-empty {
  background-color: #1A1A80;
  color: white;
  padding: 16px 45px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.2);
  transition: transform 0.2s, background-color 0.2s;
}
.global-empty-state .btn-cotizar-empty:hover {
  transform: translateY(-3px);
  background-color: #0806AE;
}
/* ==========================================================================
   ESTADO VACÍO: CAJA PUNTEADA 
   Se muestra cuando una sección específica está vacía, pero no todas.
   ========================================================================== */
.empty-dashed-box {
  /* Ocupa el 100% del contenedor padre (el carrusel) */
  width: 100%;
  box-sizing: border-box;
  min-height: 220px; /* Un poco más alto para presencia en Desktop */
  margin-top: 0; /* Alineado con las tarjetas vecinas */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #FAFAFC;
  border: 1px dashed #DCDCDF; /* El borde punteado que te gusta */
  border-radius: 12px;
  padding: 40px;
  /* Icono */
  /* Títulos */
  /* Subtítulo */
  /* Botón (Opcional, estilo píldora) */
}
.empty-dashed-box .empty-icon {
  font-size: 32px;
  margin-bottom: 15px;
  opacity: 0.8;
  line-height: 1;
  filter: grayscale(100%); /* Lo hace ver sutil/desactivado */
}
.empty-dashed-box .empty-title {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #333373;
  font-weight: 500;
  margin: 5px 0;
}
.empty-dashed-box .empty-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #9EA0A5;
  margin-bottom: 20px;
  max-width: 300px;
  line-height: 1.5;
}
.empty-dashed-box .btn-small-action {
  display: inline-block;
  background: transparent;
  color: #0806AE;
  border: 1px solid #0806AE;
  border-radius: 50px;
  padding: 8px 25px;
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.empty-dashed-box .btn-small-action:hover {
  background-color: #0806AE;
  color: #fff;
  transform: translateY(-2px);
}
/* =========================================
   DESKTOP ADAPTATION 
   ========================================= */
@media (min-width: 768px) {
  .desktop-only {
    display: flex !important;
  }
  .mobile-only {
    display: none !important;
  }
  /* RESET FONDO PARA DESKTOP */
  .dashboard .container-dashboard {
    background-color: #fff;
    padding: 30px 19px 53px 50px;
    /*    height: auto !important; */
    overflow-y: visible !important;
    position: relative;
    z-index: 400;
  }
  .dashboard .dashboard-header {
    margin-top: -65px;
    padding-bottom: 20px;
    position: sticky;
    top: -40px;
    /*  z-index: 500;    */
    background-color: #fff;
    padding-top: 40px;
  }
  /* 2. Ajustes de Header y Tabs Desktop */
  .header-back-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #0806AE;
  }
  .header-back-link:hover {
    opacity: 0.8;
  }
  .tabs-inline {
    display: none !important;
  }
  .tabs-inline .divider {
    color: #E6E6EE;
    font-size: 18px;
  }
  .tabs-inline .tab-link {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #9EA0A5;
    font-weight: 500;
    transition: color 0.3s;
    cursor: pointer;
  }
  .tabs-inline .tab-link:hover {
    color: #0806ae;
  }
  .tabs-inline .tab-link.active {
    color: #0806ae;
    font-weight: 700;
  }
  /* 3. Contenedor y Grid Horizontal */
  .container-paquetes {
    padding-top: 16px;
    max-width: 1100px;
    margin: 0px 0px 0px 0px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-height: auto;
    z-index: auto !important;
    position: absolute;
    /* === CORRECCIÓN DE IMÁGENES DESKTOP === */
    /* Header de Sección con Flechas */
  }
  .container-paquetes .cards-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 20px 0;
    margin-top: -15px;
    position: relative;
    z-index: 10;
  }
  .container-paquetes .cards-grid.scroll-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px;
    padding-left: 5px;
    padding-right: 20px;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    /* Ocultar scrollbars */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .container-paquetes .cards-grid.scroll-grid::-webkit-scrollbar {
    display: none;
  }
  .container-paquetes .cards-grid.scroll-grid .card-import,
  .container-paquetes .cards-grid.scroll-grid .card-export {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-margin-left: 0px;
  }
  .container-paquetes .cards-grid.scroll-grid .card-import {
    max-width: 275px;
    max-height: 261px;
  }
  .container-paquetes .cards-grid.scroll-grid .card-export {
    max-width: 284px;
  }
  .container-paquetes .cards-grid.scroll-grid .card-export .route-display .arrow-line {
    background-color: #333373;
  }
  .container-paquetes .card-import .card-header-images {
    height: 18px;
    padding-left: 10px;
    margin-top: 2px;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper {
    display: block;
    position: relative;
    height: 64px;
    margin-left: 0;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img {
    margin-left: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 86px !important;
    height: 64px !important;
    border-radius: 42px !important;
    border: 1px solid #fff !important;
    top: 0;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-1 {
    left: 0px !important;
    z-index: 1;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-2 {
    left: 45px !important;
    z-index: 2;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-3 {
    left: 90px !important;
    z-index: 3;
  }
  .container-paquetes .card-import .item-count {
    color: #333373;
    font-size: 14px;
    font-weight: 400;
    margin: 32px 0 0px 0;
  }
  .container-paquetes .card .card-footer .status-text {
    font-size: 14px;
    color: #0806AE;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    max-width: 208px;
  }
  .container-paquetes .section-header-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 80px;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 48px;
    position: relative;
  }
  .container-paquetes .section-header-wrapper .section-subtitle {
    font-family: "Rubik", sans-serif;
    font-size: 23px;
    color: #333373;
    font-weight: 700;
    margin: 0;
  }
  .container-paquetes .section-header-wrapper .carousel-controls {
    display: flex;
    gap: 10px;
    position: relative;
  }
  .container-paquetes .section-header-wrapper .carousel-controls .nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E6E6EE;
    background: transparent;
    color: #333373;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    position: relative;
  }
  .container-paquetes .section-header-wrapper .carousel-controls .nav-btn:hover {
    background: #0806ae;
    color: white;
    border-color: #0806ae;
    box-shadow: 0 4px 8px rgba(8, 6, 174, 0.2);
  }
  /* === ADAPTACIÓN DETALLE DE PAQUETE (FIGMA STYLE) === */
  .detalle-paquete-container {
    /* Ajuste del separador */
  }
  .detalle-paquete-container .detail-top-header {
    margin-bottom: 40px;
  }
  .detalle-paquete-container .detail-top-header .page-title {
    font-size: 24px;
    margin-bottom: 0;
  }
  .detalle-paquete-container .package-main-info {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas: "images route" "data edit";
    -moz-column-gap: 60px;
         column-gap: 60px;
    row-gap: 25px;
    align-items: center;
    margin-bottom: 50px;
  }
  .detalle-paquete-container .package-main-info .images-cluster {
    grid-area: images;
    margin-bottom: 0;
  }
  .detalle-paquete-container .package-main-info .route-info {
    grid-area: route;
    justify-content: flex-start;
    width: auto;
    margin-top: 0;
    gap: 20px;
  }
  .detalle-paquete-container .package-main-info .route-info .route-arrow-long {
    width: 100px;
    background: linear-gradient(90deg, rgba(51, 51, 115, 0.1) 0%, #333373 100%);
  }
  .detalle-paquete-container .package-main-info .meta-data-row {
    grid-area: data;
    justify-content: flex-start;
    gap: 35px;
  }
  .detalle-paquete-container .package-main-info .meta-data-row .data-col .label {
    font-size: 14px;
    color: #333373;
    font-weight: 400;
  }
  .detalle-paquete-container .package-main-info .meta-data-row .data-col .value {
    font-size: 16px;
    font-weight: 500;
  }
  .detalle-paquete-container .package-main-info .edit-action-container {
    grid-area: edit;
    justify-content: flex-start;
    margin-top: 0;
  }
  .detalle-paquete-container .package-main-info .edit-action-container .edit-link {
    font-size: 16px;
  }
  .detalle-paquete-container .separator-line-thick {
    display: block !important;
    height: 1px;
    background-color: #E6E6EE;
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}
/* ==========================================================================
   AJUSTE  PANTALLAS CON POCA ALTURA 
   ========================================================================== */
@media (min-width: 768px) and (max-height: 850px) {
  .dashboard .container-dashboard {
    height: 110vh !important;
    overflow-y: auto !important;
    padding-bottom: 50px;
    -ms-overflow-style: auto !important;
    scrollbar-width: none !important;
  }
  .dashboard .container-dashboard::-webkit-scrollbar {
    display: block !important;
    width: 8px;
  }
  .dashboard .container-dashboard::-webkit-scrollbar-track {
    background: transparent;
  }
  .dashboard .container-dashboard::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  .dashboard .container-dashboard::-webkit-scrollbar-thumb:hover {
    background-color: #0806AE;
  }
}
.publicar {
  /* Header */
  /*  .user-profile {
     display: flex;
     align-items: center;
     gap: 14px;

     &__name {
       text-align: right;
       color: #333373;
       font-size: 14px;
       line-height: 1.2;

       @media (max-width: 768px) {
         display: none;
       }
     }

     &__avatar {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       overflow: hidden;

       @media (max-width: 768px) {
         width: 40px;
         height: 40px;
       }

       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }

     svg {
       @media (max-width: 768px) {
         display: none;
       }
     }
   } */
  /* Stepper */
  /* Dashboard Grid */
  /* Card */
  /* Articles Section */
}
.publicar * {
  box-sizing: border-box;
}
.publicar body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
.publicar .dashboard-container {
  display: flex;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  height: 100vh;
}
@media (max-width: 768px) {
  .publicar .dashboard-container {
    flex-direction: column;
  }
}
.publicar a {
  text-decoration: none;
  color: inherit;
}
.publicar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.publicar h1, .publicar h2, .publicar h3, .publicar h4, .publicar h5, .publicar h6, .publicar p {
  margin: 0;
}
.publicar button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.publicar .main-content {
  flex: 1;
  padding: 30px 19px 53px 50px;
  background-color: #ffffff;
  overflow-y: auto;
  height: 100vh;
}
@media (max-width: 1200px) {
  .publicar .main-content {
    padding: 40px 30px;
  }
}
@media (max-width: 768px) {
  .publicar .main-content {
    padding: 20px 16px;
  }
}
.publicar .main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .publicar .main-header {
    margin-bottom: 20px;
  }
}
.publicar .main-header .top-right-area::before {
  top: -176px;
}
.publicar .back-link {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.publicar .back-link span {
  color: #0806ae;
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .publicar .back-link span {
    display: none;
  }
}
.publicar .back-link svg {
  width: 24px;
  height: 24px;
}
.publicar .stepper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .publicar .stepper {
    max-width: 100%;
    padding: 0 10px;
    margin-bottom: 30px;
  }
}
.publicar .stepper__line {
  position: absolute;
  top: 17px;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: #e6e6ee;
  z-index: 0;
}
@media (max-width: 768px) {
  .publicar .stepper__line {
    top: 15px;
  }
}
.publicar .stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  flex: 1;
}
@media (max-width: 768px) {
  .publicar .stepper__step {
    gap: 8px;
  }
}
.publicar .stepper__step--active .stepper__circle {
  background-color: #4dba8c;
  color: #050468;
}
.publicar .stepper__circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  background-color: #e6e6ee;
  color: #46467f;
}
@media (max-width: 768px) {
  .publicar .stepper__circle {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
.publicar .stepper__label {
  font-size: 12px;
  color: #000019;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 768px) {
  .publicar .stepper__label {
    font-size: 10px;
    max-width: 70px;
    white-space: normal;
    line-height: 1.2;
  }
}
.publicar .dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 909px;
  margin: 0 auto;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .publicar .dashboard-grid {
    gap: 24px;
    max-width: 100%;
    padding-bottom: 40px;
  }
}
.publicar .publish-card {
  background-color: #fcfcfc;
  border: 1px solid #ccccdc;
  border-radius: 12px;
  padding: 42px 45px 50px 45px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 1200px) {
  .publicar .publish-card {
    flex-direction: column;
    padding: 30px 24px;
  }
}
@media (max-width: 768px) {
  .publicar .publish-card {
    padding: 24px 16px;
    border-radius: 8px;
  }
}
.publicar .card-content {
  flex: 1;
  max-width: 400px;
  width: 100%;
}
@media (max-width: 1200px) {
  .publicar .card-content {
    max-width: 100%;
  }
}
.publicar .card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: space-between;
  width: 400px;
}
@media (max-width: 768px) {
  .publicar .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
}
.publicar .card-header h2 {
  color: #333373;
  font-size: 22px;
  font-weight: 700;
  font-family: "Rubik", sans-serif;
}
@media (max-width: 768px) {
  .publicar .card-header h2 {
    font-size: 18px;
  }
}
.publicar .flags {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .publicar .flags {
    gap: 8px;
  }
}
.publicar .flags .flag-wrapper {
  width: 28px;
  height: 20px;
}
@media (max-width: 768px) {
  .publicar .flags .flag-wrapper {
    width: 24px;
    height: 17px;
  }
}
.publicar .flags .flag-arrow {
  width: 56px;
}
@media (max-width: 768px) {
  .publicar .flags .flag-arrow {
    width: 40px;
  }
}
.publicar .discount-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #0806ae;
  border-radius: 5px;
  padding: 8px 16px;
  margin-bottom: 26px;
  background: #fff;
  justify-content: space-between;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1019607843);
  max-width: 333px;
  width: 100%;
}
@media (max-width: 768px) {
  .publicar .discount-input-group {
    padding: 8px 12px;
    margin-bottom: 20px;
  }
}
.publicar .discount-input-group .input-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.publicar .discount-input-group .input-wrapper label {
  font-size: 12px;
  color: #000019;
  font-family: "Inter", sans-serif;
}
.publicar .discount-input-group .input-wrapper input {
  border: none;
  outline: none;
  font-size: 16px;
  color: #333373;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  padding: 0;
  margin-bottom: 0;
  /* @media (max-width: 768px) {
    font-size: 12px;
  } */
}
.publicar .discount-input-group .apply-btn {
  color: #0806AE;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-weight: bold;
}
.publicar .details-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  max-width: 220px;
  width: 100%;
}
.publicar .details-list .detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #000019;
  /*  &.header {
     color: #333373;
     font-weight: 600;
     margin-bottom: 4px;
     font-size: 18px;
   } */
}
@media (max-width: 768px) {
  .publicar .details-list .detail-row {
    font-size: 13px;
  }
}
.publicar .details-list .detail-row.total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6e6ee;
}
.publicar .details-list .detail-row p {
  font-size: 16px;
  color: #000019;
  font-weight: bold;
  font-family: "Inter", sans-serif;
}
.publicar .details-list .discount-value {
  color: #000000;
}
.publicar .details-list .total-value {
  color: #4dba8c;
  font-weight: 600;
}
.publicar .publish-btn {
  max-width: 362px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: white;
  border-radius: 31px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.35);
  position: absolute;
  bottom: 40px;
  right: 86px;
}
@media (max-width: 1200px) {
  .publicar .publish-btn {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}
@media (max-width: 768px) {
  .publicar .publish-btn {
    padding: 14px;
    font-size: 14px;
    border-radius: 25px;
  }
}
.publicar .card-illustration {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 200px;
  height: 200px;
}
@media (max-width: 1200px) {
  .publicar .card-illustration {
    display: none;
  }
}
.publicar .articles-section h3 {
  color: #333373;
  font-size: 23px;
  margin-bottom: 10px;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
}
@media (max-width: 768px) {
  .publicar .articles-section h3 {
    font-size: 16px;
  }
}
.publicar .articles-section .articles-desc {
  color: #757575;
  font-size: 14px;
  margin-bottom: 30px;
  max-width: 620px;
}
@media (max-width: 768px) {
  .publicar .articles-section .articles-desc {
    font-size: 12px;
    margin-bottom: 20px;
  }
}
.publicar .articles-section .article-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-list {
    gap: 16px;
  }
}
.publicar .articles-section .article-item {
  display: flex;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid #ccccdc;
  padding-bottom: 24px;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item {
    gap: 12px;
    padding-bottom: 16px;
  }
}
.publicar .articles-section .article-item:last-child {
  border-bottom: none;
}
.publicar .articles-section .article-item .article-img {
  width: 99px;
  height: 60px;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e6e6ee;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-img {
    width: 60px;
    height: 60px;
  }
}
.publicar .articles-section .article-item .article-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.publicar .articles-section .article-item .article-info .article-name {
  color: #333373;
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-info .article-name {
    font-size: 12px;
  }
}
.publicar .articles-section .article-item .article-info .article-price {
  color: #0806ae;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-info .article-price {
    font-size: 13px;
  }
}
.publicar .articles-section .article-item .article-info .article-input-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.publicar .articles-section .article-item .article-info .article-input-row .article-url {
  color: #333373;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-info .article-input-row .article-url {
    font-size: 11px;
  }
  .publicar .articles-section {
    margin-bottom: 70px;
  }
}
@media (min-width: 1201px) {
  .publicar {
    /* Reserva espacio a la derecha para el muñeco */
    /* Ilustración fija a la derecha */
    /* Botón como Figma: a la derecha */
  }
  .publicar .publish-card {
    padding: 42px 523px 30px 45px !important; /* 300px = espacio para ilustración */
  }
  .publicar .card-illustration {
    position: absolute !important;
    right: -8px !important;
    top: 33px !important;
    width: 200px !important;
    height: auto !important;
    pointer-events: none;
  }
  .publicar .publish-btn {
    /*   position: static !important; */
    margin-top: -75px !important;
    margin-left: 500px !important; /* derecha */
    margin-right: 0 !important;
    display: block !important;
  }
  .publicar .articles-section {
    max-width: 620px; /* ancho tipo Figma */
    margin-left: auto;
    margin-right: auto;
  }
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.modal.active {
  display: flex;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal__content {
  position: relative;
  background: #fff;
  border-radius: 60px;
  width: 80%;
  max-width: 650px;
  padding: 40px;
  margin: auto;
  z-index: 1;
  border: 2px solid #050468;
}
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  cursor: pointer;
}
.modal__body {
  text-align: center;
}
.modal__illustration {
  width: 180px;
  margin: 0 auto 0px;
}
.modal__illustration img {
  width: 100%;
}
.modal__title {
  font-size: 22px;
  color: #050468;
  font-weight: 700;
  margin-bottom: 16px;
  font-family: "Inter", sans-serif;
}
.modal__desc {
  margin-bottom: 30px;
  color: #000019;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  max-width: 354px;
  width: 100%;
}
.modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
.modal .btn {
  width: 100%;
  max-width: 355px;
  height: 58px;
  border-radius: 31px;
  font-size: 16px;
  font-weight: 600;
}
.modal .btn--primary {
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: #fff;
}
.modal .btn--secondary {
  background: #f5f5f5;
  border: 1px solid #333373;
  color: #0806ae;
}
@media (max-width: 768px) {
  .modal {
    display: none !important;
  }
}
/* --- _paquetes.scss (MOBILE FIRST) --- */
/* 1. CLASES DE UTILIDAD PARA VISIBILIDAD */
.desktop-only {
  display: none !important;
}
.mobile-only {
  display: block;
}
/* === FONDO GRIS GENERAL === */
.dashboard .container-dashboard {
  background-color: #F5F5F9;
  padding: 0;
  height: 100vh !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;
}
/* 2. HEADER MÓVIL (Tus valores restaurados) */
.mobile-header-paquetes {
  display: flex;
  flex-direction: column;
  padding: 50px 25px 15px 25px;
  /* 3. TABS ESTILO CÁPSULA */
}
.mobile-header-paquetes .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
  margin-top: -10px;
  padding-bottom: 30px;
}
.mobile-header-paquetes .top-bar .back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.mobile-header-paquetes .top-bar .back-icon img {
  width: 24px;
  height: auto;
}
.mobile-header-paquetes .top-bar .mobile-title {
  font-family: "Inter", sans-serif;
  font-size: 19px;
  color: #333373;
  font-weight: 500;
  margin: 0;
  text-align: center;
}
.mobile-header-paquetes .top-bar .spacer {
  width: 30px;
}
.mobile-header-paquetes .mobile-tabs-capsule {
  display: flex;
  background-color: #E6E6EE;
  border-radius: 50px;
  margin-top: 0px;
  margin-bottom: -90px;
  width: 100%;
  position: relative;
  z-index: 10;
}
.mobile-header-paquetes .mobile-tabs-capsule .capsule-link {
  flex: 1;
  text-align: center;
  padding: 8.5px 0;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333373;
  border-radius: 50px;
  transition: all 0.3s ease;
  z-index: 1;
}
.mobile-header-paquetes .mobile-tabs-capsule .capsule-link.active {
  background-color: #050468;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}
.container-paquetes {
  width: 100%;
  font-family: "Inter", sans-serif;
  background-color: #FFFFFF;
  border-radius: 40px 40px 0 0;
  padding: 94px 20px;
  min-height: calc(100vh - 200px);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.02);
  /*  margin-top: 10px;  */
  position: relative;
  z-index: 1;
  /* === ESTILOS ESPECÍFICOS SOLO PARA LA VISTA DE DETALLE === */
  /* IMPORT CARD */
  /* EXPORT CARD */
  /*  (Flechas) */
}
.container-paquetes.view-mode-detail {
  margin-top: -72px;
  padding: 60px 20px 80px 20px;
}
.container-paquetes .cards-carousel-wrapper {
  overflow: visible;
  margin-bottom: 20px;
}
.container-paquetes .cards-grid.scroll-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-paquetes .cards-grid.scroll-grid .card-import,
.container-paquetes .cards-grid.scroll-grid .card-export {
  width: 100%;
  max-width: 100%;
  /*  margin: 0 auto; */
}
.container-paquetes .card {
  /*    max-height: 261px; */
  height: auto;
  border-radius: 15px;
  border: 1px solid #E6E6EE;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.container-paquetes .card .card-body {
  padding: 20px;
  flex-grow: 1;
}
.container-paquetes .card .card-footer {
  padding: 15px 16px;
  text-align: center;
}
.container-paquetes .card .card-footer .status-text {
  font-size: 14px;
  color: #0806AE;
  font-weight: 500;
  display: inline-block;
  /*   max-width: 299px; */
  width: 100%;
}
.container-paquetes .card-import {
  background-color: #FFFFFF;
}
.container-paquetes .card-import .card-header-images {
  padding: 6px 15px 0;
  height: 38px;
  margin-top: 10px;
  margin-bottom: 2px;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper {
  position: relative;
  height: 60px;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img {
  position: absolute;
  width: 86px;
  height: 64px;
  border-radius: 42px;
  border: 1.65px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  align-self: flex-start;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-3 {
  left: 120px;
  z-index: 3;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-2 {
  left: 60px;
  z-index: 2;
}
.container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-1 {
  left: 0px;
  z-index: 1;
}
.container-paquetes .card-import .item-count {
  color: #333373;
  font-size: 14px;
  font-weight: 400;
  margin: 14px 0 5px 0;
}
.container-paquetes .card-import .info-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.container-paquetes .card-import .info-grid .label {
  font-size: 10px;
  color: #000019;
  margin-bottom: 4px;
}
.container-paquetes .card-import .info-grid .value {
  display: block;
  font-size: 16px;
  color: #0806AE;
  font-weight: 500;
}
.container-paquetes .card-import .card-footer {
  border-top: 1px solid #F0F0F0;
  min-height: 61px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.container-paquetes .card-export .card-footer {
  border-top: 1px solid #F0F0F0;
  min-height: 61px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.container-paquetes .card-export {
  background-color: #E9E9F0;
  border: none;
}
.container-paquetes .card-export .export-header {
  margin-bottom: 20px;
}
.container-paquetes .card-export .export-header .export-title {
  font-size: 16px;
  font-weight: 700;
  color: #333373;
  margin-bottom: 5px;
}
.container-paquetes .card-export .export-header .export-price {
  font-size: 16px;
  color: #000019;
}
.container-paquetes .card-export .export-header .export-price strong {
  font-weight: bold;
}
.container-paquetes .card-export .export-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.container-paquetes .card-export .export-details .detail-label {
  font-size: 14px;
  color: #666;
}
.container-paquetes .card-export .export-details .offers-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}
.container-paquetes .card-export .export-details .offers-badge .offers-count {
  color: #0806AE;
  font-weight: 700;
  font-size: 14px;
}
.container-paquetes .card-export .export-details .offers-badge .badge-dot {
  width: 6px;
  height: 6px;
  background-color: #FF5E5E;
  border-radius: 50%;
}
.container-paquetes .card-export .card-footer {
  border-top: 1px solid #DCDCDF;
}
.container-paquetes .route-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 0px -5px -1px;
}
.container-paquetes .route-display .flag-icon {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container-paquetes .route-display .arrow-line {
  flex-grow: 1;
  height: 2px;
  margin: 0 15px;
  position: relative;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(51, 51, 115, 0.1) 0%, #333373 100%);
}
.container-paquetes .route-display .arrow-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #333373;
}
/* ==========================================================================
   VISTA DE DETALLE DE PAQUETE 
   ========================================================================== */
/* Ajustamos el padding y borde superior del contenedor en modo detalle */
.container-paquetes.view-mode-detail {
  padding-top: 35px;
  background-color: #fff;
  border-radius: 40px 40px 0 0; /* Curva suave arriba */
  padding: 0;
}
@media (min-width: 768px) {
  .container-paquetes.view-mode-detail {
    padding: 14px 20px 80px 20px;
    background-color: transparent;
    margin-top: 20px;
  }
}
.detalle-paquete-container {
  animation: fadeIn 0.4s ease-in-out;
  /* Título "Artículos" */
  /* --- INFO PRINCIPAL --- */
  /* Separador Grueso */
}
.detalle-paquete-container .detail-top-header {
  margin-bottom: 20px;
}
.detalle-paquete-container .detail-top-header .page-title-mob,
.detalle-paquete-container .detail-top-header .page-title-desk {
  font-family: "Inter", sans-serif;
  color: #333373; /* Azul oscuro */
  font-weight: 700;
  margin-top: 25px;
  text-align: left; /* Alineado a la izquierda como en Figma */
}
.detalle-paquete-container .detail-top-header .page-title-mob {
  display: flex;
  font-size: 16px;
  padding: 35px 20px 10px;
}
.detalle-paquete-container .detail-top-header .page-title-desk {
  display: none;
}
@media (min-width: 768px) {
  .detalle-paquete-container .detail-top-header .page-title-desk {
    font-size: 23px;
    display: flex;
    margin-top: 30px;
  }
  .detalle-paquete-container .detail-top-header .page-title-mob {
    display: none;
  }
}
.detalle-paquete-container .package-main-info {
  display: flex;
  flex-direction: column; /* Apilado vertical en móvil */
  gap: 20px;
  margin-bottom: 30px;
  /* Cluster de Imágenes */
  /* Fechas y Precios */
  /* Botón Editar Centrado */
}
.detalle-paquete-container .package-main-info .images-cluster {
  position: relative;
  width: 140px;
  height: 80px;
  margin-bottom: 5px;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img {
  position: absolute;
  width: 86px;
  height: 64px;
  border-radius: 42px;
  border: 1.65px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  align-self: flex-start;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img.img-3 {
  left: 120px;
  z-index: 3;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img.img-2 {
  left: 60px;
  z-index: 2;
}
.detalle-paquete-container .package-main-info .images-cluster .circle-img.img-1 {
  left: 0px;
  z-index: 1;
}
.detalle-paquete-container .package-main-info .meta-data-row {
  display: flex;
  justify-content: space-between; /* Uno a cada extremo */
  width: 100%;
  align-items: flex-start;
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col {
  display: flex;
  flex-direction: column;
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col .label {
  font-size: 12px;
  color: #000019; /* Negro suave */
  margin-bottom: 5px;
  font-family: "Inter", sans-serif;
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col .value {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #0806AE; /* Azul brillante */
}
.detalle-paquete-container .package-main-info .meta-data-row .data-col .value.price {
  font-weight: 500;
  font-size: 16px;
}
.detalle-paquete-container .package-main-info .route-info {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Separados */
  width: 100%;
  margin-top: 10px;
}
.detalle-paquete-container .package-main-info .route-info .flag {
  width: 28px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.detalle-paquete-container .package-main-info .route-info .route-arrow-long {
  flex-grow: 1;
  height: 2px;
  margin: 0 15px;
  position: relative;
  background: linear-gradient(90deg, rgba(51, 51, 115, 0.1) 0%, #333373 100%);
  /* Punta de flecha */
}
.detalle-paquete-container .package-main-info .route-info .route-arrow-long::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid #333373;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.detalle-paquete-container .package-main-info .edit-action-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.detalle-paquete-container .package-main-info .edit-action-container .edit-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0806AE;
  font-weight: 500;
  text-decoration: none;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
  /* Ajuste visual icono */
}
.detalle-paquete-container .package-main-info .edit-action-container .edit-link svg {
  margin-bottom: -2px;
}
.detalle-paquete-container .package-main-info .edit-action-container .edit-link:hover {
  text-decoration: underline;
}
.detalle-paquete-container .separator-line-thick {
  width: 120%;
  margin-left: -10%;
  height: 10px;
  background-color: #F5F5F9;
  margin-bottom: 30px;
  display: none;
}
@media (min-width: 768px) {
  .detalle-paquete-container .separator-line-thick {
    display: flex;
  }
}
/* ==========================================================================
   SECCIÓN DE OFERTAS 
   ========================================================================== */
.offers-section {
  background-color: #E6E6EE;
  padding: 30px 14px 80px;
  /* Título */
  /* Controles (Solo visibles en Desktop) */
  /* === GRID DE OFERTAS (CONTENEDOR) === */
}
.offers-section .offers-title {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #333373;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.offers-section .carousel-controls {
  /* Por defecto ocultos en móvil si usas la clase .desktop-only en el HTML,
     pero aquí aseguramos estilos base por si acaso */
}
.offers-section .carousel-controls .nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E6E6EE;
  background: white;
  color: #333373;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  transition: all 0.2s;
}
.offers-section .carousel-controls .nav-btn:hover {
  background: #0806ae;
  color: white;
  border-color: #0806ae;
}
.offers-section .cards-grid.scroll-grid {
  /* 1. COMPORTAMIENTO MÓVIL (Vertical Stack) */
  display: flex;
  flex-direction: column; /* Apilados uno abajo del otro */
  gap: 20px;
  padding: 0; /* Sin padding lateral extra en móvil */
  overflow: visible; /* Scroll nativo de la página */
}
.offers-section .cards-grid.scroll-grid .offer-card {
  /* En móvil ocupan todo el ancho disponible */
  width: 100%;
  max-width: 100%;
  height: auto;
  /* Estilos Visuales Base */
  background: #fff;
  border: 1px solid #E6E6EE;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  /* Partes internas de la tarjeta (Anidación corregida) */
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top {
  padding: 20px;
  display: flex;
  /*  justify-content: space-between; */
  background-color: #FAFAFA;
  gap: 4%;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .label {
  font-size: 14px;
  color: #000019;
  margin-bottom: 5px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .value {
  font-size: 16px;
  color: #333;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .green-text {
  color: #27AE60;
  font-weight: 700;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .bold-text {
  font-weight: 700;
  font-family: "Rubik", sans-serif;
  color: #000;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-top .info-group .small-text {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom {
  padding: 15px 20px;
  border-top: 1px solid #E6E6EE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile .avatar-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile .avatar-circle img {
  width: 100%;
  height: 100%;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .offer-user-profile .username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .rating {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.offers-section .cards-grid.scroll-grid .offer-card .card-bottom .rating .star {
  color: #0806AE;
  font-size: 16px;
}
@media (min-width: 768px) {
  .offers-section {
    background-color: transparent;
  }
  .offers-section .offers-title {
    font-size: 23px;
    text-align: left;
  }
  .offers-section .cards-grid.scroll-grid {
    /* Cambiamos a horizontal */
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 20px; /* Espacio para la sombra */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .offers-section .cards-grid.scroll-grid::-webkit-scrollbar {
    display: none;
  }
  .offers-section .cards-grid.scroll-grid .offer-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 310px;
    margin-right: 0;
    scroll-snap-align: start;
    scroll-margin-left: 0;
  }
  .offers-section .cards-grid.scroll-grid .offer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  .offers-section .cards-grid.scroll-grid .offer-card .card-top {
    padding: 20px 13px;
  }
}
/* --- ADAPTACIÓN MÓVIL ESPECÍFICA --- */
@media (max-width: 768px) {
  .detalle-paquete-container .package-main-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 0 20px;
  }
  .detalle-paquete-container .package-main-info .meta-data-row {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
  }
  .detalle-paquete-container .package-main-info .meta-data-row .edit-link {
    width: 100%;
    margin-top: 5px;
  }
}
/* Animación de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   NAVEGACIÓN Y MODAL
   ========================================================================== */
/* 1. Flecha Regresar ) */
.detail-navigation {
  margin-bottom: 20px;
}
.detail-navigation .back-link-arrow {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Rubik", sans-serif;
  color: #000019;
  font-weight: 500;
  font-size: 16px;
}
.detail-navigation .back-link-arrow svg {
  transition: transform 0.2s;
}
.detail-navigation .back-link-arrow:hover svg {
  transform: translateX(-5px);
}
/* 2. MODAL DE EDICIÓN (Diseño Mobile First - Ajustado a Figma) */
.package-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  /* LISTA CON SCROLL */
  /* FILA DE ARTÍCULO */
  /* Botón Continuar */
}
.package-modal-overlay.show {
  opacity: 1;
}
.package-modal-overlay .modal-content-card {
  background: #fff;
  width: 90%;
  max-width: 340px; /* Ancho más controlado para parecerse a la imagen */
  border-radius: 20px;
  padding: 25px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none; /* Quitamos bordes extras si los hubiera */
}
.package-modal-overlay.show .modal-content-card {
  transform: translateY(0);
}
.package-modal-overlay .modal-title {
  font-family: "Rubik", sans-serif;
  font-size: 18px; /* Tamaño ajustado a imagen */
  color: #333373;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}
.package-modal-overlay .items-list-scroll {
  width: 100%;
  max-height: 40vh; /* Altura máxima cómoda en móvil */
  overflow-y: auto;
  margin-bottom: 10px;
  padding-right: 5px;
  /* Scrollbar fina */
}
.package-modal-overlay .items-list-scroll::-webkit-scrollbar {
  width: 4px;
}
.package-modal-overlay .items-list-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.package-modal-overlay .modal-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F0F0F5; /* Línea gris muy suave */
  /* Ícono Eliminar (Basurero Rojo) */
}
.package-modal-overlay .modal-item-row:last-child {
  border-bottom: none;
}
.package-modal-overlay .modal-item-row .item-thumb {
  width: 75px;
  height: 75px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px; /* Bordes un poco más cuadrados como en la imagen */
  border: 1px solid #eee;
}
.package-modal-overlay .modal-item-row .item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  gap: 4px;
}
.package-modal-overlay .modal-item-row .item-details .item-name {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #333373; /* Azul oscuro */
  font-weight: 700;
  line-height: 1.2;
}
.package-modal-overlay .modal-item-row .item-details .item-price {
  font-family: "Rubik", sans-serif; /* Precio también en Rubik según imagen */
  font-size: 16px;
  color: #0806AE; /* Azul brillante */
  font-weight: 500;
}
.package-modal-overlay .modal-item-row .btn-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px; /* Área de toque */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.package-modal-overlay .modal-item-row .btn-delete svg {
  stroke: #FF5E5E;
  width: 24px;
  height: 24px;
}
.package-modal-overlay .modal-item-row .btn-delete:hover {
  transform: scale(1.1);
}
.package-modal-overlay .modal-separator {
  width: 100%;
  height: 1px;
  background-color: #F0F0F5;
  margin-bottom: 20px;
}
.package-modal-overlay .btn-continue-modal {
  background-color: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px; /* Pill shape completo */
  padding: 12px 60px; /* Ancho generoso */
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
  transition: background-color 0.2s;
  max-width: 272px;
  width: 100%;
}
.package-modal-overlay .btn-continue-modal:active {
  transform: scale(0.98);
}
/* ==========================================================================
   ESTILOS MODAL DE CONFIRMACIÓN (HÍBRIDO)
   ========================================================================== */
.confirmation-card {
  max-width: 563px; /* Un poco más ancho para que quepa todo */
  max-height: 415px;
  width: 100%;
  height: 100%;
  border: none; /* Diseño limpio */
}
.confirmation-card .text-center {
  text-align: center;
}
.confirmation-card .sad-box-mobile {
  display: none;
}
.confirmation-card .modal-title {
  font-family: "Rubik", sans-serif;
  font-size: 24px;
  color: #333373;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  margin-left: 145px;
  margin-top: 40px;
}
.confirmation-card .confirmation-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
  /* Ilustración */
  /* Botones apilados */
}
.confirmation-card .confirmation-body .sad-box-illustration {
  flex: 0 0 auto;
}
.confirmation-card .confirmation-body .sad-box-illustration img {
  width: 184px;
  margin-left: 10px;
  height: 194px;
  -o-object-fit: contain;
     object-fit: contain;
}
.confirmation-card .confirmation-body .confirmation-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: -35px;
  flex-grow: 1;
  /* Botón Conservar */
  /* Botón Eliminar */
}
.confirmation-card .confirmation-body .confirmation-actions .btn-modal-action {
  width: 100%;
  padding: 12px 20px;
  border-radius: 50px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.confirmation-card .confirmation-body .confirmation-actions .btn-modal-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.confirmation-card .confirmation-body .confirmation-actions .btn-modal-action:active {
  transform: translateY(0);
}
.confirmation-card .confirmation-body .confirmation-actions .btn-keep {
  background-color: #1A1A80;
  color: white;
  width: 219px;
  height: 39px;
  align-self: anchor-center;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
}
.confirmation-card .confirmation-body .confirmation-actions .btn-confirm-delete {
  background-color: #1A1A80;
  color: white;
  width: 219px;
  height: 39px;
  align-self: anchor-center;
  box-shadow: 0px 10px 20px rgba(30, 36, 138, 0.4);
  /* Si quisieras diferenciarlo: */
  /* background-color: #fff; color: #1A1A80; border: 2px solid #1A1A80; */
}
/* ==========================================================================
   MODO CRÍTICO 
   ========================================================================== */
.critical-icon-wrapper,
.critical-text {
  display: none !important;
}
.confirmation-card.is-critical {
  max-width: 563px !important;
  padding: 30px !important;
  /* --- TEXTO DE ADVERTENCIA  */
  /* --- BOTONES --- */
}
.confirmation-card.is-critical .modal-title {
  color: #333373 !important;
  margin-left: 145px !important;
  margin-top: 30px !important;
  margin-bottom: 5px !important;
  text-align: center !important;
  font-size: 24px;
  line-height: 1.2 !important;
  max-width: 350px;
}
.confirmation-card.is-critical .critical-text {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: #666;
  text-align: center;
  line-height: 1.4;
  margin-left: 145px;
  margin-bottom: 10px;
  padding: 0 10px;
  max-width: 350px;
}
.confirmation-card.is-critical .sad-box-illustration {
  display: block !important;
}
.confirmation-card.is-critical .critical-icon-wrapper {
  display: none !important;
}
.confirmation-card.is-critical .confirmation-actions {
  margin-top: -35px !important;
}
.confirmation-card.is-critical .confirmation-actions .btn-keep,
.confirmation-card.is-critical .confirmation-actions .btn-confirm-delete {
  color: white !important;
  border: none !important;
  font-size: 16px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
/* RESPONSIVE: Ajuste para móvil en modo crítico */
@media (max-width: 480px) {
  .confirmation-card.is-critical .modal-title, .confirmation-card.is-critical .critical-text {
    margin-left: 0 !important;
  }
  .confirmation-card.is-critical .sad-box-illustration {
    margin-bottom: 15px;
  }
}
/* RESPONSIVE CONFIRMATION */
@media (max-width: 480px) {
  #confirmTitle {
    font-size: 18px;
    margin: auto;
  }
  .confirmation-card .confirmation-body {
    flex-direction: column; /* En móvil, imagen arriba, botones abajo */
    margin-top: 0;
    margin-top: 15px;
  }
  .confirmation-card .confirmation-body .sad-box-illustration img {
    width: 137.81px;
    height: 145px;
    display: none;
  }
  .confirmation-card .confirmation-body .confirmation-actions {
    width: 100%;
    padding-top: 28px;
  }
  .confirmation-card .sad-box-mobile {
    display: flex;
    width: 137.81px;
    height: 145px;
  }
}
/* === ANIMACIÓN GLOBAL DE ENTRADA SUAVE === */
.fade-in-animate {
  /* 'both' asegura que mantenga el estado inicial y final */
  animation: fadeInGlobal 0.4s ease-out both;
  margin-top: 20px;
  padding-bottom: 156px;
}
@keyframes fadeInGlobal {
  0% {
    opacity: 0;
    transform: translateY(10px); /* Ligero deslizamiento desde abajo */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   VISTA 3: ACEPTAR OFERTA & MODALES (FINAL PIXEL-PERFECT)
   ========================================================================== */
/* --- 1. CONTENEDOR PRINCIPAL --- */
.accept-offer-container {
  padding-top: 10px;
  animation: fadeIn 0.4s ease-in-out;
  /* --- COLUMNA IZQUIERDA (Info + Pagos) --- */
  /* Radio Buttons (Los Cuadritos) */
  /* Selector de Tarjeta (Dropdown Style) */
  /* Links Agregar/Pago Seguro */
  /* Alerta de Efectivo (Sirenita) */
  /* Desglose de Precios */
  /* --- COLUMNA DERECHA (Artículos) --- */
}
.accept-offer-container .text-center {
  text-align: center;
}
.accept-offer-container .mb-4 {
  margin-bottom: 30px;
}
.accept-offer-container .page-title {
  display: none;
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 23px;
  font-weight: 700;
}
.accept-offer-container .section-subtitle {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}
.accept-offer-container .accept-offer-grid {
  display: flex;
  flex-direction: column; /* Mobile First: Columna única */
  gap: 40px;
  padding: 0 10px;
}
.accept-offer-container .rider-info-card {
  background: #FCFCFC;
  border: none;
  border-radius: 0;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 10px;
  flex-direction: column;
}
.accept-offer-container .rider-info-card .rider-avatar {
  position: relative;
  width: 58px;
  height: 58px;
}
.accept-offer-container .rider-info-card .rider-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0px 8.89px 15.55px 0px rgba(5, 4, 104, 0.15);
}
.accept-offer-container .rider-info-card .rider-avatar .rating-badge-pill {
  position: absolute;
  bottom: -5px;
  right: -10px;
  background: #E6E6F7;
  color: #333373;
  border-radius: 100%;
  font-size: 12px;
  font-weight: bold;
  width: 27px;
  height: 27px;
  text-align: center;
  align-content: center;
}
.accept-offer-container .rider-info-card .rider-details {
  /*  font-size: 13px; */
}
.accept-offer-container .rider-info-card .rider-details .delivery-label {
  color: #333373;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  font-family: "Rubik", sans-serif;
}
.accept-offer-container .rider-info-card .rider-details .rider-name-date {
  color: #333373;
  margin: 2px 0 0 0;
  font-size: 17px;
  font-weight: bold;
}
.accept-offer-container .rider-info-card .rider-details .green-text {
  color: #27AE60;
  font-weight: 700;
  font-size: 17px;
}
.accept-offer-container .payment-options {
  display: flex;
  gap: 30px;
  margin-bottom: 15px;
}
.accept-offer-container .payment-options .radio-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  /* Círculo personalizado */
  /* Punto interior al seleccionar */
}
.accept-offer-container .payment-options .radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.accept-offer-container .payment-options .radio-container .radio-mark {
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #333373;
  border-radius: 50%;
  position: relative;
}
.accept-offer-container .payment-options .radio-container input:checked ~ .radio-mark:after {
  content: "";
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333373;
}
.accept-offer-container .payment-options .radio-container .radio-label {
  font-size: 16px;
  color: #333373;
  font-weight: 400;
  font-family: "Inter", sans-serif;
}
.accept-offer-container .card-selector-trigger {
  background-color: #fff;
  border: 1px solid #0806AE; /* Borde azul brillante */
  border-radius: 5px;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: 0px 4px 10px rgba(5, 4, 104, 0.05);
  transition: all 0.2s;
}
.accept-offer-container .card-selector-trigger:hover {
  background-color: #F8F8FF;
}
.accept-offer-container .card-selector-trigger .selected-card-info {
  display: flex;
  flex-direction: column;
}
.accept-offer-container .card-selector-trigger .selected-card-info .card-text {
  font-size: 13px;
  font-weight: 500;
  color: #000;
  font-family: "Inter", sans-serif;
}
.accept-offer-container .card-selector-trigger .selected-card-info .card-subtext {
  font-size: 13px;
  color: #000;
  font-family: "Inter", sans-serif;
  margin-top: 2px;
}
.accept-offer-container .card-selector-trigger .placeholder-text {
  font-size: 14px;
  color: #666;
}
.accept-offer-container .card-selector-trigger svg {
  height: auto;
}
.accept-offer-container .payment-actions-links {
  display: flex;
  gap: 62px;
  font-size: 13px;
  margin-bottom: 30px;
  justify-content: center;
}
.accept-offer-container .payment-actions-links svg {
  width: 27.38px;
  height: 24px;
}
.accept-offer-container .payment-actions-links .add-card-link {
  color: #0806AE;
  text-decoration: none;
  display: flex;
  font-size: 16px;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.accept-offer-container .payment-actions-links .secure-payment {
  color: #333373;
  display: none;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 16px;
}
.accept-offer-container .cash-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.accept-offer-container .cash-warning-box .icon-wrapper {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.accept-offer-container .cash-warning-box .icon-wrapper img {
  width: 100%;
  height: 100%;
}
.accept-offer-container .cash-warning-box .warning-text {
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: #000019;
  line-height: 1.4;
  margin: 0;
}
.accept-offer-container .price-breakdown {
  margin-bottom: 30px;
  margin: 0;
}
.accept-offer-container .price-breakdown .price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #000;
  font-weight: 500;
  max-width: 369px;
  width: 100%;
}
.accept-offer-container .price-breakdown .price-row span {
  font-size: 18px;
  color: #333373;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
}
.accept-offer-container .price-breakdown .price-row p {
  font-size: 16px;
  font-weight: 200;
}
.accept-offer-container .price-breakdown .price-row .red-value {
  color: #FF8179;
}
.accept-offer-container .price-breakdown .price-row.discount, .accept-offer-container .price-breakdown .price-row.code {
  color: #FF5E5E;
}
.accept-offer-container .price-breakdown .price-row.total {
  font-size: 16px;
  color: #333373;
  font-weight: 700;
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: 10px;
}
.accept-offer-container .price-breakdown .price-row.total .total-amount {
  color: #27AE60;
  font-size: 18px;
  font-weight: bold;
}
.accept-offer-container .btn-reserve-space {
  padding: 15px;
  background: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
  max-width: 355px;
  width: 100%;
  height: 58px;
  display: block;
  justify-self: center;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
.accept-offer-container .btn-reserve-space:hover {
  background: #0806AE;
  transform: translateY(-2px);
}
.accept-offer-container .secure-payment-mobile {
  color: #333373;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  justify-self: center;
  margin-top: 15px;
}
.accept-offer-container .right-column {
  display: none;
  /* Lista con scroll en móvil */
}
.accept-offer-container .right-column h3 {
  font-size: 22px;
}
.accept-offer-container .right-column .helper-text {
  display: flex;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.4;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile {
  max-height: 250px; /* Altura máxima en móvil */
  overflow-y: auto; /* Scroll vertical */
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile::-webkit-scrollbar {
  width: 4px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card img {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card .item-info {
  display: flex;
  flex-direction: column;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card .item-info .item-name {
  font-weight: 700;
  color: #333373;
  font-size: 14px;
}
.accept-offer-container .right-column .items-list-summary.scrollable-mobile .item-summary-card .item-info .item-price {
  color: #0806AE;
  font-weight: 500;
  font-size: 14px;
}
/* --- 2. MODAL SELECCIONAR PAGO (Lista) --- */
.select-payment-card {
  position: relative;
  width: 100%;
  max-width: 800px !important;
  background-color: #fff;
  border: 2px solid #000050 !important;
  border-radius: 60px !important;
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.select-payment-card .modal-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
}
.select-payment-card .saved-methods-list {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}
.select-payment-card .saved-methods-list .method-option {
  background-color: #fff;
  border: 1px solid #0806AE;
  border-radius: 8px;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
  transition: background 0.2s;
}
.select-payment-card .saved-methods-list .method-option img {
  max-width: 12px;
}
.select-payment-card .saved-methods-list .method-option:hover {
  background-color: #F8F8FF;
}
.select-payment-card .saved-methods-list .method-option .method-info {
  display: flex;
  flex-direction: column;
}
.select-payment-card .saved-methods-list .method-option .method-info .method-name {
  color: #000019;
  font-size: 13px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
}
.select-payment-card .saved-methods-list .method-option .method-info .method-details {
  color: #000019;
  font-size: 13px;
  margin-top: 2px;
}
.select-payment-card .btn-continue-modal {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  border-radius: 31px;
  padding: 15px 40px;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  max-width: 355px;
  width: 100%;
}
/* --- 3. MODAL AGREGAR TARJETA (CORREGIDO DESKTOP/MOBILE) --- */
.add-card-ui {
  position: relative;
  width: 100%;
  max-width: 650px !important;
  background-color: #fff;
  border: 2px solid #000050 !important;
  border-radius: 60px !important;
  padding: 50px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  box-sizing: border-box;
}
.add-card-ui .modal-title-centered {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}
.add-card-ui .add-card-form-styled {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Estilo CAJA DE INPUT */
  /* FILA DIVIDIDA (Flex Corregido) */
}
.add-card-ui .add-card-form-styled .input-box {
  background-color: #ffffff;
  border: 1px solid #0806ae; /* Borde Azul */
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1); /* Sombra */
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 60px; /* Altura fija */
  width: 100%;
  box-sizing: border-box;
}
.add-card-ui .add-card-form-styled .input-box label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #000019;
  margin-bottom: 2px;
  white-space: nowrap;
}
.add-card-ui .add-card-form-styled .input-box input {
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  color: #333373;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  width: 100%;
}
.add-card-ui .add-card-form-styled .input-box input::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}
.add-card-ui .add-card-form-styled .input-box input::placeholder {
  color: #aaa;
  font-weight: 300;
}
.add-card-ui .add-card-form-styled .form-row-split {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-direction: row;
}
.add-card-ui .add-card-form-styled .form-row-split .input-box {
  flex: 1;
  width: auto;
  min-width: 0;
}
.add-card-ui .add-card-form-styled .btn-save-card {
  margin-top: 20px;
  width: 100%;
  padding: 15px;
  background: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.3);
  transition: transform 0.2s;
}
.add-card-ui .add-card-form-styled .btn-save-card:hover {
  transform: translateY(-2px);
}
/* ==========================================================================
   DISEÑO MODAL PERFIL RIDER 
   ========================================================================== */
.rider-profile-card {
  width: 90%;
  max-width: 600px !important;
  background-color: #fff;
  border-radius: 25px !important;
  padding: 0 40px 40px 40px !important; /* Quitamos padding top para que suba */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  /* CLAVE PARA EL EFECTO POP-OUT */
  overflow: visible !important; /* Permite que la imagen salga */
  margin-top: 60px; /* Empujamos la tarjeta abajo para que quepa la cabeza */
  /* HEADER: Avatar y Nombre */
  /* ESTADÍSTICAS (Seguidores, etc) */
  /* INFO VIAJE */
  /* RATINGS BREAKDOWN (Estrellas) */
}
.rider-profile-card .profile-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  width: 100%;
}
.rider-profile-card .profile-header-center .avatar-ring-container {
  position: relative;
  width: 110px;
  height: 110px;
  margin-bottom: 15px;
  /* CLAVE: Margen negativo para subirlo */
  margin-top: -55px;
  background: #fff; /* Fondo blanco detrás por si acaso */
  border-radius: 50%;
  padding: 0;
  /* Sombra para que se vea elevado */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.rider-profile-card .profile-header-center .avatar-ring-container .modal-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid #fff;
  background: #fff;
  padding: 3px; /* Espacio entre foto y borde verde */
}
.rider-profile-card .profile-header-center .avatar-ring-container .rating-badge-circle {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: #E6E6EE;
  color: #333373;
  font-weight: 800;
  font-size: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Rubik", sans-serif;
  z-index: 2;
}
.rider-profile-card .profile-header-center .rider-name-title {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #333373;
  font-weight: 800;
  margin: 10px 0 0 0;
}
.rider-profile-card .rider-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}
.rider-profile-card .rider-stats-row .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}
.rider-profile-card .rider-stats-row .stat-item .stat-num {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #333373;
}
.rider-profile-card .rider-stats-row .stat-item .stat-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #333373;
  font-weight: 500;
}
.rider-profile-card .rider-stats-row .vertical-divider {
  width: 1px;
  height: 30px;
  background-color: #E6E6EE;
}
.rider-profile-card .trip-info-block {
  text-align: center;
  margin-bottom: 30px;
}
.rider-profile-card .trip-info-block .trip-label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #333373;
  margin-bottom: 2px;
  font-weight: 700;
}
.rider-profile-card .trip-info-block .trip-date {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #333373;
}
.rider-profile-card .ratings-breakdown-grid {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.rider-profile-card .ratings-breakdown-grid .rating-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.rider-profile-card .ratings-breakdown-grid .rating-category .stars {
  display: flex;
  gap: 3px;
}
.rider-profile-card .ratings-breakdown-grid .rating-category .cat-label {
  font-size: 12px;
  color: #666;
  font-family: "Inter", sans-serif;
  text-align: center;
}
/* === ADAPTACIÓN DESKTOP === */
@media (min-width: 768px) {
  .accept-offer-container .page-title {
    display: block;
    margin-top: 46px;
    margin-bottom: 48px;
  }
  .accept-offer-container .accept-offer-grid {
    display: flex;
    flex-direction: row; /* Pone las columnas una al lado de la otra */
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px; /* Separación amplia como en Figma */
    /* Columna Izquierda (Pagos) */
    /* Columna Derecha (Artículos) */
  }
  .accept-offer-container .accept-offer-grid .left-column {
    flex: 1;
    max-width: 452px;
    width: auto;
  }
  .accept-offer-container .accept-offer-grid .left-column .rider-info-card {
    border: 1px solid #E6E6EE;
    flex-direction: row;
    border-radius: 12px;
    padding: 9px 43px;
    gap: 40px;
  }
  .accept-offer-container .accept-offer-grid .left-column .rider-info-card .rider-avatar img {
    width: 50px;
    height: 50px;
  }
  .accept-offer-container .accept-offer-grid .left-column .payment-section {
    max-width: 405px;
    margin: auto;
    width: 100%;
  }
  .accept-offer-container .accept-offer-grid .left-column .payment-section .secure-payment {
    display: flex;
  }
  .accept-offer-container .accept-offer-grid .left-column .price-breakdown {
    max-width: 405px;
    margin: auto;
    width: 100%;
  }
  .accept-offer-container .accept-offer-grid .right-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 450px;
    width: auto;
    margin-top: 0;
  }
  .accept-offer-container .accept-offer-grid .right-column .items-list-summary.scrollable-mobile {
    max-height: none;
    overflow-y: visible;
  }
  .accept-offer-container .btn-reserve-space {
    max-width: 382px;
    width: 100%;
  }
  .accept-offer-container .secure-payment-mobile {
    display: none;
  }
}
/* === RESPONSIVE MODALES MÓVIL === */
@media (max-width: 768px) {
  /* Modales pegados abajo en móvil */
  .select-payment-card, .add-card-ui {
    border-radius: 60px 60px 0 0 !important;
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    max-width: 100% !important;
    padding: 40px 20px !important;
    border: none !important;
  }
  .add-card-ui .add-card-form-styled .form-row-split {
    gap: 15px;
  }
}
/* ==========================================================================
   UTILIDAD GLOBAL: OCULTAR BARRAS DE SCROLL 
   ========================================================================== */
/* 1. Contenedor Principal del Dashboard */
.dashboard .container-dashboard {
  -ms-overflow-style: none;
  overflow-x: hidden !important;
  scrollbar-width: none;
}
.dashboard .container-dashboard::-webkit-scrollbar {
  display: none;
}
/* 2. Listas de Artículos (Móvil y Modales) */
.items-list-summary.scrollable-mobile,
.items-list-scroll,
.saved-methods-list,
.payment-methods-list,
.address-list,
.personal-info-form {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.items-list-summary.scrollable-mobile::-webkit-scrollbar,
.items-list-scroll::-webkit-scrollbar,
.saved-methods-list::-webkit-scrollbar,
.payment-methods-list::-webkit-scrollbar,
.address-list::-webkit-scrollbar,
.personal-info-form::-webkit-scrollbar {
  display: none;
}
/* 3. Carruseles Horizontales */
.cards-grid.scroll-grid {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cards-grid.scroll-grid::-webkit-scrollbar {
  display: none;
}
/* 4. Asegurar que cualquier contenedor con scroll en móvil no muestre la barra */
@media (max-width: 768px) {
  * {
    scrollbar-width: none;
  }
  .container-paquetes,
  .accept-offer-container,
  .detalle-paquete-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .container-paquetes::-webkit-scrollbar,
  .accept-offer-container::-webkit-scrollbar,
  .detalle-paquete-container::-webkit-scrollbar {
    display: none;
  }
  .container-paquetes .section-header-wrapper {
    margin-top: 20px;
  }
}
/* ==========================================================================
   VISTA 4: PEDIDO CONFIRMADO (SUCCESS PAGE - MOBILE FIRST AJUSTADO)
   ========================================================================== */
.order-success-container {
  width: 100%;
  min-height: calc(100vh - 100px);
  padding: 0px 20px 60px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* Tarjeta de Dirección */
  /* Botones de Acción */
}
.order-success-container .happy-box-illustration {
  order: -1;
  margin-top: 10px;
  margin-bottom: 35px;
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.order-success-container .happy-box-illustration img {
  width: 180px;
  height: auto;
  animation: bounce 2s infinite;
  margin-top: -25px;
  margin-bottom: -30px;
}
.order-success-container .success-content-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  padding-bottom: 35px;
}
.order-success-container .success-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 15px;
  width: 100%;
  text-align: justify;
}
.order-success-container .success-title .highlight {
  color: #333373;
  font-weight: 800;
}
.order-success-container .address-instruction {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #000019;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  font-weight: 400;
}
.order-success-container .shipping-address-card {
  width: 100%;
  max-width: 340px;
  background: #fff;
  margin-bottom: 20px;
}
.order-success-container .shipping-address-card .address-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 5px;
}
.order-success-container .shipping-address-card .address-row:last-child {
  border-bottom: none;
}
.order-success-container .shipping-address-card .address-row .addr-label {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
  text-align: left;
  width: 40%;
}
.order-success-container .shipping-address-card .address-row .addr-value {
  color: #555;
  font-family: "Inter", sans-serif;
  text-align: right;
  font-size: 16px;
  font-weight: 300;
  width: 60%;
  word-break: break-word;
}
.order-success-container .copy-link {
  font-family: "Rubik", sans-serif;
  color: #0806AE;
  font-size: 16px;
  text-decoration: none;
  font-weight: 400;
  display: inline-block;
  padding: 10px;
  margin-top: -20px;
  margin-bottom: 10px;
}
.order-success-container .copy-link:active {
  opacity: 0.7;
}
.order-success-container .success-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 356px;
}
.order-success-container .success-actions .btn-action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s;
  box-sizing: border-box;
}
.order-success-container .success-actions .btn-action.btn-outline {
  border: 1px solid #0806AE;
  color: #0806AE;
  background: #F5F5F5;
}
.order-success-container .success-actions .btn-action.btn-outline:active {
  background: #F5F5FF;
}
.order-success-container .success-actions .btn-action.btn-filled {
  background: #F5F5F5;
  border: 1px solid #0806AE;
  color: #0806AE;
}
.order-success-container .success-actions .btn-action.btn-filled:active {
  background: #E0E0E5;
}
.order-success-container .success-actions .link-home {
  font-family: "Inter", sans-serif;
  color: #0806AE;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  margin-top: -2px;
}
/* Animación de rebote suave */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (min-width: 768px) {
  .order-success-container {
    padding-top: 80px;
    max-width: 1000px;
    margin: 0 auto;
    display: block; /* Importante: Volvemos a bloque en desktop */
    /* Cajita Feliz: FLOTA A LA DERECHA en pantallas grandes */
  }
  .order-success-container .success-content-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }
  .order-success-container .success-title {
    text-align: center;
    margin-bottom: 12px;
  }
  .order-success-container .shipping-address-card {
    max-width: 400px;
    background: transparent;
    border: none;
    position: relative;
    right: -18px;
  }
  .order-success-container .shipping-address-card .address-row {
    border-bottom: none;
  }
  .order-success-container .shipping-address-card .address-row .addr-value {
    text-align: left;
  }
  .order-success-container .happy-box-illustration {
    /* En desktop ya no aplica el 'order', usamos posición absoluta */
    position: absolute;
    right: 50px;
    bottom: 50px;
    margin-top: 0;
    margin-bottom: 0; /* Reseteamos el margen móvil */
    width: auto;
    justify-content: flex-end;
  }
  .order-success-container .happy-box-illustration img {
    width: 200px;
  }
}
/* ==========================================================================
   TOAST NOTIFICATION (Mensaje Flotante - Versión Superior)
   ========================================================================== */
.toast-notification {
  visibility: hidden;
  min-width: 250px;
  background-color: #333373;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 13px 20px;
  position: fixed;
  z-index: 9999; /* Muy alto para que flote sobre el header */
  left: 50%;
  /* CAMBIO: Posición inicial arriba */
  top: 30px;
  transform: translateX(-50%);
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  /* CAMBIO: Animamos 'top' en lugar de 'bottom' */
  transition: opacity 0.3s, top 0.3s;
}
/* Estado visible */
.toast-notification.show {
  visibility: visible;
  opacity: 1;
  top: 50px;
  display: sticky;
  z-index: 40;
}
@media (min-width: 1400px) {
  .order-success-container .happy-box-illustration {
    right: 0;
  }
  .order-success-container .happy-box-illustration img {
    width: 250px;
  }
}
/* ==========================================================================
   === ESTILOS VISTA SEGUIMIENTO  === 
   ========================================================================== */
.seguimiento-container {
  padding-top: 20px;
  max-width: 900px;
  margin: 0 auto;
  /* 1. MAGIA FLEXBOX: Convertimos el contenedor en columna para reordenar */
  display: flex;
  flex-direction: column;
  /* Asignamos un orden base para Móvil */
  /* ¡Los botones se van al FONDO en móvil! */
  /* --- HEADER (Imágenes + Fechas) --- */
  /* --- BOTONES DE CONTACTO (Rider / Dirección) --- */
  /* =========================================================
     === NUEVO STEPPER INTEGRADO (MOBILE FIRST) ===
  ========================================================= */
  /* --- ADAPTACIÓN DESKTOP (STEPPER HORIZONTAL Y ORDEN ORIGINAL) --- */
}
.seguimiento-container .page-title {
  order: 1;
}
.seguimiento-container .tracking-header-card {
  order: 2;
}
.seguimiento-container .stepper-main-container {
  order: 3;
}
.seguimiento-container .success-box, .seguimiento-container .review-box {
  order: 4;
}
.seguimiento-container .rider-actions-row {
  order: 5;
}
.seguimiento-container .page-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}
.seguimiento-container .tracking-header-card {
  display: flex;
  align-items: center;
  gap: 55px;
  margin-bottom: 30px;
}
.seguimiento-container .tracking-header-card .images-cluster-small {
  position: relative;
  width: 100px;
  height: 60px;
}
.seguimiento-container .tracking-header-card .images-cluster-small .circle-img {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.2s ease, z-index 0s;
}
.seguimiento-container .tracking-header-card .images-cluster-small .circle-img:hover {
  transform: scale(1.15);
  z-index: 100 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.seguimiento-container .tracking-header-card .deadline-info .label {
  font-size: 13px;
  color: #333;
  margin: 0;
}
.seguimiento-container .tracking-header-card .deadline-info .value-date {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #333373;
  margin: 5px 0 0 0;
}
.seguimiento-container .rider-actions-row {
  display: flex;
  flex-direction: column; /* Apilados verticalmente en móvil */
  gap: 15px;
  margin-top: 20px; /* Separación del contenido de arriba */
  margin-bottom: 40px;
  width: 100%;
}
.seguimiento-container .rider-actions-row .btn-action {
  width: 100%; /* Ocupan todo el ancho en móvil */
  padding: 16px 20px; /* Un poco más de padding vertical */
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  font-size: 14px; /* Letra un poco más grande */
  font-weight: 700; /* Letra más gruesa */
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}
.seguimiento-container .rider-actions-row .btn-action.btn-outline {
  border: 1px solid #333373;
  color: #333373;
  background: transparent;
}
.seguimiento-container .rider-actions-row .btn-action:hover {
  background: #F5F5FF;
  transform: translateY(-2px);
}
.seguimiento-container .stepper-main-container {
  display: flex;
  flex-direction: column; /* Móvil: Vertical */
  position: relative;
  margin-bottom: 40px;
  padding-left: 10px;
  /* GRUPO DE PASO (Icono + Texto + Acciones) */
}
.seguimiento-container .stepper-main-container .step-group {
  position: relative;
  /* CABECERA DEL PASO */
  /* CONTENIDO ANIDADO (Botones y Links) */
  /* LÍNEA CONECTORA VERTICAL */
  /* --- ESTADOS DE COLOR --- */
}
.seguimiento-container .stepper-main-container .step-group .step-header {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}
.seguimiento-container .stepper-main-container .step-group .step-header .step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F2F2F5;
  color: #9EA0A5;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #fff;
  transition: all 0.3s ease;
}
.seguimiento-container .stepper-main-container .step-group .step-header .step-label {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #9EA0A5;
  line-height: 1.2;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper {
  padding-left: 47px; /* Alineado bajo el texto */
  padding-bottom: 30px;
  position: relative;
  /* Botones de Acción (Tus estilos exactos) */
  /* Enlaces de texto (Ver factura, fotos) */
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 20px;
  border-radius: 28px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 14px;
  width: 213px;
  height: 40px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
  text-align: center;
  transition: transform 0.2s;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.primary {
  max-width: auto;
  width: 80%;
  background-color: #1A1A80;
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(26, 26, 128, 0.2);
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.secondary {
  max-width: auto;
  width: 80%;
  background-color: #F8F8FA;
  color: #333373;
  border: 1px solid #333373;
  margin-left: 5px;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.outline {
  max-width: auto;
  width: 80%;
  background-color: #F8F8FA;
  color: #333373;
  border: 1px solid #333373;
  margin-right: 10px;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action:active {
  transform: scale(0.98);
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .link-step-action {
  display: inline-block;
  margin-top: 8px;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  color: #0806AE;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.seguimiento-container .stepper-main-container .step-group .step-content-wrapper .warning-text-small {
  font-size: 13px;
  color: #E67E22;
  margin-top: 8px;
  font-weight: 500;
}
.seguimiento-container .stepper-main-container .step-group .step-connector {
  position: absolute;
  top: 32px;
  left: 16px;
  width: 2px;
  height: calc(100% - 32px);
  background-color: #E6E6EE;
  z-index: 1;
}
.seguimiento-container .stepper-main-container .step-group:last-child .step-connector {
  display: none;
}
.seguimiento-container .stepper-main-container .step-group:last-child .step-content-wrapper {
  padding-bottom: 0;
}
.seguimiento-container .stepper-main-container .step-group.completed .step-icon {
  background-color: #27AE60;
  color: white;
}
.seguimiento-container .stepper-main-container .step-group.completed .step-label {
  color: #27AE60;
  font-weight: 600;
}
.seguimiento-container .stepper-main-container .step-group.completed .step-connector {
  background-color: #27AE60;
}
.seguimiento-container .stepper-main-container .step-group.active-neutral .step-icon {
  background-color: #333373;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(51, 51, 115, 0.1);
}
.seguimiento-container .stepper-main-container .step-group.active-neutral .step-label {
  color: #333373;
  font-weight: 700;
}
.seguimiento-container .stepper-main-container .step-group.active-warning .step-icon {
  background-color: #F2994A;
  color: white;
  animation: pulseWarning 2s infinite;
}
.seguimiento-container .stepper-main-container .step-group.active-warning .step-label {
  color: #F2994A;
  font-weight: 700;
}
.seguimiento-container .stepper-main-container .step-group.active-danger .step-icon {
  background-color: #EB5757;
  color: white;
}
.seguimiento-container .stepper-main-container .step-group.active-danger .step-label {
  color: #EB5757;
  font-weight: 700;
}
@media (min-width: 992px) {
  .seguimiento-container {
    /* Revertimos el orden para Desktop */
  }
  .seguimiento-container .stepper-main-container {
    order: 4;
  }
  .seguimiento-container .success-box, .seguimiento-container .review-box {
    order: 5;
  }
  .seguimiento-container .rider-actions-row {
    order: 3; /* Los botones suben debajo del header */
    flex-direction: row; /* Uno al lado del otro */
    margin-top: 0;
    margin-bottom: 50px;
  }
  .seguimiento-container .rider-actions-row .btn-action {
    flex: 1;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    width: auto;
  }
  .seguimiento-container .stepper-main-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 0;
    margin-top: 50px;
    gap: 0;
  }
  .seguimiento-container .stepper-main-container .step-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
    /* Header Vertical en Desktop */
    /* Contenido Flotante */
    /* Línea Horizontal  */
  }
  .seguimiento-container .stepper-main-container .step-group .step-header {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    width: 100%;
  }
  .seguimiento-container .stepper-main-container .step-group .step-header .step-label {
    max-width: 120px;
    font-size: 14px;
    margin: 0 auto;
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper {
    padding-left: 0;
    padding-top: 15px;
    border-left: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action {
    width: auto;
    min-width: 160px;
    padding: 10px 20px;
    font-size: 13px;
    margin-top: 5px;
    /* Reseteamos los anchos de móvil */
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.primary, .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.secondary, .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action.outline {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .seguimiento-container .stepper-main-container .step-group .step-content-wrapper .btn-step-action:hover {
    transform: translateY(-3px);
  }
  .seguimiento-container .stepper-main-container .step-group .step-connector {
    display: none;
  }
  .seguimiento-container .stepper-main-container .step-group::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #E6E6EE;
    z-index: 0;
  }
  .seguimiento-container .stepper-main-container .step-group:last-child::after {
    display: none;
  }
  .seguimiento-container .stepper-main-container .step-group.completed::after {
    background-color: #27AE60;
  }
}
@keyframes pulseWarning {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 153, 74, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(242, 153, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 153, 74, 0);
  }
}
/* Boton review  */
.review-box .btn-action-primary {
  padding: 15px;
  background: #1A1A80;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
  max-width: 355px;
  width: 100%;
  height: 58px;
  display: block;
  justify-self: center;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
}
/* ==========================================================================
   === MODALES (DIRECCIÓN, CARGA, CONFIRMACIÓN, ) === 
   ========================================================================== */
.package-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* TARJETA BASE */
}
.package-modal-overlay.show {
  opacity: 1;
}
.package-modal-overlay .modal-content-card {
  background: #fff;
  border-radius: 32px;
  padding: 40px 30px;
  width: 90%;
  max-width: 700px;
  position: absolute;
  border: 1px solid #333373;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.3s ease-out;
  /* --- LAYOUT DIRECCIÓN (FIGMA) --- */
  /* --- LAYOUT SUCCESS (FIGMA) --- */
}
.package-modal-overlay .modal-content-card .btn-close-corner {
  position: absolute;
  top: 25px;
  left: 25px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333373;
  transition: transform 0.2s;
}
.package-modal-overlay .modal-content-card .btn-close-corner:hover {
  transform: scale(1.1);
}
.package-modal-overlay .modal-content-card.modal-address-layout {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}
@media (min-width: 768px) {
  .package-modal-overlay .modal-content-card.modal-address-layout {
    flex-direction: row;
    align-items: flex-start;
    padding: 50px;
  }
  .package-modal-overlay .modal-content-card.modal-address-layout .modal-illustration-side {
    width: 40%;
  }
  .package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side {
    width: 60%;
  }
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-illustration-side {
  display: flex;
  justify-content: center;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-illustration-side .illustration-img {
  width: 100%;
  max-width: 205px;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  top: 112px;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side {
  width: 60%;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .modal-title-left {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 5px 0;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .modal-subtitle-left {
  font-family: "Inter", sans-serif;
  color: #666;
  font-size: 14px;
  margin: 0 0 25px 0;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 30px;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid .data-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid .data-row .d-label {
  font-weight: 700;
  color: #111;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .address-data-grid .data-row .d-value {
  color: #555;
  text-align: right;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .btn-copy-address {
  width: 100%;
  left: -110px;
  position: relative;
  padding: 14px;
  border: 1px solid #333373;
  background: #fff;
  color: #333373;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}
.package-modal-overlay .modal-content-card.modal-address-layout .modal-info-side .btn-copy-address:hover {
  background: #f4f4fa;
  transform: translateY(-2px);
}
.package-modal-overlay .modal-content-card.modal-success-layout {
  text-align: center;
  max-width: 500px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .success-illustration-wrapper {
  margin-bottom: 25px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .success-illustration-wrapper img {
  max-width: 160px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .modal-title-center {
  font-family: "Rubik", sans-serif;
  color: #1A1A80;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .modal-text-center {
  color: #333373;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 35px;
  padding: 0 20px;
}
.package-modal-overlay .modal-content-card.modal-success-layout .btn-modal-primary {
  background: #1A1A80;
  color: white;
  border: none;
  padding: 16px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  font-family: "Rubik", sans-serif;
  box-shadow: 0 8px 20px rgba(26, 26, 128, 0.25);
}
.package-modal-overlay .modal-content-card.modal-success-layout .btn-modal-primary:hover {
  background: #2b2b95;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .package-modal-overlay .modal-content-card {
    /* position: relative; */
    border-radius: 32px 32px 0 0;
    border: none;
    bottom: 0;
    width: 100%;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* --- Modal review detallada --- */
/* --- LAYOUT SELECCIÓN ENTREGA (FASE 4) --- */
.delivery-selection-card {
  max-width: 500px !important;
  padding: 50px 40px !important;
}
.delivery-selection-card .custom-radio-label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  cursor: pointer;
  position: relative;
  /* ESTADO SELECCIONADO */
}
.delivery-selection-card .custom-radio-label input[type=radio] {
  display: none; /* Ocultamos el input nativo */
}
.delivery-selection-card .custom-radio-label .radio-circle {
  width: 22px;
  height: 22px;
  border: 2px solid #333373; /* Borde azul normal */
  border-radius: 50%;
  position: relative;
  transition: all 0.2s;
  /* Punto interior cuando está seleccionado */
}
.delivery-selection-card .custom-radio-label .radio-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1A1A80;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.delivery-selection-card .custom-radio-label .radio-text {
  color: #4A4A68;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s;
}
.delivery-selection-card .custom-radio-label input[type=radio]:checked ~ .radio-circle {
  border-color: #1A1A80;
}
.delivery-selection-card .custom-radio-label input[type=radio]:checked ~ .radio-circle::after {
  transform: translate(-50%, -50%) scale(1);
}
.delivery-selection-card .custom-radio-label input[type=radio]:checked ~ .radio-text {
  color: #1A1A80;
  font-weight: 600;
}
/* --- LAYOUT TRACKING FINAL --- */
.tracking-delivery-card {
  padding: 60px 40px 40px 40px !important;
}
/* --- Modal Review --- */
.review-premium-card {
  max-width: 850px !important;
  width: 90%;
  border-radius: 60px !important;
  padding: 40px 60px !important;
  background: #fff;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  /* Ajuste para pantallas más pequeñas (Móviles/Tablets) */
}
.review-premium-card .review-top-layout {
  display: flex;
  justify-content: space-between; /* Esto empuja automáticamente uno a la izq y otro a la der */
  align-items: center;
  margin-bottom: 40px;
  width: 100%;
  /* Carrusell de imágenes apiladas */
}
.review-premium-card .review-top-layout .rider-profile-mini {
  display: flex;
  align-items: center;
  gap: 20px;
  /* ELIMINAMOS position: absolute y left: 50px; */
}
.review-premium-card .review-top-layout .rider-profile-mini .avatar-wrapper img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #FFF9E7;
  -o-object-fit: cover;
     object-fit: cover; /* Mantiene la imagen sin deformarse */
}
.review-premium-card .review-top-layout .rider-profile-mini .rider-info h3 {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}
.review-premium-card .review-top-layout .rider-profile-mini .rider-info .btn-follow-lite {
  margin-top: 8px;
  padding: 5px 25px;
  border: 1.5px solid #333373;
  border-radius: 20px;
  background: transparent;
  color: #333373;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.review-premium-card .review-top-layout .rider-profile-mini .rider-info .btn-follow-lite:hover {
  background: #333373;
  color: #fff;
}
.review-premium-card .review-top-layout .package-images-preview {
  display: flex;
  /* ELIMINAMOS margin-left: 200px; */
}
.review-premium-card .review-top-layout .package-images-preview .img-stack {
  width: 130px;
  height: 130px;
  margin-left: -40px;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid #000;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.review-premium-card .review-top-layout .package-images-preview .img-stack img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.review-premium-card .review-top-layout .package-images-preview .img-stack:first-child {
  margin-left: 0;
}
.review-premium-card .review-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  text-align: left;
}
.review-premium-card .review-main-grid .section-title {
  font-family: "Rubik", sans-serif;
  font-size: 18px;
  color: #333373;
  font-weight: 800;
  margin-bottom: 25px;
}
.review-premium-card .review-main-grid .eval-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.review-premium-card .review-main-grid .eval-row span {
  color: #666;
  font-size: 15px;
}
.review-premium-card .review-main-grid .eval-row .stars-eval {
  display: flex;
  flex-direction: row-reverse;
}
.review-premium-card .review-main-grid .eval-row .stars-eval input {
  display: none;
}
.review-premium-card .review-main-grid .eval-row .stars-eval label {
  font-size: 24px;
  color: #E6E6EE;
  cursor: pointer;
  margin-left: 5px;
  transition: color 0.2s;
}
.review-premium-card .review-main-grid .eval-row .stars-eval input:checked ~ label, .review-premium-card .review-main-grid .eval-row .stars-eval label:hover, .review-premium-card .review-main-grid .eval-row .stars-eval label:hover ~ label {
  color: #0806AE;
}
.review-premium-card .review-main-grid .recommendation-area {
  margin-top: 30px;
  text-align: center;
}
.review-premium-card .review-main-grid .recommendation-area p {
  color: #333373;
  font-weight: 700;
  margin-bottom: 15px;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group .btn-thumb {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group .btn-thumb img {
  width: 35px;
  opacity: 0.6;
}
.review-premium-card .review-main-grid .recommendation-area .thumbs-group .btn-thumb.active img {
  opacity: 1;
  transform: scale(1.2);
}
.review-premium-card .review-main-grid .right-comment-col textarea {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #E6E6EE;
  padding: 15px;
  font-size: 14px;
  margin-bottom: 40px;
  resize: none; /* Evita que rompan el diseño arrastrando la caja */
}
.review-premium-card .review-main-grid .right-comment-col textarea::-moz-placeholder {
  color: #999;
}
.review-premium-card .review-main-grid .right-comment-col textarea::placeholder {
  color: #999;
}
.review-premium-card .review-main-grid .right-comment-col textarea:focus {
  outline: none;
  border-color: #1A1A80;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-send-blue {
  width: 250px;
  padding: 15px;
  background: #1A1A80;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(26, 26, 128, 0.3);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-send-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(26, 26, 128, 0.4);
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-omit-text {
  background: none;
  border: none;
  color: #333373;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.review-premium-card .review-main-grid .right-comment-col .action-buttons .btn-omit-text:hover {
  text-decoration: underline;
}
@media (max-width: 800px) {
  .review-premium-card {
    padding: 30px !important;
    border-radius: 30px !important;
  }
  .review-premium-card .review-top-layout {
    flex-direction: column;
    gap: 30px;
  }
  .review-premium-card .review-top-layout .package-images-preview {
    margin: 0 auto;
  }
  .review-premium-card .review-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.unified-thanks-card {
  max-width: 650px !important;
  padding: 40px 45px !important;
  border-radius: 30px !important;
  background: #fff !important;
  /* --- Responsivo para Celulares --- */
}
.unified-thanks-card .unified-thanks-layout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 30px !important;
}
.unified-thanks-card .unified-thanks-layout .illustration-side {
  flex: 0 0 40% !important;
  text-align: center !important;
}
.unified-thanks-card .unified-thanks-layout .illustration-side img {
  width: 100% !important;
  max-width: 220px !important;
  display: block !important;
  margin: 0 auto !important;
}
.unified-thanks-card .unified-thanks-layout .text-side {
  flex: 1 1 60% !important;
  text-align: left !important;
  width: 100% !important;
}
.unified-thanks-card .unified-thanks-layout .text-side h3 {
  font-family: "Rubik", sans-serif !important;
  color: #1A1A80 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
.unified-thanks-card .unified-thanks-layout .text-side p {
  color: #666 !important;
  font-size: 15px !important;
  margin-bottom: 25px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.unified-thanks-card .unified-thanks-layout .text-side .btn-send-blue {
  width: 100% !important;
  padding: 15px !important;
  border-radius: 50px !important;
  background: #1A1A80 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.25) !important;
}
@media (max-width: 600px) {
  .unified-thanks-card {
    padding: 35px 20px !important;
  }
  .unified-thanks-card .unified-thanks-layout {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .unified-thanks-card .unified-thanks-layout .illustration-side {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .unified-thanks-card .unified-thanks-layout .illustration-side img {
    max-width: 150px !important;
  }
  .unified-thanks-card .unified-thanks-layout .text-side {
    text-align: center !important;
  }
  .unified-thanks-card .unified-thanks-layout .text-side h3 {
    font-size: 20px !important;
    text-align: center !important;
  }
  .unified-thanks-card .unified-thanks-layout .text-side p {
    text-align: center !important;
  }
}
/* --- TARJETAS DE DIRECCIONES GUARDADAS --- */
.saved-address-card {
  display: block;
  border: 1px solid #E6E6EE;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  /* ESTADO SELECCIONADO */
}
.saved-address-card input[type=radio] {
  display: none;
}
.saved-address-card .address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.saved-address-card .address-header .address-title {
  font-weight: 700;
  color: #333373;
  font-family: "Rubik", sans-serif;
  font-size: 15px;
}
.saved-address-card .address-header .address-price {
  color: #27AE60;
  font-weight: 700;
  font-size: 14px;
}
.saved-address-card .address-body {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}
.saved-address-card.selected {
  border-color: #1A1A80;
  background: #FAFAFC;
  box-shadow: 0 4px 10px rgba(26, 26, 128, 0.05);
}
.btn-add-new-address {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px dashed #333373;
  border-radius: 12px;
  color: #333373;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 5px;
}
.btn-add-new-address:hover {
  background: #F5F5FF;
}
/* --- TABS MÉTODO DE PAGO --- */
.payment-method-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.payment-method-tabs .pay-tab {
  flex: 1;
  text-align: center;
  padding: 12px 5px;
  background: #FAFAFC;
  border: 1px solid #E6E6EE;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}
.payment-method-tabs .pay-tab input[type=radio] {
  display: none;
}
.payment-method-tabs .pay-tab.active {
  background: #F0F0FF;
  border-color: #1A1A80;
  color: #1A1A80;
}
/* =======================================================
   === MODAL DE PAGO (2 COLUMNAS - DISEÑO FIGMA) ===
   ======================================================= */
.checkout-twocolumn-card {
  max-width: 650px !important;
  padding: 35px 40px !important;
  border-radius: 20px !important;
  background: #fff;
}
.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
/* --- COLUMNA IZQUIERDA --- */
.delivery-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.delivery-title {
  color: #1A1A80;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px 0;
}
.delivery-subtitle {
  color: #666;
  font-size: 14px;
  margin: 0 0 2px 0;
}
.delivery-date {
  color: #1A1A80;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.box-mascot-img {
  width: 80px;
  height: auto;
}
.divider-line {
  border: none;
  border-top: 1px solid #E6E6EE;
  margin: 20px 0;
}
.payment-section-title {
  color: #1A1A80;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 15px 0;
}
/* Radio Buttons */
.payment-radios {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.radio-label input[type=radio] {
  accent-color: #1A1A80;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.info-icon {
  font-size: 12px;
  color: #333;
}
/* --- CONTENEDORES DINÁMICOS (TARJETA, TRANSFERENCIA, EFECTIVO) --- */
/* 1. Tarjeta */
.figma-style-trigger {
  border: 1px solid #333373 !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  margin-bottom: 8px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.figma-style-trigger .trigger-label {
  font-size: 11px;
  color: #333;
  display: block;
  margin-bottom: 2px;
}
.figma-style-trigger .card-text {
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 400 !important;
}
.payment-actions-links-left {
  text-align: left;
  margin-top: 10px;
}
.add-card-link-figma {
  color: #1A1A80;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 2. Transferencia */
.figma-upload-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid #333373;
  border-radius: 50px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}
.figma-upload-pill:hover {
  background: #f0f0ff;
}
#transfer-upload-text {
  color: #333373;
  font-size: 14px;
  font-weight: 500;
}
/* 3. Efectivo */
.figma-cash-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
}
.figma-cash-warning p {
  font-size: 13px;
  color: #333;
  margin: 0;
  line-height: 1.4;
}
/* --- COLUMNA DERECHA (RECIBO) --- */
.details-title {
  color: #1A1A80;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 20px 0;
}
.receipt-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}
.receipt-lines .line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}
.receipt-divider {
  border-top: 1px solid #E6E6EE; /* Línea separadora sutil */
  margin: 5px 0;
}
.receipt-lines .total {
  margin-top: 5px;
}
.green-total {
  color: #27AE60;
  font-size: 15px;
  font-weight: 800;
}
/* Botón Confirmar */
.btn-confirm-dark {
  width: 100%;
  background: #191970; /* Azul muy oscuro */
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(25, 25, 112, 0.3);
  transition: background 0.2s;
}
.btn-confirm-dark:hover {
  background: #111155;
}
/* Estado Bloqueado (Transferencia sin comprobante - Lavanda Figma) */
.btn-confirm-dark:disabled {
  background: #B3B3D6 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
/* Responsive para Móvil */
@media (max-width: 650px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .checkout-twocolumn-card {
    padding: 25px 20px !important;
  }
}
/* 
   === MODAL INFO BANCOS (TRANSFERENCIAS) ===
 */
.bank-accounts-box {
  border: 1px solid #333373;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
}
.bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  position: relative;
}
.bank-row .bank-name {
  font-weight: 700;
  color: #1A1A80;
  font-size: 14px;
}
.bank-row .bank-number {
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}
/* Efectos para filas copiables */
.copyable-row {
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}
.copyable-row:hover {
  background: #F0F0FF; /* Fondo morado clarito al pasar el mouse */
}
/* Feedback de "¡Copiado!" oculto por defecto */
.copy-feedback {
  position: absolute;
  right: 5px;
  background: #27AE60;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.copy-feedback.show {
  opacity: 1;
}
/* Filas de texto estático (Receptor y Correo) */
.static-row {
  padding: 5px;
}
.static-row .bank-name {
  font-weight: 600;
  color: #333;
}
.static-row .bank-number {
  font-weight: 600;
  color: #333;
}
/* ==========================================================================
    VISTA CONFIRMAR ARTICULOS  
   ========================================================================== */
.confirm-articles-page {
  padding: 20px 20px 80px 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  animation: fadeIn 0.4s ease-out;
  /* LISTA DE ARTÍCULOS */
  /* BOTÓN INFERIOR */
}
.confirm-articles-page .internal-nav {
  margin-bottom: 25px;
}
.confirm-articles-page .internal-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #333373;
  font-weight: 500;
  font-size: 16px;
}
.confirm-articles-page .internal-nav .back-link:hover {
  opacity: 0.8;
}
.confirm-articles-page .page-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.confirm-articles-page .instruction-text {
  font-size: 14px;
  color: #000019;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 600px;
}
.confirm-articles-page .items-list-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.confirm-articles-page .items-list-container .article-row {
  display: flex;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
  position: relative;
}
.confirm-articles-page .items-list-container .article-row .img-wrapper {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
  border: 1px solid #E6E6EE;
}
.confirm-articles-page .items-list-container .article-row .img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper .item-name {
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  color: #333373;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper .item-link {
  font-size: 13px;
  color: #666;
  text-decoration: none;
}
.confirm-articles-page .items-list-container .article-row .info-wrapper .item-link:hover {
  text-decoration: underline;
  color: #333373;
}
.confirm-articles-page .items-list-container .article-row .circle-select-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #333373;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.confirm-articles-page .items-list-container .article-row .circle-select-btn:hover {
  background: #E6E6EE;
  transform: scale(1.1);
}
.confirm-articles-page .items-list-container .article-row .circle-select-btn:active {
  transform: scale(0.95);
  background: #333373;
}
.confirm-articles-page .items-list-container .divider {
  width: 100%;
  height: 1px;
  background: #E6E6EE;
}
.confirm-articles-page .bottom-action-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.confirm-articles-page .bottom-action-container .btn-confirm-all {
  background: #fff;
  border: 1px solid #333373;
  color: #333373;
  padding: 14px 35px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}
.confirm-articles-page .bottom-action-container .btn-confirm-all:hover {
  background: #333373;
  color: #fff;
  box-shadow: 0 4px 12px rgba(51, 51, 115, 0.2);
}
/* ==========================================================================
   2. ESTILOS DEL MODAL (GLOBALES / RAÍZ)
   ========================================================================== */
.modal-overlay-custom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Click-through cuando está oculto */
}
.modal-overlay-custom.active {
  opacity: 1;
  pointer-events: all;
}
.modal-overlay-custom .modal-card-date {
  background: #fff;
  width: 90%;
  max-width: 380px;
  border-radius: 24px;
  padding: 35px 30px;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Para prevenir que crezca infinito */
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay-custom.active .modal-card-date {
  transform: translateY(0);
}
.modal-overlay-custom .modal-date-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 25px;
}
.modal-overlay-custom .selected-item-preview {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  text-align: left;
  padding: 10px;
  background: #F9F9FB;
  border-radius: 12px;
}
.modal-overlay-custom .selected-item-preview img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 15px;
  border: 1px solid #eee;
}
.modal-overlay-custom .selected-item-preview .info .name {
  display: block;
  font-weight: 700;
  color: #333373;
  font-size: 14px;
  margin-bottom: 2px;
}
.modal-overlay-custom .selected-item-preview .info .site {
  font-size: 12px;
  color: #666;
  font-family: "Inter";
}
.modal-overlay-custom .btn-confirm-date {
  width: 100%;
  background: #1A1A80;
  color: #fff;
  padding: 16px;
  border-radius: 50px;
  border: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(26, 26, 128, 0.25);
  margin-bottom: 20px;
  transition: transform 0.2s;
}
.modal-overlay-custom .btn-confirm-date:active {
  transform: scale(0.98);
}
.modal-overlay-custom .link-remove-item {
  color: #FF5E5E;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
}
.modal-overlay-custom .link-remove-item:hover {
  text-decoration: underline;
}
/* ==========================================================================
   3. Modal Fecha (GLOBAL / RAÍZ)
   ========================================================================== */
.custom-ios-picker {
  position: relative;
  width: 100%;
  height: 200px !important;
  background: #fff;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 25px;
  /* Máscara para simular profundidad */
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.custom-ios-picker .picker-columns {
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
.custom-ios-picker .picker-col {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-align: center;
  padding: 0;
  /* Scroll Snapping por defecto (Activo cuando sueltas) */
  scroll-snap-type: y mandatory;
  /* CURSOR DE "MANITA" PARA DESKTOP */
  cursor: grab;
  cursor: -webkit-grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.custom-ios-picker .picker-col::-webkit-scrollbar {
  display: none;
}
.custom-ios-picker .picker-col.is-dragging {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.custom-ios-picker .picker-item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  scroll-snap-align: center;
  transition: all 0.2s;
}
.custom-ios-picker .picker-item.selected-snap {
  color: #000;
  font-size: 19px;
  font-weight: 700;
  transform: scale(1.1);
}
.custom-ios-picker .picker-spacer {
  height: 80px;
  width: 100%;
}
.custom-ios-picker .picker-selection-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40px;
  margin-top: -20px;
  border-top: 1px solid #E6E6EE;
  border-bottom: 1px solid #E6E6EE;
  pointer-events: none;
  z-index: 1;
}
/* --- ESTILOS DE ESTADO CONFIRMADO (Check Verde) --- */
.confirm-articles-page .items-list-container .article-row {
  /* Cuando el artículo está confirmado */
}
.confirm-articles-page .items-list-container .article-row.confirmed .circle-select-btn {
  background-color: #27AE60; /* Verde Éxito */
  border-color: #27AE60;
  transform: scale(1.1);
  /* Dibujamos el check blanco con CSS puro o Icono */
  /* Desactivamos click para que no lo reabran (opcional) */
  /* pointer-events: none; */
  /* Ocultamos el puntito azul anterior */
}
.confirm-articles-page .items-list-container .article-row.confirmed .circle-select-btn::after {
  content: "✔";
  color: white;
  font-size: 14px;
  font-weight: bold;
}
.confirm-articles-page .items-list-container .article-row.confirmed .circle-select-btn .inner-circle {
  display: none;
}
/* --- SECCIÓN SUBIR COMPROBANTE (Oculta por defecto) --- */
.upload-proof-section {
  display: none; /* Se activa con JS */
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 40px;
  animation: fadeIn 0.5s ease-out;
  /* Estilo para el link "Más tarde" */
}
.upload-proof-section .helper-text-proof {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 25px;
  max-width: 500px;
}
.upload-proof-section .helper-text-proof strong {
  color: #000;
  font-weight: 700;
}
.upload-proof-section .btn-upload-proof {
  background-color: #1A1A80;
  color: #fff;
  padding: 16px 40px;
  border-radius: 50px;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.3);
  transition: transform 0.2s;
}
.upload-proof-section .btn-upload-proof:hover {
  transform: translateY(-2px);
  background-color: #0806AE;
}
.upload-proof-section .btn-upload-proof:active {
  transform: scale(0.98);
}
.upload-proof-section .link-skip-step {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.upload-proof-section .link-skip-step:hover {
  color: #333373;
}
/* ==========================================================================
   ESTADOS VACÍOS (EMPTY STATES)
   ========================================================================== */
/* 1. ESTADO VACÍO GLOBAL (Cuando NO HAY NADA en absoluto) */
/* Visible en Móvil y Desktop */
.global-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  min-height: 50vh;
  animation: fadeInGlobal 0.5s ease-out;
}
.global-empty-state .empty-icon {
  font-size: 50px;
  margin-bottom: 20px;
  opacity: 0.5;
  /* 
     width: 150px; height: auto; object-fit: contain; margin-bottom: 20px; 
  */
}
.global-empty-state .empty-title {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  color: #333373;
  font-weight: 700;
  margin-bottom: 15px;
}
.global-empty-state .empty-text {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #666;
  max-width: 350px;
  margin-bottom: 35px;
  line-height: 1.5;
}
.global-empty-state .btn-cotizar-empty {
  background-color: #1A1A80;
  color: white;
  padding: 16px 45px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(26, 26, 128, 0.2);
  transition: transform 0.2s, background-color 0.2s;
}
.global-empty-state .btn-cotizar-empty:hover {
  transform: translateY(-3px);
  background-color: #0806AE;
}
/* ==========================================================================
   ESTADO VACÍO: CAJA PUNTEADA 
   Se muestra cuando una sección específica está vacía, pero no todas.
   ========================================================================== */
.empty-dashed-box {
  /* Ocupa el 100% del contenedor padre (el carrusel) */
  width: 100%;
  box-sizing: border-box;
  min-height: 220px; /* Un poco más alto para presencia en Desktop */
  margin-top: 0; /* Alineado con las tarjetas vecinas */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #FAFAFC;
  border: 1px dashed #DCDCDF; /* El borde punteado que te gusta */
  border-radius: 12px;
  padding: 40px;
  /* Icono */
  /* Títulos */
  /* Subtítulo */
  /* Botón (Opcional, estilo píldora) */
}
.empty-dashed-box .empty-icon {
  font-size: 32px;
  margin-bottom: 15px;
  opacity: 0.8;
  line-height: 1;
  filter: grayscale(100%); /* Lo hace ver sutil/desactivado */
}
.empty-dashed-box .empty-title {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  color: #333373;
  font-weight: 500;
  margin: 5px 0;
}
.empty-dashed-box .empty-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #9EA0A5;
  margin-bottom: 20px;
  max-width: 300px;
  line-height: 1.5;
}
.empty-dashed-box .btn-small-action {
  display: inline-block;
  background: transparent;
  color: #0806AE;
  border: 1px solid #0806AE;
  border-radius: 50px;
  padding: 8px 25px;
  font-family: "Rubik", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.empty-dashed-box .btn-small-action:hover {
  background-color: #0806AE;
  color: #fff;
  transform: translateY(-2px);
}
/* =========================================
   DESKTOP ADAPTATION 
   ========================================= */
@media (min-width: 768px) {
  .desktop-only {
    display: flex !important;
  }
  .mobile-only {
    display: none !important;
  }
  /* RESET FONDO PARA DESKTOP */
  .dashboard .container-dashboard {
    background-color: #fff;
    padding: 30px 19px 53px 50px;
    /*    height: auto !important; */
    overflow-y: visible !important;
    position: relative;
    z-index: 400;
  }
  .dashboard .dashboard-header {
    margin-top: -65px;
    padding-bottom: 20px;
    position: sticky;
    top: -40px;
    /*  z-index: 500;    */
    background-color: #fff;
    padding-top: 40px;
  }
  /* 2. Ajustes de Header y Tabs Desktop */
  .header-back-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #0806AE;
  }
  .header-back-link:hover {
    opacity: 0.8;
  }
  .tabs-inline {
    display: none !important;
  }
  .tabs-inline .divider {
    color: #E6E6EE;
    font-size: 18px;
  }
  .tabs-inline .tab-link {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #9EA0A5;
    font-weight: 500;
    transition: color 0.3s;
    cursor: pointer;
  }
  .tabs-inline .tab-link:hover {
    color: #0806ae;
  }
  .tabs-inline .tab-link.active {
    color: #0806ae;
    font-weight: 700;
  }
  /* 3. Contenedor y Grid Horizontal */
  .container-paquetes {
    padding-top: 16px;
    max-width: 1100px;
    margin: 0px 0px 0px 0px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-height: auto;
    z-index: auto !important;
    position: absolute;
    /* === CORRECCIÓN DE IMÁGENES DESKTOP === */
    /* Header de Sección con Flechas */
  }
  .container-paquetes .cards-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 20px 0;
    margin-top: -15px;
    position: relative;
    z-index: 10;
  }
  .container-paquetes .cards-grid.scroll-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px;
    padding-left: 5px;
    padding-right: 20px;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
    /* Ocultar scrollbars */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .container-paquetes .cards-grid.scroll-grid::-webkit-scrollbar {
    display: none;
  }
  .container-paquetes .cards-grid.scroll-grid .card-import,
  .container-paquetes .cards-grid.scroll-grid .card-export {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-margin-left: 0px;
  }
  .container-paquetes .cards-grid.scroll-grid .card-import {
    max-width: 275px;
    max-height: 261px;
  }
  .container-paquetes .cards-grid.scroll-grid .card-export {
    max-width: 284px;
  }
  .container-paquetes .cards-grid.scroll-grid .card-export .route-display .arrow-line {
    background-color: #333373;
  }
  .container-paquetes .card-import .card-header-images {
    height: 18px;
    padding-left: 10px;
    margin-top: 2px;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper {
    display: block;
    position: relative;
    height: 64px;
    margin-left: 0;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img {
    margin-left: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 86px !important;
    height: 64px !important;
    border-radius: 42px !important;
    border: 1px solid #fff !important;
    top: 0;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-1 {
    left: 0px !important;
    z-index: 1;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-2 {
    left: 45px !important;
    z-index: 2;
  }
  .container-paquetes .card-import .card-header-images .merged-images-wrapper .product-img.img-3 {
    left: 90px !important;
    z-index: 3;
  }
  .container-paquetes .card-import .item-count {
    color: #333373;
    font-size: 14px;
    font-weight: 400;
    margin: 32px 0 0px 0;
  }
  .container-paquetes .card .card-footer .status-text {
    font-size: 14px;
    color: #0806AE;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    max-width: 208px;
  }
  .container-paquetes .section-header-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 80px;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 48px;
    position: relative;
  }
  .container-paquetes .section-header-wrapper .section-subtitle {
    font-family: "Rubik", sans-serif;
    font-size: 23px;
    color: #333373;
    font-weight: 700;
    margin: 0;
  }
  .container-paquetes .section-header-wrapper .carousel-controls {
    display: flex;
    gap: 10px;
    position: relative;
  }
  .container-paquetes .section-header-wrapper .carousel-controls .nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #E6E6EE;
    background: transparent;
    color: #333373;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    position: relative;
  }
  .container-paquetes .section-header-wrapper .carousel-controls .nav-btn:hover {
    background: #0806ae;
    color: white;
    border-color: #0806ae;
    box-shadow: 0 4px 8px rgba(8, 6, 174, 0.2);
  }
  /* === ADAPTACIÓN DETALLE DE PAQUETE (FIGMA STYLE) === */
  .detalle-paquete-container {
    /* Ajuste del separador */
  }
  .detalle-paquete-container .detail-top-header {
    margin-bottom: 40px;
  }
  .detalle-paquete-container .detail-top-header .page-title {
    font-size: 24px;
    margin-bottom: 0;
  }
  .detalle-paquete-container .package-main-info {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas: "images route" "data edit";
    -moz-column-gap: 60px;
         column-gap: 60px;
    row-gap: 25px;
    align-items: center;
    margin-bottom: 50px;
  }
  .detalle-paquete-container .package-main-info .images-cluster {
    grid-area: images;
    margin-bottom: 0;
  }
  .detalle-paquete-container .package-main-info .route-info {
    grid-area: route;
    justify-content: flex-start;
    width: auto;
    margin-top: 0;
    gap: 20px;
  }
  .detalle-paquete-container .package-main-info .route-info .route-arrow-long {
    width: 100px;
    background: linear-gradient(90deg, rgba(51, 51, 115, 0.1) 0%, #333373 100%);
  }
  .detalle-paquete-container .package-main-info .meta-data-row {
    grid-area: data;
    justify-content: flex-start;
    gap: 35px;
  }
  .detalle-paquete-container .package-main-info .meta-data-row .data-col .label {
    font-size: 14px;
    color: #333373;
    font-weight: 400;
  }
  .detalle-paquete-container .package-main-info .meta-data-row .data-col .value {
    font-size: 16px;
    font-weight: 500;
  }
  .detalle-paquete-container .package-main-info .edit-action-container {
    grid-area: edit;
    justify-content: flex-start;
    margin-top: 0;
  }
  .detalle-paquete-container .package-main-info .edit-action-container .edit-link {
    font-size: 16px;
  }
  .detalle-paquete-container .separator-line-thick {
    display: block !important;
    height: 1px;
    background-color: #E6E6EE;
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}
/* ==========================================================================
   AJUSTE  PANTALLAS CON POCA ALTURA 
   ========================================================================== */
@media (min-width: 768px) and (max-height: 850px) {
  .dashboard .container-dashboard {
    height: 110vh !important;
    overflow-y: auto !important;
    padding-bottom: 50px;
    -ms-overflow-style: auto !important;
    scrollbar-width: none !important;
  }
  .dashboard .container-dashboard::-webkit-scrollbar {
    display: block !important;
    width: 8px;
  }
  .dashboard .container-dashboard::-webkit-scrollbar-track {
    background: transparent;
  }
  .dashboard .container-dashboard::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  .dashboard .container-dashboard::-webkit-scrollbar-thumb:hover {
    background-color: #0806AE;
  }
}
body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #000019;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}
#main-content {
  flex: 1;
  background-color: #ffffff;
  position: relative;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  /*   max-width: 1112px; */
  padding: 30px 19px 53px 50px;
  position: relative;
  z-index: 2;
}
/* Decorative Background */
.bg-decoration {
  position: absolute;
  top: -160px;
  right: -100px;
  width: 389px;
  height: 389px;
  z-index: 1;
  pointer-events: none;
}
/* Header */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}
.back-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #0806ae;
  font-weight: 500;
}
.user-info {
  text-align: right;
  color: #333373;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Stepper */
.stepper-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto 80px;
}
.stepper-line {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #cbcbe3;
  z-index: -1;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  padding: 0 10px;
}
.step-circle {
  position: relative;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.step-number {
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: #050468;
}
.step.active .step-number {
  color: #e6e6ee;
}
.step-label {
  font-size: 12px;
  color: #ccccdc;
}
.step.active .step-label {
  color: #000019;
  font-weight: 600;
}
/* Content Grid */
.content-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
}
.left-col {
  flex: 0 0 40%;
}
.right-col {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.right-col form {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
  max-width: 450px;
  align-items: stretch;
  padding: 0% !important;
  margin-top: 70px;
}
.form-group input[name=valor] {
  border: none !important;
  color: #333373;
  font-weight: 600;
}
.page-title {
  font-size: 22px;
  color: #333373;
  margin: 0 0 12px 0;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
}
.page-subtitle {
  font-size: 16px;
  color: #000019;
  margin: 0 0 30px 0;
  line-height: 1.4;
  font-family: "Inter", sans-serif;
}
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.custom-checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #000019;
}
.custom-checkbox-container .custom-checkbox {
  width: 22px;
  height: 22px;
  border: 1.5px solid #0806ae;
  border-radius: 6px;
  background-color: #ffffff;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.custom-checkbox-container:hover .custom-checkbox {
  background-color: rgba(8, 6, 174, 0.05);
}
.checkbox-group img {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  cursor: help;
}
/* Forms */
.form-input {
  width: 100%;
  height: 59px;
  border: 1px solid #0806ae !important;
  border-radius: 5px;
  padding: 0 16px;
  font-size: 14px;
  color: #333373;
  outline: none;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1);
}
.form-input::-moz-placeholder {
  color: #333373;
}
.form-input::placeholder {
  color: #333373;
}
.form-row {
  display: flex;
  gap: 20px;
}
.form-group.disabled {
  flex: 1;
  position: relative;
  height: 59px;
}
.input-bg {
  width: 100%;
  height: 100%;
  background-color: #e6e6ee;
  border-radius: 5px;
  opacity: 0.5;
}
.input-label {
  font-size: 14px;
  color: #000019;
}
.form-group.small {
  width: 120px;
}
.select-input {
  width: 100%;
  height: 59px;
  border: 1px solid #0806ae;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  color: #000019;
  cursor: pointer;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1);
}
.submit-btn {
  width: 100%;
  height: 58px;
  border-radius: 30px;
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  color: white;
  font-weight: 600;
  font-size: 16px;
  margin-top: 20px;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.submit-btn:hover {
  opacity: 1;
}
.promo-text {
  text-align: center;
  font-size: 12px;
  color: #333373;
  margin-top: 10px;
}
.custom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.modal-content {
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 30px;
  width: 100%;
  max-width: 600px;
  position: relative;
  text-align: center;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  border: 1.5px solid #0806ae;
}
.close-modal {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
  font-weight: 400;
}
.modal-title {
  color: #333373; /* Azul marino del diseño */
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: "Rubik", sans-serif;
}
.modal-illustration {
  width: 180px; /* Ajusta según el tamaño de tu imagen */
  height: auto;
  margin: 10px auto 25px;
  display: block;
}
.modal-description {
  color: #555;
  font-size: 18px;
  line-height: 1.5;
  padding: 0 10px;
  font-family: "Rubik", sans-serif;
  font-weight: 100;
}
/* Contenedor general */
.ropa-attach-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Texto informativo (NO campo visual) */
.ropa-attach-text {
  font-size: 14px;
  font-weight: 400;
  color: #6b6b6b;
  margin: 0;
  padding: 0;
}
/* Botón */
.ropa-attach-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
}
/* Importante: evita que herede estilos de form-group */
.form-row-ropa-links.add-image-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mobile-back-layer {
  display: none; /* oculto por defecto */
}
@media (max-width: 900px) {
  .content-grid {
    flex-direction: column;
    gap: 0px;
  }
  .left-col,
  .right-col {
    flex: 1 1 100%;
  }
  .bg-decoration {
    display: none;
  }
}
@media (max-width: 768px) {
  .mobile-back-layer {
    display: block;
    padding: 20px;
  }
  /* ocultamos back desktop */
  .back-link {
    display: none !important;
  }
  .user-profile,
  .stepper,
  .top-header,
  .stepper-container,
  .bg-decoration {
    display: none;
  }
  .main-header {
    display: block;
  }
  .right-col form {
    gap: 0px !important;
    margin-top: 0;
  }
  #main-content {
    background-color: #f5f6fa;
    padding: 0;
    min-height: 100vh;
    display: block;
  }
  .container {
    padding: 0px;
    max-width: 100%;
    overflow-y: auto;
  }
  .content-grid {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 40px;
    padding: 35px 25px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
    margin: 0px;
  }
  .left-col {
    width: 100%;
    margin-bottom: 25px;
    padding: 0;
  }
  .page-title {
    /*  font-size: 26px;
     color: #333373;
     font-weight: 800; */
    margin: 0;
  }
  .page-subtitle {
    /*  font-size: 15px;
     color: #555; */
    margin-top: 5px;
  }
  /* 5. Estilo de los Inputs */
  .right-col {
    width: 100%;
  }
  .form-group {
    margin-bottom: 18px;
    position: relative;
  }
  .form-input {
    height: 60px;
    border: 1.5px solid #6c63ff; /* Borde azul fino */
    border-radius: 12px;
    padding: 0 15px;
    font-size: 15px;
    background: white;
  }
  /* Botón PEGAR dentro del input */
  .input-paste-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #0806ae;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
  }
  .form-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
  }
  .qty-input {
    flex: 1;
  }
  .value-input {
    flex: 2;
  }
  .value-input .form-input {
    background-color: #e9e9f7 !important;
    border: none !important;
    color: #0806ae !important;
    font-weight: 700;
    text-align: right;
  }
  .submit-btn {
    width: 100%;
    height: 65px;
    border-radius: 35px;
    background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-top: 15px;
    box-shadow: 0 10px 25px rgba(22, 23, 74, 0.4);
    border: none;
  }
}
.form-group {
  background-color: #ffffff;
  border: 1.5px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  justify-content: normal;
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  height: 60px;
}
/* Valor (precio) specific styling: background and no borders */
/* Uses :has() to target the .form-group that contains the valor input */
.form-group:has(input[name=valor]) {
  background-color: #E6E6F7;
  border: none;
  box-shadow: none;
}
.form-group:has(input[name=valor]) .form-input {
  background: transparent;
  border: none !important;
  color: #333373;
  font-weight: 700;
}
.input-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
  font-weight: 500;
  pointer-events: none;
}
.form-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 15px;
  color: #0806AE;
  width: 100%;
  box-shadow: none !important;
  height: auto !important;
}
.form-group[style*="background-color: #e9e9f7"] {
  border: none;
}
.submit-btn {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  color: #fff;
  border-radius: 35px;
  padding: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(22, 23, 74, 0.4);
}
.shipping-warning {
  margin-top: 15px;
  font-size: 11px;
  color: #6b6b6b;
  font-style: italic !important;
}
@media (max-width: 768px) {
  .shipping-warning {
    width: 100%;
    font-size: 9px;
    line-height: 1.4;
    margin-top: 15px;
    color: #6b6b6b;
    white-space: nowrap;
  }
  .custom-modal {
    align-items: flex-end;
    justify-content: center;
  }
  .modal-content {
    width: 100% !important;
    max-width: none;
    border-radius: 40px 40px 0 0 !important;
    min-height: auto !important;
    max-height: 85vh !important;
    margin: 0;
    border: 0;
  }
  .modal-title {
    font-size: 16px;
  }
  .modal-description {
    font-size: 16px;
  }
}
/* ESTILOS ESPECÍFICOS PARA CATEGORÍA ROPA */
/* Layout de una columna para ropa */
.content-grid-ropa {
  display: flex;
  justify-content: flex-start;
  margin-top: 60px;
  align-items: flex-start;
}
.form-wrapper-ropa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.ropa-header-section {
  margin-bottom: 20px;
  width: 100%;
}
.ropa-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Fila especial para enlaces de ropa */
.form-row-ropa-links {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  margin-bottom: 40px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.form-row-ropa-links button {
  width: 350px !important;
  height: 59px !important;
  flex-shrink: 0;
  align-self: flex-start !important;
  display: inline-block !important;
}
/* Contenedor para links adicionales dinámicos */
#additional-ropa-links-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 350px !important;
  max-width: 350px !important;
}
#additional-ropa-links-container .form-group {
  width: 350px !important;
  height: 59px !important;
  margin-bottom: 25px !important;
}
#additional-ropa-links-container .form-group input {
  height: 59px !important;
}
/* Preview de imagen para ropa */
.preview-container-ropa {
  width: 100% !important;
  margin-bottom: 25px !important;
  display: none !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.preview-container-ropa.show-preview {
  display: flex !important;
}
.preview-container-ropa .preview-wrapper {
  width: 100% !important;
  max-width: 320px !important;
  aspect-ratio: 4/3 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
  margin-left: 0 !important;
}
.preview-container-ropa .preview-wrapper img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  display: block !important;
}
/* Sección de comentarios para ropa */
.comments-section-ropa {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100% !important;
  max-width: 100% !important;
}
.comments-title {
  font-size: 20px;
  color: #000019;
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
}
.comments-description {
  font-size: 13px;
  color: #555;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-family: "Inter", sans-serif;
}
/* Espaciado aumentado para ropa */
.ropa-form .form-group {
  margin-bottom: 25px !important;
}
.ropa-form .form-row {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 35px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.ropa-form .form-row .form-group {
  margin-bottom: 0 !important;
}
/* Botón Agregar Artículo para ropa */
.ropa-form .submit-btn {
  width: 340px !important;
  height: 59px !important;
  margin: 0 !important;
  display: block !important;
}
/* Tamaños específicos para ropa - Desktop */
/* Fila de Peso/Unidades/Valor - Primera línea (Peso + Unidades = 350px total) */
.ropa-form .form-row:first-of-type {
  gap: 10px !important;
}
.ropa-form .form-row:first-of-type .form-group:nth-child(1) {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}
.ropa-form .form-row:first-of-type .form-group:nth-child(1) input, .ropa-form .form-row:first-of-type .form-group:nth-child(1) select {
  height: 59px !important;
}
.ropa-form .form-row:first-of-type .form-group:nth-child(2) {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}
.ropa-form .form-row:first-of-type .form-group:nth-child(2) input, .ropa-form .form-row:first-of-type .form-group:nth-child(2) select {
  height: 59px !important;
}
.ropa-form .form-row:first-of-type .form-group:nth-child(3) {
  width: 340px !important;
}
.ropa-form .form-row:first-of-type .form-group:nth-child(3) input, .ropa-form .form-row:first-of-type .form-group:nth-child(3) select {
  height: 59px !important;
}
/* Enlace del artículo - primer input */
#additional-ropa-links-container .form-group {
  width: 340px !important;
  height: 59px !important;
  margin-bottom: 25px !important;
}
#additional-ropa-links-container .form-group input {
  height: 59px !important;
}
/* Textarea comentarios */
.comments-section-ropa textarea {
  width: 619px;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  border: 1px solid #0806ae !important;
  font-family: "Inter", sans-serif !important;
}
/* Estilos para el grupo de imagen añadida */
.form-group.add-image-group.es-categoria-ropa {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.form-group.add-image-group button {
  margin: 0 !important;
}
/* Botón Adjuntar para ropa con estilo input */
.submit-btn.ropa-attach-btn {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0806ae !important;
  border: 1px solid #0806ae !important;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 5px !important;
  height: 59px !important;
  margin-top: 0 !important;
}
/* Media queries para ropa */
@media (max-width: 768px) {
  .content-grid-ropa {
    margin-top: 60px;
    background: white;
    border-radius: 30px;
    padding: 24px 18px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
  }
  .form-wrapper-ropa {
    max-width: 100%;
  }
  .ropa-header-section {
    margin-bottom: 24px;
  }
  /* ============================= */
  /* FILAS GENERALES */
  /* ============================= */
  .ropa-form {
    /* ============================= */
    /* PRIMERA FILA */
    /* ============================= */
    /* ============================= */
    /* LINKS / ADJUNTAR */
    /* ============================= */
    /* ============================= */
    /* LINKS ADICIONALES */
    /* ============================= */
    /* ============================= */
    /* COMENTARIOS */
    /* ============================= */
    /* ============================= */
    /* BOTÓN FINAL */
    /* ============================= */
  }
  .ropa-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
  }
  .ropa-form .form-group {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    margin-bottom: 0;
  }
  .ropa-form input, .ropa-form select, .ropa-form textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .ropa-form .form-row:first-of-type {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .ropa-form .form-row:first-of-type .form-group:nth-child(1),
  .ropa-form .form-row:first-of-type .form-group:nth-child(2) {
    flex: 1 1 calc(50% - 5px);
    width: 220px !important;
    min-width: auto !important;
  }
  .ropa-form .form-row:first-of-type .form-group:nth-child(3) {
    flex: 1 1 100%;
    margin-top: 10px;
  }
  .ropa-form .form-row-ropa-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
  }
  .ropa-form .form-row-ropa-links .form-group {
    width: 100%;
  }
  .ropa-form .form-row-ropa-links .ropa-attach-btn {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-weight: 700;
  }
  .ropa-form .form-row-ropa-links .add-image-group {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .ropa-form #additional-ropa-links-container .form-row-ropa-additional-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ropa-form #additional-ropa-links-container .form-row-ropa-additional-link .form-group {
    width: 100%;
  }
  .ropa-form #additional-ropa-links-container .form-row-ropa-additional-link button {
    width: 100%;
  }
  .ropa-form .comments-section-ropa {
    margin-bottom: 30px;
    gap: 15px;
  }
  .ropa-form .comments-section-ropa textarea {
    width: 100%;
    min-height: 120px;
    border-radius: 10px;
    padding: 12px;
  }
  .ropa-form .comments-title {
    font-size: 16px;
  }
  .ropa-form .comments-description {
    font-size: 14px;
  }
  .ropa-form .submit-btn {
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
  }
  .ropa-form .form-group:has(input[name=valor]) {
    height: 44px;
    padding: 6px 12px;
  }
  .ropa-form .form-group:has(input[name=valor]) .form-input {
    font-size: 14px;
  }
}
/* ============================= */
/* POPUP ARTÍCULO AGREGADO */
/* ============================= */
.add-item-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
/* Estado activo */
.add-item-popup.active {
  display: flex;
}
/* Contenedor del popup */
.add-item-popup .popup-content {
  background-color: #fff;
  padding: 60px;
  border-radius: 30px;
  width: 100%;
  max-width: 600px;
  position: relative;
  text-align: center;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  border: 1.5px solid #0806ae;
  animation: popupIn 0.25s ease;
}
/* Animación */
@keyframes popupIn {
  from {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
/* Título */
.add-item-popup .popup-title {
  color: #2D366D;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}
/* Texto */
.add-item-popup .popup-text {
  color: #555;
  font-size: 15px;
  line-height: 1.5;
  padding: 0 10px;
  margin-bottom: 25px;
}
/* Botón */
.add-item-popup .popup-btn {
  width: 100%;
  height: 58px;
  border-radius: 30px;
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(22, 23, 74, 0.35);
}
/* Botón hover */
.add-item-popup .popup-btn:hover {
  opacity: 0.95;
}
/* ============================= */
/* MOBILE */
/* ============================= */
@media (max-width: 768px) {
  .add-item-popup {
    align-items: flex-end;
    justify-content: center;
  }
  .add-item-popup .popup-content {
    width: 100%;
    max-width: none;
    border-radius: 40px 40px 0 0;
    min-height: auto;
    max-height: 85vh;
    margin: 0;
    border: 0;
  }
}
.edit-section {
  display: block;
  height: 85vh;
  background-color: #E6E6EE;
  margin: 0 auto;
  overflow-x: hidden;
  /*   .top-right-area {
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none;
      z-index: 0;
    }
    .top-right-area::before {
      content: "";
      position: absolute;
      top: -125px;      
      right: -145px;
      width: 389px;
      height: 389px;
      background: #FDFBCF; 
      border-radius: 50%;
      z-index: 0;      
      display: none;   
    } */
  /* .user-profile {
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 999999;
    position: relative;

    #avatar-seleccionado {
      width: 60px;
      height: 54px;
      margin-bottom: -45px;
      margin-left: 2px;   
    }

    a{
      border-radius: 100%;
      background-color: white;
      height: 60px;
      width: 60px;

    }

  } */
  /*   .user-name {
     font-size: 16.35px;
     font-weight: 600;
     color: var(--color-primary);
     text-align: right;
     line-height: 1.2;
     margin-right: 6px;
   } */
  /*  .user-avatar {
     width: 60px;
     height: 60px;
     position: relative;
     filter: drop-shadow(0px 12px 21px rgba(5, 4, 104, 0.15));
   } */
  /* -------------------------- */
}
.edit-section .main-content {
  flex-grow: 1;
  padding: 49px 0 0px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.edit-section .main-content .top-right-area::before {
  top: -100px;
}
.edit-section .back-header {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  width: auto;
  gap: 80px;
  justify-content: space-between;
}
.edit-section .back-link {
  display: none;
  align-items: center;
  gap: 10px;
  color: #0806ae;
  font-weight: 600;
  margin-bottom: 30px;
  width: -moz-fit-content;
  width: fit-content;
}
.edit-section .container {
  background: white;
  padding: 30px 10px;
  border-radius: 40px 40px 0 0;
}
.edit-section .content-header {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  display: none;
}
.edit-section .content-header .stepper-container {
  display: flex;
  justify-content: start;
  margin-bottom: 40px;
  max-width: 800px;
  margin: 0;
}
.edit-section .content-header .stepper-container .stepper {
  display: flex;
  align-items: center;
  max-width: 100%;
  /*   max-width: 800px; */
  justify-content: space-between;
}
.edit-section .content-header .stepper-container .stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  background-color: transparent;
}
.edit-section .content-header .stepper-container .stepper .step-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000019;
  background-color: #e6e6ee;
  font-family: "Rubik", sans-serif;
}
.edit-section .content-header .stepper-container .stepper .step.active .step-circle {
  background-color: #0806AE;
  color: #fff;
}
.edit-section .content-header .stepper-container .stepper .step.active .step-label {
  color: #000019;
}
.edit-section .content-header .stepper-container .stepper .step:first-child .step-circle {
  background-color: #e6e6ee;
  color: #000019;
}
.edit-section .content-header .stepper-container .stepper .step-label {
  font-size: 12px;
  color: #ccccdc;
  font-family: "Inter", sans-serif;
}
.edit-section .content-header .stepper-container .stepper .step:first-child .step-label {
  color: #000019;
}
.edit-section .content-header .stepper-container .stepper .step-line {
  flex-grow: 1;
  height: 1px;
  background-color: #ccccdc;
  margin: 0 -38px;
  margin-bottom: 20px;
}
.edit-section .content-header .stepper-container .stepper .line {
  display: none;
}
.edit-section .dashboard-container-edit {
  max-width: 375px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  /* Footer */
}
.edit-section .dashboard-container-edit .main-content {
  flex-grow: 1;
  padding: 40px 60px;
  position: relative;
}
.edit-section .dashboard-container-edit .form-container {
  max-width: 900px;
  margin: 0 auto;
}
.edit-section .dashboard-container-edit .page-title {
  font-size: 22px;
  color: #333373;
  margin-bottom: 20px;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
}
.edit-section .dashboard-container-edit .checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 29px;
  cursor: pointer;
}
.edit-section .dashboard-container-edit .checkbox-icon {
  width: 22px;
  height: 22px;
  border: 1px solid #0806AE;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-section .dashboard-container-edit .checkbox-label {
  color: #000019;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.edit-section .dashboard-container-edit .product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
  margin-bottom: 60px;
  /*  width: 800px; */
  margin: auto;
}
.edit-section .dashboard-container-edit .movil {
  display: block;
}
.edit-section .dashboard-container-edit .desktop {
  display: none;
}
.edit-section .dashboard-container-edit .product-image-col {
  flex: 0 0 237px;
  width: 355px;
  height: 190px;
}
.edit-section .dashboard-container-edit .product-img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 100%;
}
.edit-section .dashboard-container-edit .product-details-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
}
.edit-section .dashboard-container-edit .input_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-section .dashboard-container-edit .input_group label {
  font-size: 12px;
  color: #000019;
}
.edit-section .dashboard-container-edit .input-box,
.edit-section .dashboard-container-edit .input-link-m,
.edit-section .dashboard-container-edit .input-box-d {
  border: 1px solid #0806ae;
  border-radius: 5px;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.1);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  width: 355px;
  height: 59px;
}
.edit-section .dashboard-container-edit .input-link-m {
  flex-direction: row;
  justify-content: space-between;
  max-width: 355px;
  width: 100%;
}
.edit-section .dashboard-container-edit .input-link-m .link-text {
  display: grid;
}
.edit-section .dashboard-container-edit .input-link-m .link-text span {
  cursor: pointer;
}
.edit-section .dashboard-container-edit .input-link-m .label p {
  margin: 5px 0 1rem;
  font-size: 16px;
  color: #0806AE;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
.edit-section .dashboard-container-edit .input-box-d {
  display: none;
}
.edit-section .dashboard-container-edit .input-value {
  font-size: 16px;
  color: #333373;
  font-family: "Inter", sans-serif;
}
.edit-section .dashboard-container-edit .text-value {
  color: #000000;
  font-weight: 500;
}
.edit-section .dashboard-container-edit .input-row-split {
  display: flex;
  gap: 10px;
  width: 355px;
  flex-direction: row-reverse;
}
.edit-section .dashboard-container-edit .value-group {
  flex: 2;
}
.edit-section .dashboard-container-edit .quantity-group {
  flex: 1;
}
.edit-section .dashboard-container-edit .value-box {
  background-color: #e6e6ee;
  border: none;
  justify-content: space-between;
  width: 228px;
  height: 59px;
  border-radius: 5px;
  display: flex;
  padding: 16px 16px;
}
.edit-section .dashboard-container-edit .label-inline {
  font-size: 16px;
  color: #000019;
}
.edit-section .dashboard-container-edit .value-inline {
  font-size: 16px;
  font-weight: 700;
  color: #0806AE;
}
.edit-section .dashboard-container-edit .quantity-box {
  justify-content: space-between;
  padding: 8px 16px;
  width: 116px;
}
.edit-section .dashboard-container-edit .qty-content {
  display: flex;
  flex-direction: column;
}
.edit-section .dashboard-container-edit .qty-content .content-select-qty {
  display: flex;
}
.edit-section .dashboard-container-edit .select-icon {
  width: 12px;
  height: 6px;
}
.edit-section .dashboard-container-edit .label-small {
  font-size: 12px;
  color: #000019;
}
.edit-section .dashboard-container-edit .qty-value {
  font-size: 16px;
  color: #000000;
  padding: 0;
}
.edit-section .dashboard-container-edit .form-footer {
  display: flex;
  flex-direction: column;
  margin-bottom: 37px;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.edit-section .dashboard-container-edit .btn-save {
  background: linear-gradient(306deg, #000050 0%, #4747d9 100%);
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.3490196078);
  color: white;
  padding: 16px 48px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  max-width: 355px;
  width: 100%;
  transition: transform 0.2s;
  height: 58px;
  font-family: "Inter", sans-serif;
}
.edit-section .dashboard-container-edit .btn-save:hover {
  transform: translateY(-2px);
}
.edit-section .dashboard-container-edit .discount-text {
  color: #333373;
  font-size: 14px;
  margin: 0;
  text-align: right;
  width: 355px;
  display: none;
}
@media (min-width: 992px) {
  .edit-section .dashboard-container-edit .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .edit-section .stepper-container {
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .edit-section {
    display: flex;
    min-height: 100vh;
    background-color: white;
  }
  .edit-section .main-content {
    padding: 71px 37px 40px 60px;
    height: auto;
  }
  .edit-section .main-content .top-right-area::before {
    display: block;
  }
  .edit-section .main-content .user-profile {
    display: flex;
  }
  .edit-section .main-content .avatar-group {
    display: block;
  }
  .edit-section .main-content .back-header .back-link {
    display: flex;
  }
  .edit-section .main-content .container {
    padding: 0;
    background-color: transparent;
  }
  .edit-section .main-content .container .content-header {
    display: block;
  }
  .edit-section .main-content .container .content-header .line {
    display: block;
  }
  .edit-section .main-content .stepper-container {
    padding-left: 40px;
    padding-right: 40px;
  }
  .edit-section .dashboard-container-edit {
    width: 100%;
  }
  .edit-section .dashboard-container-edit .form-container .text-movil {
    display: none;
  }
  .edit-section .dashboard-container-edit .form-container .checkbox-row {
    margin-bottom: 40px;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid {
    max-width: 800px;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .movil {
    display: none;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .desktop {
    display: flex;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .product-image-col {
    width: auto;
    height: auto;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .product-img {
    width: auto;
  }
  .edit-section .dashboard-container-edit .form-container .product-grid .input-row-split {
    display: flex;
    flex-direction: row;
  }
  .edit-section .dashboard-container-edit .form-container .form-footer {
    align-items: flex-end;
  }
  .edit-section .dashboard-container-edit .form-container .form-footer .discount-text {
    display: block;
  }
}
.tutorial-traer {
  --primary-bg: #000050;
  --text-light: #ffffff;
  --content-bg: #ffffff;
  --status-bar-bg: #000000;
  --primary-text: #ffffff;
  --accent-color-1: #ccccdc;
  --accent-color-2: rgba(204, 204, 220, 0.5);
  --step-number-text: #333373;
  --shadow-color: rgba(5, 4, 104, 0.35);
  font-family: "Rubik", sans-serif;
  background-color: var(--primary-bg);
  color: var(--primary-text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ===== SLIDER CONTAINER GENERAL ===== */
  /* =========================================================
     SLIDE 1 (data-slide="0") - HERO + INFO REFACTORIZADO
     ========================================================= */
  /* =========================================================
     SLIDE 2 (Paso 1)
     ========================================================= */
  /* =========================================================
     SLIDE 3 (Paso 2)
     ========================================================= */
  /* =========================================================
     SLIDE 5 (CTA FINAL)
     ========================================================= */
  /* =========================================================
     RESPONSIVE
     ========================================================= */
}
.tutorial-traer * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.tutorial-traer *,
.tutorial-traer *::before,
.tutorial-traer *::after {
  box-sizing: border-box;
}
.tutorial-traer .slider-container {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
.tutorial-traer .slider-wrapper {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  width: 500vw;
  will-change: transform;
}
.tutorial-traer .slide {
  min-width: 100vw;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
.tutorial-traer .navigation-dots {
  display: none;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  gap: 12px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.tutorial-traer .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}
.tutorial-traer .dot.active {
  background: var(--accent-color-1);
  transform: scale(1.3);
}
.tutorial-traer .slide[data-slide="0"] {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 16px;
}
.tutorial-traer .page-wrapper {
  width: 100%;
  max-width: 420px;
  min-height: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tutorial-traer .hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 0 32px;
  position: relative;
  z-index: 1;
}
.tutorial-traer .hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 960px;
  z-index: 0;
  display: block;
}
.tutorial-traer .hero-bg-img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.tutorial-traer .hero-header,
.tutorial-traer .illustration-container {
  position: relative;
  z-index: 1;
}
.tutorial-traer .status-bar {
  width: 100%;
  height: 51px;
  background-color: var(--status-bar-bg);
  flex-shrink: 0;
}
.tutorial-traer .hero-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 0 24px;
}
.tutorial-traer .logo {
  max-width: 160px;
  height: auto;
  display: block;
}
.tutorial-traer .illustration-container {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.tutorial-traer .illustration-content {
  position: relative;
  width: 224px;
  height: 196px;
}
.tutorial-traer .package-character {
  text-align: center;
  position: absolute;
  bottom: 50px;
}
.tutorial-traer .package-character .img-part:nth-child(1) {
  width: 100%;
}
.tutorial-traer .package-character .img-part:nth-child(2) {
  margin-top: 2.5rem;
  width: 50%;
  justify-self: center;
}
.tutorial-traer .paper-plane {
  position: absolute;
  top: 0;
  left: 109px;
  width: 114.36px;
  height: 114.36px;
  transform: rotate(2.95deg);
}
.tutorial-traer .info-section {
  margin-top: 100px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tutorial-traer .info-content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.tutorial-traer .tagline {
  color: var(--text-light);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.tutorial-traer .steps-heading {
  color: var(--text-light);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  margin: 5rem 0;
  font-family: "Rubik", sans-serif;
}
.tutorial-traer .slide[data-slide="0"] {
  position: relative;
}
.tutorial-traer .slide[data-slide="0"] .click-section {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}
.tutorial-traer .slide[data-slide="0"] .click-section picture {
  display: block;
}
.tutorial-traer .slide[data-slide="0"] .click-section .click-img {
  width: 60px;
  height: auto;
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}
.tutorial-traer .main-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
.tutorial-traer .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tutorial-traer .progress-indicator1,
.tutorial-traer .progress-indicator2,
.tutorial-traer .progress-indicator3 {
  display: flex;
  width: 100%;
  max-width: 568px;
  gap: 8px;
  margin: 60px auto 30px auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.tutorial-traer [class^=progress-indicator] .bar {
  height: 3px;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.tutorial-traer [class^=progress-indicator] .bar.active {
  background-color: #ffffff;
}
.tutorial-traer .step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
  padding: 0 10px;
  margin-top: 30px;
}
.tutorial-traer .step-header1 {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px;
}
.tutorial-traer .step-number-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-traer .step-circle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0px 8px 14px var(--shadow-color));
}
.tutorial-traer .step-number {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--step-number-text);
  line-height: 1;
}
.tutorial-traer .step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  font-family: "Rubik", sans-serif;
}
.tutorial-traer .step-title1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  text-align: left;
}
.tutorial-traer .step-text {
  color: var(--primary-text);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  max-width: 26rem;
  text-align: left;
}
.tutorial-traer .phone-mockup {
  width: 100%;
  max-width: 960px;
}
.tutorial-traer .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tutorial-traer .phone-screen-content img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  place-self: center;
}
.tutorial-traer .phone-mockup-wrapper {
  position: absolute;
  top: 234px;
  left: 10px;
  width: 354.39px;
  height: 628px;
}
.tutorial-traer .phone-screen-container {
  position: absolute;
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
  border-radius: 38px;
  overflow: hidden;
  z-index: 5;
  background-color: #f5f5f5;
}
.tutorial-traer .phone-screen-image {
  width: 273px;
  height: 708px;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: -0.43px;
  left: -0.11px;
}
.tutorial-traer .frame-element {
  position: absolute;
}
.tutorial-traer .shadow-main {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
.tutorial-traer .screen-glare {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
.tutorial-traer .border {
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
}
.tutorial-traer .camera-notch {
  top: 22.34px;
  left: 155.62px;
  width: 43.69px;
  height: 5.04px;
}
.tutorial-traer .shadow-bottom {
  top: 584.34px;
  left: 51.67px;
  width: 251.05px;
  height: 40.75px;
}
.tutorial-traer .base-stand {
  top: 617.81px;
  left: 0;
  width: 354.39px;
  height: 10.19px;
}
.tutorial-traer .cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000050;
  text-align: center;
  min-height: 90vh;
  width: 100%;
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  padding: 40px 0;
}
.tutorial-traer .cta-container .picture-img {
  width: 120%;
  margin-top: 25px;
}
.tutorial-traer .cta-container .picture-img .cta-image {
  width: 120%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .picture-img .cta-image {
    max-width: 445px;
    margin: 0 auto;
    border-radius: 12px;
  }
}
.tutorial-traer .cta-container .cta-title {
  font-size: 32px;
  font-weight: 700;
  margin: 15px 0 15px;
  padding: 0 20px;
  font-family: "Rubik", sans-serif;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .cta-title {
    font-size: 40px;
  }
}
.tutorial-traer .cta-container .cta-description1,
.tutorial-traer .cta-container .cta-description2 {
  width: 100%;
  padding: 0 24px;
  font-size: 16px;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .cta-description1,
  .tutorial-traer .cta-container .cta-description2 {
    max-width: 450px;
    padding: 0;
    font-size: 18px !important;
  }
}
.tutorial-traer .cta-container .cta-description2 {
  margin-top: 15px;
}
.tutorial-traer .cta-container .cta-button1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 48px);
  max-width: 320px;
  height: 60px;
  margin-top: 30px;
  background: linear-gradient(180deg, #3b42c4 0%, #1e248a 100%);
  border-radius: 50px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .tutorial-traer .cta-container .cta-button1 {
    margin-top: 45px;
  }
}
.tutorial-traer .cta-container .cta-button1:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}
@media (min-width: 768px) {
  .tutorial-traer .slide[data-slide="0"] .click-section {
    bottom: 40px;
    right: 40px;
  }
  .tutorial-traer .slide[data-slide="0"] .click-section .click-img {
    width: 100px;
  }
}
@media (max-width: 375px) {
  .tutorial-traer .cta-container {
    padding-left: 21px;
    padding-right: 21px;
  }
}
@media (max-width: 576px) {
  .tutorial-traer .slide[data-slide="0"] {
    padding: 0;
    align-items: stretch;
  }
  .tutorial-traer .page-wrapper {
    min-height: 812px;
    border-radius: 0;
    box-shadow: none;
  }
  .tutorial-traer .hero-bg {
    width: 100%;
  }
  .tutorial-traer .hero-header {
    margin-top: 24px;
    padding: 0 20px;
  }
  .tutorial-traer .info-section {
    padding: 0 24px 72px;
    margin-top: 60px;
  }
  .tutorial-traer .package-character {
    bottom: 0;
  }
  .tutorial-traer .step-number-wrapper {
    width: 50px;
    height: 50px;
  }
  .tutorial-traer .step-title {
    font-size: 1.2rem;
  }
  .tutorial-traer .main-section {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }
  .tutorial-traer .slide[data-slide="1"] .phone-mockup,
  .tutorial-traer .slide[data-slide="2"] .phone-mockup,
  .tutorial-traer .slide[data-slide="3"] .phone-mockup {
    height: auto;
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tutorial-traer .slide[data-slide="1"] .phone-screen-content,
  .tutorial-traer .slide[data-slide="2"] .phone-screen-content,
  .tutorial-traer .slide[data-slide="3"] .phone-screen-content {
    width: 100%;
    height: auto;
  }
  .tutorial-traer .slide[data-slide="1"] .phone-screen-content img,
  .tutorial-traer .slide[data-slide="2"] .phone-screen-content img,
  .tutorial-traer .slide[data-slide="3"] .phone-screen-content img {
    width: 100%;
    height: auto !important;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  .tutorial-traer .cta-container {
    max-width: 100%;
  }
  .tutorial-traer .cta-title {
    font-size: 20px;
    margin-top: 40px;
  }
  .tutorial-traer .cta-description {
    margin-top: 10px;
  }
  .tutorial-traer .cta-image {
    width: 100%;
  }
  .tutorial-traer .cta-button1 {
    margin-top: 40px;
  }
}
@media (min-width: 768px) {
  .tutorial-traer .page-wrapper {
    max-width: 960px;
    min-height: 640px;
  }
}
body.page-template-tutorial-enviar-php {
  --primary-bg: #000050;
  --text-light: #ffffff;
  --content-bg: #ffffff;
  --status-bar-bg: #000000;
  --primary-text: #ffffff;
  --accent-color-1: #ccccdc;
  --accent-color-2: rgba(204, 204, 220, 0.5);
  --step-number-text: #333373;
  --shadow-color: rgba(5, 4, 104, 0.35);
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
  background-color: var(--primary-bg);
  color: var(--primary-text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* ===== SLIDER CONTAINER GENERAL ===== */
  /* =========================================================
     IMAGEN HAZCLICK (SOLO DESKTOP) - Slide 1
     ========================================================= */
  /* =========================================================
     SLIDE 1 (data-slide="0") - HERO + INFO
     ========================================================= */
  /* =========================================================
     SLIDE 2 (Paso 1)
     ========================================================= */
  /* =========================================================
     SLIDE 3 (Paso 2)
     ========================================================= */
  /* =========================================================
     SLIDE 5 (CTA FINAL)
     ========================================================= */
  /* =========================================================
     RESPONSIVE (MOBILE + DESKTOP)
     ========================================================= */
}
body.page-template-tutorial-enviar-php * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body.page-template-tutorial-enviar-php *, body.page-template-tutorial-enviar-php *::before, body.page-template-tutorial-enviar-php *::after {
  box-sizing: border-box;
}
body.page-template-tutorial-enviar-php .slider-container {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .slider-wrapper {
  display: flex;
  height: 100vh;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-template-tutorial-enviar-php .slide {
  min-width: 100vw;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .navigation-dots {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.3px;
  z-index: 1000;
  width: 362.42px;
  transition: opacity 0.6s ease;
}
body.page-template-tutorial-enviar-php .dot {
  flex: 1;
  height: 5px;
  background-color: var(--accent-color-2);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
body.page-template-tutorial-enviar-php .dot.active {
  background-color: var(--accent-color-1);
}
body.page-template-tutorial-enviar-php .hazclick-indicator {
  display: none;
}
@media (min-width: 768px) {
  body.page-template-tutorial-enviar-php .hazclick-indicator {
    display: block;
    position: absolute;
    /* ===== AJUSTES DE POSICIÓN ===== */
    /* Modifica estos valores para ajustar la ubicación */
    bottom: 40px;
    right: 60px;
    /* ===== AJUSTES DE TAMAÑO ===== */
    /* Modifica estos valores para cambiar el tamaño de la imagen */
    width: 250px;
    height: auto;
    z-index: 100;
    pointer-events: none;
  }
}
body.page-template-tutorial-enviar-php .slide[data-slide="0"] {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0;
}
body.page-template-tutorial-enviar-php .page-wrapper {
  width: 100%;
  max-width: 420px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .hero-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 24px 32px;
  position: relative;
  z-index: 1;
}
body.page-template-tutorial-enviar-php .hero-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 960px;
  z-index: 0;
  display: block;
}
body.page-template-tutorial-enviar-php .hero-bg-img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
body.page-template-tutorial-enviar-php .hero-header,
body.page-template-tutorial-enviar-php .illustration-container {
  position: relative;
  z-index: 1;
}
body.page-template-tutorial-enviar-php .status-bar {
  width: 100%;
  height: 51px;
  background-color: var(--status-bar-bg);
  flex-shrink: 0;
}
body.page-template-tutorial-enviar-php .hero-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 0 24px;
}
body.page-template-tutorial-enviar-php .logo {
  max-width: 160px;
  height: auto;
  display: block;
}
body.page-template-tutorial-enviar-php .illustration-container {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
body.page-template-tutorial-enviar-php .illustration-content {
  position: relative;
  width: 336px;
  height: 294px;
}
body.page-template-tutorial-enviar-php .package-character {
  text-align: center;
  position: absolute;
  bottom: 50px;
}
body.page-template-tutorial-enviar-php .package-character .img-part:nth-child(1) {
  width: 100%;
}
body.page-template-tutorial-enviar-php .package-character .img-part:nth-child(2) {
  margin-top: 2.5rem;
  width: 35%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body.page-template-tutorial-enviar-php .paper-plane {
  position: absolute;
  top: 0;
  left: 109px;
  width: 114.36px;
  height: 114.36px;
  transform: rotate(2.95deg);
}
body.page-template-tutorial-enviar-php .info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 32px 24px;
}
body.page-template-tutorial-enviar-php .info-content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
body.page-template-tutorial-enviar-php .tagline {
  color: var(--text-light);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .steps-heading {
  color: var(--text-light);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  margin: 5rem 0;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .main-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page-template-tutorial-enviar-php .step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 80px;
  margin-bottom: 60px;
  padding: 0 10px;
}
body.page-template-tutorial-enviar-php .step-header1 {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px;
}
body.page-template-tutorial-enviar-php .step-number-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-template-tutorial-enviar-php .step-circle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0px 8px 14px var(--shadow-color));
}
body.page-template-tutorial-enviar-php .step-number {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  color: var(--step-number-text);
  line-height: 1;
}
body.page-template-tutorial-enviar-php .step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .step-title1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-text);
  margin: 0;
  line-height: 1.18;
  text-align: left;
}
body.page-template-tutorial-enviar-php .step-text {
  color: var(--primary-text);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  max-width: 26rem;
  text-align: left;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .phone-mockup {
  width: 100%;
  max-width: 960px;
}
body.page-template-tutorial-enviar-php .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body.page-template-tutorial-enviar-php .phone-screen-content img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
body.page-template-tutorial-enviar-php .phone-mockup-wrapper {
  position: absolute;
  top: 234px;
  left: 10px;
  width: 354.39px;
  height: 628px;
}
body.page-template-tutorial-enviar-php .phone-screen-container {
  position: absolute;
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
  border-radius: 38px;
  overflow: hidden;
  z-index: 5;
  background-color: #f5f5f5;
}
body.page-template-tutorial-enviar-php .phone-screen-image {
  width: 273px;
  height: 708px;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: -0.43px;
  left: -0.11px;
}
body.page-template-tutorial-enviar-php .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}
body.page-template-tutorial-enviar-php .frame-element {
  position: absolute;
}
body.page-template-tutorial-enviar-php .shadow-main {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
body.page-template-tutorial-enviar-php .screen-glare {
  top: 0;
  left: 22.56px;
  width: 309.27px;
  height: 625.09px;
}
body.page-template-tutorial-enviar-php .border {
  top: 16.93px;
  left: 40.75px;
  width: 272.89px;
  height: 590.89px;
}
body.page-template-tutorial-enviar-php .camera-notch {
  top: 22.34px;
  left: 155.62px;
  width: 43.69px;
  height: 5.04px;
}
body.page-template-tutorial-enviar-php .shadow-bottom {
  top: 584.34px;
  left: 51.67px;
  width: 251.05px;
  height: 40.75px;
}
body.page-template-tutorial-enviar-php .base-stand {
  top: 617.81px;
  left: 0;
  width: 354.39px;
  height: 10.19px;
}
body.page-template-tutorial-enviar-php .cta-container {
  max-width: 70%;
  margin: 0 auto;
  background-color: #000050;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 100px;
  overflow: hidden;
}
body.page-template-tutorial-enviar-php .picture-img {
  width: 100%;
  text-align: center;
}
body.page-template-tutorial-enviar-php .cta-image {
  width: 70%;
  height: auto;
  border-radius: 5px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
}
body.page-template-tutorial-enviar-php .cta-title {
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 28px;
  text-align: center;
}
body.page-template-tutorial-enviar-php .cta-description {
  color: #ffffff;
  font-weight: 300;
  font-size: 20px;
  line-height: 19px;
  text-align: center;
  max-width: 450px;
  font-family: "Rubik", sans-serif;
}
body.page-template-tutorial-enviar-php .cta-description strong {
  font-weight: 700;
}
body.page-template-tutorial-enviar-php .cta-description .regular-text {
  font-weight: 400;
}
body.page-template-tutorial-enviar-php .cta-button1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 332px;
  min-height: 58px;
  padding: 16px 24px;
  background: linear-gradient(353deg, #000050 0%, #4747d9 100%);
  border-radius: 31px !important;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.35);
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 19.36px;
  text-decoration: none;
  text-align: center;
}
@media (max-width: 375px) {
  body.page-template-tutorial-enviar-php .cta-container {
    padding-left: 21px;
    padding-right: 21px;
  }
}
@media (max-width: 576px) {
  body.page-template-tutorial-enviar-php .slide[data-slide="0"] {
    padding: 0;
    align-items: stretch;
  }
  body.page-template-tutorial-enviar-php .page-wrapper {
    min-height: 812px;
    border-radius: 0;
    box-shadow: none;
  }
  body.page-template-tutorial-enviar-php .hero-bg {
    width: 100%;
  }
  body.page-template-tutorial-enviar-php .hero-header {
    margin-top: 24px;
    padding: 0 20px;
  }
  body.page-template-tutorial-enviar-php .hero-section {
    flex: 0 0 45%;
  }
  body.page-template-tutorial-enviar-php .illustration-container {
    margin-top: -32px;
  }
  body.page-template-tutorial-enviar-php .info-section {
    flex: 0 0 55%;
    justify-content: flex-start;
    padding: 32px 20px;
  }
  body.page-template-tutorial-enviar-php .package-character {
    bottom: 0;
  }
  body.page-template-tutorial-enviar-php .package-character .img-part:nth-child(1) {
    width: 70%;
    display: block;
    margin: 0 auto;
  }
  body.page-template-tutorial-enviar-php .step-number-wrapper {
    width: 50px;
    height: 50px;
  }
  body.page-template-tutorial-enviar-php .step-title {
    font-size: 1.2rem;
  }
  body.page-template-tutorial-enviar-php .main-section {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
    flex-direction: unset !important;
    align-items: unset !important;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-mockup {
    height: auto;
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-screen-content,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-screen-content,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-screen-content {
    width: 100%;
    height: auto;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-screen-content img {
    width: 100%;
    height: auto !important;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  body.page-template-tutorial-enviar-php .cta-container {
    max-width: 100%;
  }
  body.page-template-tutorial-enviar-php .cta-title {
    font-size: 20px;
    margin-top: 40px;
  }
  body.page-template-tutorial-enviar-php .cta-description {
    margin-top: 10px;
  }
  body.page-template-tutorial-enviar-php .cta-image {
    width: 100%;
  }
  body.page-template-tutorial-enviar-php .cta-button1 {
    margin-top: 40px;
  }
  body.page-template-tutorial-enviar-php .avion-img {
    position: absolute;
    top: 48%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: auto;
    z-index: 10;
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  body.page-template-tutorial-enviar-php .page-wrapper {
    max-width: 960px;
    min-height: 640px;
  }
  body.page-template-tutorial-enviar-php .cta-image {
    width: 60%;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"],
  body.page-template-tutorial-enviar-php .slide[data-slide="2"],
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] {
    position: relative;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-mockup,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-mockup {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    max-width: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="1"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="2"] .phone-screen-content img,
  body.page-template-tutorial-enviar-php .slide[data-slide="3"] .phone-screen-content img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .picture-img {
    margin-bottom: 32px;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .cta-title {
    margin-top: 0;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .cta-description {
    margin-top: 8px;
  }
  body.page-template-tutorial-enviar-php .slide[data-slide="4"] .cta-button1 {
    margin-top: 24px;
  }
  body.page-template-tutorial-enviar-php .avion-img {
    position: absolute;
    top: 52%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: auto;
    z-index: 10;
    pointer-events: none;
  }
}
.publicar {
  /* Header */
  /*  .user-profile {
     display: flex;
     align-items: center;
     gap: 14px;

     &__name {
       text-align: right;
       color: #333373;
       font-size: 14px;
       line-height: 1.2;

       @media (max-width: 768px) {
         display: none;
       }
     }

     &__avatar {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       overflow: hidden;

       @media (max-width: 768px) {
         width: 40px;
         height: 40px;
       }

       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }

     svg {
       @media (max-width: 768px) {
         display: none;
       }
     }
   } */
  /* Stepper */
  /* Dashboard Grid */
  /* Card */
  /* Articles Section */
}
.publicar * {
  box-sizing: border-box;
}
.publicar body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
.publicar .dashboard-container {
  display: flex;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  height: 100vh;
}
@media (max-width: 768px) {
  .publicar .dashboard-container {
    flex-direction: column;
  }
}
.publicar a {
  text-decoration: none;
  color: inherit;
}
.publicar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.publicar h1, .publicar h2, .publicar h3, .publicar h4, .publicar h5, .publicar h6, .publicar p {
  margin: 0;
}
.publicar button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.publicar .main-content {
  flex: 1;
  padding: 30px 19px 53px 50px;
  background-color: #ffffff;
  overflow-y: auto;
  height: 100vh;
}
@media (max-width: 1200px) {
  .publicar .main-content {
    padding: 40px 30px;
  }
}
@media (max-width: 768px) {
  .publicar .main-content {
    padding: 20px 16px;
  }
}
.publicar .main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .publicar .main-header {
    margin-bottom: 20px;
  }
}
.publicar .main-header .top-right-area::before {
  top: -176px;
}
.publicar .back-link {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.publicar .back-link span {
  color: #0806ae;
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .publicar .back-link span {
    display: none;
  }
}
.publicar .back-link svg {
  width: 24px;
  height: 24px;
}
.publicar .stepper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .publicar .stepper {
    max-width: 100%;
    padding: 0 10px;
    margin-bottom: 30px;
  }
}
.publicar .stepper__line {
  position: absolute;
  top: 17px;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: #e6e6ee;
  z-index: 0;
}
@media (max-width: 768px) {
  .publicar .stepper__line {
    top: 15px;
  }
}
.publicar .stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  flex: 1;
}
@media (max-width: 768px) {
  .publicar .stepper__step {
    gap: 8px;
  }
}
.publicar .stepper__step--active .stepper__circle {
  background-color: #4dba8c;
  color: #050468;
}
.publicar .stepper__circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  background-color: #e6e6ee;
  color: #46467f;
}
@media (max-width: 768px) {
  .publicar .stepper__circle {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}
.publicar .stepper__label {
  font-size: 12px;
  color: #000019;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 768px) {
  .publicar .stepper__label {
    font-size: 10px;
    max-width: 70px;
    white-space: normal;
    line-height: 1.2;
  }
}
.publicar .dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 909px;
  margin: 0 auto;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .publicar .dashboard-grid {
    gap: 24px;
    max-width: 100%;
    padding-bottom: 40px;
  }
}
.publicar .publish-card {
  background-color: #fcfcfc;
  border: 1px solid #ccccdc;
  border-radius: 12px;
  padding: 42px 45px 50px 45px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 1200px) {
  .publicar .publish-card {
    flex-direction: column;
    padding: 30px 24px;
  }
}
@media (max-width: 768px) {
  .publicar .publish-card {
    padding: 24px 16px;
    border-radius: 8px;
  }
}
.publicar .card-content {
  flex: 1;
  max-width: 400px;
  width: 100%;
}
@media (max-width: 1200px) {
  .publicar .card-content {
    max-width: 100%;
  }
}
.publicar .card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: space-between;
  width: 400px;
}
@media (max-width: 768px) {
  .publicar .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
}
.publicar .card-header h2 {
  color: #333373;
  font-size: 22px;
  font-weight: 700;
  font-family: "Rubik", sans-serif;
}
@media (max-width: 768px) {
  .publicar .card-header h2 {
    font-size: 18px;
  }
}
.publicar .flags {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .publicar .flags {
    gap: 8px;
  }
}
.publicar .flags .flag-wrapper {
  width: 28px;
  height: 20px;
}
@media (max-width: 768px) {
  .publicar .flags .flag-wrapper {
    width: 24px;
    height: 17px;
  }
}
.publicar .flags .flag-arrow {
  width: 56px;
}
@media (max-width: 768px) {
  .publicar .flags .flag-arrow {
    width: 40px;
  }
}
.publicar .discount-input-group {
  display: flex;
  align-items: center;
  border: 1px solid #0806ae;
  border-radius: 5px;
  padding: 8px 16px;
  margin-bottom: 26px;
  background: #fff;
  justify-content: space-between;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.1019607843);
  max-width: 333px;
  width: 100%;
}
@media (max-width: 768px) {
  .publicar .discount-input-group {
    padding: 8px 12px;
    margin-bottom: 20px;
  }
}
.publicar .discount-input-group .input-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.publicar .discount-input-group .input-wrapper label {
  font-size: 12px;
  color: #000019;
  font-family: "Inter", sans-serif;
}
.publicar .discount-input-group .input-wrapper input {
  border: none;
  outline: none;
  font-size: 16px;
  color: #333373;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  padding: 0;
  margin-bottom: 0;
  /* @media (max-width: 768px) {
    font-size: 12px;
  } */
}
.publicar .discount-input-group .apply-btn {
  color: #0806AE;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-weight: bold;
}
.publicar .details-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  max-width: 220px;
  width: 100%;
}
.publicar .details-list .detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #000019;
  /*  &.header {
     color: #333373;
     font-weight: 600;
     margin-bottom: 4px;
     font-size: 18px;
   } */
}
@media (max-width: 768px) {
  .publicar .details-list .detail-row {
    font-size: 13px;
  }
}
.publicar .details-list .detail-row.total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6e6ee;
}
.publicar .details-list .detail-row p {
  font-size: 16px;
  color: #000019;
  font-weight: bold;
  font-family: "Inter", sans-serif;
}
.publicar .details-list .discount-value {
  color: #000000;
}
.publicar .details-list .total-value {
  color: #4dba8c;
  font-weight: 600;
}
.publicar .publish-btn {
  max-width: 362px;
  width: 100%;
  padding: 16px;
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: white;
  border-radius: 31px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 8px 14px rgba(5, 4, 104, 0.35);
  position: absolute;
  bottom: 40px;
  right: 86px;
}
@media (max-width: 1200px) {
  .publicar .publish-btn {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}
@media (max-width: 768px) {
  .publicar .publish-btn {
    padding: 14px;
    font-size: 14px;
    border-radius: 25px;
  }
}
.publicar .card-illustration {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 200px;
  height: 200px;
}
@media (max-width: 1200px) {
  .publicar .card-illustration {
    display: none;
  }
}
.publicar .articles-section h3 {
  color: #333373;
  font-size: 23px;
  margin-bottom: 10px;
  font-family: "Rubik", sans-serif;
  font-weight: bold;
}
@media (max-width: 768px) {
  .publicar .articles-section h3 {
    font-size: 16px;
  }
}
.publicar .articles-section .articles-desc {
  color: #757575;
  font-size: 14px;
  margin-bottom: 30px;
  max-width: 620px;
}
@media (max-width: 768px) {
  .publicar .articles-section .articles-desc {
    font-size: 12px;
    margin-bottom: 20px;
  }
}
.publicar .articles-section .article-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-list {
    gap: 16px;
  }
}
.publicar .articles-section .article-item {
  display: flex;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid #ccccdc;
  padding-bottom: 24px;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item {
    gap: 12px;
    padding-bottom: 16px;
  }
}
.publicar .articles-section .article-item:last-child {
  border-bottom: none;
}
.publicar .articles-section .article-item .article-img {
  width: 99px;
  height: 60px;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e6e6ee;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-img {
    width: 60px;
    height: 60px;
  }
}
.publicar .articles-section .article-item .article-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.publicar .articles-section .article-item .article-info .article-name {
  color: #333373;
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-info .article-name {
    font-size: 12px;
  }
}
.publicar .articles-section .article-item .article-info .article-price {
  color: #0806ae;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-info .article-price {
    font-size: 13px;
  }
}
.publicar .articles-section .article-item .article-info .article-input-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.publicar .articles-section .article-item .article-info .article-input-row .article-url {
  color: #333373;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .publicar .articles-section .article-item .article-info .article-input-row .article-url {
    font-size: 11px;
  }
  .publicar .articles-section {
    margin-bottom: 70px;
  }
}
@media (min-width: 1201px) {
  .publicar {
    /* Reserva espacio a la derecha para el muñeco */
    /* Ilustración fija a la derecha */
    /* Botón como Figma: a la derecha */
  }
  .publicar .publish-card {
    padding: 42px 523px 30px 45px !important; /* 300px = espacio para ilustración */
  }
  .publicar .card-illustration {
    position: absolute !important;
    right: -8px !important;
    top: 33px !important;
    width: 200px !important;
    height: auto !important;
    pointer-events: none;
  }
  .publicar .publish-btn {
    /*   position: static !important; */
    margin-top: -75px !important;
    margin-left: 500px !important; /* derecha */
    margin-right: 0 !important;
    display: block !important;
  }
  .publicar .articles-section {
    max-width: 620px; /* ancho tipo Figma */
    margin-left: auto;
    margin-right: auto;
  }
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.modal.active {
  display: flex;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal__content {
  position: relative;
  background: #fff;
  border-radius: 60px;
  width: 80%;
  max-width: 650px;
  padding: 40px;
  margin: auto;
  z-index: 1;
  border: 2px solid #050468;
}
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  cursor: pointer;
}
.modal__body {
  text-align: center;
}
.modal__illustration {
  width: 180px;
  margin: 0 auto 0px;
}
.modal__illustration img {
  width: 100%;
}
.modal__title {
  font-size: 22px;
  color: #050468;
  font-weight: 700;
  margin-bottom: 16px;
  font-family: "Inter", sans-serif;
}
.modal__desc {
  margin-bottom: 30px;
  color: #000019;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  max-width: 354px;
  width: 100%;
}
.modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
.modal .btn {
  width: 100%;
  max-width: 355px;
  height: 58px;
  border-radius: 31px;
  font-size: 16px;
  font-weight: 600;
}
.modal .btn--primary {
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: #fff;
}
.modal .btn--secondary {
  background: #f5f5f5;
  border: 1px solid #333373;
  color: #0806ae;
}
@media (max-width: 768px) {
  .modal {
    display: none !important;
  }
}
#dashboard-layoutt {
  /* Sidebar Styles */
  /* Main Content Styles */
  /* Success Section */
  /* Simplified positioning for illustration parts */
  /* Responsive adjustments */
}
#dashboard-layoutt body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
#dashboard-layoutt *,
#dashboard-layoutt *::before,
#dashboard-layoutt *::after {
  box-sizing: inherit;
}
#dashboard-layoutt img {
  display: block;
  max-width: 100%;
}
#dashboard-layoutt button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
#dashboard-layoutt a {
  text-decoration: none;
  color: inherit;
}
#dashboard-layoutt #dashboard-layout {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
}
#dashboard-layoutt .dashboard-container {
  width: 100%;
  /*height: 900px; Fixed height based on design */
  background-color: #ffffff;
  display: flex;
  position: relative;
  overflow: hidden;
}
#dashboard-layoutt .sidebar {
  width: 328px;
  height: 100%;
  background: linear-gradient(180deg, #e6e6ee 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  padding-top: 63px;
  flex-shrink: 0;
}
#dashboard-layoutt .logo-container {
  padding-left: 61px;
  margin-bottom: 60px;
}
#dashboard-layoutt .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
#dashboard-layoutt .nav-item {
  display: flex;
  align-items: center;
  padding-left: 68px;
  cursor: pointer;
  position: relative;
}
#dashboard-layoutt .nav-icon-wrapper {
  width: 43px;
  display: flex;
  justify-content: center;
}
#dashboard-layoutt .nav-text {
  font-size: 16px;
  color: #414d64;
  margin-left: 16px;
  font-weight: 500;
}
#dashboard-layoutt .nav-group.active .nav-text.active-text {
  color: #0806ae;
  font-weight: 700;
}
#dashboard-layoutt .submenu {
  display: flex;
  flex-direction: column;
  margin-left: 127px;
  margin-top: 10px;
  gap: 15px;
}
#dashboard-layoutt .submenu-item {
  font-size: 16px;
  color: #000019;
  cursor: pointer;
}
#dashboard-layoutt .submenu-item.active-sub {
  color: #0806ae;
  font-weight: 600;
}
#dashboard-layoutt .submenu-lines {
  position: absolute;
  left: 89px;
  top: 270px; /* Approximate based on layout */
  display: flex;
  flex-direction: column;
  gap: 45px;
}
#dashboard-layoutt .main-content {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}
#dashboard-layoutt .bg-decoration {
  position: absolute;
  top: -159px;
  right: -116px;
  z-index: 0;
  pointer-events: none;
}
#dashboard-layoutt .top-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 75px 60px 0 60px;
  z-index: 1;
}
#dashboard-layoutt .back-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0806ae;
  font-size: 16px;
  font-weight: 600;
}
#dashboard-layoutt .user-profile {
  display: flex;
  align-items: center;
}
#dashboard-layoutt .user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
#dashboard-layoutt .user-name {
  text-align: right;
  color: #333373;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
}
#dashboard-layoutt .avatar-group {
  position: relative;
  width: 60px;
  height: 60px;
}
#dashboard-layoutt .avatar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#dashboard-layoutt .avatar-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#dashboard-layoutt .dropdown-arrow {
  margin-left: 5px;
}
#dashboard-layoutt .success-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
#dashboard-layoutt .illustration-wrapper {
  position: relative;
  width: 250px;
  height: 250px;
  margin-bottom: 30px;
}
#dashboard-layoutt .illustration-wrapper1 {
  position: relative;
  width: 250px;
  height: 250px;
  margin-left: 20px;
}
#dashboard-layoutt .illustration-group {
  position: relative;
  width: 100%;
  height: 100%;
}
#dashboard-layoutt .box-character img,
#dashboard-layoutt .confetti-layer img {
  position: absolute;
}
#dashboard-layoutt .box-body {
  top: 20%;
  left: 20%;
  width: 60%;
}
#dashboard-layoutt .box-face {
  top: 35%;
  left: 35%;
  width: 30%;
}
#dashboard-layoutt .confetti {
  width: 10px;
  height: 10px;
}
#dashboard-layoutt .c1 {
  top: 10%;
  left: 10%;
}
#dashboard-layoutt .c2 {
  top: 5%;
  right: 20%;
}
#dashboard-layoutt .c3 {
  top: 50%;
  right: 5%;
}
#dashboard-layoutt .success-title {
  color: #050468;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}
#dashboard-layoutt .success-desc {
  color: #000019;
  font-size: 16px;
  max-width: 400px;
  line-height: 1.5;
  /*margin-bottom: 40px;*/
}
#dashboard-layoutt .action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 356px;
}
#dashboard-layoutt .btn {
  height: 58px;
  border-radius: 31px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
#dashboard-layoutt .btn:hover {
  transform: translateY(-2px);
}
#dashboard-layoutt .btn-primary {
  background: linear-gradient(90deg, #000050 0%, #4747d9 100%);
  color: #ffffff;
  box-shadow: 0px 8px 14px 0px rgba(5, 4, 104, 0.35);
}
#dashboard-layoutt .btn-secondary {
  background-color: #f5f5f5;
  border: 1px solid #333373;
  color: #0806ae;
}
#dashboard-layoutt .link {
  display: none;
  color: #0806ae;
  font-weight: 600;
  margin-top: 40px;
  font-size: 16px;
}
@media (max-width: 1024px) {
  #dashboard-layoutt .dashboard-container {
    height: auto;
    flex-direction: column;
  }
  #dashboard-layoutt .sidebar {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
  }
  #dashboard-layoutt .main-content {
    min-height: 600px;
  }
  #dashboard-layoutt .bg-decoration {
    display: none;
  }
}
@media (max-width: 768px) {
  #dashboard-layoutt {
    /* Success Section */
  }
  #dashboard-layoutt .success-container {
    margin-top: 120px;
    margin-bottom: 100px;
  }
  #dashboard-layoutt .link {
    display: block;
  }
}
/* _rider-profile.scss */
.rider-profile-page {
  min-height: 100vh;
  padding-bottom: 40px;
  margin-top: 0;
  padding-top: 0;
  /* Header Superior */
  /* Layout Principal */
  /* COLUMNA IZQUIERDA: RESUMEN */
  /* COLUMNA DERECHA: REVIEWS */
  /* ==========================================================================
     === FIX SCROLL MÓVIL 
     ========================================================================== */
}
.rider-profile-page .profile-top-nav {
  background: #E6E6EE; /* Color header según tu theme */
  padding: 20px 0;
  margin-bottom: -40px; /* Efecto overlap */
  height: 140px;
  display: flex;
  align-items: center;
}
.rider-profile-page .profile-top-nav .container {
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rider-profile-page .profile-top-nav .container .back-link {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.rider-profile-page .profile-top-nav .container .back-link img {
  width: 24px;
  height: 24px;
}
.rider-profile-page .profile-top-nav .container .nav-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 24px;
  margin: 0;
}
.rider-profile-page .profile-layout {
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
  height: 100vw;
  box-shadow: 0 -10px 10px -5px rgba(5, 4, 104, 0.15);
}
@media (min-width: 768px) {
  .rider-profile-page .profile-layout {
    flex-direction: row; /* Desktop: Lado a lado */
  }
}
.rider-profile-page .container {
  max-width: 100%;
  padding: 0;
}
.rider-profile-page .rider-summary-card {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
  .rider-profile-page .rider-summary-card {
    width: 35%; /* Ancho fijo desktop */
    min-width: 300px;
    border-right: 1px solid #eee;
    border-bottom: none;
    padding: 50px 30px;
  }
}
.rider-profile-page .rider-summary-card .avatar-large-wrapper {
  position: relative;
  width: 174.55px;
  height: 174.55px;
  margin-bottom: 20px;
}
.rider-profile-page .rider-summary-card .avatar-large-wrapper .rider-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: fill;
     object-fit: fill;
  border: 4px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.rider-profile-page .rider-summary-card .avatar-large-wrapper .rating-badge {
  position: absolute;
  bottom: 5px;
  right: -15px;
  background: #E6E6EE;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  font-weight: 700;
  color: #333373;
  font-size: 14px;
}
.rider-profile-page .rider-summary-card .avatar-large-wrapper .rating-badge .score {
  font-weight: bold;
  font-size: 16px;
}
.rider-profile-page .rider-summary-card .avatar-large-wrapper .star-icon {
  position: relative;
  right: -172px;
  bottom: 62px;
}
.rider-profile-page .rider-summary-card .rider-name {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 20px;
  margin: 0 0 10px 0;
}
.rider-profile-page .rider-summary-card .rider-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333373;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 40px;
}
.rider-profile-page .rider-summary-card .rider-badge .medal-icon {
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: bold;
  font-family: "Rubik", sans-serif;
  color: #333373;
}
.rider-profile-page .rider-summary-card .rating-breakdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rider-profile-page .rider-summary-card .rating-breakdown .breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rider-profile-page .rider-summary-card .rating-breakdown .breakdown-item .metric-label {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #333373;
  margin-top: 5px;
  font-weight: 500;
}
.rider-profile-page .rider-summary-card .rating-breakdown .breakdown-item .stars-row svg {
  width: 29px;
  height: 29px;
}
.rider-profile-page .rider-summary-card .rating-breakdown .breakdown-item .stars-row .stars-flex {
  gap: 14px;
}
.rider-profile-page .rider-reviews-section {
  flex: 1;
  padding: 50px 60px;
  background: #fff;
}
.rider-profile-page .rider-reviews-section .section-title {
  font-family: "Rubik", sans-serif;
  color: #333373;
  font-size: 20px;
  margin-bottom: 30px;
  font-weight: 500;
}
.rider-profile-page .rider-reviews-section .reviews-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rider-profile-page .rider-reviews-section .review-card-item {
  display: flex;
  gap: 15px;
  background: #fff;
}
.rider-profile-page .rider-reviews-section .review-card-item .reviewer-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.rider-profile-page .rider-reviews-section .review-card-item .reviewer-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.rider-profile-page .rider-reviews-section .review-card-item .review-content {
  width: 100%;
  max-width: 625px;
}
.rider-profile-page .rider-reviews-section .review-card-item .review-content .review-star svg {
  width: 14px;
}
.rider-profile-page .rider-reviews-section .review-card-item .review-content .review-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.5;
  margin: 8px 0;
  border: 1px solid #E6E6EE;
  border-radius: 12px;
  padding: 20px;
  max-width: 625px;
  width: 100%;
}
.rider-profile-page .rider-reviews-section .review-card-item .review-content .review-meta {
  font-size: 11px;
  color: #000000;
  display: block;
}
.rider-profile-page .rider-reviews-section .load-more-wrapper {
  text-align: right;
  margin-top: 20px;
}
.rider-profile-page .rider-reviews-section .load-more-wrapper .load-more-link {
  font-size: 13px;
  color: #333373;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .rider-profile-page {
    /* 4. SECCIÓN DE REVIEWS (Para asegurar que se vean todos) */
  }
  .rider-profile-page html, .rider-profile-page body {
    overflow-y: auto !important;
    height: auto !important;
  }
  .rider-profile-page .rider-profile-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    padding-bottom: 60px;
    padding-top: 20px;
  }
  .rider-profile-page .profile-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 40px !important;
  }
  .rider-profile-page .rider-reviews-section {
    flex: none !important; /* Desactivar flex ratio */
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: 30px 20px;
  }
  .rider-profile-page .rider-reviews-section .section-title {
    font-size: 14px;
  }
  .rider-profile-page .rider-reviews-section .review-card-item .review-content .stars-row svg {
    width: 29px;
    height: 29px;
  }
  .rider-profile-page .rider-reviews-section .review-card-item .review-content .stars-row .stars-flex {
    gap: 14px;
  }
  .rider-profile-page .rider-reviews-section .review-card-item .review-content .review-text {
    font-size: 12px;
    padding: 12px;
  }
}
/* 1. DESBLOQUEAR EL HTML Y BODY (Por si acaso el tema global los bloquea) */
html, body {
  overflow-y: auto;
  height: auto;
  overflow: visible;
}