:root{
    --cafe-oscuro:#2E1B12;
    --cafe:#4A2C1A;
    --cafe-medio:#6B4226;
    --dorado:#C9A66B;
    --dorado-claro:#E4C99A;
    --crema:#FAF3E7;
    --crema-oscuro:#F0E4D0;
    --verde:#6B7F5C;
    --texto:#3A2A1E;
    --blanco:#FFFFFF;
    --sombra:0 10px 40px rgba(46,27,18,.12);
    --sombra-hover:0 20px 60px rgba(46,27,18,.2);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Poppins',sans-serif;
    color:var(--texto);
    background:var(--crema);
    line-height:1.6;
  }
  h1,h2,h3,h4{font-family:'Playfair Display',serif;font-weight:700;color:var(--cafe-oscuro)}

  /* NAV */
  .navbar{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    background:rgba(250,243,231,.97);
    backdrop-filter:blur(10px);
    padding:1rem 5%;
    display:flex;justify-content:space-between;align-items:center;
    box-shadow:0 2px 20px rgba(46,27,18,.08);
  }
  .logo{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:900;color:var(--cafe-oscuro);text-decoration:none}
  .logo span{color:var(--dorado)}
  .hamburger{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:.5rem;
    color:var(--cafe-oscuro);
  }

  /* ESCRITORIO */
  .nav-links{
    display:flex;
    align-items:center;
    gap:1.75rem;
  }
  .nav-link{
    text-decoration:none;
    color:var(--cafe);
    font-weight:500;
    font-size:.95rem;
    transition:color .2s;
  }
  .nav-link:hover{color:var(--dorado)}

  /* MOVIL - OVERLAY */
  .nav-overlay{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.4);
    backdrop-filter:blur(4px);
    opacity:0;
    transition:opacity .2s ease;
    z-index:998;
  }
  .nav-overlay.active{
    opacity:1;
  }

  /* MOVIL - PANEL */
  .nav-panel{
    position:fixed;
    top:0;right:0;
    width:85%;
    max-width:320px;
    height:100vh;
    background:#FFFFFF;
    z-index:999;
    transform:translateX(100%);
    transition:transform .3s ease;
    display:flex;
    flex-direction:column;
    padding:0;
  }
  .nav-panel.active{
    transform:translateX(0);
  }
  .nav-header{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:56px;
    padding:0 1rem;
    flex-shrink:0;
  }
  .nav-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--cafe-oscuro);
    border-radius:8px;
    transition:background .15s;
  }
  .nav-close:active{
    background:rgba(0,0,0,.06);
  }
  .nav-action{
    display:flex;
    align-items:center;
    padding:0 1.25rem;
    height:64px;
    text-decoration:none;
    color:var(--cafe-oscuro);
    background:#FFFFFF;
    border-bottom:1px solid rgba(0,0,0,.06);
    transition:background .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-action:active{background:#F5F5F5}
  .nav-action-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    flex-shrink:0;
    color:var(--cafe);
  }
  .nav-action-text{
    flex:1;
    font-size:1rem;
    font-weight:500;
    color:var(--cafe-oscuro);
  }

  /* HERO */
  .hero{
    min-height:100vh;
    background:
      linear-gradient(135deg,rgba(46,27,18,.78) 0%,rgba(74,44,26,.62) 100%),
      url('https://images.unsplash.com/photo-1555244162-803834f70033?w=1600') center/cover;
    display:flex;align-items:center;justify-content:center;
    text-align:center;color:var(--blanco);
    padding:6rem 5% 4rem;
    position:relative;
  }
  .hero-content{max-width:800px;animation:fadeUp 1s ease}
  .hero h1{
    font-size:clamp(2.5rem,6vw,4.5rem);
    color:var(--blanco);
    margin-bottom:1.25rem;
    line-height:1.1;
  }
  .hero p{
    font-size:1.15rem;margin-bottom:3rem;
    color:rgba(255,255,255,.9);
    max-width:650px;margin-inline:auto;
  }
  .hero-buttons{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.875rem;
    padding:1rem 2rem;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    font-size:1rem;
    transition:all .2s;
    border:none;cursor:pointer;
    min-height:48px;
  }
  .btn-icon{
    width:22px;
    height:22px;
    flex-shrink:0;
    vertical-align:middle;
  }
  .btn-solid{
    background:var(--dorado);
    color:var(--cafe-oscuro);
  }
  .btn-solid:hover{background:var(--dorado-claro)}
  .btn-solid:focus{outline:2px solid var(--dorado);outline-offset:2px}
  .btn-outline{
    background:transparent;
    color:var(--dorado);
    border:3px solid var(--dorado);
  }
  .btn-outline:hover{
    background:var(--dorado);
    color:var(--cafe-oscuro);
    border-color:var(--dorado);
  }
  .btn-outline:focus{outline:2px solid var(--dorado);outline-offset:2px}

  /* SECCIONES GENERALES */
  section{padding:4rem 5%}
  .section-header{text-align:center;margin-bottom:2.5rem}
  .section-header h2{
    font-size:clamp(1.8rem,3vw,2.5rem);
    margin-bottom:.75rem;
  }
  .section-header p{
    max-width:600px;margin:0 auto;
    color:#6B5A4E;
  }

  /* SERVICIOS */
  .servicios{background:var(--crema)}
  .servicios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.25rem;
    max-width:1200px;margin:0 auto;
  }
  .servicio-card{
    background:var(--blanco);
    border-radius:16px;
    padding:1.5rem 1.25rem;
    text-align:center;
    box-shadow:var(--sombra);
    border:1px solid rgba(201,166,107,.15);
  }
  .servicio-card h3{font-size:1.1rem;margin-bottom:.5rem}
  .servicio-card .precio{
    font-size:1.5rem;font-weight:700;
    color:var(--cafe);
    margin:.5rem 0;
    font-family:'Playfair Display',serif;
  }
  .servicio-card .precio small{font-size:.8rem;color:#8B7A6E;font-weight:400}
  .servicio-card .descripcion{color:#6B5A4E;font-size:.85rem}

  /* FOOTER */
  footer{
    background:var(--cafe-oscuro);
    color:rgba(255,255,255,.7);
    padding:3rem 5% 1.5rem;
    text-align:center;
  }
  footer .logo{color:var(--blanco);margin-bottom:1rem;display:inline-block}
  footer p{font-size:.9rem;margin-bottom:.5rem}
  .footer-cta{
    font-size:.9rem;
    padding:.625rem 1.5rem;
    margin:.75rem 0 1.25rem;
  }
  .copyright{
    border-top:1px solid rgba(201,166,107,.2);
    padding-top:1.5rem;margin-top:1.5rem;
    font-size:.85rem;
  }

  /* ANIMACIONES */
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* RESPONSIVE */
  @media(max-width:768px){
    .hamburger{display:block}

    .nav-links{
      display:none;
    }

    .nav-overlay{
      display:block;
      pointer-events:none;
    }
    .nav-overlay.active{
      pointer-events:auto;
    }

    .nav-panel{
      transform:translateX(100%);
    }
    .nav-panel.active{
      transform:translateX(0);
    }

    .hero h1{font-size:2.2rem}
    .hero-buttons{flex-direction:column;align-items:center}
    section{padding:4rem 5%}
  }