@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bg: #575757;
    --gap: 0.5rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    background: var(--bg);
}

.cover {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Capa de fondo: imagen borrosa que llena todo */
.cover-blur {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cover-blur picture,
.cover-blur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(30px) brightness(0.7);
    transform: scale(1.15);
}

/* Capa frontal: imagen nítida sin recorte */
.cover-front {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.cover-front picture,
.cover-front img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.botonera {
  position: absolute;
  bottom: 5%;
  z-index: 10;
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
}

.btn-link {
    width: 11em;
    display: flex;
    justify-content: center;

    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;

    background-color: #cba514;
    color: #fffbfb;
    padding: 0.3rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    letter-spacing: 1px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-link--wa-blanco::before {
  --bg-img: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="%23fff" viewBox="0 0 32 32"><title>whatsapp</title><path d="M26.576 5.363a14.82 14.82 0 0 0-10.511-4.354C7.856 1.009 1.2 7.664 1.2 15.874c0 2.732.737 5.291 2.022 7.491l-.038-.07-2.109 7.702 7.879-2.067c2.051 1.139 4.498 1.809 7.102 1.809h.006c8.209-.003 14.862-6.659 14.862-14.868a14.82 14.82 0 0 0-4.349-10.507zM16.062 28.228h-.006c-2.319 0-4.489-.64-6.342-1.753l.056.031-.451-.267-4.675 1.227 1.247-4.559-.294-.467a12.23 12.23 0 0 1-1.889-6.565c0-6.822 5.531-12.353 12.353-12.353s12.353 5.531 12.353 12.353-5.53 12.353-12.353 12.353zm6.776-9.251c-.371-.186-2.197-1.083-2.537-1.208-.341-.124-.589-.185-.837.187-.246.371-.958 1.207-1.175 1.455-.216.249-.434.279-.805.094a10.2 10.2 0 0 1-2.997-1.852l.01.009a11.2 11.2 0 0 1-2.037-2.521l-.028-.052c-.216-.371-.023-.572.162-.757.167-.166.372-.434.557-.65.146-.179.271-.384.366-.604l.006-.017a.68.68 0 0 0-.033-.653l.002.003c-.094-.186-.836-2.014-1.145-2.758-.302-.724-.609-.625-.836-.637-.216-.01-.464-.012-.712-.012-.395.01-.746.188-.988.463l-.001.002a4.15 4.15 0 0 0-1.299 3.102v-.004a7.23 7.23 0 0 0 1.527 3.857l-.012-.015a16.7 16.7 0 0 0 6.251 5.564l.094.043c.548.248 1.25.513 1.968.74l.149.041a5.1 5.1 0 0 0 2.368.143l-.031.004a3.84 3.84 0 0 0 2.497-1.749l.009-.017a3.1 3.1 0 0 0 .214-1.784l.003.019c-.092-.155-.34-.247-.712-.434z"/></svg>');
  background-image: var(--bg-img);
}
.btn-link--em-blanco::before {
  --bg-img2: url('data:image/svg+xml,<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.76 12.17"><defs><style>.cls-1{fill:%23fff;}</style></defs><title>CRB_inicio</title><path class="cls-1" d="M16.2,0H1.56A1.56,1.56,0,0,0,0,1.56v9a1.56,1.56,0,0,0,1.56,1.56H16.2a1.56,1.56,0,0,0,1.56-1.56v-9A1.56,1.56,0,0,0,16.2,0ZM16,1l-.21.17L9.5,6.45a1,1,0,0,1-1.24,0L2,1.21,1.77,1ZM1,1.79,6.17,6.06,1,9.47ZM16.2,11.13H1.56a.52.52,0,0,1-.51-.42l6-4,.59.49a2,2,0,0,0,2.58,0l.6-.49,5.94,4A.52.52,0,0,1,16.2,11.13Zm.52-1.66L11.6,6.06l5.12-4.27Z"/></svg>');
  background-image: var(--bg-img2);
}


.btn-link--ico {
  --ancho: 20px;
  --alto: 20px;
  --bg-img: "";
  display: flex;
  align-items: center;
  gap: .5em;
}

.btn-link--ico::before {
  content: "";
  display: inline-flex;
  align-items: center;
  height: var(--alto);
  min-width: var(--ancho);
  background-size: var(--ancho) var(--alto);
  background-position: center;
  background-repeat: no-repeat;
}

.btn-link:hover {
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(203, 165, 20, 0.45);
}


/* Portrait: botón centrado y abajo */
@media (orientation: portrait) {
    .btn-link {
        bottom: 3% !important;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .btn-link {
        font-size: 0.8rem;
    }
}

@media(max-height: 700px) {
    .btn-link {
        font-size: 0.8rem;
    }
}