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

:root{ --qb:#2ca01c; --qb-dark:#0c6d0c; --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;}


    *{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 */
    }

    /* ===== UTIL ===== */
    .container{max-width:1200px; 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; 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,#baf5b6 0,transparent 70%),
      radial-gradient(900px 500px at -10% 40%,#dfffe0 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 } 

/* ===== DEVICE: Laptop mockup ===== */
.laptop{
  width:min(640px,94%);
  justify-self:center;
  position:relative;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.25));
}

    .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) }

    /* ===== FEATURES/PRICING ===== */
    .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 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 }
    .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:34px 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;             /* esto manda este bloque a la derecha */
    }

    /* Móvil: redes al final y en fila (opcional) */
    @media (max-width:760px){
    footer .socials{
        order:2;
        flex-direction:row;
        margin-right:0;
    }
    }

    /* ===== Media ===== */
    @media (max-width:760px){ .nav-links{ display:none } }
    @media (prefers-reduced-motion:reduce){ .btn,.card{ transition:none } }

    /* ====== BUSCADOR: estilos SCOPEADOS (no afectan el home) ====== */
    .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 }
    }



    /* ---- Flechas centradas y negras ---- */
#carouselPaquetes.carousel-dark{
  --bs-carousel-control-color: #000;   /* negro */
}

/* Tamaño del área clickeable de cada control */
#carouselPaquetes{
  --ctrlW: 2.8rem;   /* ancho de la zona del control */
  --ctrlGap: .75rem; /* separación entre control y contenido */
}

/* Reservar espacio lateral para que el contenido no quede debajo de la flecha */
#carouselPaquetes .carousel-inner{
  padding-left: calc(var(--ctrlW) + var(--ctrlGap));
  padding-right: calc(var(--ctrlW) + var(--ctrlGap));
  box-sizing: border-box;
}


/* Centrar verticalmente y fijar ancho del control */
#carouselPaquetes .carousel-control-prev,
#carouselPaquetes .carousel-control-next{
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: var(--ctrlW);
  opacity: .95;
  z-index: 10;
}

/* Tamaño del ícono de flecha */
#carouselPaquetes .carousel-control-prev-icon,
#carouselPaquetes .carousel-control-next-icon{
  width: 2.2rem;
  height: 2.2rem;
  background-size: 100% 100%;
}

/* Ajuste en pantallas pequeñas: controles un poco más chicos */
@media (max-width: 576px){
  #carouselPaquetes{ --ctrlW: 2.2rem; }
}
/* -----------------------
   Carrusel de 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-info h4 {
            margin: 0;
            font-size: 1.1rem;
            color: var(--ink);
        }

        .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;
        }
        .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 {
    padding: 40px 0 80px;
}

 .coment .intro{ 
  grid-column:span 12; 
  text-align:center; 
  margin-bottom:8px 
}

 /* Widget 2: Carrusel de Reseñas */
  .reviews-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    }

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

    .coment{ padding:40px 0 80px }
    .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) }
    /* ---- Flechas centradas y negras ---- */
#carouseltestimonios.carousel-dark{
  --bs-carousel-control-color: #000;   /* negro */
}

/* Tamaño del área clickeable de cada control */
#carouseltestimonios{
  --ctrlW: 2.8rem;   /* ancho de la zona del control */
  --ctrlGap: .75rem; /* separación entre control y contenido */
}

/* Reservar espacio lateral para que el contenido no quede debajo de la flecha */
#carouseltestimonios .carousel-item{
  padding-left: calc(var(--ctrlW) + var(--ctrlGap));
  padding-right: calc(var(--ctrlW) + var(--ctrlGap));
  box-sizing: border-box;
}
/* Centrar verticalmente y fijar ancho del control */
#carouseltestimonios .carousel-control-prev,
#carouseltestimonios .carousel-control-next{
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: var(--ctrlW);
  opacity: .95;
  z-index: 10;
}

/* Tamaño del ícono de flecha */
#carouseltestimonios .carousel-control-prev-icon,
#carouseltestimonios .carousel-control-next-icon{
  width: 2.2rem;
  height: 2.2rem;
  background-size: 100% 100%;

}

/* Ajuste en pantallas pequeñas: controles un poco más chicos */
@media (max-width: 576px){
  #carouseltestimonios { --ctrlW: 2.2rem; }
}