/* Paleta solicitada:
   Detalles:    #B87646
   Detalles2:   #6A7F56
   Fondo:       #FFFFFF
   Texto:       #395133
*/

:root{
  --bg: #ffffff;
  --text: #395133;
  --accent: #B87646;
  --accent2: #6A7F56;
  --muted: #3D543B;
  --radius: 12px;
  --max-width: 920px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  /* justify-content:center; */
  flex-direction:column;
  padding:36px 20px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  width:100%;
  max-width:var(--max-width);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.98));
  border-radius:var(--radius);
  padding:32px;
  box-shadow: 0 8px 30px rgba(57,81,51,0.06);
  border:1px solid rgba(57,81,51,0.06);
}

.brand{
  text-align:left;
  margin-bottom:12px;
}
.brand h1{
  margin:0;
  font-size:34px;
  letter-spacing:0.4px;
  color:var(--text);
}
.brand .tagline{
  margin:6px 0 0;
  color:var(--muted);
  font-size:18px;
}

/* Use the Roxborough font loaded in the document head for titles */
h1, h2, h3, .brand h1, .hero h2{
  font-family: 'Roxborough CF Bold', 'Roxborough', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 15px;
}

/* Header with logo */
.site-header .header-inner{
  display:flex;
  align-items:center;
  gap:14px;
}
.site-header .logo{
  width:150px; /* aumentado para mayor presencia en cabecera */
  height:auto;
  display:block;
}
.logo-link{display:inline-block}

/* Top logo (outside the main container) */
.top-logo{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:24px;
}
.top-logo .logo{
  width:280px;
  height:auto;
  display:block
}


/* Hero */
.hero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:18px 0;
}
.hero h2{
  margin:0;
  font-size:34px;
  color:var(--text);
}
.hero .lead{
  margin:0;
  color:var(--muted);
  font-size:16px;
}

/* meta */
.meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
  width:100%;
  max-width:720px;
}
.countdown{display:flex;gap:10px;align-items:center;color:var(--muted)}
.countdown .dot{
  width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 6px 14px rgba(184,118,70,0.12);
}
.social a{
  color:var(--accent2);
  text-decoration:none;
  margin-left:8px;
  font-weight:600;
  font-size:14px;
}
.social a:hover{color:var(--accent)}

footer{
  margin-top:18px;
  text-align:right;
  color:var(--muted);
  font-size:13px;
}

/* Footer styles */
.site-footer{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(57,81,51,0.04);
}
.site-footer .footer-inner{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}
.site-footer .footer-logo{
  width:72px; /* aumentado para mejor visibilidad en el footer */
  height:auto;
  display:block;
}
.site-footer .footer-info{
  margin-left:12px;
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:18px;
}
.site-footer .footer-nav a{
  color:var(--accent2);
  text-decoration:none;
  font-weight:600;
  margin-left:8px;
}
.site-footer .footer-nav a:hover{color:var(--accent)}

/* responsive */
@media (max-width:640px){
  .container{padding:20px}
  .meta{flex-direction:column;align-items:flex-start;gap:10px}
  footer{text-align:left}
  /* Reducir tamaño del logo en pantallas pequeñas para no ocupar demasiado espacio */
  .site-header .logo{width:72px}
  .site-footer .footer-logo{width:48px}
  .top-logo .logo{width:200px}
} 

/* fuentes */
@font-face {
  font-family: 'Roxborough CF Bold';
  src: url('./fonts/RoxboroughCF-Bold.woff2') format('woff2'),
       url('./fonts/RoxboroughCF-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}