:root {
    color-scheme: dark;
    --tinta: #071819;
    --tinta-2: #0c2426;
    --tinta-3: #143337;
    --luz: #edf8f5;
    --niebla: #afc8c4;
    --apagado: #7d9997;
    --linea: rgba(199, 234, 228, .18);
    --linea-suave: rgba(199, 234, 228, .1);
    --acento: #75e6e0;
    --acento-suave: rgba(117, 230, 224, .14);
    --violeta: #a695ff;
    --radio: 1.15rem;
    --sombra: 0 28px 80px rgba(0, 0, 0, .22);
    --easing: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    color: var(--luz);
    background: var(--tinta);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .7;
    background:
        radial-gradient(circle at 90% 8%, rgba(117, 230, 224, .1), transparent 20rem),
        linear-gradient(90deg, transparent 0, transparent calc(50% - .5px), rgba(213, 242, 237, .035) 50%, transparent calc(50% + .5px));
}

a { color: inherit; text-underline-offset: .22em; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.saltar {
    position: fixed;
    z-index: 99;
    top: .8rem;
    left: .8rem;
    padding: .65rem .9rem;
    color: var(--tinta);
    background: var(--acento);
    transform: translateY(-160%);
    transition: transform 180ms var(--easing);
}

.saltar:focus { transform: translateY(0); }

.barra {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 5.25rem;
    padding: .85rem clamp(1.1rem, 4vw, 4.5rem);
    border-bottom: 1px solid var(--linea-suave);
    background: rgba(7, 24, 25, .78);
    backdrop-filter: blur(16px);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: .62rem;
    width: max-content;
    color: var(--luz);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.045em;
    text-decoration: none;
}

.marca__sello {
    display: grid;
    width: 2.1rem;
    aspect-ratio: 1;
    place-items: center;
    color: var(--acento);
    border: 1px solid rgba(117, 230, 224, .55);
    border-radius: 50%;
}

.marca__sello svg { width: 1.18rem; height: 1.18rem; }

.barra nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); }

.barra nav a {
    color: var(--niebla);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms var(--easing);
}

.barra nav a:hover, .barra nav a:focus-visible { color: var(--acento); }

.barra__cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .72rem .88rem;
    color: var(--luz);
    border: 1px solid var(--linea);
    border-radius: 100vmax;
    background: transparent;
    cursor: pointer;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .02em;
    transition: color 180ms var(--easing), border-color 180ms var(--easing), background-color 180ms var(--easing), transform 180ms var(--easing);
}

.barra__cta:hover, .barra__cta:focus-visible {
    color: var(--tinta);
    border-color: var(--acento);
    background: var(--acento);
    transform: translateY(-2px);
}

.barra__menu {
    display: none;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: .62rem .76rem;
    color: var(--niebla);
    border: 1px solid var(--linea);
    border-radius: 100vmax;
    background: transparent;
    cursor: pointer;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .65rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color 180ms var(--easing), border-color 180ms var(--easing), background-color 180ms var(--easing), transform 140ms var(--easing);
}

.barra__menu:focus-visible { color: var(--tinta); border-color: var(--acento); background: var(--acento); }
.barra__menu:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
    .barra__menu:hover { color: var(--tinta); border-color: var(--acento); background: var(--acento); }
}

.icono-flecha, .icono-arriba, .icono-menu { width: 1.15em; height: 1.15em; vertical-align: -.15em; }

main { overflow: clip; }

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
    grid-template-areas:
        "content visual"
        "footer footer";
    column-gap: clamp(2rem, 7vw, 8rem);
    row-gap: 4rem;
    max-width: 1440px;
    min-height: calc(100svh - 5.25rem);
    margin: 0 auto;
    padding: clamp(4.8rem, 11vw, 9.7rem) clamp(1.25rem, 6vw, 7rem) 2.5rem;
}

.hero__reticula {
    position: absolute;
    z-index: -1;
    inset: 0 clamp(1.25rem, 6vw, 7rem);
    pointer-events: none;
    border-right: 1px solid var(--linea-suave);
    border-left: 1px solid var(--linea-suave);
    background-image: linear-gradient(90deg, transparent 0, transparent 33.333%, rgba(199, 234, 228, .075) 33.4%, transparent 33.5%, transparent 66.666%, rgba(199, 234, 228, .075) 66.7%, transparent 66.8%);
}

.hero__contenido { grid-area: content; align-self: center; min-width: 0; }

.ceja {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.05rem;
    color: var(--apagado);
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .69rem;
    letter-spacing: .055em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ceja > span { width: 1.9rem; height: 1px; background: var(--acento); }
.ceja--clara { color: #c7ded9; }

h1, h2, h3, h4, p { margin-top: 0; }

h1 {
    max-width: 7.2ch;
    margin-bottom: 1.65rem;
    font-size: clamp(4rem, 8.7vw, 8.8rem);
    font-weight: 500;
    letter-spacing: -.086em;
    line-height: .82;
}

h1 em { color: var(--acento); font-style: normal; }

.hero__texto {
    max-width: 37rem;
    margin-bottom: 2rem;
    color: var(--niebla);
    font-size: clamp(1.02rem, 1.7vw, 1.25rem);
    line-height: 1.58;
}

.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .78rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 100vmax;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: color 200ms var(--easing), border-color 200ms var(--easing), background-color 200ms var(--easing), transform 200ms var(--easing);
}

.boton:hover, .boton:focus-visible { transform: translateY(-3px); }
.boton--luz { color: var(--tinta); background: var(--acento); }
.boton--luz:hover, .boton--luz:focus-visible { background: #a0f5ee; }
.boton--tinta { color: var(--luz); border-color: var(--tinta); background: var(--tinta); }
.boton--tinta:hover, .boton--tinta:focus-visible { color: var(--tinta); border-color: var(--acento); background: var(--acento); }
.boton--grande { min-height: 3.3rem; padding-inline: 1.35rem; }

.enlace-boton {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .15rem 0;
    color: var(--luz);
    border: 0;
    border-bottom: 1px solid var(--acento);
    background: transparent;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    transition: color 180ms var(--easing), border-color 180ms var(--easing);
}

.enlace-boton:hover, .enlace-boton:focus-visible { color: var(--acento); border-color: var(--luz); }

.hero__visual {
    position: relative;
    grid-area: visual;
    align-self: center;
    min-width: 0;
    min-height: clamp(25rem, 47vw, 36rem);
}

.visor {
    position: absolute;
    top: 3%;
    right: 5%;
    width: min(86%, 31rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(184, 241, 233, .37);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(171, 255, 250, .8) 0 2%, transparent 2.3%),
        radial-gradient(circle at 63% 72%, rgba(166, 149, 255, .58) 0, transparent 28%),
        linear-gradient(142deg, #215f66, #0f3034 45%, #091c24 72%, #173b3e);
    box-shadow: inset 0 0 0 2.3rem rgba(5, 15, 18, .24), inset 0 0 8rem rgba(0, 0, 0, .42), var(--sombra);
}

.visor::before, .visor::after { position: absolute; content: ""; border-radius: 50%; }
.visor::before { inset: 10%; border: 1px dashed rgba(237, 248, 245, .38); }
.visor::after { inset: 27%; border: 1px solid rgba(237, 248, 245, .26); background: radial-gradient(circle at 43% 35%, rgba(255,255,255,.38), transparent 12%), rgba(3, 12, 16, .34); }

.visor__anillo { position: absolute; border: 1px solid rgba(237, 248, 245, .28); border-radius: 50%; }
.visor__anillo--uno { inset: 17%; }
.visor__anillo--dos { inset: 36%; border-color: rgba(117, 230, 224, .7); }
.visor__pupila { position: absolute; inset: 43%; border-radius: 50%; background: #041014; box-shadow: 0 0 0 1px rgba(237, 248, 245, .45), 0 0 40px rgba(117, 230, 224, .36); }

.ficha {
    position: absolute;
    z-index: 2;
    top: 4%;
    left: 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: .15rem .35rem;
    width: 9.7rem;
    padding: .8rem;
    color: var(--tinta);
    background: var(--luz);
    box-shadow: 10px 10px 0 rgba(166, 149, 255, .58);
    transform: rotate(-5deg);
}

.ficha span { grid-column: 1 / -1; font-family: "DM Mono", ui-monospace, monospace; font-size: .54rem; letter-spacing: .08em; }
.ficha b { font-size: 2.9rem; font-weight: 500; letter-spacing: -.09em; line-height: .8; }
.ficha i { align-self: end; margin-bottom: .2rem; font-family: "DM Mono", ui-monospace, monospace; font-size: .65rem; font-style: normal; }

.hoja-contacto {
    position: absolute;
    z-index: 3;
    right: -2%;
    bottom: 1%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .38rem;
    width: min(78%, 22rem);
    padding: .65rem;
    border: 1px solid rgba(237, 248, 245, .25);
    background: rgba(5, 17, 20, .82);
    box-shadow: var(--sombra);
    transform: rotate(4deg);
    backdrop-filter: blur(12px);
}

.hoja-contacto span { position: relative; min-height: 3.15rem; overflow: hidden; background: linear-gradient(135deg, #99dfdc, #1e555b 48%, #101d31); }
.hoja-contacto span:nth-child(2n) { background: linear-gradient(135deg, #d3e4d8, #677886 49%, #132d31); }
.hoja-contacto span:nth-child(3n) { background: linear-gradient(135deg, #5a466d, #1c5557 47%, #95ccc6); }
.hoja-contacto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hoja-contacto b { grid-column: 1 / -1; color: var(--niebla); font-family: "DM Mono", ui-monospace, monospace; font-size: .54rem; font-weight: 400; letter-spacing: .07em; }

.hero__nota {
    position: absolute;
    bottom: 16%;
    left: 1%;
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 12rem;
    margin: 0;
    color: #d7eeea;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: .61rem;
    letter-spacing: .025em;
    line-height: 1.5;
}

.hero__nota span { display: block; width: .6rem; height: .6rem; border: 1px solid var(--acento); border-radius: 50%; box-shadow: 0 0 0 .23rem var(--acento-suave); }

.hero__pie {
    grid-area: footer;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linea);
}

.hero__pie p { display: grid; gap: .23rem; margin: 0; color: var(--apagado); font-size: .78rem; }
.hero__pie b { color: var(--luz); font-family: "DM Mono", ui-monospace, monospace; font-size: .63rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }

.declaracion {
    display: grid;
    grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 9vw, 10rem);
    max-width: 1220px;
    margin: 0 auto;
    padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 7rem);
}

.declaracion > .ceja { margin-top: .7rem; }

.declaracion h2, .seccion-cabecera h2, .visita h2, .taller h2, .cierre h2 {
    margin-bottom: 1.1rem;
    font-size: clamp(2.35rem, 4.7vw, 5.1rem);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .94;
}

.declaracion p:not(.ceja), .seccion-cabecera > p:last-child { max-width: 36rem; color: var(--niebla); font-size: 1.06rem; line-height: 1.6; }

.servicios { max-width: 1440px; margin: 0 auto; padding: 0 clamp(1.25rem, 6vw, 7rem) clamp(5rem, 10vw, 8rem); }

.seccion-cabecera { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr); column-gap: 3rem; margin-bottom: clamp(3.3rem, 8vw, 7rem); }
.seccion-cabecera .ceja { grid-column: 1 / -1; }
.seccion-cabecera h2 { margin-bottom: 0; }
.seccion-cabecera > p:last-child { align-self: end; margin-bottom: .3rem; }

.coleccion { padding: clamp(2.7rem, 5vw, 4.6rem) 0; border-top: 1px solid var(--linea); }
.coleccion:last-child { border-bottom: 1px solid var(--linea); }

.coleccion__cabecera { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; }
.coleccion__indice { margin: .35rem 0 0; color: var(--acento); font-family: "DM Mono", ui-monospace, monospace; font-size: .78rem; }
.coleccion__cabecera h3 { margin-bottom: .7rem; font-size: clamp(2.1rem, 4vw, 4.1rem); font-weight: 500; letter-spacing: -.07em; line-height: .9; }
.coleccion__cabecera div > p { max-width: 38rem; margin-bottom: 0; color: var(--niebla); }

.servicios__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--linea); background: var(--linea); }

.servicio {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 21rem;
    padding: clamp(1.25rem, 2.4vw, 2rem);
    overflow: hidden;
    background: #0a2022;
}

.servicio::before {
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 12rem;
    aspect-ratio: 1;
    border: 1px solid rgba(117, 230, 224, .2);
    border-radius: 50%;
    content: "";
    transition: transform 420ms var(--easing), border-color 420ms var(--easing);
}

.coleccion--retrato .servicio::before { border-radius: 16% 84% 60% 40%; border-color: rgba(166, 149, 255, .26); }
.coleccion--taller .servicio::before { border-radius: 0; transform: rotate(45deg); }
.servicio:hover::before { border-color: rgba(117, 230, 224, .75); transform: translate(-.55rem, .55rem) scale(1.08); }
.coleccion--taller .servicio:hover::before { transform: translate(-.55rem, .55rem) rotate(45deg) scale(1.08); }

.servicio__señal { display: flex; gap: .32rem; margin-bottom: auto; }
.servicio__señal span { display: block; width: .4rem; height: .4rem; border: 1px solid var(--acento); border-radius: 50%; }
.servicio__señal span:nth-child(2) { background: var(--acento); }
.coleccion--retrato .servicio__señal span { border-color: var(--violeta); }
.coleccion--retrato .servicio__señal span:nth-child(2) { background: var(--violeta); }

.servicio__dato { margin: 2.25rem 0 .6rem; color: var(--apagado); font-family: "DM Mono", ui-monospace, monospace; font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; }
.servicio h4 { position: relative; margin-bottom: .65rem; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.06em; line-height: .98; }
.servicio > p:not(.servicio__dato) { position: relative; max-width: 24rem; margin-bottom: 1.1rem; color: var(--niebla); font-size: .91rem; line-height: 1.55; }
.servicio button { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: .38rem; padding: .1rem 0; color: var(--luz); border: 0; border-bottom: 1px solid var(--acento); background: transparent; cursor: pointer; font-size: .79rem; font-weight: 600; transition: color 180ms var(--easing), border-color 180ms var(--easing); }
.servicio button:hover, .servicio button:focus-visible { color: var(--acento); border-color: var(--luz); }

.taller { margin-top: clamp(2.5rem, 7vw, 6rem); background: #d7ebe6; color: var(--tinta); }
.taller__interior { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, .9fr); gap: clamp(2rem, 8vw, 8rem); max-width: 1440px; margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 6vw, 7rem); }
.taller__visual { position: relative; min-width: 0; min-height: 31rem; }

.taller__papel { position: absolute; width: min(76%, 25rem); aspect-ratio: .78; box-shadow: 18px 20px 35px rgba(7, 24, 25, .18); }
.taller__papel--atras { top: 9%; left: 3%; background: linear-gradient(135deg, #7ce0dc, #315a65); transform: rotate(-7deg); }
.taller__papel--frente { z-index: 2; top: 3%; right: 5%; display: flex; flex-direction: column; padding: clamp(1.25rem, 3vw, 2rem); color: var(--luz); background: #0d2d30; transform: rotate(5deg); }
.taller__papel--frente span, .taller__papel--frente i { font-family: "DM Mono", ui-monospace, monospace; font-size: .58rem; font-style: normal; letter-spacing: .06em; }
.taller__papel--frente b { margin: auto 0; font-size: clamp(2.3rem, 4.2vw, 4rem); font-weight: 500; letter-spacing: -.09em; line-height: .83; }
.taller__papel--frente i { color: var(--acento); }
.taller__muestra { position: absolute; z-index: 3; bottom: 2%; left: 5%; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; width: min(54%, 16rem); padding: .55rem; background: var(--luz); box-shadow: var(--sombra); transform: rotate(-2deg); }
.taller__muestra span { aspect-ratio: .72; background: linear-gradient(145deg, #bcf3ed, #315e67 52%, #1c2939); }
.taller__muestra span:nth-child(2n) { background: linear-gradient(145deg, #e6ddd2, #7a697e 50%, #3b8080); }

.taller__texto { align-self: center; min-width: 0; }
.taller__texto .ceja { color: #436462; }
.taller h2 { margin-bottom: 1.35rem; }
.taller__texto > p:not(.ceja) { max-width: 33rem; color: #375755; font-size: 1.04rem; line-height: 1.62; }
.taller dl { display: grid; gap: .85rem; margin: 2rem 0 0; }
.taller dl div { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr); gap: 1rem; padding-top: .85rem; border-top: 1px solid rgba(7, 24, 25, .18); }
.taller dt { font-family: "DM Mono", ui-monospace, monospace; font-size: .66rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.taller dd { margin: 0; color: #426461; font-size: .85rem; }

.proceso { max-width: 1440px; margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 7rem); }
.proceso .seccion-cabecera { grid-template-columns: 1fr; margin-bottom: 3rem; }
.proceso__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; border: 1px solid var(--linea); list-style: none; background: var(--linea); }
.proceso__pasos li { min-width: 0; min-height: 16rem; padding: clamp(1.25rem, 2.6vw, 2rem); background: var(--tinta); }
.proceso__pasos span { color: var(--acento); font-family: "DM Mono", ui-monospace, monospace; font-size: .71rem; }
.proceso__pasos h3 { margin: 3.6rem 0 .65rem; font-size: 1.65rem; font-weight: 500; letter-spacing: -.05em; }
.proceso__pasos p { max-width: 25rem; margin-bottom: 0; color: var(--niebla); font-size: .91rem; }

.visita { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .85fr); min-height: 34rem; background: #b9d4d0; color: var(--tinta); }
.visita__mapa { position: relative; min-width: 0; overflow: hidden; background: #9bc1bd; }
.visita__cuadricula { position: absolute; inset: -15%; opacity: .6; background-image: linear-gradient(rgba(7,24,25,.27) 1px, transparent 1px), linear-gradient(90deg, rgba(7,24,25,.27) 1px, transparent 1px); background-size: 3.5rem 3.5rem; transform: rotate(-7deg) scale(1.15); }
.visita__mapa::before, .visita__mapa::after { position: absolute; border: 1px solid rgba(7, 24, 25, .38); border-radius: 50%; content: ""; }
.visita__mapa::before { width: 27rem; aspect-ratio: 1; top: -7rem; left: -5rem; }
.visita__mapa::after { width: 17rem; aspect-ratio: 1; right: -4rem; bottom: -5rem; border-color: rgba(7, 24, 25, .22); }
.visita__punto { position: absolute; z-index: 1; top: 46%; left: 48%; width: 1.25rem; aspect-ratio: 1; border: 4px solid #b9d4d0; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 .55rem rgba(7, 24, 25, .19); }
.visita__mapa p { position: absolute; z-index: 1; top: calc(46% + 1.5rem); left: calc(48% + 1.6rem); margin: 0; font-family: "DM Mono", ui-monospace, monospace; font-size: .77rem; font-weight: 500; letter-spacing: .05em; line-height: 1.35; }
.visita__mapa small { font-size: .55rem; font-weight: 400; }
.visita__texto { align-self: center; min-width: 0; padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 6vw, 6rem); }
.visita__texto .ceja { color: #476e6b; }
.visita h2 { margin-bottom: 1.5rem; }
.visita__direccion { display: grid; grid-template-columns: 1.35rem 1fr; gap: .3rem .65rem; max-width: 30rem; margin-bottom: 1rem; font-size: 1rem; font-weight: 500; line-height: 1.55; }
.visita__direccion svg { grid-row: span 2; width: 1.3rem; color: #175a5b; }
.visita__direccion span, .visita__telefono { color: #456864; font-family: "DM Mono", ui-monospace, monospace; font-size: .65rem; font-weight: 400; letter-spacing: .025em; }
.visita__telefono { margin-bottom: 1.8rem; }

.cierre { padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 6vw, 7rem); text-align: center; background: #0d2c2f; }
.cierre .ceja { justify-content: center; color: #a9ceca; }
.cierre h2 { margin-bottom: 1.25rem; }
.cierre > p:not(.ceja) { max-width: 39rem; margin: 0 auto 2rem; color: #c0d7d3; font-size: 1.04rem; line-height: 1.6; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 8rem; padding: 1.8rem clamp(1.25rem, 6vw, 7rem); background: #061214; }
footer p { justify-self: center; margin: 0; color: var(--apagado); font-family: "DM Mono", ui-monospace, monospace; font-size: .59rem; letter-spacing: .025em; text-align: center; }
.footer__arriba { justify-self: end; color: var(--niebla); font-size: .78rem; text-decoration-color: var(--acento); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

html.js .hero-entrada, html.js .revelar, html.js .servicios__rejilla > *, html.js .proceso__pasos > * {
    opacity: 0;
    transform: translate3d(0, 1.4rem, 0) scale(.98);
    transition: opacity 650ms var(--easing), transform 650ms var(--easing);
    transition-delay: var(--rvl-d, 0ms);
}

html.js .hero-entrada.en, html.js .revelar.en, html.js .servicios__rejilla > .en, html.js .proceso__pasos > .en { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

html.anim-fallback .hero-entrada, html.anim-fallback .revelar, html.anim-fallback .servicios__rejilla > *, html.anim-fallback .proceso__pasos > * { opacity: 1; transform: none; transition: none; }

@media (max-width: 920px) {
    .barra { grid-template-columns: 1fr auto auto; }
    .barra nav { position: absolute; top: calc(100% + .45rem); right: 1rem; left: 1rem; display: none; flex-direction: column; gap: 0; padding: .4rem; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(7, 24, 25, .97); box-shadow: var(--sombra); }
    .barra.barra--menu-abierto nav { display: flex; }
    .barra nav a { padding: .8rem .85rem; }
    .barra__menu { display: inline-flex; }
    .hero { grid-template-columns: minmax(0, 1fr) minmax(19rem, .8fr); column-gap: 2rem; }
    .servicios__rejilla, .proceso__pasos { grid-template-columns: 1fr; }
    .servicio { min-height: 16rem; }
    .servicio__dato { margin-top: 2rem; }
    .proceso__pasos li { min-height: auto; }
    .proceso__pasos h3 { margin-top: 2.2rem; }
    footer { grid-template-columns: 1fr auto; }
    footer p { grid-column: 1 / -1; grid-row: 2; justify-self: start; text-align: left; }
}

@media (max-width: 720px) {
    .barra { min-height: 4.5rem; padding-inline: 1rem; }
    .marca { font-size: 1.08rem; }
    .marca__sello { width: 1.85rem; }
    .barra__cta { padding: .62rem .75rem; font-size: .6rem; }
    .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "visual" "footer"; min-height: auto; padding-top: 4.4rem; row-gap: 3rem; }
    .hero__visual { width: min(100%, 31rem); min-height: 26rem; margin-left: auto; }
    .hero__pie { grid-template-columns: 1fr; gap: .85rem; }
    .declaracion, .seccion-cabecera, .taller__interior, .visita { grid-template-columns: minmax(0, 1fr); }
    .declaracion { gap: .5rem; }
    .seccion-cabecera { row-gap: 1rem; }
    .seccion-cabecera > p:last-child { margin-bottom: 0; }
    .coleccion__cabecera { grid-template-columns: 1fr; gap: .35rem; }
    .coleccion__indice { margin-top: 0; }
    .taller__visual { min-height: 26rem; }
    .taller__papel--frente { right: 1%; }
    .taller__papel--atras { left: 0; }
    .taller__muestra { left: 2%; }
    .visita { min-height: 0; }
    .visita__mapa { min-height: 20rem; }
    .visita__texto { padding-block: 3.7rem; }
    .cierre { text-align: left; }
    .cierre .ceja { justify-content: flex-start; }
    .cierre > p:not(.ceja) { margin-left: 0; }
}

@media (max-width: 460px) {
    .barra__cta { font-size: 0; }
    .barra__cta svg { width: 1rem; height: 1rem; }
    .hero { padding-inline: 1rem; }
    .hero__reticula { inset-inline: 1rem; }
    .hero__visual { min-height: 22rem; }
    .ficha { width: 8rem; padding: .6rem; }
    .ficha b { font-size: 2.35rem; }
    .hoja-contacto { width: 72%; right: 0; }
    .hoja-contacto span { min-height: 2.3rem; }
    .hero__nota { bottom: 9%; max-width: 10rem; font-size: .54rem; }
    .servicios, .proceso { padding-inline: 1rem; }
    .taller__interior, .visita__texto, .cierre { padding-inline: 1rem; }
    .taller__visual { min-height: 22rem; }
    .taller__papel { width: 80%; }
    footer { gap: .75rem; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    html.js .hero-entrada, html.js .revelar, html.js .servicios__rejilla > *, html.js .proceso__pasos > * { opacity: 1; transform: none; }
}