@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wdth@75..100&display=swap');

:root{ --qb:#2ca01c; --qb-dark:#0c6d0c;--qb-white:#ffffff; 
  --gold:#f2c94c; --ink:#0f1520; --muted:#5c6b61; 
    --bg:#ecfff0; --card:#ffffffee; --border:#e7f4e6; --ring:rgba(44,160,28,.35); 
    --shadow:0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.03); --radius:22px; --gold: #f2c94c;
    --shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.03); --radius: 22px;--header-h: 72px;}

    /* por ejemplo en reponsivopaginaweb.css */s
  section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }


    *{box-sizing:border-box}
    body{
      margin:0; 
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; 
      color:var(--ink); background:var(--bg); 
      line-height:1.55; -webkit-font-smoothing:antialiased; 
      text-rendering:optimizeLegibility;
    }

    a{color:inherit}

    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
    }

    main {
      flex: 1; /* ocupa todo el espacio disponible y empuja el footer */
    }

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

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

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

    .container-coment{
      max-width:1500px; 
      padding:0 20px; 
      margin:0 auto
    }    
    
    .btn{ --bgc:var(--qb); --fg:#fff; --bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.95rem 1.25rem; border-radius:999px; border:2px solid var(--bd); text-decoration:none; font-weight:800; letter-spacing:.2px; color:var(--fg); background:var(--bgc); box-shadow:0 10px 20px var(--ring); transition:transform .15s, box-shadow .15s, background .2s; }
    .btn:hover{ 
      transform:translateY(-1px); 
      box-shadow:0 14px 28px var(--ring) 
    }
    .btn:active{ transform:none }
    .btn-outline{ --bgc:#fff; --fg:var(--qb); --bd:var(--qb); box-shadow:none }
    .btn-dark{ --bgc:#101318; --fg:#fff; --bd:#101318; box-shadow:0 10px 24px rgba(0,0,0,.2) }
    .kicker{ display:inline-flex; font-size: 15px ;align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:999px; font-weight:800; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); color:var(--qb-dark) }
    .qb-badge{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--qb); color:#fff; font-size:.78rem; font-weight:900 }

    /* ===== NAV ===== */
    .site-nav{ 
        position:sticky; 
        top:0; 
        z-index:50; 
        backdrop-filter:saturate(130%) blur(8px); 
        background:linear-gradient(180deg,#ffffffd0 0,#ffffffa8 100%); 
        border-bottom:1px solid #ffffffaa }
        
    .site-nav .row{ 
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        /* padding:12px 0  */
    }

    
    .brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
    .brand-mark{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#111; font-weight:900; background:linear-gradient(135deg,#141414,#2a2a2a); position:relative; overflow:hidden; box-shadow:inset 0 0 0 2px #ffffff0f }
    .brand-mark:before{ content:""; position:absolute; inset:2px; border-radius:10px; background:conic-gradient(from 180deg at 60% 40%, #ffd46b, #f2c94c, #caa52d, #ffe082, #f2c94c); mix-blend:screen; opacity:.25 }
    .brand-name{ font-weight:900; letter-spacing:.3px }
    .nav-links{ display:flex; align-items:center; gap:10px }
    .nav-links a{ text-decoration:none; font-weight:700; color:#253d23; padding:.55rem .8rem; border-radius:999px }
    .nav-links a:hover{ background:#ecffee }

    /* ===== HERO (home) ===== */
    .hero{ position:relative; isolation:isolate;
      background: radial-gradient(1000px 400px at 80% -80px, #8eff87 0, transparent 70%), 
      radial-gradient(850px 650px at -10% 40%, #8eff87  0, transparent 60%), 
      linear-gradient(120deg, #ecfff0 0%, #ebffef 40%, #f6fff8 100%);
    }

    .hero:after{ content:""; position:absolute; inset:-40px 0 auto; height:420px; z-index:-1;
      background:radial-gradient(600px 260px at 10% 20%, #2ca01c10 0, transparent 60%), radial-gradient(700px 300px at 90% 10%, #2ca01c12 0, transparent 60%); }
    .hero-inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; padding:clamp(40px,6vw,90px) 0 40px }
    @media (max-width:950px){ .hero-inner{ grid-template-columns:1fr } }
    .title{ font-size:clamp(34px,4.6vw,64px); line-height:1.05; margin:14px 0 12px; font-weight:900; letter-spacing:-.6px }
    .lead{ font-size:clamp(16px,1.5vw,19px); color:var(--muted); margin:0 0 26px }
    .cta-row{ display:flex; gap:12px; flex-wrap:wrap }

    /* .phone{ width:min(440px,94%); 
        justify-self:center;
        position:relative; 
        aspect-ratio:10/19; 
        border-radius:38px; 
        padding:22px; background:linear-gradient(180deg,#0e0f10,#2b2f2b); 
        box-shadow:0 30px 60px rgba(0,0,0,.25), 
        inset 0 0 0 1px #ffffff10;
         border:8px solid #0b0b0c; 
         overflow:hidden } */

    .screen{ height:100%; border-radius:26px; background:radial-gradient(1000px 400px at 50% -20%, #9cff93 0, transparent 70%), linear-gradient(180deg, #ffffff 0, #f9fff9 100%); display:grid; place-items:center; position:relative }
    .logo-stack{ display:grid; gap:12px; place-items:center; text-align:center }
    .logo-stack .mark{ width:90px; height:90px; border-radius:24px; display:grid; place-items:center; font-weight:900; color:#111; background:conic-gradient(from 160deg at 60% 40%, #ffd46b, #f2c94c, #caa52d, #ffd46b); box-shadow:inset 0 0 0 2px #ffffff22, 0 10px 24px rgba(44,160,28,.25) }
    .logo-stack span{ font-weight:800; background:#ecfff0; border:1px solid var(--border); padding:.25rem .6rem; border-radius:999px; color:var(--qb-dark) }
    .ribbon{ display:flex; align-items:center; gap:10px; padding:12px 0; color:#244b23 }
    .ribbon strong{ color:var(--qb-dark) }

    /* ===== PAQUETES ===== */
    .features{ padding:60px 0 30px }
    .features .grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px }
    .features .intro{ grid-column:span 12; text-align:center; margin-bottom:8px }

    .cards{ grid-column:span 12; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
    .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s }
    .card:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,0,0,.09) }
    .card h4{ margin:10px 0 6px; font-size:1.08rem }
    .icon{ 
      width:46px; 
      height:46px; 
      border-radius:12px; 
      display:grid; 
      place-items:center; 
      background:#ecfff2; 
      border:1px solid #dcf5df 
    }
    .icon svg{ 
      width:26px; 
      height:26px; 
      stroke:var(--qb-dark) 
    }

    .pricing{ padding:40px 0 80px }
    .pricing .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px }
    .price-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px;}
    .price-card h3{ margin:0 0 10px; font-size:1.6rem }
    .price{ font-size:2rem; font-weight:900; color:#0c6d0c; margin:4px 0 14px }
    .price small{ font-weight:700; color:#254b24 }
    .price-card ul{ line-height:1.6; padding-left:18px; color:var(--muted) }

    /* ===== FOOTER ===== */
    footer{ 
      background:linear-gradient(180deg, #eaffea 0, #e5ffe6 60%, #dffff0 100%); 
      border-top:1px solid #e3f6e3; 
      padding:15px 0px 30px 0; 
      color:#254b24;}
    .foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
    .links{ display:flex; gap:12px; flex-wrap:wrap; flex-direction: column; }
    .links a{ text-decoration:none; font-weight:700; color:#236d1e }
    .links a:hover{ text-decoration:underline }

    /* Footer: acercar logo a las redes (izquierda) */
    .foot{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;   /* antes: space-between */
    gap:20px;                     /* separación chica entre columnas */
    flex-wrap:wrap;
    }

    footer .socials{
    display:flex;
    flex-direction:column;       /* vertical */
    gap:14px;
    align-items:center;
    order:-1;                    /* primero en el flex (izquierda) */
    margin-right:16px;           /* pequeño respiro del logo */
    }

    footer .socials a{
    font-size:1.6rem;
    line-height:1;
    opacity:.85;
    transition:opacity .15s ease, transform .15s ease;
    }
    footer .socials a:hover{
    opacity:1;
    transform:translateY(-2px);
    color: #2ca01c;
    }
    /* Empujar el bloque de contacto al extremo derecho */
    footer .links{
    margin-left:100px;           
    }

    /* -----------------------
         BUSCADOR CABYS
    ----------------------- */
    .page-cabys{ background:linear-gradient(180deg,#f0fbf2 0,#e7f7ea 50%,#fff 100%); padding:48px 16px }
    .page-cabys .search-card{
      width:100%; max-width:1200px; margin:0 auto; background:#fff; border:none;
      border-radius:24px; box-shadow:var(--shadow); padding:42px 24px; text-align:center;
      display:grid; grid-template-rows:auto auto auto 1fr; min-height:420px;
    }
    .page-cabys .logo{ width:210px; margin:0 auto 18px }
    .page-cabys .search-input{
      width:100%; max-width:580px; height:52px; border-radius:999px; padding:0 18px; background:#fff;
      color:#333; border:1px solid #ccc; outline:none; transition:border-color .15s, box-shadow .15s;
    }
    .page-cabys .search-input:focus{ border-color:#2bd49e; box-shadow:0 0 0 4px rgba(43,212,158,.15) }
    .page-cabys .info-text{ color:#777; font-weight:600; margin-top:12px }
    .page-cabys .results-panel{ margin-top:12px;  overflow-y:auto; overflow-x:hidden; border:none; border-radius:12px; background:#fff; } /*min-height:240px; max-height:56vh;*/
    .page-cabys .modern-table{ table-layout:fixed; width:100%; border-collapse:collapse }
    .page-cabys .modern-table thead th{ background:#f2f2f2; color:#333; font-weight:600; text-align:left; padding:12px; position:sticky; top:0; z-index:1; border-bottom:1px solid #ddd }
    .page-cabys .modern-table tbody td{ padding:12px; border-bottom:1px solid #eee }
    .page-cabys .modern-table tbody tr:hover{ background:#fafafa }
    .page-cabys .modern-table th:nth-child(1), .page-cabys .modern-table td:nth-child(1){ width:220px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
    .page-cabys .modern-table th:nth-child(3), .page-cabys .modern-table td:nth-child(3){ width:160px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
    .page-cabys .modern-table th:nth-child(4), .page-cabys .modern-table td:nth-child(4){ width:170px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
    .page-cabys .modern-table td:nth-child(2){ white-space:normal; word-break:break-word; overflow:hidden }
    .page-cabys .modern-table tbody tr:nth-child(n+11){ display:none }
    @media (max-width:760px){
      .page-cabys{ padding:32px 12px }
      .page-cabys .search-card{ padding:30px 16px; min-height:400px }
      .page-cabys .logo{ width:180px }
      .page-cabys .search-input{ height:50px }
      .page-cabys .results-panel{ max-height:50vh }
    }

/* -----------------------
   Carrusel de Paquetes
----------------------- */

/* Desktop: flechas cómodas y espacio lateral para que no tapen contenido */
#carouselPaquetesDesktop{ --ctrlW: 2.8rem; --ctrlGap: .75rem; }
#carouselPaquetesDesktop.carousel-dark{ --bs-carousel-control-color:#000; }
#carouselPaquetesDesktop .carousel-inner{
  padding-left: calc(var(--ctrlW) + var(--ctrlGap));
  padding-right: calc(var(--ctrlW) + var(--ctrlGap));
  box-sizing: border-box;
}

#carouselPaquetesDesktop .carousel-control-prev,
#carouselPaquetesDesktop .carousel-control-next{
  top:50%; 
  bottom:auto; 
  transform:translateY(-50%); 
  width:var(--ctrlW); 
  opacity:.95; 
  z-index:10;
  transition: opacity .20s ease;
}
#carouselPaquetesDesktop .carousel-control-prev-icon,
#carouselPaquetesDesktop .carousel-control-next-icon{ width:2.2rem; height:2.2rem; }

/* Mobile: sin padding lateral y flechas compactas */
#carouselPaquetesMobile.carousel-dark{ --bs-carousel-control-color:#000; }
#carouselPaquetesMobile .carousel-inner{ padding-left:0; padding-right:0; }
#carouselPaquetesMobile .paquete {
  height: 330px;
}
#carouselPaquetesMobile .carousel-control-prev,
#carouselPaquetesMobile .carousel-control-next{ width:2rem; opacity:.95; }
#carouselPaquetesMobile .carousel-control-prev-icon,
#carouselPaquetesMobile .carousel-control-next-icon{ width:1.6rem; height:1.6rem; }

/* Grid de desktop/tablet: 2 columnas por slide */
.pricing .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

/* -----------------------
        Reseñas 
----------------------- */

  /* .reviewer-avatar {
    margin-bottom: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    } */

.reviewer-avatar{
  width:48px;height:48px;border-radius:50%;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#e9ecef; flex:0 0 48px;
}
.reviewer-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.reviewer-avatar span{ font-weight:700; color:#fff; }


  .reviewer-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink);
    }

  .reviewer-info h4:hover {
    margin: 0;
    font-size: 1.1rem;
    color: var(--qb);
    }

  .review-date {
    color: var(--muted);
    font-size: 0.9rem;
  }

  .review-text {
    font-family: "Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 16px;
    }

  .review-text .review-toggle{
    background:none;
    border:none;
    color:var(--qb-dark);
    font-weight:700;
    cursor:pointer;
    padding:0;
    text-decoration:underline;
  }
  .review-text .review-toggle:focus{ outline:2px solid var(--ring); border-radius:6px; }

  .stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    color: var(--gold);
    font-size: 1.2rem;
    }

  .google-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--muted);
    }
        
  .coment .intro{ 
    grid-column:span 12; 
    text-align:center; 
    margin-bottom:8px 
  }

  .reviews-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    }

  .reviews-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 20px;
    }

    .coment{ padding:50px 0 65px 0px;}
    .coment .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px }
    .coment-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:25px;}
    .coment-card h3{ margin:0 0 6px; font-size:1.6rem }
    .price{ font-size:2rem; font-weight:900; color:#0c6d0c; margin:4px 0 14px }
    .price small{ font-weight:700; color:#254b24 }
    .coment-card ul{ line-height:1.6; padding-left:18px; color:var(--muted) }

/* Desktop: flechas cómodas y espacio lateral para que no tapen contenido */
#carouseltestimonios{ --ctrlW: 2.8rem; --ctrlGap: .75rem; }
#carouseltestimonios.carousel-dark{ --bs-carousel-control-color:#000; }
#carouseltestimonios .carousel-inner{
  padding-left: calc(var(--ctrlW) + var(--ctrlGap));
  padding-right: calc(var(--ctrlW) + var(--ctrlGap));
  box-sizing: border-box;
}
#carouseltestimonios .carousel-control-prev,
#carouseltestimonios .carousel-control-next{
  top:50%; 
  bottom:auto; 
  transform:translateY(-50%); 
  width:var(--ctrlW); 
  opacity:.95; 
  z-index:10;
  transition: opacity .20s ease;
}
#carouseltestimonios .carousel-control-prev-icon,
#carouseltestimonios .carousel-control-next-icon{ width:2.2rem; height:2.2rem; }

/* Mobile: sin padding lateral y flechas compactas */
#carouseltestimoniosMobile.carousel-dark{ --bs-carousel-control-color:#000; }
#carouseltestimoniosMobile .carousel-inner{ padding-left:0; padding-right:0; }
#carouseltestimoniosMobile .coment{
  height: 410px;
  align-content: center;
}
#carouseltestimoniosMobile .carousel-control-prev,
#carouseltestimoniosMobile .carousel-control-next{ width:2rem; opacity:.95; }
#carouseltestimoniosMobile .carousel-control-prev-icon,
#carouseltestimoniosMobile .carousel-control-next-icon{ width:1.6rem; height:1.6rem; }

/* -----------------------
      Herramientas 
----------------------- */

.tools {
  padding: 60px 0 50px;
  background: url("/static/images/fondo_pagina.png") no-repeat center/cover;
}

.tools .intro{ text-align:center; margin-bottom: 26px; }
.tools-title{ margin:0 0 6px; color:#fff; font-weight:900; }
.tools-subtitle{ margin:0 auto; max-width:820px; color:#eaffea; }

.tools-grid-round{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
  justify-items: center;
}

.tools-grid-round a:hover {
    color: #ffffff;
}

/* Enlace contenedor (sin card blanca) */
.tool{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#fff;
  position:relative;
}
.tool[aria-disabled="true"]{ pointer-events:none; opacity:.9; }

/* Botón circular con imagen */
.tool-circle{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  display:grid;
  place-items:center;
  box-shadow: var(--shadow), 0 10px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* Borde dorado con máscara (no afecta la imagen) */
.tool-circle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:3px;
  background: linear-gradient(180deg, #efb918 0, #ffc300 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.tool:hover .tool-circle{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

/* Imagen dentro del botón */
.tool-img{
  width:80%;
  height:80%;
  object-fit: cover;
  border-radius: 50%;
  display:block;
}
/* Imagen dentro del botón */
.tools-img{
  font-size: 50px;
  object-fit: cover;
  border-radius: 50%;
  display:block;
}

/* Fallback con ícono si no hay imagen */
.tool-circle.no-img{
  background: linear-gradient(180deg, #efb918 0, #ffc300 100%);
}
.tool-circle.no-img i{
  font-size: 42px;
  color: var(--qb-white);
}

/* Texto bajo el botón */
.tool-title{
  font-weight: 800;
  letter-spacing:.2px;
  color:#fff;
  text-align:center;
}

/* Badge "Pronto" */
.tool-badge{
  position:absolute;
  top:-6px; right:-2px;
  transform: translateY(-100%);
  font-size:.72rem;
  font-weight:800;
  color:#0c6d0c;
  background:#ecffee;
  border:1px solid #dcf5df;
  border-radius:999px;
  padding:.2rem .5rem;
}

/* Hace que crezca en monitores, pero se adapte en pantallas medianas y chicas */
.laptop, img.laptop {
  width: clamp(640px, 58vw, 1100px);
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

/* Tipografía fluida: títulos más pequeños en móvil */
h1, .h1 { font-size: clamp(1.7rem, 5.2vw, 2.5rem); line-height: 1.15; }
h2, .h2 { font-size: clamp(1.35rem, 4.6vw, 2rem);  line-height: 1.2; }
h3, .h3 { font-size: clamp(1.15rem, 4.2vw, 1.5rem); line-height: 1.25; }
h4, .h4 { font-size: clamp(1rem, 3.8vw, 1.25rem);  line-height: 1.3; }

/* ===== Header / Navbar ===== */
.site-nav .row{
  /* padding: 10px 0; */
  gap: 12px;
}

/* Logo más pequeño */
.brand img{
  width: 135px;
  height: auto;
}

/* ===== Hero / imágenes de mockups ===== */
.laptop{
  width: min(600px, 100%);
  margin-inline: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.18));
}

.screen{ border-radius: 22px; }

/* ===== Footer ===== */
footer .links a{
  font-size: .95rem;
}

/* ===== Utilidades ===== */
.responsive-img{ max-width: 100%; height: auto; display: block; }

  /* Botón hamburguesa */
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px; height:44px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow: var(--shadow);
  }
  .mobile-menu-btn i{ font-size:1.4rem; color:#253d23; }

  
  html { scroll-behavior: smooth; }
  #features, #precios, #contacto { scroll-margin-top: 76px; }


  .offcanvas-header{ border-bottom:1px solid var(--border); }
  .offcanvas .list-group-item{
    border:1px solid var(--border);
    border-bottom: 1px solid var(--border) !important;
    border-radius:12px;
    margin-bottom:8px;
    font-weight:700;
  }
  .offcanvas .list-group-item:hover{
    background:#ecffee;
  }
  #toolsCollapse .list-group-item{ font-weight:600; }

  /* Sidebar móvil */
.offcanvas{
  --bs-offcanvas-width: min(86vw, 360px);
  background:#fff;
  border-right:1px solid var(--border);
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
  width: 300px;
}

/* ------------------------
  MODAL DE TIPO DE CAMBIO
--------------------------- */

.modal-content {
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #fafffe 100%);
  }

.modal-header {
  background: linear-gradient(135deg, var(--qb) 0%, var(--qb-dark) 100%);
  color: white;
  padding: 24px 28px;
  border-bottom: none;
  position: relative;
}

.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity: 0.3; 
}

.modal-title {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.2px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.modal-title i {
  font-size: 1.6rem;
  opacity: 0.9;
}

.modal-title span {
  background: rgba(255,255,255,0.15);
  padding: 4px 6px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.modal-body {
  padding: 32px 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fafffe 100%);
}

.exchange-rate-container {
  display: grid;
  gap: 20px;
}

.rate-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.rate-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--qb) 0%, var(--gold) 100%);
}

        .rate-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(44,160,28,0.1);
            border-color: var(--qb);
        }

        .rate-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .rate-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: white;
            font-weight: 800;
        }

        .rate-icon.sell {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        }

        .rate-icon.buy {
            background: linear-gradient(135deg, var(--qb) 0%, var(--qb-dark) 100%);
        }

        .rate-label {
            font-weight: 800;
            color: var(--ink);
            font-size: 1.1rem;
            margin: 0;
        }

        .rate-sublabel {
            color: var(--muted);
            font-size: 0.85rem;
            margin: 0;
            font-weight: 500;
        }

        .rate-value {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--qb-dark);
            letter-spacing: -0.5px;
        }

        .rate-currency {
            font-size: 1rem;
            color: var(--muted);
            margin-left: 6px;
        }

        .exchange-info {
            background: linear-gradient(135deg, #ecfff0 0%, #e7f4e6 100%);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-top: 24px;
            position: relative;
        }

        .exchange-info::before {
            content: '';
            position: absolute;
            top: 12px;
            right: 12px;
            width: 8px;
            height: 8px;
            background: var(--qb);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

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

        .info-icon {
            color: var(--qb);
            font-size: 1.1rem;
        }

        .info-title {
            font-weight: 700;
            color: var(--qb-dark);
            margin: 0;
            font-size: 0.95rem;
        }

        .info-text {
            color: var(--muted);
            font-size: 0.85rem;
            line-height: 1.5;
            margin: 0;
        }

        .source-info {
            text-align: center;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }

        .source-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(44,160,28,0.1);
            color: var(--qb-dark);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }