@font-face {
  font-family: 'Roslindale';
  src: url('fuentes/RoslindaleVariable-DisplayCondensedBold.eot');
  src: url('fuentes/RoslindaleVariable-DisplayCondensedBold.eot?#iefix') format('embedded-opentype'), url('fuentes/RoslindaleVariable-DisplayCondensedBold.woff2') format('woff2'), url('fuentes/RoslindaleVariable-DisplayCondensedBold.woff') format('woff'), url('fuentes/RoslindaleVariable-DisplayCondensedBold.ttf') format('truetype'), url('fuentes/RoslindaleVariable-DisplayCondensedBold.svg#RoslindaleVariable-DisplayCondensedBold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono Italic';
  src: url('fuentes/RobotoMono-Italic.eot');
  src: url('fuentes/RobotoMono-Italic.eot?#iefix') format('embedded-opentype'), url('fuentes/RobotoMono-Italic.woff2') format('woff2'), url('fuentes/RobotoMono-Italic.woff') format('woff'), url('fuentes/RobotoMono-Italic.ttf') format('truetype'), url('fuentes/RobotoMono-Italic.svg#RobotoMono-Italic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('fuentes/RobotoMono-Regular.eot');
  src: url('fuentes/RobotoMono-Regular.eot?#iefix') format('embedded-opentype'), url('fuentes/RobotoMono-Regular.woff2') format('woff2'), url('fuentes/RobotoMono-Regular.woff') format('woff'), url('fuentes/RobotoMono-Regular.ttf') format('truetype'), url('fuentes/RobotoMono-Regular.svg#RobotoMono-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'English Script';
  src: url('fuentes/EnglishScript.eot');
  src: url('fuentes/EnglishScript.eot?#iefix') format('embedded-opentype'), url('fuentes/EnglishScript.woff2') format('woff2'), url('fuentes/EnglishScript.woff') format('woff'), url('fuentes/EnglishScript.ttf') format('truetype'), url('fuentes/EnglishScript.svg#EnglishScript') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
h1 {
  font-family: 'Roboto Mono';
  font-weight: bold;
  font-style: normal;
  text-align: right;
  color: #173054;
  padding-bottom: 10px;
  font-size: 3em;
}
p {
  font-family: 'Roboto Mono';
  font-weight: normal;
  font-style: normal;
  color: #173054;
  font-size: 1.2em;
}
h2 {
  font-family: 'Roboto Mono';
  font-weight: normal;
  font-style: normal;
  color: #173054;
  padding: 50px 0px 5px 0px;
  font-size: 2em;
}
h5 {
  font-family: 'Roboto Mono Italic';
  font-weight: normal;
  font-style: italic;
  color: #173054;
  padding: 20px 0px 5px 0px;
  font-size: 0.8em;
  width: 100%;
}
h6 {
  text-align: center;
  font-size: 10px;
  margin-top: 10px;
  color: #0C375A;
  padding: 100px 0 20px 0;
}
u {
  text-decoration: underline;
  text-decoration-color: #173054;
}
:root {
  /* Si tienes un header fijo, pon su alto aquí (ej. 80px) */
  --header-h: 0px;
}
span {
  position: relative;
  font-family: 'Roboto Mono';
  font-weight: normal;
  font-style: normal;
  font-weight: 300;
  color: #173054;
  font-size: 0.8em;
}
/* Pantalla completa */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  /* svh = alto seguro en móviles */
  display: grid;
  place-items: center;
  padding: 0px;
  margin-top: -2%;
  background: #fff;
  /* o color/fondo que necesites */
  overflow: hidden;
}
/* Imagen centrada y responsiva */
.hero__img {
  max-width: clamp(0px, 50vmin, 720px);
  /* ajusta a tu gusto */
  max-height: 60svh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media screen and (max-width: 720px) {
  .hero {
    height: 100vh !important;
  }
  .hero img {
    width: 100%;
    margin-top: -10vh;
  }
  .hero button {
    margin-top: -50vh;
  }
}
/* Indicador abajo */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 100px;
  translate: -50% 0;
  border: 0;
  background: rgba(23, 48, 84, 0.3);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #173054;
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background-color 0.2s ease;
  /* animación sutil para llamar la atención */
  animation: bounce 1.6s ease-in-out infinite;
}
.scroll-hint:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.12);
}
.scroll-hint:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}
/* Botón Reserva abajo a la derecha */
.btn-reserva {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #1D3455;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 2em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.25s, transform 0.25s;
  font-family: 'Roslindale';
}
.btn-reserva:hover {
  background: rgba(23, 48, 84, 0.7);
  transform: translateY(-2px);
}
/* Estilos demo para la segunda pantalla */
.content {
  min-height: 100svh;
  padding: 6rem 1.25rem;
  background: #ffffff;
}
.contenido {
  width: min(1000px, 90%);
  margin: 0 auto;
}
.medio {
  width: 46%;
  float: left;
  padding: 0px 2%;
}
.logobajo {
  float: right;
  margin-top: -100px;
  width: 10%;
  min-width: 100px;
  margin-right: -10%;
}
#covemanager {
  display: block;
  width: 96%;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
  min-height: 100vh;
}
.vinoscontenido p {
  margin: 5px 0px 0px 0px;
}
.vinoscontenido span {
  padding-bottom: 20px !important;
}
.vinoscontenido .clear {
  height: 10px;
}