:root{
  --bg:#111111; --bg-2:#171717; --surface:#1b1b1b;
  --text:#F2F0EB; --muted:#CFC8B6;
  --gold:#C4A154; --gold-2:#E3C67A; --gold-3:#9D7F3C;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Lato", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 80% -20%, rgba(196,161,84,.08), transparent 60%), var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{width:min(1120px, 92%); margin-inline:auto}
h1,h2,h3,h4{
  font-family:"Playfair Display", Georgia, serif;
  letter-spacing:.2px;
  margin:0 0 .6rem 0;
}
h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.2}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem)}

p{margin:.25rem 0 1rem 0; color:var(--muted)}
.accent{color:var(--gold)}

.btn{display:inline-block; padding:.9rem 1.2rem; border-radius:14px; border:1px solid transparent; font-weight:700; text-decoration:none; color:#0d0d0d; background:linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 20px rgba(196,161,84,.25); transition: transform .1s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 28px rgba(196,161,84,.35) }
.btn-ghost{ background: transparent; color: var(--text); border:1px solid rgba(227,198,122,.4) }
.btn-ghost:hover{ background: rgba(227,198,122,.08) }
.btn-cta{ color:#111 }

/* Header */
.site-header{ position:sticky; top:0; z-index:40; background:rgba(17,17,17,.8); backdrop-filter: blur(6px); border-bottom:1px solid rgba(227,198,122,.08) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0 }
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit }
.brand img{ width:44px; height:44px; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)) }
.brand-title{ font-family:"Playfair Display", serif; font-weight:900; color:var(--gold); font-size:1rem; letter-spacing:1px }
.brand-subtitle{ font-size:.85rem; color:var(--muted) }
.nav{ display:flex; gap:1rem; align-items:center }
.nav a{ color:var(--muted); text-decoration:none; padding:.6rem .8rem; border-radius:10px }
.nav a:hover{ color:var(--text); background:rgba(227,198,122,.08) }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer }
.nav-toggle .bar{ display:block; width:22px; height:2px; background:var(--text); margin:5px 0 }

/* Hero */
.hero{
  position:relative;
  padding: clamp(3rem, 7vw, 7rem) 0;
  background:
    radial-gradient(800px 300px at 10% 10%, rgba(227,198,122,.06), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(227,198,122,.08), transparent 60%);
}
.hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center }
.lead{ font-size:1.05rem }
.hero-media{ display:flex; justify-content:center }
.hero-logo{ width:min(360px, 70%); height:auto; filter: drop-shadow(0 20px 60px rgba(0,0,0,.55)) }
.hero-overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.15) 60%, rgba(0,0,0,.25)) }

/* Sections */
.section{ padding: clamp(2.5rem, 6vw, 4.5rem) 0 }
.section-alt{ background: var(--bg-2); border-top:1px solid rgba(227,198,122,.07); border-bottom:1px solid rgba(227,198,122,.07) }
.section-lead{ color:var(--muted); margin-bottom:1rem }
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:2rem }

.card{ background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); border:1px solid rgba(227,198,122,.12); border-radius:18px; padding:1.2rem; box-shadow: var(--shadow) }
.card.quote p{ font-size:1.2rem; color:var(--text) }
.card.quote .cite{ color:var(--gold) }

.badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem }
.badge{ border:1px solid rgba(227,198,122,.35); color:#E3C67A; padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem }

/* Checklist */
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.checklist li{ padding-left:1.6rem; position:relative; color:var(--muted) }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:.05rem; color:var(--gold); font-weight:900 }

/* Areas */
.areas-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1rem }
.area-card{ padding:1rem; border-radius:16px; background:var(--surface); border:1px solid rgba(227,198,122,.12); box-shadow: var(--shadow) }
.area-card h3{ color:var(--text) }
.area-card p{ color:var(--muted) }
.area-ico{ font-size:1.6rem; margin-bottom:.4rem }

/* Reasons */
.reasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1rem }
.reason{ background:var(--surface); border:1px solid rgba(227, 198, 122, 0.12); border-radius:16px; padding:1rem; box-shadow: var(--shadow) }
.reason h4{ color:var(--gold) }
.main-logo {
  width: 420px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 6px;
  filter: drop-shadow(0 0 20px rgba(227, 198, 122, 0.3));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.main-logo:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 0 30px rgba(227, 198, 122, 0.6));
}

/* Contacto */
.contact-form{ display:grid; gap:.75rem }
.field{ display:grid; gap:.35rem }
label{ color:var(--text); font-weight:700 }
input, textarea{
  width:100%; border-radius:12px; border:1px solid rgba(227,198,122,.18);
  padding:.8rem .9rem; background:#121212; color:var(--text);
  outline-color: var(--gold-2);
}
input::placeholder, textarea::placeholder{ color:#7f7a6e }
.error{ color:#ffb3b3; height:1rem; font-size:.85rem }
.form-actions{ display:flex; gap:.6rem; align-items:center }

.contact-card .contact-list{ list-style:none; padding:0; margin:0 }
.contact-card .contact-list li{ margin:.4rem 0; color:var(--muted) }

/* CTA bottom */
.cta-bottom{ padding:2rem 0; background: linear-gradient(180deg, rgba(196,161,84,.08), rgba(0,0,0,0)); border-top:1px solid rgba(227,198,122,.1) }
.cta-inner{ display:flex; align-items:center; justify-content:space-between }
.cta-inner h3{ color:var(--gold) }

/* Footer */
.site-footer{ border-top:1px solid rgba(227,198,122,.12); padding:1.4rem 0; background:#0E0E0E }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.footer-brand{ display:flex; gap:.6rem; align-items:center }
.footer-brand img{ width:36px; height:36px }
.footer-title{ font-weight:900; color:var(--gold); letter-spacing:1px }
.footer-sub{ color:var(--muted); font-size:.9rem }
.footer-meta{ color:#a8a08c; font-size:.9rem }

/* Responsive */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; text-align:center }
  .hero-media{ order:-1 }
  .grid.two{ grid-template-columns:1fr }
  .areas-grid{ grid-template-columns:repeat(2,1fr) }
  .reasons{ grid-template-columns:repeat(2,1fr) }
  .cta-inner{ flex-direction:column; gap:.8rem }
  .nav{ position:absolute; right:.9rem; top:64px; display:none; flex-direction:column; background:#0f0f0f; border:1px solid rgba(227,198,122,.12); padding:.6rem; border-radius:12px; width:calc(100% - 1.8rem) }
  .nav.open{ display:flex }
  .nav-toggle{ display:block }
}
@media (max-width: 560px){
  .areas-grid{ grid-template-columns:1fr }
  .reasons{ grid-template-columns:1fr }
}
/* tamaño fijo de los íconos en la tarjeta de contacto */
.contact-card .contact-list svg{ width:30px; height:40px; flex:0 0 20px; }
/* ==== Footer tidy ==== */
.footer-inner{ display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.footer-brand{ display:flex; align-items:center; gap:.75rem; }

/* logo chiquito, nítido, sin brillo ni bordes raros */
.footer-brand img{
  width: 32px;           /* probá 28–36 si querés */
  height: 32px;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
  border-radius: 4px;    /* 0 si lo querés cuadrado */
  opacity: .95;          /* sutil para que no compita con el texto */
}

/* jerarquía de texto */
.footer-title{
  color: var(--gold);
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.1;
  margin: 0;
}
.footer-sub{
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.1;
    margin-top: .15rem;
  }

/* 🔥 FORZAR tamaño del título en celulares */
@media (max-width: 600px) {
  #titulo-hero {
    font-size: 28px !important; /* más chico para que no rompa líneas */
    line-height: 1.15 !important;
    text-align: center !important;
    word-break: keep-all !important;
    white-space: normal !important;
  }

  .lead {
    font-size: 16px !important;
  }

  .hero-fixed {
    flex-direction: column !important; /* apila texto e imagen */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 25px !important;
  }

  .hero-media img {
    max-width: 250px !important; /* mantiene la proporción del logo */
    height: auto !important;
  }
}