/* ===== TESTAL — estilos del mockup ===== */
:root{
  --crema: #f3e6c9;
  --masa: #e8c977;
  --barro: #b5502f;
  --barro-oscuro: #8a3a20;
  --hoja: #5c7a4c;
  --fondo: #201409;
  --fondo-claro: #fdf8ee;
  --texto: #2b1c10;
  --texto-claro: #f6ecd8;
  --fuente-titulo: "Fraunces", serif;
  --fuente-texto: "DM Sans", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: var(--fondo-claro);
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }

.contenedor{ max-width:1180px; margin:0 auto; padding:0 24px; }

.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:none;
  cursor:pointer;
}
.btn-primario{ background: var(--barro); color:var(--texto-claro); }
.btn-primario:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(181,80,47,.35); background:var(--barro-oscuro); }
.btn-secundario{ background:transparent; color:var(--texto-claro); border:1.5px solid rgba(246,236,216,.6); }
.btn-secundario:hover{ background:rgba(246,236,216,.12); transform:translateY(-2px); }
.btn-cta{ background:var(--masa); color:var(--texto); padding:11px 22px; }
.btn-cta:hover{ background:var(--barro); color:var(--texto-claro); }
.btn-ancho{ width:100%; text-align:center; margin-top:8px; }

/* ===== NAVBAR ===== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(32,20,9,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(232,201,119,.15);
  transition: background .3s ease;
}
.navbar-interior{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.navbar-logo{ font-family:var(--fuente-titulo); font-size:1.5rem; font-weight:700; color:var(--masa); letter-spacing:1px; }
.navbar-links{ display:flex; gap:32px; }
.navbar-links a{ color:var(--texto-claro); font-size:.92rem; font-weight:500; opacity:.85; transition:opacity .2s ease; }
.navbar-links a:hover{ opacity:1; color:var(--masa); }
.navbar-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.navbar-toggle span{ width:24px; height:2px; background:var(--texto-claro); }

/* ===== HERO ===== */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(32,20,9,.55) 0%, rgba(32,20,9,.75) 55%, rgba(32,20,9,.95) 100%);
}
.hero-contenido{ position:relative; z-index:2; padding-top:110px; max-width:640px; animation: aparecer 1s ease both; }
.hero-chip{
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:rgba(232,201,119,.15); border:1px solid rgba(232,201,119,.4);
  color:var(--masa); font-size:.82rem; font-weight:700; letter-spacing:.5px;
  margin-bottom:22px;
}
.hero-titulo{
  font-family:var(--fuente-titulo); font-weight:700; color:var(--texto-claro);
  font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.05; margin-bottom:22px;
}
.hero-texto{ color:rgba(246,236,216,.88); font-size:1.08rem; line-height:1.6; margin-bottom:32px; max-width:520px; }
.hero-botones{ display:flex; gap:16px; flex-wrap:wrap; }

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

/* ===== SECCIONES GENERALES ===== */
section{ padding:100px 0; }
.seccion-eyebrow{ color:var(--barro); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:.78rem; margin-bottom:10px; }
.seccion-titulo{ font-family:var(--fuente-titulo); font-size:clamp(1.9rem, 3.6vw, 2.7rem); font-weight:600; margin-bottom:48px; max-width:640px; }

/* ===== ESPECIALIDADES ===== */
.especialidades{ background:var(--fondo-claro); }
.grid-especialidades{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.card-especialidad{
  background:#fff; border:1px solid rgba(43,28,16,.08); border-radius:18px;
  padding:32px 26px; transition: transform .25s ease, box-shadow .25s ease;
}
.card-especialidad:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(43,28,16,.1); }
.icono-especialidad{
  width:52px; height:52px; border-radius:14px; background:var(--crema);
  display:flex; align-items:center; justify-content:center; color:var(--barro); margin-bottom:18px;
}
.icono-especialidad svg{ width:26px; height:26px; }
.card-especialidad h3{ font-family:var(--fuente-titulo); font-size:1.15rem; margin-bottom:10px; }
.card-especialidad p{ font-size:.93rem; color:#5a4a38; line-height:1.55; }

/* ===== NOSOTROS ===== */
.nosotros{ background:var(--fondo); color:var(--texto-claro); }
.nosotros .seccion-titulo{ color:var(--texto-claro); }
.nosotros-parrafo{ color:rgba(246,236,216,.82); font-size:1.05rem; line-height:1.7; max-width:680px; margin-bottom:48px; }
.diferenciadores{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.diferenciador{ display:flex; gap:16px; }
.diferenciador-numero{ font-family:var(--fuente-titulo); color:var(--masa); font-size:1.4rem; font-weight:700; }
.diferenciador h4{ font-size:1.02rem; margin-bottom:6px; }
.diferenciador p{ font-size:.88rem; color:rgba(246,236,216,.7); line-height:1.5; }

/* ===== GALERÍA ===== */
.galeria{ background:var(--fondo-claro); }
.grid-galeria{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.grid-galeria img{
  width:100%; height:260px; object-fit:cover; border-radius:16px;
  transition: transform .4s ease, filter .4s ease;
}
.grid-galeria img:hover{ transform:scale(1.03); filter:saturate(1.1); }

/* ===== TESTIMONIOS ===== */
.testimonios{ background:var(--crema); }
.grid-testimonios{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.card-testimonio{ background:#fff; border-radius:18px; padding:30px 26px; }
.estrellas{ color:var(--barro); letter-spacing:2px; margin-bottom:14px; font-size:1rem; }
.card-testimonio p{ font-size:.95rem; line-height:1.6; color:#4a3a28; margin-bottom:18px; font-style:italic; }
.testimonio-autor{ font-weight:700; font-size:.85rem; color:var(--barro-oscuro); }

/* ===== CONTACTO ===== */
.contacto{ background:var(--fondo); color:var(--texto-claro); }
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contacto .seccion-titulo{ color:var(--texto-claro); }
.dato-contacto{ display:flex; gap:16px; margin-bottom:26px; align-items:flex-start; }
.dato-contacto svg{ width:24px; height:24px; color:var(--masa); flex-shrink:0; margin-top:2px; }
.dato-contacto h4{ font-size:.95rem; margin-bottom:4px; }
.dato-contacto p{ font-size:.9rem; color:rgba(246,236,216,.75); }
.contacto-mapa{ height:420px; border-radius:18px; overflow:hidden; border:1px solid rgba(232,201,119,.2); }

/* ===== FOOTER ===== */
.footer{ background:#150c05; color:rgba(246,236,216,.7); padding:56px 0 24px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:32px; border-bottom:1px solid rgba(246,236,216,.1); }
.footer-logo{ font-family:var(--fuente-titulo); font-size:1.3rem; color:var(--masa); font-weight:700; }
.footer-tagline{ font-size:.85rem; margin-top:6px; }
.footer-sucursales{ text-align:right; font-size:.85rem; }
.footer-sucursales a{ color:var(--masa); }
.footer-nota{ text-align:center; padding-top:22px; font-size:.78rem; opacity:.6; }

/* ===== RESPONSIVO ===== */
@media (max-width: 900px){
  .grid-especialidades, .grid-testimonios{ grid-template-columns:repeat(2, 1fr); }
  .diferenciadores{ grid-template-columns:1fr; gap:22px; }
  .contacto-grid{ grid-template-columns:1fr; }
  .grid-galeria{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 640px){
  .navbar-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:rgba(32,20,9,.97); padding:20px 24px; gap:18px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition: all .25s ease; border-bottom:1px solid rgba(232,201,119,.15);
  }
  .navbar-links.abierto{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .navbar-toggle{ display:flex; }
  .btn-cta{ display:none; }
  .grid-especialidades, .grid-testimonios, .grid-galeria{ grid-template-columns:1fr; }
  .footer-grid{ flex-direction:column; text-align:center; }
  .footer-sucursales{ text-align:center; }
  section{ padding:70px 0; }
  .contacto-mapa{ height:280px; }
}
