/* public/css/global.css - Estilos base y layout principal */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --cream:       #faf6f0;
  --green:       #4a7245;
  --green-light: #6b9e5e;
  --terra:       #c4704a;
  --terra-light: #e8a87c;
  --brown-light: #d4b896;
  --text-dark:   #2a2318;
  --text-mid:    #6b5e4e;
  --text-soft:   #9b8e7e;
  --white:       #ffffff;
  --bg-gradient-1: rgba(74,114,69,.09);
  --bg-gradient-2: rgba(196,112,74,.08);
  --bg-gradient-3: rgba(232,168,124,.06);
}

html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--text-dark);overflow-x:hidden;transition:background 0.3s,color 0.3s}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 60% at 15% 10%,var(--bg-gradient-1) 0%,transparent 60%),
             radial-gradient(ellipse 50% 50% at 90% 80%,var(--bg-gradient-2) 0%,transparent 55%),
             radial-gradient(ellipse 40% 40% at 75% 15%,var(--bg-gradient-3) 0%,transparent 50%)}
.wrapper{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;overflow-x:hidden;width:100%}

/* Link Apoyar en navbar */
.nav-link--donar { color: var(--green) !important; font-weight: 600; }
.nav-link--donar:hover { color: var(--green-light) !important; }


/* Topbar y Navegación */
.topbar{position:relative;z-index:1000;padding:1.4rem 3rem;display:flex;align-items:center;justify-content:space-between;animation:fadeDown .8s ease both}
.topbar-brand {display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;z-index:100;}
.topbar-logo{height:46px;width:46px;border-radius:50%;object-fit:cover;box-shadow:0 2px 14px rgba(196,112,74,.22)}
.topbar-name{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}

.topbar-nav {display:flex;gap:1.5rem;align-items:center;}
.nav-link {text-decoration:none;color:var(--text-dark);font-size:0.95rem;font-weight:500;transition:color 0.2s;}
.nav-link:hover {color:var(--green);}
.nav-btn {padding:0.5rem 1.2rem;background:#c4704a;background:var(--terra, #c4704a);color:white;color:var(--white, #ffffff);border-radius:20px;text-decoration:none;font-weight:500;font-size:0.9rem;transition:background 0.2s;}
.nav-btn:hover {background:#e8a87c;background:var(--terra-light, #e8a87c);}

/* Menú hamburguesa (oculto en escritorio) */
.hamburger-menu {display:none;background:none;border:none;cursor:pointer;z-index:9100;flex-direction:column;gap:5px;padding:5px;}
.hamburger-menu span {display:block;width:24px;height:2px;background:#2a2318;background:var(--text-dark, #2a2318);transition:all 0.3s;}

/* Estilos del Hero Slider removidos (ver home-slider.css) */

/* ── Home Bottom ──────────────────────────────────────────── */
.home-bottom { padding: 3rem 4rem; }
.home-bottom-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }

/* Sección de bienvenida / suscripción */
.hb-welcome-wrap { display: flex; align-items: center; }
.hb-user-badge {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(74,114,69,0.06); border: 1px solid rgba(74,114,69,0.15);
  border-radius: 20px; padding: 1rem 1.5rem;
}
.hb-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(74,114,69,0.3);
}
.hb-avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: white; font-weight: 700; font-size: 1.3rem;
}
.hb-greeting { font-size: 1.1rem; color: var(--text-dark); }
.hb-sub { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.2rem; }

.hb-subscribe { display: flex; flex-direction: column; gap: 0.6rem; max-width: 480px; }
.hb-subscribe-title { font-size: 1.1rem; font-weight: 600; color: var(--text-dark); }
.hb-email-row { display: flex; gap: 0.6rem; align-items: center; }
.hb-email-input {
  flex: 1; padding: 0.75rem 1.2rem; border-radius: 30px;
  border: 1.5px solid rgba(139,107,74,0.2); font-family: inherit;
  font-size: 0.95rem; outline: none; background: rgba(255,255,255,0.7);
}
.hb-email-input:focus { border-color: var(--green); background: #fff; }

/* Tarjetas */
.hb-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hb-card {
  background: rgba(255,255,255,0.65); backdrop-filter: blur(10px);
  border: 1px solid rgba(139,107,74,0.15); border-radius: 20px;
  padding: 1.5rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: all 0.3s ease; position: relative; overflow: hidden;
}
.hb-card:hover {
  transform: translateY(-6px); background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.07); border-color: rgba(74,114,69,0.3);
}
.hb-card__icon { font-size: 2rem; }
.hb-card__body h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-dark); }
.hb-card__body p { font-size: 0.82rem; color: var(--text-soft); line-height: 1.5; }
.hb-card--locked { opacity: 0.8; }
.hb-card__lock { position: absolute; top: 1rem; right: 1rem; font-size: 1rem; opacity: 0.4; }
.hb-card__arrow {
  margin-top: auto; font-size: 1.1rem; color: var(--green);
  opacity: 0; transform: translateX(-5px);
  transition: opacity 0.2s, transform 0.2s;
}
.hb-card:hover .hb-card__arrow { opacity: 1; transform: translateX(0); }
.hb-card--highlight { background: rgba(74,114,69,0.04); }
.hb-card--highlight:hover { border-color: var(--green); }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-15px); }
  to   { opacity: 1; transform: translateY(0); }
}



.btn-primary { display: inline-block; padding: .85rem 1.8rem; background: #4a7245; background: var(--green, #4a7245); color: white; border-radius: 50px; text-decoration: none; font-weight: 500; font-size: 0.95rem; box-shadow: 0 4px 18px rgba(74,114,69,.25); transition: background .25s, transform .2s;border:none;cursor:pointer;}
.btn-primary:hover { background: #6b9e5e; background: var(--green-light, #6b9e5e); transform: translateY(-2px); }
.btn-secondary { display: inline-block; padding: .85rem 1.8rem; background: transparent; color: #c4704a; color: var(--terra, #c4704a); border: 2px solid #c4704a; border: 2px solid var(--terra, #c4704a); border-radius: 50px; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: background .25s, color .25s; }
.btn-secondary:hover { background: #c4704a; background: var(--terra, #c4704a); color: white; }

/* ── Footer Premium ────────────────────────────────────────── */
.footer-premium {
  background: white;
  padding: 5rem 3rem 2rem;
  border-top: 1px solid rgba(139,107,74,0.1);
  margin-top: 4rem;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 4rem;
}
.footer-col-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.footer-logo { height: 50px; margin-bottom: 1rem; }
.footer-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--terra); margin: 0; }
.footer-tagline { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.3rem; font-weight: 500; }
.footer-mission { font-style: italic; font-size: 0.88rem; color: var(--text-mid); margin-top: 1.5rem; line-height: 1.6; max-width: 280px; }

.social-links { display: flex; flex-direction: column; gap: 1rem; }
.social-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text-mid);
  font-size: 0.95rem;
  transition: all 0.3s;
}
.social-link svg { color: var(--terra); transition: transform 0.3s; }
.social-link:hover { color: var(--terra); transform: translateX(5px); }
.social-link:hover svg { transform: scale(1.1); }

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--green);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  transition: color 0.2s;
}
.footer-contact-item:hover { color: var(--green-light); }

.footer-legal-links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.footer-legal-links a { font-size: 0.75rem; color: var(--text-soft); text-decoration: none; transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--terra); }

.footer-bottom {
  max-width: 1200px;
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(139,107,74,0.08);
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* ── Menú de usuario (dropdown) ────────────────── */
.nav-link--admin { color: var(--terra); font-weight: 600; }
.nav-user-menu { position: relative; }
.nav-user-btn {
  background: none; border: 1px solid rgba(74,114,69,0.3); border-radius: 20px;
  padding: 0.45rem 1rem; cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; font-weight: 500; color: var(--text-dark);
  display: flex; align-items: center; gap: 0.4rem; transition: background 0.2s;
}
.nav-user-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.nav-user-avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: white; font-weight: bold; font-size: 0.9rem; }
.nav-user-btn:hover { background: rgba(74,114,69,0.07); }
.nav-user-caret { font-size: 0.65rem; color: var(--text-soft); }
.nav-user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: white; border: 1px solid rgba(139,107,74,0.15);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  min-width: 180px; padding: 1rem; z-index: 500;
  flex-direction: column; gap: 0.4rem;
}
.nav-user-dropdown.is-open { display: flex; }
.nav-dropdown-name { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.nav-dropdown-role { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 10px; width: fit-content; }
.badge-role-admin   { background: #fff3cd; color: #7d4e00; }
.badge-role-premium { background: #e8f4fd; color: #1a5276; }
.badge-role-suscrito { background: #edf7ed; color: #2d6a2d; }
.nav-user-dropdown hr { border: none; border-top: 1px solid rgba(139,107,74,0.12); margin: 0.4rem 0; }
.nav-dropdown-link { font-size: 0.88rem; text-decoration: none; color: var(--text-mid); padding: 0.3rem 0; transition: color 0.2s; }
.nav-dropdown-link:hover { color: var(--green); }
.nav-dropdown-link--logout { color: #c0392b; }
.nav-dropdown-link--logout:hover { color: #922b21; }

@keyframes spin { 100% { transform: rotate(360deg); } }


@media(max-width:1024px){
  .hb-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

@media(max-width:900px){
  .home-bottom { padding: 2rem 2.5rem; }
}

@media(max-width:768px){
  .hamburger-menu {display:flex;}
  .topbar-nav {
    position:fixed;top:0;right:-100%;width:75vw;max-width:280px;height:100vh;
    background:rgba(250,246,240,0.97);flex-direction:column;
    justify-content:center;padding:2rem;transition:right 0.3s ease;
    box-shadow:-4px 0 15px rgba(0,0,0,0.08);backdrop-filter:blur(10px);z-index:9000;
    gap: 0.5rem;
  }
  .topbar-nav.active {right:0;}
  .hamburger-menu.is-active span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
  .hamburger-menu.is-active span:nth-child(2) {opacity:0;}
  .hamburger-menu.is-active span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
  .home-bottom { padding: 1.5rem; }
  .hb-cards { grid-template-columns: 1fr 1fr; }
  .nav-user-dropdown { right: auto; left: 0; }
  .cookie-banner__content { flex-direction: column; align-items: flex-start; }
  
  .footer-premium { padding: 3rem 2rem 1.5rem; margin-top: 2rem; }
  .footer-content { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer-mission { margin: 1.5rem auto 0; }
  .social-links { align-items: center; }
  .footer-contact-item { justify-content: center; }
  .footer-legal-links { justify-content: center; }
}

@media(max-width:480px){
  .topbar{padding:1rem 1.2rem;}
  .topbar-name { font-size: 0.95rem; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; }
  .hb-cards { grid-template-columns: 1fr; }
  .hb-email-row { flex-direction: column; align-items: stretch; }
  .footer-premium { padding: 2.5rem 1.5rem 1.5rem; }
}