/* ===== 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;            
    background-image:url("fondo.png");   
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment:scroll;       
    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; }
  
  /* Intro */
  .introduccion{
    margin:2rem auto 1rem;
    max-width:980px;
    padding:0 1rem;
    text-align:center;
  }
  .introduccion h1{
    font-family:var(--font-titulo);
    font-size:clamp(28px, 6vw, 56px);
    margin-bottom:.5rem;
  }
  .introduccion h2{
    font-size:clamp(18px, 3.5vw, 28px);
    font-weight:400;
    color:#222;
  }
  
  /* Contenido */
  .aprendizaje{
    margin:1.5rem auto 2rem;
    max-width:900px;
    padding:0 1rem;
    text-align:center;
  }
  .aprendizaje h1{
    font-family:var(--font-titulo);
    font-size:clamp(24px, 4.5vw, 40px);
    margin-bottom:1rem;
  }
  .aprendizaje ul{
    list-style:none;
    margin:0 auto;
    padding-left:0;
    max-width:760px;
    text-align:left;
  }
  .aprendizaje li{
    font-size:clamp(16px, 2.6vw, 22px);
    margin-bottom:.75rem;
    line-height:1.5;
  }
  
  /* 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,#caa17a,#a6509a);
    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(91, 122, 183, 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; }
  }