@charset "utf-8";
/* CSS Document */

  :root{
    --bg:#f8f1e7;
    --card:#f0d9c2;
    --text:#4a2c18;
    --muted:#8b5e3c;
    --accent:#b87333;
    --accent-2:#d9a066;
    --border:#c4a484;
  }

  *{box-sizing:border-box}

  html,body{
    margin:0; padding:0;
    background:var(--bg); color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
    line-height:1.6;
  }

  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  .container{max-width:1100px; margin:0 auto; padding:0 20px}

  /* HEADER */
  header{
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:saturate(120%) blur(8px);
    background:#000000;
    border-bottom:1px solid #222;
    color:#eaeaea;
    background-image:url('fotos/mivelada.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:82px 0;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .logo{
    width:143px;
    height:107px;
    border-radius:3px;
    overflow:hidden;
    box-shadow:0 3px 8px rgba(0,0,0,.6);
  }

  .brand h1{
    font-family:'Raleway','Poppins',sans-serif;
    font-size:1.6rem;
    font-weight:400;
    margin:0;
    letter-spacing:1px;
    color:#222;
    animation:glow 2.5s ease-in-out infinite;
  }

  /* MENÚ ESCRITORIO */
  .menu{
    display:flex;
    gap:18px;
  }

  .menu a{
    padding:8px 12px;
    border-radius:8px;
    color:#000;
    transition:.2s ease;
    background:#ffffff80;
  }

  .menu a:hover{
    color:#ffffff;
    background:#ffffff33;
  }

  /* HAMBURGUESA */
  .hamburger{
    display:none;
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid var(--border);
    background:#ffffff;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .3s ease;
  }

  .hamburger:hover{transform:scale(1.1) rotate(1deg)}

  .hamburger span{
    width:20px;
    height:2px;
    background:#000;
    position:relative;
    transition:.4s ease;
  }

  .hamburger span::before,
  .hamburger span::after{
    content:"";
    position:absolute;
    left:0;
    width:20px;
    height:2px;
    background:#000;
    transition:.2s ease;
  }

  .hamburger span::before{top:-6px}
  .hamburger span::after{top:6px}

  .hamburger.active span{background:transparent}
  .hamburger.active span::before{top:0; transform:rotate(45deg)}
  .hamburger.active span::after{top:0; transform:rotate(-45deg)}

  .hamburger:hover span,
  .hamburger:hover span::before,
  .hamburger:hover span::after{
    background:var(--accent);
  }

  /* PANEL MÓVIL */
  .mobile-panel{display:none}
  .mobile-links{
    display:none;
    flex-direction:column;
    gap:10px;
    padding:12px 0;
  }

  .mobile-links a{
    padding:12px 14px;
    border-radius:8px;
    background:#ffffff;
    color:#333;
    font-weight:600;
    border:1px solid var(--border);
  }

  .mobile-open .mobile-links{display:flex}
	h1 {
		font-size: 18px;
		
		
	}
	
	h2 {
		font-size: 18px;
	
		
	}
  /* RESPONSIVE */
  @media (max-width: 840px){

    /* Cabecera NO fija */
    header{
      position:static !important;
      background-size:cover;
      background-position:center;
    }

    /* Cabecera más compacta */
    .nav{
      padding:20px 0; /* antes 82px */
    }

    .logo{
      width:90px;   /* antes 143px */
      height:68px;  /* antes 107px */
    }

    .brand h1{
      font-size:1.1rem;
    }

    .menu{display:none}
    .hamburger{display:flex; width:34px; height:34px}

    .mobile-panel{
      display:block;
      background:#ffffff;
      border-top:1px solid var(--border);
    }
  }

  /* HERO */
  .hero{
    padding:60px 0 32px;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:24px;
    align-items:center;
  }

  .hero p{
    color:var(--muted);
    margin:0 0 22px;
  }

  .hero .buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }

  .btn{
    padding:10px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
  }

  .btn.primary{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    border:none;
    font-weight:600;
  }

  .card-hero{
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    padding:18px;
  }

  @media (max-width: 840px){
    .hero{grid-template-columns:1fr}
  }

  section{
    padding:44px 0;
    border-top:1px solid var(--border);
  }

  .gallery{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(3,1fr);
  }

  .photo{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    background:var(--card);
    aspect-ratio:4/3;
    position:relative;
  }

  .photo figcaption{
    position:absolute;
    bottom:8px;
    left:8px;
    right:8px;
    font-size:.9rem;
    color:#4a2c18;
    text-shadow:0 1px 6px rgba(0,0,0,.45);
  }

  @media (max-width: 900px){
    .gallery{grid-template-columns:repeat(2,1fr)}
  }

  @media (max-width: 560px){
    .gallery{grid-template-columns:1fr}
  }

  footer{
    border-top:1px solid var(--border);
    padding:24px 0 50px;
    font-size:.95rem;
    background-color:var(--card);
    color:var(--text);
  }

  #inicio{
    padding-left:30px;
    padding-right:30px;
    max-width:900px;
    margin:0 auto;
    line-height:1.8;
  }

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Raleway:wght@300;400;600&display=swap');