/*
 * Lunako — Info, Contacto, formulario y footer
 */

.lk-rule {
  width: calc(100% - 2 * var(--lk-gutter)); max-width: var(--lk-max);
  height: 1px; margin: 0 auto; background: var(--lk-line-light);
}

/* ================================ botón ================================ */

.lk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 18px 34px;
  background: var(--lk-ink); color: var(--lk-light);
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase;
  transition: background var(--lk-dur-veil) var(--lk-ease),
              color var(--lk-dur-veil) var(--lk-ease),
              transform var(--lk-dur-veil) var(--lk-ease);
}
.lk-btn:hover, .lk-btn:focus-visible { background: var(--lk-accent); transform: translateY(-2px); }
.lk-btn[disabled] { opacity: .55; pointer-events: none; }

/* Mensaje enviado: el botón se queda en verde, lleno, con el texto «enviado».
   Sigue desactivado —no se reenvía—, pero sin la opacidad del estado
   «enviando», que lo dejaba apagado justo cuando tiene algo que decir. */
.lk-btn.is-ok,
.lk-form--footer .lk-btn.is-ok { background: var(--lk-ok); color: var(--lk-light); opacity: 1; transform: none; }

/* Sobre grafito el botón es hueso con tinta. */
.lk-form--footer .lk-btn { background: var(--lk-bone); color: var(--lk-ink); }
.lk-form--footer .lk-btn:hover, .lk-form--footer .lk-btn:focus-visible { background: var(--lk-accent); color: var(--lk-light); }

/* ================================= Info ================================= */

.lk-info__cab {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px;
}
.lk-info__id { display: flex; align-items: flex-start; }
.lk-info__id .lk-sello {
  width: clamp(88px, 7.5vw, 144px); height: auto;
  color: var(--lk-accent);
}

.lk-info__sobre { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lk-info__h2 {
  max-width: 686px;
  font-family: var(--lk-font-display); font-weight: 400;
  font-size: 24px; line-height: 1.56; letter-spacing: -.22px; color: var(--lk-ink);
}
.lk-info__texto { max-width: 522px; padding: 8px 0; color: var(--lk-muted); text-wrap: pretty; }

.lk-info__bloque { display: flex; flex-direction: column; gap: 48px; }
.lk-info__rotulo { color: var(--lk-muted); }
.lk-info__rotulo--equipo { padding-bottom: 48px; }

.lk-info__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px; }
.lk-info__col { display: flex; flex-direction: column; gap: 16px; }
.lk-info__h3 {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 24px; line-height: 1.35; letter-spacing: -.18px; color: var(--lk-ink);
}
.lk-info__lista {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 16px; line-height: 1.42; color: var(--lk-muted);
  white-space: pre-line;   /* una línea por servicio, tal como se escribe */
}

/* -------------------------------- equipo -------------------------------- */

.lk-equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; }
.lk-equipo__lista { display: flex; flex-direction: column; gap: 40px; }
.lk-equipo__intro { max-width: 584px; color: var(--lk-muted); text-wrap: pretty; }

.lk-persona {
  border-top: 1px solid var(--lk-line-light); padding-top: 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.lk-persona__nombre {
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 16px; letter-spacing: .2px; color: var(--lk-ink);
}
.lk-persona__dato, .lk-persona__idiomas {
  font-family: var(--lk-font-body); font-weight: 300; font-size: 14px; color: var(--lk-muted);
}
.lk-persona__idiomas { color: var(--lk-muted); }
.lk-persona__cv {
  margin-top: 14px;
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 16px; letter-spacing: 1.62px; text-transform: uppercase;
  color: var(--lk-muted);
}

.lk-equipo__imagen {
  position: relative; min-height: 420px; overflow: hidden;
  background: var(--lk-ink);
  display: flex; align-items: center; justify-content: center;
}
.lk-equipo__foto { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------ portfolio ------------------------------ */

.lk-portfolio {
  padding-block: 48px;
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: center;
}
.lk-portfolio__meta {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 16px; line-height: 1.35; color: var(--lk-muted); margin-top: 8px;
}

/* ------------------------------- clientes ------------------------------- */

.lk-logos { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.lk-logo { padding: 12px; min-width: 120px; display: flex; align-items: center; justify-content: center; }
.lk-logo img {
  max-height: 46px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter var(--lk-dur-veil) var(--lk-ease), opacity var(--lk-dur-veil) var(--lk-ease);
}
.lk-logo:hover img,
.lk-logo:focus-visible img { filter: grayscale(0); opacity: 1; }

/* =============================== Contacto =============================== */

.lk-mapa {
  /* Las dos medidas van en variables porque el lienzo las necesita para
     mantener la proporción: si aquí cambia el alto y allí no, se deforma. */
  --lk-mapa-alto: 540px;
  --lk-mapa-vh: 56vh;
  --lk-mapa-extra: 0px;   /* lo que se mete por debajo de la cabecera */

  position: relative; overflow: hidden;
  height: calc(var(--lk-mapa-alto) + var(--lk-mapa-extra));
  max-height: calc(var(--lk-mapa-vh) + var(--lk-mapa-extra));
  background: var(--lk-bg);
}

/*
 * El lienzo conserva la proporción del diseño; la banda lo recorta.
 *
 * El archivo lleva dentro el encuadre del Figma y preserveAspectRatio="none",
 * así que se estira a lo que mida su caja. Si esa caja fuera la banda, en el
 * móvil el mapa se aplastaría 4,5 veces: 390 de ancho por 473 de alto contra
 * una proporción de 3,56 a 1. Por eso el lienzo se calcula para cubrir la
 * banda manteniendo 1920 × 540, y lo que sobra se recorta por los lados.
 *
 * Las dos medidas juntas son un «cover»: cada una se queda con la mayor entre
 * cubrir la banda y respetar la proporción.
 */
/* Con la cabecera transparente el mapa sube por debajo de ella, en vez de
   empezar a su pie con un corte recto. La banda crece lo mismo que sube: la
   parte visible bajo la cabecera mide lo que medía. */
.lk-header-transparente .lk-mapa {
  --lk-mapa-extra: var(--lk-header);
  margin-top: calc(-1 * var(--lk-header));
}

.lk-mapa__lienzo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width:  max(100%, min(calc((var(--lk-mapa-alto) + var(--lk-mapa-extra)) * 1920 / 540),
                        calc((var(--lk-mapa-vh)   + var(--lk-mapa-extra)) * 1920 / 540)));
  height: max(100%, calc(100vw * 540 / 1920));
}
.lk-mapa__mundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
}

/* Barcelona. En el Figma, el punto está en 912 × 232 sobre un lienzo de
   1920 × 540, y el rótulo va centrado justo debajo. Va dentro del lienzo,
   que es lo que guarda esa proporción. El punto es el sello de la marca. */
.lk-mapa__sede {
  position: absolute; left: 47.5%; top: 42.96%;
  display: block; width: 0; height: 0;
}
.lk-mapa__punto {
  position: absolute; left: -11px; top: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--lk-accent);
  box-shadow: 0 0 0 9px rgba(177, 116, 87, .12);
}
.lk-mapa__punto .lk-sello { display: block; width: 100%; height: 100%; max-width: none; }

/* Dos ondas con el mismo recorrido y medio ciclo de desfase: así el latido no
   tiene pausa. Nacen del punto y se apagan al crecer. */
.lk-mapa__punto::before,
.lk-mapa__punto::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 1px solid var(--lk-accent);
  animation: lk-pulso 3.2s cubic-bezier(.16, .6, .3, 1) infinite;
}
.lk-mapa__punto::after { animation-delay: 1.6s; }

@keyframes lk-pulso {
  from { transform: scale(1);  opacity: .55; }
  to   { transform: scale(2.5); opacity: 0; }   /* el mismo alcance que tenía el punto de 6 px */
}

.lk-mapa__marcador {
  position: absolute; left: 0; top: 19px; transform: translateX(-50%);
  font-family: var(--lk-font-body); font-weight: 500;
  font-size: 9px; line-height: 1; letter-spacing: 1.35px; text-transform: uppercase;
  color: var(--lk-muted); white-space: nowrap;
}
.lk-mapa__pie {
  position: absolute; left: var(--lk-gutter); bottom: 24px;
  font-family: var(--lk-font-body); font-weight: 400;
  font-size: 9px; line-height: 1; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--lk-muted);
}

/* Sin latido, pero el punto se sigue viendo: el halo fijo es el del diseño. */
@media (prefers-reduced-motion: reduce) {
  .lk-mapa__punto::before,
  .lk-mapa__punto::after { animation: none; opacity: 0; }
}

.lk-contacto__cuerpo {
  border-top: 1px solid var(--lk-line-light);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.lk-contacto__datos {
  border-right: 1px solid var(--lk-line-light);
  padding: 64px var(--lk-gutter);
  display: flex; flex-direction: column; gap: 40px;
}
.lk-contacto__form { padding: 64px var(--lk-gutter); display: flex; flex-direction: column; gap: 40px; }
.lk-contacto__rotulo { color: rgba(26, 25, 22, .8); }

/* La invitación va por debajo del titular de la página en peso y en tamaño:
   abre el bloque de datos, no compite con él. El hueco lo pone el gap de la
   columna, así que aquí solo se separan el título y su párrafo. */
.lk-contacto__invita { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.lk-contacto__invita-t {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 24px; line-height: 1.3; letter-spacing: -.2px;
  color: var(--lk-ink); margin: 0; text-wrap: balance;
}
.lk-contacto__invita-p { color: var(--lk-muted); margin: 0; text-wrap: pretty; }

.lk-contacto__filas { display: flex; flex-direction: column; padding: 8px 0; }
.lk-contacto__fila {
  border-top: 1px solid rgba(26, 25, 22, .08); padding: 20px 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.lk-contacto__valor {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6; color: var(--lk-ink);
}
.lk-social { display: inline-flex; width: 24px; height: 24px; min-height: 24px; align-items: center; justify-content: center; }
.lk-social img { width: 18px; height: 18px; opacity: .55; transition: opacity var(--lk-dur-veil) var(--lk-ease); }
.lk-social:hover img, .lk-social:focus-visible img { opacity: 1; }

/* =============================== formulario =============================== */

.lk-form { display: flex; flex-direction: column; gap: 28px; }
.lk-form__campos { display: flex; flex-direction: column; }
.lk-form--footer .lk-form__campos { gap: 28px; }

.lk-field {
  display: block; position: relative;
  border-bottom: 1px solid rgba(26, 25, 22, .15);
  padding: 20px 0 14px;
  transition: border-color var(--lk-dur-veil) var(--lk-ease);
}
.lk-field:hover, .lk-field:focus-within { border-bottom-color: rgba(26, 25, 22, .45); }

.lk-field__label {
  display: block; padding-bottom: 10px;
  font-family: var(--lk-font-body); font-weight: 400;
  font-size: 9px; letter-spacing: 1.62px; text-transform: uppercase;
  color: var(--lk-muted);
}
.lk-field__input {
  width: 100%; display: block; min-height: 0;
  font-family: var(--lk-font-display); font-weight: 300;
  font-size: 18px; line-height: 1.4; color: var(--lk-ink);
}
.lk-field__input::placeholder { color: var(--lk-muted); }
textarea.lk-field__input { resize: vertical; }
.lk-field__rule { display: block; width: 0; height: 1px; background: var(--lk-accent);
  position: absolute; left: 0; bottom: -1px;
  transition: width .6s var(--lk-ease); }
.lk-field:focus-within .lk-field__rule { width: 48px; }

/* Sobre grafito */
.lk-form--footer .lk-field { border-bottom-color: var(--lk-bone); padding: 10px 0 14px; }
.lk-form--footer .lk-field__label {
  font-family: var(--lk-font-display); font-weight: 425;
  font-size: 16px; letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, .8);
}
.lk-form--footer .lk-field__input { font-size: 17px; color: var(--lk-light); }
.lk-form--footer .lk-field__input::placeholder { color: rgba(240, 237, 232, .35); }
.lk-form--footer .lk-field:hover, .lk-form--footer .lk-field:focus-within { border-bottom-color: var(--lk-accent); }

.lk-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 0; }
.lk-consent input { margin-top: 3px; accent-color: var(--lk-accent); width: 15px; height: 15px; min-height: 0; flex: none; }
.lk-consent span {
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 13px; line-height: 1.6; color: var(--lk-muted);
}
.lk-consent a { color: var(--lk-ink); border-bottom: 1px solid rgba(177, 116, 87, .6); }
.lk-form--footer .lk-consent span { font-size: 12px; line-height: 1.65; color: rgba(240, 237, 232, .55); }
.lk-form--footer .lk-consent a { color: rgba(240, 237, 232, .85); }

.lk-form__aviso {
  font-family: var(--lk-font-body); font-weight: 400; font-size: 14px; line-height: 1.5;
  color: var(--lk-accent-ink); margin: -8px 0 0;
  padding-left: 12px; border-left: 2px solid var(--lk-accent);
}
.lk-form__aviso:empty { display: none; }
.lk-form--footer .lk-form__aviso { color: var(--lk-accent-dark); border-left-color: var(--lk-accent-dark); }

/* Con éxito el que habla es el botón. El aviso sigue llevando el texto, para
   los lectores de pantalla (role="status"), pero no se pinta dos veces. */
.lk-form__aviso.is-ok {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* El campo que falta o está mal: filete y rótulo en terracota hasta que se
   vuelve a escribir en él. */
.lk-field.is-error,
.lk-field.is-error:hover { border-bottom-color: var(--lk-accent); }
.lk-field.is-error .lk-field__label { color: var(--lk-accent-ink); }
.lk-consent.is-error span { color: var(--lk-accent-ink); }
.lk-consent.is-error input { outline: 2px solid var(--lk-accent); outline-offset: 2px; }
.lk-form--footer .lk-field.is-error .lk-field__label,
.lk-form--footer .lk-consent.is-error span { color: var(--lk-accent-dark); }

/* reCAPTCHA. La insignia flotante de Google se oculta —se pondría encima del
   diseño y del cursor— y en su lugar va el aviso, que es lo que Google pide
   para poder ocultarla. */
.grecaptcha-badge { visibility: hidden; }
.lk-form__recaptcha {
  margin: -8px 0 0;
  font-family: var(--lk-font-body); font-weight: 300;
  font-size: 11px; line-height: 1.6; color: var(--lk-muted);
}
.lk-form__recaptcha a { color: inherit; border-bottom: 1px solid currentColor; }
.lk-form--footer .lk-form__recaptcha { color: var(--lk-on-dark-muted); }

/* ================================= footer ================================= */

.lk-footer { background: var(--lk-dark); padding: 88px var(--lk-gutter) 44px; }
.lk-footer--sin-form { padding-top: 44px; }
.lk-footer__inner { max-width: var(--lk-max); margin: 0 auto; }

.lk-footer__cta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 64px; padding-bottom: 88px;
}
.lk-footer__titular { max-width: 771px; color: #fff; text-wrap: pretty; }

.lk-footer__rule { height: 1px; background: rgba(255, 255, 255, .4); }

.lk-footer__datos {
  padding: 30px 0;
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: center;
}
.lk-footer__datos { color: var(--lk-light); }
.lk-footer__datos .lk-marca { opacity: .85; }

.lk-footer__personas { display: flex; flex-wrap: wrap; gap: 48px; }
.lk-footer__persona { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.lk-footer__persona > * {
  font-family: var(--lk-font-body); font-weight: 300; font-size: 13px;
  color: rgba(240, 237, 232, .7);
}
.lk-footer__nombre { color: var(--lk-on-dark-muted); }

.lk-footer__legal {
  padding-top: 27px;
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
}
.lk-footer__copy {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  font-family: var(--lk-font-body); font-weight: 300; font-size: 11px;
  color: rgba(240, 237, 232, .5);
}
.lk-footer__punto { color: rgba(240, 237, 232, .25); }
.lk-footer__legales {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 79px); justify-content: flex-end;
  font-family: var(--lk-font-body); font-weight: 300; font-size: 11px;
  color: rgba(240, 237, 232, .5);
}

/*
 * Contacto en móvil.
 *
 * El correo y el teléfono son el contenido de esta página, y salían a 14 px con
 * los rótulos a 9. Suben a un tamaño que se lee con el teléfono en la mano y sin
 * acercárselo a la cara. Y la banda del mapa baja a la mitad: ocupaba media
 * pantalla antes de llegar a los datos.
 */
@media (max-width: 900px) {
  .lk-mapa { --lk-mapa-alto: 270px; --lk-mapa-vh: 28vh; }
  .lk-mapa__pie { font-size: 10px; letter-spacing: 1.4px; }

  .lk-contacto__valor { font-size: 18px; line-height: 1.45; }
  .lk-contacto__invita-t { font-size: 21px; }
  .lk-field__label { font-size: 11px; letter-spacing: 1.4px; }
  .lk-consent span { font-size: 14px; line-height: 1.55; }
  .lk-form__aviso { font-size: 15px; }
  .lk-persona__idiomas, .lk-persona__cv { font-size: 13px; }
}
/*
 * Footer en móvil: todo a la izquierda y en una sola columna.
 *
 * Las personas dejan de alinearse a la derecha, que solo tiene sentido
 * frente al logotipo en escritorio. Y la última franja se apila: copyright,
 * enlaces legales y, al final, el crédito. El crédito vive en el mismo
 * párrafo que el copyright; con display: contents ese párrafo deja de ser una
 * caja y sus piezas pasan a ser filas de la columna, así que se pueden
 * ordenar sin tocar el marcado de escritorio.
 */
@media (max-width: 900px) {
  .lk-footer__persona { align-items: flex-start; }

  .lk-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lk-footer__copy { display: contents; }
  .lk-footer__punto { display: none; }
  .lk-footer__legales { order: 1; flex-direction: column; gap: 14px; justify-content: flex-start; }
  .lk-footer__credito { order: 2; }
}