/* Contacto v2: "Hay alguien al otro lado" (prefijo k2-)
   Una ventana encendida de noche significa que hay alguien. La portada lo dice con la foto y con la hora real de la oficina (.v3-now);
   el formulario es una carta que se escribe como una frase, con una luz en el margen que baja hasta la línea que escribes;
   y las dos sedes, a 2.500 km, comparten la misma hora y la misma luz */

/* A: la ventana (67 %, 47 %). En móvil se encuadran la ventana y la puerta, a la derecha de la foto */
.k2-cover { --cover-focus: 67% 47%; --cover-stack-pos: 90% 50%; }

/* ---------- La carta ---------- */

.k2-letter {
    padding: clamp(6rem, 14vh, 9rem) var(--gutter);
    background: var(--carbon-2);
}

.k2-letter__head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2rem 4rem;
    align-items: end;
    max-width: 68rem;
    margin: 0 auto clamp(3rem, 7vh, 4.5rem);
}

.k2-letter__head .v3-body { justify-self: end; }

.k2-form {
    position: relative;
    max-width: 68rem;
    margin: 0 auto;
    padding: clamp(2.6rem, 5vw, 4.6rem) clamp(1.6rem, 5vw, 5rem) clamp(2.4rem, 4vw, 3.4rem) clamp(3.4rem, 7.5vw, 7.4rem);
    border: 1px solid rgba(245, 244, 241, .08);
    border-radius: 1.25rem;
    background: #1a191f;
    color: var(--hueso);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.2vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.8;
}

/* El margen de la carta: la luz baja por él hasta la línea que escribes (--fill lo pone el JS) */
.k2-form__margin {
    position: absolute;
    top: 1.4rem;
    bottom: 1.4rem;
    left: clamp(1.5rem, 3.6vw, 3.5rem);
    width: 1px;
    background: rgba(245, 244, 241, .07);
}

.k2-l {
    position: relative;
    margin: 0;
    transition: opacity 1.2s var(--glow-ease), transform .9s var(--ease-out);
}

/* Mientras escribes, la luz está en tu línea y las demás quedan en penumbra */
.k2-form.is-writing .k2-l { opacity: .42; }
.k2-form.is-writing .k2-l.is-here { opacity: 1; }

.k2-l--sign { margin-top: .5em; color: rgba(245, 244, 241, .72); font-style: italic; }

.k2-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Huecos de la frase: crecen con lo que escribes (JS) */
.k2-f { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }

.k2-f input {
    max-width: 100%;
    min-width: 3ch;
    margin: 0;
    padding: 0 .1em .02em;
    border: 0;
    border-bottom: 1px solid rgba(245, 244, 241, .28);
    border-radius: 0;
    color: var(--hueso);
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    line-height: 1.3;
    outline: none;
    transition: border-color .35s ease, box-shadow .35s ease;
}

.k2-f input::placeholder,
.k2-f textarea::placeholder { color: rgba(245, 244, 241, .34); font-style: italic; opacity: 1; }

.k2-f input:focus {
    border-bottom-color: rgba(var(--luz), .85);
    box-shadow: 0 1px 0 rgba(var(--luz), .6), 0 12px 18px -14px rgba(var(--luz), .6);
}

.k2-f.is-invalid input { border-bottom-color: #e0708f; }
/* El aviso va debajo del hueco: el margen del hueco (inline-block) abre sitio en la línea para que no pise la siguiente */
.k2-f.is-invalid:not(.k2-f--text) { margin-bottom: 1.1rem; }

.k2-f .contact-form__field-error {
    position: absolute;
    top: 100%;
    left: .2em;
    margin-top: .1rem;
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Lo que pasa: papel pautado, con las líneas a la altura exacta del texto */
.k2-f--text { display: block; margin: .15em 0 .35em; }

.k2-f--text textarea {
    display: block;
    width: 100%;
    min-height: 3.6em;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: var(--hueso);
    background: repeating-linear-gradient(180deg, transparent 0, transparent calc(1.8em - 1px), rgba(245, 244, 241, .16) calc(1.8em - 1px), rgba(245, 244, 241, .16) 1.8em);
    background-attachment: local;
    font: inherit;
    letter-spacing: inherit;
    line-height: 1.8;
    outline: none;
    resize: none;
    transition: background-color .35s ease;
}

.k2-f--text textarea:focus {
    background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(1.8em - 1px), rgba(var(--luz), .38) calc(1.8em - 1px), rgba(var(--luz), .38) 1.8em);
}

.k2-f--text.is-invalid textarea {
    background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(1.8em - 1px), rgba(224, 112, 143, .5) calc(1.8em - 1px), rgba(224, 112, 143, .5) 1.8em);
}

.k2-f--text .contact-form__field-error { top: auto; bottom: -1.4rem; }

/* Temas: palabras de la propia frase que se marcan */
.k2-topic { position: relative; display: inline; cursor: pointer; white-space: nowrap; }

.k2-topic input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.k2-topic b {
    border-bottom: 1px dashed rgba(245, 244, 241, .3);
    color: rgba(245, 244, 241, .64);
    font-weight: 300;
    transition: color var(--glow-dur) var(--glow-ease), border-color var(--glow-dur) var(--glow-ease);
}

html:not(.is-touch) .k2-topic:hover b { border-bottom-color: rgba(245, 244, 241, .6); color: var(--hueso); }
.k2-topic input:checked + b { border-bottom: 1px solid var(--ciruela-luz); color: var(--ciruela-luz); font-style: italic; }
.k2-topic input:focus-visible + b { outline: 1px solid rgba(var(--luz), .8); outline-offset: 3px; }
.k2-topic .contact-form__field-error { display: none; }

.k2-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 1.8rem;
    margin-top: 2.4rem;
    padding-top: 2.2rem;
    border-top: 1px solid rgba(245, 244, 241, .08);
    font-family: var(--sans);
    letter-spacing: 0;
    line-height: 1.5;
    transition: opacity .8s ease;
}

.k2-form__promise { margin: 0; color: rgba(245, 244, 241, .58); font-size: .72rem; letter-spacing: .06em; line-height: 1.8; }
.k2-form__promise span { color: rgba(245, 244, 241, .42); letter-spacing: .02em; }
.k2-form__promise a { border-bottom: 1px solid rgba(245, 244, 241, .3); }

.k2-form .contact-form__status { margin-top: 1.6rem; font-family: var(--sans); letter-spacing: 0; line-height: 1.5; }

/* Al enviarla, la luz baja hasta el final y las líneas se van, una a una */
.k2-form.is-sent .k2-l,
.k2-form.is-sent .k2-form__foot {
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .7s ease calc(var(--i, 0) * 70ms), transform .9s var(--ease-out) calc(var(--i, 0) * 70ms);
}

/* ---------- Después de escribir (sección clara) ---------- */

.k2-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4.5rem);
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(17, 17, 17, .14);
    list-style: none;
}

.k2-step { position: relative; padding-top: 2.2rem; }
.k2-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 1px; background: var(--ciruela); }

.k2-step__when {
    display: block;
    margin-bottom: 1.1rem;
    color: var(--ciruela);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.k2-step h3 {
    margin: 0 0 .9rem;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 2.7vw, 2.7rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.k2-step p { max-width: 24rem; margin: 0; color: rgba(17, 17, 17, .66); font-size: .98rem; font-weight: 300; line-height: 1.7; }

.k2-eta {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: fit-content;
    max-width: 100%;
    margin: clamp(3.2rem, 7vh, 4.5rem) 0 0;
    padding: 1.1rem 1.6rem;
    border: 1px solid rgba(17, 17, 17, .1);
    border-radius: 999px;
    color: rgba(17, 17, 17, .72);
    background: rgba(255, 255, 255, .45);
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.5;
}

.k2-eta svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--ciruela); }
.k2-eta b { color: var(--carbon); font-weight: 600; }

.k2-start { margin: 1.5rem 0 0; color: rgba(17, 17, 17, .6); font-size: .95rem; font-weight: 300; line-height: 1.7; }
.k2-start a { border-bottom: 1px solid rgba(131, 19, 108, .35); color: var(--ciruela); transition: border-color .4s ease; }
.k2-start a:hover, .k2-start a:focus-visible { border-bottom-color: var(--ciruela); }

/* ---------- Otras formas de hablar y las dos sedes ---------- */

.k2-ways {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(3.5rem, 8vw, 8rem);
    align-items: center;
    padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2));
    background: var(--carbon);
}

.k2-ways__list { margin: 3rem 0 0; padding: 0; border-top: 1px solid rgba(245, 244, 241, .12); list-style: none; }

.k2-ways__list li {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .35rem 1.5rem;
    align-items: baseline;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(245, 244, 241, .12);
}

.k2-ways__label { color: rgba(245, 244, 241, .5); font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }

.k2-ways__value {
    justify-self: start;
    color: var(--hueso);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2vw, 1.85rem);
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

a.k2-ways__value {
    background: linear-gradient(rgba(var(--luz), .8), rgba(var(--luz), .8)) 0 100% / 0 1px no-repeat;
    transition: background-size .8s var(--ease-curtain), color .4s ease;
}

a.k2-ways__value:hover,
a.k2-ways__value:focus-visible { background-size: 100% 1px; }

.k2-ways__list small { grid-column: 2; color: rgba(245, 244, 241, .5); font-size: .8rem; font-weight: 300; line-height: 1.5; }

/* El mapa: una línea de norte a sur, con la luz que baja de Klarup a Málaga al leerla */
.k2-map {
    position: relative;
    display: grid;
    gap: clamp(3rem, 11vh, 6.5rem);
    padding-left: 3.2rem;
}

.k2-map__rail {
    position: absolute;
    left: .9rem;
    width: 1px;
    background: rgba(245, 244, 241, .1);
}

.k2-place { position: relative; }

/* Encendida desde Klarup: sin fundido de entrada (lo cubre el brillo del punto), solo en la punta */
.k2-map__rail .v3-beam {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fill, 0px) - 60px), transparent var(--fill, 0px));
    mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--fill, 0px) - 60px), transparent var(--fill, 0px));
}

.k2-place > i {
    position: absolute;
    top: .2rem;
    left: calc(-3.2rem + .9rem - 5px);
    width: 11px;
    height: 11px;
    border: 1px solid rgba(245, 244, 241, .35);
    border-radius: 50%;
    background: var(--carbon);
    transition: background-color 1.2s var(--glow-ease), border-color 1.2s var(--glow-ease), box-shadow 1.2s var(--glow-ease);
}

.k2-place.is-on > i {
    border-color: rgba(var(--luz-core), .9);
    background: rgb(var(--luz-core));
    box-shadow: 0 0 10px 2px rgba(var(--luz), .55), 0 0 28px 8px rgba(190, 128, 64, .22);
}

.k2-place__lat { display: block; color: rgba(var(--luz), .78); font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }

.k2-place h3 {
    margin: .7rem 0 .45rem;
    font-family: var(--serif);
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.k2-place p { margin: 0; color: rgba(245, 244, 241, .6); font-size: .9rem; font-weight: 300; line-height: 1.6; }
.k2-place .k2-place__time { margin-top: .8rem; color: rgba(245, 244, 241, .5); font-size: .78rem; letter-spacing: .04em; }
.k2-place__time span { color: var(--hueso); font-variant-numeric: tabular-nums; font-weight: 500; }

.k2-map__mid { margin: 0; color: rgba(245, 244, 241, .5); font-family: var(--serif); font-size: 1.05rem; font-style: italic; font-weight: 300; }
.k2-map__mid b { color: var(--hueso); font-weight: 300; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .k2-ways { grid-template-columns: 1fr; }
    .k2-map { max-width: 34rem; }
}

@media (max-width: 820px) {
    .k2-letter { padding: 5.5rem 1rem; }
    .k2-letter__head { grid-template-columns: 1fr; padding: 0 .5rem; }
    .k2-letter__head .v3-body { justify-self: start; }
    .k2-form { padding: 2.2rem 1.2rem 2rem 2.5rem; font-size: 1.22rem; }
    .k2-form__margin { left: 1.15rem; top: 1rem; bottom: 1rem; }
    .k2-form__foot .v3-button { width: 100%; justify-content: center; }
    .k2-steps { grid-template-columns: 1fr; gap: 0; border-top: 0; }
    .k2-step { padding: 2rem 0 2.4rem; border-top: 1px solid rgba(17, 17, 17, .14); }
    .k2-eta { border-radius: 1.1rem; align-items: flex-start; }
    .k2-eta svg { margin-top: .15rem; }
    .k2-ways { padding: 5.5rem 1.5rem; }
    .k2-ways__list li { grid-template-columns: 1fr; }
    .k2-ways__list small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .k2-l, .k2-form__foot { transition: none; }
    .k2-form.is-writing .k2-l { opacity: 1; }
}