/* ===================== Vet Nova Styles ===================== */
/* Paleta desde el logo + variables de header */
:root{
  --primary:#7a3b1b;
  --primary-700:#5b2a14;
  --accent:#c06a27;
  --bg:#fff8f3;
  --ink:#2e1f1a;
  --muted:#8b735e;
  --white:#ffffff;

  /* Header / logo (ajusta si quieres más chico) */
  --logo-size: clamp(90px, 9vw, 128px);   /* tamaño del logo */
  --pleca-h:  clamp(34px, 5.5vh, 44px);   /* altura de la pleca (compacta) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Arial,'Noto Sans',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
}

/* Utils */
.container{max-width:1100px;margin-inline:auto;padding:0 20px}
.btn{
  display:inline-block;border:none;padding:12px 18px;border-radius:14px;
  background:var(--primary);color:#fff;font-weight:700;text-decoration:none;
  box-shadow:0 8px 18px rgba(122,59,27,.25);transition:transform .15s ease,opacity .2s;
}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn.outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.tag{font-size:.85rem;color:var(--white);background:var(--accent);padding:4px 10px;border-radius:999px}

/* ===================== Header / Nav ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-700) 100%);
  color:#fff; border:0;
  /* deja medio logo fuera para el efecto 50/50 */
  margin-bottom: calc(var(--logo-size) / 2);
}

/* Grid: [burger] [marca centrada] [nav a la derecha] */
.navbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* izq | centro | der */
  align-items:center;
  min-height:var(--pleca-h);
  gap:16px;
  position:relative; /* referencia para el menú móvil */
}

/* Marca (logo + textos) centrada */
.brand{
  grid-column:2;
  justify-self:center;
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit;
}
.brand:link,.brand:visited{ text-decoration:none; color:inherit; }

.logo-badge{
  width:var(--logo-size); height:var(--logo-size);
  aspect-ratio:1/1;                       /* evita deformación */
  background:#fff; border:4px solid var(--primary); border-radius:24px;
  box-shadow:0 12px 30px rgba(90,48,26,.25);
  transform:translateY(calc(var(--logo-size) / 2)); /* 50% pisa el body */
  overflow:hidden;
}
.logo-badge img{ width:100%; height:100%; object-fit:contain; padding:10px; display:block; }

.brand-text{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.1; }
.brand .title{ font-weight:900; font-size:clamp(1.6rem,3.2vw,2.4rem); letter-spacing:.4px; color:#fff; }
.brand .subtitle{ color:#f6eee7; font-size:clamp(.9rem,1.4vw,1.1rem); }

/* Nav a la derecha */
#nav{ grid-column:3; justify-self:end; }
.nav-links{ display:flex; gap:18px; align-items:center; }
.nav-links a{ color:#fff; text-decoration:none; font-weight:600; }
.nav-cta{ margin-left:10px }

/* Burger (solo móvil) anclada arriba-izquierda */
.burger{
  grid-column:1; justify-self:start;
  display:none; background:transparent; border:0; line-height:1; cursor:pointer;
}
.burger span,.burger::before,.burger::after{
  display:block;width:26px;height:3px;background:#fff;border-radius:6px;transition:.25s
}
.burger::before,.burger::after{content:"";} .burger::before{transform:translateY(-7px)}
.burger::after{transform:translateY(7px)}
#nav[aria-expanded="false"]{display:none}

/* Menú móvil */
@media (max-width:900px){
  :root{
    --logo-size: clamp(72px, 14vw, 100px);  /* logo un poco menor en móvil */
    --pleca-h: clamp(30px, 6.5vh, 38px);    /* pleca aún más baja en móvil */
  }

  .burger{
    display:inline-block;
    position:absolute;
    left:16px;
    top:calc(var(--pleca-h) / 2);
    transform:translateY(-50%);
    z-index:10;
  }

  #nav{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid #eee; padding:12px 20px;
  }
  .nav-links{ flex-direction:column; align-items:flex-start; gap:12px; }
  #nav .nav-links a{ color:var(--ink); }
  #nav .btn{ background:var(--primary); color:#fff; }
}

/* ===================== Hero ===================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(192,106,39,.12), transparent 60%),
    radial-gradient(900px 400px at 0% 0%, rgba(122,59,27,.10), transparent 50%),
    #fff;
  padding:64px 0 28px; border-bottom:1px solid #edd9c9;
}
.hero .content{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.hero h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1;margin:0 0 12px;color:var(--primary-700)}
.hero p{font-size:1.1rem;color:#5a463a;margin:0 0 20px}
.hero .card{
  background:#fff;border:1px solid #f0e7de;border-radius:18px;padding:18px;
  box-shadow:0 10px 25px rgba(90,48,26,.08);
}
.hero .stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.stat{background:#fff;border:1px dashed #e8ded5;padding:10px 14px;border-radius:12px;color:#6b5646}
@media (max-width:900px){.hero .content{grid-template-columns:1fr}}

/* ===================== Sections ===================== */
.section{padding:56px 0}
.section h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 10px;color:var(--primary)}
.section p.lead{color:#604c3f;margin:6px 0 24px}

/* Cards grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{
  background:#fff;border:1px solid #f0e7de;padding:18px;border-radius:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.04);
}
.card h3{margin:0 0 6px;color:var(--primary-700)}
.card p{margin:0;color:#6b5646}

/* Services */
.service{display:flex;gap:12px;align-items:flex-start}
.service .icon{font-size:26px}

/* ===================== Forms ===================== */
.input, textarea{
  width:100%;padding:12px;border:1px solid #e8ded5;border-radius:12px;background:#fff;
  font:inherit;color:inherit;outline:0;transition:border-color .2s
}
.input:focus, textarea:focus{border-color:var(--accent)}
label{font-weight:700;color:#5a463a}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.9rem;color:#6b5646}
.alert{padding:12px 14px;border-radius:12px;margin:12px 0}
.alert.success{background:#e9fbef;border:1px solid #b2f0c1;color:#1e6b39}
.alert.error{background:#fff1f1;border:1px solid #ffd4d4;color:#8a1e1e}

/* ===================== Footer ===================== */
footer{background:#28150c;color:#f6eee7}
footer a{color:#f6eee7}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;padding:26px 0}
.footer-bottom{border-top:1px solid #3b2314;color:#cdb8a7;padding:12px 0;font-size:.9rem}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr}}

/* Map */
.map-wrap{border-radius:16px;overflow:hidden;border:1px solid #f0e7de}