/* ===== RESET + VARIABLES ===== */
:root{
    --azul:#1E3A5F;
    --gris:#F2F2F2;
    --font-titulo:"Rubik Dirt",system-ui,sans-serif;
    --font-ui:"Faculty Glyphic",system-ui,sans-serif;
  
    /* Alinear Bootstrap a tu paleta */
    --bs-primary: var(--azul);
    --bs-primary-rgb: 30,58,95;
  }
  
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  
  body{
    min-height:100vh;
    background-color:#F4E1D2;          /* respaldo */
    background-image:url("fondo.jpg");  /* ajustá el path si está en otra carpeta */
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment:scroll;       /* mejor en móviles */
    font-family:var(--font-ui);
    color:#111;
    overflow-x:hidden;
  }
  
  /* Velo suave (opcional) */
  body::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(245,242,242,.68);
    z-index:0;
  }
  header,main,footer{position:relative; z-index:1;}
  
  /* ===== TOPBAR CONTACTO ===== */
  .topbar{background:var(--gris);}
  .topbar-link{
    color:#111;
    font-size:1.1rem;
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
  }
  .topbar-link:hover{color:var(--azul);}
  
  /* ===== NAVBAR / MARCA ===== */
  .navbar-brand{padding:.4rem 0;}
  .brand-logo{width:clamp(36px,8vw,64px); height:auto; display:block;}
  .brand-text{
    font-family:var(--font-titulo);
    font-size:clamp(20px,6vw,40px);
    line-height:1; color:#fff; letter-spacing:.5px;
  }
  .nav-link{
    padding:.5rem .75rem !important;
    font-family:var(--font-titulo);
    font-size:clamp(14px,1.2vw + 10px,22px);
  }
  .nav-link:hover,.nav-link:focus{
    color:#fff; background:rgba(255,255,255,.12); border-radius:.5rem;
  }
  .navbar a:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:.5rem;}
  
  /* ===== CONTENIDO ===== */
  main{margin-top:1rem;}
  
  section.section{
    margin:2rem auto;
    max-width:980px;
    padding:0 1rem;
  }
  
  h2.titulo, h2.section-title{
    font-family:var(--font-titulo);
    font-size:clamp(24px,4vw,40px);
    text-align:center;
    margin-bottom:1.25rem;
  }
  
  .section ul{
    margin:0 auto 1.5rem;
    padding-left:1.25rem;
    max-width:820px;
  }
  .section ul li{
    font-size:clamp(16px,2.5vw,22px);
    margin-bottom:.75rem;
    line-height:1.5;
  }
  
  /* Separadores */
  .section .separator{
    width:100%;
    max-height:70px;
    object-fit:cover;
    display:block;
    margin:2rem 0;
  }
  
  /* ===== BLOQUE DE PAGO ===== */
  .pago{
    max-width:680px;
    margin:2rem auto;
    padding:1.5rem;
    background:#e6e3e3;
    border-radius:12px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
  }
  .pago h2{
    font-family:var(--font-titulo);
    text-align:center;
    margin-bottom:1rem;
  }
  .pago p, .pago li{
    font-size:clamp(16px,2.5vw,22px);
    margin-bottom:.75rem;
  }
  .pago ul{list-style:none; padding-left:0; margin:0 0 1rem 0;}
  .pago li{position:relative; padding-left:1.5rem;}
  .incluido li::before{content:"🎨"; position:absolute; left:0; top:0;}
  
  /* Botón Reservar */
  .reservar{display:flex; justify-content:center; align-items:center; margin-top:1.25rem;}
  .reservar a{
    display:inline-block;
    padding:.85rem 2rem;
    background:linear-gradient(135deg,#2c265f,#ed7674);
    font-size:clamp(18px,3vw,26px);
    font-weight:700;
    border-radius:50px;
    color:#131212; text-decoration:none;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .reservar a:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.3);}
  
  /* WhatsApp flotante */
  .whatsapp-float{
    position:fixed; width:60px; height:60px; bottom:20px; right:20px;
    background:#25D366; color:#fff; border-radius:50%;
    font-size:30px; display:flex; align-items:center; justify-content:center;
    box-shadow:2px 2px 5px rgba(0,0,0,.3); z-index:100;
  }
  .whatsapp-float:hover{background:#128C7E;}
  
  /* Footer */
  footer{background:var(--gris); margin-top:2rem; padding:1rem 0;}
  .contacto-pie{display:flex; justify-content:center; gap:2rem;}
  .contacto-pie .icono{width:24px; height:24px;}
  
  /* Responsive fino */
  @media (max-width:768px){
    .pago{margin:1rem;}
  }