/* Estilos esenciales de la página, sin dependencias externas. */
*,::before,::after{box-sizing:border-box}
html{font-size:10px;-webkit-text-size-adjust:100%}
body{margin:0}
a{color:#337ab7;text-decoration:none}
a:focus,a:hover{color:#23527c;text-decoration:underline}
.row::before,.row::after{display:table;content:" "}
.row::after{clear:both}
.col-xs-3,.col-md-2{position:relative;min-height:1px}
.col-xs-3{float:left;width:25%}
@media (min-width:992px){.col-md-2{float:left;width:16.66666667%}}

::selection{background:#FFF8AB;color:#000}
@font-face{font-family:'UniversLTStd';src:url('../font/UniversLTStd.otf') format('truetype');font-weight:normal;font-style:normal}
@font-face{font-family:'UniversLTStd-Cn';src:url('../font/UniversLTStd-Cn.otf') format('truetype');font-weight:normal;font-style:normal}
@font-face{font-family:'UniversLTStd-LightCn';src:url('../font/UniversLTStd-LightCn.otf') format('truetype');font-weight:normal;font-style:normal}

body{-webkit-font-smoothing:antialiased;font:.81em/150% UniversLTStd;line-height:0.7em;color:#000;word-spacing:-1px;height:100%;width:100%;padding:0;margin:0}

.header{position: absolute;z-index: 2;height: 10em;height: 17em;width: 17em;top: 4em;left: 4em;background-repeat: no-repeat;background-size: contain;}
.header{background-image:url(../img/logo.png);background-image:image-set(url('../img/logo.webp') type('image/webp'),url('../img/logo.png') type('image/png'));}
.container-fluid{padding: 0;}
.container-fluid>.row{height: 100vh;padding: 0;margin: 0;}
.page{height: 100vh;padding: 0;margin: 0;background-size: contain;background-repeat: no-repeat;position: relative;}
.page>.description{height: 100vh;float: right;overflow: hidden;padding: 0;}
.page>.description>div{position: absolute;top: 50%;transform: translateY(-50%);}
.page>.description h1{font-family: 'UniversLTStd-LightCn';line-height: 1.2em;margin: 0 .3em;font-size: 3em;font-weight: bold;user-select: none;}
.page>.description p,.page>.description a{font-family: 'UniversLTStd-Cn';line-height: 1.5em;margin: 1em .8em 0;font-size: 1.8em;user-select: none;}

.trophy{background: linear-gradient(to bottom,#dfe5e4 0%,#ffffff 100%);}
.trophy>.page{background-position: 50%;}
.trophy>.page{background-image:url(../img/trofeo.png);background-image:image-set(url('../img/trofeo.webp') type('image/webp'),url('../img/trofeo.png') type('image/png'));}
.trophy>.page>.description{background:radial-gradient(ellipse at center,rgba(220,227,225,0.65) 0%,rgba(220,227,225,0.65) 100%);}
.trophy>.page>.description h1{color: #677b73;}

.gift{background: linear-gradient(to bottom,rgba(191,190,200,1) 0%,rgba(255,255,255,1) 37%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 63%,rgba(191,190,200,1) 100%);}
.gift>.page{background-position: 50%;}
.gift>.page{background-image:url(../img/recuerdo.png);background-image:image-set(url('../img/recuerdo.webp') type('image/webp'),url('../img/recuerdo.png') type('image/png'));}
.gift>.page>.description{background: radial-gradient(ellipse at center,rgba(191,190,201,0.76) 0%,rgba(191,190,201,0.76) 44%,rgba(191,190,201,0.75) 100%);}

.ring{background: radial-gradient(ellipse at center,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.7) 28%,rgba(245,248,248,0.65) 39%,rgba(192,206,211,0.78) 100%);}
.ring>.page{background-position: 50%;}
.ring>.page{background-image:url(../img/anillo.png);background-image:image-set(url('../img/anillo.webp') type('image/webp'),url('../img/anillo.png') type('image/png'));}
.ring>.page>.description{background: radial-gradient(ellipse at center,rgba(197,207,212,0.76) 0%,rgba(197,207,212,0.76) 44%,rgba(197,207,212,0.75) 100%);}

.map>.page{background-size: cover;background-position: 50%;}
.map>.page{background-image:url(../img/mapa.png);background-image:image-set(url('../img/mapa.webp') type('image/webp'),url('../img/mapa.png') type('image/png'));}
.map>.page>.description{background:radial-gradient(ellipse at center,rgba(255,255,255,0.76) 0%,rgba(255,255,255,0.76) 44%,rgba(255,255,255,0.75) 100%);}
.map>.page>.description a{line-height: 3.5em;}

.contact>.page{background-size: cover;background-position: 50%;color: #fff;}
.contact>.page{background-image:url(../img/compostura.jpg);background-image:image-set(url('../img/compostura.webp') type('image/webp'),url('../img/compostura.jpg') type('image/jpeg'));}
.contact>.page>.data{float: left;font-family: 'UniversLTStd-Cn';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.contact>.page>.data>ul{list-style-type: none;color: #FFF;margin: 0;padding: 0;border-left: .16em solid #FFF;padding-left: 2em;}
.contact>.page>.data>ul>li{line-height: 1.2em;font-size: 2em;padding: 0;text-align: left;height: 2em;margin-bottom: .5em;}
.contact>.page>.data>ul>li>div{float: left;}
.contact>.page>.data>ul>li>div:nth-child(1){width: 2.5em;}
.contact>.page>.data>ul>li>div:nth-child(2){width: calc(100% - 2.5em);}
.contact>.page>.data>ul>li a{color: #fff;}
.contact>.page>.data>ul>li a:hover{text-decoration: none;}
/*.contact>.page>.data>ul>li .icon{font-size: 1.3em;}*/
.icon{margin-left: 2.5em;}
.icon:before{content: " ";width: 2em;position: absolute;background-repeat: no-repeat;left: 1.5em;height: 1.5em;}
.icon.position:before{left:1.4em;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAABW0lEQVRIibXUMS8EQRjG8WcOUfAFaHwF9R1RSEQkqisEQeKL8GGuVRAaJaI4RK4QVCzhKlGRiOKvsJIxZudm9taTXDI7ed/3tze3t0YRAUYkNSXNSZrItzNJh5J2jDFvMXN6IStAl+J0geV+ke0A4GarLLKagPwk7ZsBo4Hjeso/vjzz/XtGQ+ueIfdA3aqpA5mnbi0FankG1D11DU9dKwU6cZofA7XuMR756moF/e+RdZJknGvvf6powJVzPQ403CJgWtKYs90J3NTfAZ6zz2wMmAIePHWTKZABbj1DIPx4t6MRC9ssGBbKYhloALhJQM4B98GIxlJeQ/OlkByqAZ0I5LQ0YmHNCGi2CsgA7QBy3DdiYQsBaKYyKMcuPchZpUgObXigpf+AhoFXC3kBhmL7Q2/lXzHGfEjat7Z2jTGflUN59qz1QUpjKnRdsO6ZwUToTtJFvs5SGr8Aw6RLzu1M9W4AAAAASUVORK5CYII=)}
.icon.instagram:before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABjElEQVQ4ja2VPU8UYRSFnx2ImG1AjUQ6QosQoEFiwm/QhlAtobAhtOhvsGMrbTWRwsJgYkUFJAqx3t5QANliSaDaxZCHYu4kyzgDLHiSyTtz77ln7nvufACgzqi7atve0Y7aaYCKOgPsAS3gO3BKbxgEXgGPgReE+pH6tBcVdVT9on5V36jH6jbR8ocbiofV4VxsuWvbm+pHtZ0AA8BZgciIWldPgCbQVFvquvoM6HTR26RWDfSXdDQLbAJPgG+kHgPMASvAArAI1ICHwFbEIVquq4/iGAtP/6jjBTd7HrnD4GZ1ddVMMI/zTEytqu/UhvpW7VPHg/MPygQ3MrGuzn5Ebi2uN4oKk5LBZp6tRnEFGIrYUqw/iwoLhxJGA9TU+RB7meNUKUCZ4Fysn4H3udynHOcqSjy8UCfURF2LgTTiPFGngnProageqJMFDUxGrhAV1ZJtA/wlfcB/AZL6+Poaq7hJsGckXH0n74tOAvz+j4L7FdMv7T7w4J5i58AsAOq0uuPdfwHb6hTAJZazXjU66jTrAAAAAElFTkSuQmCC)}
.icon.phone:before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABJUlEQVQ4jaXUPUvDUBjF8fO0FB1aoasigggKTnVRnJ066Cbufhihk3MHF5cOiouTX8IKFXFxrOILvnRxsX8HExpukxtvciBL7pMfh3u5kRIBloBz4BSYU5kALeCRSS7KYE1gyHQOioJHKRjAA1ApAt5ngACroVjdgz0BjRCvIqmWsfYsac/MRqENDXhNaTYfBMUNzQxJV877vpkNi4Bxy32n4Ufo3rlgFRg4aKcwGKG7DvgDtMuiPQd9B1oZsyvAch7YAO4c9AXYTMzUgC4wjp4evh8JsB4dSjLf/F3PNnDJdAbAgg/dAj5TPvTlFpjxodvAVyC6kbena0D/n9gZYF4wQmeBDjDKgMbAMVCVpHxxAjclHUrakbQo6U3SjaQTM7uO534BfbJR5Ylh2rkAAAAASUVORK5CYII=)}
.icon.whatsapp:before{left:1.4em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.601 2.326A7.854 7.854 0 0 0 8.034 0C3.594 0 .02 3.576.02 8.018c0 1.41.368 2.785 1.057 3.998L0 16l4.098-1.075a7.956 7.956 0 0 0 3.933 1h.003c4.437 0 8.014-3.577 8.014-8.018a7.95 7.95 0 0 0-2.447-5.579zM8.034 14.552a6.54 6.54 0 0 1-3.348-.917l-.24-.144-2.433.639.649-2.37-.156-.244a6.548 6.548 0 0 1-1.006-3.491c0-3.615 2.94-6.556 6.556-6.556a6.547 6.547 0 0 1 4.642 1.923 6.548 6.548 0 0 1 1.92 4.643c-.002 3.613-2.942 6.556-6.555 6.556zm3.591-4.882c-.196-.098-1.163-.574-1.343-.639-.18-.065-.31-.098-.44.098-.13.196-.506.638-.62.77-.113.13-.228.146-.424.049-.196-.098-.827-.304-1.575-.97-.582-.519-.975-1.16-1.09-1.356-.113-.196-.012-.302.085-.4.088-.097.196-.228.294-.342.098-.113.13-.195.196-.325.065-.13.032-.244-.016-.342-.049-.098-.44-1.063-.602-1.455-.158-.38-.32-.328-.44-.334-.113-.006-.244-.007-.375-.007a.72.72 0 0 0-.522.244c-.18.196-.686.67-.686 1.634 0 .964.702 1.896.8 2.027.098.13 1.383 2.11 3.35 2.96.467.202.832.323 1.116.413.469.149.896.128 1.233.078.376-.056 1.163-.475 1.327-.934.163-.459.163-.852.114-.934-.049-.081-.18-.13-.375-.228z'/%3E%3C/svg%3E");background-size:1.50em 1.5em;background-position:left center;transform:none}
.icon.mail:before{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAA90lEQVQ4jc2RMUoDURRFzx+ChWAssw3RCNmBEqs0lu7BpWhnlTqNCCaFGwhE1AVYBAtLQbASkTkW/pFJmEkmZooceM19n8Pjfth0gnpQtzAFQk0+E+AU+KxB9gWcJcAxcAS8rSF7B7pAB3+5U/fVZ1dnqrbVW1Vyi0d1T52sIJuoLXWYBcw9eFU76qCC7EbdBlAfyoSqH+qJerFAdqU2sgLzwqSg4B3gGngCzoE0t0tjNg4hfBf9TpEQYAvoA7tAD3iJ04tZv/S/K3Q1VLtxRn9dzToWdliJKDpUk2UdVkK9BO6BEdDM8jB//rr8+8IyGkC7bulm8wOewtSqUl1SKQAAAABJRU5ErkJggg==)}
.icon.aperture:before{left: 1.3em;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAABh0lEQVRIieWTPUiVYRiGr8cfNBDpEKiDiODPlLuD0NQg4t6ikwiBEByC05YuYrQ6KDgJtjQ6FNIU6NbmdJxKhGpIaXO6Gnw/elHjfMc8BHkvH+/9PM99vS8fD9xJqaNqVR1pJeRI3VHrzcy1lQxvV6vAaLLG0ovabwWiTgAHwAzwGPiUvjPAQarfTGqnWlO/qc/Utkv1UOfVr+qa2tUsYFI9VHfVwQa9A+pbta4+KhN+L93qRJ1v8mKz6hd1U+3Ja5EangIVYAHoA9aB02YgSRVgCfgObAE/ImKjgAi8ukFoI9UiIsggt64it9Se/K2uQNRF9UzdVx+oy17oWJ0ublgoO6+m3uWGEOA1MAV8BuaStwI8ATaLpkjK5mZLvwTojYhDoA7cz/w8kLSoU5nVBwyXhVynl8AbYDHzKkB3dn4HTJeF/FQfAuPAWfJWImIoIt4XTRHxIiI+ZHO7XLymFOQ58BEYAravG4LfPz+z9oDzP/X/H3vSkVFrrYZUgf4W5FdbkPkP9QtjtgHCwStRSgAAAABJRU5ErkJggg==)}



@media (max-width: 768px) {
    .header{width: 13.5em;height: 13.5em;}
    .page>.description{position: absolute;float: none;width: 100%;height: 13em;bottom: 0;}
    .page>.description p {margin-top: 0;}
    .contact>.page>.data>ul>li{margin-bottom: 1em;}
    .contact>.page>.description>div{right: 1em;text-align: right;}
}

@media (max-width: 425px) { 
    .header{width: 10em;height: 10em;top: 2em;left: 2em;}
    .page>.description h1{font-size: 2.5em;}
    .page>.description p{font-size: 1.35em;} 
    .contact>.page>.data{width: 90%;}
    .contact>.page>.data>ul{border-left-width: 0;}    
}

/* Ajustes de accesibilidad y pantallas pequeñas. */

/* Ajustes que conservan el diseño original de Grabaciones Sako. */

.page > .description h2 {
    font-family: 'UniversLTStd-LightCn';
    line-height: 1.2em;
    margin: 0 .3em;
    font-size: 3em;
    font-weight: bold;
    user-select: none;
}

a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

.scroll-hint {
    position: absolute;
    z-index: 3;
    right: 2.5rem;
    bottom: 2rem;
    color: #677b73;
    font-family: 'UniversLTStd-Cn', sans-serif;
    font-size: 1.3rem;
    letter-spacing: .04em;
    text-decoration: none;
}

.scroll-hint::after {
    content: "↓";
    display: block;
    margin-top: .35rem;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
    animation: scroll-hint 1.8s ease-in-out infinite;
}

@keyframes scroll-hint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(.45rem); }
}

@media (max-width: 768px) {
    .scroll-hint {
        right: 1.4rem;
        bottom: 1.4rem;
        font-size: 1.15rem;
    }

    .contact > .page > .data {
        width: min(90%, 34rem);
    }

    .contact > .page > .data > ul {
        padding-left: 1.75em;
    }

    .contact > .page > .data > ul > li {
        height: auto;
        min-height: 2.4em;
        margin-bottom: .7em;
        font-size: clamp(1.2rem, 4.7vw, 2rem);
        line-height: 1.35em;
        overflow-wrap: anywhere;
    }

    .contact > .page > .data > ul > li:last-child {
        margin-bottom: 0;
    }

    .contact > .page > .data .position {
        font-size: .9em;
    }
}

@media (max-width: 425px) {
    .page > .description h1,
    .page > .description h2 {
        font-size: 2.5em;
    }

    .scroll-hint {
        right: 1rem;
        bottom: 1rem;
        font-size: 1rem;
    }

    .contact > .page > .data {
        width: calc(100% - 2rem);
    }

    .contact > .page > .data > ul {
        padding-left: 1.35em;
    }

    .contact > .page > .data > ul > li {
        min-height: 2.2em;
        margin-bottom: .5em;
        font-size: clamp(1.15rem, 4.2vw, 1.5rem);
        line-height: 1.3em;
    }

    .contact > .page > .data .icon {
        margin-left: 2.1em;
    }

    .contact > .page > .data .icon:before {
        left: .15em;
    }
}


@media (prefers-reduced-motion: reduce) {
    .scroll-hint::after {
        animation: none;
    }
}
