/* ============================
   ROSMUC – estilos principales
   ============================ */

/* Paleta */
:root{
    --rosmuc-dark-green:#0d5a3a;     /* verde profundo */
    --rosmuc-green:#1ea15f;          /* verde medio */
    --rosmuc-soft-green:#d6f0e4;     /* verde muy claro */
    --rosmuc-yellow:#f0c400;         /* amarillo acento */
    --rosmuc-white:#ffffff;
    --rosmuc-text:#1a1a1a;
  }
  
  /* Tipografía base */
  html, body{
    font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:var(--rosmuc-text);
  }
  
  /* ===== Botones ===== */
  .btn-rosmuc{
    --bs-btn-bg:var(--rosmuc-green);
    --bs-btn-border-color:var(--rosmuc-green);
    --bs-btn-hover-bg:var(--rosmuc-dark-green);
    --bs-btn-hover-border-color:var(--rosmuc-dark-green);
    --bs-btn-color:#fff;
  }
  
  .btn-ghost{
    border:1px solid rgba(255,255,255,.5);
    color:#fff;
    background:transparent;
  }
  .btn-ghost:hover{
    border-color:#fff;
    color:#fff;
    background-color:rgba(255,255,255,.12);
  }
  
  /* ===== HERO ===== */
  .hero{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
      radial-gradient(1200px 400px at 20% -10%, var(--rosmuc-yellow) 0%, transparent 60%),
      linear-gradient(135deg, var(--rosmuc-dark-green) 0%, var(--rosmuc-green) 60%);
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:auto -30% -40% -30%;
    height:55%;
    background:radial-gradient(700px 250px at 80% 10%, rgba(255,255,255,.18), transparent 50%);
    pointer-events:none;
  }
  
  /* Sombra suave reutilizable */
  .shadow-soft{ box-shadow:0 .2rem .8rem rgba(0,0,0,.08); }
  
  /* ===== Tarjetas ===== */
  .category-card{
    transition:transform .2s ease, box-shadow .2s ease;
    text-decoration:none;
    color:inherit;
  }
  .category-card:hover{
    transform:translateY(-4px);
    box-shadow:0 .5rem 1.2rem rgba(0,0,0,.12);
  }
  
  .badge-eco{
    background:var(--rosmuc-yellow);
    color:#1a1a1a;
  }
  
  .product-card .price{
    color:var(--rosmuc-dark-green);
    font-weight:700;
    margin:0;
  }
  
  /* Títulos de sección */
  .section-title span{
    color:var(--rosmuc-yellow);
  }
  
  /* Bloque e-learning con degradado suave */
  .elearning{
    background:linear-gradient(135deg, var(--rosmuc-soft-green), #fff);
  }
  
  /* ===== Utilidades ===== */
  .link-dark{
    text-decoration:none;
  }
  .link-dark:hover{
    text-decoration:underline;
  }
  
  /* Imágenes responsivas (por si no usas .img-fluid de Bootstrap) */
  img.responsive{
    max-width:100%;
    height:auto;
    display:block;
  }
  
  /* ===== Ajustes responsivos del Hero ===== */
  @media (max-width: 991.98px){
    .hero .display-5{
      font-size: calc(1.8rem + 1.2vw);
      line-height:1.2;
    }
  }
  
  @media (max-width: 575.98px){
    .hero{
      padding-top:2.5rem !important;
      padding-bottom:2.5rem !important;
    }
  }
  
  /* ===== Navbar opcional (si usas .navbar-dark) ===== */
  .navbar-dark{
    background-color:var(--rosmuc-dark-green);
  }
  
  /* ===== Footer opcional ===== */
  .footer{
    background-color:#0a3423;
    color:#cfe8dc;
  }
  .footer a{ color:#e7f7ef; text-decoration:none; }
  .footer a:hover{ opacity:.85; }