/******************************************************************
 *        0.   1px–319px (MICROMÓVIL O SMARTWATCH)               *
 ******************************************************************/
@media (min-width: 1px) and (max-width: 319px) {

    /* ----- BODY ----- */
    body {
        background: #f6f8fa;
        font-family: 'Poppins', Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }

    /* ----- TOPBAR ----- */
    .topbar {
        width: 100vw;
        padding: 0 2vw;
        display: flex;
        align-items: center;
        height: 40px;
        box-shadow: 0 1px 6px #0001;
        z-index: 20;
        position: fixed;
        box-sizing: border-box;
        min-width: 0;
        background: #3b8daa;
    }
    .logo { font-size: 1rem; font-weight: 900; color: #222; letter-spacing: 0.5px; }
    .logo span { color: #3b8daa; }
    .logo img { height: 18px; vertical-align: middle; }
    .menu { display: none; }
    .menu a { display: none; }
    .topbar-acciones {
        margin-left: auto;
        display: flex;
        gap: 4px;
    }
    .topbar-acciones a { color: #3b8daa; font-size: 1.0rem; text-decoration: none; }

    /* ----- CABECERA ----- */
    .header-bg {
        position: relative;
        background: #000 url('/recursos/imagenes/AstronautaConMariposa1920x400.png') no-repeat 16% bottom;
        background-size: auto 24vh;
        min-height: 100px;
        padding-top: 12vw;
        height: 30vh;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100vw;
        box-sizing: border-box;
    }
    .header-stars {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        width: 100%;
    }
    .header-content {
        position: relative;
        z-index: 3;
        margin-top: 25vw;
        max-width: 70vw;
        width: 100%;
        padding: 10px 5px 8px 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-sizing: border-box;
    }
    .header-title {
        text-align: end;
        font-size: 1.33rem;
        width: 60vw;
        font-weight: 700;
        color: #fff;
        margin-bottom: 6px;
        line-height: 1.1;
        text-shadow: 0 1px 5px #000a;
    }
    .header-title .azul { color: #3b8daa; }
    .header-sub {
        text-align: end;
        font-size: 0.65rem;
        width: 60vw;
        color: #c4f2ff;
        font-weight: 400;
        margin-bottom: 7px;
        text-shadow: 0 1px 5px #0006;
    }
    .astro-mobile-img {
        display: none;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 0;
        z-index: 1;
        background: #000;
    }

    /* ----- LUNA ----- */
    .luna {
        background: #f6f8fa;
        padding: 12px 0 7px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .luna-img { width: 60vw; max-width: 100vw; opacity: 0.88; }
    .luna-titulo { color: #3b8daa; font-size: 0.62rem; font-weight: 700; margin-top: 2px; letter-spacing: 0.7px; }
    .luna-main { font-size: 0.7rem; font-weight: 700; margin: 5px 0 8px 0; color: #111; }
    .luna-desc { color: #333; font-size: 0.7rem; max-width: 90vw; margin: 0 auto 8px; }

    /* ----- SERVICIOS ----- */
    .servicios {
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 10px 0 20px;
        width: 100vw;
        box-sizing: border-box;
    }
    .card-serv {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 4px #0001;
        padding: 10px 2px 10px 2px;
        width: 98vw;
        max-width: 98vw;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .card-serv-pro {
        padding: 12px 2px 10px 2px;
        box-shadow: 0 2px 8px #0001, 0 1.5px 4px #3b8daa11;
        border: 1px solid #e6f2f8;
        max-width: 98vw;
        margin: 8px auto 12px auto;
        transition: box-shadow .2s;
        position: relative;
        overflow: visible;
    }
    .card-serv-header { text-align: center; margin:auto; margin-bottom:6px;}
    .card-serv-icon {
        width: 20px; height: 20px; margin-bottom: 4px; display: inline-block; filter: drop-shadow(0 1px 3px #3b8daa44);
    }
    .card-serv-microcopy {
        display: block; font-size: .55rem; color: #5f8fa1; margin-top: 1px; font-weight: 400; letter-spacing: .08px;
    }
    .card-serv-list { list-style: none; padding: 0; margin: 0 0 5px 0;}
    .card-serv-list li { padding: 0 0 4px 0; display: flex; align-items: center; font-size: 0.6rem; color: #19222b;}
    .card-serv-list i { color: #3b8daa; margin-right: 5px; font-size: 0.6rem;}
    .card-serv-precio {
        font-size: 0.7rem; text-align: center; font-weight: 700; color: #276389; margin: 4px 0 4px 0; margin:auto;
    }
    .sin-permanencia { font-size: .51rem; color: #3b8daa; font-weight: 400; margin-left: 2px;}
    .btn-whatsapp, .btn-compra {
        display: block; width: 100%; max-width: 90vw; margin: 4px auto 0 auto; padding: 6px 2px;
        border-radius: 6px; font-size: 0.7rem; font-weight: 700; border: none; text-align: center; text-decoration: none; transition: background .17s, color .14s;
    }
    .btn-whatsapp { background: #25D366; color: #fff; margin-top: 3px; }
    .btn-whatsapp i { margin-right: 4px; font-size: 0.7rem;}
    .btn-whatsapp:hover { background: #128c7e; color: #fff;}
    .btn-compra { background: #3b8daa; color: #fff; margin-top: 3px;}
    .btn-compra i { margin-right: 3px; }
    .btn-compra:hover { background: #276389; color: #fff;}
    .card-serv-garantia {
        margin: 6px 0 0 0; text-align: center; color: #278825; font-size: .5rem; font-weight: 500; margin:auto; margin-top:5px;
    }
    .card-serv-garantia i { margin-right: 3px; color: #278825; }
    .card-serv-testimonio {
        margin-top: 8px; font-size: .51rem; color: #1a2b34; text-align: center; background: #f6f8fa; padding: 4px 2px; border-radius: 5px; font-style: italic;
        border-left: 2px solid #3b8daa22;
        border-right: 2px solid #3b8daa22;
    }
    .card-serv-testimonio i { color: #3b8daa; margin-right: 3px; }

    /* ----- SATURNO ----- */
    .saturno {
        background: #eef2f7;
        margin-top: 18px;
        padding: 10px 0 4px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .saturno-img { width: 26vw; max-width: 80vw; margin-bottom: 5px; opacity: 0.88; }
    .saturno-titulo { color: #3b8daa; font-weight: 700; font-size: .51rem; margin-bottom: 3px; letter-spacing: 0.5px; }
    .saturno-main { font-size: 0.6rem; font-weight: 700; margin-bottom: 4px; color: #111;}
    .saturno-desc { color: #222; max-width: 95vw; margin: 0 auto 4px; font-size: 0.6rem; }

    /* ----- TESTIMONIOS ----- */
    .testimonios {
        background: #eef2f7;
        padding: 8px 0 3px 0;
        width: 100vw;
        box-sizing: border-box;
    }
    .testimonios-titulo { font-size: 0.6rem; font-weight: 700; color: #1d1e22; text-align: center; margin-bottom: 8px;}
    .testimonios-slider { display: flex; overflow-x: auto; gap: 6px; justify-content: flex-start; padding-bottom: 2px; scrollbar-width: thin;}
    .testimonio { background: #fff; box-shadow: 0 1px 4px #0002; border-radius: 8px; padding: 4px 2px 2px 2px; min-width: 70px; max-width: 110px;}
    .testimonio-nombre { font-weight: 700; color: #3b8daa; font-size: 0.51rem; }
    .testimonio-txt { color: #222; font-size: 0.52rem; margin: 2px 0 1px 0;}
    .testimonio-stars { color: #FDB833; }

    /* ----- FOOTER ----- */
    footer {
        background: #181A22;
        color: #eee;
        font-size: 0.53rem;
        padding: 7px 0 4px 0;
        text-align: center;
        margin-top: 0;
        width: 100vw;
        box-sizing: border-box;
    }
    footer a { color: #3b8daa; text-decoration: none; }

    .clientes-ejemplos {
    margin: 26px auto 10px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cliente-card {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 8px #0001;
    width: 225px;
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow .16s;
}
.cliente-card:hover {
    box-shadow: 0 6px 20px #3b8daa33;
}

.cliente-logo {
    height: 150px;
    margin-bottom: 8px;
    object-fit: contain;
    max-width: 90%;
}

.cliente-nombre {
    font-weight: 700;
    color: #276389;
    font-size: 1.08rem;
    margin-bottom: 2px;
}
.cliente-desc {
    font-size: .97rem;
    margin: 6px 0 5px 0;
    color: #333;
}
.cliente-resultado {
    color: #278825;
    font-size: .95rem;
    margin-top: 2px;
}

.reviews-carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 14px 10px;
}
.review {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 8px #0001;
  padding: 14px 17px;
  min-width: 230px;
  max-width: 330px;
  flex: 0 0 auto;
}

.etiquetas-proyectos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  justify-content: center;
}

.etiqueta-proyecto {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 9px;
  border-radius: 23px;
  font-size: 0.99rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #0002;
  text-decoration: none;
  transition: box-shadow .14s, transform .13s, background .18s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 0;
  min-height: 40px;
  user-select: none;
}
.etiqueta-proyecto img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  flex-shrink: 0;
}
.etiqueta-proyecto span {
  display: block;
  white-space: nowrap;
}

/* Colores personalizados por proyecto */
.etiqueta-estela {
  background: linear-gradient(90deg, #141e30 55%, #3b8daa 100%);
  color: #fff;
}
.etiqueta-estela:hover, .etiqueta-estela:focus {
  background: linear-gradient(90deg, #223c54 60%, #5cc2e3 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #3b8daa33;
}

.etiqueta-entrepa {
  background: linear-gradient(90deg, #fffbe7 70%, #eab308 100%);
  color: #a05f0b;
}
.etiqueta-entrepa:hover, .etiqueta-entrepa:focus {
  background: linear-gradient(90deg, #fff7b1 80%, #f7be31 100%);
  color: #855700;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #eab30855;
}


}

/* ---------- FIN 1px–319px ---------- */


/******************************************************************
 *            1.   320px–549px (MÓVIL PEQUEÑO)                   *
 ******************************************************************/
@media (min-width: 320px) and (max-width: 549px) {

    /* ----- BODY ----- */
    body {
        background: #f6f8fa;
        font-family: 'Poppins', Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }

    /* ----- TOPBAR ----- */
    .topbar {
        width: 100vw;
        padding: 0 5vw;
        display: flex;
        align-items: center;
        height: 60px;
        box-shadow: 0 2px 12px #0001;
        z-index: 20;
        position: fixed;
        box-sizing: border-box;
        min-width: 0;
        background: #3b8daa;
    }
    .logo { font-size: 1.4rem; font-weight: 900; color: #222; letter-spacing: 1px; }
    .logo span { color: #3b8daa; }
    .logo img { height: 30px; vertical-align: middle; }
    .menu { margin-left: 18px; display: none; gap: 18px; }
    .menu a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        font-size: 1.1rem;
        padding: 6px 12px;
        border-radius: 6px;
        transition: background .18s;
    }
    .menu a.activo, .menu a:hover { background: #fff; color: #3b8daa; }
    .topbar-acciones {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }
    .topbar-acciones a { color: #3b8daa; font-size: 1.3rem; text-decoration: none; }

    /* ----- CABECERA ----- */
    .header-bg {
        position: relative;
        background: #000 url('/recursos/imagenes/AstronautaConMariposa1920x400.png') no-repeat 24% bottom;
        background-size: auto 102vw;
        min-height: 350px;
        padding-top: 15vh;
        height: 48vh;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100vw;
        box-sizing: border-box;
    }
    .header-stars {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        width: 100%;
    }
    .header-content {
        position: relative;
        z-index: 3;
        margin-top: 5vh;
        max-width: 50vw;
        width: 100%;
        padding: 30px 16px 16px 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-sizing: border-box;
    }
    .header-title {
        text-align: end;
        font-size: 1.3rem;
        width: 40vw;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        line-height: 1.1;
        text-shadow: 0 2px 12px #000a;
    }
    .header-title .azul { color: #3b8daa; }
    .header-sub {
        text-align: end;
        font-size: 1.0rem;
        width: 40vw;
        color: #c4f2ff;
        font-weight: 400;
        margin-bottom: 15px;
        text-shadow: 0 1px 10px #0006;
    }
    .astro-mobile-img {
        display: none;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 0;
        z-index: 1;
        background: #000;
    }

    /* ----- LUNA ----- */
    .luna {
        background: #f6f8fa;
        padding: 36px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .luna-img { width: 90vw; max-width: 100vw; opacity: 0.88; }
    .luna-titulo { color: #3b8daa; font-size: 1.09rem; font-weight: 700; margin-top: 6px; letter-spacing: 0.7px; }
    .luna-main { font-size: 1.25rem; font-weight: 700; margin: 12px 0 14px 0; color: #111; }
    .luna-desc { color: #333; font-size: 1rem; max-width: 90vw; margin: 0 auto 24px; }

    /* ----- SERVICIOS ----- */
    .servicios {
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 18px 0 44px;
        width: 100vw;
        box-sizing: border-box;
    }
    .card-serv {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 8px #0001;
        padding: 28px 10px 18px 10px;
        width: 98vw;
        max-width: 98vw;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .card-serv-pro {
        padding: 28px 12px 18px 12px;
        box-shadow: 0 4px 18px #0001, 0 1.5px 8px #3b8daa11;
        border: 1.7px solid #e6f2f8;
        max-width: 98vw;
        margin: 22px auto 30px auto;
        transition: box-shadow .2s;
        position: relative;
        overflow: visible;
    }
    .card-serv-header { text-align: center; margin:auto; margin-bottom:10px;}
    .card-serv-icon {
        width: 44px; height: 44px; margin-bottom: 8px; display: inline-block; filter: drop-shadow(0 2px 7px #3b8daa44);
    }
    .card-serv-microcopy {
        display: block; font-size: .99rem; color: #5f8fa1; margin-top: 2px; font-weight: 400; letter-spacing: .12px;
    }
    .card-serv-list { list-style: none; padding: 0; margin: 0 0 16px 0;}
    .card-serv-list li { padding: 0 0 8px 0; display: flex; align-items: center; font-size: 1rem; color: #19222b;}
    .card-serv-list i { color: #3b8daa; margin-right: 9px; font-size: 1rem;}
    .card-serv-precio {
        font-size: 1.13rem; text-align: center; font-weight: 700; color: #276389; margin: 11px 0 7px 0; margin:auto;
    }
    .sin-permanencia { font-size: .89rem; color: #3b8daa; font-weight: 400; margin-left: 5px;}
    .btn-whatsapp, .btn-compra {
        display: block; width: 100%; max-width: 90vw; margin: 8px auto 0 auto; padding: 11px 10px;
        border-radius: 9px; font-size: 1.08rem; font-weight: 700; border: none; text-align: center; text-decoration: none; transition: background .17s, color .14s;
    }
    .btn-whatsapp { background: #25D366; color: #fff; margin-top: 6px; }
    .btn-whatsapp i { margin-right: 7px; font-size: 1rem;}
    .btn-whatsapp:hover { background: #128c7e; color: #fff;}
    .btn-compra { background: #3b8daa; color: #fff; margin-top: 8px;}
    .btn-compra i { margin-right: 7px; }
    .btn-compra:hover { background: #276389; color: #fff;}
    .card-serv-garantia {
        margin: 13px 0 0 0; text-align: center; color: #278825; font-size: .97rem; font-weight: 500; margin:auto; margin-top:10px;
    }
    .card-serv-garantia i { margin-right: 5px; color: #278825; }
    .card-serv-testimonio {
        margin-top: 18px; font-size: .93rem; color: #1a2b34; text-align: center; background: #f6f8fa; padding: 11px 10px; border-radius: 9px; font-style: italic;
        border-left: 3px solid #3b8daa22;
        border-right: 3px solid #3b8daa22;
    }
    .card-serv-testimonio i { color: #3b8daa; margin-right: 7px; }

    /* ----- SATURNO ----- */
    .saturno {
        background: #eef2f7;
        margin-top: 45px;
        padding: 35px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .saturno-img { width: 70vw; max-width: 90vw; margin-bottom: 14px; opacity: 0.88; }
    .saturno-titulo { color: #3b8daa; font-weight: 700; font-size: .98rem; margin-bottom: 7px; letter-spacing: 0.5px; }
    .saturno-main { font-size: 1.09rem; font-weight: 700; margin-bottom: 10px; color: #111;}
    .saturno-desc { color: #222; max-width: 95vw; margin: 0 auto 10px; font-size: 0.95rem; }

    /* ----- TESTIMONIOS ----- */
    .testimonios {
        background: #eef2f7;
        padding: 30px 0 9px 0;
        width: 100vw;
        box-sizing: border-box;
    }
    .testimonios-titulo { font-size: 1rem; font-weight: 700; color: #1d1e22; text-align: center; margin-bottom: 18px;}
    .testimonios-slider { display: flex; overflow-x: auto; gap: 14px; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: thin;}
    .testimonio { background: #fff; box-shadow: 0 2px 8px #0002; border-radius: 14px; padding: 13px 8px 8px 8px; min-width: 180px; max-width: 230px;}
    .testimonio-nombre { font-weight: 700; color: #3b8daa; font-size: 1rem; }
    .testimonio-txt { color: #222; font-size: 0.93rem; margin: 6px 0 3px 0;}
    .testimonio-stars { color: #FDB833; }

    /* ----- FOOTER ----- */
    footer {
        background: #181A22;
        color: #eee;
        font-size: 0.98rem;
        padding: 18px 0 11px 0;
        text-align: center;
        margin-top: 0;
        width: 100vw;
        box-sizing: border-box;
    }
    footer a { color: #3b8daa; text-decoration: none; }


    .clientes-ejemplos {
    margin: 26px auto 10px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cliente-card {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 8px #0001;
    width: 225px;
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow .16s;
}
.cliente-card:hover {
    box-shadow: 0 6px 20px #3b8daa33;
}

.cliente-logo {
    height: 150px;
    margin-bottom: 8px;
    object-fit: contain;
    max-width: 90%;
}

.cliente-nombre {
    font-weight: 700;
    color: #276389;
    font-size: 1.08rem;
    margin-bottom: 2px;
}
.cliente-desc {
    font-size: .97rem;
    margin: 6px 0 5px 0;
    color: #333;
}
.cliente-resultado {
    color: #278825;
    font-size: .95rem;
    margin-top: 2px;
}
.reviews-carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 14px 10px;
}
.review {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 8px #0001;
  padding: 14px 17px;
  min-width: 230px;
  max-width: 330px;
  flex: 0 0 auto;
}
.etiquetas-proyectos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  justify-content: center;
}

.etiqueta-proyecto {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 9px;
  border-radius: 23px;
  font-size: 0.99rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #0002;
  text-decoration: none;
  transition: box-shadow .14s, transform .13s, background .18s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 0;
  min-height: 40px;
  user-select: none;
}
.etiqueta-proyecto img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  flex-shrink: 0;
}
.etiqueta-proyecto span {
  display: block;
  white-space: nowrap;
}

/* Colores personalizados por proyecto */
.etiqueta-estela {
  background: linear-gradient(90deg, #141e30 55%, #3b8daa 100%);
  color: #fff;
}
.etiqueta-estela:hover, .etiqueta-estela:focus {
  background: linear-gradient(90deg, #223c54 60%, #5cc2e3 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #3b8daa33;
}

.etiqueta-entrepa {
  background: linear-gradient(90deg, #fffbe7 70%, #eab308 100%);
  color: #a05f0b;
}
.etiqueta-entrepa:hover, .etiqueta-entrepa:focus {
  background: linear-gradient(90deg, #fff7b1 80%, #f7be31 100%);
  color: #855700;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #eab30855;
}


/* ---------- FIN 320px–549px ---------- */
}

/******************************************************************
 *            2.   550px–720px (TABLET PEQUEÑA)                  *
 ******************************************************************/
@media (min-width: 550px) and (max-width: 720px) {

    body {
        background: #f6f8fa;
        font-family: 'Poppins', Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }
    .topbar {
        width: 100vw;
        padding: 0 8vw;
        display: flex;
        align-items: center;
        height: 60px;
        box-shadow: 0 2px 12px #0001;
        z-index: 20;
        position: fixed;
        box-sizing: border-box;
        min-width: 0;
        background: #3b8daa;
    }
    .logo { font-size: 1.4rem; font-weight: 900; color: #222; letter-spacing: 1px; }
    .logo span { color: #3b8daa; }
    .logo img { height: 30px; vertical-align: middle; }
    .menu { margin-left: 18px; display: flex; gap: 18px; }
    .menu a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        font-size: 1.1rem;
        padding: 6px 12px;
        border-radius: 6px;
        transition: background .18s;
    }
    .menu a.activo, .menu a:hover { background: #fff; color: #3b8daa; }
    .topbar-acciones {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }
    .topbar-acciones a { color: #3b8daa; font-size: 1.3rem; text-decoration: none; }

    .header-bg {
        position: relative;
        background: #000 url('/recursos/imagenes/AstronautaConMariposa1920x400.png') no-repeat 24% bottom;
        background-size: auto 340px;
        min-height: 350px;
        padding-top: 60px;
        height: 52vh;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100vw;
        box-sizing: border-box;
    }
    .header-stars {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        width: 100%;
    }
    .header-content {
        position: relative;
        z-index: 3;
        margin-top: 10vh;
        max-width: 50vw;
        width: 100%;
        padding: 36px 28px 24px 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-sizing: border-box;
    }
    .header-title {
        text-align: end;
        font-size: 2.0rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        line-height: 1.1;
        text-shadow: 0 2px 12px #000a;
    }
    .header-title .azul { color: #3b8daa; }
    .header-sub {
        text-align: end;
        font-size: 1.2rem;
        color: #c4f2ff;
        font-weight: 400;
        margin-bottom: 15px;
        text-shadow: 0 1px 10px #0006;
    }
    .astro-mobile-img {
        display: none;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 0;
        z-index: 1;
        background: #000;
    }

    /* ---- LUNA ---- */
    .luna {
        background: #f6f8fa;
        padding: 36px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .luna-img { width: 340px; max-width: 100vw; opacity: 0.88; }
    .luna-titulo { color: #3b8daa; font-size: 1.09rem; font-weight: 700; margin-top: 6px; letter-spacing: 0.7px; }
    .luna-main { font-size: 1.8rem; font-weight: 700; margin: 12px 0 14px 0; color: #111; }
    .luna-desc { color: #333; font-size: 1.02rem; max-width: 600px; margin: 0 auto 24px; }

    /* ---- SERVICIOS ---- */
    .servicios {
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 18px 0 44px;
        width: 100vw;
        box-sizing: border-box;
    }
    .card-serv {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 8px #0001;
        padding: 28px 18px 18px 18px;
        width: 98vw;
        max-width: 400px;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .card-serv-pro {
        padding: 36px 20px 28px 20px;
        box-shadow: 0 4px 18px #0001, 0 1.5px 8px #3b8daa11;
        border: 1.7px solid #e6f2f8;
        max-width: 400px;
        margin: 22px auto 30px auto;
        transition: box-shadow .2s;
        position: relative;
        overflow: visible;
    }
    .card-serv-header { text-align: center; margin:auto; margin-bottom:10px;}
    .card-serv-icon {
        width: 58px; height: 58px; margin-bottom: 8px; display: inline-block; filter: drop-shadow(0 2px 7px #3b8daa44);
    }
    .card-serv-microcopy {
        display: block; font-size: .99rem; color: #5f8fa1; margin-top: 2px; font-weight: 400; letter-spacing: .12px;
    }
    .card-serv-list { list-style: none; padding: 0; margin: 0 0 16px 0;}
    .card-serv-list li { padding: 0 0 8px 0; display: flex; align-items: center; font-size: 1.07rem; color: #19222b;}
    .card-serv-list i { color: #3b8daa; margin-right: 9px; font-size: 1.1rem;}
    .card-serv-precio {
        font-size: 1.2rem; text-align: center; font-weight: 700; color: #276389; margin: 11px 0 7px 0; margin:auto;
    }
    .sin-permanencia { font-size: .93rem; color: #3b8daa; font-weight: 400; margin-left: 5px;}
    .btn-whatsapp, .btn-compra {
        display: block; width: 100%; max-width: 290px; margin: 8px auto 0 auto; padding: 11px 10px;
        border-radius: 9px; font-size: 1.08rem; font-weight: 700; border: none; text-align: center; text-decoration: none; transition: background .17s, color .14s;
    }
    .btn-whatsapp { background: #25D366; color: #fff; margin-top: 6px; }
    .btn-whatsapp i { margin-right: 7px; font-size: 1.17rem;}
    .btn-whatsapp:hover { background: #128c7e; color: #fff;}
    .btn-compra { background: #3b8daa; color: #fff; margin-top: 8px;}
    .btn-compra i { margin-right: 7px; }
    .btn-compra:hover { background: #276389; color: #fff;}
    .card-serv-garantia {
        margin: 13px 0 0 0; text-align: center; color: #278825; font-size: .99rem; font-weight: 500; margin:auto; margin-top:10px;
    }
    .card-serv-garantia i { margin-right: 5px; color: #278825; }
    .card-serv-testimonio {
        margin-top: 18px; font-size: .97rem; color: #1a2b34; text-align: center; background: #f6f8fa; padding: 11px 17px; border-radius: 9px; font-style: italic;
        border-left: 3px solid #3b8daa22;
        border-right: 3px solid #3b8daa22;
    }
    .card-serv-testimonio i { color: #3b8daa; margin-right: 7px; }

    .saturno {
        background: #eef2f7;
        margin-top: 45px;
        padding: 35px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .saturno-img { width: 30vw; max-width: 90vw; margin-bottom: 14px; opacity: 0.88; }
    .saturno-titulo { color: #3b8daa; font-weight: 700; font-size: 1rem; margin-bottom: 7px; letter-spacing: 0.5px; }
    .saturno-main { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: #111;}
    .saturno-desc { color: #222; max-width: 95vw; margin: 0 auto 10px; font-size: 0.97rem; }

    .testimonios {
        background: #eef2f7;
        padding: 30px 0 9px 0;
        width: 100vw;
        box-sizing: border-box;
    }
    .testimonios-titulo { font-size: 1.08rem; font-weight: 700; color: #1d1e22; text-align: center; margin-bottom: 18px;}
    .testimonios-slider { display: flex; overflow-x: auto; gap: 14px; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: thin;}
    .testimonio { background: #fff; box-shadow: 0 2px 8px #0002; border-radius: 14px; padding: 13px 10px 8px 10px; min-width: 240px; max-width: 290px;}
    .testimonio-nombre { font-weight: 700; color: #3b8daa; font-size: 1rem; }
    .testimonio-txt { color: #222; font-size: 0.95rem; margin: 6px 0 3px 0;}
    .testimonio-stars { color: #FDB833; }

    footer {
        background: #181A22;
        color: #eee;
        font-size: 0.98rem;
        padding: 18px 0 11px 0;
        text-align: center;
        margin-top: 0;
        width: 100vw;
        box-sizing: border-box;
    }
    footer a { color: #3b8daa; text-decoration: none; }


    .clientes-ejemplos {
    margin: 26px auto 10px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cliente-card {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 8px #0001;
    width: 225px;
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow .16s;
}
.cliente-card:hover {
    box-shadow: 0 6px 20px #3b8daa33;
}

.cliente-logo {
    height: 150px;
    margin-bottom: 8px;
    object-fit: contain;
    max-width: 90%;
}

.cliente-nombre {
    font-weight: 700;
    color: #276389;
    font-size: 1.08rem;
    margin-bottom: 2px;
}
.cliente-desc {
    font-size: .97rem;
    margin: 6px 0 5px 0;
    color: #333;
}
.cliente-resultado {
    color: #278825;
    font-size: .95rem;
    margin-top: 2px;
}
.reviews-carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 14px 10px;
}
.review {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 8px #0001;
  padding: 14px 17px;
  min-width: 230px;
  max-width: 330px;
  flex: 0 0 auto;
}

.novedades-slider {
  margin: 40px 0 30px 0;
  padding: 0 0 0 0;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}
.novedades-slider h2 {
  font-size: 1.18rem;
  font-weight: 800;
  color: #19222b;
  margin: 0 18px 26px 42px;
  letter-spacing: -.4px;
  text-align: left;
}

.etiquetas-proyectos {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 10px;
  justify-content: flex-start;
}

.etiqueta-proyecto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 13px;
  border-radius: 23px;
  font-size: 1.14rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #0002;
  text-decoration: none;
  transition: box-shadow .14s, transform .13s, background .18s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 0;
  min-height: 40px;
  user-select: none;
}
.etiqueta-proyecto img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  flex-shrink: 0;
}
.etiqueta-proyecto span {
  display: block;
  white-space: nowrap;
}

/* Colores personalizados por proyecto */
.etiqueta-estela {
  background: linear-gradient(90deg, #141e30 55%, #3b8daa 100%);
  color: #fff;
}
.etiqueta-estela:hover, .etiqueta-estela:focus {
  background: linear-gradient(90deg, #223c54 60%, #5cc2e3 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #3b8daa33;
}

.etiqueta-entrepa {
  background: linear-gradient(90deg, #fffbe7 70%, #eab308 100%);
  color: #a05f0b;
}
.etiqueta-entrepa:hover, .etiqueta-entrepa:focus {
  background: linear-gradient(90deg, #fff7b1 80%, #f7be31 100%);
  color: #855700;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #eab30855;
}


}

/* ---------- FIN 550px–720px ---------- */

/******************************************************************
 *        3.   721px–1200px (PORTÁTIL / TABLET GRANDE)            *
 ******************************************************************/
@media (min-width: 721px) and (max-width: 1200px) {

    /* ----- BODY ----- */
    body {
        background: #f6f8fa;
        font-family: 'Poppins', Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }

    /* ----- TOPBAR ----- */
    .topbar {
        width: 100vw;
        padding: 0 7vw;
        display: flex;
        align-items: center;
        height: 60px;
        box-shadow: 0 2px 12px #0001;
        z-index: 20;
        position: fixed;
        box-sizing: border-box;
        min-width: 0;
        background: #3b8daa;
    }
    .logo { font-size: 1.4rem; font-weight: 900; color: #222; letter-spacing: 1px; }
    .logo span { color: #3b8daa; }
    .logo img { height: 30px; vertical-align: middle; }
    .menu { margin-left: 18px; display: flex; gap: 18px; }
    .menu a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        font-size: 1.1rem;
        padding: 6px 12px;
        border-radius: 6px;
        transition: background .18s;
    }
    .menu a.activo, .menu a:hover { background: #fff; color: #3b8daa; }
    .topbar-acciones {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }
    .topbar-acciones a { color: #3b8daa; font-size: 1.3rem; text-decoration: none; }

    /* ----- CABECERA ----- */
    .header-bg {
        position: relative;
        background: #000 url('/recursos/imagenes/AstronautaConMariposa1920x400.png') no-repeat 24% bottom;
        background-size: auto 340px;
        min-height: 350px;
        padding-top: 60px;
        height: 60vh;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100vw;
        box-sizing: border-box;
    }
    .header-stars {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        width: 100%;
    }
    .header-content {
        position: relative;
        z-index: 3;
        margin-top: 9vh;
        max-width: 50vw;
        width: 100%;
        padding: 45px 44px 34px 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-sizing: border-box;
    }
    .header-title {
        font-size: 3.0rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        line-height: 1.1;
        text-shadow: 0 2px 12px #000a;
    }
    .header-title .azul { color: #3b8daa; }
    .header-sub {
        font-size: 1.2rem;
        color: #c4f2ff;
        font-weight: 400;
        margin-bottom: 15px;
        text-shadow: 0 1px 10px #0006;
    }
    .astro-mobile-img {
        display: none;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 0;
        z-index: 1;
        background: #000;
    }

    /* ----- LUNA ----- */
    .luna {
        background: #f6f8fa;
        padding: 36px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .luna-img { width: 340px; max-width: 100vw; opacity: 0.88; }
    .luna-titulo { color: #3b8daa; font-size: 1.09rem; font-weight: 700; margin-top: 6px; letter-spacing: 0.7px; }
    .luna-main { font-size: 2rem; font-weight: 700; margin: 12px 0 14px 0; color: #111; }
    .luna-desc { color: #333; font-size: 1.04rem; max-width: 600px; margin: 0 auto 24px; }

    /* ----- SERVICIOS ----- */
    .servicios {
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 18px 0 44px;
        width: 100vw;
        box-sizing: border-box;
    }
    .card-serv {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 8px #0001;
        padding: 28px 20px 18px 20px;
        width: 98vw;
        max-width: 370px;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .card-serv-pro {
        padding: 36px 28px 28px 28px;
        box-shadow: 0 4px 18px #0001, 0 1.5px 8px #3b8daa11;
        border: 1.7px solid #e6f2f8;
        max-width: 400px;
        margin: 22px auto 30px auto;
        transition: box-shadow .2s;
        position: relative;
        overflow: visible;
    }
    .card-serv-header { text-align: center; margin:auto; margin-bottom:10px;}
    .card-serv-icon {
        width: 68px; height: 68px; margin-bottom: 8px; display: inline-block; filter: drop-shadow(0 2px 7px #3b8daa44);
    }
    .card-serv-microcopy {
        display: block; font-size: .99rem; color: #5f8fa1; margin-top: 2px; font-weight: 400; letter-spacing: .12px;
    }
    .card-serv-list { list-style: none; padding: 0; margin: 0 0 16px 0;}
    .card-serv-list li { padding: 0 0 8px 0; display: flex; align-items: center; font-size: 1.07rem; color: #19222b;}
    .card-serv-list i { color: #3b8daa; margin-right: 9px; font-size: 1.1rem;}
    .card-serv-precio {
        font-size: 1.33rem; text-align: center; font-weight: 700; color: #276389; margin: 11px 0 7px 0; margin:auto;
    }
    .sin-permanencia { font-size: .93rem; color: #3b8daa; font-weight: 400; margin-left: 5px;}
    .btn-whatsapp, .btn-compra {
        display: block; width: 100%; max-width: 290px; margin: 8px auto 0 auto; padding: 11px 10px;
        border-radius: 9px; font-size: 1.08rem; font-weight: 700; border: none; text-align: center; text-decoration: none; transition: background .17s, color .14s;
    }
    .btn-whatsapp { background: #25D366; color: #fff; margin-top: 6px; }
    .btn-whatsapp i { margin-right: 7px; font-size: 1.17rem;}
    .btn-whatsapp:hover { background: #128c7e; color: #fff;}
    .btn-compra { background: #3b8daa; color: #fff; margin-top: 8px;}
    .btn-compra i { margin-right: 7px; }
    .btn-compra:hover { background: #276389; color: #fff;}
    .card-serv-garantia {
        margin: 13px 0 0 0; text-align: center; color: #278825; font-size: .99rem; font-weight: 500; margin:auto; margin-top:10px;
    }
    .card-serv-garantia i { margin-right: 5px; color: #278825; }
    .card-serv-testimonio {
        margin-top: 18px; font-size: .97rem; color: #1a2b34; text-align: center; background: #f6f8fa; padding: 11px 17px; border-radius: 9px; font-style: italic;
        border-left: 3px solid #3b8daa22;
        border-right: 3px solid #3b8daa22;
    }
    .card-serv-testimonio i { color: #3b8daa; margin-right: 7px; }

    /* ----- SATURNO ----- */
    .saturno {
        background: #eef2f7;
        margin-top: 45px;
        padding: 35px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .saturno-img { width: 30vw; max-width: 90vw; margin-bottom: 14px; opacity: 0.88; }
    .saturno-titulo { color: #3b8daa; font-weight: 700; font-size: 1rem; margin-bottom: 7px; letter-spacing: 0.5px; }
    .saturno-main { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: #111;}
    .saturno-desc { color: #222; max-width: 95vw; margin: 0 auto 10px; font-size: 0.97rem; }

    /* ----- TESTIMONIOS ----- */
    .testimonios {
        background: #eef2f7;
        padding: 30px 0 9px 0;
        width: 100vw;
        box-sizing: border-box;
    }
    .testimonios-titulo { font-size: 1.08rem; font-weight: 700; color: #1d1e22; text-align: center; margin-bottom: 18px;}
    .testimonios-slider { display: flex; overflow-x: auto; gap: 14px; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: thin;}
    .testimonio { background: #fff; box-shadow: 0 2px 8px #0002; border-radius: 14px; padding: 13px 10px 8px 10px; min-width: 240px; max-width: 290px;}
    .testimonio-nombre { font-weight: 700; color: #3b8daa; font-size: 1rem; }
    .testimonio-txt { color: #222; font-size: 0.95rem; margin: 6px 0 3px 0;}
    .testimonio-stars { color: #FDB833; }

    /* ----- FOOTER ----- */
    footer {
        background: #181A22;
        color: #eee;
        font-size: 0.98rem;
        padding: 18px 0 11px 0;
        text-align: center;
        margin-top: 0;
        width: 100vw;
        box-sizing: border-box;
    }
    footer a { color: #3b8daa; text-decoration: none; }


    .clientes-ejemplos {
    margin: 26px auto 10px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cliente-card {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 8px #0001;
    width: 225px;
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow .16s;
}
.cliente-card:hover {
    box-shadow: 0 6px 20px #3b8daa33;
}

.cliente-logo {
    height: 150px;
    margin-bottom: 8px;
    object-fit: contain;
    max-width: 90%;
}

.cliente-nombre {
    font-weight: 700;
    color: #276389;
    font-size: 1.08rem;
    margin-bottom: 2px;
}
.cliente-desc {
    font-size: .97rem;
    margin: 6px 0 5px 0;
    color: #333;
}
.cliente-resultado {
    color: #278825;
    font-size: .95rem;
    margin-top: 2px;
}
.reviews-carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 14px 10px;
}
.review {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 8px #0001;
  padding: 14px 17px;
  min-width: 230px;
  max-width: 330px;
  flex: 0 0 auto;
}

.etiquetas-proyectos {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 10px;
  justify-content: flex-start;
}

.etiqueta-proyecto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 13px;
  border-radius: 23px;
  font-size: 1.14rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #0002;
  text-decoration: none;
  transition: box-shadow .14s, transform .13s, background .18s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 0;
  min-height: 40px;
  user-select: none;
}
.etiqueta-proyecto img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  flex-shrink: 0;
}
.etiqueta-proyecto span {
  display: block;
  white-space: nowrap;
}

/* Colores personalizados por proyecto */
.etiqueta-estela {
  background: linear-gradient(90deg, #141e30 55%, #3b8daa 100%);
  color: #fff;
}
.etiqueta-estela:hover, .etiqueta-estela:focus {
  background: linear-gradient(90deg, #223c54 60%, #5cc2e3 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #3b8daa33;
}

.etiqueta-entrepa {
  background: linear-gradient(90deg, #fffbe7 70%, #eab308 100%);
  color: #a05f0b;
}
.etiqueta-entrepa:hover, .etiqueta-entrepa:focus {
  background: linear-gradient(90deg, #fff7b1 80%, #f7be31 100%);
  color: #855700;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #eab30855;
}


}

/* ---------- FIN 721px–1200px ---------- */


/******************************************************************
 *                4. ≥ 1200px (ESCRITORIO XXL)                   *
 ******************************************************************/
@media (min-width: 1201px) and (max-width: 1499px) {

    /* ----- BODY ----- */
    body {
        background: #f6f8fa;
        font-family: 'Poppins', Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }

    /* ----- TOPBAR ----- */
    .topbar {
        width: 100vw;
        padding: 0 11vw;
        display: flex;
        align-items: center;
        height: 60px;
        box-shadow: 0 2px 12px #0001;
        z-index: 20;
        position: fixed;
        box-sizing: border-box;
        min-width: 0;
        background: #3b8daa;
    }
    .logo { font-size: 1.4rem; font-weight: 900; color: #222; letter-spacing: 1px; }
    .logo span { color: #3b8daa; }
    .logo img { height: 30px; vertical-align: middle; }
    .menu { margin-left: 18px; display: flex; gap: 18px; }
    .menu a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        font-size: 1.1rem;
        padding: 6px 12px;
        border-radius: 6px;
        transition: background .18s;
    }
    .menu a.activo, .menu a:hover { background: #fff; color: #3b8daa; }
    .topbar-acciones {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }
    .topbar-acciones a { color: #3b8daa; font-size: 1.3rem; text-decoration: none; }

    /* ----- CABECERA ----- */
    .header-bg {
        position: relative;
        background: #000 url('/recursos/imagenes/AstronautaConMariposa1920x400.png') no-repeat left bottom;
        background-size: auto 340px;
        min-height: 350px;
        padding-top: 30px;
        height: 50vh;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100vw;
        box-sizing: border-box;
    }
    .header-stars {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        width: 100%;
    }
    .header-content {
        position: relative;
        z-index: 3;
        max-width: 50vw;
        width: 100%;
        padding: 55px 64px 40px 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-sizing: border-box;
    }
    .header-title {
        font-size: 3.7rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        line-height: 1.1;
        text-shadow: 0 2px 12px #000a;
    }
    .header-title .azul { color: #3b8daa; }
    .header-sub {
        font-size: 1.2rem;
        color: #c4f2ff;
        font-weight: 400;
        margin-bottom: 15px;
        text-shadow: 0 1px 10px #0006;
    }
    .astro-mobile-img {
        display: none;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 0;
        z-index: 1;
        background: #000;
    }

    /* ----- LUNA ----- */
    .luna {
        background: #f6f8fa;
        padding: 36px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .luna-img { width: 340px; max-width: 100vw; opacity: 0.88; }
    .luna-titulo { color: #3b8daa; font-size: 1.09rem; font-weight: 700; margin-top: 6px; letter-spacing: 0.7px; }
    .luna-main { font-size: 2.5rem; font-weight: 700; margin: 12px 0 14px 0; color: #111; }
    .luna-desc { color: #333; font-size: 1.07rem; max-width: 800px; margin: 0 auto 24px; }

    /* ----- SERVICIOS ----- */
    .servicios {
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 18px 0 44px;
        width: 100vw;
        box-sizing: border-box;
    }
    .card-serv {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 8px #0001;
        padding: 28px 20px 18px 20px;
        width: 98vw;
        max-width: 370px;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .card-serv-pro {
        padding: 36px 28px 28px 28px;
        box-shadow: 0 4px 18px #0001, 0 1.5px 8px #3b8daa11;
        border: 1.7px solid #e6f2f8;
        max-width: 400px;
        margin: 22px auto 30px auto;
        transition: box-shadow .2s;
        position: relative;
        overflow: visible;
    }
    .card-serv-header { text-align: center; margin:auto; margin-bottom:10px;}
    .card-serv-icon {
        width: 88px; height: 88px; margin-bottom: 8px; display: inline-block; filter: drop-shadow(0 2px 7px #3b8daa44);
    }
    .card-serv-microcopy {
        display: block; font-size: 1.1rem; color: #5f8fa1; margin-top: 2px; font-weight: 400; letter-spacing: .12px;
    }
    .card-serv-list { list-style: none; padding: 0; margin: 0 0 16px 0;}
    .card-serv-list li { padding: 0 0 8px 0; display: flex; align-items: center; font-size: 1.1rem; color: #19222b;}
    .card-serv-list i { color: #3b8daa; margin-right: 9px; font-size: 1.2rem;}
    .card-serv-precio {
        font-size: 1.45rem; text-align: center; font-weight: 700; color: #276389; margin: 11px 0 7px 0; margin:auto;
    }
    .sin-permanencia { font-size: 1rem; color: #3b8daa; font-weight: 400; margin-left: 5px;}
    .btn-whatsapp, .btn-compra {
        display: block; width: 100%; max-width: 340px; margin: 8px auto 0 auto; padding: 15px 14px;
        border-radius: 9px; font-size: 1.18rem; font-weight: 700; border: none; text-align: center; text-decoration: none; transition: background .17s, color .14s;
    width: 90%;}
    .btn-whatsapp { background: #25D366; color: #fff; margin-top: 6px; }
    .btn-whatsapp i { margin-right: 7px; font-size: 1.27rem;}
    .btn-whatsapp:hover { background: #128c7e; color: #fff; }
    .btn-compra { background: #3b8daa; color: #fff; margin-top: 8px;}
    .btn-compra i { margin-right: 7px; }
    .btn-compra:hover { background: #276389; color: #fff;}
    .card-serv-garantia {
        margin: 13px 0 0 0; text-align: center; color: #278825; font-size: 1.09rem; font-weight: 500; margin:auto; margin-top:10px;
    }
    .card-serv-garantia i { margin-right: 5px; color: #278825; }
    .card-serv-testimonio {
        margin-top: 18px; font-size: 1.09rem; color: #1a2b34; text-align: center; background: #f6f8fa; padding: 16px 24px; border-radius: 11px; font-style: italic;
        border-left: 3px solid #3b8daa22;
        border-right: 3px solid #3b8daa22;
    }
    .card-serv-testimonio i { color: #3b8daa; margin-right: 7px; }

    /* ----- SATURNO ----- */
    .saturno {
        background: #eef2f7;
        margin-top: 45px;
        padding: 35px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .saturno-img { width: 30vw; max-width: 90vw; margin-bottom: 14px; opacity: 0.88; }
    .saturno-titulo { color: #3b8daa; font-weight: 700; font-size: 1.12rem; margin-bottom: 7px; letter-spacing: 0.5px; }
    .saturno-main { font-size: 1.29rem; font-weight: 700; margin-bottom: 10px; color: #111;}
    .saturno-desc { color: #222; max-width: 75vw; margin: 0 auto 10px; font-size: 1.03rem; }

    /* ----- TESTIMONIOS ----- */
    .testimonios {
        background: #eef2f7;
        padding: 30px 0 9px 0;
        width: 100vw;
        box-sizing: border-box;
    }
    .testimonios-titulo { font-size: 1.14rem; font-weight: 700; color: #1d1e22; text-align: center; margin-bottom: 18px;}
    .testimonios-slider { display: flex; overflow-x: auto; gap: 20px; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: thin;}
    .testimonio { background: #fff; box-shadow: 0 2px 8px #0002; border-radius: 14px; padding: 13px 14px 8px 14px; min-width: 280px; max-width: 340px;}
    .testimonio-nombre { font-weight: 700; color: #3b8daa; font-size: 1.08rem; }
    .testimonio-txt { color: #222; font-size: 1.04rem; margin: 6px 0 3px 0;}
    .testimonio-stars { color: #FDB833; }

    /* ----- FOOTER ----- */
    footer {
        background: #181A22;
        color: #eee;
        font-size: 1.09rem;
        padding: 24px 0 15px 0;
        text-align: center;
        margin-top: 0;
        width: 100vw;
        box-sizing: border-box;
    }
    footer a { color: #3b8daa; text-decoration: none; }

    .clientes-ejemplos {
    margin: 26px auto 10px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cliente-card {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 8px #0001;
    width: 225px;
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow .16s;
}
.cliente-card:hover {
    box-shadow: 0 6px 20px #3b8daa33;
}

.cliente-logo {
    height: 150px;
    margin-bottom: 8px;
    object-fit: contain;
    max-width: 90%;
}

.cliente-nombre {
    font-weight: 700;
    color: #276389;
    font-size: 1.08rem;
    margin-bottom: 2px;
}
.cliente-desc {
    font-size: .97rem;
    margin: 6px 0 5px 0;
    color: #333;
}
.cliente-resultado {
    color: #278825;
    font-size: .95rem;
    margin-top: 2px;
}
.reviews-carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 14px 10px;
}
.review {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 8px #0001;
  padding: 14px 17px;
  min-width: 230px;
  max-width: 330px;
  flex: 0 0 auto;
}

.etiquetas-proyectos {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 10px;
  justify-content: flex-start;
}

.etiqueta-proyecto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 13px;
  border-radius: 23px;
  font-size: 1.14rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #0002;
  text-decoration: none;
  transition: box-shadow .14s, transform .13s, background .18s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 0;
  min-height: 40px;
  user-select: none;
}
.etiqueta-proyecto img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  flex-shrink: 0;
}
.etiqueta-proyecto span {
  display: block;
  white-space: nowrap;
}

/* Colores personalizados por proyecto */
.etiqueta-estela {
  background: linear-gradient(90deg, #141e30 55%, #3b8daa 100%);
  color: #fff;
}
.etiqueta-estela:hover, .etiqueta-estela:focus {
  background: linear-gradient(90deg, #223c54 60%, #5cc2e3 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #3b8daa33;
}

.etiqueta-entrepa {
  background: linear-gradient(90deg, #fffbe7 70%, #eab308 100%);
  color: #a05f0b;
}
.etiqueta-entrepa:hover, .etiqueta-entrepa:focus {
  background: linear-gradient(90deg, #fff7b1 80%, #f7be31 100%);
  color: #855700;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #eab30855;
}


}
/* ---------- FIN ≥1700px ---------- */

/******************************************************************
 *                4. ≥ 1500px (ESCRITORIO XXL)                   *
 ******************************************************************/
@media (min-width: 1500px) {

    /* ----- BODY ----- */
    body {
        background: #f6f8fa;
        font-family: 'Poppins', Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }

    /* ----- TOPBAR ----- */
    .topbar {
        width: 100vw;
        padding: 0 11vw;
        display: flex;
        align-items: center;
        height: 60px;
        box-shadow: 0 2px 12px #0001;
        z-index: 20;
        position: fixed;
        box-sizing: border-box;
        min-width: 0;
        background: #3b8daa;
    }
    .logo { font-size: 1.4rem; font-weight: 900; color: #222; letter-spacing: 1px; }
    .logo span { color: #3b8daa; }
    .logo img { height: 30px; vertical-align: middle; }
    .menu { margin-left: 18px; display: flex; gap: 18px; }
    .menu a {
        text-decoration: none;
        color: #fff;
        font-weight: 500;
        font-size: 1.1rem;
        padding: 6px 12px;
        border-radius: 6px;
        transition: background .18s;
    }
    .menu a.activo, .menu a:hover { background: #fff; color: #3b8daa; }
    .topbar-acciones {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }
    .topbar-acciones a { color: #3b8daa; font-size: 1.3rem; text-decoration: none; }

    /* ----- CABECERA ----- */
    .header-bg {
        position: relative;
        background: #000 url('/recursos/imagenes/AstronautaConMariposa1920x400.png') no-repeat left bottom;
        background-size: auto 340px;
        min-height: 350px;
        padding-top: 30px;
        height: 50vh;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        width: 100vw;
        box-sizing: border-box;
    }
    .header-stars {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        width: 100%;
    }
    .header-content {
        position: relative;
        z-index: 3;
        max-width: 50vw;
        width: 100%;
        padding: 55px 64px 40px 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-sizing: border-box;
    }
    .header-title {
        font-size: 4.7rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        line-height: 1.1;
        text-shadow: 0 2px 12px #000a;
    }
    .header-title .azul { color: #3b8daa; }
    .header-sub {
        font-size: 1.5rem;
        color: #c4f2ff;
        font-weight: 400;
        margin-bottom: 15px;
        text-shadow: 0 1px 10px #0006;
    }
    .astro-mobile-img {
        display: none;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        margin: 0;
        border-radius: 0;
        z-index: 1;
        background: #000;
    }

    /* ----- LUNA ----- */
    .luna {
        background: #f6f8fa;
        padding: 36px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .luna-img { width: 340px; max-width: 100vw; opacity: 0.88; }
    .luna-titulo { color: #3b8daa; font-size: 1.09rem; font-weight: 700; margin-top: 6px; letter-spacing: 0.7px; }
    .luna-main { font-size: 2.5rem; font-weight: 700; margin: 12px 0 14px 0; color: #111; }
    .luna-desc { color: #333; font-size: 1.07rem; max-width: 800px; margin: 0 auto 24px; }

    /* ----- SERVICIOS ----- */
    .servicios {
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 18px 0 44px;
        width: 100vw;
        box-sizing: border-box;
    }
    .card-serv {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 2px 8px #0001;
        padding: 28px 20px 18px 20px;
        width: 98vw;
        max-width: 370px;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .card-serv-pro {
        padding: 36px 28px 28px 28px;
        box-shadow: 0 4px 18px #0001, 0 1.5px 8px #3b8daa11;
        border: 1.7px solid #e6f2f8;
        max-width: 400px;
        margin: 22px auto 30px auto;
        transition: box-shadow .2s;
        position: relative;
        overflow: visible;
    }
    .card-serv-header { text-align: center; margin:auto; margin-bottom:10px;}
    .card-serv-icon {
        width: 88px; height: 88px; margin-bottom: 8px; display: inline-block; filter: drop-shadow(0 2px 7px #3b8daa44);
    }
    .card-serv-microcopy {
        display: block; font-size: 1.1rem; color: #5f8fa1; margin-top: 2px; font-weight: 400; letter-spacing: .12px;
    }
    .card-serv-list { list-style: none; padding: 0; margin: 0 0 16px 0;}
    .card-serv-list li { padding: 0 0 8px 0; display: flex; align-items: center; font-size: 1.1rem; color: #19222b;}
    .card-serv-list i { color: #3b8daa; margin-right: 9px; font-size: 1.2rem;}
    .card-serv-precio {
        font-size: 1.45rem; text-align: center; font-weight: 700; color: #276389; margin: 11px 0 7px 0; margin:auto;
    }
    .sin-permanencia { font-size: 1rem; color: #3b8daa; font-weight: 400; margin-left: 5px;}
    .btn-whatsapp, .btn-compra {
        display: block; width: 100%; max-width: 340px; margin: 8px auto 0 auto; padding: 15px 14px;
        border-radius: 9px; font-size: 1.18rem; font-weight: 700; border: none; text-align: center; text-decoration: none; transition: background .17s, color .14s;
    width: 90%;
    }
    .btn-whatsapp { background: #25D366; color: #fff; margin-top: 6px; }
    .btn-whatsapp i { margin-right: 7px; font-size: 1.27rem;}
    .btn-whatsapp:hover { background: #128c7e; color: #fff;}
    .btn-compra { background: #3b8daa; color: #fff; margin-top: 8px;}
    .btn-compra i { margin-right: 7px; }
    .btn-compra:hover { background: #276389; color: #fff;}
    .card-serv-garantia {
        margin: 13px 0 0 0; text-align: center; color: #278825; font-size: 1.09rem; font-weight: 500; margin:auto; margin-top:10px;
    }
    .card-serv-garantia i { margin-right: 5px; color: #278825; }
    .card-serv-testimonio {
        margin-top: 18px; font-size: 1.09rem; color: #1a2b34; text-align: center; background: #f6f8fa; padding: 16px 24px; border-radius: 11px; font-style: italic;
        border-left: 3px solid #3b8daa22;
        border-right: 3px solid #3b8daa22;
    }
    .card-serv-testimonio i { color: #3b8daa; margin-right: 7px; }

    /* ----- SATURNO ----- */
    .saturno {
        background: #eef2f7;
        margin-top: 45px;
        padding: 35px 0 18px 0;
        text-align: center;
        width: 100vw;
        box-sizing: border-box;
    }
    .saturno-img { width: 30vw; max-width: 90vw; margin-bottom: 14px; opacity: 0.88; }
    .saturno-titulo { color: #3b8daa; font-weight: 700; font-size: 1.12rem; margin-bottom: 7px; letter-spacing: 0.5px; }
    .saturno-main { font-size: 1.29rem; font-weight: 700; margin-bottom: 10px; color: #111;}
    .saturno-desc { color: #222; max-width: 75vw; margin: 0 auto 10px; font-size: 1.03rem; }

    /* ----- TESTIMONIOS ----- */
    .testimonios {
        background: #eef2f7;
        padding: 30px 0 9px 0;
        width: 100vw;
        box-sizing: border-box;
    }
    .testimonios-titulo { font-size: 1.14rem; font-weight: 700; color: #1d1e22; text-align: center; margin-bottom: 18px;}
    .testimonios-slider { display: flex; overflow-x: auto; gap: 20px; justify-content: flex-start; padding-bottom: 8px; scrollbar-width: thin;}
    .testimonio { background: #fff; box-shadow: 0 2px 8px #0002; border-radius: 14px; padding: 13px 14px 8px 14px; min-width: 280px; max-width: 340px;}
    .testimonio-nombre { font-weight: 700; color: #3b8daa; font-size: 1.08rem; }
    .testimonio-txt { color: #222; font-size: 1.04rem; margin: 6px 0 3px 0;}
    .testimonio-stars { color: #FDB833; }

    /* ----- FOOTER ----- */
    footer {
        background: #181A22;
        color: #eee;
        font-size: 1.09rem;
        padding: 24px 0 15px 0;
        text-align: center;
        margin-top: 0;
        width: 100vw;
        box-sizing: border-box;
    }
    footer a { color: #3b8daa; text-decoration: none; }

    .clientes-ejemplos {
    margin: 26px auto 10px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.cliente-card {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 2px 8px #0001;
    width: 225px;
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow .16s;
}
.cliente-card:hover {
    box-shadow: 0 6px 20px #3b8daa33;
}

.cliente-logo {
    height: 150px;
    margin-bottom: 8px;
    object-fit: contain;
    max-width: 90%;
}

.cliente-nombre {
    font-weight: 700;
    color: #276389;
    font-size: 1.08rem;
    margin-bottom: 2px;
}
.cliente-desc {
    font-size: .97rem;
    margin: 6px 0 5px 0;
    color: #333;
}
.cliente-resultado {
    color: #278825;
    font-size: .95rem;
    margin-top: 2px;
}
.reviews-carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 14px 10px;
}
.review {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 8px #0001;
  padding: 14px 17px;
  min-width: 230px;
  max-width: 330px;
  flex: 0 0 auto;
}

.etiquetas-proyectos {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 10px;
  justify-content: flex-start;
}

.etiqueta-proyecto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 13px;
  border-radius: 23px;
  font-size: 1.14rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #0002;
  text-decoration: none;
  transition: box-shadow .14s, transform .13s, background .18s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 0;
  min-height: 40px;
  user-select: none;
}
.etiqueta-proyecto img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  flex-shrink: 0;
}
.etiqueta-proyecto span {
  display: block;
  white-space: nowrap;
}

/* Colores personalizados por proyecto */
.etiqueta-estela {
  background: linear-gradient(90deg, #141e30 55%, #3b8daa 100%);
  color: #fff;
}
.etiqueta-estela:hover, .etiqueta-estela:focus {
  background: linear-gradient(90deg, #223c54 60%, #5cc2e3 100%);
  color: #fff;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #3b8daa33;
}

.etiqueta-entrepa {
  background: linear-gradient(90deg, #fffbe7 70%, #eab308 100%);
  color: #a05f0b;
}
.etiqueta-entrepa:hover, .etiqueta-entrepa:focus {
  background: linear-gradient(90deg, #fff7b1 80%, #f7be31 100%);
  color: #855700;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 4px 18px #eab30855;
}


}


/* ---------- FIN ≥1500px ---------- */