.animater {
  /*font-family: 'Cinzel Decorative';*/
  font-family: Roboto;
  font-size: 3.2em;
  letter-spacing: -2px;
  font-weight: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-transform: capitalize;
}

/* El espacio entre "HOWARD" y "JHONSON" */
.animater .space {
  width: 1.5rem; 
}

.animater span {
  display: inline-block;
  opacity: 0;
  transform: scale(1.1) rotate(-18deg); /* Giro leve inicial */
  animation: aparecerLetra 0.5s ease forwards;
}

@keyframes aparecerLetra {
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Retrasos automáticos para 13 caracteres */
.animater span:nth-child(1)  { animation-delay: 3.1s; }
.animater span:nth-child(2)  { animation-delay: 3.2s; }
.animater span:nth-child(3)  { animation-delay: 3.3s; }
.animater span:nth-child(4)  { animation-delay: 3.4s; }
.animater span:nth-child(5)  { animation-delay: 3.5s; }
.animater span:nth-child(6)  { animation-delay: 3.6s; }
/* El 7 es el espacio */
.animater span:nth-child(8)  { animation-delay: 3.7s; }
.animater span:nth-child(9)  { animation-delay: 3.8s; }
.animater span:nth-child(10) { animation-delay: 3.9s; }
.animater span:nth-child(11) { animation-delay: 4.0s; }
.animater span:nth-child(12) { animation-delay: 4.1s; }
.animater span:nth-child(13) { animation-delay: 4.2s; }
.animater span:nth-child(14) { animation-delay: 4.3s; }

/* sub titulo */

.subsub {
  opacity: 0; /* Empieza invisible */
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  
  /* Definición de la animación */
  animation: aparecerSubtitulo 0.8s ease-out forwards;
  
  /* El retraso de 4 segundos que pediste */
  animation-delay: 4s;
}

@keyframes aparecerSubtitulo {
  from {
    opacity: 0;
    transform: translateY(10px); /* Un pequeño efecto de subida */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*************************************/
/*************************************/
/*************************************/

        :root {
            --primary-color: #2c3e50; /* Azul noche elegante */
            --accent-color: #b59410;  /* Dorado sutil */
            --bg-soft: #f9f7f2;       /* Crema muy suave */
            --text-main: #4a4a4a;
            --white: #ffffff;
        }

        .hotel-card {
            max-width: 100%;
            background: var(--white);
            padding: 60px;
            border-radius: 2px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.05);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Detalle decorativo lateral */
        .hotel-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--accent-color);
        }

        .tagline {
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.75rem;
            color: var(--accent-color);
            margin-bottom: 20px;
            display: block;
            font-weight: 700;
        }

        h1.hotelcardH1 {
            font-family: Montserrat;
            font-weight: 100;
            font-size: 3.2rem;
            color: var(--primary-color);
            margin-bottom: 30px;
            line-height: 1.2;
            font-weight: 400;
        }

        h1.hotelcardH1 span {
            font-style: italic;
            color: var(--accent-color);
        }

        .description {
        	font-family: Montserrat;
            font-size: 2rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto 40px auto;
            font-weight: 300;
        }

        .divider {
            width: 50px;
            height: 1px;
            background: var(--accent-color);
            margin: 30px auto;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 40px;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
            transition: all 0.4s ease;
        }

        .cta-button:hover {
            background: var(--primary-color);
            color: var(--white);
            transform: translateY(-3px);
        }

        /* Animación de entrada */
        .hotel-card {
            animation: fadeIn 1.5s ease-out;
        }

        .loogosFooter {margin-top:50px;}
        .logoFinalista {width: 20%; display: block; margin: 0 auto;}


.botPromo {background: #00486c;
    color: #fff !important;
    padding: 3px 20px;
    border-radius: 5px;}

.botPromo:hover {background: #c74e46;}

.leyendaFinal {font-size: 1.3em;}

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

        @media (max-width: 600px) {
            .hotel-card { padding: 30px; }
            h1 { font-size: 1.8rem; }
            .book a {font-size: 12px; }
            .logoFinalista {width: 35% !important;}
            .loogosFooter {margin-top:50px;}
            .toggle-menu {display:none;}
            .section-header p {display: block !important;}
        }

        @media only screen and (max-width: 768px) {
            .botPromo {background: #00486c;
            color: #fff !important;
            padding: 3px 20px;
            border-radius: 5px;}
            .botPromo:hover {background: #c74e46;}
            .leyendaFinal {display: block;
            font-size: 1.5em;}
            .hotelCard {border:2px solid red;}
            .section-header p {display: block !important;}
        }