@charset "UTF-8";
:root {
  --primary-color: #E87A30;
  --white-color: #ffffff;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.6rem;
  font-family: "Helvetica";
  background-color: #F2F2F2;
  overflow-x: hidden;
}

h1 {
  font-size: 4rem;
  font-weight: bolder;
}

h2 {
  font-size: 2.7rem;
  font-weight: bolder;
}

h3 {
  font-size: 2.4rem;
  font-weight: 700;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
}

h5 {
  font-size: 0.9rem;
  font-weight: 700;
}

h6 {
  font-size: 0.7rem;
  font-weight: 700;
}

p {
  font-size: 1.8rem;
  font-weight: 400;
}

a {
  text-decoration: none;
  font-size: 1.7rem;
}

ul,
li {
  font-size: 1.7rem;
}

body {
  overflow-x: hidden;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 3.5rem;
  }
  h3 {
    font-size: 3rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.2rem;
  }
  h6 {
    font-size: 1rem;
  }
  p {
    font-size: 1.8rem;
  }
  a {
    font-size: 1.6rem;
  }
}
.title-section {
  font-weight: 900;
  font-size: 2.7rem;
}

.description-section {
  font-size: 1.7rem;
  line-height: 1.6;
}

.title-hero {
  font-size: 5rem;
  font-weight: 900;
  color: rgb(33, 33, 33);
}

.description-hero {
  font-size: 1.7rem;
  color: rgb(97, 97, 97);
}

.highlight-text {
  color: #E87A30;
  font-weight: 700;
  font-size: 2.7rem;
}

.highlight-subtitle {
  color: #E87A30;
  font-weight: 700;
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .title-section {
    font-size: 4rem;
  }
  .description-section {
    font-size: 1.8rem;
  }
  .title-hero {
    font-size: 7rem;
  }
  .description-hero {
    font-size: 1.8rem;
  }
  .highlight-text {
    font-size: 4rem;
  }
}
/* INICIO ESTILOS DE MENÚ */
body {
  background-color: #f2f2f2;
}

.background-menu {
  padding: 0.5rem 0;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background-color: rgba(234, 234, 234, 0.0274509804);
  border: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media screen and (min-width: 991px) {
  .background-menu {
    border-radius: 10rem;
    border: 1px solid rgb(203, 203, 203);
  }
}
.background-menu a {
  color: var(--white-color);
  font-size: 1.4rem;
  margin: 0;
}

.navbar-nav .nav-link {
  background-color: rgba(239, 239, 239, 0.5960784314);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 2px solid rgba(70, 70, 70, 0.158);
  color: black;
  padding-top: 0.7rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.navbar-nav .active {
  background-color: rgba(243, 243, 243, 0.506);
  color: #111111 !important;
  border: 2px solid #cf621e;
}

.navbar-nav .active:hover {
  background-color: #FF9248;
  color: rgb(251, 251, 251) !important;
  border: 2px solid #cf621e;
  transition: all 0.3s ease;
}

.background-menu a:hover {
  background-color: #eaeaea;
  transition: all 0.3s ease;
  color: #161616;
  transition: color 0.3s ease;
}

.custom-toggler {
  border: none;
  background: transparent;
  font-size: 2rem;
  color: rgb(122, 122, 122);
  transition: color 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .custom-toggler {
    color: #f1f1f1;
  }
}
.custom-toggler.collapsed {
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}

.custom-toggler:not(.collapsed) {
  transition: transform 0.3s ease;
}

.custom-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-brand .logo-image {
  width: 2rem;
  height: 2rem;
  background-image: url("../../assets/images/logo-black.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (prefers-color-scheme: dark) {
  .navbar-brand .logo-image {
    background-image: url("../../assets/images/logo-white.svg");
    width: 2rem;
    height: 2rem;
  }
  .navbar-brand span {
    color: #ffffff;
  }
}
.navbar-brand span {
  color: #111111;
  transition: color 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .navbar-brand span {
    color: #ffffff;
  }
}
.navbar-nav {
  gap: 1rem;
}

@media (prefers-color-scheme: dark) {
  .background-menu {
    background-color: rgba(9, 15, 17, 0.2941176471);
  }
  .navbar-nav .nav-link {
    background-color: rgba(44, 44, 44, 0.5960784314);
    border: 2px solid #2F3B42;
    color: #f1f1f1;
  }
  .navbar-nav .active {
    background-color: rgba(75, 75, 75, 0.79);
    color: rgb(251, 251, 251) !important;
    border: 2px solid #cf621e;
  }
  .navbar-nav .active:hover {
    background-color: #FF9248;
    color: rgb(251, 251, 251) !important;
    border: 2px solid #cf621e;
    transition: all 0.3s ease;
  }
}
@media screen and (prefers-color-scheme: dark) and (min-width: 768px) {
  .background-menu {
    border: 2px solid #2F3B42;
  }
}
/* FINAL ESTILOS DE MENÚ */

/* INICIO MENÚ ADAPTABLE AL FONDO */
/* Se activa con JS (assets/scripts/adaptive-nav.js) cuando el header queda
   sobre una sección con fondo oscuro fijo (foto o video), sin depender del
   modo claro/oscuro del sistema. Usa los mismos colores que ya existían
   para el modo oscuro, aplicados ahora también mediante esta clase. */
header.header--on-dark .navbar-brand .logo-image {
  background-image: url("../../assets/images/logo-white.svg");
}

header.header--on-dark .navbar-brand span {
  color: #ffffff;
}

header.header--on-dark .background-menu {
  background-color: rgba(9, 15, 17, 0.2941176471);
}

header.header--on-dark .navbar-nav .nav-link {
  background-color: rgba(44, 44, 44, 0.5960784314);
  border: 2px solid #2F3B42;
  color: #f1f1f1;
}

header.header--on-dark .navbar-nav .active {
  background-color: rgba(75, 75, 75, 0.79);
  color: rgb(251, 251, 251) !important;
  border: 2px solid #cf621e;
}

header.header--on-dark .navbar-nav .active:hover {
  background-color: #FF9248;
  color: rgb(251, 251, 251) !important;
  border: 2px solid #cf621e;
}

header.header--on-dark .custom-toggler {
  color: #f1f1f1;
}

@media screen and (min-width: 768px) {
  header.header--on-dark .background-menu {
    border: 2px solid #2F3B42;
  }
}
/* FINAL MENÚ ADAPTABLE AL FONDO */

.navbar-brand:hover {
  text-decoration: none;
}

.footer {
  background-color: #f8f9fa;
  color: #212529;
}

.footer-logo a {
  display: block;
  width: 6rem;
  height: 6rem;
  background-image: url("../../assets/images/logo-black.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (prefers-color-scheme: dark) {
  .footer-logo a {
    background-image: url("../../assets/images/logo-white.svg");
  }
}
.footer-text {
  color: #495057;
}

.footer-heading {
  color: #212529;
  /* Color de los títulos */
  font-weight: bold;
  /* Grosor de la fuente */
}

.footer-nav .footer-link {
  color: #495057;
  /* Color de los enlaces */
  text-decoration: none;
  /* Elimina el subrayado */
  transition: color 0.3s ease-in-out;
}

/* Estilo al pasar el ratón sobre los enlaces de navegación */
.footer-nav .footer-link:hover {
  color: var(--primary-color);
  /* Usando la variable que definiste */
}

.footer-divider {
  border-top: 1px solid #dee2e6;
}

.footer-copyright {
  color: #6c757d;
}

.social-icons .social-icon {
  color: #495057;
  font-size: 1.5rem;
  transition: color 0.3s ease-in-out;
}

/* Estilo al pasar el ratón sobre los iconos de redes sociales */
.social-icons .social-icon:hover {
  color: var(--primary-color);
  /* Color de los iconos al pasar el ratón, usando tu variable */
}

@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #090F11;
    color: #f8f9fa;
  }
  .footer-text {
    color: #ced4da;
    /* Color de texto más suave en modo oscuro */
  }
  /* Sobrescribe el color de los títulos en modo oscuro */
  .footer-heading {
    color: #f8f9fa;
    /* Color de los títulos en modo oscuro */
  }
  /* Sobrescribe el color de los enlaces de navegación en modo oscuro */
  .footer-nav .footer-link {
    color: #ced4da;
    /* Color de los enlaces en modo oscuro */
  }
  /* Sobrescribe el color al pasar el ratón sobre los enlaces de navegación en modo oscuro */
  .footer-nav .footer-link:hover {
    color: #00aaff;
    /* Color al pasar el ratón en modo oscuro (el que definiste) */
  }
  /* Sobrescribe el color de la línea divisora en modo oscuro */
  .footer-divider {
    border-top-color: #495057;
    /* Color de la línea divisora en modo oscuro */
  }
  /* Sobrescribe el color del texto de copyright en modo oscuro */
  .footer-copyright {
    color: #adb5bd;
    /* Color del texto de copyright en modo oscuro */
  }
  .social-icons .social-icon {
    color: #ced4da;
    /* Color de los iconos en modo oscuro */
  }
  /* Sobrescribe el color al pasar el ratón sobre los iconos de redes sociales en modo oscuro */
  .social-icons .social-icon:hover {
    color: #00aaff;
    /* Color de los iconos al pasar el ratón en modo oscuro */
  }
}
/* * BOTONES 
 * Usamos tus variables SASS para mantener la consistencia.
 */
.btn-contact {
  background-color: #E87A30;
  color: #ffffff;
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  font-size: 1.7rem;
  border: 2px solid #cf621e;
  transition: all 0.3s ease;
}
.btn-contact:hover {
  background-color: #FF9248;
  color: #ffffff;
}

.btn-default {
  background-color: #e8e8e8;
  color: #111111;
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  font-size: 1.7rem;
  transition: all 0.3s ease;
  border: 2px solid #c4c4c4;
}
.btn-default:hover {
  background-color: #cbcbcb;
  color: #111111;
}

.btn-black {
  background-color: #111111;
  color: #ffffff;
  padding: 0.5rem 2rem;
  border-radius: 5rem;
  font-size: 1.7rem;
  transition: all 0.3s ease;
  border: 2px solid #515151;
}
.btn-black:hover {
  background-color: #FF9248;
  border: 2px solid #cf621e;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .btn-black {
    background-color: #ffffff;
    color: #111111;
    border: 2px solid #e0e0e0;
  }
  .btn-black:hover {
    background-color: #FF9248;
    border: 2px solid #cf621e;
    color: #ffffff;
  }
}
.btn-services {
  background-color: #111111;
  color: #ffffff;
  border-radius: 1.5rem;
  font-size: 1.7rem;
  transition: all 0.3s ease;
  border: 2px solid #111111;
}
.btn-services:hover {
  background-color: #FF9248;
  border: 2px solid #cf621e;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .btn-services {
    background-color: #E87A30;
    color: #ffffff;
    border: 2px solid #cf621e;
  }
  .btn-services:hover {
    background-color: #FF9248;
    border: 2px solid #cf621e;
    color: #ffffff;
  }
}
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: rgba(37, 211, 102, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.07);
  z-index: 3000;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.whatsapp-button:hover {
  background: rgb(12, 123, 88);
  transform: scale(1.1);
}

/* INICIO BOTÓN VOLVER ARRIBA */
.back-to-top-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  background: rgba(232, 122, 48, 0.85);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.07);
  z-index: 3000;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.back-to-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-button:hover {
  background: #cf621e;
  transform: scale(1.1);
}
/* FINAL BOTÓN VOLVER ARRIBA */

.faq-section {
  background: linear-gradient(to bottom, #090F11, #131B1F);
  padding: 3rem 0;
  color: white;
}

@media screen and (min-width: 768px) {
  .faq-section {
    padding: 15rem 0;
  }
}
.faq-section .accordion-button {
  font-size: 1.8rem;
  background-color: rgb(245, 245, 245);
}

.faq-section .bi-question-circle {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.faq-minimalist {
  --bs-accordion-border-width: 0;
}

.accordion-item {
  border: none;
  background-color: transparent;
  color: white;
}

.accordion-button:not(.collapsed) {
  color: white;
  background-color: #393939;
  border: 2px solid #cf621e;
}

.accordion-button:not(.collapsed)::after {
  filter: invert(100%);
}

.accordion-collapse p {
  font-size: 1.6rem;
}

.faq-section h3 span {
  font-size: 1.5rem;
}

@media screen and (min-width: 768px) {
  .faq-section .accordion-button {
    font-size: 2rem;
  }
  .faq-section h3 span {
    font-size: 1.8rem;
  }
  .accordion-collapse p {
    font-size: 1.8rem;
  }
}
.hero-section {
  background-color: #F2F2F2;
  padding: 3rem 0;
}

@media screen and (min-width: 768px) {
  .hero-section {
    padding: 6rem 0;
  }
}
.our-services {
  background-color: #F9F9F9;
  padding: 8rem 0;
}

.our-services h2 {
  width: 80%;
}

.our-services .description-section {
  width: 70%;
}

@media screen and (min-width: 768px) {
  .our-services h2 {
    width: 40%;
  }
  .our-services .description-section {
    width: 40%;
  }
}
.card-services {
  background-color: #F2F2F2;
  transition: all 0.3s ease;
  min-height: 40rem;
  color: black;
  position: relative;
  overflow: hidden;
}

.card-services:hover {
  background-color: #ffffff;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.card-services:hover img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.card-services img {
  position: absolute;
  transition: all 0.3s ease;
  width: 100%;
  right: 0;
  bottom: -20%;
}

@media screen and (min-width: 768px) {
  .card-services img {
    bottom: -5%;
    right: -5%;
  }
}
.why-online-section {
  background-color: white;
  padding: 6rem 0 0 0;
}

.why-online-section .container {
  background-color: #f7f7f7;
  border-radius: 0;
  padding: 7rem 2rem;
  border: none;
}

@media screen and (min-width: 768px) {
  .why-online-section {
    padding: 6rem 0;
  }
  .why-online-section .container {
    border-radius: 2rem;
    padding: 7rem 5rem;
    border: 2px solid #e0e0e0;
  }
}
.why-online-section h2 {
  font-weight: light;
  margin-bottom: 2rem;
}

.why-online-section p {
  line-height: 1.6;
  width: 80%;
}

.why-online-section .features-list .bi-hand-thumbs-up {
  font-size: 4rem;
  color: #cf621e;
}

.why-online-section .features-list .bi-globe {
  font-size: 4rem;
  color: #cf621e;
}

.why-online-section .features-list .bi-cash-stack {
  font-size: 4rem;
  color: #cf621e;
}

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

.services-strip {
  background: linear-gradient(to right, #E87A30, #cf621e);
  color: white;
  padding: 4rem 0;
}

.our-works {
  background: linear-gradient(to bottom, #fffaf4, #FFFFFF);
  padding: 8rem 0;
}

.our-works .title-section {
  font-weight: 900;
  width: 60%;
}

.our-works .description-section {
  width: 70%;
}

.our-works h3 {
  font-size: 2.3rem;
}

@media screen and (min-width: 768px) {
  .our-works .title-section {
    width: 30%;
  }
  .our-works .description-section {
    width: 20%;
  }
}
.our-works .card {
  background-color: transparent;
}
.our-works .card img {
  width: 10rem;
  height: 10rem;
}
.our-works .card h3 {
  margin-top: 1rem;
  font-size: 1.8rem;
}
.our-works .card p {
  line-height: 1.6;
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
  .our-works .card img {
    width: 15rem;
    height: 15rem;
  }
  .our-works .card h3 {
    font-size: 2.3rem;
  }
  .our-works .card p {
    font-size: 1.7rem;
  }
}
.process-section {
  background: linear-gradient(to bottom, #ffffff, #ffede8);
  padding: 6rem 0 0 0;
}

@media screen and (min-width: 768px) {
  .process-section {
    padding: 6rem 0;
  }
  /* .process-section .container {
      border-radius: 2rem;
      padding: 7rem 5rem;
      border: 2px solid #dddddd;
  } */
}
.process-section h2 {
  font-weight: light;
  margin-bottom: 2rem;
}

.process-section p {
  line-height: 1.6;
  width: 80%;
}

.process-section .features-list .bi-calendar2-week,
.process-section .features-list .bi-shield-check {
  font-size: 4rem;
  color: #FF9248;
}
.process-section .features-list .bi-globe,
.process-section .features-list .bi-clipboard-check {
  font-size: 4rem;
  color: #cf621e;
}

.contact-us {
  background-color: #131B1F;
  padding-bottom: 9rem;
}

.contact-us .content-contact {
  background-color: rgba(17, 17, 17, 0.1333333333);
  color: white;
  padding: 5rem 8rem;
  border-radius: 3rem;
  border: 2px solid rgb(42, 54, 72);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.contact-us h2 {
  font-weight: light;
}

.contact-us p {
  line-height: 1.6;
  width: 80%;
  margin: 0 auto;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #090F11;
    color: #ffffff;
  }
  .hero-section {
    background-color: #090F11;
  }
  .hero-section h1,
  .hero-section p,
  .hero-section span {
    color: #ffffff;
  }
  .our-services {
    background-color: #131B1F;
  }
  .our-services .card-services {
    background-color: #090F11;
    color: #ffffff;
    border: 2px solid #2F3B42;
  }
  .our-services .card-services:hover {
    background-color: #090F11;
    border: 1px solid #090F11;
  }
  .why-online-section {
    background-color: #090F11;
  }
  .why-online-section .container {
    background-color: #131B1F;
    border: 2px solid #090F11;
  }
  .our-works {
    background: linear-gradient(to bottom, #090F11, #131B1F);
  }
  .our-works h3,
  .our-works p {
    color: #ffffff;
  }
  .process-section {
    background: linear-gradient(to bottom, #131B1F, #1c262a);
  }
}
/* INICIO SECCIÓN DISEÑO */
.hero-card .container {
  position: relative;
  min-height: 50rem;
  overflow: hidden;
  background-image: url("../../assets/images/design/hero-design.webp");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  border: 2px solid #e6e6e6;
}
.hero-card .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
  transition: background-color 0.3s ease;
}
.hero-card .container > * {
  position: relative;
  z-index: 2;
  color: #ffffff;
}

@media screen and (min-width: 768px) {
  .title-section img {
    width: 6rem;
  }
  .hero-card .container {
    background-attachment: fixed;
  }
}
@media (prefers-color-scheme: dark) {
  .hero-card {
    background: linear-gradient(to bottom, #090F11, #131B1F);
  }
  .hero-card .container::before {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .hero-card .container {
    border: 2px solid #2F3B42;
  }
}
.design-section {
  background-color: #F2F2F2;
  padding: 4rem 0;
}

.first-design-container {
  background-color: #F9F9F9;
  padding: 2rem 0;
  min-height: 50rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid #e6e6e6;
}

.first-design-container:hover .social-media-posts {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.first-design-container:hover,
.second-design-container:hover {
  transition: transform 0.3s ease;
  background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .first-design-container:hover,
  .second-design-container:hover {
    transition: transform 0.3s ease;
    background-color: #090F11;
  }
}
.social-media-posts {
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 170%;
  transition: transform 0.3s ease;
}

@media screen and (min-width: 768px) {
  .social-media-posts {
    width: 100%;
    left: 0;
    bottom: -10%;
  }
}
.second-design-container {
  min-height: 55rem;
  background-color: #F9F9F9;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid #e6e6e6;
}

.second-design-container .qr-mobile {
  position: absolute;
  transition: all 0.3s ease;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2%;
}

.second-design-container:hover .qr-mobile {
  transform: translateX(-50%) scale(1.1);
}

@media screen and (min-width: 457px) {
  .second-design-container .qr-mobile {
    /* background-color: yellow; */
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 768px) {
  .second-design-container .qr-mobile {
    /* background-color: blue; */
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 992px) {
  .second-design-container .qr-mobile {
    /* background-color: green; */
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.qr-mobile {
  position: absolute;
  bottom: 5%;
  width: 55%;
  left: 50%;
  transform: translateX(-50%);
}

.uiux-section {
  background-color: #EBF5FF;
}

.highlight-text-uiux {
  color: #4f7cb4;
  font-weight: 600;
  font-size: 1.8rem;
}

@media (prefers-color-scheme: dark) {
  .uiux-section {
    background-color: #26364a;
  }
  .highlight-text-uiux {
    color: #DAEDFF;
  }
}
.ui-design-container {
  background-color: #DAEDFF;
  padding: 2rem 0;
  min-height: 70rem;
  position: relative;
  overflow: hidden;
  border: 2px solid #e6e6e6;
}

.ui-design-container .ui-image-mobile {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.ui-design-container .detail-section {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 70%;
}

.ui-design-container .detail-section h3 {
  font-size: 2rem;
}

.ui-design-container .ui-image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  .qr {
    filter: invert(100%);
  }
}
@media screen and (min-width: 768px) {
  .first-design-container {
    min-height: 60rem;
  }
  .second-design-container {
    padding: 2rem 0;
    min-height: 60rem;
  }
  .third-design-container {
    padding: 2rem 0;
    min-height: 105rem;
  }
  .ui-design-container {
    padding: 2rem 0;
    min-height: 70rem;
  }
  .ui-design-container .detail-section {
    position: absolute;
    top: 5%;
    left: 3%;
  }
  .ui-design-container .detail-section h3 {
    font-size: 4.5rem;
  }
  .ui-design-container .ui-image {
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}
.printed-design {
  background-color: #DAEDFF;
  position: relative;
  min-height: 60rem;
  margin-top: 8rem;
}

.printable-design {
  position: absolute;
  bottom: -10%;
}

@media (prefers-color-scheme: dark) {
  .design-section {
    background-color: #131B1F;
    color: #ffffff;
  }
  .printed-design {
    background-color: #131B1F;
    color: #ffffff;
  }
  .first-design-container {
    background-color: #090F11;
    border: 1px solid #2F3B42;
  }
  .second-design-container {
    background-color: #090F11;
    border: 1px solid #2F3B42;
  }
  .third-design-container {
    background-color: #090F11;
    border: 1px solid #2F3B42;
  }
  .ui-design-container {
    background-color: #090F11;
    border: 1px solid #2F3B42;
  }
}
.printable-image-mobile {
  position: absolute;
  bottom: -30%;
}

.text-printed-section {
  position: absolute;
  top: 25%;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-printed-section h2 {
  color: #2f537e;
}

.text-printed-section p {
  color: #122843;
}

@media (prefers-color-scheme: dark) {
  .text-printed-section h2 {
    color: #ffffff;
  }
  .text-printed-section p {
    color: #DAEDFF;
  }
}
@media screen and (min-width: 768px) {
  .text-printed-section {
    left: 20%;
    top: 25%;
    width: 20%;
    text-align: left;
  }
  .text-printed-section h2 {
    font-size: 4.5rem;
  }
  .text-printed-section p {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  .printed-design {
    overflow: hidden;
  }
}
@media screen and (min-width: 768px) and (prefers-color-scheme: dark) {
  .uiux-section {
    background-color: #EBF5FF;
  }
  .ui-design-container {
    background-color: #131B1F;
  }
}
/* FINAL DISEÑO DIGITAL */
/* INICIO ESTILOS PÁGINA DE NOSOTROS */
/* INICIO HERO NOSOTROS */
.hero-nosotros {
  background-image: url("../../assets/images/about-us/about-us.webp");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: white;
}

.hero-nosotros h1 {
  font-size: 2.8rem;
  color: white;
}

@media (min-width: 768px) {
  .hero-nosotros {
    background-attachment: fixed;
  }
  .hero-nosotros h1 {
    font-size: 5.5rem;
  }
}
/* FINAL HERO NOSOTROS */
.about-us-section {
  padding: 10rem 0;
  background-color: #F9F9F9;
}

@media (prefers-color-scheme: dark) {
  .about-us-section {
    background-color: #090F11;
  }
}
.about-us-introduction {
  background: linear-gradient(to bottom, #fff1e6, #F2F2F2);
  padding: 8rem 2rem;
}
.about-us-introduction .introduction-text h2 {
  color: #ff6320;
  font-weight: bold;
}
.about-us-introduction .introduction-text p {
  color: #ff6320;
  font-size: 1.5rem;
  margin-top: 1.5rem;
}

.features-aboutus .bi-lightbulb {
  color: #E87A30;
  font-size: 4rem;
}
.features-aboutus .bi-people {
  color: #cf621e;
  font-size: 4rem;
}
.features-aboutus .bi-clipboard-data {
  color: #cf621e;
  font-size: 4rem;
}
.features-aboutus .bi-graph-up-arrow {
  color: #E87A30;
  font-size: 4rem;
}

/* INICIO ESTILOS VIDEO */
/* Estilos base */
.video-hero-section {
  height: 75vh;
  min-height: 900px;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}

.overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  transition: background-color 0.6s ease-out;
}

.video-content {
  height: 100%;
  z-index: 2;
  padding: 0 20px;
}

.video-title {
  font-size: 4rem;
  font-weight: 700;
}

.video-description {
  font-size: 1.7rem;
  max-width: 700px;
}

/* Responsive */
@media (min-width: 768px) {
  .video-title {
    font-size: 7rem;
  }
  .video-description {
    font-size: 2rem;
  }
}
/* FINAL ESTILOS VIDEO */
.landing-page {
  background-color: #F2F2F2;
  padding: 2rem 0;
  min-height: 80rem;
}

.landing-page .text-title p {
  width: 60%;
}

.landing-image {
  width: 15%;
}

@media screen and (min-width: 768px) {
  .landing-page {
    padding: 2rem 0;
    min-height: 60rem;
  }
}
.nav-pills .nav-link.active {
  background-color: #0a101a;
}

.nav-pills .nav-link {
  background-color: #ffffff;
  color: #0a101a;
  font-size: 1.5rem;
  padding: 1rem 2rem;
  font-weight: 500;
}

.info-web-alt {
  background-color: #ffffff;
  padding: 10rem 0;
}

@media (prefers-color-scheme: dark) {
  .info-web-alt {
    background-color: #090F11;
    color: #ffffff;
  }
}
/* INICIO BENTO GRID */
/* Estilo Bento Grid */
.bento-grid-section {
  background-color: #F2F2F2;
  padding: 5rem 0 10rem 0;
}

.bento-grid-section h2 {
  width: 90%;
}
.bento-grid-section .bi-globe-americas {
  font-size: 5rem;
  color: #E87A30;
}

@media screen and (min-width: 768px) {
  .bento-grid-section h2 {
    width: 50%;
  }
  .bento-grid-section .bi-globe-americas {
    font-size: 7rem;
    color: #E87A30;
  }
}
.bento-card {
  border-radius: 16px;
  overflow: hidden;
  min-height: 30rem;
  background-color: #F9F9F9;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 2px solid #e6e6e6;
  transition: all 0.3s ease;
  position: relative;
}
.bento-card .search-bar {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
}
.bento-card .mail-image {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
}
.bento-card .responsive-image {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}
@media (min-width: 768px) {
  .bento-card .responsive-image {
    bottom: -5%;
  }
}
@media (min-width: 992px) {
  .bento-card .responsive-image {
    bottom: -5%;
    width: 50%;
  }
}
@media (min-width: 1399px) {
  .bento-card .responsive-image {
    bottom: -5%;
    width: 40%;
  }
}
.bento-card .location-image {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}
.bento-card .social-image {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}
.bento-card .gallery-image {
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.bento-card:hover {
  transform: translateY(-5px);
  background-color: #f7f7f7;
  box-shadow: 0 4px 20px rgba(98, 161, 255, 0.07);
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
}

.bento-card h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.bento-card p {
  font-size: 1.6rem;
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  .bento-grid-section {
    background-color: #090F11;
  }
  .bento-grid-section h2 {
    color: #ffffff;
  }
  .bento-card {
    background-color: #131B1F;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: 1px solid #2F3B42;
  }
  .bento-card:hover {
    border: 1px solid #2F3B42;
    background-color: #090F11;
  }
  .bento-grid-section h3 {
    color: #ffffff;
  }
  .bento-grid-section p {
    color: #ffffff;
  }
}
/* INICIO ESTILOS DE TARJETAS WEB */
.feature-top {
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 1.5rem 1.5rem 0 0;
}

.feature-middle {
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
}

.feature-bottom {
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 0 0 1.5rem 1.5rem;
}

.landing-page-card {
  background-color: #F9F9F9;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
}

.landing-page {
  background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .landing-page {
    background-color: #131B1F;
    color: #ffffff;
  }
  .landing-page-card {
    background-color: #090F11;
    border: 1px solid #2F3B42;
    color: #ffffff;
  }
  .feature-top {
    background-color: #131B1F;
    border: 1px solid #2F3B42;
  }
  .feature-middle {
    background-color: #131B1F;
    border: 1px solid #2F3B42;
  }
  .feature-bottom {
    background-color: #131B1F;
    border: 1px solid #2F3B42;
  }
  .landing-image {
    filter: invert(100%);
  }
}
.landing-page-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(203, 224, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  .landing-page-card:hover {
    box-shadow: 10px 8px 20px rgba(203, 224, 255, 0.1);
    /* background-color: #273548; */
  }
}
.landing-page-card .fa-globe {
  background-color: rgb(184, 208, 249);
  padding: 1rem;
  border-radius: 50%;
  color: #1b3158;
  font-size: 3rem;
}

.landing-page-card .icon-container i {
  padding: 1.5rem;
  border-radius: 50%;
  font-size: 1.8rem;
}

/* NUEVA PALETA MODERNA */
.landing-page-card .fa-whatsapp {
  background-color: #d2f4dd;
  color: #27ae60;
}

.landing-page-card .fa-envelope {
  background-color: #d4efff;
  color: #0077cc;
}

.landing-page-card .fa-heart {
  background-color: #ffe0ec;
  color: #e84393;
}

.landing-page-card .fa-images {
  background-color: #fff6d5;
  color: #e2a500;
}

.landing-page-card .fa-map {
  background-color: #f4d9ff;
  color: #a44cc4;
}

.landing-page-card .fa-hand-point-left {
  background-color: #ffe7e3;
  color: #ff5733;
}

.landing-page-card .fa-pen-to-square {
  background-color: #e0f0ff;
  color: #2962ff;
}

.landing-page-card .fa-rectangle-list {
  background-color: #ffe0f0;
  color: #c2185b;
}

.landing-page-card .fa-star {
  background-color: #fffbe0;
  color: #f4c20d;
}

.landing-page-card .fa-chart-bar {
  background-color: #e6ffe4;
  color: #27ae60;
}

/* Ícono principal arriba */
.landing-page-card .icon-main {
  background-color: #f0f4ff;
  padding: 1rem;
  border-radius: 50%;
  color: #1d314d;
  font-size: 3rem;
}

/* Optimización SEO Básica */
.landing-page-card .fa-chart-line {
  background-color: rgb(222, 231, 255);
  color: #2a5de2;
  padding: 1.5rem;
  border-radius: 50%;
  font-size: 2rem;
}

.landing-page-card .fa-chalkboard-user {
  background-color: rgb(255, 214, 205);
  color: #e34d2b;
  padding: 1.5rem;
  border-radius: 50%;
  font-size: 2rem;
}

/* Estilo base para íconos pequeños */
.landing-page-card .icon-feature {
  padding: 1.5rem;
  border-radius: 50%;
  font-size: 2rem;
}

/* Colores únicos y modernos para cada ícono */
.icon-1 {
  background-color: #fce1e4;
  color: #d83a56;
}

.icon-2 {
  background-color: #e1f3fc;
  color: #2a7edb;
}

.icon-3 {
  background-color: #f0f0f0;
  color: #1b1f3b;
}

.icon-4 {
  background-color: #edfffa;
  color: #1c7c64;
}

.icon-5 {
  background-color: #fde1ff;
  color: #a532b2;
}

.icon-6 {
  background-color: #ffe7db;
  color: #c15a00;
}

.icon-7 {
  background-color: #d9eafc;
  color: #0e4e91;
}

.icon-8 {
  background-color: #fcebf3;
  color: #c71557;
}

.icon-9 {
  background-color: #f4fcd9;
  color: #6a9a00;
}

.icon-10 {
  background-color: #e9f3ff;
  color: #2350b8;
}

.website-section {
  background-color: #F2F2F2;
}

@media (prefers-color-scheme: dark) {
  .website-section {
    background-color: #131B1F;
    color: white;
  }
}
/* FINAL ESTILOS DE TARJETAS WEB */
/* INICIO FORMULARIO DE CONTACTO */
.contact-section {
  padding: 6rem 0;
  background-color: #F2F2F2;
}

.fa-paper-plane {
  color: #E87A30;
  margin-right: 0.5rem;
}

.section-subtitle {
  font-size: 1.6rem;
  color: #6c757d;
  margin-bottom: 2rem;
}

.contact-form {
  background: #ffffff;
  padding: 3rem;
  border-radius: 1.5rem;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.6rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  border: 1px solid #dee2e6;
  border-radius: 1.2rem;
  background: #f8f9fa;
  margin-bottom: 1.5rem;
}

.form-success {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #28a745;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .contact-section {
    background-color: #090F11;
  }
  .section-title {
    color: #ffffff;
  }
  .section-subtitle {
    color: #cccccc;
  }
  .contact-form {
    background: #090F11;
    box-shadow: 0 5px 30px rgba(97, 97, 97, 0.05);
    border: 2px solid #2F3B42;
  }
  .contact-form label {
    color: #ffffff;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    background: #131B1F;
    border: 2px solid #2F3B42;
    color: #ffffff;
  }
  .contact-form input::-moz-placeholder, .contact-form textarea::-moz-placeholder {
    color: #999999;
  }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: #999999;
  }
}
/* FINAL FORMULARIO DE CONTACTO */
.how-it-works i {
  font-size: 4rem;
  color: #cf621e;
}

.how-it-works {
  padding: 6rem 0;
}

@media (prefers-color-scheme: dark) {
  .how-it-works {
    background-color: #131B1F;
  }
}
/* ESTILOS SECCIÓN NFC */
.product-section {
  padding: 6rem 0 0 0;
}
.product-section .description-section {
  font-size: 2rem;
  color: #E87A30;
}

.third-design-container {
  min-height: 70rem;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 4rem;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
}

.nfc-button {
  background-color: black;
  color: #ffffff;
  padding: 0.8rem 2rem;
  border-radius: 1.5rem;
  font-size: 1.3rem;
  margin-top: 2rem;
  z-index: 999;
}

.price-nfc {
  font-size: 1.4rem;
  color: #058679;
}

.third-design-container h2 {
  font-size: 2.2rem;
}

.third-design-container .nfc-meaning {
  background-color: red;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .third-design-container {
    min-height: 100rem;
  }
  .third-design-container .nfc-meaning {
    background-color: transparent;
    text-align: left;
    width: 50%;
    margin: 0 auto;
  }
  .third-design-container h2 {
    font-size: 4.5rem;
  }
  .price-nfc {
    font-size: 1.8rem;
  }
  .nfc-button {
    font-size: 1.5rem;
  }
}
.third-design-container .nfc-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .third-design-container {
    background-image: linear-gradient(to bottom, #090F11, #131B1F);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }
  .third-design-container .nfc-meaning {
    background-color: transparent;
    text-align: center;
  }
  .third-design-container h2 {
    color: #ffffff;
  }
  .price-nfc {
    color: #eeffd6;
  }
  .nfc-button {
    background-color: #eeffd6;
    color: #0e151f;
  }
  .product-section {
    background-color: #131B1F;
  }
}
/* ESTILOS SECCIÓN NFC */