:root{
    /* Paleta SUYAI (ajustada desde tu PDF) */
    --brand:#F28705;     /* primario */
    --brand-2:#F2BC57;   /* acento */
    --brand-3:#FAE39D;   /* fondo cálido */
    --brand-4:#8C513B;   /* marrón titular */
    --brand-5:#FDF1F1;   /* fondo suave */
    --dark:#1f242a;
    --naranja: #C87919;
    --verde:   #2C6E4D;
    --azul:    #78B8D4;
    --beige:   #F9F5EE;
    --gris:    #3A3A3A;
    --white:   #FFFFFF;     
}

body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color:var(--dark);
}
h1,h2,h3,h4{
    color:var(--brand-4);
}
.btn-brand{
    background:var(--brand);
    color:#fff;
}
.btn-brand:hover{
    background:#d87403;
    color:#fff;
}
.badge-brand{
    background:var(--brand-2);
}

section.section{
    padding:40px 0;
}
.hero{
    background: linear-gradient(180deg, var(--brand-3), #fff);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.card-course .price{
    color:var(--brand-4);
    font-weight:700;
}
.navbar .nav-link{
    color:var(--dark);
}
.navbar .nav-link:hover{
    color:var(--brand);
}
.navbar-nav .nav-link.active {
    color: var(--naranja);              /* tu color institucional */
    font-weight: 600;
    border-bottom: 2px solid var(--naranja);
}

.row>* {
    margin-top: 0px;
}

.col {
    margin-bottom: 10px;
}

:root{
    --naranja:#C87919;
    --verde:#2C6E4D;
    --azul:#78B8D4;
    --beige:#F9F5EE;
    --gris:#3A3A3A;
}
.ng-wrap{
    position:relative;
    overflow:hidden;
}
/* Gradient-mesh de fondo */
.ng-bg::before{
    content:"";
    position:absolute;
    inset:-10% -10%;
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(120,184,212,.25), transparent 60%),
        radial-gradient(900px 500px at 90% 20%, rgba(44,110,77,.18), transparent 60%),
        radial-gradient(600px 500px at 50% 100%, rgba(200,121,25,.18), transparent 60%),
        linear-gradient(180deg, var(--beige), #fff);
    z-index:-2;
    filter: saturate(1.05);
}
/* Partículas/hojas sutiles */
.ng-leaf{
    position:absolute;
    width:160px;
    height:160px;
    opacity:.08;
    z-index:-1;
}
.ng-leaf.l1{
    top:6%;
    left:-40px;
    transform: rotate(18deg);
}
.ng-leaf.l2{
    bottom:10%;
    right:-30px;
    transform: rotate(-12deg);
}

/* Hero glass */
.ng-hero{
    padding: clamp(70px, 9vw, 140px) 0 !important;
    padding-top: 60px !important;
    padding-bottom: 30px !important;
}
.ng-glass{
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 60px -30px rgba(0,0,0,.35);
}
.ng-title{
    color: var(--naranja);
    letter-spacing:.2px;
}

/* Subtítulos */
.ng-sub{
    color: var(--verde);
    letter-spacing:.2px;
    font-weight:700;
}

/* Card fundadora: borde degradé animado */
.ng-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 50px -30px rgba(0, 0, 0, .35), 0 -16px 50px -30px rgba(0, 0, 0, .35);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--white) !important;
    background-color: var(--brand) !important;
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius);
    color: var(--bs-navbar-nav-link-padding-x);
}

/*.ng-card::before{
    content:"";
    position:absolute;
    inset: -2px;
    background: conic-gradient(from 140deg, var(--azul), var(--naranja), var(--verde), var(--azul));
    filter: blur(12px);
    opacity:.35;
    z-index:-1;
}*/
.ng-card .inner{
    position:relative;
    border-radius:18px;
    background:#fff;
    padding:28px;
}

/* Relatores: misma forma, mejora visual */
.ng-rel{
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    padding: 14px 16px;
    transition: transform .12s ease, box-shadow .2s ease;
}
.ng-rel:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -20px rgba(0,0,0,.45);
}
.ng-rel .name{
    color: var(--naranja);
    font-weight: 800;
}
.ng-rel .role{
    color: #6b7280;
    font-size:.92rem;
}
.ng-avatar{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(200,121,25,.35);
    box-shadow: 0 8px 16px -12px rgba(0,0,0,.45);
}

/* Divider suave */
.ng-div{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}

/* Micro CTA badge */
.ng-chip{
    display:inline-block;
    padding:.35rem .6rem;
    border-radius:999px;
    background: rgba(200,121,25,.12);
    color: var(--naranja);
    font-weight:700;
    font-size:.83rem;
}

@media (prefers-reduced-motion:no-preference){
    .ng-card::before{
        animation:spin 8s linear infinite;
    }
    @keyframes spin{
        to{
            transform: rotate(360deg);
        }
    }
}

.text-naranja{
    color: var(--naranja)!important;
    text-decoration: none;
}
.text-verde{
    color: var(--verde)!important;
}

/* Curso card: look más light */
.ng-card.ng-course {
    border-radius:20px;
    background:#fff;
    box-shadow: 0 10px 30px -24px rgba(0,0,0,.45);
}
.ng-course .inner {
    border-radius:18px;
}

/* Título menos “gritón” */
.ng-course .title {
    color:#2f2f2f;                 /* texto principal más neutro */
    font-weight:600;               /* baja de 700 a 600 */
    letter-spacing:.2px;
    margin-bottom:.25rem;
}
.ng-course .accent {
    display:inline-block;
    width:28px;
    height:3px;
    background: var(--naranja);
    border-radius:2px;
    opacity:.55;
    margin-top:.35rem;
}

/* Resumen y metadatos más suaves */
.ng-course .summary {
    color:#6b7280;
}                 /* gris medio */
.ng-course .meta {
    margin:0 0 .5rem 0;
    padding:0;
    list-style:none;
}
.ng-course .meta li {
    position:relative;
    padding-left:16px;
    color:#4b5563;
    font-size:.92rem;
}
.ng-course .meta li::before{
    content:"";
    position:absolute;
    left:0;
    top:.55rem;
    width:6px;
    height:6px;
    border-radius:50%;
    background: rgba(120,184,212,.7);                   /* azul SUYAI suave */
}
.ng-course .meta li strong{
    font-weight:600;
    color:#374151;                     /* baja contraste del <strong> */
}

/* Botones más delicados */
.ng-course .btn-brand {
    background: var(--naranja);
}
.ng-course .btn-brand:hover {
    background:#a15f13;
}
.ng-course .btn-outline-dark {
    color:#4b5563;
    border-color:#d1d5db;
    background:#fff;
}
.ng-course .btn-outline-dark:hover {
    color:#111827;
    border-color:#9ca3af;
    background:#f9fafb;
}

/* Imagen superior con borde redondeado armonioso */
.ng-course .cover {
    height:180px;
    width:100%;
    object-fit:cover;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
}

/* Precio en pill (si hay costo) */
.ng-pill {
    display:inline-block;
    padding:.25rem .5rem;
    border-radius:999px;
    background: rgba(200,121,25,.1);
    color: var(--naranja);
    font-weight:600;
    font-size:.82rem;
}

/* Hover sutil en la tarjeta */
.ng-course:hover {
    transform: translateY(-2px);
    transition: transform .12s ease;
}
/* Carrusel banners */
.ng-carousel {
    position: relative;
    margin-bottom: 0;
}
.ng-carousel .carousel-indicators {
    bottom: 14px;           /* dentro del área del banner */
}
.ng-carousel .carousel-indicators [data-bs-target]{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.35);
}
.ng-carousel .carousel-indicators .active{
    background-color: rgba(0,0,0,.75);
}
.ng-carousel .carousel-control-prev,
.ng-carousel .carousel-control-next{
    width: 44px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.section--no-gap {
    margin: 0;
    padding: 0;
}
/* El contenedor del carrusel no colapse */
.ng-carousel { position: relative; }

/* Permite que todas las slides respeten el alto calculado */
.ng-carousel .carousel-item { overflow: hidden; }

/* Las imágenes “solo imagen” estiran a la altura de la slide */
.ng-carousel .carousel-item > img.d-block {
  height: 100%;
  object-fit: cover;
}

/* Asegura que hero/glass ocupen toda la altura de la slide */
.ng-carousel .ng-hero,
.ng-carousel .ng-glass { height: 100%; display: flex; align-items: center; }
@media (min-width: 992px){
  .ng-carousel .carousel-item { min-height: 520px; }
}
.list-unstyled{
    line-height: 30px;
}

/* --- TESTIMONIOS SLIDER --------------------------------------- */

.ng-test-slider{
  position:relative;
}

.ng-test-track{
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:8px;
}
.ng-test-track::-webkit-scrollbar{
  display:none;
}

.ng-test-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  padding:18px 20px 18px;
  margin-right:16px;
  min-width:260px;
  max-width:340px;
  flex-shrink:0;
}

@media (min-width: 768px){
  .ng-test-card{
    min-width:300px;
    max-width:360px;
  }
}

.ng-test-head{
  border-bottom:1px dashed rgba(0,0,0,.08);
  padding-bottom:10px;
}

.ng-test-avatar-wrap{
  width:48px;
  height:48px;
  border-radius:50%;
  padding:2px;
  background:linear-gradient(135deg,#78B8D4,#2C6E4D,#C87919);
}

.ng-test-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
}

.ng-test-avatar--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.95rem;
  color:#C87919;
  background:#fff;
}

.ng-test-name{
  font-size:.95rem;
  font-weight:600;
  color:#222;
}

.ng-test-meta{
  font-size:.8rem;
}

.ng-test-stars .star{
  font-size:.75rem;
  color:#ddd;
}
.ng-test-stars .star.filled{
  color:#F5B301;
}

.ng-test-text{
  color:#444;
  line-height:1.6;
}

/* Flechas del carrusel */
.ng-test-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  width:32px;
  height:32px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  color:#555;
  z-index:5;
}
.ng-test-arrow:hover{
  background:#f7f7f7;
}
.ng-test-arrow-left{
  left: -16px;
}
.ng-test-arrow-right{
  right:-16px;
}

@media (max-width: 575.98px){
  .ng-test-arrow-left{
    left:2px;
  }
  .ng-test-arrow-right{
    right:2px;
  }
}

/* --- Pilares -------------------------------------------------- */
.ng-pill-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.04);
}
.ng-pill-card .inner{
  padding:18px 20px;
}
.ng-pill-icon{
  width:36px; height:36px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(120,184,212,.12);
  color:#2C6E4D;
  flex-shrink:0;
}
.ng-pill-icon i{
  font-size:1.1rem;
}
.ng-pill-title{
  font-weight:600;
  color:#333;
}

/* --- Stats / datos ------------------------------------------- */
.ng-stats-row{
  gap:16px;
}
.ng-stat{
  background:linear-gradient(135deg,#78B8D4,#2C6E4D);
  color:#fff;
  border-radius:16px;
  padding:16px 18px;
  min-width:150px;
  flex:1 1 150px;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.ng-stat::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.35);
  opacity:.7;
}
.ng-stat-icon{
  position:relative;
  margin-bottom:4px;
}
.ng-stat-icon i{
  font-size:1.2rem;
}
.ng-stat-value{
  position:relative;
  font-size:1.6rem;
  font-weight:700;
  line-height:1.1;
}
.ng-stat-label{
  position:relative;
  opacity:.9;
}
@media (max-width: 575.98px){
  .ng-stat{
    text-align:center;
  }
}