/* ===== NAV LINKS ===== */

        .nav-links a {
          position: relative;
          padding: 5px 0;
          transition: .25s;
        }

        /* línea animada */

        .nav-links a::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -6px;
          width: 0;
          height: 2px;
          background: #1f3a5f;
          transition: .3s;
        }

        /* hover */

        .nav-links a:hover::after {
          width: 100%;
        }

        /* link activo */

        .nav-links a.active {
          color: #1f3a5f;
          font-weight: 600;
        }

        .nav-links a.active::after {
          width: 100%;
        }

        @keyframes floatMove {
          0% {
            transform: translateY(0px) rotate(0deg);
          }

          50% {
            transform: translateY(-20px) rotate(6deg);
          }

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

        .floating {
          position: absolute;
          animation: floatMove 8s ease-in-out infinite;
          pointer-events: none;
          opacity: .35;
        }

        .star {
          width: 40px;
        }

        .star1 {
          top: 40px;
          left: 10%;
          animation-delay: 0s;
        }

        .star2 {
          top: 150px;
          left: 35%;
          animation-delay: 2s;
        }

        .star3 {
          top: 70px;
          right: 25%;
          animation-delay: 4s;
        }

        .star4 {
          bottom: 80px;
          right: 10%;
          animation-delay: 1s;
        }

        .money {
          width: 70px;
          opacity: .5;
        }

        .coin1 {
          top: 120px;
          right: 50%;
          animation-delay: 1s;
        }

        .coin2 {
          bottom: 60px;
          left: 15%;
          animation-delay: 3s;
        }

        .bill1 {
          top: 500px;
          right: 40%;
          width: 90px;
          animation-delay: 2s;
        }

        .bill2 {
          bottom: 120px;
          right: 5%;
          width: 80px;
          animation-delay: 4s;
        }

        @media(max-width:768px) {

          .star {
            width: 25px;
          }

          .money {
            width: 45px;
          }

        }

        /* RESET */

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Montserrat', sans-serif;
        }

        body {
          background: #f6f9fc;
          color: #333;
        }

        /* CONTAINER */

        .container {
          max-width: 1200px;
          margin: auto;
          padding: 0 20px;
        }

        /* HEADER */

        header {
          background: white;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          position: sticky;
          top: 0;
          z-index: 100;
        }

        .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 70px;
        }

        .logo {
          font-weight: 700;
          font-size: 22px;
          color: #1f3a5f;
        }

        .logo img {
          height: 55px;
          width: auto;
          object-fit: contain;
        }

        .nav-links {
          display: flex;
          gap: 25px;
        }

        .nav-links a {
          text-decoration: none;
          color: #444;
          font-weight: 500;
        }

        .nav-buttons {
          display: flex;
          gap: 10px;
        }

        .btn {
          padding: 10px 18px;
          border-radius: 8px;
          border: none;
          cursor: pointer;
          font-weight: 600;
        }

        .btn-outline {
          border: 1px solid #ddd;
          background: white;
        }

        .btn-primary {
          background: #1f3a5f;
          color: white;
        }

        /* HERO */

        .hero {
          background-image: url("../assets/img/fondos.png");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }

        .hero-container {
          max-width: 1200px;
          margin: auto;
          display: grid;
          grid-template-columns: 1fr 420px;
          gap: 80px;
          align-items: center;
        }

        /* TITULO */

        .hero-left h1 {
          font-size: 46px;
          color: #1f3a5f;
          line-height: 1.2;
          margin-bottom: 20px;
        }

        .hero-left span {
          color: #1f3a5f;
        }

        /* TEXTO */

        .hero-left p {
          color: #6b7280;
          font-size: 18px;
          margin-bottom: 30px;
        }


        /* BENEFICIOS */

        .hero-benefits {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 30px;
          color: #374151;
        }

        /* BOTONES */

        .hero-buttons {
          display: flex;
          gap: 15px;
          margin-bottom: 30px;
        }

        .btn-primary {
          background: #1f3a5f;
          color: white;
          padding: 14px 28px;
          border-radius: 10px;
          font-weight: 600;
          cursor: pointer;
        }

        .btn-outline {
          border: 2px solid #1f3a5f;
          color: #1f3a5f;
          padding: 12px 24px;
          border-radius: 10px;
        }

        /* BANCOS */

        .hero-banks {
          display: flex;
          gap: 20px;
          align-items: center;
        }

        .hero-banks img {
          height: 28px;
          opacity: .6;
          filter: grayscale(100%);
        }

        /* CARD */

        .exchange-card {
          background: white;
          padding: 35px;
          border-radius: 20px;
          box-shadow:
            0 30px 60px rgba(0, 0, 0, 0.1);
        }

        .exchange-card h3 {
          margin-bottom: 20px;
          color: #1f3a5f;
        }

        .exchange-card label {
          font-size: 14px;
          color: #6b7280;
        }

        .exchange-card input {
          width: 100%;
          padding: 14px;
          margin: 10px 0 20px;
          border-radius: 8px;
          border: 1px solid #e5e7eb;
        }

        .rate {
          text-align: center;
          font-size: 20px;
          margin-bottom: 20px;
        }

        .exchange-card button {
          width: 100%;
          background: #1f3a5f;
          color: white;
          padding: 14px;
          border: none;
          border-radius: 10px;
          font-weight: 600;
          cursor: pointer;
        }

        /* RESPONSIVE */


        @media (max-width: 900px) {

          .hero-container {
            grid-template-columns: 1fr;
          }

          .hero-right {
            order: -1;
            margin-bottom: 30px;
          }

          .calc-rates {
            flex-direction: row !important;
          }
        }

        /* =========================
RESPONSIVE TABLET
========================= */

        @media (max-width: 1024px) {

          .hero-container {
            grid-template-columns: 1fr;
            gap: 50px;
            text-align: center;
          }

          .hero-left h1 {
            font-size: 38px;
          }

          .hero-left p {
            font-size: 16px;
          }

          .hero-buttons {
            justify-content: center;
          }

          .calculator {
            max-width: 100%;
            margin: auto;
          }

          .about-wrapper {
            grid-template-columns: 1fr;
            text-align: center;
          }

          .about-image {
            max-width: 400px;
            margin: auto;
          }

          .faq-wrapper {
            grid-template-columns: 1fr;
          }

          .contact-wrapper {
            grid-template-columns: 1fr;
          }

        }

        /* =========================
        RESPONSIVE MOBILE
        ========================= */

        @media (max-width: 768px) {

          .container {
            padding: 0 16px;
          }

          .hero {
            background-image: url("../assets/img/fondos.png");
            min-height: auto;
            padding: 60px 0 40px 0;
            background-position: top center;
          }

          .hero-left h1 {
            font-size: 30px;
            line-height: 1.3;
          }

          .hero-left span {
            display: block;
          }

          .hero-buttons {
            flex-direction: column;
            align-items: center;
          }

          .btn-primary,
          .btn-outline {
            width: 100%;
            text-align: center;
          }

          /* CALCULADORA */

          .calculator {
            max-width: 100%;
            border-radius: 16px;
          }

          .calc-top {
            padding: 20px;
          }

          .calc-title {
            font-size: 18px;
          }

          .calc-rates {
            flex-direction: column;
          }

          .rate-card {
            padding: 12px;
          }

          .rate-card strong {
            font-size: 18px;
          }

          .currency-row {
            padding: 14px;
          }

          .currency-label {
            font-size: 14px;
          }

          .currency-desc {
            font-size: 11px;
          }

          /* INPUT */

          #dolarInput {
            font-size: 22px;
            width: 100px;
          }

          /* RESULTADO */

          .result {
            font-size: 22px;
          }

          /* SWAP */

          .swap {
            width: 42px;
            height: 42px;
          }

          /* CTA */

          .cta-main {
            font-size: 15px;
            padding: 14px;
          }

          /* ABOUT */

          .about-section {
            padding: 70px 0;
          }

          .about-cards {
            flex-direction: column;
          }

          /* TESTIMONIOS */

          .testimonials-slider {
            grid-template-columns: 1fr;
          }

          /* FOOTER */

          .footer-grid {
            grid-template-columns: 1fr;
            text-align: center;
          }

        }

        /* =========================
MOBILE PEQUEÑO
========================= */

        @media (max-width:480px) {

          .hero-left h1 {
            font-size: 26px;
          }

          .calc-title {
            font-size: 16px;
          }

          .rate-card strong {
            font-size: 16px;
          }

          .currency-row {
            padding: 12px;
          }

          #dolarInput {
            font-size: 20px;
          }

          .result {
            font-size: 20px;
          }

          .saving {
            font-size: 13px;
          }

        }

        /* BANKS */

        .banks {
          padding: 80px 0;
          background: #f7f9fc;
          text-align: center;
        }

        .banks h3 {
          font-size: 22px;
          color: #1f3a5f;
          margin-bottom: 35px;
        }

        /* contenedor */

        .bank-logos {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 60px;
          flex-wrap: wrap;
        }

        /* logos */

        .bank-logos img {
          height: 38px;
          opacity: 0.6;
          filter: grayscale(100%);
          transition: all .35s ease;
        }

        /* hover */

        .bank-logos img:hover {
          opacity: 1;
          filter: grayscale(0%);
          transform: scale(1.1);
        }

        /* responsive */

        @media(max-width:768px) {
          .bank-logos {
            gap: 30px;
          }

          .bank-logos img {
            height: 30px;
          }

        }

        /* ABOUT */

        .about-section {
          padding: 120px 0;
          background:
            linear-gradient(180deg, #e3efff, #daffd9);
        }

        .about-wrapper {
          display: grid;
          grid-template-columns: minmax(320px, 450px) 1fr;
          gap: 60px;
          align-items: center;
          max-width: 1200px;
          margin: auto;
          padding: 0 20px;
        }

        /* IMAGEN */

        .about-image {

          position: relative;

        }

        .about-image img {
          width: 100%;
          height: auto;
          object-fit: cover;
          border-radius: 20px;
        }

        /* TEXTO */

        .about-content h2 {

          font-size: 34px;

          color: #1f3a5f;

          margin-bottom: 14px;

        }

        .about-content p {
          color: #6b7280;
          font-size: 16px;
          line-height: 1.6;
          margin-bottom: 35px;
        }

        /* CARDS */

        .about-cards {
          display: flex;
          gap: 20px;
        }

        /* CARD */

        .about-card {
          background: white;
          padding: 22px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          gap: 15px;
          flex: 1;
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.08);
          transition: .35s;

        }

        /* DESTACADA */

        .about-card.highlight {
          border: 1px solid #1f3a5f;
          box-shadow:
            0 20px 50px rgba(31, 191, 154, 0.3);
          transform: scale(1.05);
        }

        /* HOVER */

        .about-card:hover {
          transform: translateY(-8px);
          box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.18);
        }

        /* ICONO */

        .icon {
          width: 55px;
          height: 55px;
          background: linear-gradient(145deg, #e8f8f4, #dff4ef);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: #1f3a5f;
          box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.08);
        }

        /* TEXTO */

        .about-card h4 {
          font-size: 16px;
          color: #1f3a5f;
          margin-bottom: 3px;
        }

        .about-card span {
          font-size: 13px;
          color: #6b7280;
        }

        /* RESPONSIVE */

        @media(max-width:900px) {
          .about-wrapper {
            grid-template-columns: 1fr;
            text-align: center;
          }

          .about-cards {
            flex-direction: column;
          }

          .about-card {
            justify-content: center;
          }

        }

        @media(max-width:768px) {

          .about-section {
            padding: 70px 0;
          }

          .about-wrapper {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 40px;
          }

          .about-image {
            max-width: 420px;
            margin: auto;
          }

          .about-cards {
            grid-template-columns: 1fr;
          }

        }

        /* AYUDA */

        .faq {

          padding: 120px 0;
          background:
            linear-gradient(180deg, #e3efff, #daffd9);
        }

        .faq-wrapper {

          display: grid;
          grid-template-columns: 420px 1fr;
          gap: 80px;
          align-items: center;
          max-width: 1100px;
          margin: auto;

        }

        /* imagen */

        .faq-image {
          position: relative;
        }

        .faq-image img {
          width: 100%;
          border-radius: 20px;
          box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        }

        .faq-bubble {
          position: absolute;
          bottom: -20px;
          left: 30px;
          background: #1f3a5f;
          color: white;
          padding: 10px 18px;
          border-radius: 30px;
          font-weight: 600;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        /* contenido */

        .faq-content h2 {
          font-size: 32px;
          color: #1f3a5f;
          margin-bottom: 30px;
        }

        /* items */

        .faq-item {
          background: white;
          border-radius: 14px;
          margin-bottom: 15px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
          overflow: hidden;
        }

        .faq-question {
          width: 100%;
          padding: 20px;
          border: none;
          background: white;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          color: #1f3a5f;
        }

        .faq-question span {
          color: #1f3a5f;
          font-size: 22px;
        }

        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height .35s ease;
          padding: 0 20px;
        }

        .faq-answer p {
          margin: 15px 0;
          color: #6b7280;
        }

        /* responsive */

        @media(max-width:900px) {
          .faq-wrapper {
            grid-template-columns: 1fr;
          }

          .faq-image {
            max-width: 350px;
            margin: auto;
          }

        }

        /* RAZONES */

        .reasons {
          padding: 90px 0;
          text-align: center;
        }

        .reasons-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 25px;
          margin-top: 40px;
        }

        .reason-card {
          background: white;
          padding: 30px;
          border-radius: 12px;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
        }

        /* RAZONES */

        .reasons-section {

          padding: 100px 0;

          background: linear-gradient(180deg, #f4f7fb, #ffffff);

          text-align: center;

        }

        .reasons-section h2 {

          font-size: 32px;

          color: #1f3a5f;

          margin-bottom: 60px;

        }

        /* GRID */

        .reasons-grid {

          display: grid;

          grid-template-columns: repeat(3, 1fr);

          gap: 30px;

        }

        /* CARDS */

        .reason-card {

          background: white;

          padding: 40px 30px;

          border-radius: 16px;

          box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.08);

          transition: .35s;

          border: 1px solid rgba(0, 0, 0, 0.04);

        }

        /* CARD DESTACADA */

        .reason-card.highlight {

          border: 1px solid #1f3a5f;

          box-shadow:
            0 20px 50px rgba(31, 191, 154, 0.25);

          transform: scale(1.05);

        }

        /* HOVER */

        .reason-card:hover {

          transform: translateY(-10px);

          box-shadow:
            0 30px 60px rgba(0, 0, 0, 0.15);

        }

        /* ICONO */

        .reason-card .icon {

          width: 65px;

          height: 65px;

          margin: auto;

          margin-bottom: 18px;

          background: #e8f8f4;

          border-radius: 50%;

          display: flex;

          align-items: center;

          justify-content: center;

          color: #1f3a5f;

          font-size: 26px;

        }

        /* TEXTO */

        .reason-card h3 {

          font-size: 20px;

          margin-bottom: 10px;

          color: #1f3a5f;

        }

        .reason-card p {

          font-size: 15px;

          color: #6b7280;

        }

        /* RESPONSIVE */

        @media(max-width:900px) {

          .reasons-grid {

            grid-template-columns: 1fr;

          }

        }

        /* TESTIMONIOS */

        .testimonials {

          padding: 110px 0;

          background: linear-gradient(180deg, #f4f7fb, #ffffff);

          text-align: center;

        }

        .testimonials h2 {

          font-size: 32px;

          color: #1f3a5f;

          margin-bottom: 60px;

        }

        /* GRID */

        .testimonials-slider {

          display: grid;

          grid-template-columns: repeat(3, 1fr);

          gap: 30px;

        }

        /* CARD */

        .testimonial-card {

          background: white;

          padding: 35px;

          border-radius: 18px;

          box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.08);

          transition: .35s;

          border: 1px solid rgba(0, 0, 0, 0.04);

          text-align: left;

        }

        /* DESTACADA */

        .testimonial-card.highlight {

          border: 1px solid #1f3a5f;

          box-shadow:
            0 25px 60px rgba(31, 191, 154, 0.25);

          transform: scale(1.05);

        }

        /* HOVER */

        .testimonial-card:hover {

          transform: translateY(-10px);

          box-shadow:
            0 35px 70px rgba(0, 0, 0, 0.15);

        }

        /* ESTRELLAS */

        .stars {

          color: #fbbf24;

          margin-bottom: 15px;

        }

        /* TEXTO */

        .testimonial-text {

          color: #6b7280;

          font-size: 15px;

          line-height: 1.6;

          margin-bottom: 25px;

        }

        /* USUARIO */

        .user {

          display: flex;

          align-items: center;

          gap: 12px;

        }

        .user img {

          width: 45px;

          height: 45px;

          border-radius: 50%;

          object-fit: cover;

        }

        .user span {

          display: block;

          font-size: 12px;

          color: #9ca3af;

        }

        /* RESPONSIVE */

        @media(max-width:900px) {

          .testimonials-slider {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 10px;
          }

          .testimonial-card {
            min-width: 85%;
            flex: 0 0 auto;
            scroll-snap-align: center;
          }

        }

        /* CONTACTO */

        .contact {

          padding: 120px 0;
          background:
            linear-gradient(180deg, #e3efff, #daffd9);
        }

        .contact-wrapper {
          max-width: 1100px;
          margin: auto;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
          align-items: start;
        }

        /* INFO */

        .contact-info {
          background: white;
          padding: 50px;
          border-radius: 20px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
        }

        .contact-info h2 {
          font-size: 32px;
          color: #1f3a5f;
          margin-bottom: 10px;
        }

        .contact-info p {
          color: #6b7280;
          margin-bottom: 30px;
        }

        .contact-list {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .contact-item {
          display: flex;
          align-items: center;
          gap: 15px;
        }

        .contact-item i {
          width: 45px;
          height: 45px;
          background: #e6f7f2;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: #1f3a5f;
          font-size: 18px;
        }

        .contact-item strong {
          display: block;
          font-size: 14px;
          color: #1f3a5f;
        }

        .contact-item span {
          font-size: 14px;
          color: #6b7280;
        }

        .contact-cta {
          margin-top: 30px;
          background: #1f3a5f;
          color: white;
          padding: 15px;
          border-radius: 10px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 10px;
          justify-content: center;
        }

        /* FORM */

        .contact-form {
          background: white;
          padding: 50px;
          border-radius: 20px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
        }

        .contact-form h3 {
          margin-bottom: 25px;
          font-size: 22px;
          color: #1f3a5f;
        }

        .contact-form input,
        .contact-form textarea {
          width: 100%;
          padding: 14px;
          border-radius: 10px;
          border: 1px solid #e5e7eb;
          margin-bottom: 15px;
        }

        .contact-form textarea {
          height: 120px;
        }

        .contact-form button {
          background: #1f3a5f;
          color: white;
          border: none;
          padding: 14px;
          border-radius: 10px;
          font-weight: 600;
          cursor: pointer;
          width: 100%;
          transition: .3s;
        }

        .contact-form button:hover {
          background: #18a882;
          transform: translateY(-2px);
        }

        /* responsive */

        @media(max-width:900px) {
          .contact-wrapper {
            grid-template-columns: 1fr;
          }
        }

        /* FOOTER */

        footer {
          background: #1f3a5f;
          color: white;
          padding: 40px 0;
          margin-top: 40px;
        }

        .footer-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 30px;
        }

        footer a {
          color: #ddd;
          text-decoration: none;
          display: block;
          margin: 6px 0;
        }

        /* RESPONSIVE */

        @media(max-width:900px) {

          .hero-wrapper {
            grid-template-columns: 1fr;
          }

          .about-wrapper {
            grid-template-columns: 1fr;
          }

          .contact-grid {
            grid-template-columns: 1fr;
          }

          .nav-links {
            display: none;
          }

        }

        /* ===== CALCULADORA ===== */

        .calculator {
          background: #ffffff;
          border-radius: 20px;
          box-shadow: 0 25px 60px rgba(0, 0, 0, .10);
          max-width: 420px;
          overflow: hidden;
          border: 1px solid #e6edf5;
          font-family: 'Montserrat', sans-serif;
        }

        /* HEADER */

        .calc-top {
          padding: 24px 22px;
          background: #f3f6fa;
          border-bottom: 1px solid #e6edf5;
          text-align: center;
        }

        .calc-title {
          font-size: 20px;
          font-weight: 600;
          color: #1f3a5f;
          margin-bottom: 18px;
        }

        /* BOTONES TIPO CAMBIO */

        .calc-rates {
          display: flex;
          gap: 12px;
          margin-bottom: 12px;
        }

        /* BOTONES TIPO CAMBIO */

        .rate-card {
          flex: 1;
          background: white;
          border-radius: 14px;
          padding: 10px;
          border: 1px solid #fff;
          cursor: pointer;
          text-align: center;
          transition: .25s;
        }

        .rate-card span {
          font-size: 15px;
          color: #fff;
        }

        .rate-card strong {
          display: flex;
          justify-content: center;
          align-items: baseline;
          gap: 4px;
          font-weight: 700;
          color: #fff;
        }

        .rate-card strong .currency {
          font-size: 22px;
          opacity: .9;
        }

        .rate-card strong .price {
          font-size: 34px;
          font-weight: 800;
          letter-spacing: .5px;
        }

        .rate-card.active {
          background: #fff;
          border: none;
          color: white;
        }

        .rate-card.active span {
          color: #fff;
        }

        .rate-card.active .currency,
        .rate-card.active .price {
          color: white;
        }

        /* CTA SUPERIOR */

        .cta-top-btn {
          width: 100%;
          background: #1f3a5f;
          border: none;
          padding: 10px;
          border-radius: 10px;
          color: white;
          font-size: 16px;
          font-weight: 700;
          letter-spacing: .3px;
          cursor: pointer;
        }

        /* BODY */

        .calc-body {
          padding: 22px;
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        /* CONTENEDOR */

        .currency-wrapper {
          display: flex;
          flex-direction: column;
          gap: 14px;
          position: relative;
          padding: 8px 0;
        }

        /* FILAS */

        .currency-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #f9fbfd;
          border-radius: 12px;
          padding: 16px;
          border: 1px solid #e6edf5;
        }

        /* IZQUIERDA */

        .currency-left {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .currency-left img {
          width: 28px;
        }

        .currency-label {
          font-weight: 700;
          font-size: 15px;
          color: #1f3a5f;
        }

        .currency-desc {
          font-size: 12px;
          color: #6b7280;
          display: block;
        }

        /* INPUT */

        #dolarInput {
          border: none;
          background: transparent;
          font-size: 28px;
          font-weight: 800;
          width: 120px;
          text-align: right;
          color: #1f3a5f;
          outline: none;
        }

        /* RESULTADO */

        .result {
          font-size: 28px;
          font-weight: 800;
          color: #1f3a5f;
        }

        /* SWAP */

        .swap {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 46px;
          height: 46px;
          border-radius: 50%;
          border: 1px solid #e6edf5;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 18px;
          color: #1f3a5f;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
          transition: .3s;
          z-index: 5;
        }

        .swap:hover {
          transform: translate(-50%, -50%) rotate(180deg);
          background: #f3f6fa;
        }

        /* AHORRO */

        .saving {
          background: #e8f8f4;
          border: 1px solid #c6f3e6;
          padding: 12px;
          border-radius: 10px;
          font-size: 15px;
          text-align: center;
          font-weight: 500;
          margin-top: 6px;
          color: #1f3a5f;
        }

        .saving strong {
          font-size: 17px;
        }

        /* BOTÓN PRINCIPAL */

        .cta-main {
          margin-top: 1px;
          width: 100%;
          background: #1f3a5f;
          border: none;
          padding: 16px;
          border-radius: 12px;
          color: white;
          font-weight: 800;
          font-size: 17px;
          letter-spacing: .4px;
          box-shadow: 0 10px 25px rgba(31, 191, 154, .35);
          cursor: pointer;
        }

        .cta-main:hover {
          background: #18a882;
        }

        /* REGISTRO */

        .register {
          text-align: center;
          margin-top: 12px;
          font-size: 14px;
          color: #6b7280;
        }

        .register a {
          color: #1f3a5f;
          font-weight: 600;
          text-decoration: none;
        }

        .register a:hover {
          text-decoration: underline;
        }

        /* MENU HAMBURGUESA */

        .menu-toggle {
          display: none;
          font-size: 22px;
          cursor: pointer;
          color: #1f3a5f;
        }

        /* MOBILE */

        @media(max-width:900px) {

          .menu-toggle {
            display: block;
          }

          .nav-links {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            background: white;
            flex-direction: column;
            gap: 0;
            display: none;
            border-top: 1px solid #eee;
          }

          .nav-links a {
            padding: 15px 20px;
            border-bottom: 1px solid #f2f2f2;
          }

          .nav-links.active {
            display: flex;
          }

          .nav-buttons {
            display: none;
          }

          .nav-links a.active {
            color: #1f3a5f;
            font-weight: 600;
          }
        }

        /* LIBRO DE RACLAMACIONES */

        body {
          background: #f4f7fb;
          font-family: 'Montserrat', sans-serif;
          margin: 0;
        }

        .banner {
          background: #1f3a5f;
          padding: 100px 0 70px;
          text-align: center;
          color: white;
        }

        .banner h1 {
          font-size: 48px;
          font-weight: 900;
          letter-spacing: 1px;
          margin: 0;
        }

        .reclamos {
          padding: 80px 0;
        }

        .container {
          max-width: 1100px;
          margin: auto;
          padding: 0 20px;
        }

        .lr-card {
          background: white;
          padding: 50px;
          border-radius: 18px;
          box-shadow: 0 25px 60px rgba(0, 0, 0, .08);
        }

        .lr-empresa {
          background: #f1f5f9;
          padding: 18px;
          border-radius: 12px;
          margin-bottom: 20px;
          font-size: 14px;
          color: #475569;
        }

        .lr-text {
          margin-bottom: 15px;
          color: #334155;
        }

        .lr-info {
          background: #eef7ff;
          border-left: 4px solid #1f3a5f;
          padding: 15px;
          border-radius: 8px;
          margin-bottom: 25px;
          font-size: 14px;
        }

        .lr-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
        }

        .form-group {
          display: flex;
          flex-direction: column;
        }

        .form-group label {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 6px;
          color: #334155;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
          padding: 14px;
          border-radius: 10px;
          border: 1px solid #e2e8f0;
          font-size: 15px;
        }

        .form-group textarea {
          height: 130px;
        }

        .full {
          grid-column: 1/3;
        }

        .lr-declaracion {
          margin-top: 25px;
          font-size: 14px;
          color: #475569;
        }

        .lr-btn {
          margin-top: 30px;
          width: 100%;
          background: linear-gradient(135deg, #1f3a5f, #1f3a5f);
          border: none;
          padding: 18px;
          border-radius: 12px;
          color: white;
          font-weight: 800;
          letter-spacing: .5px;
          cursor: pointer;
          transition: .3s;
        }

        .lr-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(31, 191, 154, .35);
        }

        .alert {
          background: #ffe2e2;
          padding: 15px;
          border-radius: 10px;
          margin-bottom: 20px;
        }

        .success {
          background: #e8f8f4;
          padding: 15px;
          border-radius: 10px;
          margin-bottom: 20px;
        }

        @media(max-width:768px) {
          .lr-grid {
            grid-template-columns: 1fr;
          }

          .full {
            grid-column: auto;
          }

          .banner h1 {
            font-size: 30px;
          }

          .lr-card {
            padding: 30px;
          }
        }