/* =====================================================================
   CASOS DE ÉXITO (web.html e index.html)
   Usa la paleta de style.css: azul #014da1, amarillo #ffcc00, violetas.
   ===================================================================== */

/* ---------- Pestañas por perfil ---------- */
.caso-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.6rem; }
.caso-tabs .nav-link {
    border: 1.5px solid #dfe4ec;
    border-radius: 999px;
    color: var(--texto-oscuro, #1e2022);
    font-weight: 700;
    padding: .55rem 1.15rem;
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff;
    transition: all .25s ease;
}
.caso-tabs .nav-link:hover { border-color: var(--azul-bearsoft, #014da1); color: var(--azul-bearsoft, #014da1); }
.caso-tabs .nav-link.active {
    background: var(--azul-bearsoft, #014da1);
    border-color: var(--azul-bearsoft, #014da1);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(1, 77, 161, .9);
}

/* ---------- Marco de navegador para las capturas ---------- */
.navegador {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(17, 0, 34, .45), 0 0 0 1px rgba(17, 0, 34, .06);
}
.navegador .barra {
    display: flex; align-items: center; gap: .45rem;
    padding: .6rem .9rem;
    background: #f1f3f7;
    border-bottom: 1px solid #e4e7ee;
}
.navegador .barra span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.navegador .barra span:nth-child(2) { background: #febc2e; }
.navegador .barra span:nth-child(3) { background: #28c840; }
.navegador .barra .url {
    flex: 1; margin-left: .6rem;
    background: #fff; border-radius: 8px;
    font-size: .78rem; color: #6c757d;
    padding: .25rem .75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navegador .carousel-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; }
.navegador .carousel-indicators { margin-bottom: .6rem; }
.navegador .carousel-indicators [data-bs-target] { width: 26px; height: 4px; border-radius: 4px; background: var(--azul-bearsoft, #014da1); }
.navegador .carousel-control-prev, .navegador .carousel-control-next { width: 9%; }
.navegador .carousel-control-prev-icon, .navegador .carousel-control-next-icon {
    background-color: rgba(17, 0, 34, .55); border-radius: 50%; background-size: 55%; width: 2.4rem; height: 2.4rem;
}
.captura-pie { text-align: center; color: #6c757d; font-size: .9rem; margin-top: .9rem; }
@media (min-width: 992px) { .captura-pie { text-align: left; padding-right: 120px; } }
.captura-pie i { color: var(--azul-bearsoft, #014da1); }

/* Móvil y libreta flotando junto al navegador */
.composicion { position: relative; padding-right: 60px; }
.composicion .telefono {
    position: absolute; right: -6px; bottom: 60px;
    width: 150px; border-radius: 26px; overflow: hidden;
    border: 6px solid #110022;
    box-shadow: 0 24px 40px -18px rgba(17, 0, 34, .7);
    background: #110022;
}
.composicion .telefono img { width: 100%; display: block; }

/* ---------- Ficha del proyecto ---------- */
.ficha-caso {
    background: linear-gradient(135deg, #110022 0%, #260543 60%, #3b0a6b 100%);
    color: #fff;
    border-radius: 22px;
    padding: 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.ficha-caso::after {
    content: ''; position: absolute; right: -60px; top: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    border: 30px solid rgba(255, 204, 0, .18);
}
.ficha-caso .cliente { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo-bearsoft, #ffcc00); font-weight: 800; }
.ficha-caso h3 { font-weight: 800; margin: .4rem 0 1rem; }
.ficha-caso ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .7rem; }
.ficha-caso li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255, 255, 255, .88); font-size: .95rem; }
.ficha-caso li i { color: var(--amarillo-bearsoft, #ffcc00); margin-top: .1rem; }
.ficha-caso .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
.ficha-caso .datos div { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: .7rem .6rem; text-align: center; }
.ficha-caso .datos strong { display: block; font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.1; }
.ficha-caso .datos small { color: rgba(255, 255, 255, .7); font-size: .72rem; }

/* ---------- Módulos ---------- */
.modulo {
    height: 100%;
    background: #fff;
    border: 1px solid #e9ecf2;
    border-radius: 18px;
    padding: 1.5rem 1.4rem;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.modulo:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -26px rgba(1, 77, 161, .5); border-color: rgba(1, 77, 161, .25); }
.modulo .icono {
    width: 50px; height: 50px; border-radius: 14px;
    display: grid; place-items: center;
    background: rgba(1, 77, 161, .1); color: var(--azul-bearsoft, #014da1);
    font-size: 1.4rem; margin-bottom: 1rem;
}
.modulo.amarillo .icono { background: rgba(255, 204, 0, .2); color: #9a7a00; }
.modulo.violeta .icono { background: rgba(111, 33, 209, .1); color: var(--violeta-brillante, #6f21d1); }
.modulo h5 { font-weight: 800; font-size: 1.05rem; margin-bottom: .45rem; }
.modulo p { color: #6c757d; font-size: .9rem; margin: 0; }

/* ---------- Proceso ---------- */
.proceso { counter-reset: paso; }
.paso { position: relative; padding: 1.4rem 1.2rem 1.2rem; border-radius: 18px; background: #f8f9fc; height: 100%; }
.paso::before {
    counter-increment: paso; content: counter(paso);
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--amarillo-bearsoft, #ffcc00); color: #110022; font-weight: 900;
    margin-bottom: .8rem;
}
.paso h6 { font-weight: 800; margin-bottom: .35rem; }
.paso p { color: #6c757d; font-size: .88rem; margin: 0; }

/* ---------- Llamada a la acción ---------- */
.cta-caso {
    margin-top: 3rem;
    border-radius: 24px;
    padding: 2.2rem 2.4rem;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 204, 0, .25), transparent 40%),
        linear-gradient(120deg, var(--azul-bearsoft, #014da1) 0%, #003775 100%);
    color: #fff;
}
.cta-caso h3 { font-weight: 800; margin: 0 0 .3rem; }
.cta-caso p { color: rgba(255, 255, 255, .85); margin: 0; }
.btn-amarillo {
    background: var(--amarillo-bearsoft, #ffcc00); color: #110022 !important; font-weight: 800;
    border-radius: 999px; padding: .85rem 1.6rem; border: 0;
    box-shadow: 0 12px 24px -12px rgba(255, 204, 0, .9);
    transition: transform .25s ease;
}
.btn-amarillo:hover { transform: translateY(-2px); background: #ffd633; }
/* Bootstrap pone el fondo transparente al pulsar/enfocar: lo mantenemos amarillo para que el texto se lea */
.btn-amarillo:active, .btn-amarillo:focus, .btn-amarillo:focus-visible, .btn-amarillo.active, .btn.btn-amarillo:first-child:active {
    background: #e6b800 !important; color: #110022 !important; border-color: transparent !important;
    box-shadow: 0 0 0 4px rgba(255, 204, 0, .35) !important;
}
.btn-borde-blanco:active, .btn-borde-blanco:focus, .btn-borde-blanco:focus-visible, .btn.btn-borde-blanco:first-child:active {
    background: #fff !important; color: var(--azul-bearsoft, #014da1) !important; border-color: #fff !important;
}
.btn-borde-blanco { border: 2px solid rgba(255, 255, 255, .8); color: #fff !important; font-weight: 700; border-radius: 999px; padding: .75rem 1.4rem; }
.btn-borde-blanco:hover { background: #fff; color: var(--azul-bearsoft, #014da1) !important; }

/* ---------- Portada: tarjetas de proyectos ---------- */
.proyectos-home { background: #f7f5fb; }
.proyecto-card {
    display: block; height: 100%;
    background: #fff; border-radius: 20px; overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: 0 16px 34px -26px rgba(17, 0, 34, .5);
    transition: transform .35s ease, box-shadow .35s ease;
}
.proyecto-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -28px rgba(17, 0, 34, .55); color: inherit; }
.proyecto-card .foto { aspect-ratio: 16 / 10; overflow: hidden; background: #eef0f5; }
.proyecto-card .foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s ease; }
.proyecto-card:hover .foto img { transform: scale(1.05); }
.proyecto-card .cuerpo { padding: 1.3rem 1.4rem 1.5rem; }
.proyecto-card .etq { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--violeta-brillante, #6f21d1); margin-bottom: .4rem; }
.proyecto-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .4rem; color: var(--texto-oscuro, #1e2022); }
.proyecto-card p { color: #6c757d; font-size: .92rem; margin-bottom: .9rem; }
.proyecto-card .ver { color: var(--azul-bearsoft, #014da1); font-weight: 800; font-size: .92rem; }
.proyecto-card.destacado { outline: 3px solid var(--amarillo-bearsoft, #ffcc00); }

@media (max-width: 991px) {
    .composicion { padding-right: 0; }
    .composicion .telefono { display: none; }
    .ficha-caso .datos { grid-template-columns: repeat(3, 1fr); }
    .cta-caso { padding: 1.8rem 1.4rem; }
}

/* =====================================================================
   MERCADOS: Perú (colegios) y España (clínicas estéticas)
   ===================================================================== */
.mercados { background: #fff; }
.mercado-card {
    position: relative; height: 100%;
    border-radius: 24px; overflow: hidden;
    padding: 2.2rem 2rem 2rem;
    color: #fff;
    box-shadow: 0 30px 60px -34px rgba(17, 0, 34, .6);
}
.mercado-card.peru { background: radial-gradient(circle at 100% 0%, rgba(255, 204, 0, .22), transparent 45%), linear-gradient(135deg, #014da1 0%, #002a5a 100%); }
.mercado-card.espana { background: radial-gradient(circle at 100% 0%, rgba(255, 204, 0, .22), transparent 45%), linear-gradient(135deg, #3b0a6b 0%, #110022 100%); }
.mercado-card .pais { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo-bearsoft, #ffcc00); }
.mercado-card .pais .fi { width: 1.6em; line-height: 1.2em; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.mercado-card h3 { font-weight: 800; font-size: 1.8rem; margin: .6rem 0 .4rem; color: #fff; }
.mercado-card .lema { color: rgba(255, 255, 255, .82); margin-bottom: 1.3rem; }
.mercado-card ul { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .75rem; }
.mercado-card li { display: flex; gap: .75rem; align-items: flex-start; }
.mercado-card li i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .12); color: var(--amarillo-bearsoft, #ffcc00); }
.mercado-card li strong { display: block; color: #fff; }
.mercado-card li span { color: rgba(255, 255, 255, .75); font-size: .9rem; }
.mercado-card .acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.etiqueta-dev {
    display: inline-block; margin-left: .35rem;
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: var(--amarillo-bearsoft, #ffcc00); color: #110022;
    padding: .12rem .45rem; border-radius: 999px; vertical-align: middle;
}
.colegios-campaign { background: linear-gradient(160deg, #002a5a 0%, #014da1 60%, #0a3a7a 100%) !important; }

/* =====================================================================
   SERVICIOS (servicios.html)
   ===================================================================== */
.sv-confianza { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin-top: 1.8rem; color: rgba(255, 255, 255, .85); font-size: .92rem; font-weight: 600; }
.sv-confianza i { color: var(--amarillo-bearsoft, #ffcc00); margin-right: .35rem; }
.sv-sector { display: block; height: 100%; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; background: linear-gradient(135deg, #014da1 0%, #002a5a 100%); box-shadow: 0 30px 60px -34px rgba(17, 0, 34, .6); transition: transform .35s ease; }
.sv-sector.espana { background: linear-gradient(135deg, #3b0a6b 0%, #110022 100%); }
.sv-sector:hover { transform: translateY(-8px); color: #fff; }
.sv-sector .foto { aspect-ratio: 16 / 8; overflow: hidden; }
.sv-sector .foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s ease; }
.sv-sector:hover .foto img { transform: scale(1.05); }
.sv-sector .cuerpo { padding: 1.6rem 1.8rem 1.8rem; }
.sv-sector .pais { display: inline-flex; gap: .5rem; align-items: center; font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo-bearsoft, #ffcc00); }
.sv-sector h3 { font-weight: 800; font-size: 1.8rem; margin: .4rem 0; }
.sv-sector p { color: rgba(255, 255, 255, .8); }
.sv-sector .ver { font-weight: 800; color: var(--amarillo-bearsoft, #ffcc00); }

.sv-bloque { background: linear-gradient(160deg, var(--violeta-oscuro-base, #110022) 0%, var(--violeta-medio, #260543) 55%, #180a33 100%); color: #fff; position: relative; overflow: hidden; }
.sv-bloque.peru { background: linear-gradient(160deg, #002a5a 0%, #014da1 60%, #0a3a7a 100%); }
.sv-bloque .container { position: relative; z-index: 1; }
.sv-titulo { font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; color: #fff; }
.sv-dolores { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .7rem; }
.sv-dolores li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(255, 255, 255, .85); }
.sv-dolores i { color: #ff8a8a; font-size: 1.1rem; margin-top: .1rem; }
.sv-solucion { background: rgba(255, 255, 255, .08); border-left: 4px solid var(--amarillo-bearsoft, #ffcc00); padding: .9rem 1.1rem; border-radius: 10px; margin: 0; }
.sv-solucion strong { color: var(--amarillo-bearsoft, #ffcc00); }
.sv-fotos { position: relative; padding: 0 0 50px 0; }
.sv-fotos .principal { width: 90%; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); display: block; }
.sv-fotos .secundaria { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 6px solid rgba(255, 255, 255, .95); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); }
.sv-fotos .secundaria.libreta { width: 34%; aspect-ratio: auto; object-fit: contain; background: #fff; }
.sv-precio {
    margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; padding: 1.4rem 1.6rem;
}
.sv-precio .etq { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo-bearsoft, #ffcc00); }
.sv-precio strong { display: block; font-size: 1.35rem; font-weight: 800; }
.sv-precio span:not(.etq) { color: rgba(255, 255, 255, .78); font-size: .92rem; }
.sv-foto-redonda { width: 100%; border-radius: 24px; aspect-ratio: 5 / 4; object-fit: cover; box-shadow: 0 30px 60px -34px rgba(17, 0, 34, .6); }
.sv-pasos { display: grid; gap: 1rem; }
.sv-pasos > div { display: flex; gap: 1rem; align-items: flex-start; }
.sv-pasos > div > span { flex: 0 0 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--amarillo-bearsoft, #ffcc00); font-weight: 900; color: #110022; }
.sv-pasos h5 { font-weight: 800; margin-bottom: .2rem; }
.sv-pasos p { color: #6c757d; margin: 0; }
.sv-mini { height: 100%; background: #fff; border-radius: 16px; padding: 1.1rem; box-shadow: 0 10px 26px -20px rgba(17, 0, 34, .5); }
.sv-mini i { font-size: 1.4rem; color: var(--azul-bearsoft, #014da1); }
.sv-mini h6 { font-weight: 800; margin: .5rem 0 .3rem; }
.sv-mini p { color: #6c757d; font-size: .86rem; margin: 0; }
.sv-avatar { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.sv-check { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.sv-check li { padding-left: 1.6rem; position: relative; color: #495057; }
.sv-check li::before { content: '\F26A'; font-family: 'bootstrap-icons'; position: absolute; left: 0; color: var(--amarillo-bearsoft, #e6b800); }
.sv-faq .accordion-item { border: 1px solid #e9ecf2; border-radius: 14px !important; overflow: hidden; margin-bottom: .7rem; }
.sv-faq .accordion-button { font-weight: 700; }
.sv-faq .accordion-button:not(.collapsed) { background: var(--violeta-clarito, #f3ebff); color: var(--azul-bearsoft, #014da1); box-shadow: none; }
@media (max-width: 991px) { .sv-fotos .secundaria { width: 42%; } }

/* ===== INDEX: PORTADA, CONFIANZA Y SOLUCIONES COMPACTAS ===== */
.hero-violet.hero-inicio { padding-top: 110px !important; padding-bottom: 70px !important; }
.hero-inicio .avatar-container { margin-bottom: 4px; }
.hero-inicio .main-title { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1; margin: 1rem 0 .4rem; }
.hero-inicio .hero-p { margin: 14px auto 26px; }
.confianza-home { background: #fff; padding: 3rem 0 2.5rem; border-top: 1px solid #eef0f5; }
.confianza-home .cifras strong { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; color: var(--azul-bearsoft, #014da1); line-height: 1.1; }
.confianza-home .cifras span { display: block; color: #6c757d; font-size: .88rem; max-width: 220px; margin: .3rem auto 0; }
.confianza-home .clientes { margin-top: 2.4rem; text-align: center; }
.confianza-home .clientes .titulo { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9aa0ad; margin-bottom: 1rem; }
.confianza-home .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3.5rem; }
.confianza-home .logos img { height: 74px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.confianza-home .logos img:hover { filter: none; opacity: 1; }
.confianza-home .wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 700; color: #7a6a58; line-height: 1; text-align: left; }
.confianza-home .wordmark small { display: block; font-family: inherit; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; font-weight: 400; margin-top: .3rem; }
.features-compacto .feature-card { height: 100%; padding: 1.4rem 1.3rem; }
.features-compacto .feature-card h3 { font-size: 1.08rem; }
.features-compacto .feature-card p { font-size: .88rem; }
@media (max-width: 576px) { .confianza-home .logos img { height: 58px; } }

/* ===== PÁGINA LEGAL ===== */
.legal-pagina { padding: 130px 0 70px; background: #fff; }
.legal-pagina h2 { font-size: 1.45rem; font-weight: 800; margin: 2.6rem 0 1rem; scroll-margin-top: 100px; }
.legal-pagina p, .legal-pagina li { color: #495057; line-height: 1.7; }
.legal-indice { display: flex; flex-wrap: wrap; gap: .5rem; }
.legal-indice a { padding: .4rem 1rem; border-radius: 999px; background: #f3ebff; color: #014da1; font-weight: 700; text-decoration: none; font-size: .9rem; }

/* Contadores: ancho fijo de cifra para que el texto no baile */
.confianza-home .contador { font-variant-numeric: tabular-nums; }

/* Contadores: el número hereda el tamaño y el color de la cifra (no el estilo del texto gris) */
.confianza-home .cifras strong .contador { display: inline; font-size: inherit; color: inherit; max-width: none; margin: 0; font-weight: inherit; }