html, body {
  margin: 0;
  padding: 0;
 
  background: #ffffff;
  color: #180606;
}

.seccion-bienvenida{
  position:relative;  /* Permite que los elementos internos con position:absolute
                       se posicionen tomando esta sección como referencia */
  overflow:hidden; /* Oculta cualquier parte de la imagen o elementos que se salgan del contenedor */
  min-height:420px; /* Altura mínima de la sección bienvenida */
  padding:80px 20px; /* Espacio interno arriba/abajo (80px) y a los lados (20px) */
  display:flex; /* Activa flexbox para organizar el contenido interno */
  flex-direction:column; /* Ordena los elementos en columna */
  justify-content:center; /* Centra verticalmente los elementos dentro del contenedor */
}

/* ==============================
   IMAGEN DE FONDO
================================ */

.bienvenida-fondo{
  position:absolute; /* Permite que la imagen se coloque libremente dentro de la sección */
  inset:0;
  /* Equivale a:
     top:0;
     left:0;
     right:0;
     bottom:0;
     Hace que la capa ocupe todo el contenedor */
  z-index:0; /* Coloca esta capa detrás de todo el contenido */
}

.bienvenida-fondo img{

  width:100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
  height:100%; /* Hace que la imagen ocupe toda la altura */
  object-fit:cover; /* La imagen cubre el espacio sin deformarse */
  object-position:center 35%; /* Ajusta el encuadre de la imagen
     center = centrado horizontal
     10% = desplazamiento vertical */
}

/* ==============================
   FILTRO OSCURO SOBRE IMAGEN
================================ */

.seccion-bienvenida::before{
  content:""; /* Crea un pseudo-elemento invisible */
  position:absolute;
  inset:0;  /* Hace que cubra toda la sección */
  background:rgba(0, 0, 0, 0.479);  /* Capa negra semitransparente
     sirve para oscurecer la imagen de fondo */
  z-index:1;
  /* Se coloca sobre la imagen pero debajo del contenido */
}


/* ==============================
   CONTENIDO SOBRE EL FILTRO
================================ */

.seccion-bienvenida .contenido{

  position:relative;
  z-index:2;
  /* Asegura que el contenido esté encima del overlay oscuro */
}




/* ==============================
   TEXTO DE BIENVENIDA
================================ */



/* ==============================
   SEGUNDO BLOQUE .bienvenida-texto
   (sobrescribe parte del anterior)
================================ */

.bienvenida-texto{
 position:absolute; /* Permite posicionarlo libremente dentro de la sección */
 top:57%;
 left:50%;
 transform:translate(-50%, -50%); /* Centrado horizontal y vertical */
 max-width:350px; /* Reduce el ancho del texto respecto al bloque anterior */

  z-index:2; /* Se coloca sobre la capa oscura */
  font-size:25px;
  font-family:'Lancelot';  /* Tipografía decorativa */
 
  text-align:center;
  margin:auto;  /* Centra el bloque dentro del contenedor */
  color:rgb(255 225 140);  /* Color dorado claro */
  text-shadow:0 2px 6px rgb(0 0 0); /* Sombra negra para mejorar contraste sobre la imagen */
  animation: aparecerSuave 3s ease forwards;

}


/* ==============================
   LOGO FLOTANTE HERO
================================ */

.logo-hero{

  position:absolute;

  top:-40px;
  /* Hace que el logo sobresalga hacia arriba */

  left:80%;
  /* Posición horizontal dentro de la sección */

  transform:translateX(-50%);
  /* Ajusta centrado relativo */

  z-index:3;
  /* Encima del texto y del overlay */
  
}

.logo-hero img{

  height:160px;
  /* Tamaño del logo */

  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
  /* Sombra suave para destacarlo sobre el fondo */
}


/* ==============================
   SEGUNDO BLOQUE DEL TÍTULO
   (SOBRESCRIBE EL PRIMERO)
================================ */

.seccion-bienvenida .h12{

  position:absolute;

  top:15%;
  /* Nueva posición vertical del título */

  left:50%;

  transform:translateX(-50%);

  width:100%;

  text-align:center;

  z-index:2;

  color:#ffe8a3;
  /* Color dorado claro */

  font-size:60px;
  /* Tamaño grande para el título principal */

  text-shadow:
    0 2px 6px rgba(0,0,0,0.6),
    0 0 12px rgba(255,232,163,0.3);
  /* Sombra + brillo suave */
  animation: aparecerSuave 1s ease forwards;
}


/* ==============================
   BOTÓN IR A LA TIENDA
================================ */

.boton-tienda{

  position:absolute;

  top:75%;
  /* Posición vertical dentro de la sección */

  left:50%;

  transform:translateX(-50%);
  /* Centra el botón */

  z-index:3;

    animation: aparecerSuave 5s ease forwards;
}

.boton-tienda img{

  width:340px;
  /* Tamaño de la imagen del botón */

  transition:transform 0.3s ease;
  /* Animación suave al hacer hover */
  z-index: 8;
   
  
}

.boton-tienda img:hover{

  transform:scale(1.05);
  /* Agranda ligeramente el botón al pasar el mouse */
}
.h12 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Antonio';
    font-size: 28px;
    font-weight: bold;
    color: #73134cfa;
    /* margin: 10px 0; */
    text-transform: uppercase;
}
.h12::before,
.h12::after {
  content: "";
  flex: 1;
  border-bottom: 2px solid #ccc; /* grosor y color de la rayita */
  margin: 0 12px;                /* espacio entre texto y línea */
}