/* Apartamentos Palasiet - Stylesheet
   Generated from inline CSS
   Date: 2026-07-06
*/

html {
      scroll-behavior: smooth;
    }
    /* Scroll-to-top button */
    .scroll-top {
      position: fixed;
      left: 20px;
      bottom: 20px;
      z-index: 10000;
    }
    .scroll-top a {
      display: inline-block;
      font-size: 2rem;            /* tamaño del emoji */
      line-height: 1;
      background: rgba(0,51,102,0.8);
      color: #fff;
      padding: 10px;
      border-radius: 50%;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
    }
    .scroll-top a:hover {
      background: #00cc66;
      transform: translateY(-2px);
    }
    @keyframes parpadeoColor {
      0%, 100% { background-color: #00cc66; }
      50%      { background-color: #003366; }
    }
    .label.blink {
      animation: parpadeoColor 2s infinite;
    }
    html, body {
      overflow-x: hidden;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family: 'Montserrat', sans-serif; color:#333; line-height:1.5; }
    a { text-decoration:none; color:inherit; }
    img { max-width:100%; display:block; }
    /* Navbar */
    .navbar { position: fixed !important; top:0; left:0; right:0; width:100%; background:#fff; z-index:10000; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
    .navbar .container { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px; }
    .navbar .logo { font-size:1.5rem; font-weight:bold; color:#003366; }
    .navbar .logo span { color:#00cc66; }
    .navbar .menu { display:flex; gap:15px; }
    .navbar .menu a { font-family: 'Montserrat', sans-serif; font-weight: 500; }
    .navbar .toggle { display:none; font-size:1.5rem; cursor:pointer; }
    @media(max-width:768px){
      .navbar .menu { display:none; position:absolute; top:60px; right:0; background:#fff; flex-direction:column; width:200px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
      .navbar .toggle { display:block; }
    }
    /* Hero */
    .hero {
      background: #003366;
      color: #fff;
      padding: 60px 20px;
      width: 100%;
      margin: 0;
      max-width: none;
    }
    .hero .container {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      justify-content: space-between;
      align-items: center;
    }
    .hero .intro { flex:2 1 400px; max-width:750px; padding:0 20px; text-align: center; }
    .hero h1 { font-size:2.5rem; margin-bottom:20px; }
    .hero p { margin-bottom:20px; }
    .btn { display:inline-block; padding:10px 20px; border-radius:4px; font-weight:bold; }
    .btn-primary { background:#00cc66; color:#000; }
    .btn-whats { background:#25d366; color:#000; }
    /* Form renovado */
    .hero .form { flex:1 1 250px; max-width: 400px; background:#fff; color:#333; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); margin:0 20px; }
    .hero .form h2 { margin-bottom:20px; color:#003366; text-align:center; }
    .hero .form .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
    .hero .form .field { display:flex; flex-direction:column; position:relative; }
    .hero .form .field.full { grid-column:1/-1; }
    .hero .form label { font-size:0.85rem; margin-bottom:5px; }
    .hero .form input, .hero .form select { background:#f7f7f7; border:1px solid #ddd; border-radius:4px; padding:10px; font-size:0.95rem; }
    .hero .form .icon-cal { position:absolute; right:10px; top:38px; font-size:1.1rem; color:#666; pointer-events:none; }
    .hero .form .checkbox { display:flex; align-items:flex-start; gap:10px; grid-column:1/-1; }
    .hero .form .checkbox input { margin-top:4px; }
    .hero .form .checkbox .text { display:flex; flex-direction:column; font-size:0.9rem; color:#333; }
    .hero .form .btn-submit { grid-column:1/-1; background:#00cc66; color:#fff; border:none; padding:12px; font-size:1rem; cursor:pointer; border-radius:4px; }
    .hero .info-icons { display:flex; flex-wrap:wrap; justify-content:center; gap:40px; margin-top:20px; }
    .hero .info-icons div { display:flex; align-items:center; gap:8px; font-size:0.9rem; }
    /* Secciones */
    section { padding:60px 20px; max-width:1200px; margin:0 auto; }
    section h2 { text-align:center; margin-bottom:40px; color:#003366; font-size:2rem; }
    /* Alojamientos */
    .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
    .card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); display:flex; flex-direction:column; }
    .card img { height:200px; object-fit:cover; transition: transform 0.3s ease-in-out; }
    .card:hover img { transform: scale(1.05); }
    .card .content { padding:20px; flex:1; display:flex; flex-direction:column; }
    .card h3 { margin-bottom:10px; color:#003366; }
    .card p { flex:1; margin-bottom:10px; }
    .card .icons { font-size:1.2rem; margin-bottom:10px; }
    .card .btn { background:#00cc66; color:#fff; padding:8px 12px; border:none; border-radius:4px; width:min-content; }
    /* Servicios */
    .servicios .grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
    .servicio { background:#fff; padding:20px; border-radius:8px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    .servicio .icon { font-size:2rem; margin-bottom:10px; color:#003366; }
    .servicio h3 { margin-bottom:10px; color:#003366; font-size:1rem; }
    .servicio p { font-size:0.9rem; }
    /* Ofertas especiales */
    .ofertas { background:#003366; color:#fff; }
    .ofertas .offer-card { background:#fff; color:#333; display:flex; flex-wrap:wrap; gap:20px; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    .ofertas img { width:100%; max-width:300px; height:200px; object-fit:cover; border-radius:8px; }
    .ofertas .details { flex:1; }
    .ofertas .label { display:inline-block; background:#00cc66; color:#fff; padding:5px 10px; border-radius:4px; margin-bottom:10px; }
    .ofertas ul { margin:10px 0; padding-left:20px; }
    .ofertas .btn { display:inline-block; background:#00cc66; color:#fff; padding:8px 12px; border-radius:4px; margin-right:10px; }
    /* Galería */
    .gallery .filters { text-align:center; margin-bottom:20px; }
    .gallery .filters button { padding:8px 16px; margin:0 5px; border:none; border-radius:4px; cursor:pointer; }
    .gallery .filters .active { background:#003366; color:#fff; }
    .gallery .grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
    .gallery p { margin-top:20px; font-size:0.9rem; }
    /* Contacto */
    .contacto .container { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
    .contact-info, .contact-form { background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    .contact-info div { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .contact-info iframe { width:100%; height:200px; border:0; border-radius:8px; margin-top:10px; }
    .contact-form input, .contact-form textarea { width:100%; padding:8px; margin-bottom:10px; border:1px solid #ccc; border-radius:4px; }
    .contact-form button { width:100%; background:#003366; color:#fff; padding:10px; border:none; border-radius:4px; cursor:pointer; }
    /* Empleo */
    .empleo .offer-card { background:#fff; display:flex; flex-wrap:wrap; gap:20px; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    .empleo img { width:100%; max-width:300px; height:200px; object-fit:cover; border-radius:8px; }
    .empleo .details { flex:1; }
    .empleo .label { display:inline-block; background:#00cc66; color:#fff; padding:5px 10px; border-radius:4px; margin-bottom:10px; }
    .empleo ul { list-style:none; padding-left:0; margin:10px 0; }
    .empleo ul li { display:flex; align-items:center; gap:5px; margin-bottom:5px; }
    .empleo .btn { background:#25d366; color:#fff; padding:10px 20px; border:none; border-radius:4px; cursor:pointer; }
    /* Footer */
    footer { background:#003366; color:#fff; padding:40px 20px; }
    footer .container { max-width:1200px; margin:0 auto; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
    footer h3 { margin-bottom:10px; }
    footer ul { list-style:none; padding-left:0; }
    footer ul li { margin-bottom:5px; }
    .btn-whatsapp { display:inline-block; background:#00cc66; color:#fff; padding:10px 20px; border-radius:4px; margin-top:10px; }
    /* Botón flotante WhatsApp */
    .whatsapp-btn { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
    .whatsapp-btn a { display: block; line-height: 0; }
    .whatsapp-btn a img { display: block; width: 60px; height: 60px; }
    /* Responsive */
    @media (max-width: 768px) {
      .navbar .menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border-top: 4px solid #003366; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-direction: column; padding: 10px 0; }
      .navbar .menu.show { display: flex; }
      .navbar .menu a { display: block; padding: 12px 20px; color: #003366; font-weight: 500; transition: background 0.2s; }
      .navbar .menu a:hover { background: #f0f0f0; }
      .navbar .toggle { display: block; cursor: pointer; }
    }
    .btn-primary:hover, .btn-whats:hover { background: #87CEEB; }
    /* En pantallas ≥992px, fuerza 6 columnas */
    @media (min-width: 992px) {
      .servicios .grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 20px !important; }
    }
    /* En móviles (<992px), comportamiento original */
    @media (max-width: 991px) {
      .servicios .grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) !important; gap: 20px !important; }
    }
    /* Miniaturas con ratio fijo, zoom al hover */
    .gallery .grid img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      transition: transform 0.3s ease;
      cursor: pointer;
    }
    .gallery .grid img:hover { transform: scale(1.05); }
    .gallery {
      background: linear-gradient(135deg, #00264d 0%, #004080 50%, #0066b3 100%);
      background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.05) 25%, transparent 25%);
      background-size: 20px 20px, 20px 20px;
      color: #fff;
      padding: 40px 20px;
    }
    .gallery .grid img { border: 2px solid #003366; border-radius: 8px; }
    /* Botones: fondo azul y texto blanco */
    button, .btn, .btn-primary, .btn-whats, .btn-submit, .filters button {
      background-color: #003366 !important;
      color: #fff !important;
      border: none;
    }
    /* Hover: fondo verde y texto negro */
    button:hover, .btn:hover, .btn-primary:hover, .btn-whats:hover, .btn-submit:hover, .filters button:hover {
      background-color: #00cc66 !important;
      color: #000 !important;
    }
    .contact-form button { font-weight: bold; font-size: 1.1rem; }
    .gallery .grid img { border: none !important; border-radius: 8px; }
    /* Navbar fija siempre arriba (ya aplicado arriba) */
    /* Empuja el contenido hacia abajo para no taparlo */
    body { padding-top: 60px; /* altura navbar */ }
    footer .container .reserve {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 10px;
    }
    .reserve .btn-whatsapp { background-color: #87CEEB !important; color: #000 !important; }
    .reserve .btn-whatsapp:hover { background-color: #00cc66 !important; }
    /* Solo muestra la flecha, sin fondo ni hover */
    .scroll-top, .scroll-top a {
      background: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
      transition: none !important;
    }
    .scroll-top a { display: inline-block; font-size: 2rem; line-height: 1; color: inherit; text-decoration: none; }
    .scroll-top a:hover { background: none !important; transform: none !important; }
    /* Ajustes móviles hero */
    @media (max-width: 768px) {
      .hero .container { flex-direction: column; gap: 20px; }
      .hero .form { margin: 0 auto; width: 100%; max-width: 450px; }
      .hero .intro { width: 100% !important; max-width: 100% !important; margin: 0 0 20px; padding: 20px 15px; }
      .hero .intro h1 { width: 100% !important; max-width: 100% !important; font-size: 1.9rem; line-height: 1.2; word-wrap: break-word; text-align: center; }
      .hero .intro p { font-size: 1rem; margin-top: 10px; }
    }

    /* Nuevas secciones optimizadas */
    .testimonials {
      background: #f8f9fa;
      padding: 60px 20px;
    }
    .testimonial-card {
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    .testimonial-rating {
      color: #ffc107;
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    .testimonial-text {
      font-style: italic;
      margin-bottom: 15px;
    }
    .testimonial-author {
      font-weight: bold;
      color: #003366;
    }

    /* Sección de beneficios */
    .benefits {
      background: linear-gradient(135deg, #003366 0%, #00cc66 100%);
      color: #fff;
      padding: 60px 20px;
    }
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .benefit-item {
      text-align: center;
    }
    .benefit-icon {
      font-size: 3rem;
      margin-bottom: 15px;
    }
    .benefit-title {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 10px;
    }

    /* CTA mejorado */
    .cta-section {
      background: #003366;
      color: #fff;
      padding: 60px 20px;
      text-align: center;
    }
    .cta-content {
      max-width: 800px;
      margin: 0 auto;
    }
    .cta-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 30px;
    }
    .cta-btn {
      background: #00cc66;
      color: #000;
      padding: 15px 30px;
      border-radius: 8px;
      font-weight: bold;
      font-size: 1.1rem;
      transition: all 0.3s ease;
    }
    .cta-btn:hover {
      background: #87CEEB;
      transform: translateY(-2px);
    }

@media (max-width: 768px) {
    #telegram-bar {
      font-size: 0.78rem !important;
      padding: 7px 12px !important;
    }
    #telegram-bar span {
      margin-left: 4px !important;
      padding: 2px 7px !important;
    }
  }

@media (max-width: 768px) {
      #banner-siestas div[style*="max-width:1200px"] {
        flex-direction: column;
        text-align: center;
      }
      #banner-siestas div[style*="flex-shrink:0"] {
        justify-content: center !important;
      }
    }

@media (max-width: 768px) {
      #top-banner-offer div[style*="max-width:1200px"] {
        flex-direction: column;
        text-align: center;
      }
      #top-banner-offer div[style*="flex-shrink:0"] {
        justify-content: center !important;
      }
    }