:root {
      --color-primario: #2C3E50;
      --color-secundario: #18BC9C;
      --color-texto: #333;
    }

    body {
      margin: 0;
      font-family: 'Source Sans Pro', sans-serif;
      color: var(--color-texto);
      line-height: 1.6;
    }

    /* CABECERA HERO */
    .hero {
      position: relative;
      background: url('bocarona_hero.jpeg') center/cover no-repeat;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.5);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 600px;
      padding: 20px;
    }

    .hero-content img {
      width: 250px;
      margin-bottom: 20px;
    }

    .hero-content h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
    }

    .hero-content button {
      padding: 12px 30px;
      background: var(--color-secundario);
      border: none;
      color: #fff;
      font-size: 1rem;
      border-radius: 50px;
      cursor: pointer;
      transition: background 0.3s;
		
    }

    .hero-content button:hover {
      background: #14907a;
    }

    /* DOS COLUMNAS */
    .two-columns {
      display: grid;
  	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  	  max-width: 1200px;
	  margin: 60px auto;
	  padding: 0 20px;
	  gap: 40px;
	 
    }

    .two-columns > div {
      flex: 1 1 300px;
    }

    .two-columns h2 {
      color: var(--color-primario);
    }

    /* FOTO IZQ + TEXTO DERECHA */


    .image-text {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      max-width: 1200px;
      margin: 60px auto;
      padding: 0 20px;
      gap: 40px;
    }

    .image-text img {
      flex: 1 1 300px;
      max-width: 100%;
      border-radius: 8px;
    }

    .image-text .text {
      flex: 1 1 300px;
    }

    .image-text h2 {
      color: var(--color-primario);
    }

    /* TRES FOTOS ENLACES */
    .gallery {
      max-width: 1200px;
      margin: 60px auto;
      padding: 0 20px;
      text-align: center;
    }

    .gallery h2 {
      margin-bottom: 40px;
      color: var(--color-primario);
    }

    .gallery-items {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .gallery-item {
      flex: 1 1 250px;
      max-width: 300px;
      text-decoration: none;
      color: inherit;
    }

    .gallery-item img {
      width: 100%;
      border-radius: 8px;
      transition: transform 0.3s;
    }

    .gallery-item:hover img {
      transform: scale(1.05);
    }

    .gallery-item p {
      margin-top: 10px;
    }

	.boton-reservar{
		display:block;
		width:150px;
		padding:10px;
		background: var(--color-secundario);
		border-radius:15px;
		color:white;
		margin:0px auto
	}
	
.boton-reservar:hover{
	background-color:#14907a;
}

.contacto-bloque {
	  width: 70%;
	  margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .mapa {
      flex: 1 1 300px;
    }

    .mapa iframe {
      width: 100%;
      height: 300px;
      border: 0;
    }

    .datos-contacto {
      flex: 1 1 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .datos-contacto h2 {
      margin-top: 0;
    }



    /* RESPONSIVE */
    @media (max-width: 768px) {
      .hero-content h1 {
        font-size: 2rem;
      }

      .two-columns, .image-text {
        flex-direction: column;
      }

      .gallery-items {
        flex-direction: column;
        align-items: center;
      }
		
		.contacto-bloque {
        flex-direction: column;
      }

      .mapa iframe {
        height: 250px;
      }
    }