:root {
    color-scheme: dark;
    --rojo: #d81024;
    --crema: #fff6e7;
    --granate: #650c20;
    --linea: rgb(255 246 231 / 38%);
    --serif: Georgia, "Times New Roman", serif;
    --sans: "Trebuchet MS", Verdana, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--rojo); }
body {
    margin: 0;
    min-width: 280px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--crema);
    background: var(--rojo);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}
body::before {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    content: "";
    opacity: .14;
    background-image: radial-gradient(rgb(255 246 231 / 28%) .5px, transparent .6px);
    background-size: 4px 4px;
}
::selection { background: var(--crema); color: var(--granate); }
img { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; }
.contenedor { width: min(1320px, calc(100% - 144px)); margin-inline: auto; }
.saltar {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 10;
    padding: 12px 18px;
    transform: translateY(-160%);
    background: var(--crema);
    color: var(--granate);
    border-radius: 4px;
}
.saltar:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--crema); outline-offset: 6px; }
main:focus { outline: none; }
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
    padding-block: 12px;
}
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca__simbolo { background: var(--crema); border-radius: 18px 18px 10px 10px; }
.marca__simbolo img { width: 62px; height: 62px; object-fit: contain; }
.marca__nombre { font-family: var(--serif); font-weight: 700; font-size: 43px; line-height: .82; letter-spacing: -.035em; }
.marca__nombre span { display: block; font-size: 24px; line-height: 1.15; letter-spacing: -.025em; }
.estado-web { padding: 10px 20px; border: 1px solid var(--crema); border-radius: 100px; font-size: 15px; white-space: nowrap; }
main { flex: 1; }
.bienvenida { position: relative; overflow: clip; isolation: isolate; }
.bienvenida::before, .bienvenida::after {
    position: absolute;
    inset-block: 0;
    width: 46px;
    background: url("../img/bienvenida/tejido.svg") center top / 58px 145px repeat-y;
    opacity: .55;
    content: "";
    z-index: -1;
}
.bienvenida::before { left: -24px; }
.bienvenida::after { right: -24px; }
.bienvenida__interior { position: relative; min-height: 540px; display: flex; align-items: center; }
.bienvenida__texto { position: relative; z-index: 2; padding-block: 52px 56px; width: 68%; }
.antetitulo { font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .19em; text-transform: uppercase; }
h1 { margin-top: 18px; font-family: var(--serif); font-size: clamp(58px, 6.2vw, 91px); font-weight: 700; line-height: .99; letter-spacing: -.055em; }
h1 span { display: block; }
.bienvenida__descripcion { max-width: 570px; margin-top: 28px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; text-wrap: pretty; }
.aviso { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 16px; line-height: 1.5; }
.aviso__luz { flex: 0 0 12px; height: 12px; border-radius: 50%; background: var(--crema); animation: latido 1.5s 3 1.1s; }
.bienvenida__paisaje {
    position: absolute;
    z-index: 1;
    bottom: -15px;
    right: min(-9vw, -30px);
    width: 76%;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent, #000 23%);
    animation: paisaje 2s cubic-bezier(.16, 1, .3, 1) both;
}
.bienvenida__paisaje img { width: 100%; height: auto; }
.proximamente { position: relative; z-index: 2; border-top: 1px solid var(--linea); padding-block: 20px 28px; background: var(--rojo); }
.proximamente__secciones { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
.seccion { display: flex; align-items: center; gap: 23px; padding: 0 34px; border-left: 1px solid var(--linea); }
.seccion:first-child { padding-left: 0; border-left: 0; }
.seccion:last-child { padding-right: 0; }
.seccion__icono { flex-shrink: 0; width: 66px; height: 66px; transition: transform .25s ease; }
.seccion:hover .seccion__icono { transform: translateY(-4px); }
.seccion h3 { font-family: var(--serif); font-weight: 700; font-size: 31px; line-height: 1.15; letter-spacing: -.025em; }
.seccion p { margin-top: 5px; font-size: 17px; line-height: 1.45; }
.pie { overflow: hidden; background: var(--granate); text-align: center; }
.pie__interior { position: relative; padding-block: 28px 26px; }
.pie__interior::before, .pie__interior::after {
    position: absolute;
    top: 40%;
    width: 34px;
    height: 34px;
    border: 5px double var(--rojo);
    transform: rotate(45deg);
    opacity: .65;
    content: "";
}
.pie__interior::before { left: 10px; }
.pie__interior::after { right: 10px; }
.pie__gracias { font-family: var(--serif); font-size: 23px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.pie__comunidad { margin-top: 7px; font-size: 14px; line-height: 1.6; }
.pie__dominio { margin-top: 20px; font-size: 11px; letter-spacing: .24em; }
.entrada { animation: entrada .75s cubic-bezier(.16, 1, .3, 1) both; }
.entrada--1 { animation-delay: .08s; }
.entrada--2 { animation-delay: .16s; }
.entrada--3 { animation-delay: .25s; }
.entrada--4 { animation-delay: .34s; }
.entrada--5 { animation-delay: .46s; }
.entrada--6 { animation-delay: .58s; }
@keyframes entrada { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes paisaje { from { opacity: 0; transform: translate(30px, 15px); } to { opacity: 1; transform: translate(0); } }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgb(255 246 231 / 0%); opacity: .55; } }

@media (min-width: 1600px) {
    .bienvenida__interior { min-height: 590px; }
    .bienvenida__paisaje { right: -8%; width: 77%; }
}
@media (max-width: 1100px) {
    .contenedor { width: calc(100% - 88px); }
    .bienvenida__interior { min-height: 510px; }
    .bienvenida__texto { width: 80%; }
    .bienvenida__paisaje { width: 82%; right: -14%; opacity: .78; }
    .bienvenida__descripcion { max-width: 440px; }
    .seccion { gap: 14px; padding-inline: 22px; }
    .seccion__icono { width: 49px; height: 49px; }
    .seccion h3 { font-size: 27px; }
    .seccion p { font-size: 15px; }
    .pie__interior::before, .pie__interior::after { display: none; }
}
@media (max-width: 900px) {
    .contenedor { width: calc(100% - 40px); }
    .cabecera__interior { min-height: 80px; padding-block: 10px; gap: 12px; }
    .marca { gap: 8px; }
    .marca__simbolo { border-radius: 13px 13px 7px 7px; }
    .marca__simbolo img { width: 47px; height: 47px; }
    .marca__nombre { font-size: 32px; }
    .marca__nombre span { font-size: 17px; }
    .estado-web { padding: 7px 11px; font-size: 11px; }
    .bienvenida__interior { display: block; min-height: 0; }
    .bienvenida__texto { width: 100%; padding-block: 39px 0; }
    .antetitulo { font-size: 10px; letter-spacing: .15em; }
    h1 { margin-top: 20px; font-size: clamp(42px, 9.6vw, 67px); line-height: 1.03; letter-spacing: -.055em; }
    h1 span:first-child { max-width: 13ch; }
    .bienvenida__descripcion { max-width: 440px; margin-top: 23px; font-size: 16px; line-height: 1.55; }
    .aviso { margin-top: 22px; gap: 10px; font-size: 13px; align-items: flex-start; }
    .aviso__luz { flex-basis: 9px; height: 9px; margin-top: 5px; }
    .bienvenida__paisaje { position: relative; display: block; width: calc(100% + 40px); right: auto; bottom: -4px; margin: -1px -20px 0; opacity: 1; mask-image: none; }
    .bienvenida::before, .bienvenida::after { opacity: .25; }
    .proximamente { padding-block: 25px 17px; }
    .proximamente__secciones { grid-template-columns: 1fr; margin-top: 11px; }
    .seccion, .seccion:first-child, .seccion:last-child { gap: 22px; padding: 20px 6px; border: 0; }
    .seccion + .seccion { border-top: 1px solid rgb(255 246 231 / 23%); }
    .seccion__icono { width: 49px; height: 49px; }
    .seccion h3 { font-size: 26px; }
    .seccion p { margin-top: 4px; font-size: 15px; }
    .seccion p br { display: none; }
    .pie__interior { padding-block: 28px 24px; }
    .pie__gracias { max-width: 28ch; margin-inline: auto; font-size: 20px; }
    .pie__comunidad { max-width: 33ch; margin: 10px auto 0; font-size: 12px; }
    .pie__dominio { margin-top: 18px; font-size: 10px; }
}
@media (max-width: 360px) {
    .contenedor { width: calc(100% - 32px); }
    .marca__nombre { font-size: 29px; }
    .marca__nombre span { font-size: 15px; }
    .marca__simbolo img { width: 40px; height: 40px; }
    .estado-web { font-size: 10px; padding-inline: 9px; }
    h1 { font-size: 40px; }
    .bienvenida__paisaje { width: calc(100% + 32px); margin-inline: -16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}