/* ================================
   RESET SOLO PARA PÁGINAS INTERNAS
================================ */

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Altura real móvil */
body{
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* móviles modernos */
}

/* ================================
   COMPENSACIÓN HEADER FIJO
================================ */

/* Compensar header fijo */
main.page{
  margin-top: 55px;
}

/* Si en móvil el header es más chico */
@media (max-width: 768px){
  main{
    margin-top: 80px;
  }
}

/* ================================
   NUEVA IDENTIDAD VISUAL
================================ */

body{
  background: #5A0F2D; /* vino */
}

/* Main blanco tipo “tarjeta grande” */
main.page{
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 22px 14px 100px;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

@media (max-width: 768px){
  main.page{
    min-height: calc(100vh - 70px);
    min-height: calc(100dvh - 70px);
  }
}

@media (min-width: 900px){
  main.page{
    padding: 26px 18px 120px;
  }
}

/* Tipografía base */
.page{
  color: #2B2B2B;
  max-width: 1150px;
  margin: 0 auto;
}

/* Titulares */
.page h1{
  margin: 0;
  font-weight: 700;
  letter-spacing: .6px;
}

.page h2{
  margin: 0 0 10px;
  font-weight: 800;
  color: #7A1639;
}

.page h3{
  margin: 0 0 8px;
  font-weight: 800;
  color: #5A0F2D;
}
/* =========================
   HEADER MÁS OSCURO
========================= */

.topbar{
  background: #3f0b1f; /* vino más oscuro */
  box-shadow: 0 6px 18px rgba(0,0,0,.50);
}
/* =========================
   OFFSET PARA ANCLAS (header fijo)
========================= */

/* Ajuste para cualquier sección con id */
#tipos, #servicios, #fotos, #comentarios, #contacto, #destacados{
  scroll-margin-top: 90px; /* 120px del main + margen extra */
}

/* En móvil */
@media (max-width: 768px){
  #tipos, #servicios, #fotos, #comentarios, #contacto, #destacados{
    scroll-margin-top: 90px;
  }
}