.hero-banner { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 50%, color-mix(in srgb, var(--accent-color), transparent 98%) 25%, transparent 50%); background-color: white; -webkit-box-shadow: 0px 5px 13px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 5px 13px 3px rgba(0, 0, 0, 0.25); box-shadow: 0px 5px 13px 3px rgba(0, 0, 0, 0.25); margin-bottom: 2rem; padding: 5rem 0px .5rem 0px; }
.hero-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-color), transparent 92%), transparent 40%); pointer-events: none; }
.hero-banner .hero-banner-content { position: relative; z-index: 1; padding-top: 2.5rem; }
.hero-banner .hero-banner-content h1 { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; }
.hero-banner .hero-banner-content h1 .accent-text { color: var(--accent-color); }
@media (max-width: 992px) { .hero-banner .hero-banner-content { text-align: center; margin-bottom: 3rem; } .hero-banner .hero-banner-content h1 { font-size: 2.5rem; } .hero-banner .hero-banner-content .hero-banner-buttons { justify-content: center; flex-direction: column; align-items: center; } .hero-banner .hero-banner-content .hero-banner-buttons a { margin-bottom: 0.5rem; width: 100%; max-width: 300px; text-align: center; } }
@media (max-width: 575px) { .hero-banner .hero-banner-content h1 { font-size: 2rem; } }
.hero-banner .company-badge { display: inline-flex; align-items: center; background-color: color-mix(in srgb, var(--accent-color), transparent 92%); border-radius: 50px; color: var(--accent-color); font-weight: 500; margin-bottom: .5rem; }
.hero-banner .company-badge i { font-size: 1.25rem; }
.hero-banner .company-badge .mode { background: #ff0000; color: #ffffff;height: 58px;padding: .4rem 0px .6rem 0px; }
.hero-banner .company-badge .title { background: #000000;color: #ffffff;height: 58px;padding: .4rem 0px .6rem 0px; }
@media (min-width: 409px) { .hero-banner .company-badge .mode, .hero-banner .company-badge .title { height: initial;padding: .5rem .75rem; } }
.hero-banner .btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--contrast-color); padding: 0.75rem 2.5rem; border-radius: 50px; font-weight: 500; transition: all 0.3s ease; }
.hero-banner .btn-primary:hover { background-color: color-mix(in srgb, var(--accent-color), black 20%); border-color: color-mix(in srgb, var(--accent-color), black 20%); }
.hero-banner .btn-link { color: var(--heading-color); text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.hero-banner .btn-link:hover { color: var(--accent-color); }
.hero-banner .btn-link i { font-size: 1.5rem; vertical-align: middle; }
.hero-banner .hero-banner-image { position: relative; text-align: center; z-index: 1; }
.hero-banner .hero-banner-image img { max-width: 100%; height: auto; }
.hero-banner .customers-badge { position: absolute; bottom: 10px; right: 30px; background-color: var(--surface-color); padding: 1rem; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); max-width: 300px; animation: float-badge 3s ease-in-out infinite; will-change: transform; }
.hero-banner .customers-badge .customer-avatars { display: flex; align-items: center; margin-bottom: 0.5rem; }
.hero-banner .customers-badge .avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--surface-color); margin-left: -8px; }
.hero-banner .customers-badge .avatar:first-child { margin-left: 0; }
.hero-banner .customers-badge .avatar.more { background-color: var(--accent-color); color: var(--contrast-color); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
.hero-banner .customers-badge p { font-size: 0.875rem; color: color-mix(in srgb, var(--default-color), transparent 40%); }
@media (max-width: 992px) { .hero-banner .customers-badge { position: static; margin: 1rem auto; max-width: 250px; } }
.hero-banner .stats-row { position: relative; z-index: 1; margin-top: .5rem; background-color: #000000; opacity: 0.9; border-radius: 2.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); padding-bottom: 1rem; }
.hero-banner .stat-item { display: flex; align-items: center; gap: 1rem; }
.hero-banner .stat-item .stat-icon { flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: color-mix(in srgb, var(--accent-color), transparent 92%); border-radius: 50px; transition: 0.3s; }
.hero-banner .stat-item .stat-icon i { font-size: 1.5rem; color: var(--accent-color); }
.hero-banner .stat-item:hover .stat-icon { background-color: var(--accent-color); }
.hero-banner .stat-item:hover .stat-icon i { color: var(--contrast-color); }
.hero-banner .stat-item .stat-content { flex-grow: 1; text-align: center; }
.hero-banner .stat-item .stat-content a { color: #ffffff; }
.hero-banner .stat-item .stat-content img { margin-bottom: .5rem; }
.hero-banner .stat-item .stat-content h4 { color: #ffffff; font-size: 1.05rem; margin-bottom: 0rem; font-weight: 600; }
.hero-banner .stat-item .stat-content p { font-size: 0.875rem; color: color-mix(in srgb, var(--default-color), transparent 40%); margin: 0; }
@media (max-width: 575px) { .hero-banner .stat-item { flex-basis: 100%; } }
@media (max-width: 768px) { .hero-banner .stats-row { flex-wrap: wrap; margin-left: .25rem; margin-right: .25rem; } .hero-banner .stat-item { flex-basis: 48%; margin-bottom: 1rem; } }
@keyframes float-badge { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.hero-banner .btn-carrito { background-color: #1a1a1a; color: #ffffff; padding: .5rem 1.75rem; border-radius: .65rem; }
.hero-banner .btn-carrito:hover { background-color: #0d0d0d; }
.hero-banner .btn-compartir { background-color: #666666; color: #ffffff; padding: .5rem 1.75rem; border-radius: .65rem; }
.hero-banner .btn-compartir:hover { background-color: #494949; }
.hero-banner-investment { margin-top: 1.5rem; margin-bottom: 1rem; }
.hero-banner-investment .investment-title { color: #808080; }
.hero-banner-investment .investment-price { color: #c1272d; font-weight: bold; font-size: 1.5rem; }
.hero-banner-investment .investment-price-out { color: #808080; font-weight: bold; font-size: 1.5rem; text-decoration: line-through; }
.hero-banner-registration a { background: linear-gradient(to right, #e60000, #990000); color: #ffffff; padding: .5rem 5rem; font-size: 1.5rem; font-weight: bold; border-radius: .65rem; display: inline-block; text-align: center; white-space: nowrap; }
@media (max-width: 768px) { .hero-banner-registration a { padding: .5rem 2rem; font-size: 1.2rem; width: 100%; box-sizing: border-box; } }
.hero-banner-registration a:hover { background: linear-gradient(to right, #b30000, #660000); }

.card-inrepi { border-radius: .65rem !important; margin-bottom: 1.5rem; }
.card-inrepi .card-header { background: url('https://res.cloudinary.com/constructora-inrepi/image/upload/v1733816137/INREPI/Visitante/Curso/dwn9ja948ll6zb15wuoj.png') no-repeat; background-position: 15px bottom; padding: 0.5rem 1.15rem .5rem 1.15rem; }
.card-inrepi .card-no-line { background: inherit !important; background-position: inherit !important; padding: .5rem .5rem .5rem 1rem !important; }
.card-inrepi .card-no-line .card-title { margin-bottom: 0px !important; }
.card-inrepi .card-header .card-title { color: #000000; padding-top: .5rem; font-size: 1.25rem; font-weight: 600; }
.card-inrepi .card-body { padding: 1rem 1rem .5rem 1rem; }
.card-inrepi .form-group { margin-bottom: 1rem; }
.card-inrepi .form-control { border-color: #999999; border-radius: .65rem; }

.inrepi-breadcrumb { background: #cccccc; color: #000000; margin-bottom: 1.5rem; padding: .5rem; border-radius: 1rem; font-weight: bold; text-align: center; }

.curso .btn-accion { width: 100%; margin-bottom: 1rem; padding: .75rem 1rem; display: block; text-align: center; font-weight: bold; border-radius: 1rem; }
.curso .btn-accion i { font-size: 1.5rem; }
.curso .btn-accion.btn-asesor { background: #b3b3b3; color: #000000; }
.curso .btn-accion.btn-telefono { background: #387aac; color: #ffffff; }
.curso .btn-accion.btn-whatsapp { background: #00c153; color: #ffffff; }

.program-card { border-radius: 8px; display: flex; align-items: center; margin-bottom: 20px; width: 100%; }
.icon-container { background-color: #ffcc00; border-radius: 1rem; flex: 0 0 15%; max-width: 15%; height: 100%; padding: .85rem 0rem; display: flex; justify-content: center; align-items: center; margin-right: .5rem; }
.icon-container img { width: 50%; height: auto; }
.program-text { flex: 0 0 84%; max-width: 84%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .85rem; font-weight: bold; color: #000000; padding: .35rem; border: 1px solid #cccccc; border-radius: .75rem; min-height: 50px; }
@media (max-width: 768px) { .program-card { flex-direction: row; flex-wrap: nowrap; } .icon-container { flex: 0 0 15%; max-width: 15%; border-radius: 5px; } .program-text { flex: 0 0 85%; max-width: 85%; } }

.card-inrepi .inrepi-certificado { margin-bottom: 1.25rem; padding: 1rem 1rem; border: 2px solid #999999; border-radius: .5rem; }
.card-inrepi .inrepi-certificado .tag { color: #ffffff; width: 200px; font-weight: bold; text-align: center; padding: .25rem .5rem; border-radius: .5rem; display: block; }
.card-inrepi .inrepi-certificado .tag-inrepi { background: #292a2c; margin: auto; margin-bottom: 1rem; }
.card-inrepi .inrepi-certificado .tag-cip { background: #e81c24; margin: auto; margin-bottom: 1rem; }
@media (min-width:576px) { .card-inrepi .inrepi-certificado .tag-inrepi, .card-inrepi .inrepi-certificado .tag-cip { margin: auto; margin-bottom: 1rem; } }
@media (min-width:768px) { .card-inrepi .inrepi-certificado .tag-inrepi, .card-inrepi .inrepi-certificado .tag-cip { margin: auto; margin-bottom: 1rem; } }
@media (min-width:992px) { .card-inrepi .inrepi-certificado .tag-inrepi, .card-inrepi .inrepi-certificado .tag-cip { margin: inherit; margin-bottom: 1rem; } }
@media (min-width:1200px) { .card-inrepi .inrepi-certificado .tag-inrepi, .card-inrepi .inrepi-certificado .tag-cip { margin: inherit; margin-bottom: 1rem; } }
@media (min-width:1400px) { .card-inrepi .inrepi-certificado .tag-inrepi, .card-inrepi .inrepi-certificado .tag-cip { margin: inherit; margin-bottom: 1rem; } }
.card-inrepi .metodo-pago { margin-bottom: 1rem; }

.card-teaching h3 { font-weight: 600; }
.card-teaching .teaching-text { padding-right: 1rem;text-align: justify; }
.card-teaching .teaching-image { text-align: center; }
.card-teaching .teaching-image img { width: 75%; }
@media (max-width: 767.98px) { .card-teaching .teaching-row { display: flex; flex-direction: column; } .card-teaching .teaching-image, .card-teaching .teaching-text { width: 100%; max-width: 100%; } .card-teaching .teaching-text h3, .card-teaching .teaching-text h5 { text-align: center; } .card-teaching .teaching-image { order: 1; text-align: center; margin-bottom: 1rem; } .card-teaching .teaching-image img { width: 125px; } .card-teaching .teaching-text { order: 2; text-align: justify; padding-right: 1rem !important; } }
@media (max-width: 767.98px) { .teaching-row { display: flex; flex-direction: column; } .teaching-image, .teaching-text { width: 100%; max-width: 100%; } .teaching-image { order: 1; text-align: center; margin-bottom: 1rem; } .teaching-text { order: 2; padding-right: 0 !important; text-align: justify; } }
.text-magenta { color: #9e005d !important; }
.btn-compartir { background-color: #6c757d; color: white; border-radius: 50rem; padding: 0.5rem 1.5rem; display: inline-flex; align-items: center; position: relative; z-index: 1060; }
.btn-compartir:focus, .btn-compartir:active { outline: none; box-shadow: none; }

/* ===========================================================================
   MODAL COMPARTIR
=========================================================================== */

#modalCompartir { position: fixed; bottom: 20px; right: 20px; z-index: 1061; width: auto; padding: 16px; border-radius: 12px; background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: none; text-align: center; }
#modalCompartir.show { display: block; }
#modalCompartir h6 { font-weight: bold; margin-bottom: 12px; }
#modalCompartir .social-icons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#modalCompartir .social-icons a { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: white; font-size: 22px; text-decoration: none; }
#modalCompartir .icon-facebook { background-color: #3b5998; }
#modalCompartir .icon-twitter { background-color: #000000; }
#modalCompartir .icon-linkedin { background-color: #0077b5; }
#modalCompartir .icon-whatsapp { background-color: #25d366; }
#modalCompartir .icon-tiktok { background-color: #000000; }
#modalCompartir .x-icon svg { width: 22px; height: 22px; fill: white; }
.overlay { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.5); z-index: 1060; display: none; }
.overlay.show { display: block; }

/* ===========================================================================
   CERTIFICADO
=========================================================================== */

.card-certificado { font-family: 'Open Sans', sans-serif; } 
.card-certificado .inrepi-certificado { border: 2px solid #999; border-radius: 15px; padding: 1rem; margin-bottom: 2rem; display: flex; gap: 1rem; align-items: flex-start; flex-direction: row; }
.card-certificado .certificado-preview { position: relative; width: 270px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.card-certificado .flip-wrapper { width: 100%; height: 170px; position: relative; perspective: 1000px; cursor: pointer; }
.card-certificado .flip-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s; }
.card-certificado .flipped { transform: rotateY(180deg); }
.card-certificado .flip-card-front, .card-certificado .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px; overflow: hidden; }
.card-certificado .flip-card-back { transform: rotateY(180deg); }
.card-certificado .certificado-preview img { width: 100%; height: 100%; object-fit: contain; }
.card-certificado .certificado-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; align-items: flex-start; }
.card-certificado .tag { color: #ffffff; width: 200px; font-weight: bold; padding: .25rem .5rem; border-radius: .5rem; display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; text-transform: uppercase; text-align: center; transition: background-color 0.4s ease; }
.card-certificado .tag-inrepi { background: #292a2c; }
.card-certificado .tag-inrepi:hover { background: #111111; }
.card-certificado .tag-cip { background: #e81c24; }
.card-certificado .tag-cip:hover { background: #b80006; }
.card-certificado .certificado-descripcion { font-size: 15px; line-height: 1.5; }
.card-certificado .certificado-descripcion b { font-weight: bold; }
.card-certificado .certificado-descripcion .resaltado { color: #c81414; }
.card-certificado .certificado-descripcion .participado { color: green; }
.card-certificado .indicadores { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; font-size: 20px; }
.card-certificado .indicadores span { cursor: pointer; user-select: none; }
.card-certificado .indicador-dot { width: 14px; height: 14px; border-radius: 50%; background-color: #e0e0e0; display: inline-block; }
.card-certificado .indicador-dot.activo { background-color: #999; }
.card-certificado .navegador { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.card-certificado .navegador span { font-size: 3rem; cursor: pointer; }
.card-certificado .linkedin-icon { height: 1.1em; vertical-align: middle; }
@media (max-width: 768px) { .card-certificado .inrepi-certificado { flex-direction: column; align-items: center; text-align: center; } }
@media (max-width: 768px) { .card-certificado .certificado-info { align-items: center; text-align: center; } }
@media (max-width: 768px) { .card-certificado .tag { width: auto; justify-content: center; } }