/* =========================================================
   HABITOUNO - CSS COMPLETO (GLOBAL + HEADER/FOOTER + HOME)
   ========================================================= */

:root{
  --hu-bg: #f7fbf9;
  --hu-surface: #ffffff;
  --hu-text: #0f1b17;
  --hu-muted: #4b615a;

  --hu-primary: #1f7a5a;
  --hu-primary-2: #2fa57a;
  --hu-accent: #f1b24a;

  --hu-border: rgba(15,27,23,.10);
  --hu-shadow: 0 12px 30px rgba(15,27,23,.10);

  --hu-radius: 18px;
  --hu-radius-lg: 26px;
  --hu-max: 1120px;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  background: var(--hu-bg);
  color: var(--hu-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
}

.hu-site{ min-height: 60vh; }

/* Contenedor */
.hu-wrap{
  max-width: var(--hu-max);
  margin: 0 auto;
  padding: 0 18px;
}

/* Tipografía */
.hu-h1{ font-size: clamp(2rem, 3.2vw, 3rem); line-height:1.15; margin:0; letter-spacing:-.02em; }
.hu-h2{ font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height:1.2; margin:0 0 10px; }
.hu-h3{ font-size: 1.1rem; margin: 0 0 8px; }
.hu-p{ margin: 10px 0 0; color: var(--hu-muted); }
.hu-small{ font-size:.95rem; color: var(--hu-muted); }

.hu-section{ padding: 34px 0; }

.hu-card{
  background: var(--hu-surface);
  border: 1px solid var(--hu-border);
  border-radius: var(--hu-radius-lg);
  box-shadow: var(--hu-shadow);
  overflow:hidden;
}

/* Botones */
.hu-btn{
  text-decoration:none;
  font-weight: 800;
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hu-primary), var(--hu-primary-2));
  box-shadow: 0 14px 26px rgba(31,122,90,.22);
  transition: transform .18s ease, box-shadow .18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hu-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(31,122,90,.28);
}

/* =========================
   HEADER
   ========================= */
.hu-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(247,251,249,.80);
  border-bottom: 1px solid var(--hu-border);
  backdrop-filter: blur(10px);
}

.hu-header__wrap{
  max-width: var(--hu-max);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  position: relative;
}

.hu-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--hu-text);
  min-width: 220px;
}

.hu-brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.hu-brand__name{ font-weight: 850; letter-spacing:-.02em; font-size: 1.05rem; }
.hu-brand__tagline{ color: var(--hu-muted); font-size: .86rem; font-weight: 600; }

.hu-nav{
  display:flex;
  align-items:center;
  gap: 12px;
}

.hu-nav__link{
  text-decoration:none;
  color: var(--hu-text);
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hu-nav__link:hover{ background: rgba(31,122,90,.10); }

/* Dropdown */
.hu-nav__dropdown{ position:relative; }
.hu-nav__panel{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--hu-surface);
  border: 1px solid var(--hu-border);
  border-radius: 16px;
  box-shadow: var(--hu-shadow);
  padding: 10px;
  display:none;
}

.hu-nav__panel a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--hu-text);
  font-weight: 650;
}

.hu-nav__panel a:hover{ background: rgba(31,122,90,.10); }

/* Toggle móvil */
.hu-nav__toggle{
  display:none;
  border: 1px solid var(--hu-border);
  background: rgba(255,255,255,.7);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 18px;
  cursor:pointer;
}

@media (max-width: 920px){
  .hu-nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .hu-nav{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--hu-surface);
    border-bottom: 1px solid var(--hu-border);
    padding: 12px 16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 8px;
  }

  .hu-nav.is-open{ display:flex; }

  .hu-nav__panel{
    position: static;
    box-shadow: none;
    border-radius: 14px;
    margin-top: 6px;
  }
}

/* =========================
   FOOTER
   ========================= */
.hu-footer{
  margin-top: 28px;
  border-top: 1px solid var(--hu-border);
  background: rgba(255,255,255,.55);
}

.hu-footer__wrap{
  max-width: var(--hu-max);
  margin: 0 auto;
  padding: 26px 16px 30px;
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 14px;
}

@media (max-width: 900px){
  .hu-footer__wrap{ grid-template-columns: 1fr; }
}

.hu-footer__col strong{ display:block; margin-bottom: 8px; }

.hu-footer__col a{
  display:block;
  text-decoration:none;
  color: var(--hu-text);
  font-weight: 650;
  padding: 6px 0;
}

.hu-footer__col a:hover{ text-decoration: underline; }

.hu-footer__text{ color: var(--hu-muted); margin: 8px 0 0; }
.hu-footer__small{ color: var(--hu-muted); font-size:.92rem; margin-top: 10px; }

.hu-footer__brand{ display:flex; align-items:center; gap:10px; }
.hu-footer__logo{
  width:34px; height:34px; border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(241,178,74,.55), transparent 55%),
    linear-gradient(135deg, var(--hu-primary), var(--hu-primary-2));
  box-shadow: 0 10px 22px rgba(31,122,90,.22);
  animation: huFloat 6s ease-in-out infinite;
}

@keyframes huFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

/* =========================
   HOME (para pegar en la página Inicio)
   ========================= */

.hu-hero{ padding: 26px 0 10px; }
.hu-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 900px){
  .hu-hero-grid{ grid-template-columns: 1fr; }
}

.hu-hero-left{
  padding: 26px;
  border-radius: var(--hu-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border: 1px solid var(--hu-border);
  box-shadow: var(--hu-shadow);
}

.hu-hero-right{
  border-radius: var(--hu-radius-lg);
  overflow:hidden;
  border: 1px solid var(--hu-border);
  box-shadow: var(--hu-shadow);
}

.hu-hero-right img{
  width:100%;
  height:100%;
  min-height: 320px;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .7s ease;
}

.hu-hero-right:hover img{ transform: scale(1.06); }

.hu-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 14px; }
.hu-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(31,122,90,.10);
  color: var(--hu-text);
  border: 1px solid rgba(31,122,90,.12);
  font-weight: 650;
  font-size: .92rem;
}

.hu-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 980px){
  .hu-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .hu-grid{ grid-template-columns: 1fr; }
}

.hu-cat{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color: inherit;
  border-radius: var(--hu-radius-lg);
  overflow:hidden;
  border: 1px solid var(--hu-border);
  background: var(--hu-surface);
  box-shadow: var(--hu-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hu-cat:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,27,23,.14);
}

.hu-cat img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
}

.hu-cat .hu-catbody{ padding: 14px 14px 16px; }
.hu-cat .hu-catmeta{ font-size:.92rem; color: var(--hu-muted); margin-top: 6px; }